Posted on by & filed under Basics.

Quick win

Start webdesign by selecting the most likely platform for your app/site, and create a design for that first. Find the lowest resolution with more than 3% market share on the said platform. Find the minimum viewport size in that case. The most commonly used web safe area is 980×500px.

Tabula Rasa

Every design starts with a blank sheet. The digital tabula rasa (not the MMO by Richard Garriott, but the creation of a new file in any app) can be intimidating to the novice designers due to its limitless nature. You need to set boundaries.

One of the most basic rules of UX is that every important thing should be visible to the user at first glance, as in, when he or she opens the website. First of all, we need to know the available width and height in pixels. This is easier if you are creating an application used internally by a company. In case you are creating an intranet app, you need to find the lowest resolution screen used and measure it’s available size. You need to subtract all the elements that take away precious space from your web application. Things like the taskbar, the scrollbar, the title bar, browser tabs, etc.

In the unlikely case of the lowest resolution being 1920×1080 in your company, and you would want the intranet app to run on Win8 and IE10 you would get a mind-blowing 1903×985px “intranet safe area” (the blue area on the picture below).

intranet-is-easy-600

Final frontier: The web

Unfortunately in case of a web application it’s a bit more complicated. First of all, we need to think of all those different devices and usage scenarios. Most likely we will have users sitting in a dark room in front of a 30” screen, while others will use our web app on a dated smartphone while riding a horse in broad daylight (most likely while under the influence, otherwise it’s hard to explain while would any sane man do something like that).

My suggestion is, that you pick a device (desktop, tablet, smartphone, Google Glass, whatever) and create a stunning design for that device. If your client/boss/cat accepts it, you can recreate it for other devices. (Do not “port”. Porting became a curse word in PC game industry due to the poor quality console ports.) But first stick with the one where the majority of your targeted audience will use the web app. For instance, if you are creating an accounting application, I would not suggest starting the design with the mobile version.

Now the question is: How can you find the lowest resolution for a targeted device? The thing is you don’t want the lowest possible resolution. You want the lowest resolution, which has 3% or higher user base in case of your site. Now if you are redesigning a webapp/site there is a good chance some sort of data is available. Most likely Google Analytics. You can see an example of a Google Analytics screen resolution date in case of a live app, filtered to mobile devices (as you can see, in this case mobile traffic is less than 2% of the whole traffic, so mobile redesign is not a priority in this case).

analytics

Mile Zero

Now, if you are creating a new web application from scratch, you might want to take a look at global stat sites, like http://www.w3counter.com/globalstats.php. If the website has no mobile filter, you must do so manually. (Red strike-through in the example blow.) Then you need to find the minimum resolution that has 3%+ penetration. If a resolution is very small and used by less than 3% of the web, most likely that number will dwindle within a few months, and in some cases it might totally disappear before you finish the web app.
w3counter
But remember, that this is the screen resolution, not the usable browser viewport. People rarely browse in full screen mode, so you need to subtract all the elements, like in case of the intranet app. Moreover, you may want to have the websafe area to be a bit smaller, than the area you get after subtracting all the elements, especially vertically.

The most common websafe area size is 980×500px. This seems disproportional, but then again, you need to be sure, that 5 line of toolbars on a Windows XP, IE6 PC will still show what your site is about, not only the top part of the header. (Yes, those computers still exist, and should be taken into consideration, even if you are creating a B2B solution, and target only mid-to-large size companies.)

Responding to Responsive web

What about responsive web layouts? They used to be the cool new thing, now everyone and his cat creates responsive designs. In theory this is great. Unfortunately they are a better-than-nothing, but not ideal solution for mobile web application. There is no denial that they are easy to create (HTML5, SASS and bootstrapping for the win – more on those in a later article), but the thing is if you want to give your users the best mobile web experience you need to create a new similar looking but differently arranged and scaled design preferably by using media queries and jQuery. That is why I strongly suggest creating one very usable design first, and then make it responsive/mobile friendly, accessible, optimized for speed, etc.

Long story short: responsive design is not about simply using a grid system in Photoshop or a bootstrapper, but understanding the different usage of the mobile devices. For instance in case of a tablet the submit button should be on the right side of the screen, within easy reach of one’s thumb if holding the tablet with both hands. On the other hand in case of a smartphone, you might want to put it in the middle, because the very right side would be uncomfortable, ugly/imbalanced and is usually used for drag-scrolling the page by quite a few people. On a desktop usually the right and left side of the page is left for the background image/colour, because on a large monitor it’s easier to scan the content if it is not as wide as the monitor itself, but a lot narrower.

Futuresight

It is yet to be seen what new devices arrive, and how screen resolutions change. Contrary to most expectations the 980px wide safe area lasted for a decade or more. I certainly hope, that the default websafe area will climb to 1180px or 1140px wide, in the near future. Even now you can get away with that if you create a design that has a graceful fall-back to 980/960px width.

6 Responses to “The web safe area”

  1. Cathy_

    Normally I do not read post on blogs, however I would like to say that this write-up very forced me to check out and do so! Your writing style has been surprised me. Thanks, quite great post.

    Reply
  2. C.J.

    Appreciating the time and effort you put into your website and in depth information you provide. It’s nice to come across a blog every once in a while that isn’t the same outdated rehashed material. Excellent read! I’ve saved your site and I’m adding your RSS feeds to my Google account.

    Reply

Leave a Reply