Designing a Mobile Website is Simple!

Here’s the thing: Smartphones are here to stay. Chances are, a pretty sizeable chunk of your website’s visitors are coming to you via their iPhones, Droids, or iPads.

So what does that mean for you and your website? Well, the great thing about smartphones is that your customers, visitors, and readers can access your site from anywhere – they don’t have to be tied down to a computer. But it also means that your site needs a mobile-friendly makeover to accommodate touchscreens, tiny keyboards, and a smaller screen.

Simplify the Navigation

Your mobile users won’t be navigating with a mouse − they’ll have to rely on touchscreens and tiny keypads. So the less navigating they have to do, the better. Many mobile websites just have a vertical list of links as the homepage to direct users to the most commonly used features, like the picture to the right:

Mobile website navigation should also:

• Make links obvious and large enough for touchscreen phones. A good standard is 30 pixels or greater.
• Include keypad shortcuts for phones without a touchscreen. For example, in the photo above, you could assign the number 1 to Locations, 2 to Order Online, etc.
• Reduce the number of categories and pages. This might mean that you don’t show your entire website, but if you want, you can also include a link to the full version at the bottom of the homepage.
• Use a single-column design.

Simplify Your Code

Remember, when someone accesses your website on their phone, they’re probably not just surfing, but looking for something specific while they’re on-the-go. And they probably want to find that “something” as quickly as possible so that they can get back to whatever it is they’re doing.
Since mobile networks usually aren’t as fast as home networks, and might contain patchy service, here are a few things you can do to get your site to load as quickly as possible:

• Keep page sizes small. This helps them load faster and ensures that your user doesn’t have to scroll down a lot.
• Remove unnecessary code − avoid JavaScript, CSS, plug-ins, etc. Pretend you’re building a website in 1996.
• Make sure images are at proper resolutions for mobile devices.

Simplify User Input

Everyone texts now, but that doesn’t mean they want to spend an hour filling out forms or typing search terms into your mobile site! A good mobile design should allow your users to simply click or touch the options on the screen, with minimal typing. A few helpful shortcuts include:

• Use drop-down menus instead of search bars, when possible.
• If users have to login, give them the option to stay logged in so that they don’t have to bother entering their info again.
• Allow the option to use their current location. For example, airline sites often use this feature for users searching for flights − they have the option to use current location for the starting point.

Use Simple Tools to Help

As you can see, the trick to designing a website for mobile devices is to simplify: only use the important content, and arrange it in the easiest way possible. If you need extra help, this post in Mashable has a list of mobile website building tools. And if you want to know if your new design is working, you can use Google Analytics. If the bounce rate for mobile devices is higher than your regular bounce rate, you might need to go back and make some adjustments.