Last year I registered WordPressFreelancer.com with grand plans to build a directory of freelancers who work with WordPress complete with a job board and blog consisting of freelancer interviews. Once I sobered up, I realized I already had more than enough on my plate and that this probably wasn’t going to happen.
Recently however, I decided to put the domain to use and create a simple, well-crafted site to showoff my WordPress -fu. It turns out it was also a good excuse to play around with HTML5 and some CSS3 features which have recently been rolled into most of the popular web browsers.
The site is composed of fully valid HTML5 markup and uses Remy Sharp’s HTML5 enabling script to get all versions of IE to play along nicely. I used Google’s recently released Font API to render all of the text in Vollkorn. In terms of CSS3, I’m using transform on the avatar and to rotate the transparent loading PNG when portfolio images are clicked. I’m also using gradient on the form button and text-shadow to make the text more readable on the textured background.
With help from the recent ALA article Responsive Web Design from Ethan Marcotte, I was able to create a fluid layout that looks great on any screen. I used CSS Media Queries to tweak the CSS for several different screen widths, maintaining a nice neat layout for every screen size. To see this in action, go to the site and try resizing your browser window. You’ll notice the portfolio goes from 2-column to 1-column and the 3-columns of text go to 1-column as the browser window decreases in size.
For IE6 users, they get Andy Clarke’s lovely Universal IE6 stylesheet which delivers a simply formatted page in black and white.