For those who read my last post, you know I have been revamping my portfolio website over the last week using a new work process of content, then layout and finally the design. The process has worked really well so far for the build of the landing page and I have noticed how this process has changed how I coded the CSS.

You can see the progression here from content only to layout (please ignore the lurid colour scheme, it is there just to show the different elements and how they fit together).

I have traditionally always used the ‘position’ tag in CSS and then used co-ordinates be it relative or fixed (those who know CSS will understand me), but think about telling a element such as an image to sit in specific place or in relation to something it follows on from. This tended to always give me more problems later on and find myself with gaps later on where the element originally sat. But this layout has none of that, and I have done better coding to make things sit where I want them to. I found it alot easier to understand how to do this, make the HTML changes and get the logic in my head as I did not have to concern myself with fiddle-some design elements at this stage.

The other advantage is that I have hit far fewer compatibility issues between different browsers. It would be nice if all browsers worked the same when rendering a webpage, but they don’t and often you hit issues between how your webpage looks in Firefox, Internet explorer, Chrome, Safari and Opera. The biggest culprit being Internet Explorer, which due to most workplaces using it is still one of the most used browsers. The cleaner code has given me a more stable layout and the only issue I have dicovered so far lies with the twitter app I have used. I would love to have a stripped down feed via feedburner like my journal you are reading now, imagine tales and google shared articles feed, but for some reason trying to put an rss twitter feed in requires a login and password, so if anyone has a suggestion I would be grateful to hear from you.

So with the layout nicely tucked away, I can move onto the design stage and get my creative juices flowing. Whilst builidng the layout, little light bulbs kept lighting up above my head as the shape began to form. I did have a basic idea in mind, but as I saw how it  fitted together I could see the work space I had for being very artistic in Photoshop and the areas where I would need to rely on the CSS to aid the design. So if you look at the screen shot below, I have outlined in red the areas I can make the design flow and bring the page together. I will be able to design in a way that will draw the user to the areas I want, aiding the usability of my website and so the over all experience.

For along time now all these elements of building a website compatibility, usability, accessibility and awesome design seemed so much to think about when I built a website, but using this method of content >> layout >>design makes these things come naturally as you go through each stage and suddenly all becomes alot clearer. I am sure with each new website I build I will discover new revelations, but then it always good to progress and understand.

The next stage forthe build will be to split the design into two sections, firstly still working in the layout area I will change the colours, fonts and link styles. This will give me a rough idea of the feel of the website and also give me definate sizes of areas, from there I can design and bring in the art to compliment. But before I gey on with these elements, a mood board or three.

Till next time.

Read Part 3 – Inspiration Boards

Read Part 1 – Website Redesign and Content Driven Design