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. 
