Responsive Web Design only for tablets and up

Make it look the same on all devices, except the phone.

Responsive Web Design (from now on known as RWD) swooped the nation 1-2 years ago and won everybody over. Developers and Designers alike rejoiced at this new technology. Finally we had a solution to everything. There were some critics, but who like those whiners anyway, right? No, this was it. Everything had changed. Everything had to be responsive.

Like all global solutions, we started seeing examples where this didn’t really work. And then some more examples, and then some more, and we started alter this unviersal solution a little every time. Especially the last (or first) breakpoint was a problem: the phone. The fluid design worked perfectly up until designing for the phone, then we had to make sacrifices. Just look at these examples from the startpage of mediaqueri.es (I probably could find better examples but to prove my point that this happens almost all the time I just toook the three first posts), they all look the same until the phone breakpoint.

Maybe all of you already know this, and I’m preaching to the choir on this one, but the big trend that I see now is that websites are responsive from tablets and upwards, and then a seperate mobile site is built.

The concept of RWD remains the same, that is that everything should be everywhere. Mobile websites should not have less information, or a dumbed-down experience. But the technique of RWD need a re-evaluation. Because, even though mobile users don’t want less information they do however want faster load times and a different navigation type. That’s why the design changes so fundamentally for that last breakpoint. Which sort of contradicts the whole idea of RWD.

Thats why, the ultimate solution for a website is to have one desktop site and one mobile site. That is different code bases. The information should be identical so it should get it’s data from the same database (or CMS or whatever), with the exception of some filesize heavy images and videos perhaps. The mobile site has one or two breakpoints (landscape and portrait) depending on the ambition level. The desktop has the number of breakpoints that it needs depending on the layout of the site; ideally no breakpoints at all really.

The desktop site therefore ranges from 1000px up to 2000px (or more if you want to please the fullscreen browser iMac 27" crowd, which is the best crowd so you should) and you can focus on making it as good as possible without having to take that pesky 320px screen into consideration. A good example of this is the new USAtoday, that didn’t want their website to compete with their phone and tablet apps, so they skipped doing a phone site altoghether, smart move.

The same goes for the mobile site. You can focus on placing things where they make sense (navigation bar at the bottom for example) without having to make sure that things are placed correctly on a big screen. Making things as big as they have to be, preferably making the site more like an app than a website. LinkedIn is a great example of an app like mobile website, because they get most of their traffic from people reading their email on their mobile and clicking the links.

If you found this post valuable I’d really appreciate it if you could hit the Recommend button — Thanks!