Table of Contents
Responsive web design became a well-known term. Even some people outside web design, or design industry, are familiar with it. There is a problem. A lot of web designers are approaching responsive web design in the wrong way. Today, we will start by taking a look at this old and wrong way of doing responsive web design. Next, we will take a look at more polished way of doing responsive web design. Then, we will discuss how to make responsive web design finally great.
The old way of doing responsive web design
Chances are that a lot of you will be familiar with following scenario. Let’s say you are a web designer and you just found a client who is looking to hire you. Your job is designing a small website for his business. It shouldn’t be too fancy or overly decorated. Your client is more conservative and likes to keep things simple and clean. Since you currently have nothing else to do, you decide to accept the project and start right ahead. Let’s assume it is also well-paid.
You start with answering the “Why?”, “How?”, “What?” questions. Then, you do some research to find out who are you designing the website for. Hint: it is not your client. When you are done with that, you fire up your favorite graphic editor and start working on the visuals. You start with creating a design for desktop. And, since frameworks such as Bootstrap are quite popular, you will use that as your starting point.
After you finish the “desktop” version of the website, you are relatively satisfied with, you present it to your client. Fortunately, your client is happy. She likes how the design looks and feels. She might have some objections or suggestions. When you are done with implementing those small changes you contact your client and review it once again. This time, your client has no objections. The design is simply perfect. So, you hand over the design to your client and get your money.
Truth to be told, this is a very condensed version of how the reality looks like. Usually, there is much more iterations, fixes and polishing. However, this story, although very condensed, is still good enough for the purpose of this article. So, we will go with it.
The problem with the old way
Consider the current state of the web. And, think about the story above from the view of responsive web design. Have you noticed that something is wrong here? Was there something wrong with our web design process? No. We went through the discovery phase and we did the research as well. Was there something we forget in the third step, the web design phase? Yes, you are right on the spot! In the story above, we designed only the “desktop” version of the website.
What is the point of doing responsive web design if we design only layout for desktop? That is similar to building a private jet and think our client will be able to use it also as transportation plane. Or, that she will be able to use it for freight transport. Sure, she may try to use it this or that way. However, whether it will work is a different question. The problem is that we designed the plane as a jet. We designed it with specific characteristics and for specific conditions.
In case of the website, we designed it so it works and looks great on desktop. What will happen if someone visits the website on device other than desktop? For sure, our client probably hired skilled web developer who managed to create “mobile” version of our design. However, this is only our assumption. Will this “mobile” version provide great and pleasant experience as the desktop version we designed? Based on my personal experience, probably not.
These “mobile” versions are usually created in a hurry. What’s worse, they are usually created with the goal to have something that works on other devices. It doesn’t matter how well it works. If it works, it is good enough. Case closed. Have you noticed that when developer builds this version, he is in little to no contact with the original designer? Why should you pay a doctor if you can buy cheaper painkillers? Pain is gone and case is closed. Well, at least it looks that way.
Whose fault was that?
Let me quickly address one thing. Whose fault was it to never create the design for the website for all resolutions? Without a doubt, it was definitely fault of the designer. Nobody can argue with that, at least not with success. Client hired someone who he thought is an expert. Then, she thought that she doesn’t have to double-check designer’s work or that she should consult the result with another designer. When you hire an expert, you assume he will do the whole work.
It was responsibility of the designer to consider the devices people might use to visit the website. And, to create designs for the website for those devices as well. It was never supposed to be the job of a developer to take the “desktop” version and “use his imagination” to put together something that will work outside the desktop. I’ve seen a number of “designers” who liked to use this exact approach and still called it a responsive web design.
First, they designed the layout for desktop. Then, when client accepted it, the work was done for them. If they worked directly with the developer, their suggestion was to “use his imagination”. Let me make two things clear. First, designing a layout for a website for a desktop is not a responsive web design. On the same note, designing a layout for a website for a mobile is not a responsive web design. Responsive web design is not about designing for one device, but the whole spectrum.
And, the second thing. It is job of a designer to design the layout for various devices and resolutions. Some people miss the obvious connection between the word “designer” and “design”. For them, “design” and “coder” or “developer” somehow looks like a closer match. Well, you don’t need to use RegExp to find out that it is not. We all know the question: “Should designers code?” What about this question: “Should coders or developers design?”
So, whose responsibility it is to design a responsive website? Meaning, designing layouts for various devices and resolutions? It is the responsibility of a designer. Whose responsibility it is to rewrite it into code? It is a responsibility of a coder or developer. So, coders and developers, the next time someone gives you layout for one device and suggest “using your imagination”, here is what you should do. Tell that person that you are not a designer and this is not your job.
The old way in a new suit
Fortunately, this problem with these designers who think they are doing responsive web design, while they are not doing it, is in retreat. Unfortunately, we are still talking about doing responsive web design the old way, just in a new suit. Meaning, developers are not necessarily using their imagination to bend the design to fit other resolutions. Some designers started to pursue a true responsive web design practice. However, the problem is still here and we are far from perfect.
So, the good news is that developers are no longer required to design layouts. The bad news is that many designers are still basically bending one layout to fit different devices and resolutions. Please notice that I am not talking about every web designer, just some. These web designers are taking layout for desktop and squeeze it until it fits specific resolution. Then, they repeat this process a couple of times until they cover what we can call “default spectrum of devices or resolutions”.
As a result, designers now have multiple layouts they can present and hand over to their clients. And, clients have something they can hand over to their developers instead of providing them with “desktop” version and words such as “the rest is up to you”. In many cases, this is how responsive web design today actually looks like. I have to admit that this “old way revisited” or “old way redesigned” is a much better than it was before, at least for following two reasons.
First, designers are really doing their job and design the layout for multiple devices. This means that clients are closer to getting the value and results they are paying for. Second, developers no longer had to think so much about design. Instead, they can focus solely on writing clean and optimized code. Now, there is nothing preventing developers from dedicating their attention to this, and only this, task. Maybe except the clients. However, this situation is still far from perfect.
Let’s summarize it. Designers are designing layouts for different devices. Well, they are bending and squeezing one layout to fit it to different screens. Yet, we can call this doing responsive web design. Well, at least with some reserve. Next, developers are then taking these layouts and use them to build responsive websites. It looks like everyone is doing his job and clients finally have a reason to be happy. They pay for responsive web design and they are getting it. Can we do better?
The new way of doing responsive web design
Yes, I am convinced that we can do better, much better. We can take responsive web design to another level. In order to do so, we need to revisit our web design process. What I want to suggest is this. In the old way 2.0 we usually think about different devices or resolutions as points on some metaphorical scale. What if we approached these points as separate entities? And, what if we started to design for each entity almost from scratch?
Different devices, different conditions, different goals
Let me explain what am I thinking about. We like to see different devices only as different resolutions. Just think about the terms we use to communicate: mobile, tablet, desktop. Or, some variants of these terms. The problem is that this does not reflect the reality. Each of these terms conveys more than just a number of pixels we can then target as a width, or height. Unfortunately, we are often not willing to realize this.
When we talk about mobile, we talk about specific conditions and experience. On the other hand, when we talk about desktop, the conditions, and experience, are completely different. Even in the case of tablet device can conditions and experience be different from that on mobile device, such as smartphone. In plain English, we are using these devices in different places, with different goals and with different constraints. By the way, let’s not forget modern TVs connected to the Internet.
Take a moment and think about situation when you use your mobile phone, tablet and desktop to access the Internet. Do you always have the same goals? Do you always have the same amount of time? And, what about the quality of your Internet connection? Are you always on high-speed broadband, wifi with unlimited data? Are all these scenarios really the same? The answer is no. Conditions are likely to be different as well as your goals. Yet, we design like this was not the case.
What if we approached each layout (mobile, tablet, desktop, etc.) as independent website? Because, when you think about the conditions, goals and experience, it is not that far from the truth. What if we start to treat responsive web design in this direction? Will it take more time and energy to design a responsive website? I am sure it will. Will our clients protest as they will not want to pay for this “additional” time? I know they will.
Excuses
I think that we should put aside these potentially higher demands on your time and energy and higher bill for your client for a moment. In the end, you are getting paid for delivering your best work. And, if you do deliver your best work, you deserve to get paid adequately. If you work with cheap clients who are not willing to pay for quality, that is your decision. And, it is up to you to change it. Don’t blame others. You get only what you are willing to accept.
This is the harsh truth. A lot of clients doesn’t care about the way your design process works or why you do certain things in a certain way. They just need someone skilled in responsive web design who can deliver solid results. The rest is up to you. You have to find a way to sell your solution (design) for the price you are convinced is adequate. Otherwise, you will have to negotiate or find different client. So, how can you sell this new way of doing responsive web design?
Long-term over the short-term – how to sell the new way
Let’s answer the most important question. How to sell this new approach to our clients? My answer is this. First, explain your client how different the situations we use specific device are. Go ahead, use this article, or its very condensed version. Second, trying to explain why it is reasonable to pay more for responsive web design usually doesn’t work well. In the end, we are still talking about one thing–it will cost more. In other words, we are still talking about the downsides.
This is something clients don’t like to hear. What we should do instead is making it positive. Stop talking about the time it will take to design each layout almost for scratch. Talk about a much better experience you will be able to create for all the people visiting the website. Then, you can mention how this will benefit your client from the long-term view. Happy people are more likely to stay on client’s website for longer and visit it again in the future.
Happy people are also more likely to spend their money on products and services your client is selling. The same is true for sign ups and referrals. People are more likely to do what do you want if you make it easy and create pleasant experience. When you think about every variant of the layout as independent website, and design it from the ground up, you are more likely to achieve this. At least, this is what I am wholeheartedly convinced about.
So, let me summarize it and give you a simple answer. Describe the RIO (return on investment) your design will have. In other words, show your client that this approach will bring him more benefits in the long term and that these benefits will outweigh short-term negatives. This is how you can sell this new and better way of doing responsive web design. Lasting future benefits over questionable short-term negatives.
Closing thoughts on the new way of doing responsive web design
Thanks for sticking with me and reading to this point. It is easier to read a quick 5-minute article or short tutorial than more theoretical article like this one. I appreciate it, a lot. It is also great to see web designers what have the courage question old ways of doing things and try new approaches. We, web designers, are the ones who can change how we do responsive web design, and the web design industry itself. As a consequence, we make the whole Web better.
We should remember that the website we build are used by people in various conditions and on various devices. This is something can’t predict. However, we can a lot to create experiences that will delight people visiting our websites. Is this the best way of doing responsive web design? Who knows. However, I believe that it is still far better than the old way, the practice of bending or squeezing one layout to fit different widths and heights.
Responsive web design should deliver great experience that feels natural, regardless of the devices and the size of its screens. People should not suffer worse experience just because they are using smartphone or tablet instead of desktop. This is what I think a real responsive web design is about. Great and pleasant experience across all devices. Let’s make this idea reality.
If you liked this article, please subscribe so you don't miss any future post.
If you'd like to support me and this blog, you can become a patron, or you can buy me a coffee 🙂
Become a Patron
