A few things about responsive web design you need to realize.
Before you start to struggle with responsive web design, there are a few things which I’d like to share with you that can help you make things better and easier.
1. Stop using words like mobile, tablet or desktop
It’s very common and also natural to differentiate designs with titles like mobile layout, tablet layout and desktop layout. But in reality there are tablets that will use your mobile layout and also tablets that will use desktop layouts. Also very often you can get the tablet layout in your browser just because you are using a smaller window, etc…
Yes, you can use these titles as an abstraction and explain to your clients or colleagues that it’s just an abstraction, but trust me, after a while all of you will forget this fact and that’s where the problems start.
It happened many times that our goal was to have some specific functionality only on desktops, and then optimize this functionality for tablets and smartphones. Then, when drawing higher resolution wireframes, we did not realize that our desktop functionality would also appear on high resolution tablets, where it wouldn’t work properly due to touch controls.
Also, clients would sometimes freak out about the “mobile” layouts on their computers because they would shrink their browser windows below 480px.
So how should you name your designs and make sure that everyone knows what you are talking about?
Well, it's actually a very easy task because you can use your breakpoints. For example, you have breakpoints 320px+, 640px+ and 960px+, and you want to name your designs for a website dashboard. The results would be dashboard-320, dashboard-640 and dashboard-960.
The reason why breakpoints are good for naming your designs, is that they represent specific resolution ranges and not specific devices. If you do not want to be that specific you can also use the good old S (small), M (medium), L (large) naming convention.
And yes, do not forget to distinguish between touch and non-touch controls. Of course you don’t want to have 6 different graphic designs for one screen. So keep this in mind when designing for lower resolutions. Seriously, don’t fail to remember this, because it’s at least as important as the PIN code to your credit card.
2. Design for situations, not for devices
If you want to create an app, website or any other product which should be usable across different devices, you have to stop thinking about devices. Instead, imagine situations in which users would use your app, how they would use it, and what functionality they will have available.
The fact that some device screens are small does not mean that you should create a shrinked design with smaller font sizes in order to display as much information as possible.
The truth is that when holding a phone in your hand, you need larger buttons to be able to tap, larger text, so that you can read it with ease, and a design with a lot of space and air to breath. Otherwise you could get confused.
You can achieve these “breathable” designs by omitting functionality for certain situations, where it would be pointless. Focusing on user needs in a certain situation can even help you realize the most important and the most valuable functionality in your product.
3. Expand, not shrink
It doesn’t matter if you design “mobile first” or not, you should always start your designs in the resolution as small as possible for a certain breakpoint.
So what does this mean? Well, let’s say you are going to create a design for the resolution range 768px to 960px. The width at which you design your document should be 768px.
See the picture below in order to understand my point:
This practice can help you a lot in the wireframe and design phases, and have significant impact on the developing phase.
As you can see, it is better to have some white space in wider resolutions than trying to fit something in a resolution, where it simply cannot fit. You can try a smaller font size, but you don’t know how small it should be, without trying it in the smallest resolution possible.
You can also say that it’s fine, and suppose that developers will find out something later with CSS. But at the end of the day it will cost you more time and it will result in more work (or the outcome would be ugly) than if you would think about it earlier in design phase.
4. Everything is made from the same matter
This is probably one of the most important things to realize when working with responsive web design and trying to avoid getting yourself or your colleagues into trouble.
It happens that when you create designs for different resolutions, you start from scratch and create a layout which perfectly fits certain resolution, but the connection between these designs is missing.
You have to realize that the HTML code is the same on mobile, tablet, laptop, or a smart watch and the CSS is used to display various designs.
The fact is that there are some basic rules and boundaries which should not be broken. For example, imagine you have a box containing a photo and the name of some person, and for a smaller resolution, you take the photo and put it outside of that box.
Regarding code, the photo cannot jump out of that box. Otherwise you broke the rules and the photo has to be in the code twice or hacked with CSS. And that is something you want to avoid in good design.
I hope these few things will help you on your journey towards responsive design. Also, I hope that there will be more responsive websites of great quality in the near future.
Vladimír Pittner, Front-end Developer
Lighting Beetle
