Before the popularity of smartphones such as the iPhone or Android, it was still possible for a person to view the Internet on a phone. However, the experience was not ideal due to slower data transfer rates, poor browser software and the fact that most websites were not optimized for mobile device viewing. For a business to have a website mobile optimized a few years ago meant reducing images file sizes, using CSS based layouts instead of table-based layouts and not utilizing Flash. Basically doing anything to reduce the amount of data being downloaded. As technology and innovation have improved, smartphones have became more powerful, affordable and now are more common than regular cell phones. The touch-based nature of these phones create a different way to surf the web. “It’s the same as using a regular web browser on a 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,” states Jordan Paraso, Web Development Director at Bop Design, a San Diego based website design agency. As businesses determine an online presence for the mobile platform, Bop Design provides businesses with 6 tips on designing a mobile website.
“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,” states Paraso. 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,” says Paraso. The following are 6 tips Bop Design suggests to businesses designing a website for mobile:
- 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,” Paraso advises.
- 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”. “If a visitor can’t click on a text link, they will get frustrated and leave your site.”
- No Flash. Use HTML5 and/or Javascript/jQuery instead.
- Simpler navigation with fewer options. “Don’t overwhelm a visitor with too much on a small screen.”
Paraso summarizes the mobile design objective, “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.” Bop Design reminds businesses that 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.”
As the mobile web continues to grow and gain more popularity, Bop Design reminds businesses that the need for a mobile website will soon enough be as necessary as a regular website. “I would not be surprised if mobile websites become the norm and regular non-mobile sites will be become the alternate viewing option.”
