SlideShare a Scribd company logo
1 of 97
Download to read offline
ONE WEBSITE TO
                          RULE THEM ALL.
                          Mobile Websites in 2012 / 2013
                          @3pointRoss / @37Designs




Friday, November 30, 12
I AM ROSS
                          “DANGER”
                          JOHNSON
                          @3pointRoss
                          @37Designs




Friday, November 30, 12
TODAY WE ARE
                          TALKING ABOUT
                          MOBILE




Friday, November 30, 12
mo·bile/ˈmōbəl/
               Able to move or be moved freely or easily.




Friday, November 30, 12
Friday, November 30, 12
MOBILE MEANS
                          DIFFERENT THINGS
                          TO DIFFERENT
                          PEOPLE
                          Are cars “mobile?” Sure.




Friday, November 30, 12
MOBILE CAN HAVE A DIFFERENT
  MEANING WITH THE SAME OBJECT.




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




Friday, November 30, 12
A QUICK INTRODUCTION




Friday, November 30, 12
My background is a bit diverse...

                          DESIGNER
                          SOCIAL SCIENTIST
                          DEVELOPER
                          EDUCATOR




Friday, November 30, 12
I founded a company in 2004

                          3.7 DESIGNS
                          WEB DESIGN
                          BRANDING
                          USER EXPERIENCE
                          WORDPRESS




Friday, November 30, 12
I WROTE A BOOK IN 2011




Friday, November 30, 12
BACK TO MOBILE...
   A QUICK SURVEY




Friday, November 30, 12
Friday, November 30, 12
MYTH #1:
                          PEOPLE
                          DON’T
                          BROWSE MY
                          SITE ON
                          MOBILE
                          DEVICES


Friday, November 30, 12
10%
                          OF GLOBAL WEBSITE
                          PAGE VIEWS ARE FROM A
                          MOBILE DEVICE.
                          According to StatCounter




Friday, November 30, 12
2X
                          THAT’S ALMOST TWICE
                          WHAT IT WAS LAST YEAR.
                          According to a Statcounter




Friday, November 30, 12
MYTH #2:
                          DESKTOP
                          BROWSING
                          WILL ALWAYS
                          BE MORE
                          POPULAR



Friday, November 30, 12
LAST YEAR SMARTPHONE SALES
                   OVERTOOK PC SALES.
                   According to Business Insider.

Friday, November 30, 12
AND THIS IS JUST THE START...
                   According to Business Insider.




Friday, November 30, 12
TABLETS WILL SOON SELL MORE
                   THAN PC’S AS WELL.
                   According to Business Insider.

Friday, November 30, 12
MOBILE INTERNET ACCESS WILL
                   DWARF FIXED IN COMING YEARS.
                   According to Business Insider.

Friday, November 30, 12
MYTH #3:
                          A MOBILE
                          FRIENDLY
                          SITE IS NICE,
                          BUT NOT A
                          NECESSITY


Friday, November 30, 12
YOU DON’T KNOW
                                            WHERE YOU ARE
                                            GOING UNTIL YOU
                                            KNOW WHERE
                                            YOU HAVE BEEN.


                       PocketWeb for the
                      Apple Newton - 1994




Friday, November 30, 12
Friday, November 30, 12
YOU WANT
                          MOBILE?
                          OPT #1.
                          WAP MOBILE SPECIFIC
                          SITE
                          OPT #2.
                          GIVE UP.




Friday, November 30, 12
Friday, November 30, 12
Friday, November 30, 12
Friday, November 30, 12
Friday, November 30, 12
NOW YOU WANT
                          MOBILE?
                          OPT #1.
                          MOBILE SPECIFIC SITE
                          OPT #2.
                          MOBILE STYLESHEET
                          OPT #3.
                          DO NOTHING




Friday, November 30, 12
MYTH #3:
                          YOU SHOULD
                          HAVE A
                          MOBILE
                          SPECIFIC SITE



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




Friday, November 30, 12
2012
                          THIS YEAR, MOBILE
                          CHANGED AND THIS
                          APPROACH IS NO LONGER
                          EFFECTIVE.
                          According to Ross Johnson, 2012




