Responsive Web Design at UCR

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

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

10/2/2013 Randal Maile - VCSA TS 4

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

10/2/2013 8
The Mobile Landscape – U.S. Behavior

10/2/2013 10
at work!!

10/2/2013 11
REC CENTER Mobile Usage – growth over two years
300% Growth!

10/2/2013 12
THE WELL Mobile Usage – growth over two years
300% Growth (again)!

10/2/2013 13
DINING Mobile Usage – growth over two years
300% Growth (WTH)!

The Mobile First Mindset
10/2/2013 14
Why is this important?

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

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.

10/2/2013 18
APPS APPS APPS – not so fast!
No,
not
always
….

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

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”.

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:

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.

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.

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

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.

VCSA Tools
10/2/2013 26
Taking the Plunge

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

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)

10/2/2013 29
Browser Support

Our Proof of Concept
10/2/2013 30
Culinary Chameleon

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

10/2/2013 32
Desktop Comp – Food Truck Page

10/2/2013 33
Mobile Layout

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.

Resources
10/2/2013 35
Some Hefty Reading…

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

Responsive Web Design at UCR

More Related Content

Similar to Responsive Web Design at UCR (20)

Recently uploaded (20)

Responsive Web Design at UCR

Editor's Notes