Trends in web browsing
Mobile devices are computers. But they generally differ from traditional desktop/laptops in two important ways:
- slower internet connection speeds
- smaller screens
- 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.
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 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 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 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.
Download example code of approaches to each kind of layout: Responsive_design_css_approaches.zip