Case Study - Cirenwebdesign.com
Please note popups are used a lot on this page - your browser may give you a message about this
What better site than this one to use as an example?
I'd taken the decision to move from my old domain - simondyer.co.uk - because I wanted a more professional name and the site had been around for ages. Time for a change with a complete new fresh look! I was based in Cirencester (now Tewkesbury) so cirenwebdesign was descriptive and available. Cirencester is centrally located with excellent transport links, so I could travel easily to reach far flung clients, something I am very keen on to get a feel for the firm and its products or services.
Happily this decision was taken in the spring - time to get the camera out. So I went outside and snapped away at the daffodils that were growing on a bank just outside my home studio. Sifting through the results, there was one that looked promising, but opening it up in Photoshop and Fireworks revealed the colour to be a bit flat. Time for some enhancement to get the look I was after - a clean fresh appeal that would look good on the page, yet would be fast loading and optimised for the web.
Another consideration was the fact I wanted the image to spread across the page. Many people are converting to laptops and LCD desktop displays, which are wider and have a different width to height ratio than traditional CRTs, more of a letterbox shape than the old squarer format. Thus people using the newer screens typically have browser windows that are themselves much longer than deep, and this has design and construction implications.
This meant that the blue sky colour was going to have to be replaced with the more vibrant blue I wanted, I also needed to cut out a portion to use as the background, which would tile when the browser window was widened. Thus the image would consist of three parts, the daffodil on the left, the portion with the writing on the right, and a background colour to ensure the blend was seamless whatever the width of the viewers' browsers.
The whole header photo would be put together using CSS Positioning in the html of the pages. This would enable the spread of the image and is also the most modern method of writing webpages. The advantages CSS offers over the old style table based layouts is a separation of content and positioning in the code. This makes for much more search engine friendly pages and great control over the positioning and appearance of pages.
As to the actual content, I had most of that from my previous site, but I wanted to add this page and a Services page to offer better value to my visitors and potential clients - "value" is something Google is very keen on. Basically it means information, so it was important to include lots of links to other sources on the web. This will eventually increase pagerank and placement in the SERPS (Search Engine Results Pages).
So I was now ready to start - I had the design in my mind and roughly sketched out on paper, the photo I was going to use and the content was available from my old site. I wanted a design that used the minimum number of images and where all the links would be in text. This is also much more search engine friendly, and by using a Cascading Style Sheet to format the text, I could control the look and feel from one central file. So....
The Construction Process
Step 1 - Prepare the photo in Photoshop.
This involved a combination of layers, levels and blending modes, plus replacing the colour of the sky. Then I had to crop to the dimensions required by my design. Finally I took the Photoshop format file into Fireworks and exported it from there to .jpeg. Fireworks has the best quality versus size algorithm around.
Step 2 - Create the pages.
This is relatively straightforward. I used Adobe Golive, but have now switched to Dreamweaver, as Adobe has bought Macromedia and will apparently be dropping Golive. Incidentally, all webpage creation products are capable of writing bad html - so it's essential to use a designer constructor who knows html - happily, I do.
The important thing was to create the pages while still maintaining the idea behind the design - lots of white space giving a clean fresh look, reinforced by the image. Also I wanted clean, crisp fonts. This stage actually takes a bit of time to get things just right, not least because of Microsoft's patchy support for Web Standards in Internet Explorer. The pages not only have to look good, they have to look good in the vast majority of browsers and operating systems, so that a user with an Apple Mac running Firefox as their browser would see the same thing as nearly as possible to a visitor using Internet Explorer on a PC.
The more complicated the design, the more discrepancies are likely to occur, and this is where my experience really counted in saving time and not getting distracted by silly rollover buttons, frames and flash movies that were the staple of an earlier and more innocent period of web design. Today, SEO is the name of the game. And what is the point of a website if it has distracting, blinking text and garish graphics? It all detracts from the central purpose, which is to sell the product or service.
Step 3 - Testing.
This step also requires time, as there is usually a lot of tweaking involved. The site is viewed using different operating systems and browsers. Everything is adjusted so that it looks good crossplatform, cross browser and with different browser width windows. Also I look at the code - any imperfections are cleared up. The search engines will penalise you for sloppy code. If your designer or producer doesn't know the code, obviously he can't carry out this step.
Step 4 - Search Engine Optimisation.
This involves running through the site checking that such things as the "alt" tags are all ok, the page titles are descriptive and accurate, the meta tags are all present, correct and relevant.
Step 5 - Upload.
Upload the site to a webserver and adjust all links to the site from other sites. This will not only ensure the spiders find and index the site, but the more incoming links the better for the page rankings.
Step 6 - Maintenance.
Often overlooked, nothing is worse for a site than stagnation. All websites naturally expand over time, and all my sites are created with logical site structures that ensure future expansion is catered for. However, the main expense is in the creation and initial photography, planning and execution of the site - if the site is well constructed, maintenance and additions should not be expensive and are wholly beneficial.
And there you have it! Your site's creation will follow the same basic steps as outlined above. As you can see there's a fair amount to do, a lot of which is going on under the surface and will never be seen by anybody except the search engines. It is nevertheless vital - what's the point of a site if nobody visits? What's the point of having great products and a crummy website?
By coming to me you will get a thorough, high quality site that can only benefit your business, and will pay for itself many, many times over.
Please contact me with any enquiries.