Hi. I’m @3rdmartini.Let’s be Twitter friends.
The Responsive Grid & You:Extending Your WordPress Site Across Multiple Devices.Brought to you with loving care by:
Responsive Design:What Is It?
Ethan Marcottehttp://bit.ly/jKUDa7
Ethan’s RWD Rules1. A flexible grid.2. Flexible images. Or more specifically, images that work in a flexible context   (wheth...
ResponsiveWeb Designhttp://bit.ly/jQC9JP
Sounds like a lot of work.What are the benefits?
Saving time and hassle:Responsive CSS Frameworks
Less Frameworklessframework.com
1140px Frameworkcssgrid.net
Adapt.js       adapt.jsadapt.960.gs   adapt.960.gs
Reasons for going responsive• Wanted to design for highest resolution possible while not abandoning  the experience for 10...
The process.
Setting up the grid<link rel="stylesheet" href="/wp-content/themes/gotrkc/1140.css"media="screen" /><link rel="stylesheet"...
The markup   <div class="container">  <div class="row">                 .container    <div class="threecol">           .ro...
CSS3 dress-up.
Media queries?
Adaptability with style./* Layout for desktop version */   blah { omg: so much code; }/* Layout for other versions */   @m...
Ol’ Dirty
Setting up the grid<link rel="stylesheet" href="/css/master.css" /><noscript><link rel="stylesheet" href="/css/mobile.min....
The markup<div class="container_12">   <div class="grid_3 alpha">         <p>Column 1</p>        .container_12   </div>   ...
Questions?http://www.slideshare.net/3rdmartini/wordcamp-kc-2011
The Responsive Grid & You:Extending Your WordPress Site Across Multiple Devices.Brought to you with loving care by:
The Responsive Grid & You:  Extending Your WordPress Site Across Multiple Devices.
The Responsive Grid & You:  Extending Your WordPress Site Across Multiple Devices.
The Responsive Grid & You:  Extending Your WordPress Site Across Multiple Devices.
The Responsive Grid & You:  Extending Your WordPress Site Across Multiple Devices.
The Responsive Grid & You:  Extending Your WordPress Site Across Multiple Devices.
The Responsive Grid & You:  Extending Your WordPress Site Across Multiple Devices.
Upcoming SlideShare
Loading in …5
×

The Responsive Grid & You: Extending Your WordPress Site Across Multiple Devices.

2,624 views
2,515 views

Published on

Presented to WordCamp KC 2011.

If you are a web designer of any type, you're interested in making sure your designs are faithful AND useful to the widest audience possible. This has been true for years. But now, your audience has widened to mobile users and also users on HDTVs. How do you accommodate them? Simple: Responsive Web Design.

This talk shows how to use some of the open source responsive CSS frameworks to make sites that are fluid and adaptable to a wide range of devices.

Published in: Technology
0 Comments
6 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,624
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
27
Comments
0
Likes
6
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • The Responsive Grid & You: Extending Your WordPress Site Across Multiple Devices.

    1. 1. Hi. I’m @3rdmartini.Let’s be Twitter friends.
    2. 2. The Responsive Grid & You:Extending Your WordPress Site Across Multiple Devices.Brought to you with loving care by:
    3. 3. Responsive Design:What Is It?
    4. 4. Ethan Marcottehttp://bit.ly/jKUDa7
    5. 5. Ethan’s RWD Rules1. A flexible grid.2. Flexible images. Or more specifically, images that work in a flexible context (whether fluid themselves, or perhaps controlled via overflow).3. Media queries. The final layer of a responsive design, media queries optimize the design for different viewing contexts, and spot-fix bugs that occur at different resolution ranges.
    6. 6. ResponsiveWeb Designhttp://bit.ly/jQC9JP
    7. 7. Sounds like a lot of work.What are the benefits?
    8. 8. Saving time and hassle:Responsive CSS Frameworks
    9. 9. Less Frameworklessframework.com
    10. 10. 1140px Frameworkcssgrid.net
    11. 11. Adapt.js adapt.jsadapt.960.gs adapt.960.gs
    12. 12. Reasons for going responsive• Wanted to design for highest resolution possible while not abandoning the experience for 1024 × 768• Wanted to give an optimized mobile experience for moms on the go as well as tween girls that want to participate• Give the design a longer shelf life• Experimentation
    13. 13. The process.
    14. 14. Setting up the grid<link rel="stylesheet" href="/wp-content/themes/gotrkc/1140.css"media="screen" /><link rel="stylesheet" href="/wp-content/themes/gotrkc/smallerscreen.css"media="only screen and (max-width: 1023px)" /><link rel="stylesheet" href="/wp-content/themes/gotrkc/mobile.css"media="handheld, only screen and (max-width: 767px)" /><link rel="stylesheet" href="/wp-content/themes/gotrkc/style.css"media="all" /><!--[if lte IE 9]> <link rel="stylesheet" href="/wp-content/themes/gotrkc/ie.css"media="screen" /><![endif]-->
    15. 15. The markup <div class="container"> <div class="row"> .container <div class="threecol"> .row <p>Column 1</p> .threecol .threecol .threecol .threecol </div> .last <div class="threecol"> <p>Column 2</p> Column 1 Column 2 Column 3 Column 4 </div> <div class="threecol"> <p>Column 3</p> </div> <div class="threecol last"> <p>Column 4</p> </div> </div></div>
    16. 16. CSS3 dress-up.
    17. 17. Media queries?
    18. 18. Adaptability with style./* Layout for desktop version */ blah { omg: so much code; }/* Layout for other versions */ @media only screen and (max-width: 1023px) { a few { things: for this resolution; }} @media only screen and (max-width: 796px) { a few { things: for iPad portrait mode; }} @media only screen and (max-width: 420px) { dont { forget: the mobile devices; }} @media only screen and (-webkit-min-device-pixel-ratio: 2) { iPhone 4 {retina-display: stuff; }}
    19. 19. Ol’ Dirty
    20. 20. Setting up the grid<link rel="stylesheet" href="/css/master.css" /><noscript><link rel="stylesheet" href="/css/mobile.min.css" /></noscript><script>var ADAPT_CONFIG = { path: http://thecocktailnapkin.tv/css/, dynamic: true, range: [ 760px = mobile.min.css, 760px to 980px = 720.min.css, 980px to 1280px = 960.min.css, 1280px to 1600px = 1200.min.css, 1600px to 1920px = 1560.min.css, 1920px = fluid.min.css ]};</script>
    21. 21. The markup<div class="container_12"> <div class="grid_3 alpha"> <p>Column 1</p> .container_12 </div> .grid_3 .grid_3 .grid_3 .grid_3 .alpha .omega <div class="grid_3"> <p>Column 2</p> Column 1 Column 2 Column 3 Column 4 </div> <div class="grid_3"> <p>Column 3</p> </div> <div class="grid_3 omega"> <p>Column 4</p> </div></div>
    22. 22. Questions?http://www.slideshare.net/3rdmartini/wordcamp-kc-2011
    23. 23. The Responsive Grid & You:Extending Your WordPress Site Across Multiple Devices.Brought to you with loving care by:

    ×