Tag Archives: geek speak

Geek speak: Mobile web design explained

One of the most important recent trends in online communications is the focus on mobile or mobile-friendly web design. But what does it really mean, and why should you care?

people using smartphonesHave you ever been frustrated by trying view a website on your smartphone? Either you can only see a tiny fraction of the page, or you can see the entire page but everything is so small it’s impossible to read or use. Yes, you can pinch-and-zoom, then scroll from side-to-side so you can read the website’s content, but the experience is like trying to read a magazine through a keyhole – not exactly ideal.

Today, an increasing number of people are using a mobile device to visit websites, such as a smartphone (like the iPhone) or a tablet (like the iPad and iPad mini). The statistics clearly reflect this trend to tinier technology: By 2012, up to 70% of Canadians were using mobile devices1, and 69% of all Internet users did so through a mobile device.2

Many sites that were originally designed for the desktop computer monitor really don’t work well on a 4-inch smartphone screen, leaving mobile users frustrated and disengaged. That’s where mobile web design comes in.

Simply put, mobile web design – also known in the developer world as responsive web design, adaptive design or mobile-optimized web design – is about building websites so that they look good and work properly for visitors no matter what device they’re using. In fact, some developers take a “mobile-first” approach, believing that if you can create a great web experience specifically for a smartphone screen first, it’s easier to adapt that for larger screens rather than the other way around.

Mobile web design makes a huge difference to the website user’s experience. If a site is mobile-friendly, it will look good in both portrait and landscape orientations on a smartphone or a tablet, it will be easy to read, and the navigation will be simple to use. The experience should be just as satisfying as it would be if you were using a larger device.

For one example of how mobile web design works, you can take a look at our Monkey Hill website. Look at it on your smartphone, or, if you’re viewing a site on your desktop or laptop computer, try minimizing or resizing your browser window. As you shrink the viewing area, you should see the layout automatically adapt. (Unfortunately, if you’re using an outdated or non standards-compliant browser such as an old version of Internet Explorer, you won’t notice any difference. If you’re stuck using IE8 or earlier due to IT department restrictions, I’ll blog about a solution shortly.)

If you’re looking to bring your own website into the world of mobile, your first step will be to get an assessment from an experienced developer about what’s involved. A great deal depends on how your existing site was developed. In a best-case scenario, going mobile-friendly will simply require changing a few rules in your website’s stylesheet without having to touch any of the underlying code. At the other extreme, you may be looking at a complete overhaul: migrating to a different Content Management System (CMS), completely rewriting your HTML, reprocessing all your graphics, etc.

Either way, you can’t ignore what your key stakeholders are doing. If you want to engage with your audience, you need to be where they are, and increasingly, that’s on mobile.

  1. http://www.6smarketing.com/infographic-canadian-internet-usage-statistics/
  2. http://www.accenture.com/SiteCollectionDocuments/PDF/Accenture-Mobile-Web-Watch-Internet-Usage-Survey-2012.pdf

Photo courtesy of Phil Campbell