MoMA Best Practices for Mobile Site Design

You will need to look at site design in a new way, one that is decidedly more restrictive than design for standard browsers. To work around the issues that mobile site design presents, and to get a result that is as user-friendly and useful as your standard site, some creative problem-solving skills are required.

Make Your Wishes Clear

At some time in the process, you will provide a developer with instructions, requirements, and specifications for your mobile site. Providing a clear and concise specification document will not only expedite the production step, but the outcome will be what you expect. If your requirements are unclear, or the design specifications are “fuzzy,” you may be surprised by production cost overruns, and a UI design that is not quite what you expected.

Keep the Continuity

Your brand identity is key and is a good starting point for your new mobile site design. Just as you have carefully controlled your company’s brand elements on the web and in print and media, you will want to do the same here. Some adaptation of your brand elements may need consideration for the small screen.

Regardless of the changes you may make, remember to create as much brand continuity as possible in light of your mobile website’s content and layout requirements. Common UI elements are a good thing.

If you have a well established brand, the color palette will provide established standards for the look and feel. If you have custom fonts as part of your brand ID, you may need to compromise here to leverage fonts that are optimized for the small screen — a critical usability aspect of your design. As with desktop web browsers, it is best to constrain your font selections to the ubiquitous default choices:

• Arial
• Verdana
• Georgia
• Trebuchet
• Times New Roman

 

Simplify!

Your mobile site should, in most cases, be simpler than your standard site. Eliminating graphic elements 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. This might mean redoing your menus, eliminating images, breaking up text over multiple pages, or otherwise re-working your site’s layout and functionality.

Give Users the Option of Visiting the Standard Site

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

Make Sure Redirects Work Properly

Do not just send mobile users to your home page. It is annoying than clicking a link, either in search engine results or from another website, and having it redirect to the homepage if you are on a mobile device. If your site automatically detects whether a visitor is coming from a mobile browser, make sure it is set up to send that visitor to the link they were trying to visit, otherwise they are likely to leave and never come back.

Use a Feasible Layout

It goes without saying that the more information you pile into a small space, the harder it becomes to read and the more scrolling that will be required. With such limited space to contend with, multi-column layouts often break because the required space to meet the needs of the content cannot span beyond the physical space of the viewport unless passive zooming and scaling comes into play.

Therefore, it pays to use a single column layout. A one-column layout is the best option for the small screen. By using a one-column layout, text and graphical buttons can be larger and therefore easier for the user to use.

Use a Separate Mobile Theme

While optimizing your main site for mobile use sometimes makes sense, it’s often easier to use a separate mobile theme, which can be done on most CMSs by changing the CSS for mobile devices. A dedicated mobile theme means you can really take into account how your visitors will see your site, and optimize it specifically for them.

Do Not Clutter the Screen

White space is an important criterion for good web designing and it is actually a challenge for the designer because out here the visitor is connected the most. The screen size being tiny makes us think about the necessity for a white space while designing a mobile. A confused website would create a negative imprint on the mind of the user.

The web designers should design the mobile keeping in mind the visitors or the users. Decide which pieces of information are important, and which are not; make certain that no less-important pieces are displayed unless there is a good reason. Consider for example the banner advertisements which are now universally accepted by the internet industry. The mobile websites are free of advertisements.

Limit Scrolling

It is annoying to have to scroll, especially in multiple directions, on a web page when using a standard browser. That does not change when you are visiting from a mobile device; in fact, it is worse. For instance, it is very easy to accidentally scroll the wrong way (horizontally instead of vertically or vice versa) when using a touchscreen phone. Keep the need for scrolling to a minimum.

Do Not Use Pop-Ups or Open New Windows

Depending on the particular platform, popups and new windows can interfere with the browsing experience, so do not 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.

Do not Rely on Flash, JavaScript or other Proprietary Technologies

Not all phones and mobile devices support Flash or JavaScript. Even if they do, there is no guarantee it will be the most recent version. And forget about Flash if your visitors are using an iPhone. Make sure all the important information and functionality on your mobile site is in plain (X)HTML/CSS; you may still use Flash and other technologies but ensure that your webside degrades gracefully. Otherwise, you risk a large portion of your visitors being unable to access important content.

Minimize the Use of Images

Use only the images you need to get your message across. A logo is fine, as 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.  Sometimes they actually make your site look worse, or cause strange scrolling or layout issues if the resolution is other than what you were expecting. And remember that large images sap a lot of bandwidth; consider scaling them back for smaller screens.

Be Wise With Video and Audio

As mentioned before: beware of Flash and other closed formats that are not compatible on some devices. Do NOT auto-play, do NOT automatically download files until requested, and DO optimize your files to keep them small.

Optimize Your Navigation

Many mobile devices have touchscreen interfaces, so design with that in mind. That means making the clickable area around your links a little greater, making 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 does not make it much better.

A trend of extensive mobile users is speed. Consider an average user, to wit: a teenage girl.  Whether she is chatting with her friends, playing games, searching the web, whatever — her rapid-fire fingers push the envelope of most mobile interfaces’ capabilities. This begs for simple, open, and low bandwidth user interfaces, and for reducint the amount of clicks required to achieve an action.

Include as Much Content from Your Standard Site as is Practical

How many times have you gone to a favorite website from your phone and then realized you cannot get to the part you wanted to visit? It happens all the time. Include as much of the original site content as possible on your mobile site. In addition to making it available, make sure the navigation route to get to it also remains relatively unchanged.