Responsives design
Adaptive websites only provide a limited number of display options, but as the variety of mobile devices increase, there’s a bigger demand for more flexible display types. Many website operators prefer responsive design, which is also based on CSS3 media queries. As with adaptive design, the server delivers the same HTML code to all devices. This means that the site is available in every kind of layout variant under the same URL. But unlike adaptive design, the adaptation to the device’s screen size is carried out smoothly without a rigid grid of defined viewports. This allows a mobile site to fully utilize all the available space on the device’s screen. Due to the complexity of responsive designs, launching a website on this design principle is tedious and expensive. The content, as well as the layout, must be designed in a flexible way. Text segments, images, videos, and tables should work on smart TVs as well as on cell phones. Instead of developing their own designs, lots of website operators choose to use content management systems, like WordPress, Joomla, Drupal, and Typo3. These open source projects depend on large user and developer communities and offer a wide range of prefabricated design templates with responsive designs, some of which are free to use.
Advantages:
- Responsive designs take every display size into consideration, including mobile devices that will be on the market in the future.
- Just as is the case with adaptive design, no further mobile website design must be maintained.
- Good responsive designs offer user-perception comparisons on all supported devices.
- Google prefers responsive designs.
Disadvantages:
- Implementing a responsive design is costly (especially when it comes to pre-existing projects).
- Content from complex web pages can’t always be transferred to small displays so easily.
- Mobile devices load the same data amount as desktop PCs. Page loading times on mobile devices is thus usually slower than on separate mobile websites.