Going Responsive with WordPress

1,056 views

Published on

Responsive Web Design (RWD) with WordPress, tools and frameworks to make the effort easy.

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,056
On SlideShare
0
From Embeds
0
Number of Embeds
9
Actions
Shares
0
Downloads
6
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Going Responsive with WordPress

  1. 1. Going Responsive with WordPress @jrcryer jamescryer.com
  2. 2. Responsive Web Design: DefinitionA responsive design is composed of threedistinct parts: • Flexible grids • Flexible media (images and video) • Media queriesMaking sites device agnostic
  3. 3. Flexible GridsFlexible grids expand and contract to fit thecontext in which they are viewed • Use formula: target / context = result • Example 900 / 960 = 0.9375 • Think in pixels percentages
  4. 4. Flexible Grids#sidebar { width: 33.333333333333%; }
  5. 5. Flexible MediaAdd constraints to prevent imagesoverflowing their containers • Technique: img { max-width: 100%; height: auto; } • Internet Explorer 6 or below: img { width: 100%; }
  6. 6. Flexible Media (cont...) •UseTechnique: instead of scaling of overflow, .container { overflow: hidden; } img { max-width: auto; } • Also applies to <video />, <embed /> and <object />
  7. 7. Media Queries“A robust mechanism for identifying notonly types of media, but inspection ofphysical characteristics of the devices” • Example: @media screen and (min-width: 1024px) { body { font-size: 100%; } } <link href=”desktop.css” rel=”stylesheet” media=”screen and (min-width: 1024px)” />
  8. 8. Media QueriesAvailable features: • device-width • device-height • width • height • orientation • and more...
  9. 9. Media QueriesSetting viewport size • Example:<meta name=”viewport” content=”initial-scale=1.0,width=device-width” />
  10. 10. Breakpoints@media screen and (min-width: 480px){ ...}@media screen and (min-width: 600px){ ...}@media screen and (min-width: 768px){ ...}@media screen and (min-width: 1024px){ ...}
  11. 11. Side note...Also consider: • Icon fonts • SVG for logos with PNG fallback • Web fonts
  12. 12. Responsive Design inWordpress
  13. 13. FrameworksAvailable frameworks to get started: • Bones • Reverie • SkeletonAlternatively, roll your own...
  14. 14. Flexible Media Preventing WordPress from adding width and height:/** * RESPONSIVE IMAGE FUNCTIONS */ add_filter( post_thumbnail_html,remove_thumbnail_dimensions, 10 );add_filter( image_send_to_editor,remove_thumbnail_dimensions, 10 ); function remove_thumbnail_dimensions($html ) { return preg_replace( /(width|height)="d*"s/, "",$html );}
  15. 15. Going it alone...• Take a mobile first approach• Use a CSS preprocessor - LESS or SASS• Start simple
  16. 16. Responsive Plugins• Responsive Video Light• SlideDeck 2• Respond.js• Simple Responsive Images• Smooth Slider
  17. 17. Other tools• Twitter’s Bootstrap• ZURB’s Foundation• IcoMoon• Fontello• Modernizr
  18. 18. Live DemoLIVE DEMO
  19. 19. Questions? Examples from todayhttps://gist.github.com/jrcryer
  20. 20. Further info?

×