Your SlideShare is downloading. ×
0
ONE WEBSITE TO                          RULE THEM ALL.                          Mobile Websites in 2012 / 2013            ...
I AM ROSS                          “DANGER”                          JOHNSON                          @3pointRoss         ...
TODAY WE ARE                          TALKING ABOUT                          MOBILEFriday, 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                          PEOP...
MOBILE CAN HAVE A DIFFERENT  MEANING WITH THE SAME OBJECT.Friday, November 30, 12
SHOULD WE BE                          CONCERNED                          ABOUT THE                          MOBILE WEB?   ...
A QUICK INTRODUCTIONFriday, November 30, 12
My background is a bit diverse...                          DESIGNER                          SOCIAL SCIENTIST             ...
I founded a company in 2004                          3.7 DESIGNS                          WEB DESIGN                      ...
I WROTE A BOOK IN 2011Friday, November 30, 12
BACK TO MOBILE...   A QUICK SURVEYFriday, November 30, 12
Friday, November 30, 12
MYTH #1:                          PEOPLE                          DON’T                          BROWSE MY                ...
10%                          OF GLOBAL WEBSITE                          PAGE VIEWS ARE FROM A                          MOB...
2X                          THAT’S ALMOST TWICE                          WHAT IT WAS LAST YEAR.                          A...
MYTH #2:                          DESKTOP                          BROWSING                          WILL ALWAYS          ...
LAST YEAR SMARTPHONE SALES                   OVERTOOK PC SALES.                   According to Business Insider.Friday, No...
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, N...
MOBILE INTERNET ACCESS WILL                   DWARF FIXED IN COMING YEARS.                   According to Business Insider...
MYTH #3:                          A MOBILE                          FRIENDLY                          SITE IS NICE,       ...
YOU DON’T KNOW                                            WHERE YOU ARE                                            GOING U...
Friday, November 30, 12
YOU WANT                          MOBILE?                          OPT #1.                          WAP MOBILE SPECIFIC   ...
Friday, November 30, 12
Friday, November 30, 12
Friday, November 30, 12
Friday, November 30, 12
NOW YOU WANT                          MOBILE?                          OPT #1.                          MOBILE SPECIFIC SI...
MYTH #3:                          YOU SHOULD                          HAVE A                          MOBILE              ...
2011                          UNTIL THIS YEAR, THESE                          THREE OPTIONS WERE                          ...
2012                          THIS YEAR, MOBILE                          CHANGED AND THIS                          APPROAC...
Friday, November 30, 12
Friday, November 30, 12
Friday, November 30, 12
TWO                          MAJOR CHANGES HAVE                          RESULTED IN THE NEED                          FOR...
FIRST, WHAT                          QUALIFIES AS A                          MOBILE DEVICE                          HAS CH...
OBVIOUSLY CELL PHONESFriday, November 30, 12
YUP TABLETS TOOFriday, November 30, 12
Friday, November 30, 12
GAME CONSOLESFriday, November 30, 12
Friday, November 30, 12
Friday, November 30, 12
“SMART” TV’SFriday, November 30, 12
Friday, November 30, 12
NETBOOKSFriday, November 30, 12
Friday, November 30, 12
EBOOK READERSFriday, 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                          MOBIL...
THE SCREEN                          SIZES DIFFER                          WIDELY, AND                          WHICH DEVIC...
MYTH #4:                          MOBILE                          BROWSING IS                          SHORT              ...
20%                          OF PEOPLE USE CELL                          PHONES AS THEIR                          PRIMARY ...
SECOND, MOBILE                          BEHAVIOR HAS                          CHANGED.Friday, November 30, 12
MOBILE BROWSING                          IS NO LONGER A                          RUSHED, SHORT                          DU...
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...
HOW DO YOU                          DESIGN A MOBILE                          SPECIFIC SITE IF                          MOB...
AS A RESULT, THE                          OLD METHODS                          ARE NO LONGER                          EFFE...
MORE THAN                          MOBILE                          WITH SO MANY DEVICES                          USED EVER...
UBIQUITOUS                          W E N E E D T O S TA R T                          THINKING       ABOUT                ...
CAN’T DO THIS                          WITH A MOBILE                          SPECIFIC SITE.                          How ...
CAN’T DO NOTHING.                          It’s human nature to try and conserve energy. Even the                         ...
THE ANSWER?                 RESPONSIVE DESIGN.Friday, November 30, 12
Responsive web design                          (often abbreviated to RWD)                          is an approach to web d...
EXAMPLES                             Boston Globe                              Food Sense                          Lancast...
HOW RWD WORKSFriday, November 30, 12
WHY RWD WORKS                          #1. UNIVERSAL ACCESS                          #2. CONTENT PARITY                   ...
APPROACH                          RESPONSIVE                          DESIGN BY                          THINKING         ...
Friday, November 30, 12
WITH MOBILE FIRST:                          ONLY THE MOST                          IMPORTANT CONTENT                      ...
Friday, November 30, 12
WITH MOBILE FIRST:                          EVERYONE HAS EQUAL                          ACCESS TO THE FEATURES,           ...
SIMPLICITY                          A SIMPLE SITE IS EASIER                          TO USE, EASIER TO BUILD              ...
Friday, November 30, 12
UNIVERSAL                          WEBSITES ARE A NECESSITY.                          According to Ross Johnson, 2012Frida...
RESPONSIVE                          DESIGN IS AN EFFECTIVE                          WAY TO BUILD UNIVERSAL                ...
DESIGN                          FOR MOBILE FIRST.                          According to Ross Johnson, 2012Friday, November...
HOW DO YOU MAKE                          WORDPRESS                          RESPONSIVE?Friday, November 30, 12
EASIEST WAY                          PICK THE RIGHT THEME.                          According to Ross Johnson, 2012Friday,...
Friday, November 30, 12
Friday, November 30, 12
DEMOS                          YourSearchAdvisor                          New Media Drivers License                       ...
DEMOS                          ZigZag                          Arcadian                          XO                       ...
CUSTOM                          CUSTOM CODE A THEMEFriday, November 30, 12
BE AWARE OF YOUR                          PLUGINSFriday, November 30, 12
PARTICULARLY                          SLIDERS, IMAGE PLUGINS,                          AND VIDEO PLUGINSFriday, November 3...
GOOD PLUGINS              WP FLUID IMAGES              FITVIDS              WP ORBIT SLIDER              RESPONSIVE TWENTY...
THANK YOU                          Ross Johnson of 3.7 DESIGNS                          @3pointRoss / @37DesignsFriday, No...
Upcoming SlideShare
Loading in...5
×

