> Autopsy of a site redesign

newlogo

The good part of having a personal blog is that you can play and experiment with it. I’ve finally abandoned the XHTML madness and embraced HTML5, I explored the canvas element (you can see it in the logo) and finally added tablet and smartphone compatibility thanks to media queries. Read more for backstage access.

Starting from IE9 the designer is in charge. We are a little less slaves of browsers discrepancies and we can enjoy our job once again (or for the first time?). Of course this is not completely true, IE is still lagging behind, but is getting there. I must say that I was surprised to see that the layout was working with very small adjustments on IE9.

Webfonts

Actually the worst part has been choosing the right @font-face. Each browser on each platform renders text in a very different way, and finding the type face that looked good on all clients wasn’t easy.

A very good resource is Google webfonts, I wanted to use Oswald but anti-aliasing is so different between browsers that it almost looks like you are using different types on each client.

The alternative is to host your own optimized webfont. Fontsquirrel has a very good collection of ready to use fonts. I’ve chosen Miso Regular for cubiq.org, but the default font-face kit wasn’t rendering fine on anything but Chrome. Fortunately Fontsquirrel has an invaluable conversion tool, and the solution was to set X-height Matching to Arial in the expert options.

Another not so trivial aspect is how to declare your @font-face in the stylesheet. Paul Irish suggests the “smiley” solution:

@font-face {
  font-family: 'Font';
  src: url('Font.eot');
  src: local('☺'),
    url("Font.woff") format("woff"),
    url("Font.otf") format("opentype"),
    url("Font.svg#grablau") format("svg");
}

But it doesn’t work on Android. The optimized font file size is rather small, so I prefer to offer mobile users the font-face powered version. I ended up using the declaration suggested by Fontspring:

@font-face {
	font-family: 'Font';
	src: url('Font.eot?#iefix') format('embedded-opentype'), 
	     url('Font.woff') format('woff'), 
	     url('Font.ttf')  format('truetype'),
	     url('Font.svg#Font') format('svg');
}

Canvas (aka ain’t flash!)

I also wanted to study the feasibility of a flash-free rotating 3d cube in my logo.

A full CSS version might be possible, but I chose the canvas path for its wider compatibility across browsers.

Please note that the cube is not webGL, but plain old 2d canvas with a faked 3d effect. The logo and rotation are calculated on the fly (no pre-rendering) and the code involved is just 4kb un-minified (no external libraries used). You can enjoy the simplicity of the script by looking at the source code.

I’m using requestAnimationFrame for a steady frame-rate and to reduce CPU usage on compatible browsers.

All the script does is to make some basic matrix rotations. Since we are not in a real 3d world, the only challenge was to decide when a side of the cube is back and not visible to the viewer’s eye.

This has been solved with a dirty trick. The light source comes straight from the front. I’ve added a vector for the color shading that is converted into a value from 0 to 255 (the RGB intensity). With trial and error I’ve found that a color intensity lesser than 22 means that the front light doesn’t reach the cube side that translates into the side not being visible to the user.

Basically if the light doesn’t reach a side, the user’s eye (that is parallel to the light source) can’t see it and so there’s no need to draw that face. I think it’s easier to understand looking at the code than to explain.

I bet there are better ways to accomplish the same task, but I’m no 3D guru, and my high school trigonometry is rusty to say the least… but hey, it works and it’s free for you to use.

The result is compatible with all the browsers I was targeting (anything equal or above to IE9), performance is good even on older iPhones and CPU usage is very low. The black ship in this scenario is Android tablet, it’s really sad to see a higher frame-rate on a first generation iPod touch than on a latest generation Android tablet.

Media queries

If you are targeting [r/d]ecent browsers @media is all you need to serve different styles to the various platforms.

For my blog I use one default stylesheet with two variants: one for tablets…

@media screen and (min-width:481px) and (max-width:800px) {
...
}

… and one for smartphones:

@media screen and (max-width:480px) {
...
}

Note that I use max-width:800px (and not 768) so to better serve Android tablets too.

I also don’t like the max-device-width directive, I find the max-width more “polite”, easier to debug and less prone to false-positives.

If you are on desktop and resize your browser you’ll see the three site versions.

Why not an elastic layout instead? It might work, especially for tablets, but there are certain elements of the layout that need to be refactored to better fit the smaller screens. This is especially true for smartphones where links must be larger, page scrolling/swiping should be reduced and less importants bits (eg: the sidebar) should be relegated to the very bottom of the page.

/Share the joy

/Reactions

    • Author: Max
    • Posted on: 2011/07/17
    • At: 12:58

    neat job!
    one of the best designs i’ve seen in a while

    • Author: vega9.com
    • Posted on: 2011/07/17
    • At: 13:18

    Nice redesign, just 2 things:
    - the spinning cube is non antialiased on Chrome
    - I liked more the colors of the old version, eventhough the current ones look more professional.

    • Author: Felix
    • Posted on: 2011/07/17
    • At: 13:46

    Looks great! Does it work in IE6? ;)

      • Author: fr3ino
      • Posted on: 2011/07/17
      • At: 19:01

      He’s no magician… ^^

      • Author: Greg
      • Posted on: 2011/08/11
      • At: 14:20

      Should he care if it works in ie6?

    • Author: improper
    • Posted on: 2011/07/17
    • At: 17:56

    nice job!

    • Author: RaphaelDDL
    • Posted on: 2011/07/18
    • At: 03:00

    Cubiq, i just loved the smartphone design. I’m on iPhone 4 and the readability and everything else is smooth, not too many graphics to interfere on the reading.

    Keep on there, and just a sidenote: While all the website is great, only the cube itself is on low resolution so it’s kinda weird, maybe you should’ve try make it for retina also?

    • Yes, I know about retina issue, thanks for the report. I’m working on it.

  • I like the professional look of the site. Thank for sharing your experience with html5 and sharing some of the source code. I want to give my site a redesign (and actually include more), but haven’t had the time.

    • Author: Charlie Demko
    • Posted on: 2011/07/22
    • At: 13:35

    Love the cube … great feel to the site too.

  • If only everyone coded things as carefully as you do.

  • Looks great, Matteo! Nice work, esp. on the media queries. =)