Code Poet » media queries

Rolling up our responsive sleeves

Krista — Thu, 20 Dec 2012 17:12:47 +0000

We can all agree that responsive web design is the most important advance in designing for the web since we all abandoned tables in favor of CSS for layout. Now, here’s a chance to take your responsive chops to the next level. Pro tip: you might also be interested in our free ebook, WordPress Meet Responsive Web Design.

Quick Overview
In this video of his An Event Apart presentation, recorded on June 18th, 2012, Ethan covers how to use fluid grids and media queries to handle trickier elements of designing responsively, including advertising, complex layouts, deep navigation patterns, third-party media, and more. Allow the man who coined responsive web design back in 2010 with his canonical A List Apart article, to take you to the next level of designing a user experience that works, regardless of the size of the user’s viewport.

Image based on Ripple by robin_24, CC-BY-2.0.

WordPress Meet Responsive Design

Michael Pick — Fri, 11 May 2012 02:55:36 +0000

Right now you quite possibly have sites out there in the wild that look like death on one screen or another. And while your trainwreck site turns site visitors away, devices are proliferating faster than anyone can remember what to call them, making your trainwreck site a trainwreck pile up.

Gone are the days of the fixed layout tailored to some imaginary, cramped CRT. And the half way house of fluid layouts are no longer enough when you’re presenting content to people looking at your site through smartphones, tablets, various sized laptops or arrays of gigantic monitors with resolutions of titantic proportions.

That’s where Responsive Web Design (RWD) comes in.

Since Ethan Marcotte coined the term back in 2010 more and more designers and developers have been building projects responsively; sites that actually bother to query the viewport they’re being experienced through, and adapt to make the experience as good as can possibly be.

So what’s that to you as a WordPress-powered designer or developer? Code Poet asked the people most likely to know. In this short book Chris Coyier, Ian Stewart and Sara Cannon give you the lowdown on their real world uses and strategies for designing WordPress responsively…

Read the full book by selecting one of the download options below:

Resolution Specific Stylesheets by Chris Coyier

Krista — Wed, 09 May 2012 13:15:32 +0000

The responsive web design troika includes fluid grids, fluid images, and a bit of detective work courtesy of CSS Media Queries to sort out the breakpoints for viewports of various size.

Quick overview
In Resolution Specific Stylesheets, Chris Coyier demonstrates how to create and serve different CSS files that rearrange a website’s layout to take advantage of the size in the viewpoint. He even shows you how to do it with jQuery. Boom.

Responsive Web Design by Ethan Marcotte

Krista — Wed, 09 May 2012 13:00:12 +0000

Responsive web design is the rage that’s swept web design nation. This slim volume’s got the skinny.

Quick overview
Read Responsive Web Design and author Ethan Marcotte will make you an expert on how to make websites using fluid images, fluid grids, and media queries to make elegant sites that showcase content regardless of the size of the viewport.