Web designers would be wise to approach every situation with one thing in mind: simplicity. Simplicity is the cornerstone of designing a well-structured and highly flexible HTML/CSS design. I’ve found that all too often, many designers approach a website with one thing in mind: the “look” of the fully rendered site. They approach each page or screen with a definitive pixel-perfect image in their heads, and they execute the design process to produce each pixel as it was originally intended. // more
The Wisdom of SimplicityJul 24, 2009
Announcing ThumbSticks.comJul 8, 2009
After many months of diligent design, testing, and development, I have finally reached the first major release of my latest project, ThumbSticks.com. You may have seen the design for this site on my portfolio page for quite some time now. This creative design has finally become a reality! // more
A Whole New Web?Jun 25, 2009
Should we abandon rounded corner techniques that require additional HTML markup in favor of emerging CSS techniques that are not yet supported on all browsers? Apparently, the answer is an overwhelming YES. // more
An Event Apart @ BostonJun 22, 2009
I know it’s been a long time since my last post, but things have been busy! I’m at An Event Apart this week, which is a conference for UI designers such as myself. I’ll be making a few posts that have been “in the making” for quite a while now in the coming weeks, so look forward to seeing some new design tips and tricks in the days to come.
CSS Absolute PositioningApr 6, 2009
Absolute positioning is a very powerful CSS technique when used properly. Traditionally, when you use <div/> tags and the like, everything in your page design is generally stacked from top to bottom. Using absolute positioning gives you the freedom to place elements of your page just about anywhere you’d like. Here are some fundamentals of absolute positioning that can make your design appear more fluid, elegant, and easier to manage. // more
CSS in Print MediaFeb 23, 2009
Most of the time, web designers will optimize a site to display on screen media (any type of screen, such as a computer monitor or a mobile device screen). If your site has a lot of information that could potentially be printed out by your visitors, you should consider adding print-specific CSS to your design in order to make your print media visitors happy. Depending on your design itself, the visitor’s printer, and the visitor’s web browser, you can get a number of different results when printing a given page from the internet. Here are a few quick and simple steps you can take to make your site display just as well on paper as it does on the screen. // more
RetrospectiveFeb 5, 2009
This is a paper that I had to write for a psychology class that I’m currently taking. I had fun in writing it, so I figured that I would share it with more than just my professor. Without further adieu… // more
New Server, New ThemeFeb 2, 2009
In the process of moving my blog to a new web server, I decided to take this opportunity to create a new theme for the site. The theme changes depending on what time of day or time of the year that you visit, so check back often! I’ll continue to add little customizations for holidays, special occasions, etc. (what a wonderful use of my time it is to create little meaningless PNG images). Let me know what you think.
Rounded Corners in Mozilla and SafariJan 26, 2009
The W3C’s CSS3 specification includes an oft-requested CSS attribute called border-radius. Using this attribute, you can create rounded-corner boxes that use no images, script, or other fancy DHTML tricks (pure CSS). This will make your site flexible, faster, and more accessible. It’s not yet supported in Internet Explorer 7/8, but other modern browsers have already introduced support for this fantastic CSS feature. // more
Pure CSS Image HoverJan 5, 2009
Many site designs will feature varying types of image “hover” states, where an image or background image changes when you move your mouse cursor into that area of the page. Traditionally, this change in image is handled via JavaScript. It’s fairly easy to write a small script that swaps out images on mouseover, but there are a number of disadvantages to this approach that have pushed many web developers toward using a CSS-only method of achieving this exact same effect. This tutorial describes exactly how to implement a pure CSS image hover effect. // more