What is Responsive Design?

Since the Internet took the commercial route, website design has been based on how it appears on computer screens. With the development of touchscreen devices such as tablets and smartphones, mobile internet usage is also increasing significantly. Accordingly, web design increasingly addresses the specific aspects of mobile Internet use. Websites look different on smaller displays than on large monitors. If the internet presence is not optimized for mobile devices, user-friendliness suffers significantly.

What exactly is responsive design?

With the responsive web design The website is flexibly adapted to the respective device in order to ensure the user experience also on mobile devices. If a newly created website is first optimized for mobile use and later expanded for large screens, this is a concept called “Mobile First”. In addition, the website can be programmed so that its functions are based on the graphical and technical options of mobile devices. In this case the webmaster speaks of “Progressive Enhancement”. In a figurative sense, the term responsive web design means “responsive web design”. This design follows user requirements; it reacts to the resolution of the mobile device and corresponds with it. In comparison, conventional websites and online shops are usually rigidly constructed in terms of their layout. With responsive design, the elements for navigation and content as well as the structural structure of the website adapt to the respective screen resolution. The term “responsive web design” was first used in May 2010 by graphic designer Ethan Marcotte. In an article in the magazine “A List Apart” he made reference to responsive architecture. A year later he published his book “Responsive Web Design”. In 2012, .net magazine and Mashable picked up the term again and described the design as one of the most important developments of the year.

Future-oriented web design

Since Apple introduced the iPhone in 2007, the number of mobile devices with touchscreens has continued to increase. Accordingly, the number of users who surf the Internet with smartphones and tablets is increasing. If the user experience of a website is poor on small displays, this can lead to a loss of conversions, for example. Conversion describes a process in online marketing that converts a shop visitor into a buyer. Responsive design enables a user-friendly shopping experience for the largest possible group of users and is therefore not only practical, but also forward-looking in terms of technical development. Web designers have to take into account a large number of different devices and align the websites to the appropriate screen resolution. The standard resolution of a smartphone is between 320 and 480 pixels, that of a tablet between 768 and 1,024 pixels. The resolution of a tablet ends where that of a standard computer desktop begins.

Responsive design as the current standard

“Mobile Friendliness” has been one of Google’s most important ranking criteria since April 21, 2015. Since this date at the latest, responsive design has been a top priority for webmasters and SEO specialists. Responsive design ensures that mobile internet users can visit a website without any problems. In addition, this design variant requires the least amount of design and technical effort compared to other options. In March 2018, Google officially started the rollout for its Mobile First index. For website operators, this means in plain language: Google checks the mobile version of their website to assess its relevance for mobile use. If Google indexes the mobile version of the website, the site operator receives information via Search Console. Since July 2018, websites with slow mobile loading speeds have suffered disadvantages in the ranking.

The implementation of responsive design

HTML5 and CSS3 are used to ensure the websites are displayed correctly on mobile devices. The information can be queried from the respective end device using media queries. This information includes the size of the display, the resolution, the format and certain technical options, such as input by finger, voice, etc. When implementing it, it is urgently necessary to strictly separate the layout and the content of a page. This is the only way to ensure optimal functionality of the responsive design. Media queries under CSS3 differentiate between “print” and “screen” and query other properties, for example whether the website should be displayed in portrait or landscape format.

Variable optics on mobile devices

Responsive design makes the same content of a website available for different devices, usually in a slightly modified design. Basically, the existing functional elements on a website are displayed in a different structure, for example when switching from portrait to landscape format. In some circumstances it may make sense to reduce some elements for smaller displays. It just uses a different style sheet; the HTML code is not changed. When a website is restructured, the position and availability of existing elements is a high priority. Which elements can be pushed further down? Which ones are unimportant and don’t need to be included in the mobile-friendly website version? Development takes time, but also offers numerous opportunities for further SEO measures.

Are there alternatives to responsive web design?

For the mobile optimization of websites, even Google itself supports and recommends responsive design. The amount of effort required for development depends on the size, complexity and range of functions of the respective website. Once the design has been developed, further maintenance is effortless and time-saving. The content only has to be created once and is then available for every device in every design. The alternative to responsive design is to develop a standalone mobile website, which is usually accessible under a subdomain. The effort is significantly greater for isolated mobile domains because, among other things, the content has to be maintained separately. This also applies to the ongoing, more extensive maintenance of the data, as it must be guaranteed for two sides at the same time. In addition, the technical effort for programmers and SEO specialists is higher because meta tags and/or canonical tags must be implemented correctly in the source code. Canonical tags are necessary when website content is used multiple times, when the homepage can be accessed via different domains, pages with different spellings can be accessed, the server allows address variations, content is offered in different views (PDF, print version, etc.), https variants of the page exist or the content is additionally published on external sites. The website administrator must ensure that the canonical tags are implemented on each individual subpage. This means that each page points to itself, incorrect links and unexpected errors are prevented or corrected. Image source: unsplash.com