Responsive web design
When responsive web design (in German also responsive web design called or short RWD , English responsive , reactive ' ) is a design and engineering paradigm for creating websites , so these on properties of the terminal used in each case, especially smart phones and tablet computers , can react.
The graphic structure of a "responsive" website is based on the requirements of the respective device with which the website is viewed. This applies in particular to the arrangement and display of individual elements such as navigations, side columns and texts, but also the use of different input methods using the mouse (click, run over) or touchscreen (tap, swipe). The technical basis for this are the newer web standards HTML5 , CSS3 (here in particular the media queries ) and JavaScript .
layout
The size and resolution of the displays on laptops , desktops , tablets , smartphones , e-book readers and televisions can vary considerably. For this reason, the appearance and operation of a website are heavily dependent on the end device. A challenge for graphic designers lies in the conceptual differentiation from classic print design: where it was once used and learned that the output medium had a certain and unchangeable size, it must now be accepted that rigid designs for a website are no longer transferable.
Websites with a responsive design take into account the different requirements of the end devices . The aim of this practice is for websites to adapt their presentation so that they are as clear and user-friendly as possible to every viewer. In addition to the size of the display device, criteria for the adapted appearance are, for example, available input methods (touchscreen, mouse) or the bandwidth of the Internet connection.
Block elements in particular must be treated differently: If the design grid uses several columns, the blocks can be variably adapted to the width of the respective viewport , with small resolutions, if a representation no longer fits next to one another, moved one below the other or alternatively positioned. Images should maximally be scaled to their surrounding element - but in principle not to their native size. Background textures can overflow hidden. Backgrounds with motifs are also left out in small images. Logos can be scaled down like pictures or replaced by a smaller signet for large and detailed graphics . Vertical menu bars often need a lot of width and can be repositioned as a list, also collapsed and only displayed with a click, then often on the hamburger menu icon or scroll position.
The inline element "Text" may only be scaled a little smaller in order to maintain legibility. However, since text wraps automatically , no special adjustment is necessary.
Differentiation from the mobile website
Colloquially, a website is i. A. already as responsive if she uses breakpoints, for example to reduce the size of navigation menus - even if she otherwise uses not only responsive, but fully or partially adaptive or liquid techniques (see below). The main difference to a mobile website is the number of templates .
From a historical perspective, the desktop version is the normal view of the website. An additional, independent template for mobile devices is added to this using the classic method. With responsive web design, on the other hand, only a single version of the website is created. This adapts itself to the available environment. This is particularly visible in the layout, which changes according to the width of the browser window.
Differentiation from an adaptive website
The graphic structure of an adaptive website also depends on the viewport of the respective device. However, you limit yourself to a fixed number of breakpoints , between which the layout remains static. A fluid adaptation to all resolutions as with responsive web design does not take place.
Differentiation from a liquid website
In contrast to the adaptive website, with a liquid layout, the available space is always used in the same percentage ratio. For example, if you change the width of the browser window on a liquid website on a desktop PC, the content will flow narrower, but since a purely liquid layout has no breakpoints, the arrangement of the layout elements remains unchanged.
In summary, responsive web design can therefore be characterized as an adaptive series of different liquid layouts.
technology
One essential requirement for responsive web design are so-called media queries , a CSS3 concept that allows different designs depending on certain properties of the output medium.
For example, the following properties can be used as criteria:
- Width and height of the browser window
- Size of the device itself
- Screen resolution
- Orientation (portrait or landscape)
- Input options (keyboard, finger gesture [Touch], language)
Use in HTML
<head>
<link rel="stylesheet" type="text/css" href="css/all.css" />
<link rel="stylesheet" type="text/css" media="all and (max-device-width: 480px)" href="css/smartphones.css" />
</head>
The stylesheet is smartphones.cssloaded here if the maximum screen width of the viewing device does not exceed 480 pixels. In this resource, developers can now make special adjustments for corresponding devices. Devices with a higher resolution remain unaffected. For example, you will get the website displayed in full size because you are all.cssapplying the settings from the stylesheet . When using media queries in HTML, it should be noted that browsers generally download all available stylesheets, even if they do not meet the specified conditions.
Use in CSS
Embedding media queries directly in the stylesheet is widespread. Certain rules are only considered by the browser if the defined conditions are met.
div {
display:inline-block;
width: 33%;
}
@media(max-device-width: 480px){
div {
display:block;
width: 100%;
}
}
Older browsers, such as Internet Explorer under version 9, cannot interpret CSS3 and especially media queries. In such cases, Polyfills can help, with the help of which a missing browser functionality can be upgraded with JavaScript.
Responsive websites are often implemented with CSS frameworks that provide numerous functions for varying sizes and resolutions.
distribution
Before 2011, websites for mobile devices mostly only existed as design and function-reduced versions of a desktop page e.g. B. under a subdomain (such as "m.domain.de"). The change to responsive design at a single address has been noticeably accelerated since around 2013 as part of "Responsive Relaunches" across almost all branches of commercial Internet offers.
The total share of responsive pages in more than 1 billion worldwide websites today is not measurable and is presumably negligible. For the "Top 100,000", however, it was estimated at 11% in 2014 - by taking into account all pages with non-static layouts.
If responsiveness is defined by the presence of viewport metatags, adherence to mobile screen widths and avoidance of mobile redirects, the following applies today to commercially relevant offers: half are already responsive. In 2016, according to Restive Insights, 63% of the 5,000 fastest-growing SMEs and 49% of the 1,000 best-selling companies in the USA had responsive websites. The global share for the 1,000 most important universities (50%) and the 500 most visited eCommerce sites (48%) is of the same order of magnitude.
Responsive web design for eCommerce offers (e.g. online shops, travel portals) has also become very popular on the German-speaking Internet. In other industries (e.g. price comparisons, weather, stock market portals), however, it is still rarely found. Currently, almost all relaunches on the Internet are based on responsive web design, and several leading German-language online services announce a corresponding restart every month.
Concept history
Ethan Marcotte first used the term “responsive web design” in May 2010 in an article for the magazine A List Apart , in which he referred to responsive architecture . In 2011 Marcotte took up the term again in his book Responsive Webdesign . In 2012, industry services such as .net magazine or Mashable named the new form of online presentation as one of the most important developments of the year, and Forbes magazine also advised the use of the new form of presentation in an article.
literature
- Ethan Marcotte: Responsive web design . 1st edition. A Book Apart, New York 2011, ISBN 978-0-9844425-7-7 .
- Christoph Zillgens: Responsive Web Design - Design and implement responsive websites . 1st edition. Carl Hanser Verlag, 2012, ISBN 978-3-446-43015-0 .
- CSS3: HTML5 and CSS3: Develop with Tomorrow's Standards Today. Pragmatic Programmers, ISBN 1-934356-68-9 .
- The Mobile Book. In: Smashing Magazine. Smashing Media, 2012.
Individual evidence
- ↑ kabelwelten.de
- ↑ blog.kulturbanause.de
- ↑ liquidapsive.com
- ↑ Respond.js (also for other browsers: compatibility can be found in the link, English).
- ↑ Guy's Pod: RWD Ratio in Top 100,000 websites - refined. ( Memento from November 14, 2016 in the Internet Archive )
- ↑ Restive Insights: State of the Mobile Web
- ↑ Responsive-Seiten.de
- ↑ Google+ Collection: Responsive Pages.
- ↑ Ethan Marcotte: Responsive Web Design. In: A List Apart.