Doing Responsive Design, but Doing it Wrong

I don’t do a lot of front end. Most of the time I’m doing backend, and database related stuff with php and MySql. I have a draft about my complaints regarding php, but I will finish that later. Today I want to rant about responsive web design.

When it comes to responsive web design, I think we’ve made a lot of mistakes. I remember my first attempt at doing responsive web design. It was awful, but I quickly realized that I was doing it wrong. The problem, I believe, is that none of us really knew how to do it, and we were learning from people, who, like us, didn’t have any idea of what they were doing. I remember reading articles that talked about the iphone resolution, the ipad, resolution, portrait mode, landscape mode, etc. Few of them even bothered to mention other devices. Quickly, responsive design became just another way of saying iPhone/iPad optimized design.

Being a firm believer that the web should be for all, that really touched a nerve. I’ve always hated the fact that designers give too much attention to apple products, and neglect the rest of the market. Regardless of the market share of apple products, designers should not be neglecting the rest of the market.

I want to make a little parenthesis here to mention something I read a few days ago that really made me think. At a forum, someone was complaining that a certain thing was not working on IE, and he said “Don’t tell me to use another browser. IE users are as important as other browser users”. Not IE 6/7 users though, they should be burnt with fire.

I wanted to make that little parenthesis there because the same thought can be applied to the rest of users. The fact that I don’t use an iPhone doesn’t make me a less important user to your site. The web was meant to be inclusive, not leaving out anybody just because they don’t want to or can’t buy a certain device.

I don’t think we should provide support for every possible device/platform. There are moments when support simply needs to be dropped in order for technology to continue moving forward. We don’t support IE 6 anymore. We barely support IE7, but don’t go out of our way to make it work, and look the same as modern browsers. IE 8 is going to be out of support soon too, so this is not about supporting all the things, but rather supporting as many users as possible.

One of the things that I think are wrong with responsive design is the idea of breakpoints. A user in StackOverflow goes as far as saying:
“960 x 800 x 768 x 640 x 480 x 360 are the sizes you must follow for responsive web design”
Please notice that “must”. I think this is the worst answer I’ve seen in all my research on responsive design.

Breakpoints are a bad idea because they assume certain sizes in a world of ever increasing device sizes. We have huge screens that are widely used with massive resolutions, and we have small screens that are also widely use with tiny resolutions.

Sitting on your corner of the San Francisco cafe that you like to frequent, it is easy to forget about the rest of the world. You see people on their iPhone, their iPad, and mac book airs, You assume it is the same everywhere else. So, why bother supporting other devices right?

On the other hand, if you like to go to Tom n’ Toms in Koreatown L.A., you will begin to think you should support the latest galaxy phone, and huge-screen laptops.

The point is that no matter where you are, it is easy to forget about the rest of the world. There is people in less modernized cities using cheap smartphones with tiny screens. I’ve seen many phones, of who know what brand that run android, and have small screens. A lot of these run on Metro PCS, so you know that their users have internet access, and they are using it. I wonder how your beautiful site with preset breakpoints looks on those phones.

People say you should design mobile first. Has anyone really done that though? And for that matter, what does mobile first even mean? Does it mean small screens? low bandwidth? low processing power and memory? Or is it all of the above?

Have you ever started a design at 350px wide? How did that work for you? Is mobile first really a good idea? Who knows. All we know so far is that we are trying to do responsive design, and many are doing it wrong.

The fact that devices all have different resolutions hints us that breakpoint-based responsiveness is not a good idea, but there are times when you want to have that. My advice is to stop thinking in terms of breakpoints, and think in terms of intervals. Rather than trying to make your site look good at 800px wide, make it look good at between 500 and 800px wide. That way you end up with a site that looks good on any resolution.

What is the difference?
Think of a site that has the following breakpoints:
1500 – max
1024 – it was popular a few years ago
800 – some tablets, and landscape mode smartphones.
600 – some smartphones
400 – older phones, or the Metro PCS ones I was talking about.

This site will look good at those resolutions, but what would happen if there is a user with a device that has 700px? The site, which is optimized for 800 would probably not display correctly because the site is 780 px wide to allow 10px margin on each side.

Now, think of a site that is designed with intervals. It would have the following intervals:

1025-1500
801-1024
601-800
401-600
300-400

Suddenly, the site has too look good on screen between 601 and 800, which means the site will have to fit in that range, and thus it will cover the user with the 700px wide tablet.

However, a better way to do responsive design is to forget about breakpoints, and intervals all together, and adjust the site as needed. It is very simple, take your site, and start re-sizing the browser window, and adding media queries as needed.

I’ve seen many templates that have media queries with a comment like “iPhone 3G”, then another set of media queries with a comment like “iPhone 4s”, and another one with a comment of “iPad mini”, etc. That is the worst way of doing responsive design. In my experience, the best way of accommodating all possible devices is to stop thinking about devices, and just build a site that will render nicely all the way from 350px to 1500+px. This means that when you set your browser window at 2000px, and start re-sizing all the way down to 350px, the site should look good at all times. That is real responsive design.

No matter if you use intervals for fixed-width sites, or if you use fluid sites with just the necessary media queries, your sites should display nicely even if I set my browser at 437px wide in my 1920x1080px screen just because that is the way I roll.

Finally, stop assuming. I know a person who, when I point out that their site looks a little cut off, he says, most people use huge screen nowadays, so it should not matter. I’ve told them, please don’t put those notifications on the side of the site because in small resolutions they don’t display well, and he says, “People use big screens, so it should not matter”. I’ve told them, your site is weird because if I want to select a new option, I have to scroll up, select the option, and scroll down again, and he says “It’s OK, people use huge screen, so it should not matter”. I’ve told him, that new map feature is cool, I can hover over a name, and the map gets highlighter, but it is too big, I can either see the names or the map, but not both at the same time, so it defeats the purpose, and he says “It’s OK, people use huge screens so it should not matter.”

I use a pretty decent size screen, yet I have this problems, why? Because I don’t use the browser at full width, I have it at around 1000px right now, and that is how I like it. I will not re-size my window so I can view your site. I will not change my habits just because you prefer to assume most people have a huge screen, and they have nothing better to do than to waste the huge screen with a full-sized browser. I will not wait for you to update your site. Whatever you offer, there is 1000 more people offering it too, and some of them care about people enough to create something that can be used on my 1000px wide window. You should never assume people will not see your 800px layout on a non-mobile device. So, stop looking at the headers of the request to determine if the person is using a mobile device. Always serve the content they ask for, and make sure your site is capable of adjusting itself to fit nicely in their window, regardless of the size of it. Just because the headers sent by my browser don’t say android, it doesn’t mean I’m viewing your site at more than 1024px wide.

Lastly, optimize, optimize, and optimize. Don’t try to fit your user with the best bandwidth, latest device, and biggest screen. Your aim is not to make your site look good to them, but to make it look good, and work well for your user with the lowest bandwidth, the smallest screen, and the simplest device. I’m not saying support that IE6 user, but don’t ignore the users who can’t connect to your site from the best device out there. Knowing when to stop supporting a certain device, platform, or browser is a tricky thing, but as a general rule, 2 to 3 latest version, and 2 to 3 year old devices should be the limit, and remember, supporting retina displays is not as important as supporting 400px wide devices.

Design for people, not for devices.