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.

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 Marcotte
http://bit.ly/jKUDa7

5. Ethan’s RWD Rules
1. 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. Responsive
Web Design
http://bit.ly/jQC9JP

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

11. Saving time and hassle:
Responsive CSS Frameworks

12. Less Framework
lessframework.com

13. 1140px Framework
cssgrid.net

14. Adapt.js adapt.js
adapt.960.gs adapt.960.gs

16. 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

17. The process.

19. 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]-->

20. 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>

21. CSS3 dress-up.

22. Media queries?

23. 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) { don't { forget: the mobile devices; }}
@media only screen and (-webkit-min-device-pixel-ratio: 2) { iPhone 4 {retina-display: stuff; }}

24. Ol’ Dirty

26. 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>

27. 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>

28. Questions?
http://www.slideshare.net/3rdmartini/wordcamp-kc-2011

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