February 13, 2012 In labs

This article is meant to be a resource for those interested in Responsive Web Design.

Various tools are available to aide in the creation of responsive designs, such as the ability to easily test a website at multiple resolutions and the ability to scale text smoothly. Several articles and blog posts on responsive web design are also listed as they give insight into how other developers have approached responsive web design.

TOOLS

http://codebomber.com/jquery/resizer/
Jquery Resizer. This is a simple, but very useful plugin by William Golden. The plugin is placed in the browser bookmark bar, and when clicked it will toggle a responsive view of the website. Switching between various resolutions is painless. We highly recommend this tool as an alternative to manually testing your website on multiple devices.

http://bricss.net/
A Responsive design test page. This is another tool that will allow you to test a website at multiple resolutions.

http://fittextjs.com/
Flexible Text Sizing – a jQuery plugin. This plugin will help to make sure that the text on your website will scale flawlessly.

http://pxtoem.com/
PXtoEM conversion tool. Although using em font sizes is not required for responsive design, this tool is extremely useful for sites based on a flexible em font size.

ARTICLES

http://upstatement.com/blog/2012/01/how-to-approach-a-responsive-design/
This is a great article by Upstatement, the firm that did the responsive website for the Boston Globe in Nov 2010. The Boston Globe was one of the first major websites to fully utilize a responsive design.

http://elliotjaystocks.com/blog/css-transitions-media-queries/
Elliot Jay Stocks talks about CSS transitions and Media Queries.

https://workbysimon.com/labs/choosing-a-responsive-web-design-framework-for-your-site/
Okay, this is a bit of a plug. Here is our article on choosing a responsive web design framework.

MORE RESOURCES

https://register.bdconf.com/
Breaking Development Conference – An amazing conference with amazing price tag. If you are interested in mobile design and development this is definitely the event for you.

http://mediaqueri.es/
The best online collection of responsive website designs. This gallery should provide plenty of inspiration for designers and developers looking to implement a responsive design.

http://www.w3.org/TR/css3-mediaqueries/
Straight from the horses mouth. The W3C on Media Queries – “A media query consists of a media type and zero or more expressions that check for the conditions of particular media features.” The full article lists all of the technical details behind CSS3 media queries.