Responsive Web Design (RWD) provides designers with a method of adapting sites to the wide range of possible browser and device environments. Since screens used for desktops, laptops, tablets and other mobile devices can differ widely, RWD ensures that web pages will format optimally across the more popular browser and device options.
The Lettering.js plugin allows designers to control font appearance including spacing, kerning and leading. Some web designers create their own images to help control the proportion of typography, but Lettering.js allows for an easier approach with a fully-packaged solution.
BluCSS uses Cascading Style Sheets to create responsive layouts with four stages: desktop, laptop, mobile and tablet screens. The framework includes pre-designed styles to give users an idea of how to start. The main container is 1000 pixels wide by default but users can resize this as they please. There are 10 columns in this container with percentage-based widths. BluCSS also includes responsive images that adapt automatically to browser width.
With this tool, web designers can create a gridwork of images that will display across the browser window without any gaps. The images can all be of different sizes and when the browser window is resized, all the images automatically resize proportionally.
5. WOW Slider
The WOW Slider app provides designers with a tool for creating jQuery slide shows with special effects like flip, blur, fade and stack. The tool provides a drag-and-drop wizard that is Mac and Windows compatible. The sliders are responsive to browsers and devices, but they have some limitations in the squares and flip effects on IE6.
This CSS tool allows for the creation of adaptive pages using four layouts and three typography resets. A single fixed-width adaptive grid provides the background structure for all the layouts and typography presets. The default layout consists of 10 column with adaptability for desktops, laptops and tablets, and for older browsers.
A great tool for sketching out plans on placement of page elements in a manner that will adjust over many browsers and devices. The application provides support for collaboration including signing of documents using Adobe EchoSign.
8. Style Tiles
The Style Tiles tool provides typography, colors and other page elements that act much like fabric and paint displays used by offline designers. The tile display allows you to present different webpage mockups in a layout that adjusts optimally across browsers and devices.
The Golden Grid System tool features “folding columns” that allows users to combine the default 16 design columns. For example, by folding the entire grid, the 16 columns become 8 columns. The application provider says that Golden Grid System can handle screen sizes from 2560 to 240 pixels.
FitText is a JQuery plugin for adjusting font sizes to browser and screen width. The tool is for designing headlines that will fit across the entire width of the viewing element.
A tool with four screen sizes for adjusting to browser width: less than 720px, greater than 720px, greater than 985px, and greater than 1235px. The tool numbers slots so they know their order in their respective row.
The 1140 Grid is for 1280 screens and it automatically adjusts to smaller monitors and to browser width. For mobile devices with small screens, the framework utilizes media queries to “stack” columns vertically so the information flows logically down the screen. The tool provides wider gutters and it also shrinks images if they are too large to display in their resized columns.
15. Web Developer
An extension for Firefox and Chrome web browsers to test page layouts. The tools works on Windows, OS X and Linux operating systems. The tools provided with this extension include a button that automatically resizes the browser according to customized presets. Web Developer is a great application for adding and testing responsive websites.
An archive of CSS files that allows web designers to create responsive websites that adjust to any screen size easily. The 960 pixel base grid automatically resizes for smaller screens and browsers. The tool has a simple design and is very easy to use. Typography provided consists of basic styles with a stack hierarchy. Skeleton also provides responsive buttons, forms and support for media queries. The developer offers technical support for his product.
The tool provides responsiveness for 99 viewports including the iPhone screen. ProtoFluid allows you to conduct tests for all compatible platforms, so you do not need to keep an inventory of test devices. The ReView feature acts as a “dynamic viewport system” that allows switching between default/desktop view and core/mobile view. The ProtoFluid designs are independent of scrollbar and definitions are available for many devices including iPad and Facebook Page Tabs.
A responsive 1140 pixel CSS grid system that resizes depending on browser width. When the browser becomes too small, the page switches to mobile device layout. The tool provides its own debugging system along with sub-columns, vertical spacing, PDF rendering and wireframing templates. The grid consists of 12 columns that divide vertically into rows.
Ciara Sawyer has been working for WebHostingSearch as an editorial staff since 2009. WebHostingSearch offers web hosting reviews and tutorials to aid you in creating your own domain .