Everything You Know is Not Quite Right Anymore: Rethinking Best Practices to Respond to the Future

EV

ER

YT

HIN

G YOUKNOW

IS NO

T Q

UIT

E

RIG

HT

ANYMORE

RETHINKING BEST PRACTICES TO RESPOND TO THE FUTURE

Dave OlsenProfessional TechnologistWest Virginia University

Doug GapinskiStrategistmStoner

@thedougco@dmolsen

Dave: development and performance

Doug: planning and design

#uad2

PLEASE RETWEET

#heweb12

I. Rethink everythingII. Our reality

III. Making the caseIV. Planning + patterns

V. Optimization + testing

EVERYTHING YOU KNOW IS NOT QUITE RIGHT ANYMORE

I. RETHINK EVERYTHING

Most colleges and universities are only showing ~10 to 15% traffic from mobile operating systems.

Source: anecdotal from clients

55% of Facebook's monthly active user base accesses

Facebook on a mobile device.

Source: Facebook

“...we actually have more people on a daily basis using mobile web Facebook than we have using our iOS or Android apps combined.”

Source: Mark Zuckerburg @ Disrupt 2012

Sequential browsing:90% of people begin a task on one device (most commonly a

smartphone) and finish it on another.

Source: Google

Mobile “on the go” is a myth:81% of 18-24 year olds use their

mobile device while watching TV.

Source: Pew Internet & American Life Project

+

17% of cellphone users in the US use their phone as their primary

web browsing platform.

Source: Pew Internet & American Life Project

Mobile and tablet traffic is predictedto outpace desktop traffic

by 2015 or sooner.

Source: IDC

>+

48% of prospects who visited a school with a mobile site were

positively affected.

Source: Noel Levitz’s “Mobile E-Expectations Report”

We can see that the need to deliver content on multiple

devices exists.

We must be proactive in creating great experiences for

audiences on all devices.

After the launch of a responsive home page for WVU mobile traffic

increased from 11% to 22% in less than a month.

Source: WVU analytics

II. OUR REALITY

http://flic.kr/p/8BPQ2q

The first higher ed mobile web solutions were dominated by the m-dots.

But those solutions don’t scale.

+

Developers

ContributorsVisitors

+CMS

VISITORS WILL STILL RELY ON TRADITIONAL MEANS OF ACCESS

Not every mobile device will have your app on it but every mobile

device will have a browser.— Jason Grigsby

“

”

CLIENTS WANT TO KEEP DOING WHAT THEY’VE ALWAYS DONE

Links don’t open apps.— Jason Grigsby

“ ”

MOBILE WEB IS ALIVE & KICKING

SearchEmail Social Media

Coming to Grips

Finding balance.

http://flic.kr/p/axKd6X

ELEGANCE + LAZINESS

http://flic.kr/p/9UmsCJ

III. MAKING THE CASE

UC HastingsWebster University

Drake UniversityMiami UniversityWhittier College

Spring Arbor UniversityHerzing UniversitySt. Joseph’s College

University of RochesterManhattan College

100% SUCCESS RATE FOR SELLING JUST BY TALKING ABOUT IT

Responsive Redesigns in Progress Retrofits in Progress

Show, don’t sell

bostonglobe.com

mediaqueri.es

weedygarden.net

Source: gomobile.tamu.edu

IV. PLANNING AND PATTERNS

Planning is the number one way to guarantee you wind up with a high performance,

good looking, fully responsive site.

Ethan Marcotte, the Moses of Responsive Design

A flexible grid

The design has fluid layout elements that change based on browser size.

Conditional images and

other media

The design uses one or more techniques to scale images and media so that the design performs well across devices.

Media queries

Conditional code that changes items on a page based on device detection or browser width.

PLANNING FOR FUNDAMENTALS

Advanced elements

A basic fluid grid is the priority; but to be fully responsive we must often cover slideshows, tables, tabs, multi-column type, custom widgets, forms, and more.

Touchinput

Touch input is a critical development component as we move away from a mouse-first model of human-computer interaction

RESS andserver-side

conditionals

Heavy lifting for user agent detection and conditional media deployment is done by the server, not the device.

PLANNING FOR ADVANCED FUNDAMENTALS

+

Pros:• most thorough method• no page element left unexplored• may be the best solution for retrofittingbecause it provides the most detail

Cons• takes the longest• in some cases, wireframes don’t preclude the group changing their mind later• with a slow-decision group, can bog down length of process

Planning: full wireframes for each breakpoint

Planning: responsive prototypes

Pros:• gets specific about repositioning and content without promising every detail• one asset per template instead of three or four

Cons:• requires someone on the team have front-end skills• may not preclude the need for more detailed wireframes

Source: styletil.es

Styletiles: for when moodboardsare too vague and comps are too precise

Writeup: seesparkbox.com Download: github fork

Sparkbox’s in-browser style prototype

Design patterns provide effective examples at the beginning of a project so that you’re not rethinking the wheel.

Source: Luke W

Responsive design patterns

Source: Brad Frost on github.com

Responsive design patterns

Source: Brad Frost on github.com

Source: Luke W and Jason Weaver

