In the last few years the popularity of smartphones (mainly the iPhone and the Blackberry) exploded to a new high, and is now regarded as a media outlet almost as important as our computers. Especially the iPhone re-shaped the concept of mobile browsing – by putting in their Safari browser, the browsing environment on the iPhone is 90% of what you would see on your computer. It supports full Gecko HTML/CSS interpretation, PNG images, javascripts, scrolling, clicking and the whole nine yards. The only limitation is Flash, and perhaps drag-and drop is still not an option. That being said, this also brought some changes to the way web designers think about websites.

1. We used to try to get people to stay on longer, and click on more pages until they decide to call us. It was a marketing hook. Nowdays, many people use their iPhones instead of dialing 411 or using Yellowpages. This means that it’s a good idea to have your phone number (in a standardized format so that iPhone users can click and dial) clearly visible on the very front page. Sometimes I go as far as putting the key contact info on the top of the website, close to the logo! Look at the top-right corner of the site you are on right now.
2. Putting interactive flash on the top of the front page used to be hip. It was a cool thing to have without compromising search engine placement. This could be a rotating banner, or a featured product intro – anything. Now keep in mind that an iPhone user will see a big blank with a tiny blue question mark box (that’s what the iPhone shows where Flash animation should be). Now we’ve moved on to more intelligent ways of handling it – using nifty Javascript frameworks such as jQuery and Mootools, we can create rotating banners and numbered headlines without using Flash!
3. To protect against spam, we often skipped displaying the email addresses, and used a contact form instead. But the contact forms often look tiny on the iPhone screen, and people would much rather use the regular email app on the iPhone rather than the formmail. So, now we use both. How do we prevent email addresses from being harvested for spam? We use the email address munger Javascript code which is very effective in keeping the spambots at bay.

To take things even further, you can use CSS styles that apply to specific media only. By defining “handheld” as the media type, you can choose to hide or show certain areas of the site, as well as change the colors and dimensions. For more information on using media-specific CSS stylesheets, check out the following links:

• http://www.howtocreate.co.uk/tutorials/css/mediatypes
• http://www.alistapart.com/articles/pocket/

This entry was posted on Friday, September 25th, 2009 at 2:14 pm and is filed under Web Development. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.