It was a long time coming, but I've finally redesigned this site. From the graphics right down the the XHTML/CSS, everything is new. While most designers (myself included) get the urge to redesign their portfolio sites all too often, this redesign was definitely needed. It's been over a year since there's been any major changes too the site, and a lot has happened in a year! Below I'll go over the great new methods and techniques I used that bring the site to life.
I've put together a completely new Cascading Style Sheet (CSS) base template which I'm using on this site, and any new projects going forward. It includes Eric Meyer's CSS reset, which is used to reset all the default styles and eliminate browser inconsistency. If you haven't seen it, or used it, I highly recommend checking it out - it can make your life much easier! The template also has neatly divided sections with comments and some base classes and ID's such as #header, #footer etc. That are used on almost every project. You can grab a copy of my template here.
-moz-border-radius: 10px; /* Firefox */ -webkit-border-radius: 10px; /* Chrome, Safari ... */
And to future proof your design, add in the following code for when browsers officially support CSS3:
It's that simple! Any element with the above style will now have rounded corners.
CSS sprites have been around for a while, but are still worth mentioning. Sprites involve combining multiple images into one image, in order to reduce server bandwith and page load times. I'm using sprites for the navigation buttons at the top of the page. If you hover over the button you'll see it changes from a white background to a black background. The black button is actually the same image file as the white button:
But using CSS, only half of the image is shown at a time, making it look like a single image file. There's a great artilcle about CSS Sprites on A List Apart.
Facebox is a jQuery-based, Facebook-style lightbox which can display images, divs, or entire remote pages. For a long time I've been using the excellent LightBox from the folks at HuddleTogether.com, but it has one major drawback - it can only display images, no text or other content. This is where Facebox excels, it can display anything, simply by adding the the 'rel' attribute to a link tag:
<a href='http://example.com' rel='facebox'>example</a>
Click here to see it in action!
For better or for worse I've decided to leave Internet Explorer 6 out of the design process for this site. There are just too many new and excellent features available in modern browsers to not take advantage of them. And it would be almost impossible to use these features while still designing for IE6. One of the new browser features I used on this site is transparency support in PNG files. The bird graphics on either side of this page are actually one large PNG image with the middle being transparent. The other major feature I'm using is the new CSS3 selectors, although they are still not supported in IE7 or IE8. So if you're using any version Internet Explorer (epecially version 6 ... or below) you really need to switch to one of these great browsers!
Have any great tips or tricks I may have missed? Share them in the comments!