Responsive WordPress and the State of Mobile Websites

ONE WEBSITE TO
RULE THEM ALL.
Mobile Websites in 2012 / 2013
@3pointRoss / @37Designs

Friday, November 30, 12

I AM ROSS
“DANGER”
JOHNSON
@3pointRoss
@37Designs


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
PEOPLE
Are 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...

DESIGNER
SOCIAL SCIENTIST
DEVELOPER
EDUCATOR


I founded a company in 2004

3.7 DESIGNS
WEB DESIGN
BRANDING
USER EXPERIENCE
WORDPRESS


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


2X
THAT’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...


TABLETS WILL SOON SELL MORE
THAN PC’S AS WELL.


MOBILE INTERNET ACCESS WILL
DWARF FIXED IN COMING YEARS.


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


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


2012
THIS YEAR, MOBILE
CHANGED AND THIS
APPROACH IS NO LONGER
EFFECTIVE.


TWO
MAJOR CHANGES HAVE
RESULTED IN THE NEED
FOR A NEW APPROACH.


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
PHONES AS THEIR
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 IS
ANYTIME
JUST BECAUSE I AM ON A
MOBILE DEVICE DOESN’T
MEAN THAT I AM MOBILE.


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 THAN
MOBILE
WITH SO MANY DEVICES
USED EVERYWHERE AND
FOR ANYTHING, EVEN THE
IDEA OF A “MOBILE
WEBSITE” IS ANTIQUATED.


UBIQUITOUS
W E N E E D T O S TA R T
THINKING ABOUT
UNIVERSAL WEBSITES.


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.


EXAMPLES
Boston Globe
Food Sense
Lancaster University


HOW RWD WORKS


WHY RWD WORKS
#1. UNIVERSAL ACCESS
#2. CONTENT PARITY
#3. OPTIMAL DISPLAY
CROSS PLATFORM


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
AUDIENCE


WITH MOBILE FIRST:
EVERYONE HAS EQUAL
ACCESS TO THE FEATURES,
FUNCTIONALITY AND
CONTENT OF THE SITE.


SIMPLICITY
A SIMPLE SITE IS EASIER
TO USE, EASIER TO BUILD
AND EASIER TO
MAINTAIN.


UNIVERSAL
WEBSITES ARE A NECESSITY.


RESPONSIVE
DESIGN IS AN EFFECTIVE
WAY TO BUILD UNIVERSAL
SITES.


DESIGN
FOR MOBILE FIRST.


HOW DO YOU MAKE
WORDPRESS
RESPONSIVE?


EASIEST WAY
PICK THE RIGHT THEME.


DEMOS
YourSearchAdvisor
New Media Drivers License
TwentyEleven Demo
TwentyTwelve Demo
Responsive Demo
Free Themes


DEMOS
ZigZag
Arcadian
XO
LuLu
Paid Themes


CUSTOM
CUSTOM CODE A THEME


BE AWARE OF YOUR
PLUGINS


PARTICULARLY
SLIDERS, IMAGE PLUGINS,
AND VIDEO PLUGINS


GOOD PLUGINS
WP FLUID IMAGES
FITVIDS
WP ORBIT SLIDER
RESPONSIVE TWENTYTEN
RESPONSIVE IMAGE GALLERY
RESPONSIVE SELECT MENU


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


Responsive WordPress and the State of Mobile Websites

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Andere mochten auch

Andere mochten auch (15)

Mehr von Ross Johnson

Mehr von Ross Johnson (16)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Responsive WordPress and the State of Mobile Websites