Websites for Mobile, Optimize!
What's your mobile strategy? The recommended best practice for making a website mobile friendly is up for debate, depending who you are or who you ask.
The good thing is you have options.
- Optimize the appearance of your current site content to be mobile friendly (i.e. viewable on a reduced scale)
- Create a mobile-optimized site with different content using a framework that detects whether the user is visiting from mobile device.
Both options have pros and cons. Option 1 allows you to have one site that is accessible to all users regardless of device. Option 2 allows you to target your content to your audience. You have to decide what will work best for your budget and your message.
Oak Grove faced this challenge recently when tasked with conversion of a traditional site to mobile. ASVABprogram.com is a career exploration site geared toward high school counselors, students and their parents. We asked ourselves two questions: why are people coming to the site? And what are they most likely to do once they get there?
We chose option 2 and focused our mobile design on the answers. We knew we needed to present easier navigation and improve the user experience for the younger, tech-savvy, mobile audience. The student audience unanimously voted the career videos as their #1 activity on the site. We also wanted to make it easy for counselors to sign up for the program and have access to resources.
Think about why your audience visits your site. What are their expectations? If your audience is using their mobile device to visit your site they want to get to what they’re looking for quickly. Make it easy!
I found this article helpful.
Optimizing Web Content for Mobile Use
Today, smart phones all compete to show you the same web that you now read on your desktop computer (HTML) but only in a smallish handheld form-factor. Since the appearance of the Apple iPhone in 2007 (that isn’t really that long ago is it?) the same old web you’ve been experiencing for years took on a new presentation mode. Hand held devices from a number of companies running Windows CE (in existence since before the year 2000) would show you the web (TTML, Wireless Markup Language or WML). Here we are now in 2011 and while companies continue (for the foreseeable future) to promote general desktop web sites, there is a new evolution in web site presentation on the horizon: mobile-optimized web presentation.
Since the mid to late 1990s the “browser wars” have kept web designers and developers on their toes. A number of companies exist (and have since been born and died) creating and promoting their desktop (and mobile) web browser as the web presentation tool of choice for users worldwide. The dilemma for a web designer or developer is to learn the quirks for how each of those browsers presented web pages. The same page in Internet Explorer did not look the same as it did in Firefox, for example, and that made designing web pages complicated.
Until recently, our smart phones all implemented a number of branded browsers all based on the same presentation engine: web kit. As someone who cares about presenting a quality consistent web page, we now have more mobile presentation issues to resolve. Buckle up buttercup! This could get complicated (again)!
Enter frameworks: A web framework (in theory) is a tested technique for building out and presenting web sites which (hopefully) are able to provide a high quality and consistent presentation despite the browser. And with the advent of some new capabilities found within CSS3 (implemented in all web kit presentation browsers… sorry Windows Phone 7 users, no CSS3 for you!) you can augment the presentation of the web page to accommodate different smart phone screen sizes.
So what does this mean for mobile-optimized web presentations? According to the sentiment at a number of web conventions this year, if you want to present information on the web to smart phone users you need a mobile-optimized presentation rather than assuming that they will wait for a traditional bulky web page to load requiring the user to zoom in and out on your content. Simplifying the presentation of your site to present from the perspective of “information as a service” means:
- Making it easy to traverse your content directory without waiting.
- Prioritizing content based on trending for quicker finds.
- Optimizing (reworking) content for smallish screens.
I am not advocating that all branding goes out the window! On the contrary, I do believe that presenting information in a mobile browser is a bit like going back to a tiny monitor on an old computer with a sluggish processor and dealing with people without much time (they won’t surf for hours or even too many minutes) or patience (they won’t wait for 5 megabytes of content to load). So, rethinking your site for mobile means optimizing, refining, and perfecting the presentation in an open age of shifting standards. To do this, you need a great team or a partner who can navigate these waters well!
CSS Reset – A Handy Tool
As a web developer / designer, one of the major issues I encounter when creating a new site is dealing with many inconsistencies between browser default base style sheets.
This is especially true when we are required to conform with the older but still widely-used and popular Internet Explorer (IE) browser version 6 and 7. Today, IE 7 is the standard browser used by most US government institutions.
An ideal website design should provide a somewhat consistent feel and look when viewed from different browsers. There are numerous other increasingly popular web browsers that people use alongside IE, such as Firefox, Chrome, and Safari. All of these browsers come with their own base style sheet to ensure that a website is rendered reasonably well even if there is no custom CSS (Cascading Style sheet) provided. Although the existence of these default browser style sheets is good, each browser interprets the style sheet differently which isn’t always so good.
Furthermore, these default style sheets can conflict rather than conform to the designer-applied custom CSS styles. In the worst case scenario, a browser that completely ignores widely accepted CSS attributes makes a mess of web pages that otherwise display perfectly in other browsers.
The best solution I have found for this is "CSS Reset," a script that allows you to re-write from scratch these default style sheets rather than modifying or applying a custom style sheet on top of them.
There are many varieties of CSS Reset scripts; the popular ones are available here. I have personally used the Eric Meyer's version of CSS reset and have always been happy with that. The Universal Selector contains a much simpler code (only one line), but some developers have voiced concern over the possibility of it slowing down the entire page rendering / CSS processing on browsers.
Want some more to read about CSS Reset? Try this article.
