Design. SEO. PPC.

• Fluid Grids
• Fluid Images
• Media Queries

That’s all, blog post done. Have a good day!

…just kidding, of course. Responsive web design continues to get attention worldwide as the single best way to create a website that works well on any device, mobile or non-. But not many people have even the slightest grip on what responsive design consists of. Let’s see if we can fix that.

Fluid Grids
When you run a magazine, newspaper, or other print media, your defining characteristic in terms of layout was paper size. No matter what other tricks you came up with, you couldn’t fit more than 10.5 inches’ worth of text on a piece of standard paper. For a long time, everyone naturally looked as websites the same way — you have the width of your screen and the length of…until you run out of ideas.

But ‘the width of your screen’ isn’t static. I can switch screens between my iPod, iPad, laptop, and desktop, and I frequently do visit the same site on more than one of those devices in the same hour. Responsive websites are built with elements defined as percentages of the screen’s width rather than static amounts of pixels.

(More accurately, elements are built with elements defined as percentages of the wrapper that defines the edges of the website, which isn’t always the same as the edge of the screen, but that’s a bit of a technical note.)

Fluid Images
Similarly, responsive design uses CSS to define images with a maximum size (so they never get stretched or pixelated), but no minimum size (so they can always shrink to proportionally fit within the context of the content they’re a part of. CSS automatically maintains the aspect ratio, so again, there should be no pixilation.

Media Queries
The big daddy of responsive design. Media queries are a technique that CSS has been using for years; they essentially tell a CSS style sheet “ask the browser a question and only do X if you get Y as a response.” For example, CSS can ask a browser “What width is your frame currently set to?”, and if the answer is “>400 pixels”, CSS will produce a two-column website; if it’s “<400 pixels", it will show up as one much longer column. This is vital because even the most fluid grid still has 'breakpoints' where it doesn't look good. Media queries allow the website to redefine itself on the fly when it reaches those points so that new elements introduce themselves and the page continues to be pleasing to the eye and as functional as the screen size will allow. Design the Mobile Site First
The best advice from experts around the industry is to develop your mobile site first, and then add elements to that so that it responsively ‘grows’ into a mobile site in an organic fashion. The reason why is simple: because the mobile site must have fewer elements, it forces you to focus your attention on those things that are going to be the most desirable for your audience. It means that your desktop site will be literally unable to lose those core elements, and the supplemental content that comes into play around them will tend to be core-centric as well.