Design & UX
Article
By Tara Hornor

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

By Tara Hornor
Last chance to win! You'll get a... FREE 6-Month Subscription to SitePoint Premium Plus you'll go in the draw to WIN a new Macbook SitePoint 2017 Survey Yes, let's Do this It only takes 5 min

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:

--ADVERTISEMENT--

  • 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?

Login or Create Account to Comment
Login Create Account
Recommended
Sponsors
Get the most important and interesting stories in tech. Straight to your inbox, daily.