I decided to re-work the car animation on the right with something a little better suited for image animation than jQuery. Two methods came to mind: SVG (scalable vector graphics) and canvas. These two have some overlap, but knowing their differences allows you to use them effectively. Here’s the breakdown:
SVG |
Canvas |
|
|
Media Queries are a powerful feature of CSS 3 because they allow a single page to be readable on a variety of devices (pc, tablet, phone), all through targeted css stylesheets. By using simple rules, media queries will swap css stylessheets dynamically based on attributes like screen size and orientation. A great series of articles written by David Powers over at Adobe discuss how to effectively use media queries. If you want a deep dive, read over the W3C specification for CSS 3 media queries.
Take an example: you want to target a screen size of 640 pixels or smaller. Pay particular attention to the media attribute and the simple rule it contains:
<link href="small.css" rel="stylesheet" type="text/css" media="only screen (max-width: 640px)">
I wanted to replace the left hand menu header images with CSS-based fonts (web fonts =
eot, WOFF, ttf and svg) to implement media queries and to follow best practices. In addition, now we can use fonts which aren’t natively on a user’s device, allowing for a more unique feel to the site. To learn about all the new web font standards, head over here and read up on it.
A great resource to find free web fonts is fontsquirrel. They also have a nifty generator to help you get started.
Follow these steps to start taking advantage of the new web fonts standard…
The first version of this blog design, done in 2009, was really just a way for me to get familiar with CSS and jQuery (to make cars go up and down the side of the page). As time has gone on, I’ve become more and more interested in HTML 5 / CSS 3 and the huge usability benefits it has brought. Now that I’ve decided to rework the site to take advantage of HTML 5 / CSS 3, peeking at my page structure and stylesheets made me cringe. Organization was messy, not semantic at all and ridden with unused styles. It’s okay…I was younger then and in a period of experimentation.
A very important part of using the new features of HTML 5 is to have a well organized, semantically correct page. You see that menu on the left?…completely reorganized the structure, incorporating the <nav> tag, and then used media queries to change the styles.
Detailing the reconstruction of the blog design to take advantage of HTML 5 / CSS 3 techniques.
© Copyright subtle detour. Powered by Wordpress. subtly taking you off course since 2009.
