Blog

Now with added HTML5 and CSS3 goodness

by

As long time readers will already know Dave likes to change his site pretty much yearly, but this year I shot myself in the foot and suggested an update before Dave even had chance to consider the idea.

To be frank over the year certain areas just started to bug me and the site no longer showcased the company or Dave in the way I thought it should. This coupled with new functionality dropped into the site over the year it seemed time to have a rethink and refocus what the site was delivering.

HTML5

High on the request sheet from Dave was to try and embrace the movement towards HTML5, whilst at Bronco we’ve begun to slip more CSS3 prettiness into our client sites we haven’t made the move to HTML5 so this was going to be a bit of a learning curve.

As much as I’d love to say the site is fully HTML5 it simply isn’t, it’s using the new doctype, tags and attributes but some stuff just isn’t ready yet. Take for example the search input field, it’ll be a nice little function for sites but until you can style it to match your design it’s next to useless.

To my knowledge in order to build a fully HTML5 site you have to pretty much ignore any browser over a year old, but as we do still have some users on IE6 we don’t want to simply send them away without the ability to see what we have to offer. Of course by using some things the site isn’t looking so hot in IE6 but at least everything is both readable and usable.

CSS3

Like I mentioned we’re using some of the new CSS3 stuff to give the site that extra shine too, but this isn’t the only reason to be using this stuff; it also reduces the loading speed of the site. Rather than be using images for rounded corners or gradients we can using CSS to the same effect. This has the benefits of being easier to edit as well as reducing the amount of images that have to be downloaded.

Functionality

We couldn’t do any work on Dave’s site without adding some bits of extra functionality, primarily we’ve integrated the reply to comments feature that WordPress has had for some time. Now people can reply to particular comments so that the conversation flows more naturally. Also we’ve integrated out own shorturl’s into the posts so you can quickly grab a link to a blog post in order to tweet out anything you find interesting.

Hopefully you like the design; we’ve not changed too many things from the previous version as we’ve tried to keep focused on cleaning things up rather than creating new issues that come with a whole new redesign. If you see any issues with the site then leave a comment and we’ll look at getting them fixed, if not then feel free to leave a comment anyway. :)

Added: If you do notice anything awry then I find Ctrl+F5 is fixing most stuff.

17 Comments

  • Peter 961 days ago

    http://www.webconsul.de/

    the site renders fine in opera + safari on a mac.

    great work and nice features.
    love your redesign!

    sincerely!
    Pete

    Reply
  • Lea de Groot 961 days ago

    re IE6 – I think its time to treat it like the other dinosaurs – make sure the page is readable, but don’t bother putting in the pretties beyond that.
    Its 2010 after all! :)

    Reply
  • thecodezombie 961 days ago

    Wasn’t some recent figures released saying IE (as a whole) has slipped below 50% market share?

    Think we still gotta consider the dinosaurs, but perhaps for not much longer.

    CSS3 – border radius still not supported for any released version of IE (IE9?)…so watch out for that curve-ball!

    Reply
    • Kean Richmond 961 days ago

      Border radius is now supported in IE9 beta

      Reply
  • Gary 961 days ago

    http://www.justsearching.co.uk

    HTML 5 and CSS3 have had some what of a boost recently with lots of talk about how good it is.

    As its been said though, without people upgrading to the latest browsers its not going to be seen for a long while.

    If you take the video element of HTML 5 you still need to add the code that will show the video in non HTML 5 browsers which adds to your source code.

    Reply
  • Dan Taylor 961 days ago

    http://www.dantaylorseo.com/

    Renders fine but looking at the code – and from my (brief) understanding of HTML5, are the header and footer tags also for header and footer of individual sections?

    i.e. the title of the post and date/category data etc should be in a header tag also and the author info in a footer tag?

    Please correct me if I am wrong as I would like to know either way.

    Dan

    Reply
    • Kean Richmond 961 days ago

      From what I can find you are right, the header tag could be used in this way within the article tag but I wouldn’t add the tag here just for the sake of semantics, it would have to be necessary for some other reason, such as styling.

      In the case of footer I can’t find anything that gives a definitive answer, it could be argued this may be more semantically correct in a footer tag or an aside tag. When more people start using HTML5 I think the distinctions and uses of particular tags will become more apparent.

      Reply
      • Dan Taylor 960 days ago

        http://www.dantaylorseo.com/

        Surely the whole point of HTML is semantics? Using the correct tag in the correct place, for the correct items (i.e. why we no longer use tables for layout).

        The tags should be used for what they where intended and not if they where “necessary for some other reason, such as styling”.

        Just my 2 cents worth :)

        Reply
      • Kean Richmond 960 days ago

        Maybe it’s just personal preferance then. When it comes to code I like to keep things as uncluttered as possible and I don’t yet see a benefit to users of using tags simply for semantics, though I’m prepared to be proved wrong.

        Reply
  • Alex 961 days ago

    http://expertiseonline.net

    The site looks great! HTML5 and CSS3 have really taken off lately and I’m glad that’s the case. They offer a lot of improvements to appearance and usability. The problem I think a lot of us are going to run into is, at what point should be consider going back to our clients’ sites and updating them with the new standards? It seems wrong to neglect older sites, but at we’re not yet at the point where we could implement HTML5 and CSS3 fully without losing some existing functionality/design elements.

    Reply
  • seriocomic 961 days ago

    http://www.seriocomic.com

    Kudos for removing all of the normal WordPress cruft and making it clean and fast (W3 Total Cache certainly helps!).

    Reply
  • Dave 961 days ago

    http://www.djb31st.co.uk

    Looks like there is a small issue on chrome with the border radius of the comment boxes

    http://imgur.com/wU1aX

    using 7.0.517.24 beta

    Everything else looks good though :-)

    One comment i would make though is the white text on the green second level comments is a bit washed out on a monitor with poor contrast such as this one.

    Reply
    • David Naylor 960 days ago

      I kinda agree Dave, The green on my Decent Monitor is had for my to read, but then I’m in my 40s lol

      Reply
    • Kean Richmond 960 days ago

      The chrome issue is a known issue with -webkit-box-shadow on Chrome that they’ve yet to bother fixing. Given it has a small impact on the quality of the site it seemed like an acceptable thing to just let slide.

      On the comments I’ll take a look at a better solution.

      Reply
  • Wade Cockfield 957 days ago

    http://wickedwebdesign.com.au

    Overall, I should say it’s a great improvement.
    Well done!

    Reply
  • Dan 954 days ago

    http://www.keywordshack.com

    Am I the only one convinced that IE exists only so that one is able to download FireFox? :)

    Reply
  • Kylie 953 days ago

    http://www.1cd9codes.com

    Thanks for the great share and information. Wasn’t some recent figures released saying IE below 50% market share?

    Reply

Write your comment

Optional

The Bronco Family
Work With Us