SlideShare a Scribd company logo
YOU


                                 RIGHT
 EVERYTHING




                     NOT QUITE
              KNOW                       ANYMORE
              IS
RETHINKING BEST PRACTICES TO RESPOND TO THE FUTURE
Dave Olsen           Doug Gapinski
Professional Technologist     Strategist
West Virginia University      mStoner

         @dmolsen              @thedougco
Doug: planning
                     and design


Dave: 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 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 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 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.
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



                 Search
Email                                   Social Media
http://flic.kr/p/axKd6X




Coming to Grips



       Finding balance.
ELEGANCE + LAZINESS
http://flic.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 College
Spring Arbor University
  Herzing University
  St. Joseph’s College
Show, don’t sell




bostonglobe.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 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.
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.
+
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
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
Styletiles: for when moodboards
are too vague and comps are too precise




             Source: styletil.es
Sparkbox’s in-browser style prototype




Writeup: seesparkbox.com   Download: github fork
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
New patterns: off canvas touch layouts




 Source: Luke W and Jason Weaver
Source: Zurb
Patterns for contemporary look and feel




                                             patterntap.com




dribbble.com



               mobiletuxedo.com
A last note on planning: plan to conduct
    user testing on multiple devices
© Brad Frost




brad’s iceberg
© Brad Frost




brad’s iceberg
V. OPTIMIZATION & TESTING
1 MB
The average weight of a web page today.




                                          Flash

                                                  HTML
                                                         CSS
                                                               Other
           Images            JavaScript

                82%




           Source: HTTP Archive
86%

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


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

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)
PRIMARY PERFORMANCE ISSUES FOR RWD




Over Downloading               Poor Networks


Download & Hide                 High Latency
Download & 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://flic.kr/p/6xQPdi
                  0.4 seconds                                 4.2 secs


Source: Guy Podjarny & HTTP Archive
                                                 10 times slower!
MOBILE OPTIMIZATION FOCUS




                            1. Reduce asset size
                            2. Reduce requests
                            3. Speed-up page
                               render
                                          http://flic.kr/p/4zzKee
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.
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 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.
http://flic.kr/p/a4VsPv
RESS* can be a scalpel
for your responsive designs.

REsponsive Design + Server Side Components
toolbox, tools




            TESTING TOOLS



                         Testing Tools




http://flic.kr/p/4BZsQJ
PERFORMANCE TESTING SITES



WebPagetest                   Mobitest
LEARN TO LOVE THE INSPECTOR
THE ULTIMATE MOBILE PERFORMANCE BOOKMARKLET




        mobile bookmarklet
SLOWING THINGS DOWN



   Charles                         Throttle




charlesproxy.com
EMULATING MOBILE DEVICES



BrowserStack                   Emulators




charlesproxy.com
GET YOUR HANDS ON REAL DEVICES




eBay
MobileKarma.com
Cellphone store leftovers
Open device labs

                                 http://flic.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-level
Android, 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 Gapinski
Professional Technologist               Strategist
West Virginia University                mStoner

         @dmolsen                        @thedougco

More Related Content

What's hot

Frontend SPOF
Frontend SPOFFrontend SPOF
Frontend SPOF
Patrick Meenan
 
Automated testing DrupalCamp in Asheville
Automated testing DrupalCamp in AshevilleAutomated testing DrupalCamp in Asheville
Automated testing DrupalCamp in Asheville
Promet Source
 
Continuous Deployment: The Dirty Details
Continuous Deployment: The Dirty DetailsContinuous Deployment: The Dirty Details
Continuous Deployment: The Dirty Details
Mike Brittain
 
Principles and Practices in Continuous Deployment at Etsy
Principles and Practices in Continuous Deployment at EtsyPrinciples and Practices in Continuous Deployment at Etsy
Principles and Practices in Continuous Deployment at Etsy
Mike Brittain
 
Distributed Release Management
Distributed Release ManagementDistributed Release Management
Distributed Release Management
Mike Brittain
 
Continuous Delivery: The Dirty Details
Continuous Delivery: The Dirty DetailsContinuous Delivery: The Dirty Details
Continuous Delivery: The Dirty Details
Mike Brittain
 
Front End page speed performance improvements for Drupal
Front End page speed performance improvements for DrupalFront End page speed performance improvements for Drupal
Front End page speed performance improvements for Drupal
Andy Kucharski
 
DevOpsGuys FutureDecoded 2016 - is DevOps the Answer
DevOpsGuys FutureDecoded 2016 - is DevOps the AnswerDevOpsGuys FutureDecoded 2016 - is DevOps the Answer
DevOpsGuys FutureDecoded 2016 - is DevOps the Answer
DevOpsGroup
 
Why Everyone Needs DevOps Now - Gene Kim
Why Everyone Needs DevOps Now - Gene KimWhy Everyone Needs DevOps Now - Gene Kim
Why Everyone Needs DevOps Now - Gene Kim
Dynatrace
 
The StartUp Agency - A Case Study on CFPB
The StartUp Agency - A Case Study on CFPBThe StartUp Agency - A Case Study on CFPB
The StartUp Agency - A Case Study on CFPB
GovLoop
 
