D2WC 2012: Looking Good: Mobile WordPress

590 views
502 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.

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
590
On SlideShare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • FIRST: What is responsive design?\n--- SHOW OF HANDS: HOW MANY *KNOW* THIS WELL? ---\nExplain briefly what responsive design is all about. Makes it easier to design for various screen resolutions. BUT comes with problems.\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • There are two groups of people: Authors and Devs who have to make sure site owners and bloggers can get things that just work.\n--- SHOW OF HANDS: HOW MANY ARE DEVS vs. SITE OWNERS ---\n
  • Let’s talk about some challenges that WordPress specifically demonstrates when building a site for mobile.\n
  • \n
  • \n
  • \n
  • \n
  • SIDEBAR: What to do with it when reducing the size? We can hide it. Position it below content under 2-col width. HOWEVER, creates a problem => Sidebar is much wider now. Looks hideous.\n-> Example. DeveloperDrive\n
  • \n
  • Why use a fixed sidebar?\nIt streamlines the user experience. Users design sidebar banners for one screen: Fit across all.\n+ Sidebar not THAT important\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Kudos to them: Good WIDE screen version.\n
  • Move down: Standard blog format, not two columns anymore.\n
  • Moving down further, position navigation under logo.\n
  • Sidebar problem. They hide it.\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • 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

    ×