Forget Mobile Sites! Time for a Responsive Web: 11 Responsive Design Resources

Tara Hornor

This may come as a surprise coming from a designer, but I am done with mobile websites. It’s time we get away from creating two entirely separate designs – one for desktop browsers and one for mobile sites. If we really want a web that is accessible across all devices, we need to put aside technology that divides.

I’m ready to admit that responsive web design is not for everyone. There will always be a few niche situations that call for desktop-only delivery of content. These should be outliers, though. In the vast majority of cases, website users want to simply get on your site, get the information, and move on to their next point of interest. But, we seem to have bought into the cumbersome, problematic process of detecting mobile browsers and forwarding mobile users to a separate site.

This is counterproductive on many levels:

  • Two separate designs must be maintained and updated. They can easily fall out of sync or out of date.
  • Not all content is generally available to mobile users compared to desktop users.
  • Often, two distinct sets of content must be maintained.
  • User-agent detection doesn’t always work, so the wrong site gets delivered.

What Are My Options?

You have three ways to attack the problem:

  1. Stick with the separate mobile site, since this is likely where you’re currently at right now anyway.
  2. Design for flexibility, but don’t create a mobile-unique experience.
  3. Design a responsive website that adapts based upon screen size.

The last option is my personal favorite and there are lots of tools available today to help you design a site that responds to users, but delivers the same content.

What Changes with a Responsive Web Approach?

Mostly you’re going to have to dump any web technology that doesn’t work on a mobile browser. This means that some jQuery and all Flash probably won’t work anymore for you. Minimalism becomes the primary methodology, and you’re going to have to think in terms of keeping your payload light. Avoid those 1MB PNG files, for example (small tear… they’re just so pretty!).

Tools for a Responsive Web Design

Building responsive websites can be a significant challenge, because it always starts with the site visitor and their needs. There is no one-size-fits-all approach, and if you’re the designer, you’re probably going to have a hard time selling this concept to your clients who want a glossy, flashy, graphic-heavy website that is tailored for each and every browsing device. You don’t have to give up creative designs, though. After all, this is about site architecture, not content.

The following are some tools that I’ve pulled together to get you well on your way to designing sites that are responsive to users, so you can get away from this dualistic approach of building and maintaining two separate sites. Whether you have a WordPress site, some other CMS, or just want to take your design methodology towards responsiveness, these tools will get you on the right track and open your mind to some new ways to handle responsiveness. All of these themes and tools are free.

Responsive WordPress Themes

If you’re like me, you’re managing websites running on a CMS like WordPress. Instead of a redesign, consider starting with one of these base themes and modifying it to fit your design and brand needs. The themes below are free, but don’t forget to check out premium themes that may get you a lot closer to your desired aesthetics and responsive functionality.

Renova

I like this responsive theme because it’s so easy to modify. And, it’s already stripped down, so it’s a lot easier to start adding my own brand.

Get It | Demo


Yoko

Another minimalist design that incorporates images that resize based upon the screen size. It’s simple and easy to modify.

Get It | Demo


Buttercream

Getting away from a minimalist design, this is an excellent example of a responsive theme with lots of character.

Get It | Demo


Design Tools

If you need some baseline tools for building your own responsive website, these will get you on the right track. Most of these are geared toward a pre-built system that you can use as a starting point for fast deployment of your site.

Gridless

A slick system for responsive sites, Gridless is a great bare-bones set of files that’s ready to go. There’s literally a blank index.html file to start with, linking to the appropriate CSS and JS files, and that’s it. The designs are very responsive and backwards compatible as well.

Get It | Demo


Get Skeleton

If you want to start with a solid set of CSS and HTML compliant files, Get Skeleton is a really nice place to start. Just start adding content. It doesn’t get much easier and Get Skeleton performs well on older browsers.

Get It | Demo


Adapt.js

So, maybe you don’t want to start over with a template like Gridless or Get Skeleton. Adapt.js is a very small JS file that checks the width of the screen – even after a resize such as rotating the screen – and delivers the content as needed. The advantage is that you can style for any screen size, allowing you to make adjustments for any number of mobile devices and screen widths.

Get It | Demo


Testing

So you’ve got your design ready, how can you be sure it’s going to work? Here are a few testing tools that you can use to make sure your design functions responsively in the real world.

Responsive

Just type in the URL and see how the design reacts to various screen sizes. It’s easy and device agnostic.

Use It


W3C MobileOK Checker

The source of all things HTML, W3C is home base for validation testing, and their MobileOK checker makes it easy to make sure your responsive design works and will be supported.

Use It


Test iPhone

It’s pretty straightforward – if you want to test how your site will work on an iPhone, this is a great little site. You have to actually type in the browser of the iPhone, but it does a great job of emulating the interface.

Use It


iPadPeek

Like Test iPhone, iPadPeek lets you test how iPads will interpret your design.

Use It


Opera Mini Simulator

