Responsive Webdesign

Responsive web design what's this?

Responsive Web-Design

Responsive Web Design

Under RESPONSIVE WEB DESIGN is defined as a flexible design that adapts to the particular output medium. For example, to display a smartphone or a laptop. The adjustments are dynamic and the transitions are smooth.

In the Responsive Development, we distinguish between two common methods.
The GRACEFUL-Degradation and MOBILE FIRST PRINCIPLE.

Responsive Web-Design

MOBILE FIRST

By the Mobile First-principle the design of a mobile device is first developed, and then for the next larger screen size, etc. This has the advantage that the code is only loaded, which is required for display on the mobile device. Thus, the source code is not bloated and is kept small and thus represents a gain in performance. For larger screens of the necessary code is loaded, but only the needed code.

Adaptive design

Often adaptive designs are issued as responsive. However, these are not. An adaptive design usually involves a design for a mobile, smartphone, one for tablets and one the PC version. These mostly have fixed widths and are optimized for each resolution.

How do I identify an adaptive design?

The easiest way to minimize this browser window from full screen to mobile view slowly. In an adaptive design, the display is detected by a hard break as soon as the next lower resolution is reached. In contrast, the transitions in a Responsive design are liquid.

  • Advantage of adaptive design: simple development.
  • Disadvantage: the fixed output sizes is restricted presentation. Given the many devices on the market and their different resolutions, compromises have to be accepted.

GRACEFUL-Degradation

Graceful-Degradation, in this case the design of the Web application is classically designed for larger screens. Subsequently, the breakpoint can be set for smaller devices. This method has the advantage that it is easier and faster for the developer.
Disadvantage when displayed on a smartphone, the entire source code of the web page is loaded. Then, the design is broken down into the smaller resolutions.

Media queries

Media queries are CSS instructions that are executed at the respective condition. Conditions can be:

Output medium
Screen, screen output
Print, edition for printing.
Screen width, query the screen resolution
fixed values
min, for a minimum screen size
max, for maximum screen size

Breakpoints

A breakpoint is defined as the points in the media queries where a design adaptation is to be executed if the condition is met.
Sample code media query with a breakpoint by 40em [640 px]:

        / * For iPhone 5 and similar (Portrait View) 640px * /
        @ media screen and (min-width: 40.000em) {
           Condition ...
        }
        

Breakpoint can be defined in px or em.