cult t t .

co m

http://culttt.co m/2013/10/14/create-respo nsive-web-applicatio n/

How to create a Responsive Web Application

by Philip Bro wn

It was not long ago that Responsive Web Design was the latest hotness. For a period you wouldnt see a new website launch that wasnt 100% responsive, even if the f unction of the website didnt 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 its 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 f irst application in that is going to be built f or the browser. Hopef ully 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 Im 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 doesnt f it with your approach, or you think certain aspects would be better tackled in a dif f erent way, f eel f ree to do what works best f or you.

Why responsive?
So why would I want to make Cribbb responsive in the f irst place? Well, I think responsive web design really shines f or 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. Its also f airly easy to strip away the unnecessary elements of the design to leave the content in an easy to digest f ormat. Secondly, I think web apps work really well using responsive design too. T hree web apps that do this particularly well are Twitter, Facebook and Dribbble. Part of my aim f or growing Cribbb is that I want content to spread on other social networks. So if someone clicks on a link f rom Twitter on their mobile phone, I want the resulting Cribbb page to look beautif ul. T his is only really achievable if I specif ically target this use case with responsive design.

My approach to responsive design

As I mentioned at the top of this article, its in my experience that almost everyone has their own unique approach to responsive design. When Im designing a responsive web application Im constantly thinking about the technical requirements of implementing a given design. Part of the benef it of being the person who not only creates the design, but also implements it is, you have an instant f eedback loop of what is possible and what is going to be technically dif f icult to implement. T his means you can quickly iterate through decisions in Photoshop without having the back and f orth with a developer. If you are primarily a designer, hopef ully this shows how valuable it is if you can also code. You dont have to be the person who actually writes the code, but it will dramatically increase your productivity if you can think like a developer.

Wiref rame f or dif f erent screen sizes

As I mentioned in How to wiref rame a web application, wiref raming is an essential step f or quickly iterating on an idea without the distraction of visual design. Bef ore you hit Photoshop or get into writing the code, f irst 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 dif f erent screen sizes. When you are designing a responsive layout, its important that you dont f ocus your measurements on any particular devices. For example, you shouldnt target an iPhone, an iPad and a desktop because these arbitrary sizes are not ref lective 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 f ind it easier if I have three mental checkpoints when moving f rom a large screen to a small screen. So with your chosen design, start to re-wiref rame it f or a tablet sized screen and a mobile phone sized screen. When you start this process you will probably f ind that your chosen desktop screen might not work very well at smaller sizes. T his is to be expected, so dont f eel bad about it as you can just incorporate your f indings into your current design.

Analyse each element of the page

When you move f rom 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 f all into one of the f ollowing 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 f rom 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 elements margin, padding and position change as the screen changes size? Will it jump at certain stages, or will it f low proportionally as the screen size changes? I usually like to have at least a general plan f or how each of the elements will react to the transition of the screen size. Of course, this is of ten 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 f or tackling this very specif ic design problem. Some people pref er to create responsive designs straight into the browser. I sometimes use this approach if what Im creating is very minimalistic like a simple blog or single page website. However f or the majority of the time, I still just use Photoshop. Many people are calling the downf all of Photoshop because it is not really suitable f or responsive designs. T his is very true, and there are some exciting new sof tware packages that are more tailored to this sort of work. However, f or me, I f ind 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 f irst 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 f olders 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 Im usually more interested on the User Interf ace rather than the User Experience, so Im f ine that Photoshop doesnt allow me to make the canvas responsive. Hopef ully if you have done enough research and put the work in at the wiref rame 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 benef its of being both the designer and the developer is that Im f orced to think about how Im going to apply the design in code. T his is a big advantage because I will typically already know exactly what CSS I need to write, and how Im going to structure my stylesheets so that I write DRY and clear CSS f or 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 f onts 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 wont design something that is going to rely on superf luous images to pull of f . Instead I try to do as much in CSS as I possible can. I will also try to only use icon f onts instead of individual icons. T his not only makes the website load quicker, but it also ef f ortlessly works on retina monitors because f onts are vector based.

Getting in to the browser

T he f inal 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 lif e. 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 f ront-end f rameworks ship with really good solutions f or creating a grid, in particular I like Bourbon Neat and Bootstrap. For bigger projects I will of ten use a ready made solution, but f or 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 f low as I imagined when the screen size transitions f rom really big, to really small. T here really is no point in even thinking about implementing the design if you cant nail this interaction with just the base elements. T his stage is of ten a lot of trial and error as I usually have to rethink certain elements. Its 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 f ront-end.

Conclusion
T here are many amazing benef its in creating a responsive website. I love it when I open a new website on my phone and it looks beautif ul because the design f eels native in its 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 lif e.

If your website or web application would benef it f rom being responsive, you should absolutely put in the time and ef f ort to make it so. Hopef ully this article will help you to do just that. T his is a series of posts on building an entire Open Source application called Cribbb. All of the tutorials will be f ree to web, and all of the code is available on GitHub.