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.
RWD uses Cascading Style Sheets 3 (CSS3) and Javascript to adjust the web page presentation with grids that adapt proportionally using percentages and EMs rather than the traditional pixel-based measurement. The style sheets allow the page to “fit” into the browser or device screen in such a way that minimizes the need to scroll, pan and resize. Below is a list of 20 tools that web designers can use to create RWD pages.
1. Bootstrap
Bootstrap is a widely used framework for web development, offering tools for building responsive and mobile-first websites. It provides a collection of HTML, CSS, and JavaScript components that make it easier to design and develop web applications. Bootstrap allows developers to create visually appealing and functional websites quickly.
Adobe Dreamweaver is a popular web design and development tool that offers responsive web design capabilities to help you create websites that adapt to different screen sizes and devices.
3. Webflow
Webflow is a platform that empowers web designers to create responsive websites efficiently.
4. Lettering.js
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.
With this CSS and HTML-based solution, you use pre-made “wireframes” that automatically adjust to browser and device. Since these wireframes do not use Javascript or images, they may present fewer problems in terms of cross-browser compatibility.
6. BluCSS
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.
7. Seamless Responsive Photo Grid
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.
8. 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.
10. Responsive Web Design Sketch Sheets
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.
11. 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.
12. Adapt.js
A Javascript tool that chooses the right CSS file to load before page rendering. When the browser resizes or tilts, the script automatically checks width and makes appropriate style sheet changes. Sometimes, the script may cause flashes of unformatted content when Adapt.js changes CSS files.
13. FitText
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.
14. SimpleGrid
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.
16. 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.
17. Respond.js
Since IE8 and below do not handle media queries, Javascript often fills in the gap. Respond.js is an excellent tool for handling media query responsive design in IE6 through IE8.
18. Skeleton
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.
19. Modernizr
Modernizr provides Javascript support to handle the inadequacies of HTML5 and CSS3 coding on some browsers and devices. The built in YepNope.js code allows users to test media queries and conditional file loading. Modernizr uses a “flexible box model” with control of font-face, background-size, border-image, border-radius and box-shadow. The tool tests more than 40 features and it can create a Javascript object that contains test results. The script loader feature allows you to load polyfills for older browsers.
20. ProtoFluid
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.
Author:
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 .