Fixing security by fixing software development
Fixing security by fixing software developmentFixing security by fixing software development
Fixing security by fixing software development
Nick Galbreath
 
Faster Secure Software Development with Continuous Deployment - PH Days 2013
Faster Secure Software Development with Continuous Deployment - PH Days 2013Faster Secure Software Development with Continuous Deployment - PH Days 2013
Faster Secure Software Development with Continuous Deployment - PH Days 2013
Nick Galbreath
 
DevOps for Drupal: Why We Cook With Chef
DevOps for Drupal: Why We Cook With ChefDevOps for Drupal: Why We Cook With Chef
DevOps for Drupal: Why We Cook With Chef
Promet Source
 
10+ Deploys Per Day: Dev and Ops Cooperation at Flickr
10+ Deploys Per Day: Dev and Ops Cooperation at Flickr10+ Deploys Per Day: Dev and Ops Cooperation at Flickr
10+ Deploys Per Day: Dev and Ops Cooperation at Flickr
John Allspaw
 
DevOpsGuys Performance Testing with APM Tools workshop
DevOpsGuys Performance Testing with APM Tools workshopDevOpsGuys Performance Testing with APM Tools workshop
DevOpsGuys Performance Testing with APM Tools workshop
DevOpsGroup
 
Fraud Engineering, from Merchant Risk Council Annual Meeting 2012
Fraud Engineering, from Merchant Risk Council Annual Meeting 2012Fraud Engineering, from Merchant Risk Council Annual Meeting 2012
Fraud Engineering, from Merchant Risk Council Annual Meeting 2012
Nick Galbreath
 
Microservices Workshop - Craft Conference
Microservices Workshop - Craft ConferenceMicroservices Workshop - Craft Conference
Microservices Workshop - Craft Conference
Adrian Cockcroft
 
WTF: Where To Focus when you take over a Drupal project
WTF: Where To Focus when you take over a Drupal projectWTF: Where To Focus when you take over a Drupal project
WTF: Where To Focus when you take over a Drupal project
Symetris
 
Teaching Elephants to Dance (and Fly!) A Developer's Journey to Digital Trans...
Teaching Elephants to Dance (and Fly!) A Developer's Journey to Digital Trans...Teaching Elephants to Dance (and Fly!) A Developer's Journey to Digital Trans...
Teaching Elephants to Dance (and Fly!) A Developer's Journey to Digital Trans...
Burr Sutter
 
Devops : Automate Your Infrastructure with Puppet
Devops : Automate Your Infrastructure with PuppetDevops : Automate Your Infrastructure with Puppet
Devops : Automate Your Infrastructure with Puppet
Edureka!
 

What's hot (20)

Frontend SPOF
Frontend SPOFFrontend SPOF
Frontend SPOF
 
Automated testing DrupalCamp in Asheville
Automated testing DrupalCamp in AshevilleAutomated testing DrupalCamp in Asheville
Automated testing DrupalCamp in Asheville
 
Continuous Deployment: The Dirty Details
Continuous Deployment: The Dirty DetailsContinuous Deployment: The Dirty Details
Continuous Deployment: The Dirty Details
 
Principles and Practices in Continuous Deployment at Etsy
Principles and Practices in Continuous Deployment at EtsyPrinciples and Practices in Continuous Deployment at Etsy
Principles and Practices in Continuous Deployment at Etsy
 
Distributed Release Management
Distributed Release ManagementDistributed Release Management
Distributed Release Management
 
Continuous Delivery: The Dirty Details
Continuous Delivery: The Dirty DetailsContinuous Delivery: The Dirty Details
Continuous Delivery: The Dirty Details
 
Front End page speed performance improvements for Drupal
Front End page speed performance improvements for DrupalFront End page speed performance improvements for Drupal
Front End page speed performance improvements for Drupal
 
DevOpsGuys FutureDecoded 2016 - is DevOps the Answer
DevOpsGuys FutureDecoded 2016 - is DevOps the AnswerDevOpsGuys FutureDecoded 2016 - is DevOps the Answer
DevOpsGuys FutureDecoded 2016 - is DevOps the Answer
 
Why Everyone Needs DevOps Now - Gene Kim
Why Everyone Needs DevOps Now - Gene KimWhy Everyone Needs DevOps Now - Gene Kim
Why Everyone Needs DevOps Now - Gene Kim
 
The StartUp Agency - A Case Study on CFPB
The StartUp Agency - A Case Study on CFPBThe StartUp Agency - A Case Study on CFPB
The StartUp Agency - A Case Study on CFPB
 
Fixing security by fixing software development
Fixing security by fixing software developmentFixing security by fixing software development
Fixing security by fixing software development
 
Faster Secure Software Development with Continuous Deployment - PH Days 2013
Faster Secure Software Development with Continuous Deployment - PH Days 2013Faster Secure Software Development with Continuous Deployment - PH Days 2013
Faster Secure Software Development with Continuous Deployment - PH Days 2013
 
DevOps for Drupal: Why We Cook With Chef
DevOps for Drupal: Why We Cook With ChefDevOps for Drupal: Why We Cook With Chef
DevOps for Drupal: Why We Cook With Chef
 
