We haven’t talked much about web design in Mishës, but from now on I promise to write more articles related to this subject, which is the one I work in professionally. For this article I want to talk to you about adaptive design or better known as responsive web design.

I want to make clear that this has been my first experience, so far I’ve never approached adaptive design for different devices, but I have learned a few things and I want to share them with you.

To start, it’s good to clarify the term “Responsive Web Design“, this consists in managing to make a website to adapt to the different devices that is viewed in and that it displays well in all of them (whether it’s an iPhone, an iPad or any other mobile device), I highlight the phrase “make a website to adapt” because that’s what is looked for, it’s not a different version of the web, nor a mobile version, it’s just an adaptation that is performed to the site to achieve that the visitors from other devices get a better user experience.

Responsive design or mobile version?

This is one of the questions that everyone asks when they want their website to look good in a smartphone, my personal suggestion: If you have the resources (time and money), make a mobile version, that way you can guarantee an user experience that’s 100% satisfactory for the mobile visitors and does not suffer the two major disadvantages of responsive design, which I’m about to enumerate.

  1. A responsive version loads all the content of the regular version. If your regular site has a gigantic image in the footer and the mail slider loads 6 images of 500 px x 400 px, all if this will be loaded to the visitor accessing from his smartphone, no matter how much we hide those divs and the user does not see them.
  2. For responsive design, the main design of the site cannot be changed, or well, in fact you can change it entirely, but it’s not the ideal, because otherwise we will be returning to the initial point and we would be loading 2 pages into one, and showing one or another to the visitor depending on the device.

What device resolutions should the website be designed for?

When I started with my first responsive page, that was one of the questions I asked myself and I started looking online to see what were the recommended resolutions, I found 3 main ones: One for smartphones, one for tablets and one for large monitors. The smartphones size covers 480px and smaller resolutions, if I’m correct, the tablets size goes up to 940 px and from that point it’s all large monitors. So here’s where you use media-queries, which are conditionals that are used on the stylesheets, that’s where you say the browser through a code line which styles it needs to load for the visitor.

@media (max-width:480px) {

What we’re saying to the browser is: If the browser’s width is 480 px or less, then load the style like this. Then we can make one that says that if the browser’s width is 481 px minimum, then charge the style in a different color, or whatever we want. This is basically how media-queries work and that’s the essence of responsive web design.

My first responsive site

Based on what I have previously read, I started coding and the initial CSS ended up with 3 media-queries, however, I was not happy with the transitions that appeared between the different resolutions and therefore, the final stylesheet had 8 media-queries that performed small changes in order to achieve smoother transitions between devices. At this point I realized that something wasn’t right with the methodology that I was following.

New devices show up everyday, cellphones increase their resolution, tablet manufacturers produce different tablet sizes, TVs are coming with a built-in browser, anyway, at this pace we’re going to be updating our site all the time with new media-queries and even so, we will not be able to cover the whole range of resolutions that our visitors are using.

Recommendations for responsive sites

After the nurturing experience with my first responsive design, I changed the methodology for other pages. The first point was to design “Mobile First”, at first, the page I was doing was not conceived to be responsive, so I just did the version for resolutions above 960px, however, when I migrated this to responsive all the problems started to show, because the site was not created while keeping the rest of the users in mind. With “Mobile First”, you start by making the mobile devices site, then you make the wireframes of how the site’s going to look in the smallest resolution, then you move to the mid size and finish with the larger one (or as many versions you guys are going to be working with, I work with a max of 960 px, I’ll tell you why later).

At the time of coding, I stopped thinking about the 3 resolutions that were stucked in my head, this allowed me to create a more fluid site in which I only reached the media-queries that were strictly necessary, basically what I’m doing is using a single one to show all the information for all the resolutions, so I don’t care if the user access the site using the strangest resolution or if he shrinks down or enlarges the browser window, the site will always look good. What matters in this point is: If I’m loading an image of Y x Z for desktop, then why shouldn’t I show it on the mobile site as well?, after all the image is going to be loaded, so it’s just a matter of the image changing its size accordingly as the resolution changes (of course you need to keep control over certain elements).

This has been the most valuable lesson I learned from all this process, stop thinking about resolutions and start thinking about the user!.

Some nice examples of responsive design