Modern web design – responsive & Co.


More than one way leads the user to a website, more often via mobile devices like smartphones.
The obvious conclusion: the content has to be mobile ready. There are different ways to provide constant user friendliness for all devices.

01. Responsive web design

A responsive website adapts to the characteristics of the used device. This does not only include the adaption to different viewports but also the adaption to different input options. Instead of a mouse click, the websites respond 
to touch control.

One Layout, total flexibility


There were alway different screen sizes, but the challenge for a responsive website is the adaptation of the design to all different viewports. 
This can only be achieved, if the single parts of the design are adjustable.

The example above shows a basic website layout for a desktop pc.
This layout includes a number of flexible elements which adapt their size and arrangement to the device (here: laptop, tablet and smartphone).
All devices are using the same elements of the website, but display them differently to provide the best user experience.

Current technology

The flexibility of responsive websites is achieved trough current technology like HTML5 and CSS3.
After querying the display and device properties, the ideal design for the selected resolution is retrieved.

Equal content, new layout

Every single element of a responsive website like the navigation bar, images and text containers can be rearranged. The content of these different elements stays steady. This creates a uniform design of the website, regardless of  the user accessing the page via smartphone, tablet or desktop.

02. Adaptive web design


An adaptive website can also be displayed on many devices. 
The big advantages are the lower conception and execution times. 
The disadvantage is that the website can not be viewed on all devices with consistently high quality.

Many layouts, limited flexibility

In contrast to Responsive Design not only one layout is created but one for any desired size. Resolution sizes for which no layout has been designed 
and created get a corresponding layout assigned. Adaptive design is more simple in design and implementation and is sufficient in many cases to represent sites on different devices.

In our example, the layouts for the laptop, a small tablet and the smartphone have been created.
The desktop computer and the larger tablet each get the layout for the next smaller output device assigned.

Layout diversity saves development time

In the adaptive approach a standalone version of the website 
will be developed for specific viewports of smartphones, 
tablets and desktop PCs. Often one works with a completely fixed layout, so that the implementation of such a website is 
time-saving and simple.

Usability of the website

The adaptive website offers various possibilities to increase the usability despite tough transitions. For the different versions functionalities can easily be added or removed to relieve the layout on mobile devices.

Mobile first


Websites that are preferably called on mobile devices, are also designed primarily for mobile devices.
Mobile first is the paradigm to optimize websites for smartphones and then adapt them for larger Viewpoints.

The smartphone as a starting point

The focus of the design is on clarity and only relevant information, according to the principle: 
it is easier to add information than to omit them.

Low volume of data, high speed

The smallest possible data volume also is a focus so that smartphones and tablets can access the website without slow 
load times. With the development of larger displays, the properties of the mobile version are kept in order to guarantee a perfect presentation and best performance.
Christoph HakenbergContact for responsive web design

Is your website already usable on mobile devices?

You are welcome to directly pose a question or a request by phone, by e-mail or through our contact form.
We look forward to your contact!
+49 (0)202 430940