Sk-etchbook

Magpie is a new design & communications agency targeting the education industry, specifically Student Unions. The company is a recent formation, here is what they have say about themselves:

"We were inspired to form Magpie after many years experience working for Leeds University Union’s Marketing Department. Here we gained extensive knowledge of the student market and implemented award winning design and communications for the Students’ Union, University of Leeds and external public sector organisations such as the NHS."

So what's this got to do with me?

I've been working with the guys at Magpie, converting their designs to HTML/CSS web pages. This is the first time I've done the coding and back end stuff only and it has been a constructive use of time.

Project overview:
Magpie provided me with PSD files for the pages, they wanted these converting to a basic brochure style site. After speaking to them about the project initially I suggested they incorporate a blog into the site as this would meet their requirements in terms of wanting to post news and info on projects. I've been learning about blogging for marketing and SEO recently, even though SEO was not one of their requirements (they plan on presenting themselves directly to their niche market) they're still benefits in terms of inclusion in relevant search results and page rank.

They wanted to get a site online asap as they planned on attending a conference this weekend so at present I have just created a faux-blog feed using a scrolling div. Once we have discussed the matter further this will be replaced with an embedded feed, the full blog may then be incorporated into the news page.

In terms of coding and conversion it was pretty straight forward. First off I transposed all the text and created a semantic layout. Next I sliced up the home page layout, the design is a clear and uncluttered one so there were only a few images required. Then it was a matter of coding the CSS, following best practice all the CSS should be stored in an external file. I use Dreamweaver to design in however I am finding myself hand coding more and more as it's quicker and more flexible than the Dreamweaver interface, the code it produces is also quite heavy and unoptimized.

Through the magic of CSS a text document is transformed to beautiful layout. Or is it? I use Firefox on a Mac and usually test pages in this first. There are discrepancies between browsers which I'm getting more familiar with. Most of these are to do with measurement or rendering of some tags. There is a default style sheet built into the browser, you can override the default margins and padding for all elements in the document but it's debatable whether this is good or bad. The benefits are you get greater control of positioning however the downsides are you have to write more code, you loose some useful defaults on buttons and other page elements and if there is a large amount of content it can be processor intensive. I tested the design in Firefox, Safari and IE on the Mac and Firefox and IE on the PC. It is a case of trial and error in correcting the differences but I got there eventually.

Bob's ya uncle, Fanny's your aunt... A working website.

Oh yes, beta version up and running. Less than a days work too which highlights to me where a lot of the time goes on projects. When I'm doing the full site design - completion the design can take much longer than it should as it's a matter of waiting for the client choosing, amending, changing their minds etc. The creative side is not as black and white as the development side either, sometimes you crank out designs like one of them cigarette pooing camels other times if feels like you just sat there having a stare-off with a computer. Definitely a nice change, working with designers. They know what they want, do the design and hand it over, I do my thing, job finished. Very smooth.

Still to do:
As mentioned before we are going to add a blog and embed this on most pages. There are a few additions to make but it is mostly just back end stuff. This is what is usually involved:

Add meta data to pages.
Visually test on major browsers.
Automated cross browser testing - http://browsershots.org/
HTML validation - http://validator.w3.org/
CSS validation - http://jigsaw.w3.org/css-validator
Accessibility testing - http://wave.webaim.org
Optimize code
Search engine submission

Testing and SEO
http://www.google.co.uk/webmasters
http://www.alexa.com
http://www.goingup.com

Learning outcomes:

As I previously said this was a constructive exercise. Working on just part of the project gave me a different perspective and more insight into how much time should be allotted. I've got some good coding practice and have learnt a few new things. The most notible of these are working out how to bypass an issue with IE not rendering list based menus correctly. IE doesn't like you not specifying widths sometimes and also handles the box model differently, anyway a mix of these and using inline positioning was the solution which worked. The other new snippet of knowledge was using actions in Photoshop to create slices and save the graphics. Very useful if you have a generic page layout and just need to change one area.

Nice little project really and maybe the beginning of a beautiful relationship.