10+ Deploys Per Day: Dev and Ops Cooperation at Flickr
10+ Deploys Per Day: Dev and Ops Cooperation at Flickr10+ Deploys Per Day: Dev and Ops Cooperation at Flickr
10+ Deploys Per Day: Dev and Ops Cooperation at Flickr
 
DevOpsGuys Performance Testing with APM Tools workshop
DevOpsGuys Performance Testing with APM Tools workshopDevOpsGuys Performance Testing with APM Tools workshop
DevOpsGuys Performance Testing with APM Tools workshop
 
Fraud Engineering, from Merchant Risk Council Annual Meeting 2012
Fraud Engineering, from Merchant Risk Council Annual Meeting 2012Fraud Engineering, from Merchant Risk Council Annual Meeting 2012
Fraud Engineering, from Merchant Risk Council Annual Meeting 2012
 
Microservices Workshop - Craft Conference
Microservices Workshop - Craft ConferenceMicroservices Workshop - Craft Conference
Microservices Workshop - Craft Conference
 
WTF: Where To Focus when you take over a Drupal project
WTF: Where To Focus when you take over a Drupal projectWTF: Where To Focus when you take over a Drupal project
WTF: Where To Focus when you take over a Drupal project
 
Teaching Elephants to Dance (and Fly!) A Developer's Journey to Digital Trans...
Teaching Elephants to Dance (and Fly!) A Developer's Journey to Digital Trans...Teaching Elephants to Dance (and Fly!) A Developer's Journey to Digital Trans...
Teaching Elephants to Dance (and Fly!) A Developer's Journey to Digital Trans...
 
Devops : Automate Your Infrastructure with Puppet
Devops : Automate Your Infrastructure with PuppetDevops : Automate Your Infrastructure with Puppet
Devops : Automate Your Infrastructure with Puppet
 

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

Monkeytalk Fall 2012 - Responsive Web Design
Monkeytalk Fall 2012 - Responsive Web DesignMonkeytalk Fall 2012 - Responsive Web Design
Monkeytalk Fall 2012 - Responsive Web Design
Serge Hufkens
 
Talk 03 responsive-web-design
Talk 03 responsive-web-designTalk 03 responsive-web-design
Talk 03 responsive-web-design
Monkeyshot
 
Your first web application. From Design to Launch
Your first web application. From Design to LaunchYour first web application. From Design to Launch
Your first web application. From Design to Launch
David Brooks
 
Speed and Simplicity: Design and Usability for Multi-device Websites
Speed and Simplicity: Design and Usability for Multi-device WebsitesSpeed and Simplicity: Design and Usability for Multi-device Websites
Speed and Simplicity: Design and Usability for Multi-device Websites
Doug Gapinski
 
Speed and simplicity
Speed and simplicitySpeed and simplicity
Speed and simplicity
mStoner, Inc.
 
Responsive Web Design_2013
Responsive Web Design_2013Responsive Web Design_2013
Responsive Web Design_2013
Achieve Internet
 
Screen and Context: Usability in the Postdesktop World
Screen and Context: Usability in the Postdesktop WorldScreen and Context: Usability in the Postdesktop World
Screen and Context: Usability in the Postdesktop World
Doug Gapinski
 
Stocktwits & Responsive Web Design, social network meets flexible framework
Stocktwits & Responsive Web Design, social network meets flexible frameworkStocktwits & Responsive Web Design, social network meets flexible framework
Stocktwits & Responsive Web Design, social network meets flexible framework
John Strott
 
Postdesktop Usability
Postdesktop UsabilityPostdesktop Usability
Postdesktop Usability
Doug Gapinski
 
Mobile Best Practices
Mobile Best PracticesMobile Best Practices
Mobile Best Practices
mintersam
 
Measuring Web Performance - HighEdWeb Edition
Measuring Web Performance - HighEdWeb EditionMeasuring Web Performance - HighEdWeb Edition
Measuring Web Performance - HighEdWeb Edition
Dave Olsen
 
A Day Building Fast, Responsive, Extensible Single Page Applications
A Day Building Fast, Responsive, Extensible Single Page ApplicationsA Day Building Fast, Responsive, Extensible Single Page Applications
A Day Building Fast, Responsive, Extensible Single Page Applications
Chris Love
 
Designing Powerful Web Applications Using AJAX and Other RIAs
Designing Powerful Web Applications Using AJAX and Other RIAsDesigning Powerful Web Applications Using AJAX and Other RIAs
Designing Powerful Web Applications Using AJAX and Other RIAs
Dave Malouf
 
Web Performance & You
Web Performance & YouWeb Performance & You
Web Performance & You
Dave Olsen
 
Two approaches to RWD: Pure & Hybrid. Brendan Falkowski
Two approaches to RWD: Pure & Hybrid. Brendan Falkowski Two approaches to RWD: Pure & Hybrid. Brendan Falkowski
Two approaches to RWD: Pure & Hybrid. Brendan Falkowski
MeetMagentoNY2014
 
The Server Side of Responsive Web Design
The Server Side of Responsive Web DesignThe Server Side of Responsive Web Design
The Server Side of Responsive Web Design
Dave Olsen
 