Friday, November 30, 12
Friday, November 30, 12
Friday, November 30, 12
Friday, November 30, 12
TWO
                          MAJOR CHANGES HAVE
                          RESULTED IN THE NEED
                          FOR A NEW APPROACH.
                          According to Ross Johnson, 2012




Friday, November 30, 12
FIRST, WHAT
                          QUALIFIES AS A
                          MOBILE DEVICE
                          HAS CHANGED.




Friday, November 30, 12
OBVIOUSLY CELL PHONES




Friday, November 30, 12
YUP TABLETS TOO




Friday, November 30, 12
Friday, November 30, 12
GAME CONSOLES




Friday, November 30, 12
Friday, November 30, 12
Friday, November 30, 12
“SMART” TV’S




Friday, November 30, 12
Friday, November 30, 12
NETBOOKS




Friday, November 30, 12
Friday, November 30, 12
EBOOK READERS




Friday, November 30, 12
Friday, November 30, 12
MP3 PLAYERS...




Friday, November 30, 12
Friday, November 30, 12
SOON... MOST DEVICES?




Friday, November 30, 12
Friday, November 30, 12
THE NUMBER OF
                          MOBILE DEVICES
                          HAS EXPLODED.




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




Friday, November 30, 12
THE SCREEN
                          SIZES DIFFER
                          WIDELY, AND
                          WHICH DEVICES
                          ARE ACTUALLY
                          MOBILE?




Friday, November 30, 12
MYTH #4:
                          MOBILE
                          BROWSING IS
                          SHORT
                          DURATION
                          AND RUSHED


Friday, November 30, 12
20%
                          OF PEOPLE USE CELL
                          PHONES AS THEIR
                          PRIMARY ONLINE DEVICE.
                          According to a Pew Internet Study in 2012




Friday, November 30, 12
SECOND, MOBILE
                          BEHAVIOR HAS
                          CHANGED.




Friday, November 30, 12
MOBILE BROWSING
                          IS NO LONGER A
                          RUSHED, SHORT
                          DURATION
                          ACTIVITY




Friday, November 30, 12
MOBILE USERS CONSUME LOTS
                      OF ONLINE CONTENT.

Friday, November 30, 12
AND MOBILE USAGE IS GROWING
                FASTER THAN DESKTOP.

Friday, November 30, 12
MOBILE IS
                          ANYTIME
                          JUST BECAUSE I AM ON A
                          MOBILE DEVICE DOESN’T
                          MEAN THAT I AM MOBILE.
                          According to Ross Johnson, 2012




Friday, November 30, 12
HOW DO YOU
                          DESIGN A MOBILE
                          SPECIFIC SITE IF
                          MOBILE USERS
                          MIGHT NOT BE
                          MOBILE?




Friday, November 30, 12
AS A RESULT, THE
                          OLD METHODS
                          ARE NO LONGER
                          EFFECTIVE.




Friday, November 30, 12
MORE THAN
                          MOBILE
                          WITH SO MANY DEVICES
                          USED EVERYWHERE AND
                          FOR ANYTHING, EVEN THE
                          IDEA OF A “MOBILE
                          WEBSITE” IS ANTIQUATED.
                          According to Ross Johnson, 2012




Friday, November 30, 12
UBIQUITOUS
                          W E N E E D T O S TA R T
                          THINKING       ABOUT
                          UNIVERSAL WEBSITES.
                          According to Ross Johnson, 2012




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




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




Friday, November 30, 12
THE ANSWER?
                 RESPONSIVE DESIGN.
Friday, November 30, 12
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.




Friday, November 30, 12
EXAMPLES
                             Boston Globe
                              Food Sense
                          Lancaster University




Friday, November 30, 12
HOW RWD WORKS




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




Friday, November 30, 12
APPROACH
                          RESPONSIVE
                          DESIGN BY
                          THINKING
                          “MOBILE FIRST”




Friday, November 30, 12
Friday, November 30, 12
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
                          According to Ross Johnson, 2012




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




