We’ve entered a new era where an increasing number of devices with wildly divergent features— including phones, tablets, game consoles, and TVs—are connected to the Internet. As the way people access the Internet changes, there is an urgent need to rethink how we use the web to communicate. This doesn't mean creating separate solutions for each device but rather preparing our existing content to meet an unpredictable future. Responsive web design means changing how we plan and evaluate performance. Dave Olsen and Doug Gapinski share and examine examples to help institutions rethink and adjust for the future-friendly web. Presenters Dave Olsen Professional Technologist, West Virginia University Doug Gapinski Strategist, mStoner

1. YOU
RIGHT
EVERYTHING
NOT QUITE
KNOW ANYMORE
IS
RETHINKING BEST PRACTICES TO RESPOND TO THE FUTURE

2. Dave Olsen Doug Gapinski
Professional Technologist Strategist
West Virginia University mStoner
@dmolsen @thedougco

3. Doug: planning
and design
Dave: development
and performance

4. PLEASE RETWEET
#heweb12
#uad2

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

6. I. RETHINK EVERYTHING

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

8. 55% of Facebook's monthly
active user base accesses
Facebook on a mobile device.
Source: Facebook

9. “...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

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

11. +
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

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

13. + >
Mobile and tablet traffic is predicted
to outpace desktop traffic
by 2015 or sooner.
Source: IDC

14. 48% of prospects who visited a
school with a mobile site were
positively affected.
Source: Noel Levitz’s “Mobile E-Expectations Report”

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

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

17. II. OUR REALITY
http://flic.kr/p/8BPQ2q

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

19. Visitors Contributors
CMS
+
+
Developers

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

21. CLIENTS WANT TO KEEP DOING WHAT THEY’VE ALWAYS DONE
“ Links don’t open apps. ”
— Jason Grigsby

22. MOBILE WEB IS ALIVE & KICKING
Search
Email Social Media

23. http://flic.kr/p/axKd6X
Coming to Grips
Finding balance.

24. ELEGANCE + LAZINESS

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

26. III. MAKING THE CASE

27. 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 College
Spring Arbor University
Herzing University
St. Joseph’s College

28. Show, don’t sell
bostonglobe.com
weedygarden.net
mediaqueri.es

29. Source: gomobile.tamu.edu

30. IV. PLANNING AND PATTERNS

31. Planning is the number one way to guarantee
you wind up with a high performance,
good looking, fully responsive site.

32. Ethan Marcotte,
the Moses of Responsive Design

33. 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 the
other media design performs well across devices.
Media Conditional code that changes items on a
queries page based on device detection or
browser width.

34. 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 the
conditionals server, not the device.

35. +

36. Planning: full wireframes for each breakpoint
Pros: 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 mind
because it provides the most detail later
• with a slow-decision group, can bog
down length of process

37. Planning: responsive prototypes
Pros: Cons:
• gets specific about repositioning and • requires someone on the team have
content without promising every detail front-end skills
• one asset per template instead of three • may not preclude the need for more
or four detailed wireframes

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

39. Sparkbox’s in-browser style prototype
Writeup: seesparkbox.com Download: github fork

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

41. Responsive design patterns
Source: Brad Frost on github.com

42. Responsive design patterns
Source: Brad Frost on github.com

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

44. Source: Zurb

45. Patterns for contemporary look and feel
patterntap.com
dribbble.com
mobiletuxedo.com

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

47. © Brad Frost
brad’s iceberg

48. © Brad Frost
brad’s iceberg

49. V. OPTIMIZATION & TESTING

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

51. 86%
RWD sites whose
small screen design
weights the same as
the large screen.
Source: Podjarny

52. 71%
Users expect your
mobile site to load
as quickly as your
desktop site.
Source: Gomez

53. “ 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

54. Mobile first means
performance first
(start thinking about performance at the design stage)

55. PRIMARY PERFORMANCE ISSUES FOR RWD
Over Downloading Poor Networks
Download & Hide High Latency
Download & Shrink Variable Bandwidth
Excess DOM Packet Loss

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

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

58. 1. REDUCING ASSET SIZE
HTML & CSS Use mod_gzip or mod_deflate to make sure text-based
compression 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.

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

60. 3. SPEEDING-UP PAGE RENDER
Avoid 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.

61. http://flic.kr/p/a4VsPv
RESS* can be a scalpel
for your responsive designs.
REsponsive Design + Server Side Components

62. toolbox, tools
TESTING TOOLS
Testing Tools
http://flic.kr/p/4BZsQJ

63. PERFORMANCE TESTING SITES
WebPagetest Mobitest

64. LEARN TO LOVE THE INSPECTOR

65. THE ULTIMATE MOBILE PERFORMANCE BOOKMARKLET
mobile bookmarklet

66. SLOWING THINGS DOWN
Charles Throttle
charlesproxy.com

67. EMULATING MOBILE DEVICES
BrowserStack Emulators
charlesproxy.com

68. GET YOUR HANDS ON REAL DEVICES
eBay
MobileKarma.com
Cellphone store leftovers
Open device labs
http://flic.kr/p/7972f6

69. 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-level
Android, high-end Android,
a tablet, Blackberry, $438
Windows Phone 7

70. ADOBE EDGE INSPECT
(THE APP FORMERLY KNOWN AS ADOBE SHADOW)

71. Higher education professionals
need to think & behave in a
future-friendly way.
Visit: futurefriend.ly

72. QUESTIONS?

73. THANKS!
Dave Olsen Doug Gapinski
Professional Technologist Strategist
West Virginia University mStoner
@dmolsen @thedougco