Editor’s Note: This column is edited from an original post to NonprofitOrgs.Wordpress.com. While the blog was written for nonprofit organizations, it has potential business applications as well.It’s ironic how Web design has come full circle. In the 1990s, websites were utilitarian in appearance and structure. Slow dial-up Internet access required that websites be as simple as possible for faster loading. During the 2000s, the rise of broadband brough about an onslaught of highly designed websites with Flash and JavaScript, pop-down navigation, and pop-up windows for slide shows, videos and calls to action. The evolution of Web design aesthetics in the last 10 to 15 years has been directly correlated with the increase in speed of Internet access. Today, for the exact same reason, we’re starting from the beginning in mobile website design. Until we reach 5G or 6G speed, mobile websites will have to be very simple to avoid long, frustrating download times.
Here are eight best practices for mobile website design.
Keep design and navigation simple: Navigation and secondary pages should be limited to five or fewer. Mobile users like things simple and can be overwhelmed by a multilayered mobile website. Be sure to feature a “Home” link prominently. Require only vertical scrolling. The content background should be white with black text. You can add some color to your mobile website through navigation bars and images. It’s also common to provide a link to your desktop version in case the user has a tablet and wants to browse your full website. If you choose to hard-code your own mobile website, the standard width for a mobile website is 320 pixels as of 2011.
Limit the use of images: A simple banner at the top of your mobile website with your nonprofit’s logo and name is a good starting point. Make sure it links to your mobile website home page. Otherwise, do not use images for navigation, and limit news articles to one image. If you are using your blog’s RSS feed for mobile Web content creation, tools such as MoFuse automatically shrink image sizes for faster loading and browsing. All images should be small and should be in either JPEG or GIF format.
Feature fresh content prominently: With the exception of mobile pages created specifically for group text messaging and QR code campaigns for donations, petitions or polls, most people will browse through only the fresh content on your mobile website. They’re looking for news and campaign updates, not detailed information about your organization’s history, programs, mission and values. A mobile website should not be modeled after your desktop site. Make sure you feature your fresh content first – your blog feed – and calls to action after that. As word gets out about your mobile website, the number of visitors will increase. Some may even bookmark it for browsing regularly.
Limit “About Us” content to one page: Create one page that summarizes your “About Us” content. This is where you give shortened versions of your history, your programs and important milestones you have achieved. You can have three or four small photos on this page to give it some color and make it more interesting, but in general, people are not interested in reading Web 1.0 content on a mobile website.
Link to your social networking profiles: This is a big one. Link to your Facebook page, Twitter profile, YouTube channel, Flickr photostream and so on. This allows your mobile visitors to like, follow, and subscribe easily, as well as browse status updates, tweets, and your most recent videos and photos. Download small social media icons and work them into the design so that they are visible on every page of your mobile website. Ideally, they should be featured at the top of your mobile site.
Feature group text alerts and e-newsletter subscribing options: Be sure to feature the ability to subscribe to your e-newsletter and group text campaigns on every page of your mobile website. There are also e-newsletter and text icons available through icon portals such as
IconsPedia.com and
IconDock.com, that can be placed next to your social networking icons. The number of people who regularly check email on mobile devices is rising steadily, so subscribing to an e-newsletter on a mobile website is definitely within the realm of possibility.
Incorporate video into your mobile website: Like all things mobile, mobile video consumption is soaring. That said, take screenshots of your best videos and incorporate them into your “About Us” or “Get Involved” pages on your mobile website. They should be shrunk to 320 pixels in width and link directly to the mobile version of the video on YouTube.
Promote your mobile website in print materials, on your website and your blog, and in social networking: As with any other Web-based campaign, you need to promote your mobile website. Write a short blurb about your new mobile website and ask supporters to “Bookmark Your Mobile Browser.” Publish the blurb in your print newsletter, link to it on your website and on your blog, and mention it to your social networking communities. Initially, most of your mobile website traffic will come from links in text alerts and QR codes, but as mobile browsing continues to soar, much of it will come across your mobile website the old-fashioned way – through Google, Bing, Yahoo, Opera Mini and Safari searches conducted on smartphones.
Heather Mansfield is the owner of Diosa Communications, principal blogger at Nonprofit Tech 2.0 and author of “Social Media for Social Good: A How-To Guide for Nonprofits,” published by McGraw-Hill. She can be reached at heather@diosacommunications.com.[[In-content Ad]]
