TekNek Web Services Twitter Page TekNek Web Services Facebook Page TekNek Web Services RSS Feed TekNek Web Services LinkedIn Page

Oct 17 2010 Mobile Devices Web Design BEFORE PC Web Design

After reading an article I just read by Luke Wroblewski, entitled “Mobile First”,  I was reminded of a few years back, when I ran a printing company in Pensacola, FL.

I always asked my new clients how they found out about the company and I noticed that a notable amount of new clients were finding us through a google search on their iphones.  I once got a call from a client who asked for directions to the shop.  When I asked him how he found out about the company, he said that he had just got through doing a google search WHILE DRIVING!

Mobile surfing / browsing is EXPLODING right in front of us.  Fact: Smartphone sales will actually pass PC sales in 2011

Simply put, below are some key points to consider when prototyping and designing a mobile web design:

1) Flexible layouts is crucial to accommodate the various mobile screen sizes as well as laptops and various PC monitor sizes

2) ” the main function should be immediately apparent. Minimize the number of controls from which users have to choose.”
-iPhone interface guidelines

3) Button size is important.  Too small, and the users can’t touch them with ease on their screens.  Too big and you will lose valuable “screen real estate”.  Below are some recommended mobile app button sizes:

  • iphone: 29px wide by 44px tall
  • other sources recommend: touch target of 9mm/34px and a minimum of 7mm/26px
  • spacing between elements: 2mm/8px

Also consider using a larger “release size”.  This is to ensure that even if a user’s finger or thumb slips before releasing, the button is still pressed.

4) For now*, use the “hover” state sparingly.  Think about it, how is hover possible on an iphone?

*patents are in the works for smartphones to utilize a hover state.

Reader Comments

RSS feed for comments on this post. TrackBack URL

Leave a comment

Anti-Spam Quiz:

  • © 2010 TekNek Web Services • 224 E. Garden St., Pensacola, FL 32502 • 850-390-1846