Designing for the new Resolution

[#1]

Deciding what resolution to design for is a common question. For the last several years the general recommendation had been to design for 1024 x 768, which had been the dominant resolution on the web. Now things have shifted. The dominant resolution for the past few years has been (and is) 1366 x 768. This is largely because more and more people are using laptops. So the simple answer is to just say "design for 1366 x 768." That said it's a bit more complicated than that.

Go wide

The trend over the past few years has definitely been to take advantage of the larger resolutions and to start designing wider going beyond the pixel dimensions of the 960 grid system used to design for 1024 x 768. As an example of this trend we can examine the web traffic coming to Qlik.com. I know that the top 8 resolutions are all wider than 1024 which accounted for 78.01 % of our traffic last year. Of those resolutions 1366 x 768 was number 1 with 25.92% of traffic and the narrowest resolution of the top 8 was 1280 x 800. Now there could be certain biases in these numbers, that the people interested in a BI product might be more technologically savvy so they may have higher resolutions than the average internet user, but if you are looking to design apps for BI users then it's a good measurement of your potential user base.

So why consider 1024 x 768

While 1024 is going away it's aspect ratio is still valuable. 1024 x 768 is the same aspect ratio as 2048 x 1536, the resolution of the ipad. The ipad is by far the dominant device in the tablet market. So designing for 1024 means you are going to produce something that the majority of your users can see (since most people are on even wider desktop computers) but also you will have a good idea of what your users will experience when using your design on an ipad in landscape orientation. Designing for 1024 means you can create something once and deploy it on desktops as well as tablets knowing it will be accessible on the devices most people want to explore BI on. This saves you time & resources from having to build things twice, once for wider desktops and again for tablets.

Responsive Design & Dynamic Grids

If you are creating a mashup app, using HTML & Qlik together, then the best approach is in using a dynamic grid that is responsive to the available resolution. It can still be a 12 column grid system but it will adapt based on the device you are using. This approach takes more work but it is the best recommendation for designing for today's web and the realities of people using multiple devices to access the same content. In addition, Google recently announced that "mobile-friendliness" will be used as a ranking signal when they deliver search results. In other words, if your content isn't optimized for mobile devices you may be further down the search results than before. Something to consider if you want your content to be found online.

Listen to your users

Ultimately you are designing for your users. If you are creating an app for an environment where most users are at a certain resolution size, then design for that size. If you are designing an app where tablet usage is likely, consider designing for 1024 or using a dynamic grid if the app is a mashup. If not start thinking about going wide.