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.

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. 3
Ways Of Making
WordPress Look
Good on Mobile

8. responsive design
desktop
tablet
phone

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 - 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

33. Find the code
http://www.xldstudios.com/generating-select-menu-in-wordpress/

34. Examples

35. Discussion

36. Find The Slides
erikbernskiold.com/d2wc-2012-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