Prepressure 2012: HTML5 & CSS3

Rainy winter holidays are the ideal moment to tinker and try new stuff. After hearing Bill Blinn from the TechByter podcast talk about the HTML5 redesign of his web site, I got interested as well. My WordPress site had been using the same template for years. Maybe it was time to clean up a little and get with the times? This page documents how I got from this…

The home page before the upgrade

…to this

The homepage after the upgrade of the theme using HTML5

It serves as a reference to myself and hopefully as a collection of useful tips on upgrading a WordPress theme to HTML5 and CSS3.

The goals

Before starting work on the upgrade, I spent some time thinking about the various aspects of the design that needed to change. There were a couple of things that I absolutely wanted to keep: The layout should remain clutter-free and lead the eye to the main article. The 3-column page geometry with navigation to the left, content in the middle, and various bits and pieces to the right may be a bit outdated but it meets my goals en is easy to maintain.

Even with those restrictions in mind, there was still room for improvement:

  • The width of the WordPress theme that I originally used was 904 pixels wide. That seemed reasonable 5 years ago but even on monitors that are 1024 pixels wide, it leaves some unused room to the left and right. Most of the Prepressure visitors have really large monitors so going for a much wider layout might be a good idea. I did however want the site to remain usable on tablets like the iPad.  After some searching around I decided on a 960 pixels wide design, mainly based on the arguments of the 960 Grid System site.
  • Switching to HTML5 was the second objective. The new standard offers a number of advantages, many of which at this point in time seem irrelevant to the average surfer. Various articles on the web suggest that a switch to HTML5 offers no SEO benefits. It doesn’t have a negative impact on the search engine ranking either. I just wanted to go for it ‘for technology sake’, hoping that the site would remain usable with somewhat older browsers.
  • Along with HTML5 comes CSS3 which is much more interesting. It includes the ability to use web-fonts – using one’s own typefaces to give a site a more distinct look. I liked the idea and wanted to use a distinct, friendly, and slightly compressed headline font for titles and a clean sans serif for the body text. CSS3 also includes an option to use drop shadows. Everyone knows that real designers use drop shadows, another compelling reason to update the site.
  • One of the ideas I wanted to toy around with is moving a general description of what the Prepressure site is all about is to the header, to save space and provide some general information about the site on every individual page. I toyed around a bit in Photoshop but couldn’t come up with an acceptable mock-up. I’ll save the idea for later.

This was also the ideal opportunity to fix some things that had been on my to-do list for ages:

  • Eliminate the Breadcrumb plug-in because the same function is also present in the Fold Page List plug-in which creates the navigation in the left column.
  • Expand the copyright message and move it to the bottom of each page.
  • Clean up the navigation in the left-hand column.

The update process

To create the new theme and have the ability to fool around without affecting this site, I installed a copy of WordPress 3.3 locally on my PC.

  • I initially tried doing this using XAMPP, a free Apache/MySQL/PHP server. It took some time to figure out that XAMPP 1.7.4 does not run on 64-bit systems.
  • I installed Wamp, the Windows alternative, instead and that did work (although I had to change a ‘Deny from all’ setting to ‘Allow for all’ in ..\alias\phpmyadmin.conf in order to get access to the mySQL database). Importing the Prepressure database proved to be a hassle, due to its excessive size (90+ MB). Instead, I pasted a bit of content from the webserver to the local test server to get me going. This setup proved useful to fool around until the code was good enough to upload to my actual site.

To rework my existing theme to HTML5, I relied on the HTML5 First Look course of James Williamson at Lynda.com. An article on Smashing Magazine about the TwentyTen Five theme also proved very useful. I still made some mistakes but the Adobe BrowserLab service proved useful for checking compatibility with older and current browsers.

Implementing web fonts turned out to be quite a job.

  • Initially, I looked at the fonts at the Google web fonts service. I have no experience with or doubts about Google font hosting but I decided that not relying on an outside service would be better in the long run. Google has a habit of abandoning services or altering their license, even if many web developers meanwhile rely on them.
  • Next, I turned to the FontSquirrel website where you can download free fontface kits. I went through that list, discarding fonts I did not like, fonts that only come in 1 or 2 styles (because having a lot of variants might be useful in the longer run) and fonts with an unacceptable end-user license. Among the fonts that made it to the shortlist were Aller, Mentone, Open Sans, Ubuntu, and Yanone Kaffeesatz. I tried most of them on my test site and almost gave up. Some of the fonts simply didn’t work for me when applied to the layout but I also ran into some quality issues. In some fonts, some characters would stick out or the little hole in the ‘a’ and ‘e’ glyphs would get filled up at smaller type sizes. In the end, I settled with PT Sans for headlines and Open Sans for body copy. I am not entirely happy with the Open Sans Semibold typeface but it will have to do.
  • After a few days, the rather bland look of PT Sans and its annoyingly plain ampersand got on my nerves. Another search brought me to exljbris.com and the Delicious font. Its distinct characters, nicely drawn ampersand and reasonable license convinced me to update the @font-face entries in my CSS-file once more.
  • Faux or fake bold and italics typefaces used to be a big problem in print design many years back. The same is now true for web design. Fortunately, MetalToad’s page about faux @font-face styles helped me fix this issue.

During the editing of the theme, I accidentally left one or two spaces somewhere in the functions.php file. This lead to an error message ‘Warning: Cannot modify header information – headers already sent’ when activating the new theme. It took me hours to figure this one out. Arrgggghhhh…..

Along the way, I even found a solution for that little smiley face that appeared in the footer of all pages. Apparently the WP Stats plug-in adds this. It is easily removed with a bit of CSS.

Some other small mistakes got fixed after I validated the home page using some reference sites.

  • Webpagetest.org is great for testing performance. I learned that the new homepage is almost 500K large. Part of that file size are the @font-face web fonts. I might be able to reduce their size by compressing them but that will have to wait until later. I tried switching on compression in WordPress but for some reason that did not work.
  • The W3C validator can check the syntax of the HTML code. An additional page can be used to check the CSS code as well.

Still lots of work to do

HTML5 log with a little CSS3 alike drop shadow applied

HTML5 is a pretty significant step forward in web development. I haven’t implemented all of its functions yet. An example of this is the proper definition of the publication date of articles, for which HTML5 has a new date tag. The figure and figcaption elements also haven’t been put to use yet. Most likely the HTML5 document structure also needs some refinement. None of this bothers me that much, since there are not yet any benefits to be had from these changes.

At some point in the future, the way images are handled on the site needs to be revised. Right now large images are 450 pixels wide. It would be nice if readers could click images and see a high-res version. Even within the existing layout, it might be useful if images were more detailed when viewing them on high-res screens (such as the one that will hopefully ship with the iPad 3). I need to do a test and see if scaling 600 pixel wide images into their allocated 450 pixel column offers better quality. On the other hand that does eat bandwidth.

I still need to find some way of putting structure in the left navigation list. Adding a bit of spacing between various sections would already be a major improvement.

Leave a Reply

Your email address will not be published. Required fields are marked *