Designing A Web Site For A Set Screen Resolution is Outdated

Introduction

In website development we regularly ask our clients what size screen resolution they would like us to build their 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 odd!

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 popular 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 processor can support a high resolution).

All getting a bit technical? Put simply the higher 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 Web Site 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!)

The most popular screen resolution of 1024×768 will have areas of screen with nothing on them when viewed at a larger screen size such as 1920×1080 or larger so a professional ecommerce web design ideally has a mechanism for dealing with this issue.

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 accommodate 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 as well.

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 below 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 squirt 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 stretched spaces on larger screens that you can fill with what are effectively links to other parts of the website.

How do you make fluid content?

Fluid content is quite simple 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 best practises 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 curves and shadows and gradients to look great.

Conclusion

Any of the many Loughborough web design companies will agree that a fluid scalable design is really the only option to consider these days, as it maximises the available publishing space on larger screens and with the rising popularity of smart phones and netbooks it ensures you site also works well on these smaller screens.

 

My New Website

Introduction
When I decided I needed a website for my business I had no idea of the planning involved. Like most people, I thought web design meant deciding on the graphics and the look of the pages and then by some magic it would all happen.

I have a friend who is in the business of web design and website development so I approached him for a quote. As a complete novice who is computer literate up to a point, I was amazed at the depth of initial questioning required to find out exactly what my requirements were.

I had no idea about the various aspects and the structure of the site and I found it mind blowing when I learned about the amount of work involved. So I thought other people would be interested to know more about this complicated process and I have asked my friend to supply the technical information for this article.

Stages in the Process

Target Audience
Before building a website there are important questions to consider. I was asked who would be my potential audience. Who are my customers likely to be? Would they be children, businesses, home owners, sales people, parents or teenagers and so on?

The objective of the website
Then I was asked, what was the objective of my website?
Did I want to sell services on line or use it to market my business and get more leads for possible customers? Maybe I would want to use it as an online brochure to showcase products. Another possibility was to use the website to foster a community so that I was in contact with other like-minded people, with chat rooms, online discussion and being supported by advertising on the site.

I hadn’t quite realised the scope of a website but as I was asked these questions it became clear that a lot of careful planning went into the preparation before building a website.

How to be Found on the Web
One of the first questions I was asked was, ‘Do you want it to be found by Google the main search engine?’ If I did then there was a whole process of establishing Keywords. So finding the best keywords are vital if you want to be found in Google. Generally most users only look at the top ten results so you will also want to promote your website to get on this page for your chosen keywords. By using a keyword research tool you can find the single most popular keyword for your industry.

Your Domain Name
Choosing a domain name is often quite a problem because every name you initially come up with will almost certainly have been taken. Domain names ending in .com are by far the most popular and internationally recognised; the snag is that it’s very popularity means that the majority of the shorter names have already been registered.
So looking at names with endings such as .net; .co.uk or .info may be able to provide you with the domain name you would like to have. When choosing your domain name it is very important to include one or more of your keywords if possible as this can apparently help with search engine rankings. So although the name of your business is the obvious choice for a domain name, it is not necessarily the only option.

Creating a Site Map
The importance of creating a site map is to get it clear in your mind of all the pages you will have on your website so you can prepare the content for each page and begin to design the flow through the website, such as when a user adds a product to their basket, then enters their delivery and billing address and makes the credit card payment in the correct order.

The aim is to make the site as user friendly as possible so that there are no barriers to getting into the website. For that reason often user name and passwordz are set for the customer so that they are not put off making a purchase by having to register.

For a non e-commerce site things are simpler with a contact form which allows you to receive enquiries by email without publishing your email address on the website, thus avoiding junk email.Web forms can also validate the information before you receive it, so ensuring that the phone number provided does not contain words, and that the email address is in the correct format, for example. These things may sound very technical to us lay-folk but I assure you everything has to be decided in advance before starting on the construction of the site.

Copy
The next stage is preparing the content. This is not the design of your website – just the words and visuals you want to have one each of the pages.

Having gathered all the previous information you will need to decide what imagery you want to use within the website content. As we all know, a picture speaks a thousand words and remains in people’s memory far longer than just words.

For each image you could also have a caption, as the caption of an image is the next ‘most read’ words on the page after the page title. Images and their captions need to be clickable. When you click on a picture it should take you to the next stage of the process such as the sale page or placing an enquiry if your website is for lead generation.

