couchable.co New? Start Here RSS Twitter

Responsive Design Tools For Speedy Development

Responsive Design Tools For Speedy Development

Responsive design is becoming if not isn't already a design standard. The focus of this post is tools, tutorials and templates to help you build designs faster. Reusing code, templates, tools, using frameworks, javascript and more, plus lots of other resources from around the web.

Responsive design is great and pretty straightforward once you get the hang of it. But the biggest drawback is the extra amount of testing and development time required to build out a site. There isn’t always a lot of major css changes needed going from say 1200 pixels wide to 960 pixels. But when you get down to 360 pixels inevitable your layout starts to fall apart and more development time is required.

So here are some tips, tricks and tools to hopefully speed up your development type. My goal, and I’m sure most of you are thinking the same thing, or should be, is to build almost every website from this point forward with at least a separate layout for mobile if not more.

CSS Frameworks

There is a little bit of a time investment to learn a framework but the ability to reuse code and come up with layouts that use simple content areas that adjust easily can really save you some time once you develop a responsive design workflow. I’ve found the trick, just like with email templates is to use common layouts and just spend the design time making those elements look good. Less time reinventing the wheel and more time designing what content you have.

The other week I put together a list of the better responsive css frameworks to try. If you haven’t tried one, or are thinking about getting into SASS or LESS now would be the perfect time.

Here is a nice article that can introduce you to using SASS for responsive design.

Pixels vs. Percents vs. EMs

This has been up for debate long before responsive design even came around. For fonts pixels was the standard but IE didn’t allow pixel based fonts to scale when enlarged in their browsers. Zoom still worked but if you want to be accessible Ems was a better although still clunky method. Jonathan Snook wrote a nice article highlighting the benefits of using REM for font sizes, which is new to CSS3. REM (root Em) is set to the root html element and not the parent. So there aren’t as many confusing issues with sizes compounding as elements are placed in side each other.

The same concerns happen with responsive design and different PPIs of the various resolutions of different devices.

Ultimately, for speeding up your development it comes down to finding a standard and sticking to it. Ems and the new REM is looking like the most accessible method so you may want to stick to that.

Here is an interesting article about the Goldilocks Approach for using Ems with your layouts.

Convert Pixels to EMs

convert pixels to ems

When dealing with large heading text across multiple views, Fit Text can be a nice solution worth looking at.

Menus

Creating your navigation is almost always the most time consuming part of doing responsive design. Here are some of the different methods available outlined by Brad Frost: Responsive Navigation Patterns. The best thing to do for seep is to find the methods other people are using successfully and do the same: Some of those methods are outlined in the links below:

Design Shack has a tutorial on Coding a Responsive Menu which adjusts pretty well.

Chris Coyer has a cool little method (and fast) of switching from a normal menu down to a select drop down for mobile phones, which happen to play pretty nicely with select menus. You can see it here: Convert a Menu to a Dropdown for Small Screens.

Here is one last tutorial that uses a combination of a couple different looks and works both with and without Javascript. The Filament Group came up with this well done tutorial: A Responsive Design Approach to Navigation.

Images

Large images can sometimes be tricky. Here is a nice php script that takes a lot of the fuss out of dealing with images: Adaptive Images. It resizes images based on the visitors screen size.

Another element people also want to add to their sites is a slideshow, yet scaling it can be difficult. Here is nice little (1kb) jQuery slideshow that is responsive.

Here are a few other slideshows in case that one isn’t going to work for you.

Using Meteor Slides for a responsive slideshow in WordPress.

Flexslider for you Drupal folks. Does more than just slideshows but it works for this purpose when you combine it with Views Slideshow.

Templates

Starting from scratch can be nice but takes a lot of extra time. There are a number of templates built for individual content management systems, blogging platforms and simple html templates that can get be a great starting point, especially if they are barebones without a lot of extra markup. 

Responsive Wordpress Templates

If you are going to build a blog you might as well use WordPress. There are already a number of quality responsive WP templates available for free. I also included a few premium templates that were worth looking at.

Responsive Theme

Nine different layouts to use to quickly put a site together with various content and sidebar layouts. A good place to start for simple sites that need to be responsive.

responsive wordpress theme

Themble Bones

A simple responsive theme to start with. It is built with the 320 and Up Boilerplate Extension.

Themble Bones

Foundation Theme

A responsive theme built with the Foundation Framework and the HTML5 Boilerplate built in.


foundation wordpress theme

Skeleton

Another responsive theme to take a look at. Fairly customizable and ready to use from the beginning.

wordpress skeleton theme

Responsive Drupal Themes

Still not a fan of Drupal but I’ve been plugging away at it. Here are some of the better Drupal 7 themes I’ve found that are responive. Some are good starter themes to build from and some look decent enough to use the way they are with a few small changes.

Omega Starter Theme

Built on the 960 grid system. Probably the most popular responsive base theme, next to Zen maybe.

Omega Drupal Responsive Theme

Zen Starter Theme

Pretty much the most popular Drupal starter theme. Lots of good developers behind it and constantly being updated.

Zen

Adaptive Theme

Yet another solid base theme to work with if your doing a lot of Drupal development.

Adaptive Theme

Other Responsive Design Tools

Here are some other tools that can help you out that I haven’t mentioned yet or didn’t fit into a specific category.

I haven’t included a lot of ExpressionEngine stuff because well, you don’t really need add-ons and themes for EE. But here is one little nugget to share: A Responsive Control Panel Theme.

responsive control panel for ExpressionEngine

Screenfly - Allows you to view your site at multiple viewports. A large list of mobile devices views to test.

Media Queries

Not necessarilly a tool but a nice way to see some well done responsive designs with each layout side-by-side. This helps those visual folks out there wrap their head’s around the different techniques you can use.

media queries

Anything I missed? What tools do you use to speed up development?

Read More:
some other posts you might enjoy or I thought where particularly relevant to the web design post you just read

A Responsive Design Workflow

Designing responsive website can take a little while to get used to because some of the layout techniques and the ways we’ve created mockups over the years are no longer practical. If you are accustomed to using Photoshop or Fireworks…

Read More

Using Responsive CSS Frameworks for Faster Development

Responsive design is cool and all. The shift from desktop to multiple screen sizes, both small and large, will continue but the problem of the increased development time associated with creating responsive designs can hurt. Especially, when you end up…

Read More

Easy and Simple CMS for HTML Websites

I think we’ve all been asked for it. Clients with real basic, static html websites that want to be able to update their own content. For those of us who use a more feature rich CMS this can be a…

Read More

Spread the Word

Subscribe to the RSS Feed or follow @couchable on Twitter

Have something to say? Leave A Comment Below

Most Popular:
the most popular posts of the year
Couchable Huh?
what this blog is all about

Couchable is a web design blog created by Tyler Herman. Not really updated anymore because I'm busy doing freelance design work and busy launching my little WordPress theme shop Real Theme Co. You can read a little more about my at my personal site Tylerherman.com