App vs web lunch and learn @ valtech
App vs web lunch and learn @ valtech App vs web lunch and learn @ valtech
App vs web lunch and learn @ valtech
Mathias Strandberg
 
Optimizing web performance (Fronteers edition)
Optimizing web performance (Fronteers edition)Optimizing web performance (Fronteers edition)
Optimizing web performance (Fronteers edition)
Dave Olsen
 
Responsive Web Design - Why and How
Responsive Web Design - Why and HowResponsive Web Design - Why and How
Responsive Web Design - Why and How
Judi Wunderlich
 
There Is No Mobile: An Introduction To Responsive Web Design
There Is No Mobile: An Introduction To Responsive Web DesignThere Is No Mobile: An Introduction To Responsive Web Design
There Is No Mobile: An Introduction To Responsive Web Design
Chris Love
 

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

Monkeytalk Fall 2012 - Responsive Web Design
Monkeytalk Fall 2012 - Responsive Web DesignMonkeytalk Fall 2012 - Responsive Web Design
Monkeytalk Fall 2012 - Responsive Web Design
 
Talk 03 responsive-web-design
Talk 03 responsive-web-designTalk 03 responsive-web-design
Talk 03 responsive-web-design
 
Your first web application. From Design to Launch
Your first web application. From Design to LaunchYour first web application. From Design to Launch
Your first web application. From Design to Launch
 
Speed and Simplicity: Design and Usability for Multi-device Websites
Speed and Simplicity: Design and Usability for Multi-device WebsitesSpeed and Simplicity: Design and Usability for Multi-device Websites
Speed and Simplicity: Design and Usability for Multi-device Websites
 
Speed and simplicity
Speed and simplicitySpeed and simplicity
Speed and simplicity
 
Responsive Web Design_2013
Responsive Web Design_2013Responsive Web Design_2013
Responsive Web Design_2013
 
Screen and Context: Usability in the Postdesktop World
Screen and Context: Usability in the Postdesktop WorldScreen and Context: Usability in the Postdesktop World
Screen and Context: Usability in the Postdesktop World
 
Stocktwits & Responsive Web Design, social network meets flexible framework
Stocktwits & Responsive Web Design, social network meets flexible frameworkStocktwits & Responsive Web Design, social network meets flexible framework
Stocktwits & Responsive Web Design, social network meets flexible framework
 
Postdesktop Usability
Postdesktop UsabilityPostdesktop Usability
Postdesktop Usability
 
Mobile Best Practices
Mobile Best PracticesMobile Best Practices
Mobile Best Practices
 
Measuring Web Performance - HighEdWeb Edition
Measuring Web Performance - HighEdWeb EditionMeasuring Web Performance - HighEdWeb Edition
Measuring Web Performance - HighEdWeb Edition
 
A Day Building Fast, Responsive, Extensible Single Page Applications
A Day Building Fast, Responsive, Extensible Single Page ApplicationsA Day Building Fast, Responsive, Extensible Single Page Applications
A Day Building Fast, Responsive, Extensible Single Page Applications
 
Designing Powerful Web Applications Using AJAX and Other RIAs
Designing Powerful Web Applications Using AJAX and Other RIAsDesigning Powerful Web Applications Using AJAX and Other RIAs
Designing Powerful Web Applications Using AJAX and Other RIAs
 
Web Performance & You
Web Performance & YouWeb Performance & You
Web Performance & You
 
Two approaches to RWD: Pure & Hybrid. Brendan Falkowski
Two approaches to RWD: Pure & Hybrid. Brendan Falkowski Two approaches to RWD: Pure & Hybrid. Brendan Falkowski
Two approaches to RWD: Pure & Hybrid. Brendan Falkowski
 
The Server Side of Responsive Web Design
The Server Side of Responsive Web DesignThe Server Side of Responsive Web Design
The Server Side of Responsive Web Design
 
App vs web lunch and learn @ valtech
App vs web lunch and learn @ valtech App vs web lunch and learn @ valtech
App vs web lunch and learn @ valtech
 
Optimizing web performance (Fronteers edition)
Optimizing web performance (Fronteers edition)Optimizing web performance (Fronteers edition)
Optimizing web performance (Fronteers edition)
 
Responsive Web Design - Why and How
Responsive Web Design - Why and HowResponsive Web Design - Why and How
Responsive Web Design - Why and How
 
There Is No Mobile: An Introduction To Responsive Web Design
There Is No Mobile: An Introduction To Responsive Web DesignThere Is No Mobile: An Introduction To Responsive Web Design
There Is No Mobile: An Introduction To Responsive Web Design
 

More from Dave Olsen

Taking Your HTML Email Communications from "Ew" to "Wow"
Taking Your HTML Email Communications from "Ew" to "Wow"Taking Your HTML Email Communications from "Ew" to "Wow"
Taking Your HTML Email Communications from "Ew" to "Wow"
Dave Olsen
 
The Google Marketing Workflow Workshop
The Google Marketing Workflow WorkshopThe Google Marketing Workflow Workshop
The Google Marketing Workflow Workshop
Dave Olsen
 
