Web War 3.0 - Screen sizes

When I started working as a web developer, there was no longer a need to use the hacks from the 90s to make your website work. The marquee and blink tags where already dead. I could still see some old blogs referencing document.layers but they were on their way out. But still when I started, I had to worry very much about writing cross browser code.

In my first front end job, when I designed a page, I had to test it on every browser possible. I used IE tester for testing on IE6, 7, 8, 9, 10 (before IE10 was officially out). I had different versions of Opera, Firefox, Safari, and Konqueror all running in their own VMs. I made sure my designs were as close as possible to the original requirement. It was a very difficult. Sometimes I would be lazy and not test some browsers only to have someone report a bug and I have to get to it.

The advent of jQuery solved most of the JavaScript issues I used to worry about. It took me a while to trust it, but eventually I realized that it is one of the greatest tools available. We use jQuery so much that we forget that browsers are also evolving and we need it less and less. Nevertheless with jQuery, if my JavaScript works in Chrome, I don't have to test it on Internet Explorer.

Other tools like bootstrap helped tackle the issue of pages rendering differently on different browsers. You can basically test your website in just one browser and if you are following the conventions of the tool, chances are it will look the same on every browser. Personally I only use a CSS reset like the one found here and my pages look great on all browsers.

Different people came up with different strategies and this so called browser war was over. We won!

And then mobile came in. I didn't panic so much. I used the same tools and the job was done. The war of supporting a million different user agents is still over.

There is a new war however.

The war of screen sizes.

The cool new thing to do now is to make your website responsive.

Responsive web design, from Wikipedia:

Responsive Web Design (RWD) is a Web design approach aimed at crafting sites to provide an optimal viewing experience — easy reading and navigation with a minimum of resizing, panning, and scrolling — across a wide range of devices (from mobile phones to desktop computer monitors)

I was fine with using the zooming feature on my phone but apparently the mobile user wants more. I am not saying that making a website responsive is bad but just like the old cross-browser issue were complicated, view port sizes come with their own sets of challenges. To add to this pain, there is also the pixel density now that has to be taken into account. Making your website truly responsive requires a lot of developer time. Because the concept of RWD is still new, most developers are still just hacking their way into it. I was amused by a job offer that required 5 years experience with responsive design.

There are tools that are currently available that help you make your website responsive. Bootstrap 3.0 for example focuses on mobile first and works incrementally. And they did a great job. But the number of different devices size trumps even the greatest tool we have so far. You may be considering 768 pixels the threshold for the smallest size for supporting the old iPads but then the Nexus 7 may display your mobile version on portrait and tablet on landscape. Your images may look pixelated on the retina display iPads, so you will have to create multiple images in different resolution. Updating one image now means updating all the different sizes you wish to support.

Mobile devices are not as powerful as their desktop counterparts. A JavaScript heavy page will perform badly on a mobile device, in some occasion it will even crash the browser. So the mobile version of the pages does less stuff. What In my opinion, if you can do less stuff on mobile, you probably don't need to do more on your desktop. 3G connection is not the fastest and if you want to make your website appear fast you would want to make the page download less files and be as small as possible. RWD does not solve this problem. You are downloading the assets of all versions of your pages and the browser decides which to show.

Note: Dynamic function definition could be a great way to improve your JavaScript. See how it works

Multiple times I see links to thenextweb.com, as soon as I click, my mobile browser crashes. What could a content site be doing that is so complex that it crashes my browser. Another website that I made a mental note not to click on my phone is qz.com.

Adaptive design is similar to responsive, it differs in that the correct page version to display is decided on the server side. You must have seen some websites redirecting you to a different URL like, http://m.website.com or http://mobile.website.com. In this design you have more control over what content to serve on your mobile version of the page. But make no mistake, it is not easier to support. You still have multiple versions of the site to support. If you add a new feature on your desktop version, unless you want to make your users hate you, you better add it to the mobile version too. I haven't seen Adaptive designs for tablets yet, but it only makes it much harder.

There is one thing that I see all too often on websites theses days. Some content on the desktop page is not present on the mobile version. Why? Is the content not important enough to be shown to the mobile user? So why is it on the page in the first place?

I think RWD is not the ultimate solution for handling different screen sizes. Supporting different sizes is definitely a problem that needs to be addressed. Mobile devices, tablet included, are getting evermore powerful. A lot of website that do not have a responsive counterpart are still consumable at different screen sizes. Maybe that is one solution we need to adopt. Keeping it the way it is.

One of the reason I have seen many website to start working on a RWD is that in the recent years they have seen an increase in mobile users. This is not a signal that you need to change everything. Maybe you need a little more research to see how happy those users are with the current version. Maybe a surge in mobile users means that your current website is doing well on those devices.

So if your website is not completely broken and not unreadable, leave it it alone.

---