The road to responsive design - how to get on the path to greater usability.

1. Starting a Dialog
Responsive Web Design (RWD)
10/2/2013 1Randal Maile - VCSA TS

2. The Device Tidal Wave
10/2/2013 2
GROWTH = OPPORTUNITY
Randal Maile - VCSA TS

3. 10/2/2013 3Randal Maile - VCSA TS

4. 10/2/2013 Randal Maile - VCSA TS 4

5. 10/2/2013 Randal Maile - VCSA TS 5

6. 10/2/2013 Randal Maile - VCSA TS 6

7. 10/2/2013 7
The Mobile Landscape - usage
 Average smartphone usage nearly
tripled in 2011
-Cisco VNI Global Mobile Forecast
2012
 Android is now higher than iPhone
levels of data use.
-Cisco VNI Global Mobile Forecast
2012
 “The Number Of Mobile Devices Will
Exceed World’s Population By 2012 (&
Other Shocking Figures)”
-tech crunch – Feb 14th
2012
 Avg smartphone user visits up to 24
Web sites visits per day
-MobiAD News
2011
Randal Maile - VCSA TS

8. 10/2/2013 8
The Mobile Landscape – U.S. Behavior
Randal Maile - VCSA TS

9. 10/2/2013 Randal Maile - VCSA TS 9

10. 10/2/2013 10
at work!!
Randal Maile - VCSA TS

11. 10/2/2013 11
REC CENTER Mobile Usage – growth over two years
300% Growth!
Randal Maile - VCSA TS

12. 10/2/2013 12
THE WELL Mobile Usage – growth over two years
300% Growth (again)!
Randal Maile - VCSA TS

13. 10/2/2013 13
DINING Mobile Usage – growth over two years
300% Growth (WTH)!
Randal Maile - VCSA TS

14. The Mobile First Mindset
10/2/2013 14
Why is this important?
Randal Maile - VCSA TS

15. 10/2/2013 15
What the tech industry is thinking
 We're just now starting to think about mobile
first and desktop second for a lot of our
products.”
-Kate Aronowitz, Design Director Facebook
 We really need to shift now to start thinking
about building mobile first. This is an even
bigger shift than the PC revolution.”
-Kevin Lynch, CTO Adobe
 “Designing the mobile app first forced us to
strip down to essentials.”
-Bill DeRouchey, BankSimple
"We understand that the new rule is
mobile first," Schmidt said. "Mobile
first in everything. Mobile first in
terms of applications. Mobile first in
terms of the way people use things.
And it means … that we have a role
now to inform, to educate through all
these devices."
- Eric Schmidt, Executive Chairman
Google
Randal Maile - VCSA TS

16. 10/2/2013 16
What the web design community is thinking
 Mobile First is a major paradigm shift
 The tidal wave is coming so make sure your designs don’t loose users in what
will become the dominant device category.
 Mobile First design forces teams to have a laser like focus – there’s no room
