OMGjust       anotherResponsiveDESIGN     talk
theBACKSTORY
GraphPaperPress.com
What We Do   Themes   Plugins   Hosting  Education   Support
let’s rewind2004
fast forward2007
free WordPress themeVISUALIZATION
two full-timeJOBS
I hadNO LIFE
soI QUIT.
that’s when thingsSTARTED
a fewEXAMPLES
threeFUNDAMENTALS
1Flexible Grid
1000px              (100%)      700px            300px      (70%)            (30%)700 / 1000 = .70 (70%)
target / context = result
Fluid or Fixed Width?fluid                     fixed                         •scales to 1000px•scales horizontally     •fi...
know yourAUDIENCE
2   Flexible    Images       &     Media
img {  max-width: 100%;  height: auto;}
img { }   img { max-width: 100% }blowout!            woot!
responsiveVIDEOS & EMBEDS
video,embed,iframe {  max-width: 100%;  height: auto;}
3Media Queries
HUH?
Media Queries in CSS3 looks atthe capability of the deviceloading a webpage and checks for:★Width and height (of the brows...
@media screenand (max-width: 850px) {  body { background: red }}
Added to bottom of   stylesheet   (style.css)
@media only screenand (min-device-width :320px)and (max-device-width :480px) {/* Styles */}
#primary,#secondary {  width:100%;  float: none;  margin: 2em 0 0;}
Media Queries for Standard Deviceshttp://css-tricks.com/snippets/css/media-      queries-for-standard-devices/
ALL TOGETHER          now
responsiveNAVIGATION
welcome toMENU HELL
MENU HELL TO DROPDOWN
Convert Menu to a    dropdown for small         screenshttp://css-tricks.com/convert-menu-to-dropdown/
responsiveBACKGROUNDS
background-size: 100% auto;
large screens     max-width: 850px with no background-size: 100% auto;      max-width: 850px with background-size: 100% au...
RETINA    display
Retina Display has 4times the number ofpixels than previous iPhones and many other smart phonescreens currently on    the ...
1. Make two versions ofthe image2. Increase the secondby 200%3. Define your CSS4. Use Media Queries toswap high-res image
@media screen and (-webkit-min-device-pixel-ratio: 1.5) {  .i { background: url(images/pic-2x.png); background-size:64px 1...
what aboutSERVER SIDE             mobile detection
$is_iphone
$is_mobilehttp://wordpress.org/extend/plugins/mobile-detector/
wp_is_mobile()more core support for mobile in 3.4 & 3.5
sweetTOOLS
iOS Simulator       +iWebInspector
RESPONSIVE SITE   CHECKER   http://mattkersley.com/responsive/
go forth and do       @thadallender info@GraphPaperPress.com    GraphPaperPress.com
Responsive Design in WordPress
Responsive Design in WordPress
Responsive Design in WordPress
Responsive Design in WordPress
Responsive Design in WordPress
Responsive Design in WordPress
Responsive Design in WordPress
Responsive Design in WordPress
Responsive Design in WordPress
Responsive Design in WordPress
Upcoming SlideShare
Loading in …5
×

Responsive Design in WordPress

3,254 views

Published on

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.

Published in: Design, Technology, Business
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,254
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
57
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Responsive Design in WordPress

  1. 1. OMGjust anotherResponsiveDESIGN talk
  2. 2. theBACKSTORY
  3. 3. GraphPaperPress.com
  4. 4. What We Do Themes Plugins Hosting Education Support
  5. 5. let’s rewind2004
  6. 6. fast forward2007
  7. 7. free WordPress themeVISUALIZATION
  8. 8. two full-timeJOBS
  9. 9. I hadNO LIFE
  10. 10. soI QUIT.
  11. 11. that’s when thingsSTARTED
  12. 12. a fewEXAMPLES
  13. 13. threeFUNDAMENTALS
  14. 14. 1Flexible Grid
  15. 15. 1000px (100%) 700px 300px (70%) (30%)700 / 1000 = .70 (70%)
  16. 16. target / context = result
  17. 17. 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
  18. 18. know yourAUDIENCE
  19. 19. 2 Flexible Images & Media
  20. 20. img { max-width: 100%; height: auto;}
  21. 21. img { } img { max-width: 100% }blowout! woot!
  22. 22. responsiveVIDEOS & EMBEDS
  23. 23. video,embed,iframe { max-width: 100%; height: auto;}
  24. 24. 3Media Queries
  25. 25. HUH?
  26. 26. Media Queries in CSS3 looks atthe capability of the deviceloading a webpage and checks for:★Width and height (of the browser window)★Device width and height★Orientation – ( landscape or portrait)★ResolutionIf the user has a browser that supports media queries then we can write CSSspecifically for certain situations.
  27. 27. @media screenand (max-width: 850px) { body { background: red }}
  28. 28. Added to bottom of stylesheet (style.css)
  29. 29. @media only screenand (min-device-width :320px)and (max-device-width :480px) {/* Styles */}
  30. 30. #primary,#secondary { width:100%; float: none; margin: 2em 0 0;}
  31. 31. Media Queries for Standard Deviceshttp://css-tricks.com/snippets/css/media- queries-for-standard-devices/
  32. 32. ALL TOGETHER now
  33. 33. responsiveNAVIGATION
  34. 34. welcome toMENU HELL
  35. 35. MENU HELL TO DROPDOWN
  36. 36. Convert Menu to a dropdown for small screenshttp://css-tricks.com/convert-menu-to-dropdown/
  37. 37. responsiveBACKGROUNDS
  38. 38. background-size: 100% auto;
  39. 39. large screens max-width: 850px with no background-size: 100% auto; max-width: 850px with background-size: 100% auto;
  40. 40. RETINA display
  41. 41. Retina Display has 4times the number ofpixels than previous iPhones and many other smart phonescreens currently on the market.
  42. 42. 1. Make two versions ofthe image2. Increase the secondby 200%3. Define your CSS4. Use Media Queries toswap high-res image
  43. 43. @media screen and (-webkit-min-device-pixel-ratio: 1.5) { .i { background: url(images/pic-2x.png); background-size:64px 12px; }}
  44. 44. what aboutSERVER SIDE mobile detection
  45. 45. $is_iphone
  46. 46. $is_mobilehttp://wordpress.org/extend/plugins/mobile-detector/
  47. 47. wp_is_mobile()more core support for mobile in 3.4 & 3.5
  48. 48. sweetTOOLS
  49. 49. iOS Simulator +iWebInspector
  50. 50. RESPONSIVE SITE CHECKER http://mattkersley.com/responsive/
  51. 51. go forth and do @thadallender info@GraphPaperPress.com GraphPaperPress.com

×