OUGD504 - Brief 04 - Screen Considerations

For this brief, it is important to consider user experience and interactivity as part of the design production. Nowadays, there is a huge abundance of screens available to users to view digital content on. Computer screens, mobiles, tablets and even TV sets come in a range of sizes with varying screen dimensions and resolutions.  I did some quick online research into this issue. What I discovered was intriguing.

It was found that in 2012, screens with a 1024×768 were the most often used screens on the web. That is, until now. According to the latest data from StatCounter, 1366×768 screens just surpassed 1024×768 as the most popular screen resolution used by the visitors to StatCounter’s global network of sites. Three years ago, 1024×768 still accounted for almost 42% of all visitors to the roughly three million sites that use StatCounter. Today, that number has fallen to 18.6% and 1366×768 screens now account for 19.28%, up from just 0.68% in May 2009.

It’s worth noting that these are global statistics. In Europe, the higher-resolution screens already overtook their predecessors late last year and in the U.S., 1024×768 still holds on to the top spot (but just barely). Another resolution that is slowly declining in usage is 1280×800. This used to be an especially popular resolution on laptops, but most modern machines now offer higher resolutions.

For the most part, though, what sadly hasn’t changed much in recent years is the pixel density of these displays. 

This may change once Apple rolls out its Retina display technology to a wider range of its Mac lines, but right now, it’s almost as hard to find a small display with a very high resolution in a mainstream machine as it is to find a screen that isn’t widescreen.

I took this information on board and applied it to my design process. I figured that Grace Jones' largest fan-base is most likely to be located in America, and according to the stat, the resolution of 1024x768 is still widely used, so this was the resolution I employed when designing my website mockups. Really I should have looked into this issue at a much earlier stage, in order to accomodate to the most widely used screen resolution. I could very easily modify the designs to accommodate for the 1366x768, that it is a very relevant consideration to make. 

When designing for mobile devices, I looked into the dimensions/resolutions of the latest iPhone and Samsung models, as these are amongst the most popular mobile devices in the world. The standard iPhone 6 model has 326ppi, and a resolution of 375 x 667 points. I used these dimensions to design the mobile device mock ups. I did some quick research into screen resolution:

Screen resolution provided by the device manufacturer defines the number of pixels (the tiniest addressable points) available on the screen, and it is usually quoted as width × height. Generally speaking, more dots allow designers to fit more content on the screen, such as GUI elements, apps, and websites. Bigger resolution doesn’t necessarily mean better quality though, as there are other important factors, such as pixel density, diagonal screen size, and many more.

Physical vs. virtual pixels

It is also worth mentioning that for many graphic designers CSS pixels are a more important factor than physical pixels listed by device manufacturers. CSS pixels, or virtual pixels, are the dots defined in the CSS standard, which may be different from the physical ones, even though the CSS dimension is named ‘px.’

A CSS pixel (px) equals 1/96th of 1in. Its relation to physical pixels depends on the viewing device. For a low-dpi phone, 1px is one device pixel (dot) of the display, while for printers and high resolution screens 1px can mean multiple device pixels.