Responsive WordPress and the State of Mobile Websites

2,755

Published on

What's the best way to design a mobile website and should I even be concerned about the mobile web? In this presentation I take a look at the current state of the mobile web (in 2012/2013) and how you can go about creating a mobile website using WordPress.

Published in: Design

Transcript of "Responsive WordPress and the State of Mobile Websites"

  1. 1. ONE WEBSITE TO RULE THEM ALL. Mobile Websites in 2012 / 2013 @3pointRoss / @37DesignsFriday, November 30, 12
  2. 2. I AM ROSS “DANGER” JOHNSON @3pointRoss @37DesignsFriday, November 30, 12
  3. 3. TODAY WE ARE TALKING ABOUT MOBILEFriday, November 30, 12
  4. 4. mo·bile/ˈmōbəl/ Able to move or be moved freely or easily.Friday, November 30, 12
  5. 5. Friday, November 30, 12
  6. 6. MOBILE MEANS DIFFERENT THINGS TO DIFFERENT PEOPLE Are cars “mobile?” Sure.Friday, November 30, 12
  7. 7. MOBILE CAN HAVE A DIFFERENT MEANING WITH THE SAME OBJECT.Friday, November 30, 12
  8. 8. SHOULD WE BE CONCERNED ABOUT THE MOBILE WEB? If so, how do best address it?Friday, November 30, 12
  9. 9. A QUICK INTRODUCTIONFriday, November 30, 12
  10. 10. My background is a bit diverse... DESIGNER SOCIAL SCIENTIST DEVELOPER EDUCATORFriday, November 30, 12
  11. 11. I founded a company in 2004 3.7 DESIGNS WEB DESIGN BRANDING USER EXPERIENCE WORDPRESSFriday, November 30, 12
  12. 12. I WROTE A BOOK IN 2011Friday, November 30, 12
  13. 13. BACK TO MOBILE... A QUICK SURVEYFriday, November 30, 12
  14. 14. Friday, November 30, 12
  15. 15. MYTH #1: PEOPLE DON’T BROWSE MY SITE ON MOBILE DEVICESFriday, November 30, 12
  16. 16. 10% OF GLOBAL WEBSITE PAGE VIEWS ARE FROM A MOBILE DEVICE. According to StatCounterFriday, November 30, 12
  17. 17. 2X THAT’S ALMOST TWICE WHAT IT WAS LAST YEAR. According to a StatcounterFriday, November 30, 12
  18. 18. MYTH #2: DESKTOP BROWSING WILL ALWAYS BE MORE POPULARFriday, November 30, 12
  19. 19. LAST YEAR SMARTPHONE SALES OVERTOOK PC SALES. According to Business Insider.Friday, November 30, 12
  20. 20. AND THIS IS JUST THE START... According to Business Insider.Friday, November 30, 12
  21. 21. TABLETS WILL SOON SELL MORE THAN PC’S AS WELL. According to Business Insider.Friday, November 30, 12
  22. 22. MOBILE INTERNET ACCESS WILL DWARF FIXED IN COMING YEARS. According to Business Insider.Friday, November 30, 12
  23. 23. MYTH #3: A MOBILE FRIENDLY SITE IS NICE, BUT NOT A NECESSITYFriday, November 30, 12
  24. 24. YOU DON’T KNOW WHERE YOU ARE GOING UNTIL YOU KNOW WHERE YOU HAVE BEEN. PocketWeb for the Apple Newton - 1994Friday, November 30, 12
  25. 25. Friday, November 30, 12
  26. 26. YOU WANT MOBILE? OPT #1. WAP MOBILE SPECIFIC SITE OPT #2. GIVE UP.Friday, November 30, 12
  27. 27. Friday, November 30, 12
  28. 28. Friday, November 30, 12
  29. 29. Friday, November 30, 12
  30. 30. Friday, November 30, 12
  31. 31. NOW YOU WANT MOBILE? OPT #1. MOBILE SPECIFIC SITE OPT #2. MOBILE STYLESHEET OPT #3. DO NOTHINGFriday, November 30, 12
  32. 32. MYTH #3: YOU SHOULD HAVE A MOBILE SPECIFIC SITEFriday, November 30, 12
  33. 33. 2011 UNTIL THIS YEAR, THESE THREE OPTIONS WERE ADEQUATE FOR MOBILE. According to Ross Johnson, 2012Friday, November 30, 12
  34. 34. 2012 THIS YEAR, MOBILE CHANGED AND THIS APPROACH IS NO LONGER EFFECTIVE. According to Ross Johnson, 2012Friday, November 30, 12
  35. 35. Friday, November 30, 12
  36. 36. Friday, November 30, 12
  37. 37. Friday, November 30, 12
  38. 38. TWO MAJOR CHANGES HAVE RESULTED IN THE NEED FOR A NEW APPROACH. According to Ross Johnson, 2012Friday, November 30, 12
  39. 39. FIRST, WHAT QUALIFIES AS A MOBILE DEVICE HAS CHANGED.Friday, November 30, 12
  40. 40. OBVIOUSLY CELL PHONESFriday, November 30, 12
  41. 41. YUP TABLETS TOOFriday, November 30, 12
  42. 42. Friday, November 30, 12
  43. 43. GAME CONSOLESFriday, November 30, 12
  44. 44. Friday, November 30, 12
  45. 45. Friday, November 30, 12
  46. 46. “SMART” TV’SFriday, November 30, 12
  47. 47. Friday, November 30, 12
  48. 48. NETBOOKSFriday, November 30, 12
  49. 49. Friday, November 30, 12
  50. 50. EBOOK READERSFriday, November 30, 12
  51. 51. Friday, November 30, 12
  52. 52. MP3 PLAYERS...Friday, November 30, 12
  53. 53. Friday, November 30, 12
  54. 54. SOON... MOST DEVICES?Friday, November 30, 12
  55. 55. Friday, November 30, 12
  56. 56. THE NUMBER OF MOBILE DEVICES HAS EXPLODED.Friday, November 30, 12
  57. 57. WITH SO MANY DEVICES, HOW DO YOU DESIGN A MOBILE SPECIFIC SITE OR STYLESHEET?Friday, November 30, 12
  58. 58. THE SCREEN SIZES DIFFER WIDELY, AND WHICH DEVICES ARE ACTUALLY MOBILE?Friday, November 30, 12
  59. 59. MYTH #4: MOBILE BROWSING IS SHORT DURATION AND RUSHEDFriday, November 30, 12
  60. 60. 20% OF PEOPLE USE CELL PHONES AS THEIR PRIMARY ONLINE DEVICE. According to a Pew Internet Study in 2012Friday, November 30, 12
  61. 61. SECOND, MOBILE BEHAVIOR HAS CHANGED.Friday, November 30, 12
  62. 62. MOBILE BROWSING IS NO LONGER A RUSHED, SHORT DURATION ACTIVITYFriday, November 30, 12
  63. 63. MOBILE USERS CONSUME LOTS OF ONLINE CONTENT.Friday, November 30, 12
  64. 64. AND MOBILE USAGE IS GROWING FASTER THAN DESKTOP.Friday, November 30, 12
  65. 65. MOBILE IS ANYTIME JUST BECAUSE I AM ON A MOBILE DEVICE DOESN’T MEAN THAT I AM MOBILE. According to Ross Johnson, 2012Friday, November 30, 12
  66. 66. HOW DO YOU DESIGN A MOBILE SPECIFIC SITE IF MOBILE USERS MIGHT NOT BE MOBILE?Friday, November 30, 12
  67. 67. AS A RESULT, THE OLD METHODS ARE NO LONGER EFFECTIVE.Friday, November 30, 12
  68. 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, 2012Friday, November 30, 12
  69. 69. UBIQUITOUS W E N E E D T O S TA R T THINKING ABOUT UNIVERSAL WEBSITES. According to Ross Johnson, 2012Friday, November 30, 12
  70. 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. 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. 72. THE ANSWER? RESPONSIVE DESIGN.Friday, November 30, 12
  73. 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. 74. EXAMPLES Boston Globe Food Sense Lancaster UniversityFriday, November 30, 12
  75. 75. HOW RWD WORKSFriday, November 30, 12
  76. 76. WHY RWD WORKS #1. UNIVERSAL ACCESS #2. CONTENT PARITY #3. OPTIMAL DISPLAY CROSS PLATFORM According to Ross Johnson, 2012Friday, November 30, 12
  77. 77. APPROACH RESPONSIVE DESIGN BY THINKING “MOBILE FIRST”Friday, November 30, 12
  78. 78. Friday, November 30, 12
  79. 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, 2012Friday, November 30, 12
  80. 80. Friday, November 30, 12
  81. 81. WITH MOBILE FIRST: EVERYONE HAS EQUAL ACCESS TO THE FEATURES, FUNCTIONALITY AND CONTENT OF THE SITE. According to Ross Johnson, 2012Friday, November 30, 12
  82. 82. SIMPLICITY A SIMPLE SITE IS EASIER TO USE, EASIER TO BUILD AND EASIER TO MAINTAIN. According to Ross Johnson, 2012Friday, November 30, 12
  83. 83. Friday, November 30, 12
  84. 84. UNIVERSAL WEBSITES ARE A NECESSITY. According to Ross Johnson, 2012Friday, November 30, 12
  85. 85. RESPONSIVE DESIGN IS AN EFFECTIVE WAY TO BUILD UNIVERSAL SITES. According to Ross Johnson, 2012Friday, November 30, 12
  86. 86. DESIGN FOR MOBILE FIRST. According to Ross Johnson, 2012Friday, November 30, 12
  87. 87. HOW DO YOU MAKE WORDPRESS RESPONSIVE?Friday, November 30, 12
  88. 88. EASIEST WAY PICK THE RIGHT THEME. According to Ross Johnson, 2012Friday, November 30, 12
  89. 89. Friday, November 30, 12
  90. 90. Friday, November 30, 12
  91. 91. DEMOS YourSearchAdvisor New Media Drivers License TwentyEleven Demo TwentyTwelve Demo Responsive Demo Free ThemesFriday, November 30, 12
  92. 92. DEMOS ZigZag Arcadian XO LuLu Paid ThemesFriday, November 30, 12
  93. 93. CUSTOM CUSTOM CODE A THEMEFriday, November 30, 12
  94. 94. BE AWARE OF YOUR PLUGINSFriday, November 30, 12
  95. 95. PARTICULARLY SLIDERS, IMAGE PLUGINS, AND VIDEO PLUGINSFriday, November 30, 12
  96. 96. GOOD PLUGINS WP FLUID IMAGES FITVIDS WP ORBIT SLIDER RESPONSIVE TWENTYTEN RESPONSIVE IMAGE GALLERY RESPONSIVE SELECT MENUFriday, November 30, 12
  97. 97. THANK YOU Ross Johnson of 3.7 DESIGNS @3pointRoss / @37DesignsFriday, November 30, 12
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×