Friday, November 30, 12
SIMPLICITY
                          A SIMPLE SITE IS EASIER
                          TO USE, EASIER TO BUILD
                          AND EASIER TO
                          MAINTAIN.
                          According to Ross Johnson, 2012




Friday, November 30, 12
Friday, November 30, 12
UNIVERSAL
                          WEBSITES ARE A NECESSITY.
                          According to Ross Johnson, 2012




Friday, November 30, 12
RESPONSIVE
                          DESIGN IS AN EFFECTIVE
                          WAY TO BUILD UNIVERSAL
                          SITES.
                          According to Ross Johnson, 2012




Friday, November 30, 12
DESIGN
                          FOR MOBILE FIRST.
                          According to Ross Johnson, 2012




Friday, November 30, 12
HOW DO YOU MAKE
                          WORDPRESS
                          RESPONSIVE?




Friday, November 30, 12
EASIEST WAY
                          PICK THE RIGHT THEME.
                          According to Ross Johnson, 2012




Friday, November 30, 12
Friday, November 30, 12
Friday, November 30, 12
DEMOS
                          YourSearchAdvisor
                          New Media Drivers License
                          TwentyEleven Demo
                          TwentyTwelve Demo
                          Responsive Demo
                          Free Themes




Friday, November 30, 12
DEMOS
                          ZigZag
                          Arcadian
                          XO
                          LuLu
                          Paid Themes




Friday, November 30, 12
CUSTOM
                          CUSTOM CODE A THEME




Friday, November 30, 12
BE AWARE OF YOUR
                          PLUGINS


Friday, November 30, 12
PARTICULARLY
                          SLIDERS, IMAGE PLUGINS,
                          AND VIDEO PLUGINS




Friday, November 30, 12
GOOD PLUGINS
              WP FLUID IMAGES
              FITVIDS
              WP ORBIT SLIDER
              RESPONSIVE TWENTYTEN
              RESPONSIVE IMAGE GALLERY
              RESPONSIVE SELECT MENU



Friday, November 30, 12
THANK YOU
                          Ross Johnson of 3.7 DESIGNS
                          @3pointRoss / @37Designs




Friday, November 30, 12

More Related Content

Viewers also liked

Prototyping for responsive web design
Prototyping for responsive web design Prototyping for responsive web design
Prototyping for responsive web design mrscammels
 
Mobile Marketing Trend Report - AUG 2012
Mobile Marketing Trend Report - AUG 2012Mobile Marketing Trend Report - AUG 2012
Mobile Marketing Trend Report - AUG 2012Daniel Wood
 
Digiday and Yahoo! Present: Mobile Daily Habits, Moving Marketers Forward
Digiday and  Yahoo! Present: Mobile Daily Habits, Moving Marketers ForwardDigiday and  Yahoo! Present: Mobile Daily Habits, Moving Marketers Forward
Digiday and Yahoo! Present: Mobile Daily Habits, Moving Marketers ForwardDigiday
 
How to Get Started in Mobile Marketing
How to Get Started in Mobile MarketingHow to Get Started in Mobile Marketing
How to Get Started in Mobile MarketingSIXTY
 
Device Fragmentation 2011 / Metrics of the Mobile Web
Device Fragmentation 2011 / Metrics of the Mobile WebDevice Fragmentation 2011 / Metrics of the Mobile Web
Device Fragmentation 2011 / Metrics of the Mobile WebAvenga Germany GmbH
 
Android et ses petits secrets - SFR Régie - Mars 2012
Android et ses petits secrets  - SFR Régie - Mars 2012Android et ses petits secrets  - SFR Régie - Mars 2012
Android et ses petits secrets - SFR Régie - Mars 2012Romain Fonnier
 
What's So Special About Mobile?
What's So Special About Mobile?What's So Special About Mobile?
What's So Special About Mobile?Sara Quinn
 
Mobile Marketing Attitude 2013 - SNCD
Mobile Marketing Attitude 2013 - SNCDMobile Marketing Attitude 2013 - SNCD
Mobile Marketing Attitude 2013 - SNCDRomain Fonnier
 
