Today, people use many different devices to access the Internet. Laptops, desktops and netbooks may be the most common, but many people like the convenience of looking up information on the go with tablets and smartphones. To further complicate matters, each device has different size or resolution options and each size displays a web page differently.

As a designer, it's hard to design a website that works on all screen resolutions on all devices, but this is necessary so your pages can be viewed. Responsive design means creating a website that can be accessed on different screens with different resolutions. Creating a web page with fluid queries, images and grids means the page can be viewed on multiple devices. Here are 10 tools to help you create a responsive web page.

10 Valuable Tools for Responsive Web Design


10 Valuable Tools for Responsive Web Design


ResizeMyBrowser.com


This tool lets you test how your website will look in different resolutions and different browsers.

Mobilize.js


This framework uses JavaScript and HTML5 to alter a website to fit on a mobile phone's screen. This tool lets you create a mobile-friendly website from your existing website. It will detect the user's browser and recognizes Blackberry, Opera Mini, Droid and iPhone browsers along with others.

GoldenGridSystem.com


Golden Grid System lets you split into even columns. The columns can be combined for tablets and smartphones. This means a page will display properly on all size screens from a small smartphone to a large desktop monitor.

Responsive Design Testing (mattkersley.com/responsive)


This website lets you enter your website's URL to see how it looks in different screen resolutions and browsers.

Gridless (thatcoolguy.github.com/gridless-boilerplate)


This tool uses CSS3 and HTML5 to allow you to create a responsive website for different browsers and platforms.

Columnal.com


A grid system for CSS, the grid is 1,140px wide, but is fluid and will change depending on the browser. Uses the grid system from cssgrid.net, but has added features including subcolumns from 960.gs.

FitTextJS.com


FitText is a plugin that allows you to make font size flexible so it will display on a variety of screen sizes and resolutions. Using this tool can help you make scalable headlines to fit the width of the page.

BluCSS (designlunatic.com/projects/blucss)


This CSS framework is easy to use and designed with simplicity. It helps you create pages for the four main platform sizes: smartphone, tablet, laptop and desktop monitor.

SimpleGrid.info


This tool helps you create different size web pages for display on different screen resolutions. It includes presets of four common screen sizes, so the page will automatically display the appropriate size. This eliminates the horizontal scrollbar for users.

Fluid Images (unstoppablerobotninja.com/entry/fluid-images)


This article gives valuable information and example codes to create fluid images.

 
Top