background preloader

Responsive Design bookmarklet

Responsive Design bookmarklet
This was inspired by, and based on @lensco‘s excellent Simple Responsive Design Test Page. It lets you view any webpage in multiple screen sizes, simulating the viewport of different devices. After getting such a positive response to my original script, I thought I’d expand on it a little. Since people are obviously targeting different device screen sizes with their projects, the form below now lets you generate a custom bookmarklet that displays only those device sizes you’re interested in. A big thanks to Alaska Airlines for the delayed flight that made this possible, and the really boring project that I know I should be working on, but can’t find the motivation. Urgh.

Related:  useful sites for web designresponsive designresponsive

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.

IETester / Browser Compatibility Check for Internet Explorer Versions from 5.5 to 10 IETester is free.To support the projectyou can make a donation : or you can translate it. IETester is a free (both for personal and professional usage) WebBrowser that allows you to have the rendering and javascript engines of IE11, IE10, IE9, IE8, IE7 IE 6 and IE5.5 on Windows 8 desktop, Windows 7, Vista and XP, as well as the installed IE in the same process. This is an alpha release, so feel free to post comments/bugs on the IETester forum. Requirement : Windows 8 desktop, Windows 7, Windows Vista or Windows XP with IE7 minimum (Windows XP/IE6 config has some problems and IE8 instance do not work under XP without IE7) Note for IE10 : IE10 is not available on IETester if it is not the default IE version installed on the system. So IE10 is only available on Windows 8 machines.

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.

Elastic Image Slideshow with Thumbnail Preview Today we want to show you how to create a simple elastic slideshow with a thumbnail preview. The slideshow will adjust automatically to its surrounding container and we can navigate through the slides by using the thumbnail previewer or the autoplay slideshow option. View demo Download source To make this slideshow responsive, we will use a mixture of JavaScript and CSS techniques. 20 Incredibly Useful Tools & Resources for Web Designers When it comes to Web design, the tools you use play an integral part in your results. Of course, we’re big fans of getting down to the basics, like putting pencil to paper, but sometimes finding new apps and resources can help you get those creative juices flowing. Check out our list of 25 incredibly useful tools and resources for designers and developers below. Then, be sure to let us know your favorites (or if we missed your favorite) in the comments!

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!