Make Your Site Mobile Friendly

The new craze, well in the United States, is smart phones. Smartphones can be used as a computer, telephone, camera, MP3 player, game system, and the list of functions keeps growing. A few months back, I read an interesting article that tackled the question, “Will smart phones replace computers?”

I don’t think it will ever get to that point because people still want to have the option of having a big enough screen where they are not constantly scrolling. However, people are also looking for flexibility and mobility. Two of the main reasons are the amount of companies that are allowing their employees to telecommute, and people who are going into business for themselves. Either way, the demand for smartphones keeps rising.

This means that companies need to start looking at their web content and ensuring that it’s readily available for those who are looking at them through smaller devices. One way of doing this is by ensuring that your content is 508 compliant. If you don’t know, 508 compliance is a United States law that ensures that people with disabilities (e.g. blind, deaf, colorblind, dyslexic, paralyzed, etc.) are able to access the same information on a site (or program) as any person without disabilities would be able to. Other countries have their own versions, so you should think about this when writing the HTML and verbage for your web site.

Here are a five tips to ensure that your sites (or programs) are readily available for smartphone and PDA users:

1. Use Stylesheets – On top of the fact that cascading stylesheets will help with redundant code, it will also help you to make your site smartphone accessible. It will help you separate web page content from web page presentation. However, all pages should also be readable without stylesheets.
2. Absolute vs. Relative – Ensure that you use relative numbers in your code instead of absolute. For instance, instead of using pixels or points, stick with em or percentages. If someone is using a smaller device, he/she is able to display the information that is relative to the size screen they are using instead of having to deal with unnecessary scrolling.

Example: Bad: <img src=http://www” width=”250px”>

Good: <img src=http://www”. width=“50%”>

3. Use meaningful alt attributes– Sometimes the images of a site are not displayed properly. Use the "alt" attribute for your images, tables, forms, etc. that are meaningful if the user goes to text-only mode.

Example: Bad: <IMG src="…/get_flash_player.gif" width="88" height="31" alt="image" /></A>

Good: <IMG src="…/get_flash_player.gif" width="88" height="31" alt="Get Flash Player" /></A>

4. Avoid flowery writing – Can you imagine trying to read something on a little screen, and the pages are written in a way that you have to scroll until you get to the information you want? Get to the point. It’s like you learned in elementary school. Your sentences should be no more than 10-15 words, and even that is stretching it.

5. Write your HTML like a mouse doesn’t exist – I am a huge keyboard user. I barely touch the mouse. It’s worse on a smartphone because they mainly use scrolling or touch screen. When you are testing your sites, test it without the mouse to see if you can get to where you are trying to go. I hate when I get to a site, using my phone, that the tabbing is totally off. Imagine people who probably have less patience than I do.

There are more things to look out for when writing the code and content for your web site. However, these are the first five that will get you started on the right path.

WordPress Plugins to Make Your Site Mobile Friendly:

• MobilePress
• Carrington Mobile
• Top 10 Mobile WordPress