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.


Photo courtesy of Phil Campbell

The following two tabs change content below.
Kevin Fukawa is a web consultant, developer and project manager who has been building web sites and implementing online technologies for health care and non-profit clients since the late '90s. Continual learning in such a fast-paced and evolving field keeps him energized and excited about the web, mobile and social media.

7 thoughts on “Geek speak: Mobile web design explained


    Very good article. I certainly love this site. Keep writing!


    Spot on with this write-up, I actually think this website needs much
    more attention. I’ll probably be back again to see more, thanks for the info!


    I really like it when individuals come together and share
    views. Great site, stick with it!


    Hello! Someone in my Facebook group shared this website with us so
    I came to take a look. I’m definitely enjoying the information. I’m book-marking and will be tweeting this to my followers!
    Excellent blog and amazing design and style.

  5. strona www

    Hi there would you mind letting me know which hosting company you’re utilizing? I’ve loaded your blog in 3
    completely different internet browsers and I
    must say this blog loads a lot quicker then most. Can
    you recommend a good internet hosting provider
    at a fair price? Many thanks, I appreciate it!

  6. Kevin Post author

    @strona / tutaj – if you’re looking for decent web hosting, I can provide it for you. Please contact me via email and I can get you a quote based on your requirements.

  7. cencencen

    Very nice post. I simply stumbled upon your weblog and wished to
    mention that I’ve really enjoyed browsing your blog posts.
    In any case I’ll be subscribing to your feed and
    I hope you write again soon!

Comments are closed.