Building an Academic Program Database and API with Contentful and Amazon Web ...
Building an Academic Program Database and API with Contentful and Amazon Web ...Building an Academic Program Database and API with Contentful and Amazon Web ...
Building an Academic Program Database and API with Contentful and Amazon Web ...
Dave Olsen
 
Reimagining Your Website: What are prospective students looking for and how a...
Reimagining Your Website: What are prospective students looking for and how a...Reimagining Your Website: What are prospective students looking for and how a...
Reimagining Your Website: What are prospective students looking for and how a...
Dave Olsen
 
Progressive Mobile Strategy Redux: The Future Friendly Enterprise
Progressive Mobile Strategy Redux: The Future Friendly EnterpriseProgressive Mobile Strategy Redux: The Future Friendly Enterprise
Progressive Mobile Strategy Redux: The Future Friendly Enterprise
Dave Olsen
 
Case Study: Rebuilding an Admissions Web Presence
Case Study: Rebuilding an Admissions Web PresenceCase Study: Rebuilding an Admissions Web Presence
Case Study: Rebuilding an Admissions Web Presence
Dave Olsen
 
Admissions Brain Dump
Admissions Brain DumpAdmissions Brain Dump
Admissions Brain Dump
Dave Olsen
 
Implementing Brand Patterns
Implementing Brand PatternsImplementing Brand Patterns
Implementing Brand Patterns
Dave Olsen
 
The Death of Lorem Ipsum and Pixel-Perfect Content (MinneWebCon version)
The Death of Lorem Ipsum and Pixel-Perfect Content (MinneWebCon version)The Death of Lorem Ipsum and Pixel-Perfect Content (MinneWebCon version)
The Death of Lorem Ipsum and Pixel-Perfect Content (MinneWebCon version)
Dave Olsen
 
Case Study: Automating Outage Monitoring & Communication
Case Study: Automating Outage Monitoring & CommunicationCase Study: Automating Outage Monitoring & Communication
Case Study: Automating Outage Monitoring & Communication
Dave Olsen
 
The Death of Lorem Ipsum & Pixel Perfect Content
The Death of Lorem Ipsum & Pixel Perfect ContentThe Death of Lorem Ipsum & Pixel Perfect Content
The Death of Lorem Ipsum & Pixel Perfect Content
Dave Olsen
 
The Why and What of Pattern Lab
The Why and What of Pattern LabThe Why and What of Pattern Lab
The Why and What of Pattern Lab
Dave Olsen
 
The Squishy Future of Content - HEEMAC Edition
The Squishy Future of Content - HEEMAC EditionThe Squishy Future of Content - HEEMAC Edition
The Squishy Future of Content - HEEMAC Edition
Dave Olsen
 
The What & Why of Pattern Lab
The What & Why of Pattern LabThe What & Why of Pattern Lab
The What & Why of Pattern Lab
Dave Olsen
 
The Squishy Future of Content - Key Communicators Edition
The Squishy Future of Content - Key Communicators EditionThe Squishy Future of Content - Key Communicators Edition
The Squishy Future of Content - Key Communicators Edition
Dave Olsen
 
The Squishy Future of Content - Penn State Edition
The Squishy Future of Content - Penn State EditionThe Squishy Future of Content - Penn State Edition
The Squishy Future of Content - Penn State Edition
Dave Olsen
 
The Squishy Future of Content
The Squishy Future of ContentThe Squishy Future of Content
The Squishy Future of Content
Dave Olsen
 
Measuring Web Performance
Measuring Web Performance Measuring Web Performance
Measuring Web Performance
Dave Olsen
 
The Future Friendly Campus (Workshop Edition)
The Future Friendly Campus (Workshop Edition)The Future Friendly Campus (Workshop Edition)
The Future Friendly Campus (Workshop Edition)
Dave Olsen
 
RESS: An Evolution of Responsive Web Design
RESS: An Evolution of Responsive Web DesignRESS: An Evolution of Responsive Web Design
RESS: An Evolution of Responsive Web Design
Dave Olsen
 

More from Dave Olsen (20)

Taking Your HTML Email Communications from "Ew" to "Wow"
Taking Your HTML Email Communications from "Ew" to "Wow"Taking Your HTML Email Communications from "Ew" to "Wow"
Taking Your HTML Email Communications from "Ew" to "Wow"
 
The Google Marketing Workflow Workshop
The Google Marketing Workflow WorkshopThe Google Marketing Workflow Workshop
The Google Marketing Workflow Workshop
 
Building an Academic Program Database and API with Contentful and Amazon Web ...
Building an Academic Program Database and API with Contentful and Amazon Web ...Building an Academic Program Database and API with Contentful and Amazon Web ...
Building an Academic Program Database and API with Contentful and Amazon Web ...
 
Reimagining Your Website: What are prospective students looking for and how a...
Reimagining Your Website: What are prospective students looking for and how a...Reimagining Your Website: What are prospective students looking for and how a...
Reimagining Your Website: What are prospective students looking for and how a...
 
Progressive Mobile Strategy Redux: The Future Friendly Enterprise
Progressive Mobile Strategy Redux: The Future Friendly EnterpriseProgressive Mobile Strategy Redux: The Future Friendly Enterprise
Progressive Mobile Strategy Redux: The Future Friendly Enterprise
 
