More than 70% of the world’s population is now connected to a mobile network, and more and more mobile devices are inviting users to let their fingers do the navigating. How well does your website accommodate the users of touch-friendly devices?
In 2011 alone, traffic to law firm websites from mobile devices increased by 152%. Your audience increasingly relies on mobile devices to get information, communicate and even conduct transactions. During this webinar, our interactive marketing experts – Kalev Peekna and Nate Denton – discussed how you can make your site more accessible to your mobile clients. They explored the latest trends and techniques in responsive and touch-friendly design and shared ways your firm can move beyond the desktop today.
To watch the webinar, visit http://www.hubbardone.com/touch-friendlydesign.
2. Welcome
Nathan Denton
Creative Director
Kalev Peekna
Director of Interactive
Marketing Strategy
3. Agenda
• Rise of Touch Interfaces
• Techniques for touch-friendly design
Content Strategy Interactive Technologies
Touch Interactivity Paginations and Listings
Bigger is Better From Form to Filter
Typography Handling Gestures
Contrast Ratios Responsive Design
Navigation Techniques
• Q&A
4. Rise of Touch Interfaces
• Smartphones
• Tablets
• New Operating Systems
5. Browsing Behavior is Changing
From January 2011 to January 2012, general mobile
web traffic grew almost 100%
4.3% 8.5%
January 2011 January 2012
Law firm traffic is not behind…
6.5% 5.6% - 9%
Average - Q1 2012 Range – Q1 2012
6. Strong preference for Touch
Mobile Traffic Q1 2012, Sites hosted by Hubbard One
2.34% 2.17%
6.71%
18.31% 40.14%
iPhone
iPad
Android
BlackBerry
30.33%
iPod
Unknown Mobile
8. Handheld vs. Tablet Strategy
Handheld Users Tablet Users
• Focused needs • General browsing
• Smaller screen • Full screen
• Dedicated site • Expect full site
• Need it to work well
12. Content Strategy for Touch
• Keep important things at the top
• Create a focus
• Break it up
1_Custom
Layout it scannable
• Make
• Allow exploration
What’s good for touch users is good for
everyone else.
13.
14. Touch Interactivity
Remember, a touch device has no mouse. This
means:
• No “hover” or “rollover”
1_Custom
• Rely on the click or drag to initiate actions
Layout
• Use transitions
• Reduce overlapping windows or areas
15.
16. Typography
• Limited space • Retina display
– Less is more
– Size matters
1_Custom
• More fonts
Layout
available
17.
18. Bigger is Better
• Large Buttons
• Ample Spacing
• Not all fingers
1_Custom
are created equal
Layout
19.
20. Universal Footer Sitemaps
• What do you do
at the end of a page?
• Doesn’t interrupt
content
• Feature sandbox for
multiple tools and
navigation
21.
22.
23. Persistent Navigation
• Navigation that remains anchored to the top
and/or side of your device
• Increases usability and can make a
more efficient user experience
}
• 30 seconds/day x 1.5
• 210 seconds/week
• 14 minutes/month
• ≈ 3 hours/year
24.
25. Paginations and Listings
Traditional pagination controls (previous, next, 1 2 3 4)
are outdated and hard to use on a touch interface:
• The fold is dead.
• Scrolling is fun. Really.
• Data columns look and feel like work.
• Use simplified controls for sorting and seeing more
content.
26.
27. From Form to Filter
Getting all your content onto the web used to be a
main goal of interactive marketing. Now the problem
is getting users to the right content:
• Avoid traditional search forms.
• Use progressive filters.
• Update results naturally. Use transitions.
• Leverage search.
30. Gestures
• The Big 3:
- Tap
- Swipe
- Pinch
• Gestures have a natural
feel for most users and
are easy to remember
31. Responsive Design
• Lets your site respond to a wide
range of screen sizes
– Handheld
– Tablets/Small Screens
– Desktop/Big Screen
• Lets your site respond to a wide
range of resolutions
• Not everyone maximizes their
browsers
• Utilizes latest coding techniques
33. Tech Notes
In many ways, re-tuning the technical approach for
touch interfaces makes things easier:
• Use newer standards: HTML5 / CSS
• Eliminate Flash
• Platform-independent tools like AJAX and JavaScript
• Common media formats like MP4 and MP3
34.
35. Touch Design Cliff Notes
• Content Strategy
• Touch Cognizant
• Bigger is Better
• Typography Matters
• Persistent Navigation & Footer Sitemaps = Efficient UX
• Pagination Can Be Cumbersome
• Filters are Fun
• Contrast Ratios Improve UX
• Gestures: Remember the Big 3
• Responsive Design Accounts for the Masses
• Keep Your Developer Happy