Awesome android apps
Awesome android appsAwesome android apps
Awesome android appsRichard Byrne
 
Mobile Marketing Stats Automotive Dealers Should Know
Mobile Marketing Stats Automotive Dealers Should KnowMobile Marketing Stats Automotive Dealers Should Know
Mobile Marketing Stats Automotive Dealers Should Knowcreativeeyeball
 
Classement de la fréquentation des applications mobile OJD - Avril 2013
Classement de la fréquentation des applications mobile OJD - Avril 2013Classement de la fréquentation des applications mobile OJD - Avril 2013
Classement de la fréquentation des applications mobile OJD - Avril 2013Romain Fonnier
 
Smart contents in multi screen
Smart contents in multi screenSmart contents in multi screen
Smart contents in multi screenSeungyul Kim
 
5 Lessons in Digital Publishing
5 Lessons in Digital Publishing 5 Lessons in Digital Publishing
5 Lessons in Digital Publishing Mag+
 
Les usages associés aux tablettes tactiles - GESTE - Mediametrie - Mars 2012
Les usages associés aux tablettes tactiles  - GESTE - Mediametrie - Mars 2012Les usages associés aux tablettes tactiles  - GESTE - Mediametrie - Mars 2012
Les usages associés aux tablettes tactiles - GESTE - Mediametrie - Mars 2012Romain Fonnier
 

Viewers also liked (15)

Prototyping for responsive web design
Prototyping for responsive web design Prototyping for responsive web design
Prototyping for responsive web design
 
Create great UIs for budget phones
Create great UIs for budget phonesCreate great UIs for budget phones
Create great UIs for budget phones
 
Mobile Marketing Trend Report - AUG 2012
Mobile Marketing Trend Report - AUG 2012Mobile Marketing Trend Report - AUG 2012
Mobile Marketing Trend Report - AUG 2012
 
Digiday and Yahoo! Present: Mobile Daily Habits, Moving Marketers Forward
Digiday and  Yahoo! Present: Mobile Daily Habits, Moving Marketers ForwardDigiday and  Yahoo! Present: Mobile Daily Habits, Moving Marketers Forward
Digiday and Yahoo! Present: Mobile Daily Habits, Moving Marketers Forward
 
How to Get Started in Mobile Marketing
How to Get Started in Mobile MarketingHow to Get Started in Mobile Marketing
How to Get Started in Mobile Marketing
 
Device Fragmentation 2011 / Metrics of the Mobile Web
Device Fragmentation 2011 / Metrics of the Mobile WebDevice Fragmentation 2011 / Metrics of the Mobile Web
Device Fragmentation 2011 / Metrics of the Mobile Web
 
Android et ses petits secrets - SFR Régie - Mars 2012
Android et ses petits secrets  - SFR Régie - Mars 2012Android et ses petits secrets  - SFR Régie - Mars 2012
Android et ses petits secrets - SFR Régie - Mars 2012
 
What's So Special About Mobile?
What's So Special About Mobile?What's So Special About Mobile?
What's So Special About Mobile?
 
Mobile Marketing Attitude 2013 - SNCD
Mobile Marketing Attitude 2013 - SNCDMobile Marketing Attitude 2013 - SNCD
Mobile Marketing Attitude 2013 - SNCD
 
Awesome android apps
Awesome android appsAwesome android apps
Awesome android apps
 
Mobile Marketing Stats Automotive Dealers Should Know
Mobile Marketing Stats Automotive Dealers Should KnowMobile Marketing Stats Automotive Dealers Should Know
Mobile Marketing Stats Automotive Dealers Should Know
 
Classement de la fréquentation des applications mobile OJD - Avril 2013
Classement de la fréquentation des applications mobile OJD - Avril 2013Classement de la fréquentation des applications mobile OJD - Avril 2013
Classement de la fréquentation des applications mobile OJD - Avril 2013
 
Smart contents in multi screen
Smart contents in multi screenSmart contents in multi screen
Smart contents in multi screen
 
5 Lessons in Digital Publishing
5 Lessons in Digital Publishing 5 Lessons in Digital Publishing
5 Lessons in Digital Publishing
 
