Responsive Design

From Knowledge Kitchen
Jump to navigation Jump to search


Trends in web browsing

Current trends show that mobile and tablet device web browsing is on the rise, and by many counts has already overtaken traditional desktop/laptop web usage.

Mobile devices are computers. But they generally differ from traditional desktop/laptops in two important ways:

  • slower internet connection speeds
  • smaller screens


Implications

  • Slower connection speeds means that mobile users are less likely to click links and wait for new pages to load.
  • Smaller screens means that there is less stuff that can fit on a single page on a mobile device.


Design challenges

This situation leads to the following design challenges:

  • to design websites so that they look good on all devices: mobile, tablet, and desktop alike.
  • to make sure all users see the main information on page, regardless of what device they're using.

Some common design trends inspired by these mobile challenges include:

  • sites with fewer pages (because pages load slowly)
  • longer scrollable pages (because you now need to stick more stuff on the main page)
  • bigger fonts and less text per page (because screens are ridiculously small)
  • requiring users to click an icon (the hamburger icon) to get to the main navigation (because there isn't a lot of space to show everything at once).

Read more about how mobile is affecting web design trends.


Responsive design

Responsive design is the general term for designs that adapt to fit whatever screen size the user currently has.

There are two common approaches to responsive design:

  • scaling layouts that simply get bigger or smaller in responsive to changes in browser width
  • breakpoint-based layouts that automatically switch between several distinct layouts depending upon browser width


Scaling layouts

Scaling layouts use percentages instead of pixel values for all sizes. This allows them to scale proportionally to whatever browser width is currently being used. The layout stays the same, but simply gets bigger or smaller depending on browser width.

Breakpoint-based layouts

Breakpoint-based layouts rely on CSS Media Queries to switch between different CSS code depending upon the browser width currently being used. A typically breakpoint-based design may involve 3 different versions of CSS: one for mobile-, one for tablet-, and one for desktop-sized browsers. The layouts may be completely or only partially different for each different device.

Example code

Download example code of approaches to each kind of layout: Responsive_design_css_approaches.zip


What links here