Best Practices for Making Your Website Mobile-friendly

Katy recently attended Freelance Camp 2012 where Aimee Chung (mobix.ca) gave a very interesting and information presentation on Introduction to Mobile Web Design and Best Practices. Here are Katy's notes from the session:
 
Why use mobile-friendly web design?
  • there are over 6 billion mobile phone users
  • 20% of those (1.2 billion) use phone to browse internet
  • mobile web browsing is the next predominant Internet platform

Smartphone platforms
  • Have at least 3G network
  • Android now has largest market share
  • Android (64%) Apple (19%)
 
Do you need a mobile site?
  • What is the purpose?
  • Specific tasks for mobile site? – find info quickly
    • 1 or 2 goals
    • Eg. Restaurant – location, hrs, specials, online reservation
 
Who is your audience?
  • Market research?
  • Demographics, trends of your market?
    • Age 30’s and 40’s is growing market
 
Ways to ‘Mobilize’ your site ie. make it mobile-friendly
  • Have a separate mobi site in addition to desktop site
  • Build web app for android or apple
  • Have a single responsive site that resizes for different screen widths from mobi to desktop
    • Responsive design includes desktop - wide layout with 2 or 3 columns
    • Resizes to one column for smartphone 320 or 480px width

Best Practices for making your website mobile-friendly
  • responsive web design is the best way to go
  • design your site for mobile first then upscale to larger screen widths
  • find info fast, mobile user is on the go
  • minimize navigation and # clicks
  • now it’s touch UI
  • buttons preferred over hyperlinks
  • vertical menu for mobile; horizontal menu for desktop
  • Limit home screen menu to less than 5 buttons
  • Simplify navigation on sub-pages by having a Home or Back button
  • Mobile users are often doing something else at the same time. Eg. Walking dog and surfing phone with thumb
 
Your mobile site needs to make an impression ASAP

  • For examples of mobile sites: www. Mobileawesomeness.com
  • Get pages loading quickly
  • Eg http://m.raisingcaneslexington.com
  • Subpage: Products – use icons instead of text
  • View Full Site – link to full size site with more detailed info

Some great examples of mobile-friendly websites:
(Note: these are best viewed on  your mobile-device)

1. Eg. http://mobile.drivetime.com
- Mobi site has 3 buttons horizontal
- Minimal pictures
 
2. Eg. http://m.iams.com/mt/www.iams.com/index
  • Good use of white space
  • wide thick buttons for big fingers
 
The world around the Mobile User
  • mobi design is bolder than its desktop version
  • physical environment – low lighting, location, noise, music, calls, texts
  • user is typically multi-tasking and has short attention span, low cognitive load
  • Keep tasks simple, display required info quickly
 
Summary Design Tips

  • Big buttons – easy to click
  • Strong bold colours – high contrast
  • Few images, with high visual impact
  • Lots of white space, carefully crafted text
  • Space links well apart
  • Put all important buttons closer to the top
  • Logos are typically top left or centered and always link to home screen
  • Icons are useful for quick navigation for main topic areas
 
Development Considerations
  • website file size limitation
  • slower download speeds
  • network connection speeds eg. For wifi
  • device-centric considerations
  • screen sizes and resolutions
 
Testing Download Speeds
  • different data plans
  • test on Testmyiphone.com for download speeds
  • also try speedtest.net
 
Eg. Ad for Bell Canada 4G/LTE  up to 42 mbps
They claim up to 42 mbps – really?
 
So many different screen sizes and resolutions:
  • Android – 320x480 to 10 inches
  • iPhone 5 – 640x1136 at 326 ppi, retina display
  • iPad3 2048x1536 retina display
 
Eg. BestBuy.ca is good example
Their website has 3 versions – detects tablet device type and displays the correct version
 
Use online emulators to test your mobi website. (Note: these work best on your desktop.)
  • browserstack.com
  • ipadpeek.com
  • responsinator.com

Contact Katy at SeascapeWebDesign.com
for your Free 1 hour consultation on how to reach millions of smartphone users with your mobile-friendly website.