for bloated content.
 Progressive Enhancement vs. Graceful Degradation
 PE = Scaling up { Ensures that your message, content and functionality remain
intact as the screen real estate and connection speed increase}
 GD = Scaling down { Runs the risk of your core message and functionaltiy getting
lost by the time you squish it all the way down to mobile context.
Randal Maile - VCSA TS

17. 10/2/2013 17Randal Maile - VCSA TS

18. 10/2/2013 18
APPS APPS APPS – not so fast!
No,
not
always
….
Randal Maile - VCSA TS

19. 10/2/2013 19
Pros and Cons – Native vs. RWD
Pros of a native app:
 Easily monetized
 Access to device sensors
 Once downloaded, the content is
easily accessible
 Content available offline
 Great is there’s no WiFi or 3G
Pros of a responsive site:
 Bypass the App Store approval
process
 No user intervention needed to
download an app
 Easier to build and less time-
consuming
 Content distributed cross platform
 Better suited for basic web sites
Randal Maile - VCSA TS

20. 10/2/2013 20
What is Responsive Web Design (RWD)?
 Ethan Marcotte coined the term – boils down to:
“Rather than tailoring disconnected designs to each of an ever-increasing
number of web devices, we can treat them as facets of the same experience.
We can design for an optimal viewing experience, but embed standards-
based technologies into our designs to make them not only more flexible, but
more adaptive to the media that renders them”.
Randal Maile - VCSA TS

21. 10/2/2013 21
Great - see it in action?
 Media Queries - A collection of inspirational websites using media queries
and responsive web design.
Low and behold:
Randal Maile - VCSA TS

22. 10/2/2013 22
RWD - Basics
 Combines fluid layouts, flexible images and media queries to help us build
sites that gracefully adapt to any environment they encounter.
 Fluid Grids that ebb and flow w/ the devices’ screen size.
 Flexible images and media that keep content intact at any resolution.
 Media queries allowing designs to adapt by establishing dimensional
breakpoints.
Randal Maile - VCSA TS

23. 10/2/2013 23
Major Design Considerations
 Typography:
 Consider creating an adaptive typography
layer in your CSS
 Basically, you need to think about font sizes
and leading so that they are optimized per
device.
 Links:
 Consider optimal target areas on smaller
screens
 Larger Buttons
 Minimum of 9mm / 34 px square
 Plain hypertext – line-height is important
 Touch Target Sizes
 Recommended touch target size is
9mm/34px
 Minimum touch target size is 7mm/ 26px
 Visual size is 60-70% of touch target size
 Navigation: A respectful challenge,
especially if there are many sections
with a deep hierarchy
 Brad Frost has written a summary of
some different approaches to
navigation .
 Superfluous content:
 Users are not always “on the go” as the
idea in the web community originated
– be careful about discarding content.
(80% of mobile users at home!)
 Having said this, the “mobile first”
philosophy, applied intelligently, will
tend to produce cleaner websites that
have more focus – desktop layouts can
then be expanded out.
Randal Maile - VCSA TS

24. 10/2/2013 24
RWD Technical Considerations
 Reduce Requests and File Size:
 Minimize server requests and redirects
 Consolidate CSS & Javascript to a single file
 Reduce dependencies on heavy JS libraries
 Minify your code
 Potentially use “Responsive-Images” or server-side
solution
Randal Maile - VCSA TS

25. 10/2/2013 25
Common Pitfalls
 Hiding Content - don’t penalize users for the device they happen to be
browsing with
 Having said – explore the use cases and the user’s environment – sometimes a site
that lends itself to on-the-go browsing will offer up unique content and placement.
 Extensive Navigation at the top of the page –
 Mobile users want to see content first – have to consider this – make sure nav is
either hidden, or minimal if shown.
 Take a bloated framework or CMS, too many server requests, large images,
uncompressed front-end code and expect an optimal mobile user experience
 Time before 74% of all users will bounce from your site = 5 seconds
 Consider everything that you and your client are planning on including
 Create a hierarchy of importance so that you can trim the unnecessary for the smaller
versions.
 Relying on device dimensions
 We don’t control visitor’s browser sizes. The more devices that come out the wider
the screen-size variety. It’s not about what happens at the breakpoints, it’s about
what happened between them.
Randal Maile - VCSA TS

26. VCSA Tools
10/2/2013 26
Taking the Plunge
Randal Maile - VCSA TS

27. 10/2/2013 27
Our Platform
 Zurb Foundation – Jonathan Smiley
 Front-end framework
 Designed to be overridden
 Resonable learning curve
 Light weight
 MVC3
 light-weight
 modern web standards adherent
 completely customizable
 Agile
 It’s not SharePoint – we can do
more and w/ less hassle!
 NuGet Package for Foundation w/
Demo site
Randal Maile - VCSA TS

28. 10/2/2013 28
More On Zurb
 Components:
 Global Styles
 Eric Meyer’s reset styles
 Typography, links, lists, tables, etc
base styles
 Flexible twelve column grid
 Semi-liquid, mobile-scaling
 Uses media queries to shift to
smaller devices
 Buttons that scale / modify on mobile
 Forms
 Validation styles, custom radio,
checkboxes, and select lists (easy to
style)
 UI Goodies
 Orbit – cool slider that scales;
supports swipe on touch devices
 Reveal – cool modal fly-in box
 Horizontal/Vertical Tabs (these get
converted automatically!!!)
 Tooltips; Pagination; Breadcrumbs
 Flexible Images and Video
 More on Layout
 Mobile Visibility- Want to hide something
on phones, or show it only on tablets? :
 Show-on-desktops; show-on-tablets;
show-on-phones
 Hide-on-desktops; hide-on-tablets;
hide-on-phones
 Mobile Grid – everything doesn’t
automatically get linearized:
 Block Grids – n-up styles based on
unordered lists
 Mobile Grid – supports nested 4-
column layout
 Source ordering – you can change the
order in which your columns get ordered
(desktop vs. mobile)
Randal Maile - VCSA TS

29. 10/2/2013 29
Browser Support
Randal Maile - VCSA TS

30. Our Proof of Concept
10/2/2013 30
Culinary Chameleon
Randal Maile - VCSA TS

31. 10/2/2013 31
Culinary Chameleon Site Features
 Concept: establish a web presence for
the UCR Food Trucks
 3 “pages”: Food Truck (“Culinary
Chameleon”); Coffee Truck (“Bear
Tracks”); Request Truck
 Features:
 Truck Location
 Truck Menu
 Truck Hours
 Google Map – truck location tracking
 Google Calendar – upcoming events
 Request a Truck web form – reserve
either truck
for upcoming events
 Twitter Feeds: @culinchameleon;
@UCR_CoffeeTruck
 Responsive web design can be
tricky – why CC is a good POC:
 Simple site – essentially 3 pages
 Fairly simple layout – not too
much overriding of the RWD
framework
 Simple navigation – can use OOTB
Foundation features
Randal Maile - VCSA TS

32. 10/2/2013 32
Desktop Comp – Food Truck Page
Randal Maile - VCSA TS

33. 10/2/2013 33
Mobile Layout
Randal Maile - VCSA TS

34. 10/2/2013 34
Why does this matter?
 Does the user bounce from your site if not rendered properly?
 Does the user bounce from your site if not quick enough?
 Is the user frustrated by navigation?
 When people land on a site that is tailored for their device, it speaks
volumes about your brand.
Randal Maile - VCSA TS

35. Resources
10/2/2013 35
Some Hefty Reading…
Randal Maile - VCSA TS

36. 10/2/2013 36
Useful Resources – High Regard
 Design Blogs
 A List Apart
 Smashing Magazine
 CSS Tricks
 .netMagazine
 SitePoint
 Books
 Responsive Web Design (A Book Apart)
 Mobile First (A Book Apart)
 Marketing Reports
 Morgan Stanley – Internet Trends 2010
 Equation Research / Compuware – What
Mobile Users Want
 Cisco Visual Networking Index: Global
Mobile Data Traffic Forecast Update: 2011-
2016
 Leaders
 Luke Wroblewski
 Ethan Marcotte
 Brad Frost
Randal Maile - VCSA TS