Archive for May, 2009
Jack Osborne in .net Magazine
Last month I was lucky enough to have a feature published in the June edition (#189) of .net magazine.
The article focused on the transition people face leaving higher education and trying to secure their first job within the web design communitee. Having only done this myself a year ago I decided to document a few of the things which helped me secure my job within the ranks of hobo.
The good folks at .net have also allowed me to distribute my article so I hope some of you will find it useful.
Plagiarism
We’ve all heard it before, plagiarism should be taken as a form of flattery. Someone has decided that your work is so good that they cannot do any better and have therefore decided to take it upon themselves to right click > view source > select all and paste into the text editor of their choice.
This is a topic which I have always wondered how I would handle, if the truth be told I wished it was something that I would never have to find out. However, recently I’ve had to deal with this and I now know that I do not see it as a form of flattery at all.
I’m sure we’ve all seen some form of rip off whether it be Dan Cederholms problems with LogoMaid or more recently with Tim Van Damme’ business card website.
As a designer you will have spent hours wireframing, prototyping, crafting your pixels and countless hours tweaking small elements within your site until it is sitting perfectly.
To find out someone has copied your work, is a kick in the teeth. They have managed to recreated your site in a matter of minutes and with a few alterations to content and logo etc. they are able to fool other people into thinking that it is all their own work.
I’m not sure what I’ll actually do regarding this blatant copy, I think it would probably be best to sit on it for a while and see how things progress. If you have had a similar problem please leave a comment highlighting how you tackled the issue.
Sadly they haven’t hot linked anything so I can’t do ‘A Tim’ and swap an important image like the background for a picture of The Hoff.
Using HTML5 elements
Not so long ago I highlighted the fact that this website had made the jump to HTML5. However, within that post I only highlighted the reasons for doing so without going into much detail.
It had been my intention to talk in depth about how everything had been created and I had originally planned to wait until the site had bedded in before writing this post, however a recent comment within that post has made me do the write up now.
In that post I alluded to the fact that I wasn’t sure if I had used these new elements correctly, if the truth be told, I was in fact looking to my peers to point these errors out, allowing me to address them. Since then I’ve had a few Twitter DMs highlighting problem areas throughout the site.
Now that these have been addressed and after a quick modification to my page layout which was highlighted in the last post, I feel it would be best to talk readers through the pages of the site and pass out some of the information that I have learned since taking on this redesign.
As you can see most pages adopted a strict three column layout, with the main content area on the left, the related content in the middle and the extras, for want of a better word, column occupying the far right hand side of the site.
With this site being coded in HTML5 I wanted to cut out all divs and if I could classes and ids. Therefore the layout follows a structure something along the lines of this diagram below.
Straight away you should have noticed the distinct lack of divs within the source code. I have still kept a div acting as a wrapper, partly due to the fact that I wasn’t sure how to contain all of the new elements. Perhaps that’s something which I can address in a future blog post and perhaps put forward to the spec committee as something which should be implemented. If you do know of a viable alternative then please let me know, although I would like to state that I want to stay away from using a section or article tag, as I don’t believe these methods to be what the elements were intended for.
Dealing with Internet Explorer
I wrote about this in my previous HTML5 blogpost but there’s no harm in mentioning it again, especially if I’m going to be dissecting various parts of the site. As we’ve come to expect, Internet Explorer does not play ball, it struggles to understand these new elements. As a result, Remy Sharp has produced a piece of javascript which will help these pages render as they should, simply link it into your site and you’ll be laughing. However, I should point out that if the end user does not have javascript enabled you will run into problems.
You’ll also need to remember and set your HTML5 elements to display block in your css file.
Let the writing commence
Now let’s get down to the nitty gritty of each individual element. If you’ve been reading anything regarding HTML5 you will have undoubtedly seen the following elements named; header, nav, section, article, aside and footer, all of these links will take you to their matching section in this blog post.
Although there are many more elements within the spec these are the ones that I will be focusing on throughout this article due to the fact that they have been utilized most often.
Header
Every HTML5 site needs a header element, no ifs or buts about it. You’re header element must also contain a heading level. Within this site my header element is the grey bar running across the top of the page, which displays my jQuery hover states that give a little bit more information as to what each page contains.
Some people may think it is a waste that I have not included an h1 tag with my name or brand in there but to achieve a minimalistic look I wanted to incorportate my name into the menu system which as a result freed a H tag within the header. Besides, I’m of the opinion that using an H1 for your logo is a bit of a waste.
Due to the information that was going to be present within the header section I decided to mark it up with an h5 tag simply because there would be more important pieces of information on the page which demanded a higher heading tag.
Update: Since writing this post the header element has now changed to hgroup.
Nav
Originally I had my nav within the header element but was told to move it outwith as it wasn’t validating. However, this is no longer the case and you can thankfully place your nav element within the header. You still need to structure your list like you would normally with either a unordered or ordered list, depending on your preference.
Section
I’ve used the section element to contain my main body of content, which would normally be the content and sidebar areas. This is one such area I am still not sure about but it seems to serve it’s purpose well enough. If you have a suggestion for how I should implement my section element then please let me know.
Article
I’ve used the article tag for what you might expect, my main content area: blog posts and primary content areas where the biggest parts of information can be found.
Aside
This proved to be a sticking point for me when designing the site, if I have interpreted the spec correctly I believe that the aside element should be used for blockquotes etc. something which is closely related to the content but this is not how I set out to work with them. When looking through the spec I didn’t see anything which could relate to a sidebar section, section and article could be used but it didn’t look or feel correct.
I finally decided on the aside element because I would be displaying content which tied in loosely with the main content on the page. Information that you will find in the aside elements range from tags and categories for blog posts to social network links on my about page.
Footer
The footer element is as you would expect, a place where you put all your copyrighted information such as company, vat and telephone numbers. Within this site, I have also included three list items which display further information about myself, the site and my latest comment on twitter.
However, a footer doesn’t necessarily have to be at the bottom of the page. For example, some people have decided to include the footer tag within a blog post, holding information such as date, comments and tags.
Conclusion
I hope this gives you a good insight into how I created my own website and has helped to answer a few questions, opposed to creating them. If there is demand I might look into breaking down other elements such as time or elements like form input fields.
If the above has given you a taste to continue reading up on html5, and if you have a month or two free, then why not start reading the spec which can be found here http://www.w3.org/TR/html5/semantics.html.
Realignment
It’s only been thirteen days since I launched the new look site but I’ve already decided to start fiddling about with the template. Infact in my last post I stated
I suppose if you don’t look back over old code and think of new and better ways to change something then you’re not doing your job correctly.
and that’s exactly what has happened here. However, instead of going about creating an entirely new layout, I decided to take Simplebits approach of realignment. Why not, I liked alot of elements that had been created for this design, why should I throw all of that away.
The main reason that some modification has taken place was due to me trying to be too fancy! On my own personal sites, I’ve always adopted the same philosophy “keep it simple stupid”. This philosophy was probably why the last iteration of my site lasted for nearly four years. It’s something I was told when I was very young and it has always stuck with me.
When I was coding up the last effort I decided to try and step away from my usual way of thinking. Although the colour scheme was simple, I tried to, ultimately, be too fancy when designing page layouts. My fascination with trying to manipulate variations of multiple column layouts for each page, on the 960 grid system took over and my site probably suffered from that. A different layout for every page just didn’t work, at least not the way I had went about it. Although the main content area was always located on the left hand side I believe that the end result could have affected the way that users went about using the site.
If you are a returning user to the site you will have noticed the change, the menu is still the same, the typeface is still the same, infact the majority of the elements within the template are still the same. The major element which has changed is the page layout, this time around I have decided to incorporate a three column layout on every page barring the portfolio, which as you will have guessed has stayed the same. Don’t worry, the site is still coded in html5.
I think I’ll be much happier with this layout, as I hope you will be too. Due to these new implemented changes I’ve got a few things still to sort out but I don’t envisage there being many problems with this change over.
On a side note, my next HTML5 post which was promised in the comments section from the previous blog post is still coming but has obviously been put back a little due to the template modifications which will have to be discussed. So pop back over next week if you’re interested in seeing how the pages have been coded.