D2WC 2012: Looking Good: Mobile WordPress
Download as KEY, PDF0 likes856 views
The document discusses making WordPress websites optimized for mobile devices through responsive design and mobile-specific strategies. It highlights the pros and cons of different approaches including responsive design and having a separate mobile site. The author emphasizes the need to avoid a poor mobile experience and offers practical coding techniques for improved performance.
D2WC 2012: Looking Good: Mobile WordPress
- 2. Who is the guy that’s talking?
- 3. Erik Bernskiold note the spelling
- 5. Mobile Devices
- 6. Mobile Devices Tablets & Smartphones
- 7. 3 Ways Of Making WordPress Look Good on Mobile
- 8. responsive design desktop tablet phone
- 9. Mobile-Specific Design
- 11. Pros Cons - Easy to make lightweight - Completely separate - Only designed for one type of device - Easy to go away from feature-parity.
- 12. Mobile-Specific Design
- 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
- 15. BANNED
- 16. 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
- 17. DON’T CREATE THE BAD MOBILE EXPERIENCE ALL OVER AGAIN!
- 18. responsive design desktop tablet phone
- 19. Theme Authors Site Owners WordPress Developers Bloggers
- 20. CH AL for LE the me NG a uth o rs ES and d ev elo p er s
- 21. Making It Easy For Users
- 22. metaboxes html css theme options shortcodes double configuration
- 23. Serving Up Right-Sized Images Server Side Check - Conditional Loading
- 24. RESS Responsive Design + Server Side Components
- 25. Should We Hide The Sidebar? Photo by Scott Liddell
- 26. fluid % fixed px
- 27. Why Fixed Sidebar? Streamlines User Experience & fixed px Makes it Easy to Update
- 28. 2 Simple Techniques To Make Your Life Much Easier
- 29. Using Classes in Your HTML Code
- 30. <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>
- 31. <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>
- 32. Adding a Select/ Down-down Menu
- 34. Examples
- 35. Discussion
- 37. Get in touch with me... http://www.erikbernskiold.com http://www.xldstudios.com Facebook: http://facebook.com/bernskiolderik Twitter: @ErikBernskiold Google+: http://gplus.to/bernskiolderik email me: erik@bernskioldmedia.com
- 38. Questions?
Editor's Notes
- #2: \n
- #3: \n
- #4: \n
- #5: \n
- #6: \n
- #7: \n
- #8: \n
- #9: 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
- #10: \n
- #11: \n
- #12: \n
- #13: \n
- #14: \n
- #15: \n
- #16: \n
- #17: \n
- #18: \n
- #19: \n
- #20: 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
- #21: Let&#x2019;s talk about some challenges that WordPress specifically demonstrates when building a site for mobile.\n
- #22: \n
- #23: \n
- #24: \n
- #25: \n
- #26: 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
- #27: \n
- #28: 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
- #29: \n
- #30: \n
- #31: \n
- #32: \n
- #33: \n
- #34: \n
- #35: \n
- #36: Kudos to them: Good WIDE screen version.\n
- #37: Move down: Standard blog format, not two columns anymore.\n
- #38: Moving down further, position navigation under logo.\n
- #39: Sidebar problem. They hide it.\n
- #40: \n
- #41: \n
- #42: \n
- #43: \n
- #44: \n