How to create a Responsive Web Application

Oct 14, 2013

Table of contents:

1. Why responsive?
2. My approach to responsive design
3. Wireframe for different screen sizes
4. Analyse each element of the page
5. Design tools
6. Thinking about assets
7. Getting in to the browser
8. Conclusion

It was not long ago that Responsive Web Design was the latest hotness. For a period you wouldn’t see a new website launch that wasn’t 100% responsive, even if the function of the website didn’t really merit it.

For the most part, I think making your websites responsive is a good idea. If you are able to provide an experience that adapts to it’s environment, then that is a good thing in my book. I think some websites end up over doing the whole responsive thing, but each to their own.

Cribbb is a “web first” application in that is going to be built for the browser. Hopefully one day I will get around to creating a native mobile application, but until that point, I will have to make do with it being responsive.

In this post I’m going to be walking you through how I go about approaching and building a responsive design. When it comes to this sort of thing, everyone seems to have their own approach. So if this doesn’t fit with your approach, or you think certain aspects would be better tackled in a different way, feel free to do what works best for you.

Why responsive?

So why would I want to make Cribbb responsive in the first place? Well, I think responsive web design really shines for two types of websites.

Firstly, content websites really work well in responsive design because the use case of someone reading an article is completely plausible. It’s also fairly easy to strip away the unnecessary elements of the design to leave the content in an easy to digest format.

Secondly, I think web apps work really well using responsive design too. Three web apps that do this particularly well are Twitter, Facebook and Dribbble.

Part of my aim for growing Cribbb is that I want content to spread on other social networks. So if someone clicks on a link from Twitter on their mobile phone, I want the resulting Cribbb page to look beautiful.

This is only really achievable if I specifically target this use case with responsive design.

My approach to responsive design

As I mentioned at the top of this article, it’s in my experience that almost everyone has their own unique approach to responsive design.

When I’m designing a responsive web application I’m constantly thinking about the technical requirements of implementing a given design. Part of the benefit of being the person who not only creates the design, but also implements it is, you have an instant feedback loop of what is possible and what is going to be technically difficult to implement. This means you can quickly iterate through decisions in Photoshop without having the back and forth with a developer.

If you are primarily a designer, hopefully this shows how valuable it is if you can also code. You don’t have to be the person who actually writes the code, but it will dramatically increase your productivity if you can think like a developer.

Wireframe for different screen sizes

As I mentioned in How to wireframe a web application, wireframing is an essential step for quickly iterating on an idea without the distraction of visual design.

Before you hit Photoshop or get into writing the code, first you need to work on your ideas on paper. Trust me, nailing your ideas on paper will save you lots of time trying to work out problems in Photoshop or in code.

Once I have my chosen design, I will start working on it at three different screen sizes.

When you are designing a responsive layout, it’s important that you don’t focus your measurements on any particular devices. For example, you shouldn’t target an iPhone, an iPad and a desktop because these arbitrary sizes are not reflective over all the possible devices that could access your website. If Apple were to randomly change their screen sizes, you would also be screwed overnight.

With that being said, I do find it easier if I have three mental checkpoints when moving from a large screen to a small screen.

So with your chosen design, start to re-wireframe it for a tablet sized screen and a mobile phone sized screen. When you start this process you will probably find that your chosen desktop screen might not work very well at smaller sizes. This is to be expected, so don’t feel bad about it as you can just incorporate your findings into your current design.

Analyse each element of the page

When you move from a big screen to a little screen, you are going to have to make some tough decisions on the placement and hierarchy of the elements of the page.

In the majority of all responsive designs, elements usually fall into one of the following buckets:

• Important - Become 100% with of the screen
• Less important - Tuck under more important elements vertically
• Not important - Either sit at the bottom of the vertical stack or are hidden completely from the view

Once you have decided on the hierarchy of your elements, it is also important that you think about how each element will react as the screen gets smaller. By this I mean, how will the element’s margin, padding and position change as the screen changes size? Will it “jump” at certain stages, or will it flow proportionally as the screen size changes?

I usually like to have at least a general plan for how each of the elements will react to the transition of the screen size. Of course, this is often hard to predict without actually writing the code to see it happen, and so even just a general idea is better than nothing.

Design tools

Responsive design is certainly not an entirely new concept, and so there are new and emerging tools for tackling this very specific design problem.

Some people prefer to create responsive designs straight into the browser. I sometimes use this approach if what I’m creating is very minimalistic like a simple blog or single page website.

However for the majority of the time, I still just use Photoshop. Many people are calling the downfall of Photoshop because it is not really suitable for responsive designs. This is very true, and there are some exciting new software packages that are more tailored to this sort of work. However, for me, I find working in Photoshop allows me to get to the point of a design that I am happiest with the quickest.

My usual approach to this sort of thing is to set the canvas at the first size of the screen so I can work on the design at the desktop level. I will then either create new documents, or sometimes just new folders within the same document to create the design at the three major screen size checkpoints that I mentioned earlier.

By the time I get to Photoshop I’m usually more interested on the User Interface rather than the User Experience, so I’m fine that Photoshop doesn’t allow me to make the canvas responsive. Hopefully if you have done enough research and put the work in at the wireframe stage, you can concentrate more on the visual aesthetic in Photoshop rather than solving design problems.

Thinking about assets

As I mentioned earlier, one of the benefits of being both the designer and the developer is that I’m forced to think about how I’m going to apply the design in code. This is a big advantage because I will typically already know exactly what CSS I need to write, and how I’m going to structure my stylesheets so that I write DRY and clear CSS for my entire website.

When you are still at the design stage, you should also be thinking of what assets you are going to need to be able to create the design in the browser.

By this I mean, what images, icons or fonts are you going to need? Typically I will aim to get this as low as possible so my website is not very resource heavy. For example, I won’t design something that is going to rely on superfluous images to pull off. Instead I try to do as much in CSS as I possible can. I will also try to only use icon fonts instead of individual icons. This not only makes the website load quicker, but it also effortlessly works on retina monitors because fonts are vector based.

Getting in to the browser

The final stage of my creating a responsive design process is to get into the browser to make sure everything will work as I imagined. As I mentioned above, the real litmus test is when you see it working in real life.

First I create a responsive grid that will allow me to position elements on the page and have them react to their changing environment. A lot of front-end frameworks ship with really good solutions for creating a grid, in particular I like Bourbon Neat and Bootstrap. For bigger projects I will often use a ready made solution, but for smaller projects I usually just create my own grid system. If you are new to the concept of grids, take a look at those two ready made examples to see how they work.

Next I create empty div elements and set their width and height to represent the elements of my design. I write just enough CSS media queries to make sure that each element will flow as I imagined when the screen size transitions from really big, to really small.

There really is no point in even thinking about implementing the design if you can’t nail this interaction with just the base elements. This stage is often a lot of trial and error as I usually have to rethink certain elements. It’s hard to create a responsive design and not have “awkward” stages in between transitions.

Once I have all of the main elements stubbed out and working correctly across all screen sizes I can begin actually creating the front-end.

Conclusion

There are many amazing benefits in creating a responsive website. I love it when I open a new website on my phone and it looks beautiful because the design feels native in it’s environment.

However, I think a lot of people just jump straight into creating the design and writing the code without really thinking about how the design is going to work in real life.

If your website or web application would benefit from being responsive, you should absolutely put in the time and effort to make it so. Hopefully this article will help you to do just that.

This is a series of posts on building an entire Open Source application called Cribbb. All of the tutorials will be free to web, and all of the code is available on GitHub.