Case Study: Rebuilding an Admissions Web Presence
Case Study: Rebuilding an Admissions Web PresenceCase Study: Rebuilding an Admissions Web Presence
Case Study: Rebuilding an Admissions Web Presence
 
Admissions Brain Dump
Admissions Brain DumpAdmissions Brain Dump
Admissions Brain Dump
 
Implementing Brand Patterns
Implementing Brand PatternsImplementing Brand Patterns
Implementing Brand Patterns
 
The Death of Lorem Ipsum and Pixel-Perfect Content (MinneWebCon version)
The Death of Lorem Ipsum and Pixel-Perfect Content (MinneWebCon version)The Death of Lorem Ipsum and Pixel-Perfect Content (MinneWebCon version)
The Death of Lorem Ipsum and Pixel-Perfect Content (MinneWebCon version)
 
Case Study: Automating Outage Monitoring & Communication
Case Study: Automating Outage Monitoring & CommunicationCase Study: Automating Outage Monitoring & Communication
Case Study: Automating Outage Monitoring & Communication
 
The Death of Lorem Ipsum & Pixel Perfect Content
The Death of Lorem Ipsum & Pixel Perfect ContentThe Death of Lorem Ipsum & Pixel Perfect Content
The Death of Lorem Ipsum & Pixel Perfect Content
 
The Why and What of Pattern Lab
The Why and What of Pattern LabThe Why and What of Pattern Lab
The Why and What of Pattern Lab
 
The Squishy Future of Content - HEEMAC Edition
The Squishy Future of Content - HEEMAC EditionThe Squishy Future of Content - HEEMAC Edition
The Squishy Future of Content - HEEMAC Edition
 
The What & Why of Pattern Lab
The What & Why of Pattern LabThe What & Why of Pattern Lab
The What & Why of Pattern Lab
 
The Squishy Future of Content - Key Communicators Edition
The Squishy Future of Content - Key Communicators EditionThe Squishy Future of Content - Key Communicators Edition
The Squishy Future of Content - Key Communicators Edition
 
The Squishy Future of Content - Penn State Edition
The Squishy Future of Content - Penn State EditionThe Squishy Future of Content - Penn State Edition
The Squishy Future of Content - Penn State Edition
 
The Squishy Future of Content
The Squishy Future of ContentThe Squishy Future of Content
The Squishy Future of Content
 
Measuring Web Performance
Measuring Web Performance Measuring Web Performance
Measuring Web Performance
 
The Future Friendly Campus (Workshop Edition)
The Future Friendly Campus (Workshop Edition)The Future Friendly Campus (Workshop Edition)
The Future Friendly Campus (Workshop Edition)
 
RESS: An Evolution of Responsive Web Design
RESS: An Evolution of Responsive Web DesignRESS: An Evolution of Responsive Web Design
RESS: An Evolution of Responsive Web Design
 

Recently uploaded

PCI PIN Basics Webinar from the Controlcase Team
PCI PIN Basics Webinar from the Controlcase TeamPCI PIN Basics Webinar from the Controlcase Team
PCI PIN Basics Webinar from the Controlcase Team
ControlCase
 
GraphSummit Singapore | Graphing Success: Revolutionising Organisational Stru...
GraphSummit Singapore | Graphing Success: Revolutionising Organisational Stru...GraphSummit Singapore | Graphing Success: Revolutionising Organisational Stru...
GraphSummit Singapore | Graphing Success: Revolutionising Organisational Stru...
Neo4j
 
20240605 QFM017 Machine Intelligence Reading List May 2024
20240605 QFM017 Machine Intelligence Reading List May 202420240605 QFM017 Machine Intelligence Reading List May 2024
20240605 QFM017 Machine Intelligence Reading List May 2024
Matthew Sinclair
 
Epistemic Interaction - tuning interfaces to provide information for AI support
Epistemic Interaction - tuning interfaces to provide information for AI supportEpistemic Interaction - tuning interfaces to provide information for AI support
Epistemic Interaction - tuning interfaces to provide information for AI support
Alan Dix
 
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
名前 です男
 
Full-RAG: A modern architecture for hyper-personalization
Full-RAG: A modern architecture for hyper-personalizationFull-RAG: A modern architecture for hyper-personalization
Full-RAG: A modern architecture for hyper-personalization
Zilliz
 
Video Streaming: Then, Now, and in the Future
Video Streaming: Then, Now, and in the FutureVideo Streaming: Then, Now, and in the Future
Video Streaming: Then, Now, and in the Future
Alpen-Adria-Universität
 
Monitoring Java Application Security with JDK Tools and JFR Events
Monitoring Java Application Security with JDK Tools and JFR EventsMonitoring Java Application Security with JDK Tools and JFR Events
Monitoring Java Application Security with JDK Tools and JFR Events
Ana-Maria Mihalceanu
 
How to Get CNIC Information System with Paksim Ga.pptx
How to Get CNIC Information System with Paksim Ga.pptxHow to Get CNIC Information System with Paksim Ga.pptx
How to Get CNIC Information System with Paksim Ga.pptx
danishmna97
 
