Design Hive website (HTML5)

philwareham · 2010-12-14 17:31:19

www.designhive.com

I’ve just got our company’s new site design to a point where I can launch it. Still things to add to it though but I’ll fix that later (otherwise it will just sit in limbo for months while I do paid work). Uses HTML5 code where appropriate and a slightly customised version of Textpattern 4.3.0 (to bring some of the tags/code up to HTML5 standards). The code is built upon the excellent HTML5 Boilerplate which takes a lot of the legwork out of building a HTML5 site.

I have also optimised the site as much as possible for speed (averages around 95/100 on Google’s Speed Tools suite) and put basic CSS media query layouts in so it looks OK on small screen devices.

Obviously with all the HTML5 and CSS3 stuff, it’s gonna look best in a modern browser such as Firefox 4 or the Webkit based browsers, but it degrades nicely on ‘obsolete’ browsers such as Internet Explorer v8 down to v6 (well OK there are a couple of IE6 bugs still fix if I can be bothered).

Plugin used:

adi_calc
arc_twitter
bot_admin_tooltips
bot_privs
bot_write_tab_customize
csb_feed_image
glx_gravatar
glz_custom_fields
jea_pygments_txp
jmd_author
jmd_html
lam_browse_by
rah_replace
rss_admin_db_manager
smd_if
soo_plugin_pref
upm_image
upm_pending_notify
upm_textile_toggle
wet_link

I’ve sneaked a nod to Textpattern into the site footer too.

Any questions on how it works, then I’ll try to answer them.

Cheers, Phil

jakob · 2010-12-14 22:37:15

Very polished and great attention to detail!
Had to laugh at your announcement graphic: “Press space to continue”…

I have to agree with you about Paul Irish’s HTML5 Boilerplate. I’ve used it a few times just recently and it makes life a lot easier. The combination of modernizr and the css file works surprisingly well in legacy browsers too and the html ie class construction at the top makes it easy to target those browsers that need it (check out the source of informationarchitects.jp for an even more exhaustive version). Your two equal-width column layout works well when halved for thinner browsers and in terms of approach it’s much simpler to handle than the multi-width Less Framework (an instructive site for understanding the principle).

Interestingly, you use a lot of admin-side and social/teamwork/workflow-oriented plugins I hardly use.

You’re bang up to date with jquery 1.4.4. Did you experience any problems with that? I twice came across incompatibilities in as many days with other jquery plugins that worked fine in 1.4.2 (jQueryTools tabs for one) so I’ve been a bit wary of it (I daren’t tell you how long it took to discover the cause).

Last question: so what did you tweak in 4.3.0?

Bonus question: your special tips for optimizing browser speed? I saw you’ve minified most scripts and are serving images from a subdomain.

maruchan · 2010-12-14 22:49:28

Nice work! That was really interesting to view source on, thanks. What’s with the commented-out “handy tools” stuff? Going to replace those with TXP-based tools?

philwareham · 2010-12-15 09:59:03

@maruchan

Thanks! The commented out parts of the source code are for sections of the site I’ve not completed yet – a client area, job request form and FTP file upload.

@jakob

I have not noticed any trouble so far with jQuery 1.4.4 luckily – I do use jQueryTools myself on a couple of sites (including this one) but not the tabs part. I use jQuery UI for tabs on another site which works fine once you have stripped out the way overcomplicated CSS that comes with it. The jQuery stuff I use is pretty basic anyway – mainly jQuery UI for it’s effects core, jQuery Cycle, and the above mentioned jQueryTools.

There are actually very few changes needed in TXP 4.3.0 to make it more HTML5 friendly, some other forum members here have posted various info on how to do it so I’m personally not taking all the credit, but here is what I’ve changed…

In classTextile.php

Change any reference of <acronymn> to <abbr> as it has been deprecated – lines 123 and 435

Remove self closing / at the end of img tags as they are not needed any more – lines 119, 120, 121 and 1406

