A New Design for a New Year

Posted Jan 24, 2010. Filed under Design.

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.

CSS

CSS Reset

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.

CSS3

In addition to the new CSS template I've also started using some CSS3 selectors. While CSS3 is not supported by all web browsers, the modern big players do support their own versions. Particularly FireFox, and browsers built on the Webkit platform such as Chrome, and Safari. The CSS3 selector I've used the most on this site is the new rounded corners with CSS. Rounded corners look pretty, but in the past they have not been easy to implement, involving fancy javascript, or using images. However with CSS3, rounded corners can be implemented with just a few lines of CSS code:

-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:

border-radius: 10px;

It's that simple! Any element with the above style will now have rounded corners.

CSS Sprites

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:

alt text

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.

Rich Typography

Typography on the web has been limited for quite a while, with only a few fonts that are guaranteed to be available to every user. Enter dynamic text replacement. This gives designers the freedom to use whatever font they choose, and ensures that users with different operating systems and browsers see the font the designer intended. There are a few different ways to go about this and I chose to use Cufon for this site. Basically how this works is, you upload the desired font, Cufon converts it to javascript, and you install the javascript on your site. Once installed you can simply use the CSS font-family selector to specify the font, and Cufon takes care of the rest! This technique is simple and works with all major browsers. The benefit of this is that you can have nice looking fonts, without the need for embedding the font into an image file, which is not search engine friendly. This can be seen in action on the title of this blog, and the text in the information bubbles at the top of each page. Check out this article on Smashing Magazine for lots more on dynamic text replacement!

Javascript

Facebox

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>

There was only one problem - most of my sites have been developed using the Prototype javascript library, not jQuery. But after a quick search I found that the Facebox script had been ported to Prototype by Phil Burrows.

Click here to see it in action!

Glider

Glider.js makes it easy to create a sliding carousel component, or a news/banner rotator. I'm using this script on the home page to feature my recent projects, and have used it on several other sites. It's lightweight, works in all major browsers and built on the Prototype javascript library so it fit perfectly into this site. It's also much simpler than many of the other flash-based carousel / news rotators out there.

Goodbye IE6

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!

In Summary

All in all, I feel the new design brings a lot more features, and a great new look to the site. Weather it's great new CSS techniques, or excellent javascripts that improve usibility, I hope you're able to use some of these in your new designs.

Have any great tips or tricks I may have missed? Share them in the comments!

Filed under Design. Tags: css, design, javascript, typography
Posted Jan 24, 2010 by Dan | Leave a comment
Like this post? Share it:                  


0 Comments


      No comments yet. Be the first!


Leave A Comment


name *
url  
email *


comment *

Preview Comment
Submit Comment!

GUIDELINES: I reserve the right to delete off-topic, inflammatory, or anonymous comments. Get your own picture next to your comment with a Gravatar account.