FIDO Alliance Osaka Seminar: The WebAuthn API and Discoverable Credentials.pdf
FIDO Alliance Osaka Seminar: The WebAuthn API and Discoverable Credentials.pdfFIDO Alliance Osaka Seminar: The WebAuthn API and Discoverable Credentials.pdf
FIDO Alliance Osaka Seminar: The WebAuthn API and Discoverable Credentials.pdf
FIDO Alliance
 
Introduction to CHERI technology - Cybersecurity
Introduction to CHERI technology - CybersecurityIntroduction to CHERI technology - Cybersecurity
Introduction to CHERI technology - Cybersecurity
mikeeftimakis1
 
Alt. GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using ...
Alt. GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using ...Alt. GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using ...
Alt. GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using ...
James Anderson
 
GraphSummit Singapore | The Art of the Possible with Graph - Q2 2024
GraphSummit Singapore | The Art of the  Possible with Graph - Q2 2024GraphSummit Singapore | The Art of the  Possible with Graph - Q2 2024
GraphSummit Singapore | The Art of the Possible with Graph - Q2 2024
Neo4j
 
By Design, not by Accident - Agile Venture Bolzano 2024
By Design, not by Accident - Agile Venture Bolzano 2024By Design, not by Accident - Agile Venture Bolzano 2024
By Design, not by Accident - Agile Venture Bolzano 2024
Pierluigi Pugliese
 
DevOps and Testing slides at DASA Connect
DevOps and Testing slides at DASA ConnectDevOps and Testing slides at DASA Connect
DevOps and Testing slides at DASA Connect
Kari Kakkonen
 
Elizabeth Buie - Older adults: Are we really designing for our future selves?
Elizabeth Buie - Older adults: Are we really designing for our future selves?Elizabeth Buie - Older adults: Are we really designing for our future selves?
Elizabeth Buie - Older adults: Are we really designing for our future selves?
Nexer Digital
 
Climate Impact of Software Testing at Nordic Testing Days
Climate Impact of Software Testing at Nordic Testing DaysClimate Impact of Software Testing at Nordic Testing Days
Climate Impact of Software Testing at Nordic Testing Days
Kari Kakkonen
 
GraphSummit Singapore | Neo4j Product Vision & Roadmap - Q2 2024
GraphSummit Singapore | Neo4j Product Vision & Roadmap - Q2 2024GraphSummit Singapore | Neo4j Product Vision & Roadmap - Q2 2024
GraphSummit Singapore | Neo4j Product Vision & Roadmap - Q2 2024
Neo4j
 
GraphSummit Singapore | Enhancing Changi Airport Group's Passenger Experience...
GraphSummit Singapore | Enhancing Changi Airport Group's Passenger Experience...GraphSummit Singapore | Enhancing Changi Airport Group's Passenger Experience...
GraphSummit Singapore | Enhancing Changi Airport Group's Passenger Experience...
Neo4j
 
Goodbye Windows 11: Make Way for Nitrux Linux 3.5.0!
Goodbye Windows 11: Make Way for Nitrux Linux 3.5.0!Goodbye Windows 11: Make Way for Nitrux Linux 3.5.0!
Goodbye Windows 11: Make Way for Nitrux Linux 3.5.0!
SOFTTECHHUB
 

Recently uploaded (20)

PCI PIN Basics Webinar from the Controlcase Team
PCI PIN Basics Webinar from the Controlcase TeamPCI PIN Basics Webinar from the Controlcase Team
PCI PIN Basics Webinar from the Controlcase Team
 
GraphSummit Singapore | Graphing Success: Revolutionising Organisational Stru...
GraphSummit Singapore | Graphing Success: Revolutionising Organisational Stru...GraphSummit Singapore | Graphing Success: Revolutionising Organisational Stru...
GraphSummit Singapore | Graphing Success: Revolutionising Organisational Stru...
 
20240605 QFM017 Machine Intelligence Reading List May 2024
20240605 QFM017 Machine Intelligence Reading List May 202420240605 QFM017 Machine Intelligence Reading List May 2024
20240605 QFM017 Machine Intelligence Reading List May 2024
 
Epistemic Interaction - tuning interfaces to provide information for AI support
Epistemic Interaction - tuning interfaces to provide information for AI supportEpistemic Interaction - tuning interfaces to provide information for AI support
Epistemic Interaction - tuning interfaces to provide information for AI support
 
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
 
Full-RAG: A modern architecture for hyper-personalization
Full-RAG: A modern architecture for hyper-personalizationFull-RAG: A modern architecture for hyper-personalization
Full-RAG: A modern architecture for hyper-personalization
 
Video Streaming: Then, Now, and in the Future
Video Streaming: Then, Now, and in the FutureVideo Streaming: Then, Now, and in the Future
Video Streaming: Then, Now, and in the Future
 
Monitoring Java Application Security with JDK Tools and JFR Events
Monitoring Java Application Security with JDK Tools and JFR EventsMonitoring Java Application Security with JDK Tools and JFR Events
Monitoring Java Application Security with JDK Tools and JFR Events
 
How to Get CNIC Information System with Paksim Ga.pptx
How to Get CNIC Information System with Paksim Ga.pptxHow to Get CNIC Information System with Paksim Ga.pptx
How to Get CNIC Information System with Paksim Ga.pptx
 
