1.
Hi. I’m @3rdmartini.Let’s be Twitter friends.

2.
The Responsive Grid & You:Extending Your WordPress Site Across Multiple Devices.Brought to you with loving care by:

3.
Responsive Design:What Is It?

4.
Ethan Marcottehttp://bit.ly/jKUDa7

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.
ResponsiveWeb Designhttp://bit.ly/jQC9JP

7.
Sounds like a lot of work.What are the benefits?

8.
Saving time and hassle:Responsive CSS Frameworks

9.
Less Frameworklessframework.com

10.
1140px Frameworkcssgrid.net

11.
Adapt.js adapt.jsadapt.960.gs adapt.960.gs

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.
The process.

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.
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.
CSS3 dress-up.

17.
Media queries?

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.
Ol’ Dirty

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.
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.
Questions?http://www.slideshare.net/3rdmartini/wordcamp-kc-2011

23.
The Responsive Grid & You:Extending Your WordPress Site Across Multiple Devices.Brought to you with loving care by: