the responsive grid & you: extending your wordpress site across multiple devices
TRANSCRIPT
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’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.
Sounds like a lot of work.
What are the benefits?
Saving time and hassle:
Responsive CSS Frameworks
• 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
Reasons for going responsive
The process.
<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]-->
Setting up the grid
.container
The markup<div class="container">
<div class="row">
<div class="threecol">
<p>Column 1</p>
</div>
<div class="threecol">
<p>Column 2</p>
</div>
<div class="threecol">
<p>Column 3</p>
</div>
<div class="threecol last">
<p>Column 4</p>
</div>
</div>
</div>
.row
.threecol
Column 1
.threecol
Column 2
.threecol
Column 3
.threecol
.last
Column 4
CSS3 dress-up.
Media queries?
/* 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; }}
Adaptability with style.
Ol’ Dirty
<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>
Setting up the grid
.container_12
The markup<div class="container_12">
<div class="grid_3 alpha">
<p>Column 1</p>
</div>
<div class="grid_3">
<p>Column 2</p>
</div>
<div class="grid_3">
<p>Column 3</p>
</div>
<div class="grid_3 omega">
<p>Column 4</p>
</div>
</div>
.grid_3
.alpha
Column 1
.grid_3
Column 2
.grid_3
Column 3
.grid_3
.omega
Column 4
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: