Designing Websites for Mobile Devices

By February 17, 2012Uncategorized

What-You-Need-to-Know-About-Mobile-Web-Design

If you live in the US in 2012, there’s almost a 50% chance that you own a smartphone according to Nielsen’s 2011 State of Mobile Media Report.  The continuing rise of smartphone use means more and more people are accessing the web via handheld mobile devices.  As that transition from desktop to mobile browsing continues, the focus on providing mobile-friendly websites becomes more important.

The main difference between the desktop browsing experience and browsing on a mobile device is, of course, the screen size.  If you’ve ever tried to browse the full desktop version of a website on your smartphone, you understand how challenging it can be to navigate.  You’ll most likely end up doing a lot of zooming in and out, swiping, and trying to make pinpoint touches on tiny text links.  The usability of full-scale websites on a mobile devices depends somewhat on the device and it’s browser.  But even the largest screens are around 5″ in size – exponentially smaller than a typical desktop or laptop monitor.

Another difference is what types of technologies the browsers support.  Most mobile browsers can support javascript, but some will not support flash and other technologies commonly found on desktop websites.  One example of this is trying to navigate a typical drop-down menu in a mobile browser.  Some flyout menus do not translate well to mobile browsing, making it difficult – and sometimes literally impossible – to navigate the website.

One last difference worth mentioning is the data connection speed.  Most of us have become accustomed to browsing on a high-speed internet connection on our computers.  But most smartphones are limited to significantly slower speeds.  This difference in bandwidth can affect how images are displayed in a mobile browser.  Large images not only make page load times longer, but their dimensions can flow well beyond the bounds of these smaller screens and make visibility a challenge.

Creating a Mobile Version of Your Website

There are currently two primary approaches to solving the problems mentioned above.  One is called “Responsive Design.”  Creating a responsive website has to do with designing your main site with cross-platform/browser/device usability in mind.  In other words, instead of designing a separate website just for mobile devices, you design a single site that can be viewed comfortably on any device, from desktops to smartphones.  This is mainly accomplished through the use of fluid layouts based on advanced CSS techniques.  The term “responsive” comes from the way the web page “responds” to the changing size of the viewport (the size of the browser window).  As the viewport is resized, the page content flows into the available space like liquid.  This requires some good planning and a willingness to be flexible with your main design.

The other primary approach is to design your full-scale website for desktop browsing with all the features and gimmicks that you would want a desktop user to benefit from, and then pare that down and design a secondary website specifically for mobile devices.  This is the approach I’ve chosen to take with my own website, and with a good content management system like the one I use, it’s not really as difficult as it may sound.

The images included in this article are screenshots from my iPhone of the mobile version of this site.  You can check it out simply by browsing to this website on your smartphone (no special url required).  As you can see, while some of the branding and visual elements are consistent across both versions, the mobile site is much simpler.  The focus of a mobile website should be on ease of use and display of only the most relevant information.  You’ll notice right away that the home page only contains the main menu and a footer with links to follow TEEM Technologies on various social sites, and a link to switch to viewing the site in standard format.  This mobile menu has been made touch-friendly by utilizing oversized buttons and condensing a multi-level menu into a single level.

On other pages, you will see that images have either been stripped out completely, or scaled down significantly in filesize and dimension.  All content is forced into the available viewport size, depending on whether the phone is held in portrait or landscape orientation.  On my site, I have enabled zooming, in case the text size is too small for your preference.  On pages other than the home page, the top title bar becomes the location for “breadcrumb” buttons.  You can quickly tap a finger-sized button to go back to the previous page or directly to the home page.  This is necessary because I’ve chosen not to display the main menu on pages other than the home page in order to conserve screen real estate.  That decision depends on the size and complexity of the website.

Other elements have been left off the mobile site, such as sidebar modules like those found on the desktop version of my About page.  Only the most important content should be displayed on a mobile website.  To understand what is important, you need to think about your business/organization and who your mobile audience will be.  For me, my mobile site is not only about sharing information, but the mobile site itself is a representation of my work and ability to design attractive, functional mobile websites for potential clients.  The design is as much about showcasing my talent in the mobile arena as it is about letting the user know what services I provide and how to contact me.

Does Everyone Need a Mobile Website?

While it certainly couldn’t hurt to have a mobile version of your website, the answer to that question is “probably not.”  But a better question to ask is, “Do YOU need a mobile version of your website?”  That depends on the purpose of your website and who your primary audience is.  If your primary website user is in a demographic that has a very low percentage of mobile device ownership (say, seniors), you probably don’t NEED to optimize your website for mobile viewing.  On the other hand, you could be forward thinking and prepare for a future in which mobile browsing is more a rule than an exception.

As I mentioned earlier, I use a content management system for my website.  If you’re a web design client of TEEM Technologies, your website will be built on a CMS as well.  One of the many advantages of a good CMS is that it is fairly straight-forward to create a mobile version of your website.  I did not need to create a completely separate mobile website from scratch (or even by making a separate copy of the full site).  Instead, I merely created a mobile version of the main php file and separate CSS files.  I’m able to display most of the same content directly from the full website, which avoids having to update two separate sources whenever I want to add or update content on the website.

The key is that instead of creating a pared down copy of web page content to display in a mobile browser, I am only serving up portions of already existing content in a mobile-friendly format.  This makes content maintenance simple, and makes it worthwhile for any organization to have a mobile version of their website.

That’s a Wrap

So what can we learn about mobile website design from all this?  What I’ve learned is that designing websites for mobility is becoming important enough to consider on each web design project that my company undertakes.  While it may not be an equal investment for every client, for many it is well worthwhile.  When you consider the incremental nature of designing a mobile site from a CMS, and weigh that against the benefits, it becomes a high-value proposition.

But what do we learn from this once we’ve already accepted the benefit of a mobile website?  There are several important points to take away.  One is that a mobile website should not simply be a miniaturized version of your main website.  When designing a mobile site, a change in perspective is necessary.  Mobile browsing is extremely task-oriented.  Most people don’t spend long periods of time meandering through the web on a mobile device like they might while sitting in front of their computer.  Instead, mobile users will fire up their browser only for a specific purpose.  When designing your mobile website, your primary job is to figure out what that purpose might be.  Then you need to use that information to decide on what content will help the user achieve their purpose for viewing your website on the go.

Another important point is that a mobile website needs to be simple and easy to navigate.  All of the fancy transitions and animations of menus, links, and other elements should be stripped out, and the focus should be on streamlined usability.  The goal of a mobile site is less about engaging the user, and much more about making it exceedingly quick and easy for the user to find exactly what they came to your mobile site for.

If any of that sounds like a daunting task, don’t worry…TEEM Technologies can help you through that process.  If you’re reading this and are wondering if you should have a mobile version of your website, give me a call or shoot me an email and let’s chat about it.  I’ve advised some clients that it may not be a necessary investment for them, and they’ve decided to wait.  So a mobile website may not be necessary for everyone…the question is, would it be good for you?

0
Shares