Before the popularity of smartphones such as the iPhone or Android, it was still possible to view the Internet on your phone. The experience was usually not very good because of the slower data transfer rates, poor browser software and the fact that most websites were not optimized for mobile device viewing. Back in these days, to have your website mobile optimized meant to reduce your images file sizes, use CSS based layouts instead of table-based layouts, no Flash and basically do anything else to reduce the amount of data being downloaded.
As technology and innovation improved, smartphones became more powerful, affordable and now are more common than regular cell phones. The touch-based nature of these phones created a different way to surf the web. It’s the same as using a regular web browser on your desktop but yet it’s a bit different. The basic rules of mobile optimization are still the same except now there are new features to account for.
The general consensus around the web is that having a mobile optimized website means you have a mobile version of your website. By default, a mobile version of a website is already a mobile optimized website. So what is a mobile version of a website? Basically, it’s an alternate version of a website that is optimized for use on smartphones or similar mobile devices.
Today’s mobile devices are mostly touch-based. Compared to desktop and notebook computers, they have small screens with limited screen resolution. Have you ever been to a non-mobile optimized website on your smartphone and tried to click on a link but had a really hard time because the link is too small or too close to other links? I know I have. Having a mobile version of the website would solve this problem by using a different layout made specifically for mobile devices such as smartphones. Here are a few basics on how to get a mobile version of your website started:
- Use CSS as much as possible instead of image files (e.g. gradient fills, drop shadows, rounded boxes, etc.) . Using too many images will slow down the load time of the website. CSS data is a lot smaller in file size than image file data.
- Use a fluid layout. Not every smartphone or mobile device has the same screen resolution. By keeping the layout fluid, the website can stretch and expand to fit as necessary.
- Apply larger font sizes that are easy to see and read on the smaller screen
- Graphical buttons instead of text links because they are easier to “touch”
- No Flash. Use HTML5 and/or Javascript/jQuery instead.
- Simpler navigation with fewer options
Generally, when a person is going to view a website on their smartphone, they are looking for something specific. Perhaps an address, a phone number, a contact name, email address, etc. The slower download speeds and the smaller screen resolution make typical web browsing impractical. Having just the important content available and easily accessible on the mobile site can improve the quality of the user’s experience.
Depending on the type and the content of the website, not every page and link has to be available on the mobile site. Too much unnecessary content can defeat the purpose of having a mobile version of the website. Also keep in mind that not all users will want to view the mobile version of the website. Always include an option for them to view the regular non-mobile version of the site.
Sometimes a completely alternate mobile version of the website is not needed. Again, depending on the website, it is possible that a landing page made specifically for smartphones and mobile devices can be used instead. The mobile landing page can include only the important content and contact information with a link to view the regular website. A mobile landing page can also be used as a temporary page to let your mobile visitors know that a mobile version of the website is in the works.
As the mobile web continues to grow and gain more popularity, the need for a mobile website will soon enough be as necessary as a regular website. I wouldn’t be surprised if eventually, mobile websites will be the norm and regular non-mobile sites will be become the “other” viewing option.
