Responsive WordPress and the State of Mobile Websites

Mobile Websites in 2012 / 2013@3pointRoss / @37Designs

ONE WEBSITE TO RULE THEM ALL.

Friday, November 30, 12

@3pointRoss@37Designs

I AM ROSS “DANGER” JOHNSON


TODAY WE ARE TALKING ABOUT MOBILE


mo·bile/ˈmōbəl/Able to move or be moved freely or easily.


MOBILE MEANS DIFFERENT THINGS TO DIFFERENT PEOPLEAre cars “mobile?” Sure.


MOBILE CAN HAVE A DIFFERENT MEANING WITH THE SAME OBJECT.


SHOULD WE BE CONCERNED ABOUT THE MOBILE WEB?If so, how do best address it?


A QUICK INTRODUCTION


My background is a bit diverse...

DESIGNERSOCIAL SCIENTISTDEVELOPEREDUCATOR


I founded a company in 2004

3.7 DESIGNSWEB DESIGNBRANDINGUSER EXPERIENCEWORDPRESS


I WROTE A BOOK IN 2011


BACK TO MOBILE...

A QUICK SURVEY


MYTH #1:PEOPLE DON’T BROWSE MY SITE ON MOBILE DEVICES


10%OF GLOBAL WEBSITE PAGE VIEWS ARE FROM A MOBILE DEVICE.According to StatCounter


2XTHAT’S ALMOST TWICE WHAT IT WAS LAST YEAR.According to a Statcounter


MYTH #2:DESKTOP BROWSING WILL ALWAYS BE MORE POPULAR


LAST YEAR SMARTPHONE SALES OVERTOOK PC SALES.According to Business Insider.


AND THIS IS JUST THE START...According to Business Insider.


TABLETS WILL SOON SELL MORE THAN PC’S AS WELL.According to Business Insider.


MOBILE INTERNET ACCESS WILL DWARF FIXED IN COMING YEARS.According to Business Insider.


MYTH #3:A MOBILE FRIENDLY SITE IS NICE, BUT NOT A NECESSITY


YOU DON’T KNOW WHERE YOU ARE GOING UNTIL YOU KNOW WHERE YOU HAVE BEEN.

PocketWeb for the Apple Newton - 1994


YOU WANT MOBILE? OPT #1. WAP MOBILE SPECIFIC SITE

OPT #2. GIVE UP.


NOW YOU WANT MOBILE? OPT #1. MOBILE SPECIFIC SITE

OPT #2. MOBILE STYLESHEET

OPT #3. DO NOTHING


MYTH #3:YOU SHOULD HAVE A MOBILE SPECIFIC SITE


2011UNTIL THIS YEAR, THESE THREE OPTIONS WERE ADEQUATE FOR MOBILE.According to Ross Johnson, 2012


2012T H I S Y E A R , M O B I L E C H A N G E D A N D T H I S APPROACH IS NO LONGER EFFECTIVE.According to Ross Johnson, 2012


TWOMAJOR CHANGES HAVE RESULTED IN THE NEED FOR A NEW APPROACH.According to Ross Johnson, 2012


FIRST, WHAT QUALIFIES AS A MOBILE DEVICE HAS CHANGED.


OBVIOUSLY CELL PHONES


YUP TABLETS TOO


GAME CONSOLES


“SMART” TV’S


NETBOOKS


EBOOK READERS


MP3 PLAYERS...


SOON... MOST DEVICES?


THE NUMBER OF MOBILE DEVICES HAS EXPLODED.


WITH SO MANY DEVICES, HOW DO YOU DESIGN A MOBILE SPECIFIC SITE OR STYLESHEET?


THE SCREEN SIZES DIFFER WIDELY, AND WHICH DEVICES ARE ACTUALLY MOBILE?


MYTH #4:MOBILE BROWSING IS SHORT DURATION AND RUSHED


20%OF PEOPLE USE CELL P H O N E S A S T H E I R PRIMARY ONLINE DEVICE.According to a Pew Internet Study in 2012


SECOND, MOBILE BEHAVIOR HAS CHANGED.


MOBILE BROWSING IS NO LONGER A RUSHED, SHORT DURATION ACTIVITY


MOBILE USERS CONSUME LOTS OF ONLINE CONTENT.


AND MOBILE USAGE IS GROWING FASTER THAN DESKTOP.


MOBILE ISANYTIMEJUST BECAUSE I AM ON A MOBILE DEVICE DOESN’T MEAN THAT I AM MOBILE.According to Ross Johnson, 2012


