Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
LOOKING GOODMOBILE WORDPRESS
Who is the guythat’s talking?
Erik Bernskiold  note the spelling
LOOKING GOODMOBILE WORDPRESS
Mobile   Devices
Mobile Devices Tablets & Smartphones
3    Ways Of Making    WordPress Look    Good on Mobile
responsive designdesktop          tablet              phone
Mobile-Specific   Design
Separate Mobile Site
Pros                         Cons- Easy to make lightweight   - Completely separate                             - Only des...
Mobile-Specific   Design
Pros                                 Cons- Easy to get feature-parity          - Only targeted to one type of device- Easy...
BANNED
Pros                                 Cons- Easy to get feature-parity          - Only targeted to one type of device- Easy...
DON’T CREATETHE BAD MOBILEEXPERIENCE ALL OVER AGAIN!
responsive designdesktop          tablet              phone
Theme Authors        Site OwnersWordPress Developers     Bloggers
CH  ALfor     LE      the            me                                   NG               a   uth                      o ...
Making It Easy For Users
metaboxeshtml           css                 theme options  shortcodes          double configuration
Serving Up Right-Sized Images    Server Side Check - Conditional Loading
RESSResponsive Design + Server Side Components
Should We Hide                          The Sidebar?Photo by Scott Liddell
fluid %         fixed px
Why Fixed Sidebar?            Streamlines User Experience                         &fixed px       Makes it Easy to Update
2    Simple Techniques    To Make Your Life       Much Easier
Using Classes in Your HTML Code
<article id="post-5334" class="post">!! <h1>This is my post title</h1>!! <p>Post body text.</p>! <p>Keeps continuing here....
<article id="post-5334" class="post">!! <h1 class="post-title">This is my post title</h1>!! <div class="post-body">! ! <p>...
Adding a Select/Down-down Menu
Find the codehttp://www.xldstudios.com/generating-select-menu-in-wordpress/
Examples
Discussion
Find The Slideserikbernskiold.com/d2wc-2012-slides
Get in touch with me...http://www.erikbernskiold.comhttp://www.xldstudios.comFacebook: http://facebook.com/bernskiolderikT...
Questions?
LOOKING GOODMOBILE WORDPRESS
D2WC 2012: Looking Good: Mobile WordPress
Upcoming SlideShare
Loading in …5
×

D2WC 2012: Looking Good: Mobile WordPress

703 views

Published on

If you’ve ever been faced with the task of making WordPress look good on mobile devices you know how hard it can be, especially if you are developing for clients who don’t hire you to maintain their sites. In this session we will look at the different methods to make your WordPress site look good in mobile and give solutions to the challenges you will face.

  • Be the first to comment

  • Be the first to like this

D2WC 2012: Looking Good: Mobile WordPress

  1. 1. LOOKING GOODMOBILE WORDPRESS
  2. 2. Who is the guythat’s talking?
  3. 3. Erik Bernskiold note the spelling
  4. 4. LOOKING GOODMOBILE WORDPRESS
  5. 5. Mobile Devices
  6. 6. Mobile Devices Tablets & Smartphones
  7. 7. 3 Ways Of Making WordPress Look Good on Mobile
  8. 8. responsive designdesktop tablet phone
  9. 9. Mobile-Specific Design
  10. 10. Separate Mobile Site
  11. 11. Pros Cons- Easy to make lightweight - Completely separate - Only designed for one type of device - Easy to go away from feature-parity.
  12. 12. Mobile-Specific Design
  13. 13. Pros Cons- Easy to get feature-parity - Only targeted to one type of device- Easy to for customers to maintain- Optimized for the screen size
  14. 14. BANNED
  15. 15. Pros Cons- Easy to get feature-parity - Only targeted to one type of device- Easy to for customers to maintain- Optimized for the screen size
  16. 16. DON’T CREATETHE BAD MOBILEEXPERIENCE ALL OVER AGAIN!
  17. 17. responsive designdesktop tablet phone
  18. 18. Theme Authors Site OwnersWordPress Developers Bloggers
  19. 19. CH ALfor LE the me NG a uth o rs ES and d ev elo p er s
  20. 20. Making It Easy For Users
  21. 21. metaboxeshtml css theme options shortcodes double configuration
  22. 22. Serving Up Right-Sized Images Server Side Check - Conditional Loading
  23. 23. RESSResponsive Design + Server Side Components
  24. 24. Should We Hide The Sidebar?Photo by Scott Liddell
  25. 25. fluid % fixed px
  26. 26. Why Fixed Sidebar? Streamlines User Experience &fixed px Makes it Easy to Update
  27. 27. 2 Simple Techniques To Make Your Life Much Easier
  28. 28. Using Classes in Your HTML Code
  29. 29. <article id="post-5334" class="post">!! <h1>This is my post title</h1>!! <p>Post body text.</p>! <p>Keeps continuing here.</p>!! <div class="post-meta">! ! <ul>! ! ! <li>May 18, 2012</li>! ! ! <li>Design / Development</li>! ! ! <li>Erik Bernskiold</li>! ! </ul>! </div></article>
  30. 30. <article id="post-5334" class="post">!! <h1 class="post-title">This is my post title</h1>!! <div class="post-body">! ! <p>Post body text.</p>! ! <p>Keeps continuing here.</p>! </div>!! <div class="post-meta">! ! <ul>! ! ! <li class="post-meta-date">May 18, 2012</li>! ! ! <li class="post-meta-categories">Design / Development</li>! ! ! <li class="post-meta-author">Erik Bernskiold</li>! ! </ul>! </div></article>
  31. 31. Adding a Select/Down-down Menu
  32. 32. Find the codehttp://www.xldstudios.com/generating-select-menu-in-wordpress/
  33. 33. Examples
  34. 34. Discussion
  35. 35. Find The Slideserikbernskiold.com/d2wc-2012-slides
  36. 36. Get in touch with me...http://www.erikbernskiold.comhttp://www.xldstudios.comFacebook: http://facebook.com/bernskiolderikTwitter: @ErikBernskioldGoogle+: http://gplus.to/bernskiolderikemail me: erik@bernskioldmedia.com
  37. 37. Questions?
  38. 38. LOOKING GOODMOBILE WORDPRESS

×