Les usages associés aux tablettes tactiles - GESTE - Mediametrie - Mars 2012
Les usages associés aux tablettes tactiles  - GESTE - Mediametrie - Mars 2012Les usages associés aux tablettes tactiles  - GESTE - Mediametrie - Mars 2012
Les usages associés aux tablettes tactiles - GESTE - Mediametrie - Mars 2012
 

More from Ross Johnson

Design for Non-Designers
Design for Non-DesignersDesign for Non-Designers
Design for Non-DesignersRoss Johnson
 
Starting a Successful Premium Pluging Business
Starting a Successful Premium Pluging BusinessStarting a Successful Premium Pluging Business
Starting a Successful Premium Pluging BusinessRoss Johnson
 
Creating Influence
Creating InfluenceCreating Influence
Creating InfluenceRoss Johnson
 
Blogging Best Practices - The MSU New Media Drivers License Course
Blogging Best Practices - The MSU New Media Drivers License CourseBlogging Best Practices - The MSU New Media Drivers License Course
Blogging Best Practices - The MSU New Media Drivers License CourseRoss Johnson
 
Overlap of emotion and usability
Overlap of emotion and usabilityOverlap of emotion and usability
Overlap of emotion and usabilityRoss Johnson
 
WordPress Website Basics - Domains, Hosting & Why WordPress
WordPress Website Basics - Domains, Hosting & Why WordPressWordPress Website Basics - Domains, Hosting & Why WordPress
WordPress Website Basics - Domains, Hosting & Why WordPressRoss Johnson
 
Word press & social media
Word press & social mediaWord press & social media
Word press & social mediaRoss Johnson
 
Double Your Website’s Success
Double Your Website’s SuccessDouble Your Website’s Success
Double Your Website’s SuccessRoss Johnson
 
Wordpress Backups, Automated and Secure
Wordpress Backups, Automated and SecureWordpress Backups, Automated and Secure
Wordpress Backups, Automated and SecureRoss Johnson
 
Speed Up Wordpress, Wordpress Horsepower
Speed Up Wordpress, Wordpress HorsepowerSpeed Up Wordpress, Wordpress Horsepower
Speed Up Wordpress, Wordpress HorsepowerRoss Johnson
 
Wordpress horsepower
Wordpress horsepowerWordpress horsepower
Wordpress horsepowerRoss Johnson
 
Why Social Media Succeeds or Fails
Why Social Media Succeeds or FailsWhy Social Media Succeeds or Fails
Why Social Media Succeeds or FailsRoss Johnson
 
Web Site Strategy - Building an Effective Website
Web Site Strategy - Building an Effective WebsiteWeb Site Strategy - Building an Effective Website
Web Site Strategy - Building an Effective WebsiteRoss Johnson
 
Public Agencies Meet Sustainable Design
Public Agencies Meet Sustainable DesignPublic Agencies Meet Sustainable Design
Public Agencies Meet Sustainable DesignRoss Johnson
 
Public Agencies Meet Sustainable Design
Public Agencies Meet Sustainable DesignPublic Agencies Meet Sustainable Design
Public Agencies Meet Sustainable DesignRoss Johnson
 

More from Ross Johnson (16)

Design for Non-Designers
Design for Non-DesignersDesign for Non-Designers
Design for Non-Designers
 
Starting a Successful Premium Pluging Business
Starting a Successful Premium Pluging BusinessStarting a Successful Premium Pluging Business
Starting a Successful Premium Pluging Business
 
Creating Influence
Creating InfluenceCreating Influence
Creating Influence
 
Blogging Best Practices - The MSU New Media Drivers License Course
Blogging Best Practices - The MSU New Media Drivers License CourseBlogging Best Practices - The MSU New Media Drivers License Course
Blogging Best Practices - The MSU New Media Drivers License Course
 
Overlap of emotion and usability
Overlap of emotion and usabilityOverlap of emotion and usability
Overlap of emotion and usability
 
WordPress Website Basics - Domains, Hosting & Why WordPress
WordPress Website Basics - Domains, Hosting & Why WordPressWordPress Website Basics - Domains, Hosting & Why WordPress
WordPress Website Basics - Domains, Hosting & Why WordPress
 
