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.
Progressive enhancement enables websites to be usable even when using a very basic mobile phone. The mobile browser doesn't need to download a lot of CSS and JavaScript code (for example) that it doesn't know what to do with.
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
mediaattribute for this link, you'll notice that it has a
min-widthcondition. The
enhanced.cssfile will only be included if the device is larger than 800px. Inside
enhanced.css, the web designer can override properties from the
style.cssstyle 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.