Web Design – How long is a piece of string?

Web Design

“I want a web site.” There’s never been so much, or so little encapsulated in such an innocent phrase. When used without any further qualification it has web designers and IT consultants in despair! Why? Let me elaborate….

A web site can contain a single page or several thousand pages. A web site can do nothing apart from show you images and words or it can be a fully fledged application with interactivity and many, many man hours of coding of the bits you see and the bits that you don’t see. In fact to ask for a piece of string without specifying its length seems positively simple in comparison.

So, how does an IT expert respond so such a nebulous 5 words? My response is to ask: “What do you want the web site to do?” Usually this is followed by a long moment of stunned silence as the business owner is faced for the first time with the concept of purpose. The bottom line is, if you don’t know what you want your web site to do for you, then why spend a significant amount of money on one. And how are you going to be satisfied that the web designer has done what you ask if you don’t know yourself?

So, if you’re considering investing in your first web site, or considering changing what you already have the first question to ask yourself is this: what do I want my web site to achieve?

Is Responsive Design the only game in town?

responsive design

There’s a growing trend in web design towards responsive design. Responsive design is the deliberate design and build of a web site to respond differently to different viewing devices. In other words, the web site will present itself differently depending on whether it is viewed on a mobile phone, tablet or desktop device. The design is done in such a way that the browser itself does the work. This is a great choice in many ways, particularly for smaller web sites. There is only one set of pages to maintain, which makes life simpler, but the styling behind the site actually addresses multiple view ports (the size of the window through which the site is viewed). As a result the underlying code can get a bit complex, even though it’s only in one set of files.

The alternative to responsive design is to detect the device accessing the site and present an alternative set of pages to smaller devices. This obviously will involve more work and more files as you are designing separately for different view ports. At first this may seem to be counter productive, but it all depends on the site content and original design.

Many sites are now quite old and large, and the work involved in redesigning the entire site to a responsive design could be prohibitive. It may well be that you only wish to present a select subset of pages to the mobile user, or even different pages geared towards mobile phone use (such as linking maps and phone numbers).

Many larger sites are also data driven and have a significant amount of back end code that can be easily leveraged to drive new mobile oriented pages with no more work involved than restyling the main pages.

For larger sites, and especially those that have an old design it would seem more productive to produce a subsetted separate site for mobile devices, always presenting the user with the option to use the ‘full fat’ site if they prefer. Responsive design is an elegant design option, particularly when designing from scratch. But depending on the size of the site and the legacy elements, responsive design is not yet the only game in town.

Web sites for mobile phones

goMobileWhat does a visitor see when he or she views your web site on a mobile phone or other portable device? Is it a barely readable, shrunken view of your full web site? If so you may be losing out. Mobile users generally have a specific purpose in mind when accessing a web site on the go. The probably don’t want to read in depth articles or view high resolution images, but they may well be looking for specific information, such as how to find your premises, or how to get in touch.

A mobile web site can cater for these specific requirements by providing only what they need in an appropriate format for viewing on a small screen. Buttons should be larger for touch control, images should be kept to a minimum, phone numbers should be touch to dial, location information should be keyed to maps.

Have a think about what pages and information your customers would like to see when on the move, and then give them a few pages tailored to that information. This way you will improve the overall usefulness of your web site and keep your mobile users happy!

The difference an image makes

The difference and image makes

When considering the design of a web site it is vital to consider early on the use of photographic images. Images are vital to any web site, but they must be appropriate and must support the message conveyed by the words. We tend to naturally look for images as a means of judging the tone of an article. Although this may not be the best way to judge content, in an environment where attention span can be reduced to mere seconds it is vital to support words with appropriate images. These images draw the attention and contribute to the perceived professionalism of the site and the content.

A new visitor to a web site will come to subjective conclusions about the site, the content, the authors or businesses based on their initial perceptions of the quality of the design and imagery. It helps, then, to make sure that the photographs are: present, of high quality & appropriate to the content. How does your site stack up?

Grace Magazine Web Site Design

Grace Magazine

I’ve just completed a redesign of the web site for Grace Magazine. They wanted to go for a more contemporary look than the previous site, whilst simplifying the access to the content of previous issues. The previous site was overly complex with some broken links, so we reduced the navigation to a small set of main navigation tabs. This makes it simpler to see what is on offer. The home page was to contain a description of the latest magazine with a link to previous issues.

As with all design work, it is often necessary to put something together based on an initial specification in order to allow the client to see and decide which direction to go. We went through a couple of design iterations that weren’t quite contemporary enough, but arrived at a bold modern style with direct links to excerpts from the magazines in PDF format. Take a look and see what you think…

Grace Magazine Iterations