Word press & social media
Word press & social mediaWord press & social media
Word press & social media
 
Double Your Website’s Success
Double Your Website’s SuccessDouble Your Website’s Success
Double Your Website’s Success
 
Wordpress Backups, Automated and Secure
Wordpress Backups, Automated and SecureWordpress Backups, Automated and Secure
Wordpress Backups, Automated and Secure
 
Speed Up Wordpress, Wordpress Horsepower
Speed Up Wordpress, Wordpress HorsepowerSpeed Up Wordpress, Wordpress Horsepower
Speed Up Wordpress, Wordpress Horsepower
 
Wordpress horsepower
Wordpress horsepowerWordpress horsepower
Wordpress horsepower
 
Why Social Media Succeeds or Fails
Why Social Media Succeeds or FailsWhy Social Media Succeeds or Fails
Why Social Media Succeeds or Fails
 
Web Site Strategy - Building an Effective Website
Web Site Strategy - Building an Effective WebsiteWeb Site Strategy - Building an Effective Website
Web Site Strategy - Building an Effective Website
 
Public Agencies Meet Sustainable Design
Public Agencies Meet Sustainable DesignPublic Agencies Meet Sustainable Design
Public Agencies Meet Sustainable Design
 
Public Agencies Meet Sustainable Design
Public Agencies Meet Sustainable DesignPublic Agencies Meet Sustainable Design
Public Agencies Meet Sustainable Design
 
A3C Spring Map
A3C Spring MapA3C Spring Map
A3C Spring Map
 

Recently uploaded

UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024mikailaoh
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtTeeFusion
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before ConstructionResDraft
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazineRivanEleraki
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTThink 360 Studio
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfHctorFranciscoSnchez1
 
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfsaidbilgen
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsBlock Party
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024Alan Dix
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLkenzukiri
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Ed Orozco
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...khushisharma298853
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxHasan S
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comjakyjhon00
 
Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxSamKuruvilla5
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxb2kshani34
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillCre8iveskill
 
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Amil baba
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Ted Drake
 

Recently uploaded (19)

UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy Shirt
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before Construction
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazine
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPT
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdf
 
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teams
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.com
 
Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptx
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptx
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkill
 
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
 

