Intro to responsive design in WordPress. Slides from Thad Allender's April 10, 2012 talk at WordPress DC at Fathom Creative in Washington, D.C.

1. OMG
just
another
Responsive
DESIGN
talk

2. the
BACKSTORY

3. GraphPaperPress.com

4. What We Do
Themes
Plugins
Hosting
Education
Support

5. let’s rewind
2004

6. fast forward
2007

7. free WordPress theme
VISUALIZATION

8. two full-time
JOBS

9. I had
NO LIFE

10. so
I QUIT.

11. that’s when things
STARTED

12. a few
EXAMPLES

18. three
FUNDAMENTALS

19. 1
Flexible Grid

20. 1000px
(100%)
700px 300px
(70%) (30%)
700 / 1000 = .70 (70%)

21. target / context = result

22. Fluid or Fixed Width?
fluid fixed
•scales to 1000px
•scales horizontally •fits all screen sizes but stops
•fits all screen sizes at 1000px
•use width: 100% •use max-width: 1000px

23. know your
AUDIENCE

24. 2 Flexible
Images
&
Media

25. img {
max-width: 100%;
height: auto;
}

26. img { } img { max-width: 100% }
blowout! woot!

27. responsive
VIDEOS & EMBEDS

28. video,
embed,
iframe {
max-width: 100%;
height: auto;
}

29. 3
Media Queries

30. HUH?

31. Media Queries in CSS3 looks at
the capability of the device
loading a webpage and checks for:
★Width and height (of the browser window)
★Device width and height
★Orientation – ( landscape or portrait)
★Resolution
If the user has a browser that supports media queries then we can write CSS
specifically for certain situations.

32. @media screen
and (max-width: 850px) {
body { background: red }
}

33. Added to bottom of
stylesheet
(style.css)

34. @media only screen
and (min-device-width :
320px)
and (max-device-width :
480px) {
/* Styles */
}

35. #primary,
#secondary {
width:100%;
float: none;
margin: 2em 0 0;
}

36. Media Queries for
Standard Devices
http://css-tricks.com/snippets/css/media-
queries-for-standard-devices/

37. ALL TOGETHER
now

38. responsive
NAVIGATION

39. welcome to
MENU HELL

40. MENU HELL TO DROPDOWN

41. Convert Menu to a
dropdown for small
screens
http://css-tricks.com/convert-menu-to-dropdown/

44. responsive
BACKGROUNDS

45. background-size: 100% auto;

46. large screens
max-width: 850px with no background-size: 100% auto;
max-width: 850px with background-size: 100% auto;

47. RETINA
display

48. Retina Display has 4
times the number of
pixels than previous
iPhones and many
other smart phone
screens currently on
the market.

50. 1. Make two versions of
the image
2. Increase the second
by 200%
3. Define your CSS
4. Use Media Queries to
swap high-res image

51. @media screen and (-
webkit-min-device-pixel-
ratio: 1.5) {
.i { background: url(images/
pic-2x.png); background-
size:64px 12px;
}
}

52. what about
SERVER SIDE
mobile detection

53. $is_iphone

55. $is_mobile
http://wordpress.org/extend/plugins/mobile-detector/

57. wp_is_mobile()
more core support for mobile in 3.4 & 3.5

58. sweet
TOOLS

59. iOS Simulator
+
iWebInspector

60. RESPONSIVE SITE
CHECKER
http://mattkersley.com/responsive/

61. go forth and do
@thadallender
info@GraphPaperPress.com
GraphPaperPress.com