responsive web design at ucr

04/11/2023 1Randal Maile - VCSA TS

Starting a Dialog

Responsive Web Design (RWD)


The Device Tidal Wave

GROWTH = OPPORTUNITY

04/11/2023 Randal Maile - VCSA TS 3


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


The Mobile Landscape – U.S. Behavior


at work!!


REC CENTER Mobile Usage – growth over two years

300% Growth!


THE WELL Mobile Usage – growth over two years

300% Growth (again)!


DINING Mobile Usage – growth over two years

300% Growth (WTH)!


The Mobile First Mindset

Why is this important?


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


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.


APPS APPS APPS – not so fast!

No, not always….


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


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


Great - see it in action?

Media Queries - A collection of inspirational websites using media queries

and responsive web design.

Low and behold:

http://mediaqueri.es/


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.


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.

http://bradfrostweb.com/blog/web/responsive-nav-patterns/

http://bradfrostweb.com/blog/web/responsive-nav-patterns/


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-sidesolution


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

Taking the Plunge


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

http://foundation.zurb.com/


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)


Browser Support


Our Proof of Concept

Culinary Chameleon


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


Desktop Comp – Food Truck Page


Mobile Layout


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

Some Hefty Reading…


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 – Wha

t Mobile Users Want Cisco Visual Networking Index: Global

Mobile Data Traffic Forecast Update: 2011-2016

Leaders Luke Wroblewski Ethan Marcotte Brad Frost

http://alistapart.com/

http://smashingmagazine.com/

http://css-tricks.com/

http://www.netmagazine.com/

http://www.netmagazine.com/

http://sitepoint.com/

http://www.abookapart.com/products/responsive-web-design

http://www.morganstanley.com/institutional/techresearch/pdfs/Internet_Trends_041210.pdf

http://www.morganstanley.com/institutional/techresearch/pdfs/Internet_Trends_041210.pdf

http://www.gomez.com/wp-content/downloads/19986_WhatMobileUsersWant_Wp.pdf

http://www.gomez.com/wp-content/downloads/19986_WhatMobileUsersWant_Wp.pdf

http://www.cisco.com/en/US/solutions/collateral/ns341/ns525/ns537/ns705/ns827/white_paper_c11-520862.html



http://www.lukew.com/



http://ethanmarcotte.com/

http://ethanmarcotte.com/

http://bradfrostweb.com/

responsive web design at ucr

Technology