A better Photoshop grid for responsive web design Posted on 20 January 2012 • 90 comments In making the move to responsive web design, one of the potential hurdles is the rather awkward maths for calculating the percentage-based widths necessary for fluid layouts. If, for example, you’re designing with a 960px grid in Photoshop and you have six columns, each 140px wide, you divide 140 by 960 to get your percentage-based width: 14.583333%. Replacing Respond JS with Sass So you’re building some really cutting/bleeding edge web sites. You’re using HTML5, CSS3, and media quieries to serve your users some fast, repsonsive, and beautiful code/websites. Your life is great, and you love the work you’re producing… Then you have to make sure your code is working in legacy browsers like IE7 and 8… So you throw some polyfils like Modernizr at these legacy browsers… and now they understand HTML5. You used progressive enhancement from the beginning, so the CSS3 you’re using looks fine in browsers that don’t understand it. And finally, you fired up some virtual machines and checked to make sure everything is working fine.
Using Media Queries in the Real World Warning This article was written over six months ago, and may contain outdated information. Recently I’ve been working on the new website for my employers, Poke London, which launched last week. One of the things of which I’m proudest is the use of media queries to create a site which is sympathetic to small-screen devices. I learned a lot from developing with media queries, not least of which was the limit of what’s possible with them, so I thought it would be useful to present some of the key lessons learned in this post.
20 tools to help you create responsive web designs Building responsive design has become a huge trend in the web design world. There is a good reason for that: responsive websites are much more relevant than fixed web designs in a time where a lot of internet traffic comes from mobile devices. In this article we take a look at some of the most useful tool to help you with the creation of responsive designs. Sketching / wireframing tools First things first, responsive design need to be well-thought or you’ll get much more work than you would have otherwise. These tools will help you to make planning decisions and sketch your responsive website.
Less Framework 4 I called Less Framework "a CSS grid system for designing adaptive websites". It was basically a fixed-width grid that adapted to a couple of then popular screen widths by shedding some of its columns. It also had matching typographic presets to go with it, built with a modular scale based on the golden ratio. 15 More Responsive CSS Frameworks & Boilerplates Worth Considering Following on from 15 Responsive CSS Frameworks Worth Considering, which we published last November, today we have 15 more for you to consider. All of the frameworks and boilerplates below have been built with strict compliance to standards and conventions and will, as you would expect from any CSS framework, save your precious time by eliminating the need to write any of the base CSS styles yourself and, more importantly, helping you solve any tricky responsive layout issues you may have. Gumby 960 Grid Responsive CSS Framework Gumby offers a choice of either downloading the 12 column version, 16 column version, hybrid 12/16 column version or absolutely everything in a single bundle. Within the framework they’ve packaged up tons of styles and common interface elements (forms, buttons, tabs, and pure CSS dropdowns) to help you quickly put together functional prototypes.
» The EMs have it: Proportional Media Queries FTW! Cloud Four Blog Hay, I wrote this in 2012! I still like the notion of the metaphorical connection between content-based sizing units (e.g. ems) and layout definitions (e.g. breakpoints). And the zooming behavior cited here was always meant more as a sidelong example than a core argument. Nonetheless!