HOW DO YOU DESIGN A MOBILE SPECIFIC SITE IF MOBILE USERS MIGHT NOT BE MOBILE?


AS A RESULT, THE OLD METHODS ARE NO LONGER EFFECTIVE.


MORE THANMOBILEWITH SO MANY DEVICES USED EVERYWHERE AND FOR ANYTHING, EVEN THE I D E A O F A “ M O B I L E WEBSITE” IS ANTIQUATED.According to Ross Johnson, 2012


UBIQUITOUSW E N E E D T O S TA R T T H I N K I N G A B O U T UNIVERSAL WEBSITES.According to Ross Johnson, 2012


CAN’T DO THIS WITH A MOBILE SPECIFIC SITE.How do you accommodate all devices? What if the users wants access to all content?


CAN’T DO NOTHING.It’s human nature to try and conserve energy. Even the “revolutionary” pinch and zoom feels cumbersome and painstaking.


THE ANSWER? RESPONSIVE DESIGN.


Responsive web design (often abbreviated to RWD) is an approach to web design in which a site is crafted to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices.According to Wikipedia, which we all know is 100% accurate.


EXAMPLESBoston GlobeFood Sense

Lancaster University


http://www.bostonglobe.com/

http://www.bostonglobe.com/

http://www.foodsense.is/

http://www.foodsense.is/

http://www.lancs.ac.uk/

http://www.lancs.ac.uk/

HOW RWD WORKS


WHY RWD WORKS#1. UNIVERSAL ACCESS#2. CONTENT PARITY#3. OPTIMAL DISPLAY CROSS PLATFORM According to Ross Johnson, 2012


APPROACH RESPONSIVE DESIGN BY THINKING “MOBILE FIRST”


WITH MOBILE FIRST:ONLY THE MOST IMPORTANT CONTENT MAKES IT TO THE SITE

YOU CAN BE SURE CONTENT CAN BE ACCESSED AND DISTRIBUTED BY THE LARGEST POSSIBLE AUDIENCEAccording to Ross Johnson, 2012


WITH MOBILE FIRST:EVERYONE HAS EQUAL ACCESS TO THE FEATURES, FUNCTIONALITY AND CONTENT OF THE SITE.According to Ross Johnson, 2012


SIMPLICITYA SIMPLE SITE IS EASIER TO USE, EASIER TO BUILD AND EASIER TO MAINTAIN.According to Ross Johnson, 2012


UNIVERSALWEBSITES ARE A NECESSITY.According to Ross Johnson, 2012


RESPONSIVEDESIGN IS AN EFFECTIVE WAY TO BUILD UNIVERSAL SITES.According to Ross Johnson, 2012


DESIGNFOR MOBILE FIRST.According to Ross Johnson, 2012


HOW DO YOU MAKE WORDPRESS RESPONSIVE?


EASIEST WAYPICK THE RIGHT THEME.According to Ross Johnson, 2012


DEMOSYourSearchAdvisorNew Media Drivers LicenseTwentyEleven DemoTwentyTwelve DemoResponsive DemoFree Themes


http://yoursearchadvisor.com

http://yoursearchadvisor.com

http://newmediadl.com

http://newmediadl.com

http://twentyelevendemo.wordpress.com/

http://twentyelevendemo.wordpress.com/

http://twentytwelvedemo.wordpress.com/

http://twentytwelvedemo.wordpress.com/

http://themeid.com/demo/responsive/

http://themeid.com/demo/responsive/

DEMOSZigZagArcadianXOLuLuPaid Themes


http://demo.brankic.net/zigzagwp/

http://demo.brankic.net/zigzagwp/

http://www.themeblvd.com/demo/arcadian/

http://www.themeblvd.com/demo/arcadian/

http://themes.swiftpsd.com/xo/

http://themes.swiftpsd.com/xo/

http://themes.siiimple.com/lulu/

http://themes.siiimple.com/lulu/

CUSTOMCUSTOM CODE A THEME


PLUGINSBE AWARE OF YOUR


PARTICULARLYSLIDERS, IMAGE PLUGINS, AND VIDEO PLUGINS


GOOD PLUGINSWP FLUID IMAGESFITVIDSWP ORBIT SLIDERRESPONSIVE TWENTYTENRESPONSIVE IMAGE GALLERYRESPONSIVE SELECT MENU


Ross Johnson of 3.7 DESIGNS@3pointRoss / @37Designs

THANK YOU


Responsive WordPress and the State of Mobile Websites

Design

Transcript of Responsive WordPress and the State of Mobile Websites