Ever since the Internet moved into the commercial lane, website design has been oriented towards how it is displayed on computer screens. With the development of touchscreen devices such as tablets and smartphones, mobile Internet use is also increasing significantly. Accordingly, web design is increasingly addressing 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, the user-friendliness suffers significantly.
Table of contents
What exactly is responsive design?
With the responsive web design the website is flexibly adapted to the respective end device in order to ensure the user experience on mobile end devices as well. If a newly created website is initially optimized for mobile use and later expanded for large screens, a concept called "mobile first" is present. In addition, the website can be programmed so that its functions are oriented to the graphic 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 the requirements of the user; it reacts to the resolution of the mobile device and corresponds with it. In comparison, conventional websites and online stores are usually rigidly constructed in terms of their layout. With responsive design, the elements for navigation and content as well as the structural design 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 on the term again, calling the design one of the most important developments of the year.
Trendsetting web design
Since Apple introduced the iPhone in 2007, the number of mobile devices with touchscreens has been growing steadily. The number of users surfing the Internet with smartphones and tablets is increasing accordingly. If the user experience of a website on small displays is poor, this leads to a loss of conversions, for example. Conversion describes a process in online marketing that converts a store visitor into a buyer. Responsive design enables a user-friendly shopping experience for the widest possible range of users and is therefore not only expedient, but also forward-looking in terms of technical development.
Web designers have to take into account a high number of different devices and adjust the websites to the corresponding 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 therefore ends where that of a standard computer desktop begins.
Responsive design as current standard
Mobile friendliness" has been one of Google's most important ranking criteria since April 21, 2015. For webmasters and SEO specialists, responsive design has been a top priority since this date at the latest. Responsive design ensures that mobile Internet users can visit a website without any problems. In addition, this design variant requires the least 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 low mobile loading speed suffer disadvantages in the ranking.
The implementation of responsive design
HTML5 and CSS3 are used for the correct display of the web pages on mobile devices. Using media queries, information can be retrieved from the respective end device. This information includes the size of the display, the resolution, the format and certain technical options, for example, finger input, speech, etc. During implementation, it is imperative to strictly separate the layout and the content of a page. This is the only way to ensure the optimal functionality of responsive design.
Media queries under CSS3 distinguish 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 end devices, usually in only 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. Under certain circumstances, it may make sense to reduce some elements for smaller displays. In this case, only a different style sheet is used; 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 are unimportant and do not need to be considered on the mobile-enabled website version? The development takes time, but also offers numerous opportunities for further SEO measures.
Are there alternatives to responsive web design?
For mobile optimization of websites, even Google itself supports and recommends responsive design. How much effort is required for the development depends on the size, complexity and functionality of the respective website. Once the design is developed, further maintenance is effortless and time-saving. The content only needs 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. For isolated mobile domains, the effort is significantly greater because, among other things, the content must be maintained separately. This also affects the ongoing, more extensive maintenance of data, as it must be ensured for two sites simultaneously. In addition, the technical effort for programmers and SEO specialists is higher, since meta tags and/or canonical tags must be implemented error-free in the source code.
Canonical tags are necessary if website content is used multiple times, if the start page can be reached via different domains, pages with different spellings can be called up, 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 pages.
The website administrator must make sure that the canonical tags are implemented on every single subpage. This way, each page points to itself, incorrect linking and unexpected errors are prevented or corrected.
Image source: unsplash.com