HTML5 and CSS3
Being spring I thought it was time for a clean out. As you might notice, the site has changed, on first glance it might not be anything major apart from the new navigation the site is sporting but if you take a glance under the hood you’ll see a whole host of different changes. New mark-up, stylesheets and a grid layout based on the 960 grid.
As with most people, the overhaul started innocently enough, with a little tinkering here and there however it wasn’t long before I decided that I’d be best ripping everything out and starting over. 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.
HTML5 elements
After seeing Bruce Lawson detail his journey on HTML5 for his own site, at the start of the year, I became very eager to try it out for myself.
I read with much enthusiasm as he tried to figure out how to use certain elements, the challenge seemed to be something he enjoyed and that was something I wanted. I’ll be the first to admit that I don’t have as good an understanding of HTML5 elements as other people, infact if you look at my code you may notice many mistakes where I’ve used elements in the wrong place or I’m using entirely the wrong elements for it’s allocated job. If you do notice anything like that then please use the comment form below and point them out.
If you’ve been reading up on HTML5 you will know there’s a slight problem with it in the good old Internet Explorer browsers, it doesn’t work. However thanks to a brilliant piece of javascript by Remy Sharp it displays as it should.
Bruce Lawson has also detailed that
Firefox 2 and Camino 1 both use Gecko 1.9 which has a bug and so gets grumpy if you don’t serve the page as XHTML.
So for all the Firefox 2 and Gecko users out there, I’m sorry but the pros outweigh the cons for me, as this is something I desperately wanted to test.
There are still a few bits and pieces I need to sort out but other than those, I feel that the new site is almost ready and I have to admit that I’m very happy with it.
CSS
The CSS for the site, has been completely rewritten making everything more streamline and getting rid of alot of ids and classes that I hadn’t been using in the last iteration of the site. I’ve also made use of CSS3 selectors such as text shadow which has been used on my headings, box shadow and border radius. Pseudo-elements for my lists throughout the site.
I’ve also had fun implementing a few webkit transitions throughout the site, to get certain elements of the site animated. However, that is only available in browsers which are based on the webkit engine such as Apple Safari and their iPhone, Google Chrome and the Android phones.
Scripts
My good friend Mike Robinson produced an absolutely stunning piece of php to display my articles page exactly how I imagined it, with tags, categories and dates displaying their description and value.
I’ve also decided to give jQuery a try as it’s something which I’ve seen become adopted more and more by websites recently, I’ve implemented a filter for my portfolio page where users can select the types of projects they wish to view. Another jQuery element which has been incorportated is the scrollToTop function, created by Craig Wilson.
There’s a few more jQuery functions floating about this site but I’m not going to mention them all, I’ll let you try and see if you can find them.
Grid Layout
You might also have noticed the show/hide grid button which is located to the right of the main menu navigation, at the top of the page. You will often hear designers talking openly about using grid based layouts and the perks that they offer. However once basic prototypes and wireframes have been accomplished the grids are removed. However, I decided that it would be a good idea if the grid up was left up, so that people could see the layout and analyse it.
Final Thoughts
Please note that this is an experiment and like all experiments I’m sure I will have went wrong somewhere along the line, but if you can’t experiment on your own site then where can you. I’m not entirely sure if I’ll keep these HTML5 elements, I might resort back to using divs but coding them up so that they are HTML5 ready ie, section would turn into div class="section" Again, if you have any suggests then all constructive criticism is welcome. Further reading for the HTML5 spec can be found here.
If you find any broken links then please contact me through the contact page or at jack@jackosborne.co.uk.
Richard Clark contacted me through email to alert me to a fix that is available for the Firefox 2 and Camino 1 highlighted above in the quotes.
However, after reading the post I now remember reading another post by Bruce, in which he highlighted the fact that he wouldn’t be using this as it forces an incorrect output. His reasoning can be read here – http://www.brucelawson.co.uk/2009/html-5-elements-test/#comment-592462.
I think it looks great. I especially like the look of the source code, and that doctype, so easy to remember. I really hope HTML 5 gets adopted quickly.
Looks good Jack! Thanks for the shout out, it was my pleasure to help
I was thinking about moving akamike to HTML5. If you decide to stick with this for a while, indicating it was a success, I might just act on that thought
[...] a lot of other people introducing both HTML 5 and CSS 3 into their work lately I’m sorry to say that I [...]
@steve
The doctype is great, totally agree with you there, although I’m not sure if I’ve done it correctly, I’ve seen a few sites implementing it differently but this one seems to validate ok, so I’m sticking with it until someone pulls me up about it.
I also agree with your adoption statement or at least I hope to see more people blogging about it. If the truth be told, I wasn’t exactly sure how to implement some of the code and as the post above states I’m sure I’ve made a total mess of some areas but that will all be resolved in time when people start to find the correct or best suited methods.
Another interesting thing about HTML5 is that when you are using style or script tags you no longer need to use type=”" attributes. That was another pointer from Bruce.
@mike
Honestly can’t thank you enough for that excellent piece of PHP. It was a total life saver. Although the articles page may look quite plain it is probably my favourite page on the site.
I’ll probably stick with this for a good while due to the amount of time it took me to lay out the prototype and the amount of things I had to read.
- – - – - – - – - -
I still have alot of work to do however, the site is by no means finished. The top menu pages all validate however the actual post pages do not.
I’ll also have to think of a different way to code this comment form as someone pointed out I had used a footer in there. I thought it was the most logical way to lay the form out at the time, because the footer would have held the comment preview box and the subscribe checkbox, which are the last elements of the form section, but it doesn’t validate.
For some reason the two plugins mentioned above to not sit in their specified areas, which could be down to the fact that they are sitting in the footer? That’ll be something for me to look at this coming week.
This is excellent Jack. I found your site through the HTML5 gallery site and gave it a rating.
As mentioned above I really like the new doctype and elements that are available within the spec. I’ll be visiting again soon to see how you are getting on with your HTML5 quest. You’ve mentioned above that you’re trying to get your pages to validate, where do you validate these pages as I don’t think the W3C would do this just yet?
@Chris
I’m using this validation website to check my site. I’ve now got every page validating correctly, even the form section which was causing me some problems. However, I’ve not went back through my old posts as that would take quite a while.
Thanks for leaving a comment, hope to hear from you again.
I’ve been having a look through your source code and I’m wondering if you would be able to give me a quick breakdown on what elements you should use for certain sections.
As you mentioned above, you have said that you weren’t sure if you have used the elements correctly. It would be quite interesting to hear why you have decided to use the elements the way you did.
@Craig
If you’re willing to wait I’ll be writing up a blog post on why I decided to take certain decisions. I’ve had one or two inquiries asking the same question, so it would probably be best to address them in a blog post. If you’re lucky I might throw in a few diagrams
I’ll be away at FOWD for the remainder of the week, so I won’t get a chance to publish anything until after the weekend.
Nice post, I’m looking forward to seeing the next one following up from this. I hope you enjoyed FOWD, hopefully I’ll get to go there one day.