Navigation
Another important consideration when building a website is how you want your navigation to work. You can have links within the content of your website, in the text, so there are not just links from the menu. You will need to decide whether the links will open into a new window, retaining your original page open. Next time you go online, you will realise how much thought has gone into the way in which a website works.

Website Design
Finally we come to the design of your website. I asked my friend in Nottingham web design to comment about this and he says it is one of the most difficult stages of the process because it’s subjective. What one person might like, another person might not like. If you are setting up a website for yourself alone then you will probably have some idea of what you want to see on the site. But if, as so often happens, the website is for a large corporation there will be inputs from many people or departments and you can be sure that they will never all agree!

There are a number of ways to approach web design but ultimately you need to create a design brief for the designer(s) to work from. Look at other websites and your competitor’s websites to find out what you like or dislike. The design brief should give reference to the logo, any existing brand guidelines or schemes and fonts and colour schemes, and should also detail which pages of the website that the designer is being tasked with creating visuals for.

The very best results will be achieved by using a graphic designer, and beware – not all graphic designers are the same. A graphic designer who designs specifically for print is working in a different discipline than a graphic designer who designs for screen and specifically the web. So choose your designer carefully, look at other work that person has done and determine whether or not you like their style.

If you are working in the big time and budget allows, use multiple graphic designers who have all been given the same design brief and request three concept designs from each designer. If the client themselves also do a graphic design, even if it’s a back of the envelope scribble, you will then have 10 concept designs. The next step is to get them all together and select the preferred elements from each design. Then give the work to the preferred graphic designer to work up as the final artwork.

The artwork should be finalised and agreed on by everybody before development of the site begins.

Production
Finally the preparation has been done and the site is ready to be built. Now for the more technical stuff! You will need to have decided which programming language to use to build the website. There are two main types for developing a website, one is Unix based, and the other is Windows based. Each one has pros and cons. If you are starting from scratch then it probably won’t matter, so you can go with the preference of your professional doing the work. My website is built on the Unix platform (apparently!) which is the same as many of the more well known websites such as Ebay, Facebook, Google and Amazon. Also your website hosting must be compatible with the development language with which your website is built.

Accessibility and Compliance
The website has to meet the current standards for website coding and doing so insures that disabled users, such as the visually impaired, can still access the entire website if they are using a screen reader.

Website Development
The best way to develop a website is on the web Server where the site is going to live. This way, those involved in reviewing the work can see work in progress and provide feedback throughout the development.

Unforeseen items
There are always some things that arise in any project which you suddenly realise you have forgotten, so no matter how well the website designer prepares and asks the right questions, there will always be a last minute change or addition. The main aim is to minimise the number of glitches that might arise because they aren’t calculated in and they could cause extra costs and delays on the date of the web site going live.

Going live
The moment of excitement comes when your site finally is published to the internet and you see the results of all the thought that has gone into the whole process. I was over the moon to see my barn conversions website go live. As soon as the site has gone live there is no substitute for real world testing though, so ask as many of your friends and colleagues to view the website from their own offices and give you their thoughts.

Reporting and Monitoring
Once your website is up and running, you will want to know how many people visit your website and from that number how many actually buy the products or place an enquiry. From these statistics you can work out the ratio of visits to sales and gradually make changes to improve the ratios. There are some reliable statistics packages such as Google Analytics or Web-Stat.com which allow you to collect and review website visitor data in near real time. All you need to do this is to have a small block of code inserted into each web page on your site.

Another useful service that Web-stat.com provides is to monitor the website and warn you by email or text message if the site goes down.

Marketing
Once the website is live there are lots of things you can do to market your product or service. The first step is to submit it to the search engines and at the same time write articles, and press releases. Getting links to the site from forums, blogs and other social networking spaces are other options. For more on this subject ask your developer about SEO

Conclusion
Wheww. What an amazing amount of work! I hadn’t realised when I started the process of getting a website up and running, how complicated it all is and how many factors you have to consider before even designing the website. The word web design is really a misnomer, as people often think it’s just about the graphic design on the home page, and the branding of the product. Unless you are a computer buff, most people have no idea how much goes into designing and building a website and the systems that support the work you want it to do. I hope that this article will give readers an understanding and insight into the whole process of website development from start to finish.