FIDO Alliance Osaka Seminar: The WebAuthn API and Discoverable Credentials.pdf
FIDO Alliance Osaka Seminar: The WebAuthn API and Discoverable Credentials.pdfFIDO Alliance Osaka Seminar: The WebAuthn API and Discoverable Credentials.pdf
FIDO Alliance Osaka Seminar: The WebAuthn API and Discoverable Credentials.pdf
 
Introduction to CHERI technology - Cybersecurity
Introduction to CHERI technology - CybersecurityIntroduction to CHERI technology - Cybersecurity
Introduction to CHERI technology - Cybersecurity
 
Alt. GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using ...
Alt. GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using ...Alt. GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using ...
Alt. GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using ...
 
GraphSummit Singapore | The Art of the Possible with Graph - Q2 2024
GraphSummit Singapore | The Art of the  Possible with Graph - Q2 2024GraphSummit Singapore | The Art of the  Possible with Graph - Q2 2024
GraphSummit Singapore | The Art of the Possible with Graph - Q2 2024
 
By Design, not by Accident - Agile Venture Bolzano 2024
By Design, not by Accident - Agile Venture Bolzano 2024By Design, not by Accident - Agile Venture Bolzano 2024
By Design, not by Accident - Agile Venture Bolzano 2024
 
DevOps and Testing slides at DASA Connect
DevOps and Testing slides at DASA ConnectDevOps and Testing slides at DASA Connect
DevOps and Testing slides at DASA Connect
 
Elizabeth Buie - Older adults: Are we really designing for our future selves?
Elizabeth Buie - Older adults: Are we really designing for our future selves?Elizabeth Buie - Older adults: Are we really designing for our future selves?
Elizabeth Buie - Older adults: Are we really designing for our future selves?
 
Climate Impact of Software Testing at Nordic Testing Days
Climate Impact of Software Testing at Nordic Testing DaysClimate Impact of Software Testing at Nordic Testing Days
Climate Impact of Software Testing at Nordic Testing Days
 
GraphSummit Singapore | Neo4j Product Vision & Roadmap - Q2 2024
GraphSummit Singapore | Neo4j Product Vision & Roadmap - Q2 2024GraphSummit Singapore | Neo4j Product Vision & Roadmap - Q2 2024
GraphSummit Singapore | Neo4j Product Vision & Roadmap - Q2 2024
 
GraphSummit Singapore | Enhancing Changi Airport Group's Passenger Experience...
GraphSummit Singapore | Enhancing Changi Airport Group's Passenger Experience...GraphSummit Singapore | Enhancing Changi Airport Group's Passenger Experience...
GraphSummit Singapore | Enhancing Changi Airport Group's Passenger Experience...
 
Goodbye Windows 11: Make Way for Nitrux Linux 3.5.0!
Goodbye Windows 11: Make Way for Nitrux Linux 3.5.0!Goodbye Windows 11: Make Way for Nitrux Linux 3.5.0!
Goodbye Windows 11: Make Way for Nitrux Linux 3.5.0!
 

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

  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 73. THANKS! Dave Olsen Doug Gapinski Professional Technologist Strategist West Virginia University mStoner @dmolsen @thedougco

Editor's Notes

  1. DOUG\n
  2. DAVE + DOUG\n\n
  3. DAVE\n
  4. DAVE\n
  5. DAVE\n
  6. DOUG\n
  7. DOUG\n
  8. DOUG - \n
  9. DOUG - \n
  10. DOUG\n
  11. DOUG\n
  12. DAVE\n
  13. DAVE\n
  14. DAVE\n
  15. DAVE\n
  16. DAVE\n
  17. DAVE\n
  18. DAVE\n
  19. DAVE\n
  20. DAVE\n
  21. DAVE\n
  22. DAVE\n
  23. DAVE\n
  24. DAVE\n
  25. DAVE\n
  26. DOUG\n
  27. DOUG\n
  28. DOUG\n
  29. DAVE\n
  30. DOUG\n
  31. DOUG\n
  32. DOUG\n
  33. DOUG\n
  34. DOUG\n
  35. DOUG\n
  36. DOUG\n
  37. DOUG\n
  38. DOUG\n
  39. DOUG\n
  40. DOUG\n
  41. DOUG\n
  42. DOUG\n
  43. DOUG\n
  44. DOUG\n
  45. \n
  46. DOUG\n
  47. DOUG\n
  48. DOUG\n
  49. DAVE\n
  50. page weight\n
  51. page weight\n
  52. glowing rectangle has turned this on its head\n
  53. DAVE\n
  54. DAVE\n
  55. DAVE\n
  56. DAVE\n
  57. DAVE\n
  58. DOUG\n
  59. DOUG\n
  60. DOUG\n
  61. \n
  62. DAVE\n
  63. DAVE\n
  64. DAVE\n
  65. DAVE\n
  66. DAVE\n
  67. DAVE\n
  68. DAVE\n
  69. DAVE\n
  70. DAVE\n
  71. DAVE\n
  72. DAVE\n
  73. DOUG AND DAVE\n\n