New patterns: off canvas touch layouts

Source: Zurb

Patterns for contemporary look and feel

dribbble.com

mobiletuxedo.com

patterntap.com

A last note on planning: plan to conduct user testing on multiple devices

brad’s iceberg

© Brad Frost

brad’s iceberg

© Brad Frost© Brad Frost

V. OPTIMIZATION & TESTING

The average weight of a web page today.

Source: HTTP Archive

Images JavaScript

Flash

HTM

L

CSS

Other

82%

1 MB

RWD sites whose small screen design weights the same as the large screen.

Source: Podjarny

86%

Users expect your mobile site to load as quickly as your desktop site.

71%

Source: Gomez

The way in which CSS media queries have been promoted for

mobile hides tough problems and gives developers a false

promise of a simple solution for designing for small screens.

Source: Jason Grigsby on Speakerdeck

“

”

Mobile first means performance first

(start thinking about performance at the design stage)

Over Downloading

Download & HideDownload & Shrink

Excess DOM

PRIMARY PERFORMANCE ISSUES FOR RWD

Poor Networks

High LatencyVariable Bandwidth

Packet Loss

THE LATENCY EFFECT

The average web site requires 85 requests...

Cable Modem(20ms latency)

0.4 seconds

Cell Network(200ms latency)

4.2 secs

10 times slower!Source: Guy Podjarny & HTTP Archive

http://flic.kr/p/6xQPdi

MOBILE OPTIMIZATION FOCUS

1. Reduce asset size2. Reduce requests 3. Speed-up page render

http://flic.kr/p/4zzKee

HTML & CSS compression

Use mod_gzip or mod_deflate to make sure text-based assets are compressed for transfer.

Image compression

Use a service like kraken.io to optimize images. Also use CSS sprites as appropriate.

Try to avoid images

When possible, think about avoiding images. Implement with CSS or SVG.

Minification Use a minifying service to make sure text-based assets are as small as possible. If using PHP use Minify. If using a Mac check out CodeKit.

MicroJS or, even better,

Vanilla JS

Avoid using bulky frameworks if you’re using them for simple tasks like selectors. Try microjs.com to find libraries that may be smaller & more suitable. JavaScript also blocks the rendering of the page.

1. REDUCING ASSET SIZE

Browser cache

The simplest way to reduce requests is to make sure the browser doesn’t need to make them. Make sure assets are bring cached on the browser.

ConcatenateJS & CSS

Combine similar files together in one or multiple larger files to reduce requests. May harm performance too.

localStorage Google & Bing use HTML5‘s localStorage as an enhancement to the browser cache. Check out basket.js. Avoid AppCache like the plague!

data: URI For small images & fonts try embedding them in your CSS file by using the data: URI.

Conditional loading

Use a resource loader like Modernizr.load to conditionally include JavaScript & CSS files.

2. REDUCING REQUESTS

Avoid DOM reflows &

repaints

By using JS to modify the DOM you can cause unnecessary reflows & repaints of your browser. They slow down page render time as well as burn battery.

Defer loading of JavaScript

Use HTML5’s script defer & async attributes to delay downloading files. Can also insert script elements into the DOM using the onLoad event.

Lazy load JavaScript

Comment out JavaScript that isn’t required at page load. Uncomment & eval() when required.

Touch beats onClick

While not directly related to page render, by making sure your links use a Touch event rather than an onClick event user interactions will speed up by 300ms.

Avoid SM widgets

Try using simple links to services rather than utilizing the JavaScript widgets. They’re performance hogs.

3. SPEEDING-UP PAGE RENDER

RESS* can be a scalpel for your responsive designs.

REsponsive Design + Server Side Components

http://flic.kr/p/a4VsPv

Testing Tools

toolbox, tools

TESTING TOOLS

http://flic.kr/p/4BZsQJ

PERFORMANCE TESTING SITES

MobitestWebPagetest

LEARN TO LOVE THE INSPECTOR

mobile bookmarklet

THE ULTIMATE MOBILE PERFORMANCE BOOKMARKLET

charlesproxy.com

SLOWING THINGS DOWN

ThrottleCharles

charlesproxy.com

EMULATING MOBILE DEVICES

EmulatorsBrowserStack

eBay MobileKarma.com Cellphone store leftoversOpen device labs

GET YOUR HANDS ON REAL DEVICES

http://flic.kr/p/7972f6

Base on:WiFi-capable, Analytics

Rank, OS, Screen Dimensions, & Cost

Suggested focus: iPod Touch, mid-level

Android, high-end Android, a tablet, Blackberry,

Windows Phone 7

HOW TO DECIDE WHICH TO GET

iPod TouchSamsung Fascinate +HTC Thunderbolt +

$438

Example:

ADOBE EDGE INSPECT

(THE APP FORMERLY KNOWN AS ADOBE SHADOW)

Higher education professionals need to think & behave in a

future-friendly way.

Visit: futurefriend.ly

QUESTIONS?

Dave OlsenProfessional TechnologistWest Virginia University

Doug GapinskiStrategistmStoner

@thedougco@dmolsen

THANKS!