News flash: The internet is going mobile. As more and more people view the internet from mobile devices, the need for responsive website design intensifies. Learn how to create a responsive, user-friendly web design with these top tools:
1. Gridset
Tired of calculating column configurations for multiple screen sizes? Gridset helps you design custom, responsive grid layouts easily. It can help you create any kind of grid you want – from simple to complex – all without having to worry about the measurements and calculations. You can even save and reuse your grid sets for future use.
2. FitText
FitText helps make your font-size flexible to fit your fluid or responsive layout. This jQuery plugin automatically resizes your headline font size according to the width of the parent element to help you create fluid magazine-like headlines. That means you’ll never end up with a broken layout, orphan, widow, or other unsightly effects of font-sizing issues again.
Just like FitText works for headlines, Adaptive Images automatically adjusts your imbedded HTML images to your visitor’s screen size. It works on your existing site and requires no mark-up changes. You can even customize some of the configurations if you don’t like the default values.
4. FlevNav
Your menu navigation needs to be mobile-friendly to help your users get around your site easily. FlevNav solves the problem of responsive site navigation for you. It’s a jQuery plugin that uses media queries and JavaScript to create menus with drop downs specifically catered towards mobile devices. It features multiple nested sub menus and tap targets for touch screens.
The Responsive Slides plugin allows you to create a fully responsive slideshow using elements within a container. It’s a simple and small plugin, but contains dozens of customizable settings to create a truly unique slider. You can set automatic or manual fade, separate pagination and next/previous controls, random order of the slides and optional ‘before’ and ‘after’ callbacks.
Responsive Tables was designed with three specific criteria in mind: creating tables that don’t break responsive layouts, don’t hide data and allows you compare rows. This simple JavaScript/CSS combination achieves works by “pinning” the first column to the left of the table and allowing you to scroll the other columns under it.
Want to test your designs across multiple devices in seconds? Look no further than Responsive Design Testing Tool. Just enter your website’s URL into the address bar at the top of the page. The tool displays the following screen options: 240 x 320 (small phone), 320 x 480 (iPhone), 480 x 640 (small tablet), 768 x 1024 (iPad Portrait) and 1024 x 768 (iPad Landscape).
8. Bootstrap
The Bootstrap front-end framework uses a 12-column responsive grid with dozens of components, plugins, form controls, and typography options. Bootstrap’s new responsive grid system creates a fluid layout so your site looks great in the latest desktop and mobile browsers (including IE7). Using the web-based Customizer, you can choose components, select jQuery plugins, and adapt variables.
9. Foundation
The Foundation front-end, open source framework also uses a 12-column flexible, scalable grid that works on almost any device. It supports nesting, source ordering, offsets and device presentations. The framework allows for a high level of creativity and customization with various UI elements, plugins and options.
10. Wirefy
Wirefly’s rapid prototype allows you to experiment quickly with responsive wireframes. Whether you use them to show your clients or keep them for yourself, Wirefy is extremely flexible and adaptable. Based on a 16-column grid, Wirefy offers the standard UI elements and options – all while remaining style agnostic, so you don’t get hung up on design decisions and can focus on your content first.
Best,
Michael Pignataro
VP of Operations
