Simplify Responsive Design by Embracing the Flexible Nature of the Web

 Web Design  395 Responses »
Jan 102013
 

 internet-web

There’s nothing “wrong” with using pixels in an otherwise responsive layout, but if you do you’ll likely end up writing more code than you would using flexible units.

Jon Allsopp’s A Dao of Web Design predates responsive design by a decade, but its prescient advice remains perhaps the best way to approach any design, responsive or otherwise: “It is the nature of the web to be flexible, and it should be our role as designers and developers to embrace this flexibility, and produce pages which, by being flexible, are accessible to all.”

More than just embracing the nature of the medium, building your sites atop what developer Trent Walton calls “Flexible Foundations” can go a long way to making development easier. As Walton points out in his post, using pixels often means more code since pixel-based type, margins and padding mean you need to add new values at every responsive breakpoint.

“In many ways,” writes Walton, “every time we use a pixel value in CSS we’re rasterizing what was a fully-scalable web.”

MORE:  Simplify Responsive Design by Embracing the Flexible Nature of the Web

 

 

 

How to Scale Embedded Media in Responsive Designs

 interface, Web Design  252 Responses »
Sep 202012
 

Swedish web developer Anders Andersen recently tackled the problem of responsive embeds and came up with a solution that works with both YouTube and Vimeo movies. Andersen’s solution is to wrap any embed code, whether it’s an actual embed tag or an iframe, with an extra div and then scale that div. Naturally you’ll need to strip any fixed dimensions out of the YouTube or other embed code for this to work.

For the full details and the CSS that makes it work, be sure to read Andersen’s whole post.

The core of Andersen’s method lies in the CSS, which uses this handy trick to preserve the intrinsic ratio of the video even as its container element scales down.

Andersen has tested this technique with YouTube, Vimeo and SlideShare embeds, though it may work with others as well.

MORE:  How to Scale Embedded Media in Responsive Designs | Webmonkey | Wired.com.

 

Mark Boulton on layouts and grid systems

 Design, interface, Web Design  301 Responses »
Sep 072011
 

 

“The idea is a very mature way of thinking. It’s almost ingrained as a designer: this is how we approach layout. But we’ve tried to make it work on the web by basically inventing a page, like a best fit. We’ve created a page in a medium where there are no edges, there is no page. The web is different. So I’ve thought up three rules, which I think we need to apply to modern web design. It’s a complete reversing of the way of thinking about it.”

via Mark Boulton on layouts and grid systems | Interview | .net magazine.

Take advantage of the CSS background-size property | Tutorial

 Education, interface  223 Responses »
Sep 062011
 

Oh sure, gradients are all the rage — and rightly so — but there are some super-handy bits you may not have investigated thoroughly. Maybe they seem more utilitarian and don’t have the swagger of box-shadow and border-radius, but in this tutorial I intend to change your mind. One of my favourites is background-size. Let’s see what some of the possibilities are.

The background-size property does exactly what you would expect — it allows you to specify the size of a background image on both the X-axis (horizontally) and the Y-axis (vertically).

via Take advantage of the CSS background-size property | Tutorial | .net magazine.