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

YOU RIGHT EVERYTHING NOT QUITE KNOW ANYMORE ISRETHINKING BEST PRACTICES TO RESPOND TO THE FUTURE

Dave Olsen Doug GapinskiProfessional Technologist StrategistWest Virginia University mStoner @dmolsen @thedougco

Doug: planning and designDave: development and performance

PLEASE RETWEET#heweb12 #uad2

EVERYTHING YOU KNOW IS NOT QUITE RIGHT ANYMORE I. Rethink everything II. Our reality III. Making the case IV. Planning + patterns V. Optimization + testing

I. RETHINK EVERYTHING

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

55% of Facebooks monthly active user base accessesFacebook on a mobile device. Source: Facebook

“...we actually have more peopleon a daily basis using mobile webFacebook than we have using ouriOS or Android apps combined.” Source: Mark Zuckerburg @ Disrupt 2012

Sequential browsing: 90% of people begin a task on one device (most commonly asmartphone) and finish it on another. Source: Google

+ Mobile “on the go” is a myth:81% of 18-24 year olds use theirmobile device while watching TV. Source: Pew Internet & American Life Project

17% of cellphone users in the USuse their phone as their primary web browsing platform. Source: Pew Internet & American Life Project

+ >Mobile and tablet traffic is predicted to 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 todeliver content on multiple devices exists. We must be proactive increating great experiences for audiences on all devices.

After the launch of a responsivehome page for WVU mobile traffic increased from 11% to 22% in less than a month. Source: WVU analytics

II. OUR REALITY http://ﬂic.kr/p/8BPQ2q

The first higher ed mobile web solutions were dominated by the m-dots. But those solutions don’t scale.

Visitors Contributors CMS + + Developers

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

http://ﬂic.kr/p/axKd6XComing to Grips Finding balance.

ELEGANCE + LAZINESS

http://ﬂic.kr/p/9UmsCJ

III. MAKING THE CASE

100% SUCCESS RATE FOR SELLING JUST BY TALKING ABOUT IT Responsive Redesigns in Progress Retrofits in Progress UC Hastings University of Rochester Webster University Manhattan College Drake University Miami University Whittier CollegeSpring Arbor University Herzing University St. Joseph’s College

Show, don’t sellbostonglobe.com weedygarden.net mediaqueri.es

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

PLANNING FOR FUNDAMENTALS A flexible The design has fluid layout elements grid that change based on browser size.Conditional The design uses one or more techniques images and to scale images and media so that theother media design performs well across devices. Media Conditional code that changes items on a queries page based on device detection or browser width.

PLANNING FOR ADVANCED FUNDAMENTALS Advanced A basic fluid grid is the priority; but to be fully elements responsive we must often cover slideshows, tables, tabs, multi-column type, custom widgets, forms, and more. Touch Touch input is a critical development input component as we move away from a mouse- first model of human-computer interaction RESS and Heavy lifting for user agent detection and server-side conditional media deployment is done by theconditionals server, not the device.

Planning: full wireframes for each breakpointPros: Cons• most thorough method • takes the longest• no page element left unexplored • in some cases, wireframes don’t• may be the best solution for retrofitting preclude the group changing their mindbecause it provides the most detail later • with a slow-decision group, can bog down length of process

Planning: responsive prototypesPros: Cons:• gets specific about repositioning and • requires someone on the team havecontent without promising every detail front-end skills• one asset per template instead of three • may not preclude the need for moreor four detailed wireframes

Styletiles: for when moodboardsare too vague and comps are too precise Source: styletil.es

Sparkbox’s in-browser style prototypeWriteup: seesparkbox.com Download: github fork

Design patterns provide effectiveexamples at the beginning of a projectso that you’re not rethinking the wheel. Source: Luke W

Responsive design patternsSource: Brad Frost on github.com

New patterns: off canvas touch layouts Source: Luke W and Jason Weaver

Source: Zurb

Patterns for contemporary look and feel patterntap.comdribbble.com mobiletuxedo.com

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

V. OPTIMIZATION & TESTING

1 MBThe average weight of a web page today. Flash HTML CSS Other Images JavaScript 82% Source: HTTP Archive

86%RWD sites whosesmall screen designweights the same asthe large screen.Source: Podjarny

