What do you understand about responsive websites

Responsive Website - How to "please" everyone

Figures prove it: the mobile Internet is becoming more and more important!

According to the ADR-ZDF study, over 80% of Germans are now online. An important aspect is the increasing use of mobile devices and the mobile web. This is also confirmed by a study by Nordlight Research GmbH. It says that around 55% of Germans are regularly online via mobile devices. 42% of mobile users use the mobile Internet as often as the stationary Internet or even more frequently.

And that also applies to B2B decision-makers. Almost 90 percent of all B2B decision-makers use smartphones and tablets for business purposes on a daily basis, according to Forbes Insight. Particularly interesting: around 80 percent of those surveyed stated that they conduct product research using a mobile device. Mobile shopping is also clearly on the advance.

Why does a website have to do more today than it used to be?

The requirements for a modern and adaptive website have grown significantly in recent years. A multitude of different devices such as smartphones and tablets flood the market and place a website under enormous pressure to perform: “It has to please everyone”. The website should not only understand the respective end device - i.e. reproduce it correctly, in particular the user must be picked up with their individual intentions. Different technical requirements, screen sizes and input options as well as usage habits and intentions vary depending on the device and require more complex solutions and concepts in terms of design, technology, content, quality assurance and overarching project management. Interdisciplinary thinking and acting is required from all those involved in the project. Interface communication and processes must be defined and continuously updated.

The goal: A positive user experience on all channels

A good website welcomes all visitors and does not exclude anyone. This is expressed in a “positive user experience” for the visitors. A website should not only look and function well in terms of design on all end devices, but should also be fun for the user and be easy to use. In short: He should find what he is looking for and like to linger.

The solution: "Responsive Websites"

With regard to the layout and the structural structure, this means that the website automatically adapts itself optimally to the respective end device. The website therefore reacts to the properties of the respective end device. This concept can be illustrated with the idea “Content is like water”. Water adapts to the vessel in which it is located. The same applies to content that reacts "responsively". I. E. the content adapts to the "vessel", in our case the device used.

"Media Queries" and "Breakpoints" are the new parents with the right to educate a website: With the help of CSS3 Media Queries, the page is told how to behave with different sizes and formats. Usually a website has at least three breakpoints, for each of which layouts are predefined. A breakpoint is a pixel value from which a page layout adapts to a display size. Sizes and widths are no longer specified in a fixed manner but as a percentage in relation to the display sizes.

Responsive also means "loading times optimized"

Page speed and ease of use are important factors in mobile websites. This must be taken into account in the conception, the design, the CSS specifications and ultimately the technical implementation in the development. In the mobile version, there is no need for graphics or animations that require intensive loading times.

Expectation and perception of content on different end devices.

The mobile visitor uses the Internet differently than the stationary one. He is looking for other content. Therefore, content on the web can be of a very different nature, so a slimmed-down mobile version of your website can also make sense from a content perspective. A sophisticated layout and content concept is therefore an important basis for responsive websites. On the desktop version, much more content can be captured and scanned at a glance. Aesthetics and arrangement play a much more important role here. The situation is different on the restricted, narrow mobile version: The elements break down and line up to form an “element tower” (called “stacking” in technical terms). This mobile view should not be burdened with long loading times and large images, as this could annoy our visitors and, in the worst case, even lose them. Important content should be above.

Significant questions are:
1. What is the mobile user looking for on your website when they are on the go?
2. And what might interest him when he is sitting in the office and surfing the web with full bandwidth and leisure?
In order to clarify the differences in use and requirements of the various devices, here is a brief comparison.

# 1 layout / design

Desktop: Usual font sizes, large visible area, should be aesthetic and may convey more image, may work with effects and animations
Mobile: Easily legible font, pay attention to more contrast, stacking: elements are lined up one below the other, should be practical, usability is more important

# 2 loading times

Desktop: May be higher.
Mobile: Should be as low as possible.

# 3 navigation

Desktop: May always be visible (usually horizontally or vertically).
Mobile: Navigation elements break, menu bars are collapsed or displayed as a list

# 4 content

Desktop: May be more extensive - but clear. Important content is highlighted graphically.
Mobile:Can be shown collapsed, important content should be above.

# 5 input methods

Desktop: Mainly mouse, scroll bar, anchor buttons with e.g. "OnePagers".
Mobile: Touchscreen (finger)

# 6 hardware / operating systems

Desktop: Various Windows and Mac systems.
Mobile: iPhone iOS, Galaxy Android, iPad, Kindle

# 7 alignment

Desktop:Landscape format with scroll bar
Mobile: Upright format (portrait), landscape format (landscape)

# 8 intentions

Desktop:Mainly in the office communication, information / news, shopping, entertainment, product information, professional and private research, comparisons (working with many open tabs, banking, radio, TV / films ...
Mobile: Mostly on the go on the smartphone. short stay, brief information, “private e-mails (61% of users), short search engine queries (60%), news reception (51%), use of social networks (48%), free time. On the tablet on the go and at home. Surfing, shopping, reading the news, films, recipes ... (Source: ARD ZDF study)

# 9 length of stay

Desktop:Significantly longer
Mobile:Short but often

# 10 browser compatibility

Desktop: Chrome, Firefox, Safari, Internet Explorer (more information on market shares on statista)
Mobile: Chrome, UC Browser, Safari, Samsung Internet (more information on market shares on statista)

Responsive web design therefore means placing the focus on the user and their behavior. And: Always question what information is relevant to the respective usage situation and how the user interacts with the content. We will soon report in another article what this means in terms of testing responsive websites!