March 14

Web Design for Mobile Devices

More than 63 million people in the United States accessed the Internet from a mobile device in 2011. By 2013, we predict there will be more than 1.7 billion mobile Internet users worldwide. With those kinds of numbers, it’s absolutely essential that web designers and developers learn optimal development and design practices for mobile devices.

For the most part you won’t need to learn any new technologies for mobile site design but you will need to look at site design in a new way.  You will have to be more restrictive  with design for mobile sites as opposed to standard browsers. To work around the issues that mobile site design presents, and to get a result that is as user-friendly as your standard site, Minneapolis web design firm, Rocket55 suggests the following tips to keep in mind when adapting web design for mobile devices.

1.  Simplify

Your mobile site should be simpler than your standard site.  Eliminating graphics from your site is usually an effective way to optimize its display on a mobile device. Look for ways to simplify both the design and functionality of your site by redoing your navigation, eliminating images, or breaking up text over multiple pages.

2.  Give Users the Option of Visiting the Standard Site

Depending on what kind of device your visitors are using, they may want the option to use your standard website.  Give your mobile visitors the option of visiting the standard site, even if it’s just through a link in the footer. You could additionally give them the option to come back to the mobile site without having to use their back button.

3.  Limit Scrolling

It’s really frustrating to have to scroll in multiple directions on a web page when using a standard browser.  When you’re visiting from a mobile device, scrolling in multiple directions becomes nearly impossible.  It’s very easy to accidentally scroll the wrong way when using a touchscreen phone. If your site only scrolls one way, you eliminate the potential for such a hassle.

4.  Don’t Use Pop-Ups or New Windows

Popups and new windows can interfere with the browsing experience, so don’t use them. If you absolutely need something to open in a new window, make sure you alert your mobile visitors that it will do so.

5.  Limit Images

Use only the images you need to get your message across. A logo is fine, so are most icons. Images that are integral to the content on your site are also fine. But eliminate images that serve no purpose other than to look pretty.  They generally make your site look worse, or cause strange layout issues.

6.  Efficient Navigation

Many mobile devices have touchscreen interfaces, so try to design with that in mind. That means making the clickable buttons larger, and putting more space between links. Trying to click on tiny, barely-visible links is a real pain, and having to zoom in every time you want to click on something doesn’t make it much better. To improve these navigation issues, many sites use a completely separate mobile navigation design, optimized for touchscreens or non-mouse input devices.

7.  No Flash or Javascript

Not all phones and mobile devices support Flash or JavaScript. Even if they do, there’s no guarantee it will be the most recent version. And forget about Flash if your visitors are using an iPhone. Minneapolis web design firm, Rocket55 advises web designers to make sure all the important information and functionality on your mobile site is in plain (X)HTML/CSS. Otherwise, you risk a large portion of your visitors being unable to access important content.

Good luck!