It is now generally estimated that by 2014, if not sooner, mobile website access will exceed desktop access. Nowadays, pretty much anyone with a smartphone (and even those of us with more basic phones) is accessing the web on a handheld device.
To reach customers where they like to surf, we need to adapt to meet their needs. How people interact with sites on phones is a lot different than on the desktop. That means we need to redesign our websites for mobile web browsers.
This blog post will give you an overview of the basics of mobile web design to create a good user experience for your customers on the go.
Mobile Design Basics
First of all, if you’re not a web designer, that’s fine. This post is written for marketers. No web coding or design experience is required. We can leave the technical aspects of web design to your dedicated web resources. Still, having a top-level understanding of good mobile web design practices will help you work with your web experts to create sites that delight your customers and meet your marketing goals.
- Design for the small screen – What works well on a desktop monitor won’t work on a screen that is 320 pixels wide. You’ll need a special layout for your mobile site. You’ll also have to decide if you’ll create an entirely separate mobile site, with its own domain URL (like m.yoursite.com or yoursite.mobi) or program your current site to automatically resize when viewed on a mobile phone. The pros and cons of each approach are beyond the scope of this post, but two advantages of the automatic approach is that you only have to have one web domain, and it can be less expensive than designing a mobile site from scratch.
- Get “responsive” – If you decide to go with the automatic, single-domain approach, you and your web team will want to consider a new way to look at website design called “Responsive Design.” This paradigm takes advantage of modern programming language, making it relatively simple to design “flexible” sites which automatically reflow and scale their layouts to look just as good on a 3.5” screen as they do on your 24” desktop monitor.
- Simplify – while your desktop site may be rich with graphics, this can really slow down page loading times on a phone. Keep only essential graphics on your mobile site. Also, simplify navigation. You can only fit so many links on a small screen, and they are harder to tap with fingers vs. a mouse on the desktop. Only feature links to the content users will most want to access – such as how to contact your company, view your locations, or buy products. If you need to, you can feature more links by nesting them within collapsible buttons. Tapping the button will reveal sub-links underneath the main link. This approach keeps your layout simple. Also, keep to a single-column layout, and use white space (lack of clutter) to make your site appear simple and inviting.
- Go vertical – have you ever visited a mobile website where the text and graphics were too wide for the screen, forcing you to swipe from left to right, back and forth, to read all the text? This is particularly cumbersome and will likely lose a lot of viewers very quickly. Make sure to require only vertical scrolling, swiping up and down. This will require changing the main navigation, typically arranged horizontally on your desktop site, to be stacked vertically in your mobile layout. (See the screenshot of the ZUZA mobile site below for an example.)
- Prioritize – put the most important items at the top of the page. While many viewers will scroll down if you’ve got interesting content the goal with mobile is to make it as fast and easy as possible for users to accomplish the most important tasks – to learn, respond and buy.
- Brevity is the soul of a good user experience – it’s tedious to read long copy on short screens. Actually, for any screen, keeping copy concise and getting right to the point is the best way to be understood properly, keep interest and compel action. Enough said on that.
- No Flash – Flash can be great on the desktop. But it’s usually clunky on an Android phone and simply doesn’t work on an iPhone. There are ways to create animation and play video using an alternate technology that’s built right into modern web programming standards called HTML5. Your web team will know about this. And video hosting sites like YouTube use it to play video, so you can show YouTube versions of your videos on your mobile sites and they’ll play just fine.
Testing, Testing 1-2-3
Thanks to the proliferation of smartphones in iOS and Android, there are numerous screen sizes to design for. The iPhone is among the smallest screens, so this is a good common denominator. At the same time, you’ll want to preview how your site looks on as many phones as possible to make sure your user experience is universally pleasing.
In addition to testing your site directly on a phone, there are various web sites and desktop applications that can simulate what your mobile site will look like.
- Electric Mobile Simulator – this $29.99 program for both Windows and Mac lets you quickly simulate your site on a virtual iPhone screen. There is also a free version with reduced functionality which still shows you what your site will look like. GO »
- BrowserStack – this web-based tool lets you simulate your mobile site on not only the iPhone but also numerous Android phones. A subscription can be had for as little as $19.99 per month. GO »
- Opera – this web browser company has an online simulator for their Opera Mini browser which shows how mobile sites will look. This can give you a good generic sense of how your sites will appear, though you should still test your site on specific phones and with multiple browsers. GO »
In creating a mobile version of our own website, we had to do various tweaks before the mobile site looked clean. We also had to design custom buttons for this new layout that look entirely different from those on our desktop site, and are clean and easy to navigate on the small screen. Here are some screenshots:
Want to see how mobile users see your site right now? Google has partnered with duda mobile to provide you with an instant simulator. Just type in your URL to see how your site looks, along with a quick rating of your site on multiple mobile criteria. Odds are, you’ll see a highly miniaturized presentation of your current site, with tiny graphics and links that are almost impossible to click with a finger. And the more graphics you have on your site, the longer it will take for the site to load on a mobile phone. Is this the experience you want for your customers?
Mobile is becoming the go-to place for our customers and prospects to socialize, browse, learn and shop. And recent advances in technology have made it easy for us to provide people with a pleasing experience of our companies on mobile devices. The time is now to create a great mobile version of your website. The next step is to get together with your web team and plan your mobile site.
Here’s to the Marketing Champion in all of us. See you in the next post.