Online Test Banks
Score higher
See Online Test Banks
eLearning
Learning anything is easy
Browse Online Courses
Mobile Apps
Learning on the go
Explore Mobile Apps
Dummies Store
Shop for books and more
Start Shopping

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.

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 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.

  • Add a Comment
  • Print
  • Share
blog comments powered by Disqus
Advertisement

Inside Dummies.com

Dummies.com Sweepstakes

Win $500. Easy.