71%Users expect yourmobile site to loadas quickly as yourdesktop site.Source: Gomez

“ The way in which CSS mediaqueries have been promoted for mobile hides tough problems and gives developers a falsepromise of a simple solution for designing for small screens.” Source: Jason Grigsby on Speakerdeck

Mobile first meansperformance first(start thinking about performance at the design stage)

PRIMARY PERFORMANCE ISSUES FOR RWDOver Downloading Poor NetworksDownload & Hide High LatencyDownload & Shrink Variable Bandwidth Excess DOM Packet Loss

THE LATENCY EFFECT The average web site requires 85 requests... Cable Modem Cell Network (20ms latency) (200ms latency) http://ﬂic.kr/p/6xQPdi 0.4 seconds 4.2 secsSource: Guy Podjarny & HTTP Archive 10 times slower!

MOBILE OPTIMIZATION FOCUS 1. Reduce asset size 2. Reduce requests 3. Speed-up page render http://ﬂic.kr/p/4zzKee

1. REDUCING ASSET SIZEHTML & CSS Use mod_gzip or mod_deflate to make sure text-basedcompression assets are compressed for transfer. Image Use a service like kraken.io to optimize images.compression Also use CSS sprites as appropriate. Try to avoid When possible, think about avoiding images. 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, Avoid using bulky frameworks if you’re using them for even better, simple tasks like selectors. Try microjs.com to find Vanilla JS libraries that may be smaller & more suitable. JavaScript also blocks the rendering of the page.

2. REDUCING REQUESTS Browser The simplest way to reduce requests is to make sure the cache browser doesn’t need to make them. Make sure assets are bring cached on the browser.Concatenate Combine similar files together in one or multiple larger JS & CSS 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 Use a resource loader like Modernizr.load to loading conditionally include JavaScript & CSS files.

3. SPEEDING-UP PAGE RENDERAvoid DOM By using JS to modify the DOM you can cause reflows & unnecessary reflows & repaints of your browser. They repaints slow down page render time as well as burn battery. Defer Use HTML5’s script defer & async attributes to delay loading of downloading files. Can also insert script elements into JavaScript the DOM using the onLoad event. Lazy load Comment out JavaScript that isn’t required at page load. JavaScript Uncomment & eval() when required.Touch beats While not directly related to page render, by making onClick sure your links use a Touch event rather than an onClick event user interactions will speed up by 300ms. Avoid SM Try using simple links to services rather than utilizing the widgets JavaScript widgets. They’re performance hogs.

http://ﬂic.kr/p/a4VsPvRESS* can be a scalpelfor your responsive designs.REsponsive Design + Server Side Components

toolbox, tools TESTING TOOLS Testing Toolshttp://ﬂic.kr/p/4BZsQJ

PERFORMANCE TESTING SITESWebPagetest Mobitest

LEARN TO LOVE THE INSPECTOR

THE ULTIMATE MOBILE PERFORMANCE BOOKMARKLET mobile bookmarklet

SLOWING THINGS DOWN Charles Throttlecharlesproxy.com

EMULATING MOBILE DEVICESBrowserStack Emulatorscharlesproxy.com

GET YOUR HANDS ON REAL DEVICESeBayMobileKarma.comCellphone store leftoversOpen device labs http://ﬂic.kr/p/7972f6

HOW TO DECIDE WHICH TO GET Base on: Example: WiFi-capable, Analytics Rank, OS, Screen iPod Touch Dimensions, & Cost Samsung Fascinate + HTC Thunderbolt + Suggested focus: iPod Touch, mid-levelAndroid, high-end Android, a tablet, Blackberry, $438 Windows Phone 7

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?

THANKS! Dave Olsen Doug GapinskiProfessional Technologist StrategistWest Virginia University mStoner @dmolsen @thedougco

https://twitter.com	148
https://si0.twimg.com	34
http://higheredanalytics.com	6
http://tweetedtimes.com	5
http://www.scoop.it	5
http://bottlenose.com	3
http://twitter.com	3
http://faxo.com	2
http://us-w1.rockmelt.com	1
http://www.m.techgig.com	1
http://www.instacurate.com	1

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

by Dave Olsen on Oct 09, 2012

Accessibility

Categories

Upload Details

Usage Rights

11 Embeds 209

Statistics

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