Remove slef closing / on <col> tags – lines 249 – 252 and 679

In txplib_forms.php

Change lines 19, 156, 194, 207, 220, 289 to remove self closing /

In comment.php

Change line 141 to:

$out = '<form id="txpCommentInputForm" method="post" action="'.htmlspecialchars($url).'#cpreview">'.n; // EDITED added '.n;' at end

Change line 144 to:

// EDITED n.'<div class="comments-wrapper">'.n.n;

Change ine 218 to:

$out .= n.'</form>'; // EDITED $out .= n.n.'</div>'.n.'</form>';

Note that the above takes a div wrapper out of your comment form, so if you previously had any styling aimed at that tag you’ll have to find another way to style your form without it – it was put in as a kind of hack in the first place to make forms validate in XHTML, see this post for info.

You could go further and change things like <br /> to <br> and meta tags etc but I did not want to make it too much work to upgrade and then customise Textpattern every time a new version is released.

On the subject of page speed, I’m going to write a few blog posts on my site over the next few weeks as there are a huge number of different techniques to improve speed. For starters here is a post about why I use subdomains.

Other than that, I make sure all images are ultra optimised for a start. Some handy links:

Clever PNG Optimisation

Yahoo SmushIt

ImageOptim (Mac software, further compresses any Fireworks, Photoshop pngs, jpgs and gifs)

Minify all your JavaScript and CSS using something like YUIcompressor, I use Coda on a Mac so I’ve downloaded a YUIcompress plugin to do just that. FYI I’ve not compress CSS yet in my new site as I’m still working on the CSS code at this point in time.

Last edited by philwareham (2010-12-15 10:01:24)

jakob · 2010-12-15 13:38:54

Thanks, Phil, for the detailed reply. My use of jquery is in principle very similar and I chose jquerytools over jquery ui for tabs as it is so much smaller if you are using only individual aspects.

Maybe a prefs switch could cater for the html5 / html4 differences in a future version of txp. For the moment I’ve stuck with xml-style html tags with the /> endings (as consistent with txp-tags). At least HTML5 is forgiving in that respect.

I can’t say I use acronym often but you’re right there. Things that I did differently recently was to use an own search form with input type="search" and the hilight="mark" attribute for <txp:search_result_excerpt /> but you don’t need to change the core for that.

I read your parallelisation article with interest and the link to ImageOptim and the YUIcompress CODA plugin. For the last few mini-projects I worked with espresso and liked it very much – will have to see if there is something similar.

wolfcry911 · 2011-01-14 03:23:31

Phil,
I noticed you’ve removed the self closing / on most elements in the core, but also use the jmd_html plugin. Care to comment on that?

philwareham · 2011-01-14 09:18:25

Hi Christopher,

Yeah, I removed any self closing / where I easily could, and left any others to be sorted out by jmd_html. It reduces the amount of work the plugin has to do and in theory would render the page quicker than if I’d left them all in place.

Regards,
Phil

EDIT: although HTML5 will also let you keep the self closing tags there as compatibility with XHTML, I decided to get as close to the ideal standard as I could.

Last edited by philwareham (2011-01-14 09:20:07)

wolfcry911 · 2011-01-15 13:17:52

very good, thank-you

Textpattern CMS

Textpattern CMS support forum

#1 2010-12-14 17:31:19

Design Hive website (HTML5)

#2 2010-12-14 22:37:15

Re: Design Hive website (HTML5)

#3 2010-12-14 22:49:28

Re: Design Hive website (HTML5)

#4 2010-12-15 09:59:03

Re: Design Hive website (HTML5)

#5 2010-12-15 13:38:54

Re: Design Hive website (HTML5)

#6 2011-01-14 03:23:31

Re: Design Hive website (HTML5)

#7 2011-01-14 09:18:25

Re: Design Hive website (HTML5)

#8 2011-01-15 13:17:52

Re: Design Hive website (HTML5)

Board footer