Responsive Webdesign
In Responsive Web Design ( in German also responsive web design) is a creative and technical approach to the creation of websites, so that these sites can respond to properties of the terminal used in each case. The graphical structure of a " responsive " website is based on the requirements of each device with which the page is viewed. This concerns in particular the arrangement and display of individual elements, such as navigation, sidebars and text. Technical basis for this newer web standards like HTML5, CSS3 and JavaScript.
- 2.1 Use in HTML
- 2.2 Using CSS
Basics
The size and resolution of displays on laptops, desktops, tablets, smartphones, e- book readers and TV sets can vary considerably. For this reason, the appearance and operation of a website are highly dependent on the terminal. Sites are equipped with a reactive design to take into account the different requirements of the terminals. The purpose of this practice is that sites adapt their display so that they present themselves every viewer as clear and user friendly as possible. Criterion for the custom appearance, in addition to the size of the display device, for example, available input methods ( touch screen, mouse) or the quality of the Internet connection.
Demarcation from the mobile website
The main difference between a ' mobile ' version and a responsive design is the number of templates. From a historical perspective, the desktop version is the normal view of the website. This adds an additional, independent template for mobile devices using the conventional method.
In responsive web design only a single version of the website is created. This adjusts itself automatically to the area available. This is particularly visible in the layout, which varies according to the width of the browser window.
The decision for a responsive web design or just a separate mobile template will depend on the purpose of the website.
Technology
An essential prerequisite for responsive web design are so-called media queries, CSS3 - a concept that allows different designs depending on certain properties of the output medium.
For example, the following properties can be used as criteria:
- Size of the device itself
- Screen resolution
- Orientation (portrait or landscape)
- Input methods (keyboard, finger gesture [Touch ], language)
Use in HTML
Here the style sheet is smartphones.css charged when the maximum screen width of the viewing device does not exceed 480 pixels. In this resource developers can now make special adjustments for such devices. Devices with higher resolution remain unaffected. You get the website say for example at full size, as they apply the provisions from the stylesheet all.css. When using Media Queries in HTML is to be noted that browsers always download all available stylesheets, even if they do not meet the specified conditions.
Using CSS
Widespread is the embedding of media queries directly in the style sheet. Thus, certain rules by the browser will only be considered if the defined conditions are met.
A { color: pink; } @ media ( max -device -width: 480px ) { a { color: blue; } } Older browsers can not interpret CSS3 and particularly media queries. In such cases, can be done by so-called " polyfills " Remedy, with the help of a missing browser functionality is retrofitted by javascript:
- CSS3 MediaQueries for Internet Explorer version 9
Conceptual history
The term " Responsive Web Design " by Ethan Marcotte was first used in May 2010 in an article for the magazine " A List Apart ", where he took to responsive architecture reference. He also attacked the concept in his book " Responsive Web Design " from the year 2011 again. 2012 Business services designated as the new form of online display as one of the most important developments of the year and Forbes magazine in an article advises to use the new form of representation, the net magazine. , Or Mashable.