Mobile First Web Design
Two big categories of strategies have been employed over the years to support web design for mobile devices: graceful degradation and progressive enhancement. Much of the web is currently nearly unusable on mobile devices because it was designed for desktop browsers and doesn’t adapt well to small screens.
Mobile web users are often forced to zoom, scroll, pinch, squint, and make their fingers as small as possible to use the majority of websites designed more than a couple years ago.
Graceful degradation web design strategy for mobile devices
The idea behind graceful degradation is to design your website primarily for desktop users, but to also design it in such a way that features of the desktop site that won’t work or fit on mobile devices will still be usable — if not pretty or as functional — on mobile devices.
Graceful degradation was a good design philosophy in the days before smartphones with full-featured browsers existed. However, graceful degradation does have major problems. Most importantly, graceful degradation forces the user to download your whole website, only to be shown a degraded version of it. On mobile devices, which often have limited bandwidth, this is not a good thing.
Progressive enhancement web design strategy for mobile devices
As a result of graceful degradation’s limitations, a new strategy called progressive enhancement has become popular. Progressive enhancement starts with the very most basic website and adds on features depending on what the user’s browser supports.
One way to visualize progressive enhancement is as a system that adds layers onto a website depending on the size of the browser or the features the browser supports.
Here’s a simple example of how two style sheet links can be used to enhance a mobile webpage for larger browsers:
<link rel="stylesheet" type="text/css" href="style.css" media="screen, handheld" /> <link rel="stylesheet" type="text/css" href="enhanced.css" media="screen and (min-width: 800px)" />
The first link includes style.css for any screen or handheld device. In this case, style.css contains styles that are optimized for a mobile device.
The second link is for a style sheet called enhanced.css. If you look at the media attribute for this link, you’ll notice that it has a min-width condition. The enhanced.css file will only be included if the device is larger than 800px. Inside enhanced.css, the web designer can override properties from the style.css style sheet to make the browser scale up for larger browser widths.
Mobile first design solves the browser size issue
Mobile first is a design philosophy that employs the ideas of progressive enhancement to build mobile websites first and then enhance them for desktop. The great thing about mobile first design is that when you build the mobile site first, as opposed to the other way around, you get a functional desktop site for free!
Think about all the websites you’ve seen that don’t fit in mobile browsers. Now, imagine visiting a mobile website with a desktop computer. A website that is optimized for a small screen will always work on a desktop browser — even if it does end up not filling the entire browser window.