Opera Mini is a very popular browser on very small phones and is used almost exclusively in developing areas of the world (it’s also in a number of well-developed countries as well). It’s always worth testing your design on this device, especially if you’re using any JavaScript.

Use It


What tools and methods are you using for responsive web design? Would you rather just have two versions of your site to maintain so you get the exact design you want?

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • Elise Hietikko

    Thanks for explaining Adapt.js, that sounds fascinating. Why wouldn’t everyone just use that instead of the more labor intensive Media Queries? Any idea what percentage of browsers don’t work with Adapt.js? I understand that Apple (maker of iPhone and iPad, etc.) does not support Flash anymore (i.e. Adobe maker of Flash), but what’s the scary thing about javascript? I mean sure, not site essentials, but…?

    Thank you!

  • http://baffleinc.com/ Harley

    I also find http://responsive.is/ great for all mobile testing. You can change the viewport to mobile/tablet portrait/landscape and average computer size. Great article!

  • http://risejudah.com Van

    A great tool for responsive design prototyping is:
    http://foundation.zurb.com/

  • Tony MacFarlane

    While I applaud the work being done in responsive design, I gotta support Jakob Neilson’s premise that mobile technology is still too young for responsive design. Users are still more familiar with app design for mobile, and a set of standards have not yet evolved. Heck, we still are not sure what websites mobile users gravitate to, or what features they tend to use most. So, I have to agree with him, and say that if there is something you want your visitors to use on your site, make an app.

    • http://www.cssian.com Kevin M.
    • FreddieB

      I suppose the problem I see with using apps is that which OS do you build the app for? Or would you build an app for every mobile OS? Just the majors would mean 3 different apps, without all of the other OSs. Seems like a lot of duplication when one responsive site will suit all the different operating systems.

      I’m sticking wirh responsive!

  • Dave Van Amburg

    Thanks for an excellent article that: states the issue/problem, presents your solution and (trumpets sound here) offers some concrete suggestions about tools to use.

    Well done! I am passing this on to fellow designers and some clients who understand enough about web design to ‘be dangerous’, but who refuse to acknowledge that it is truly time to quit investing in ‘buggy whips’.

  • Wayne Patterson

    Missing from your test suite is Adobe Shadow a must have.
    http://labs.adobe.com/technologies/shadow/

  • Colin

    I think Twitter’s Bootstrap is an awesome framework too. http://twitter.github.com/bootstrap/

  • makcie

    Thank you – great article!
    I am missing in the list of´responsive design resources YAML4 CSS Framework – a modular CSS framework for truly flexible, accessible and responsive websites.
    Please see the demos and the documentation
    on the website yaml.de

  • http://georgelangley.ca George Langley

    The one I’ve started playing with is cssgrid:

    http://cssgrid.net/

    Seems promising so far.

  • Krishna

    Twitter is very good. The plugins that come along are very useful.

    http://twitter.github.com/bootstrap/

  • http://www.handcraftedwebsites.co.uk CottageStuff

    Just wanted to second George’s recommendation of Andy Taylor’s CSS Grid for fluid responsive layouts. And it is easy to tweak to narrow the rather oversize gutters and get rid of the “last” class (which strikes me as unneccessary).

  • http://www.benjaminchirlin.com Ben C

    Don’t forget Bootstrap. It’s like Get Skeleton with a whole bunch more frame-working tools built in (JS, CSS, etc) if you want something even more ready to go. The newest version is adaptive to boot (pun intended)!

    http://twitter.github.com/bootstrap/

  • Roger

    I’ve tried bootstrap from twitter and it is worth to check it out.
    By the way, great post!

  • http://www.media4u.us Kolyan

    Btw, someone told me that in Japan during some Universities test, kinda IQ, student will be asked to describe a subject or event in 2500 words, then in 500, then in 50 and then in 5. I think thats the philosophy behind responcive mobile design but still someone has to make a decision WHICH part will be shown FIRST. So designer or content manager still will be strapped to monitoring and tweaking “as needed”. And its freeking rediculous to pok over tiny screen instead of simply collect and pass a link to ur email and open it at home or at work via decent sizable screen. And why would someone looking for a jewelry during bus ride? Get damn 10″ tablet at least, or “olegoody” laptop, forget ur pinhole-viewable calling gizmo.

  • http://notagrouch.com/ Oscar Gonzalez

    What about the whole idea of loading all images and elements at full size… even for mobile devices. How do we avoid that? Seems that even if I hit the site on a mobile device, I will have to wait for the full sized header image for example, to load… even if it displays at the right size… that could be a lot of loading time right?

  • http://www.grahamrobertsonmiller.co.uk/ Graham Miller

    Can you please add http://www.responsivegridsystem.com to the “Design Tools” section? It wasn’t around when you made your list…

  • http://www.soundabout.net David

    Hi Tara. Thanks for this resource. I run several websites and find the whole mobile/desktop compatibility issue a nightmare. The tools you suggest will at least make my problems easier. Excellent!