Top 10 Tools to Step-up Your Responsive Web Design
Did you know that back in 2014 the number of mobile users overtook those still sitting around with their fixed desktop systems? In a world that’s open, social (virtually speaking), and mobile, you either ‘go responsive or go home’. If you happen to be of the latter variety, have fun hiding under a rock, Mr. Hermit. This article is not for you.
The rest of us are trying our best to step-up our game in web design. Theories have taken a turn from prioritizing ‘user-experience’ to ‘content-first’. All in the name of responsive web design.
And to put them in action, we have a veritable army of tools. Here’s a list of our 10 favorites, an absolute must for any designer going ‘mobile-friendly’.
Let’s start with:
The first hurdle to responsive web design is not related to designing itself at all. It’s communicating what the design would look like to your clients.
Style Tiles makes it simple. It gives you a visual aid to showcase during client meetings. It’s easy and flexible, so these ‘templates’ (for the lack of better term) can be changed to showcase development in stages. For collaborative/team efforts, these templates are great for jostling ideas and coming up with the best solution: simple because you can see every change in fonts, colors, and layout elements in ‘fake-action’, in real time.
It’s better than creating mockups in Photoshop.
Let me be clear, Foundation 5.5.0 for sites is one of the three versions of this framework. For responsive website designing, that’s the one we work on.
It has everything a responsive framework needs to have and more. The best in class fluid grids, amazing UI tools, Sass 3.4 compatibility (and libsass inclusion) for better performance, added features on dropdown menus for better navigation, it supports jQuery 2, and it’s compatible with all major desktop and mobile browsers.
If you have a penchant for going creative with navigation, you’ll love Foundation.
This script saves you the time you’d have probably spent raging over browser incompatibility issues.
It basically works as a polyfill for older (cough: IE6-8 and other) browser versions, allowing them to support your CSS3 media query-filled pages. It’s well-written and very compact (1kb gzipped). You should put in the call for respon.min.js (the respond.js script) as early on as possible.
There are other media query polyfill scripts, but yes, this is one of the fastest. Keep in mind that it won’t parse style sheets referenced via @import (if you value performance you won’t be using them anyway). Also, you’ll need to concatenate reference strings if you’re calling in well over 32 style sheets.
This one is quite simple to use and the end result is very nice.
Essentially, this script arranges your layout elements in dynamic columns based on screen width. Among a number of other things, you can customize alignment, use placeholders to fill empty space at the bottom of columns for a spread even look, customize items’ distance from each other, add endless scrolling, and more.
API integration and work in progress: which is sweet deal if you’ve got any improvements you’d like to make to this fantastic plugin.
Designers have to make content look neat and pretty. That was difficult enough with Photoshop or InDesign; converting stylized text into code. There’s Typekit, but it may be a bit intimidating to a beginner (read: expensive).
Typecast is a way around that. It’s an online, easy to use tool for designing typeface and seeing the results of your labor in real-time. There are pre-styled templates for those who’re just getting started, or you can jump right on styling your own type. You can sign up for free (3500+ fonts), or subscribe for $10 a month (for 3 users and over 23k licensed fonts).
The fonts are not available to download, but you can get the HTML/CSS code for it.
This little script is device agnostic, friendly with existing websites, and works with ‘mobile-first’ philosophy that I’m, personally, a huge fan of.
All you need to do is add adaptive-images.php in your root folder (along with .htaccess, if haven’t already). It takes care of scaling your image resolution down to the last pixel, so your webpage looks just as attractive on smaller devices as it does on a desktop. It also compresses the image file size, to allow them to load and cache along with the rest of the page, sparing a load off your users’ bandwidth.
It works with existing markups, so you don’t need to make any large changes.
Apple’s Retina display is cool, but adapting your image loading site to that kind of pixel perfection will demand large, high-def media files. That’s going to take a chunk out of page speed.
Retinaimag.es takes the task of simple, unbiased sampling seriously. Basically you create your page with regular, properly sized images, and add a retina-ready version of those images. From there, retinaimages.php will check the devicePixelRatio. If it confirms the device has Retina display, it will show retina-optimized images instead of regular ones.
It’s like the retinized version of conditional loading.
This one is my absolute favorite.
I like tables, they are quick to cover and easy to digest for your users, and you can deal with large amounts of information at once. Short, simple, and effective. But adapting tables to responsive layouts was nothing short of a nightmare.
Not anymore, thanks to these tables from ZURB playground. You download two files: responsive-tables.js and responsive-tables.css, string ‘em up within your page’s markup, and done.
I like these, because adapting tables would often mean hiding rows/columns or mutilating the tables. This script won’t do that unless absolutely necessary.
Fluid-width video embeds made easy by this little jQuery plugin!
From the makers of another brilliant tool (FitText.js for fluidifying large text on responsive designs); this extremely lightweight plugin lets you play with videos as you would with images, scaling them on the go.
It’s built upon the Intrinsic Ratio principal, turning the padding units into percentage so they can adapt to containing block.
Because sometimes, the simplest answer is the right one.
As simple as it gets: Screenfly will test your page ‘different device dimensions’ to check its responsiveness. You give it your page’s URL and it will show how it looks on as many resolutions as you want.
There are other emulators, but Screenfly is one of the most popular, probably because of its fun and easy-to-use interface, pre-defined dimensions for most popular devices in the market, and custom-sizing for more comprehensive testing.
And that’s it. I’ve used these tools and found them great. A lot of them are still developing (support is always welcome), but they’re still the best I found to be useful for my design purposes.
I think you will too.
Did you enjoy this post?
Never miss a blog post. Subscribe below to get more posts like this sent straight to your inbox as soon as they're published.