Giles McGrath presents his 10 best tips for mobile design.

1. DON’T JUST
REPLICATEDESIGN FOR MOBILE
GILES MCGRATH (Creative Director @ MediaWhiz gmcgrath@mediawhiz.com ) @gilesmcgrath 1

2. INTRO
About Giles McGrath www.gilesmcgrath.com
• Oversees creative department at MediaWhiz
• 12+ years of integrated creative design & strategy
• Brands include Verizon Wireless, AT&T,
Sony Ericsson, Adidas, Reebok, SoCo, Monster & more
GILES MCGRATH (Creative Director @ MediaWhiz gmcgrath@mediawhiz.com ) Twitter:
@gilesmcgrath 2
About My Company — MediaWhiz
• Integrated digital media & performance marketing ag
• Part of Matomy Media Group
• Services: Affiliate, Display, Search, Social, Data & Em
• Top-25 Digital Agency, Ad Age, 2012

3. MOBILE SITES ARE NOT
COMONPLACE
ComScore December 2012
ComScore December 2012
ComScore December 2012
1 IN 8 PAGE VIEWS
ARE DONE ON A
MOBILE DEVICE
79% OF LARGE
ONLINE
RETAILERS DO
NOT HAVE A
MOBILE
OPTIMIZED SITE
71% OF CONSUMERS
DO A MOBILE
SEARCH FOR MORE
INFOMATION AFTER
SEEING A TV,
MAGAZINE OR
ONLINE AD
GILES MCGRATH (Creative Director @ MediaWhiz gmcgrath@mediawhiz.com ) Twitter:
@gilesmcgrath 3

4. 4
MOBILETAKES OVERS

5. MOBILE STATS
Global mobile traffic
growth in 2012
As of December 2012
Source: Cisco systems
Value of mobile
transactions in 2012.
Source: Gartner
% of American adults who
own a smartphone
As of May 2013.
Source: Pew Research Center
Mobile traffic will increase
13 fold by 2017. Growing
at a compound annual
growth rate (CAGR) of 66
percent from 2012 to 2017
Source: Cisco systems
GILES MCGRATH (Creative Director @ MediaWhiz gmcgrath@mediawhiz.com ) Twitter:
@gilesmcgrath 5
56% 70% 13
fold
$
163.1
Billion

6. 2013 MOBILE TRANSACTIONS
That represents a 44% increase from 2012!
VALUE OF MOBILE TRANSACTIONS IN 2013
$235.4
BILLION
Est.Est.
GILES MCGRATH (Creative Director @ MediaWhiz gmcgrath@mediawhiz.com ) Twitter:
@gilesmcgrath 6

7. 7

8. HOW TO DESIGN FOR
MOBILE10 EASY STEPS YOU CAN DO
NOW
GILES MCGRATH (Creative Director @ MediaWhiz gmcgrath@mediawhiz.com )
@gilesmcgrath 8

9. 1. Use the K.I.S.S. Principle
GILES MCGRATH (Creative Director @ MediaWhiz gmcgrath@mediawhiz.com ) Twitter:
@gilesmcgrath 9
ZOOM SCOLL TAP JUST
TAP

10. 2. Smart Phones are smart. USE
IT
GILES MCGRATH (Creative Director @ MediaWhiz gmcgrath@mediawhiz.com ) Twitter:
@gilesmcgrath 10
• When you create your mobile site use the
features inherent on every smart phone.
• CLICK TO CALL
• LOCATION FINDER (GPS)
• CAMERA FOR OFFERS
• TWEET FOR PROMOTIONS

11. 3. MY ALMA MATERS(s), not
really.
GILES MCGRATH (Creative Director @ MediaWhiz gmcgrath@mediawhiz.com ) Twitter:
@gilesmcgrath 11
• Think THUMB not MOUSE.
• Features like HOVER do not work
• Use vertical scrolling or simple buttons

12. 4. NAVIGATION
GILES MCGRATH (Creative Director @ MediaWhiz gmcgrath@mediawhiz.com ) Twitter:
@gilesmcgrath 12
• Your site is a mobile piece of
paper.
• Thumbs are really good at
going up and down
• No horizontal scrolling
• No pinch and zoom

13. 5. LESS IS MUCH-MUCH MORE
GILES MCGRATH (Creative Director @ MediaWhiz gmcgrath@mediawhiz.com ) Twitter:
@gilesmcgrath 13
• Mobile sites should be readable at arm’s length
• Make use of “read more” links, collapsible content & bulleted lists
• CUT DOWN YOUR CONTENT. TRIM THE FAT

14. 6. SIMPLE UX/UI
GILES MCGRATH (Creative Director @ MediaWhiz gmcgrath@mediawhiz.com ) Twitter:
@gilesmcgrath 14
• Use CSS to organize content,
not HTML tables
• Use plenty of white space and
lean towards light-colored
backgrounds
• When possible, use single
column designs

15. 7. SIZE MATTERS
GILES MCGRATH (Creative Director @ MediaWhiz gmcgrath@mediawhiz.com ) Twitter:
@gilesmcgrath 15
• Load time greatly affects click-
through rates & time spent on site
• People will move on if site takes
more than 2-3 seconds to load
• Use picture cruncher to shrink large
images
• Use YouTube or HTML5 tags to
quickly render videos. Or don’t use
them.

16. 8. USE A MOBILE URL
GILES MCGRATH (Creative Director @ MediaWhiz gmcgrath@mediawhiz.com ) Twitter:
@gilesmcgrath 16
• Industry best practice has evolved to recognize value of a mobile subdomain
• Don’t replicate desktop site. Create unique mobile version that provides full site access

17. 9. RE-DIRECT (But let them
choose).
GILES MCGRATH (Creative Director @ MediaWhiz gmcgrath@mediawhiz.com ) Twitter:
@gilesmcgrath 17
• Automatically send users to mobile version of your site
• Allow for easy jump to main (full) version of site

18. 10. TEST, TEST THEN RETEST
GILES MCGRATH (Creative Director @ MediaWhiz gmcgrath@mediawhiz.com ) Twitter:
@gilesmcgrath 18
• Several online tools to check
mobile page size, 404 errors, load
times and cross-device
compatibility
• Sites such as
W3CmobileOKchecker.com offer
free page-testing service

19. Giles that’s great but….
I CAN JUST MAKE MY SITE RESPONSIVE
GILES MCGRATH (Creative Director @ MediaWhiz gmcgrath@mediawhiz.com ) Twitter:
@gilesmcgrath 19

20. Responsive VS mobile Optimized
20

21. THAT’S IT. QUESTIONS?
YOU’VE GOT QUESTIONS. WE’VE GOT
ANSWERS.
Like HomeDepot for mobile design
GILES MCGRATH (Creative Director @ MediaWhiz gmcgrath@mediawhiz.com ) Twitter:
@gilesmcgrath 21