D2WC 2012: Looking Good: Mobile WordPress

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.

Transcript

1. LOOKING GOOD MOBILE WORDPRESS
2. Who is the guy that’s talking?
3. Erik Bernskiold note the spelling
4. LOOKING GOOD MOBILE WORDPRESS
5. Mobile Devices
6. Mobile Devices Tablets & Smartphones
7. Ways Of Making WordPress Look Good on Mobile 3
8. desktop tablet phone responsive design
9. Mobile-Specific Design
10. Separate Mobile Site
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 - Easy to for customers to maintain - Optimized for the screen size - Only targeted to one type of device
15. BANNED
16. Pros Cons - Easy to get feature-parity - Easy to for customers to maintain - Optimized for the screen size - Only targeted to one type of device
17. DON’T CREATE THE BAD MOBILE EXPERIENCE ALL OVER AGAIN!
18. desktop tablet phone responsive design
19. Theme Authors WordPress Developers Site Owners Bloggers
20. CHALLENGES for theme authors and developers
21. Making It Easy For Users
22. html shortcodes css metaboxes theme options 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 & Makes it Easy to Update fixed px
28. Simple Techniques To Make Your Life Much Easier 2
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
33. http://www.xldstudios.com/generating-select-menu-in-wordpress/ Find the code
34. Examples
35. Discussion
36. Find The Slides erikbernskiold.com/d2wc-slides
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?
39. LOOKING GOOD MOBILE WORDPRESS