Responsive WordPress and the State of Mobile Websites

  • 1. ONE WEBSITE TO RULE THEM ALL. Mobile Websites in 2012 / 2013 @3pointRoss / @37Designs Friday, November 30, 12
  • 2. I AM ROSS “DANGER” JOHNSON @3pointRoss @37Designs Friday, November 30, 12
  • 3. TODAY WE ARE TALKING ABOUT MOBILE Friday, November 30, 12
  • 4. mo·bile/ˈmōbəl/ Able to move or be moved freely or easily. Friday, November 30, 12
  • 6. MOBILE MEANS DIFFERENT THINGS TO DIFFERENT PEOPLE Are cars “mobile?” Sure. Friday, November 30, 12
  • 7. MOBILE CAN HAVE A DIFFERENT MEANING WITH THE SAME OBJECT. Friday, November 30, 12
  • 8. SHOULD WE BE CONCERNED ABOUT THE MOBILE WEB? If so, how do best address it? Friday, November 30, 12
  • 10. My background is a bit diverse... DESIGNER SOCIAL SCIENTIST DEVELOPER EDUCATOR Friday, November 30, 12
  • 11. I founded a company in 2004 3.7 DESIGNS WEB DESIGN BRANDING USER EXPERIENCE WORDPRESS Friday, November 30, 12
  • 12. I WROTE A BOOK IN 2011 Friday, November 30, 12
  • 13. BACK TO MOBILE... A QUICK SURVEY Friday, November 30, 12
  • 15. MYTH #1: PEOPLE DON’T BROWSE MY SITE ON MOBILE DEVICES Friday, November 30, 12
  • 16. 10% OF GLOBAL WEBSITE PAGE VIEWS ARE FROM A MOBILE DEVICE. According to StatCounter Friday, November 30, 12
  • 17. 2X THAT’S ALMOST TWICE WHAT IT WAS LAST YEAR. According to a Statcounter Friday, November 30, 12
  • 18. MYTH #2: DESKTOP BROWSING WILL ALWAYS BE MORE POPULAR Friday, November 30, 12
  • 19. LAST YEAR SMARTPHONE SALES OVERTOOK PC SALES. According to Business Insider. Friday, November 30, 12
  • 20. AND THIS IS JUST THE START... According to Business Insider. Friday, November 30, 12
  • 21. TABLETS WILL SOON SELL MORE THAN PC’S AS WELL. According to Business Insider. Friday, November 30, 12
  • 22. MOBILE INTERNET ACCESS WILL DWARF FIXED IN COMING YEARS. According to Business Insider. Friday, November 30, 12
  • 23. MYTH #3: A MOBILE FRIENDLY SITE IS NICE, BUT NOT A NECESSITY Friday, November 30, 12
  • 24. YOU DON’T KNOW WHERE YOU ARE GOING UNTIL YOU KNOW WHERE YOU HAVE BEEN. PocketWeb for the Apple Newton - 1994 Friday, November 30, 12
  • 26. YOU WANT MOBILE? OPT #1. WAP MOBILE SPECIFIC SITE OPT #2. GIVE UP. Friday, November 30, 12
  • 31. NOW YOU WANT MOBILE? OPT #1. MOBILE SPECIFIC SITE OPT #2. MOBILE STYLESHEET OPT #3. DO NOTHING Friday, November 30, 12
  • 32. MYTH #3: YOU SHOULD HAVE A MOBILE SPECIFIC SITE Friday, November 30, 12
  • 33. 2011 UNTIL THIS YEAR, THESE THREE OPTIONS WERE ADEQUATE FOR MOBILE. According to Ross Johnson, 2012 Friday, November 30, 12
  • 34. 2012 THIS YEAR, MOBILE CHANGED AND THIS APPROACH IS NO LONGER EFFECTIVE. According to Ross Johnson, 2012 Friday, November 30, 12
  • 38. TWO MAJOR CHANGES HAVE RESULTED IN THE NEED FOR A NEW APPROACH. According to Ross Johnson, 2012 Friday, November 30, 12
  • 39. FIRST, WHAT QUALIFIES AS A MOBILE DEVICE HAS CHANGED. Friday, November 30, 12
  • 40. OBVIOUSLY CELL PHONES Friday, November 30, 12
  • 41. YUP TABLETS TOO Friday, November 30, 12
  • 54. SOON... MOST DEVICES? Friday, November 30, 12
  • 56. THE NUMBER OF MOBILE DEVICES HAS EXPLODED. Friday, November 30, 12
  • 57. WITH SO MANY DEVICES, HOW DO YOU DESIGN A MOBILE SPECIFIC SITE OR STYLESHEET? Friday, November 30, 12
  • 58. THE SCREEN SIZES DIFFER WIDELY, AND WHICH DEVICES ARE ACTUALLY MOBILE? Friday, November 30, 12
  • 59. MYTH #4: MOBILE BROWSING IS SHORT DURATION AND RUSHED Friday, November 30, 12
  • 60. 20% OF PEOPLE USE CELL PHONES AS THEIR PRIMARY ONLINE DEVICE. According to a Pew Internet Study in 2012 Friday, November 30, 12
  • 61. SECOND, MOBILE BEHAVIOR HAS CHANGED. Friday, November 30, 12
  • 62. MOBILE BROWSING IS NO LONGER A RUSHED, SHORT DURATION ACTIVITY Friday, November 30, 12
  • 63. MOBILE USERS CONSUME LOTS OF ONLINE CONTENT. Friday, November 30, 12
  • 64. AND MOBILE USAGE IS GROWING FASTER THAN DESKTOP. Friday, November 30, 12
  • 65. MOBILE IS ANYTIME JUST BECAUSE I AM ON A MOBILE DEVICE DOESN’T MEAN THAT I AM MOBILE. According to Ross Johnson, 2012 Friday, November 30, 12
  • 66. HOW DO YOU DESIGN A MOBILE SPECIFIC SITE IF MOBILE USERS MIGHT NOT BE MOBILE? Friday, November 30, 12
  • 67. AS A RESULT, THE OLD METHODS ARE NO LONGER EFFECTIVE. Friday, November 30, 12
  • 68. MORE THAN MOBILE WITH SO MANY DEVICES USED EVERYWHERE AND FOR ANYTHING, EVEN THE IDEA OF A “MOBILE WEBSITE” IS ANTIQUATED. According to Ross Johnson, 2012 Friday, November 30, 12
  • 69. UBIQUITOUS W E N E E D T O S TA R T THINKING ABOUT UNIVERSAL WEBSITES. According to Ross Johnson, 2012 Friday, November 30, 12
  • 70. CAN’T DO THIS WITH A MOBILE SPECIFIC SITE. How do you accommodate all devices? What if the users wants access to all content? Friday, November 30, 12
  • 71. CAN’T DO NOTHING. It’s human nature to try and conserve energy. Even the “revolutionary” pinch and zoom feels cumbersome and painstaking. Friday, November 30, 12
  • 72. THE ANSWER? RESPONSIVE DESIGN. Friday, November 30, 12
  • 73. 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. Friday, November 30, 12
  • 74. EXAMPLES Boston Globe Food Sense Lancaster University Friday, November 30, 12
  • 75. HOW RWD WORKS Friday, November 30, 12
  • 76. WHY RWD WORKS #1. UNIVERSAL ACCESS #2. CONTENT PARITY #3. OPTIMAL DISPLAY CROSS PLATFORM According to Ross Johnson, 2012 Friday, November 30, 12
  • 77. APPROACH RESPONSIVE DESIGN BY THINKING “MOBILE FIRST” Friday, November 30, 12
  • 79. 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 According to Ross Johnson, 2012 Friday, November 30, 12
  • 81. WITH MOBILE FIRST: EVERYONE HAS EQUAL ACCESS TO THE FEATURES, FUNCTIONALITY AND CONTENT OF THE SITE. According to Ross Johnson, 2012 Friday, November 30, 12
  • 82. SIMPLICITY A SIMPLE SITE IS EASIER TO USE, EASIER TO BUILD AND EASIER TO MAINTAIN. According to Ross Johnson, 2012 Friday, November 30, 12
  • 84. UNIVERSAL WEBSITES ARE A NECESSITY. According to Ross Johnson, 2012 Friday, November 30, 12
  • 85. RESPONSIVE DESIGN IS AN EFFECTIVE WAY TO BUILD UNIVERSAL SITES. According to Ross Johnson, 2012 Friday, November 30, 12
  • 86. DESIGN FOR MOBILE FIRST. According to Ross Johnson, 2012 Friday, November 30, 12
  • 87. HOW DO YOU MAKE WORDPRESS RESPONSIVE? Friday, November 30, 12
  • 88. EASIEST WAY PICK THE RIGHT THEME. According to Ross Johnson, 2012 Friday, November 30, 12
  • 91. DEMOS YourSearchAdvisor New Media Drivers License TwentyEleven Demo TwentyTwelve Demo Responsive Demo Free Themes Friday, November 30, 12
  • 92. DEMOS ZigZag Arcadian XO LuLu Paid Themes Friday, November 30, 12
  • 93. CUSTOM CUSTOM CODE A THEME Friday, November 30, 12
  • 94. BE AWARE OF YOUR PLUGINS Friday, November 30, 12
  • 95. PARTICULARLY SLIDERS, IMAGE PLUGINS, AND VIDEO PLUGINS Friday, November 30, 12
  • 96. GOOD PLUGINS WP FLUID IMAGES FITVIDS WP ORBIT SLIDER RESPONSIVE TWENTYTEN RESPONSIVE IMAGE GALLERY RESPONSIVE SELECT MENU Friday, November 30, 12
  • 97. THANK YOU Ross Johnson of 3.7 DESIGNS @3pointRoss / @37Designs Friday, November 30, 12