It seems that responsive design is what everybody is talking about these days. And it’s a good thing since the internet is such a wonderful thing, that can be accessed from both a phone and a gigantic tv screen or projector.
But many, many people do not actually get responsive design.
Of course, many developers found themselves in the situation where their current projects were getting a lot of mobile visitors and no optimisation.
So everybody starting taking the current layout they had, and modifying it to fit one or two common resolutions (usually the iPad and the iPhone).
Using CSS3 Media Queries, they were able to serve some sort of optimized version of the site for mobile users without so many modifications.
Even today, many designers that receive a new project, start with the standard, desktop version, they finish and present in to the client and afterwards they start making changes for lower screens. But sometimes, this is the wrong-way.
There are great articles which tell designers that they should change the way they work. They should start from small screens and then move on to tablets and then desktops. And those articles and authors may be right.
Why? Well, there are no more “common resolutions”, where you set your breakpoint and be done with it. Actually, the concept of setting breakpoints according to popular resolutions is not future-proof at all – it would be insane to always adjust your code so that it looks good on whatever devices are popular for a couple of months.
Although designing starting from mobile is a great step, developing from mobile up is the way to go!
Many of us have seen a common rule: certain website areas will not be shown on tablet or mobile. Therefore we just add a display:none in those cases. It’s quick, it’s easy and it works. But there is a problem. Those elements are not displayed on the screen, but they are actually there in the DOM, the objects are still downloaded etc.
When talking about images it’s the same problem. It’s insane for the user to download a 800×600 picture and, with css, to resize that at 200×100. A mobile user on network data on 3G doesn’t have to download that entire image. It will only slow things down.
By building starting from mobile, you create, insert and show only the elements that are actually needed. The DOM is not full of not-displayed elements. And this is great. This doesn’t only mean that the site works great on a mobile, but it also loads up really fast, which makes for a great user experience. And, at the end of the day, this is what really matters.
Yes, it’s harder, and yes, it’s more time-consuming, but it’s really more rewarding and everybody will benefit from it. And it’s also future-proof.
What’s your take on this? How do you feel about this approach?