As more people are migrating towards smartphones and tablets, one thing is clear: the portable media industry is taking over the online browsing. And it doesn’t just stop there. Be it social media, checking emails, online shopping or even online banking, everything can now be done using smartphones and tablets. As this segment is increasing steadily, it’s extremely important that your website is mobile friendly. And this is where responsive web design comes into action.
A responsive design simply means a website that has been constructed so that the site content rearranges its layout and display settings depending on the screen size. For example, when a user accesses a site on their desktop, they are getting the full view of the site. But when that same user goes to visit the site from their smartphone or tablet, the site will retract to fit on the smaller screen. So, in this post, I will be providing to you the resources which will enable you to create your own Responsive Web Design.
To make it easier to go down the entire list of tools, we’ve categorized them into the following sections:
- Grids & Frameworks
- Wireframes & Sketch Sheets
- Testing & Preview
If you are looking for a shortcut and want some ready made responsive website templates check out list of free responsive HTML web templates and responsive wordpress themes with a flat design style.
Grids & Frameworks
Created and maintained by Mark Otto and Jacob Thornton at Twitter, Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web. It is available for free to get your Web Design projects started!
Used for making grids of any type, be it column based, asymmetrical, fixed, compound, responsive and more, Gridset is one of the most promising Responsive designing tool, and using it is as simple as embedding a link.
Wireframes & Sketch Sheets
SneakPeekIt Sketch Sheets
SneekPeekIt is a multi-layout wireframe Sketch Sheet which contains multipurpose pixel-perfect grids for web designers, developers and graphic artists.
Wirefy is a collection of CSS & JS files to help you rapidly experiment with responsive wireframes. Wirefy is style agnostic so that you don’t get hung up on colours, fonts, other design elements. It’s meant to be another tool for your development kit that provides the most basic styles as a foundation.
HotGloo is web-based, and therefore platform and terminal independent. The application stands out for its intuitive design and high standard of interactivity. The focus is set on collaboration. With HotGloo it’s possible for several users to work on one project at the same time.
An amazing jQuery Plugin, Isotope has proved to be very useful while designing a responsive layout as it not only rearranges the elements when the page is resized, but also helps in filtering the elements.
Adapt.js - Adaptive CSS
HiSlider introduced a free jQuery slider plugin for personal use to create fancy image sliders with fantastic image transitions. It requires no coding, yet brings before you amazing 2D and 3D image sliders.
WOW Slider is a responsive jQuery image slider with amazing visual effects and tons of professionally made templates. WOW Slider is packed with a point-and-click wizard to create fantastic sliders in a matter of seconds without coding and image editing. WordPress slider plugin and Joomla slider module are available also.
With beautiful transition effects and simple, yet flexible setup, Nivo Slider is world renowned as the most beautiful and easy to use image slider on the market. The Nivo Slider jQuery plugin is free to download and released under the MIT license.
Responsive Testing & Preview Tools
Rsponsinator is the most popular Responsive layout design checker. It is extremely easy to use and very light to load.
Responsive.Is is created by TypeCast another browser emulator tool, which you can use to test your responsive design. Just type in a URL, and it will automatically change its size depending on the device you choose.
ResponsivePx is a tool for testing your responsive website design. The main feature that distinguishes it from others, is its capability to resize the website pixel-by-pixel. This exciting feature, will let you identify the breakpoints and also test how the CSS media queries are working in your site.
FitText makes font-sizes flexible. Use this plugin on your fluid or responsive layout to achieve scalable headlines that fill the width of a parent element. It is only to be used for large scale text as changing the small text’s size is useless.
Want to rescale the embedded videos when the browser window is resized or the device is of smaller resolution? FitVid.Js can help you acheive this. It is a lightweight, simple, easy-to-use jQuery plugin used to achieve fluid width embedded videos.