As more and more devices become web enabled, the importance of having a mobile website is greatly increasing. The iPhone changed the Internet landscape by giving mobile users a full web browser. In the short term, this meant that the entire web could be viewed on this magical mobile device. At the same time, Apple furthered the HTML 5 specifiction which allowed for the creation of rich mobile websites specially formatted for these small form-factor devices. These consumer behavior changes and technology changes have left a lot of non profits asking, how can we make our non profit website mobile friendly?
So while back in 2008, mobile users could access their favorite sites as they saw them on their big screen by pinching and zooming, in 2011 visitors are expecting nimble and effective mobile versions of their website.
Just as your nonprofit has embraced print, radio, TV and then the web, the evolution will continue to the mobile web. This medium is similar to the Internet its 24/7 connectivity and access yet it has some key differences that must be noted when developing a custom fitted site.
Small Screen Size and Orientation
The single most important difference between a full featured website and a mobile website is the screen size. While desktop and laptop monitors may vary from 12 to 25 inches, on a mobile device we are working with just 3-4″ of screen. The user can orient the screen in portrait or in widesreen format.
This small screen size demands the need for a robust information architecture process. While your main website may have up to 3 calls to action, you really only have room in your mobile site for one. Think, if you were curled up on the couch, bored at a meeting, or stuck waiting for the bus what would you want to know about your orgainzation? Presented are a few ideas:
- Conference or event registration
- Membership renewal / registration
- Donations
- Raffle Ticket Purchase (say you are having an event, you can set your mobile website’s home page to quickly allow for a ticket purchase)
- Recent news about your non profit
In addition to a call for action, the mobile site must have incredible navigation support. It’s okay not to have every feature of your website duplicated on your mobile site. As long as a visitor can access what they need quickly you’re on the right track. You can always have a link to your “full page” website.
Speed and Bandwidth
While AT&T, Verizon, and Sprint boast about their “fast 3G/4G” networks, nothing compares to the broadband in your home or office. Even though mobile websites will load slowly, there are techniques that can be put into place to optimize the user experience:
- Use of mobile style sheets to load compressed graphics files
- Avoiding the use of images wherever possible. Seconds of load time can be shaved off by using solid colors instead of textured graphics. Yes, it is not as aesthetically pleasing, however we’re sure your visitor will appreciate the idle time saved.
Eventually, mobile speeds will be fast enough and artistic designs will be the norm. For the coming few years however, as a rule of thumb, stick to function and speed over artistic beauty.
Special considerations for iPhone / iTouch / iPad
The iPhone/iTouch both are small form factor devices. For these devices the optimization rules above apply in full force. The iPad has a significantly larger form factor and your regular website can probably suffice if you do not have the budget to optimize for tablets. All these devices though have one noteworthy feature missing – Adobe Flash which is used to to display video and provide interactive features is completely blocked. Fortunately there are alternate technologies like jQuery and HTML5 to provide similiar functionality. Demand that any interactive functionality be produced using these open standards.
Other Mobile Features
- Autodetect: Your existing website should autodetect the device your visitor is using and re-route to the appropriate website. The mobile website should then have a link back to the main website to force it to display in “full website mode.”
- Tap to Call: The “TEL” tag allows you to embed phone numbers on your website that can be reached with a tap. Your visitor already has their phone in hand, this small step will make your site all the more convenient.
- Tap for Directions: Most mobile devices nowadays have GPS receivers built into them. Make it easy for visitors to navigate to real life locations, be it your office, a fair, or a conference location.
Testing and Mobile Website QA
Cross browser compatability takes a whole new turn when it comes to mobile website designs. In addition to the four main browser technologies (Mobile Safari, Mobile Internet Explorer, Mobile Android Browser, and Mobile Blackberry) there are a handful of other mobile flavors (Mobile Opera and Mobile Firefox) and a plethora of device formats. 3″ screens, 4″ screens, 5″ screens, varying capabilities and varying resolutions. Before engaging in a mobile website redesign it’s important to see what existing visitors are using. Analytics data can quickly show the visitors are browsing with. In most cases optimizing for 2-3 device types will cover 90%+ of your mobile user types.
Some nice designs
Take a look at some great sample mobile designs around the web.
Do you have questions about how to use your wordpress cms for your mobile site?
Contact us in order to open a discussion about your options. WordPress is continually improving to support non profit wordpress mobile websites.