Introduction
A web site development company should always determine what size screen resolution to build each new website at.
I was reading somewhere recently that apparently these days the only answer to that question should be ‘all of them’ and ‘none of them’. What this basically means is that new websites should be built to accommodate all different screen sizes these days, particularly with the increased popularity of hand help web browsers, smart phones, net books and the like. Of course there is also the other end of the spectrum in the new huge wide screen flat screen monitors. I recently treated myself to a 24 inch Asus which does 1920×1080 which is big enough to get two web browser windows on screen side by side, but if you make one of them full size, the majority or websites look, well, just plain strange!
What exactly is screen resolution then?
If you are not familiar with screen resolution, the simple answer is that it is the size of your screen. However, this can be quite misleading because it is actually the number of pixels that make up the display area on the screen of your monitor. Still not clear? Well let’s look at some examples to help clarify exactly what screen resolution is.
Currently what would appear to be the most favourite screen resolution is 1024×768 (accounting for 62% of my website visitors). This is a screen that is 1024 pixels wide by 768 pixels high. What is a pixel? A Pixel, derived from the phrase Picture Element, is basically one of the thousands of tiny dots that make up your display screen. However, this does not necessarily determine the physical size of your monitor (14 inch, 15 inch, 19 inch etc) because most monitors are capable of displaying the screen in different screen resolutions. It is fairly accurate to say that if you want to run your monitor at a high screen resolution then you will need a large monitor, the larger the monitor the greater the resolution it can display at (assuming your graphics card can support a high resolution).
All getting a bit technical? Put simply the larger the screen resolution the more things you can fit on your screen before they have to go onto the next line, or before you have to scroll down or scroll right.
What’s this got to do with Website Design?
When creating the visuals for a new website design, traditionally the experienced graphic designer would be working to a specific resolution in order to make sure that the design fits in your browser window without having to scroll right. (Thankfully most website owners don’t demand you make their pages so that you don’t have to scroll down anymore!)
Web pages designed to the popular 1024×768 resolution, will have blank areas of screen when viewed at larger screen sizes such as 1920×1080 so a good ecommerce web design will be designed to deal with this in a specific manner.
When designing at a fixed resolution you can deal with larger display settings by either aligning the site to the left and having a huge great big gap to the right, or you can centre align the website in the available space and then the extra screen resolution will be on either side of the content area.
However, the sensible, modern day approach is to make the site flexible to allow for all screen resolutions by creating ‘fluid’ content that will flow to fit the available page space irrespective of what size screen resolution it is viewed at.
Also, because of the increased popularity of the web the challenge for a website owner is how to engage your viewers and get them to stay on your website for as long as possible and show them as much content as possible. One way to help with this is to make full use of all of the available space. Two great big blank areas either side of a tiny web page is simply just a waste of space. Imagine if you picked up a newspaper or magazine and only half of the front page had got any content on it, the editor would get the sack for sure! So by creating fluid web pages, web site owners can take advantage of larger publishing spaces available on bigger screen users, whilst optimising content for display on smaller screens at the same time.
Another advantage with big screen displays is the ability to use the new area for re-publishing. Re-publishing is a way to put content from another area of your website onto a different page, thereby bringing it forward for the viewer. An example of this that we did on one site we created was to insert an alphabetical list of names of the products available on the website underneath the left hand menu on pages that were very long.
All pages tend to be different lengths, as determined by the content on the page, so we used a clever widget to create this list of product names and load it in the gap until it ran out of space. This was great for SEO too as it gave a direct link to specific product pages based on their product names without having to crawl through category pages first, also website users would often see something in the list they wanted and click straight through to the page and buy the item.
Ultimately this has evolved into what would now be thought of as a web 2.0 ‘tag cloud’ a list of tags that are usually user generated, to indicate and link directly to a specific content group or item. Using a tag cloud is a great way to fill flexible spaces on larger screens that you can fill with what are effectively links to other parts of the website.
How do you do fluid content?
Fluid content is not that hard to create, the majority will be words of course, which are naturally fluid so on a small resolution screen you might get 5-10 words to a row, on a larger screen you can get 20-30 words or more. However the challenge comes with images, and particularly website graphics. A photograph, whilst it can be made smaller and larger offline, it can’t be automatically resized by the web browser at the time of viewing (not taking into account the Zoom function in Internet Explorer).
The HTML code that makes up your web pages is again designed to allow fluidity by fitting content into the available page area, so some pointers that can be employed to make content fluid include not using tables in the code (which are depreciated these days now anyway), not setting specific screen width in pixels, use 100% instead. By fading images into blocks of colour in the website graphics, you can create a stretchable element that will scale to fit all window sizes. Use little boxes to put stuff in, these can then flow around the screen as required without having to be in any particular place, they also help to draw the eye to special offers, discounts, newsletter sign ups etc, and can of course be styled by your graphic designer with colours and shading and gradients to look great.
Conclusion
Our local Loughborough web designer came up with a terrific design for our new website which is fluid so it scales depending on the screen resolution being used to view it. This means that even if you are viewing our website on a smart phone or mobile phone browser it displays properly, and then when viewed on a great big monitor it brings more of the homepage content ‘above the fold’ maximising that all important first impression and sales opportunity.