We’re on a bit of a mobile kick lately – my last post was about mobile marketing basics, and today we’re diving head first into mobile websites.
We will be covering different approaches to mobile website design, mobile site best practices, and what you can do to easily make your site mobile-optimized! Get ready to touch, tap, and swipe your way into the world of mobile web design!
If you aren’t quite sure about whether or not it’s worth your time to learn about mobile site design, these mobile website statistics will convince you!
Your mobile website doesn’t need to have the same kind of pizazz and showmanship as your regular, full-size site. On a tiny screen, big, flashy graphics take up too much space and can result in snail-paced load times, which mobile users simply won’t accept.
Mobile sites should be more basic and bare bones, with a simplified design. Remember that most mobile users are visiting mobile sites for hard info, not for curiosity or general interest. The goal is to provide mobile users with the information they want and nothing extra. This means streamline navigation and layout, keeping things as easy and simple as possible.
That being said, this doesn’t lock you into having an ugly site – aesthetes rejoice! You can still create beautiful mobile websites. CSS3 lets mobile website designers create some pretty attractive graphics with features like gradients and drop-shadows, letting you have a polished mobile website without the clunky weight of large graphic files.
With this overarching concept of mobile simplicity in mind, we can start to think about how to actually go about our mobile website design plan. There are generally two approaches.
The Two Approaches to Creating Mobile Websites:
1. Build a unique mobile website
2. Design existing website to adjust itself for various mobile devices (what is called “responsive design”
We’ll be discussing these two different methods in detail. There’s no right or wrong answer, but your business’s priorities might make one option better suited for you.
.Mobi websites are sites that have been specifically designed to be viewed and navigated on mobile devices. Technically any domain can be viewed on a mobile device, but .mobi sites claim superior usability.
From a user perspective, .mobi is preferable since all .mobi sites MUST be optimized for viewing on a mobile device. From a business perspective, there is a solid assortment of both pros and cons in taking the .mobi design route.
PROS of Building a .Mobi Website:
CONS of Building a .Mobi Website:
Responsive web design enables a pre-existing website to resize and re-adjust automatically for various mobile devices. Technologies like CSS3 and HTML5 make it easy to design your site to adapt to any device it’s being viewed on, converting the website to a mobile layout for better viewing.
Responsive web design is a great option, and growing more popular by the day as the variety of devices that access the web grows. Mashable noted that last year they were accessed on over 2,000 different mobile devices! Responsive design aims to make your site look gorgeous on all of them. Naturally there are some pros and cons.
PROS of Responsive Design:
CONS of Responsive Design:
The .mobi vs. responsive web design battle is as great a rivalry as Coke vs. Pepsi, Energizer vs. Duracell, Mac vs. PC! Well, OK, it may not be quite that intense, but many web experts really do have some pretty strong feelings about which is the preferred method of mobile site design.
So which method is right for you?
Image from Google Mobile Ads Blog
There really is no right or wrong answer. Responsive design is easier to maintain, since you are dealing with one single website. However, creating sites customized specifically for mobile devices means you’ll have the chance to experiment with mobile-specific features like GPS and cameras.
Usually such functionality is resigned to apps, but implementing this kind of experience into mobile sites can result in extremely engaging and exciting sites. As Bryson Meunnier of Search Engine Land notes, this kind of app-like behavior on sites should be more common, especially considering how some brands like Answers.com have found great success with this technique.
Some experts recommend that businesses with a smaller number of mobile visitors should go with responsive web design, while those with a large number of mobile users should create a mobile-specific site. Ultimately, it’s your call.
BTW: You can create a mobile specific site without creating a .mobi domain. You can just as easily set up a sub-domain like “http://m.domain.com” to put your mobile site on.
I know, you’re probably thinking “Umm, hey, what about apps? Apps are great! There’s an app for that!” Apple did a pretty phenomenal marketing job getting us all excited about the idea of mobile apps. And while mobile apps are great, they really aren’t suited to every business.
Apps are software applications that need to be written in the native language of a selected platform like the Apple iPhone or the Google Android. There are some nifty advantages of creating a mobile app, but for most small to medium-sized businesses, it isn’t worth the effort.
PROS of Building an App:
CONS of Building an App:
The truth is, you probably don’t really need (or heck, even want) an app for your business. Mobile websites earn a larger reach compared to apps, and consumers tend to prefer using the mobile web interface for searching, surfing, and shopping. According to the Pew Research Center, 60% of tablet users prefer reading news on the mobile web to reading on an app.
What businesses will benefit from apps? As noted on Adaptistration, the businesses who will benefit most from apps are those who have specific content delivery needs, like wanting to stream HD video for subscribers of a specific membership program (Netflix, HBO GO, Hulu Plus etc.). Apps are also great for specific tools, such as an app to help users find the nearest gluten-free restaurant.
Don’t hop on the app bandwagon just because it sounds cool. If you want to put in the time and money to build an app, it should have a real purpose.
Here’s a look at some of the best mobile websites brands have come up with.
Abercrombie & Fitch
What They’re Doing Right: Collapsible navigation and a clean, simple design.
What They’re Doing Right: Collapsible navigation, aimed for local intent with Location Finder and Offers, key information with nothing extraneous
What They’re Doing Right: Simple and easy to understand
The sites above manage to be fun, creative, and engaging while still maintaining a simplicity that works well for mobile.
Home Depot does a couple things really well with their mobile responsive web design:
Mobile website ads can be somewhat problematic when functioning with responsive web design. The ads, which are shown across a wide variety of different-sized devices, end up being unintentionally warped or distorted. Stretch Armstrong rocks, stretchy pants are comfy as heck, but stretchy ads are just no good.
Want to see how your mobile PPC ads are performing? Our free AdWords Grader tool can help you out.
We’ve collected a bunch of free mobile site design testing tools to help you make sure your site looks great no matter who is using it. To be the best, you gotta test!
And there you have it – the complete guide to mobile websites and mobile design. Go forth and go mobile friends!
Remember, you can always check your site’s mobile friendliness and SEO with the free LOCALiQ website grader.
Megan Marrs is a veteran content marketer who harbors a love for writing, watercolors, oxford commas, and dogs of all shapes and sizes. When she’s not typing out blog posts or crafting killer social media campaigns, you can find her lounging in a hammock with an epic fantasy novel.
See other posts by Megan Marrs
Please read our Comment Policy before commenting.