A Need for Speed: Responsive Design in a Mobile World

Bob Johnson Consulting, LLC 1

A NEED FOR SPEED: RESPONSIVE DESIGN IN A MOBILE WORLD

©ROBERT E. JOHNSON, PH.D. 2013

Bob Johnson, Ph.D.President, Bob Johnson Consulting

Partner, Customer Carewords, LtdJ.Boye Web & Intranet Conference

Aarhus, Denmark

November 5-7, 2013

COMPLETE A TOP TASK…Major reason people visit your website

Almost always… 3 to 5 top tasks


<5 SECONDS TO CONNECT…The Golden Rule



PERFORMANCE IS A PRIORITY…“It’s possible to address performance concerns... most people don’t.”

Tim Kadlec, Implementing Responsive Design


SPEED… THE ACHILLES’ HEEL OF RESPONSIVE DESIGN“Unfortunately, performance is treated as an afterthought on many projects.”



Trend to bigger, slower web pages…Radware for Fall 2013 at… http://bit.ly/H0uNaV


Result: longer time to interact…Increases bounce rate, decreases conversions


Slower on every browser…Web Performance Today at http://bit.ly/1525Y7P


10 fastest business sites… <4secondsWeb Performance Today http://bit.ly/1525Y7P


Tablet users have high expectations…http://bit.ly/HUPxPj (March 2012 research)


That are not being met…


UC San Diego on a PC… 2.69 secondshttp://www.webpagetest.org/

http://www.webpagetest.org/


RD vs. mobile download speed…http://mobitest.akamai.com/m/index.cgi

Top RD website… 3.57s (average of 3 tests)

Top mobile website… 1.80s

http://mobitest.akamai.com/m/index.cgi


Mobile site speed leader… 12 requests


RD site speed leader… 28 requests


AFTER THE RESPONSIVE HOME PAGE?Some desktop pages are not “mobile friendly”…

Not very “responsive” for humans…



GOING FORWARD: MOBILE FORCES FOCUS…“Mobile first… helps you to focus on key components of your site…”



REMOVING CONTENT…

“The alarming trend of hiding content on mobile devices…”



PORTABLE CONTENT…“How do we make content more portable?”



CUSTOM CONTENT…“Some suggest that custom content should be written for each site.”



Get priorities in order…http://bit.ly/1aVCAiZ

• Start with mobile expectations…1. Create a simple

design

2. Highlight important info (AKA: identify top tasks)

3. Feature calls-to-action

4. Keep sites quick

5. Optimize for screen size


If you were starting RD from scratch…

Build from mobile up…

• Less content• Fewer images• Cleaner design• Faster operating site

If from desktop down…

• Eliminate garbage• Not all content is “ready for responsive”

• Wait to launch until all key pages are ready

• Does everyone understand “speed”?


RESOURCES…


The case for speed…http://www.copyblogger.com/website-speed-matters/

http://www.copyblogger.com/website-speed-matters/


Testing for “real world” performance…http://www.guypo.com/uncategorized/real-world-rwd-performance-take-2/

http://www.guypo.com/uncategorized/real-world-rwd-performance-take-2/


Tim Kadlec’s book…http://www.implementingresponsivedesign.com/

http://www.implementingresponsivedesign.com/


Problems and solutions…http://vimeo.com/49194960

http://vimeo.com/49194960


Available on SlideShare…http://www.slideshare.net/tsalcedo/higher-ed-web-ne-presentation

http://www.slideshare.net/tsalcedo/higher-ed-web-ne-presentation


Testing mobile sites…http://mobitest.akamai.com/m/index.cgi

http://mobitest.akamai.com/m/index.cgi


THANKS FOR BEING HERE IN AARHUS!Bob Johnson, Ph.D.

[email protected]

www.bobjohnsonconsulting.com

@highedmarketing


ADDENDUM 1Speed tests, Mobile Sites vs. Responsive Design Sites


8 higher education RD websites +1…


9 higher education mobile sites…

A Need for Speed: Responsive Design in a Mobile World

Technology

Transcript of A Need for Speed: Responsive Design in a Mobile World