Header text gets all the love, doesn’t it? From Photoshop to the browser window, the focus seems to be on design elements like logos, navigation, and of course, header type. It’s great fun to use tools like Typekit to make your header text something a little less than ordinary. It defines your site, gives you a unique look and feel, and gives readers that oh-so-scannable sensation they know and love. When you really think about it, however, readers aren’t there for the header text. The headers serve as an essential tool to quickly find what you’re looking for, but the real prize here is the body text, isn’t it? This is where your information is, this is where you write and communicate to readers, and this is an area of design that cannot be neglected. Sadly, it often is. (more…)
Archive for the ‘Best Practices’ Category
Designing Body Type
Thursday, July 15th, 2010Input Prompt Text: A Better Way
Thursday, June 3rd, 2010It’s a very cool feature to have a form field that has prompt text such as Enter search keywords… right inside the input box, itself. It looks good, it makes sense to users, and it can save a lot of real estate in your design by negating the need for field labels. The problem, however, is that there are about one hundred ways to implement prompt text, and ninety-nine of them are wrong. Let’s look at this thing from all angles and come up with a fantastically simple and reliable way to make this work. (more…)
The Perfect jQuery AJAX Request
Wednesday, April 14th, 2010If you’re into client-scripting, then jQuery AJAX is probably your thing (if it’s not, perhaps it should be!). jQuery has some fantastic support for AJAX, and implementing it into your web application is so easy it’s stupid. The AJAX functionality in the AJAX library is so flexible, sometimes it’s easy to get lost when you’re trying to do something very simple. I’ve come up with a very basic jQuery AJAX template that I use for just about everything I do, and I thought it might be useful to share. (more…)
9 Amazing Things You Can Do in Firefox 3.6
Friday, March 12th, 2010The latest update to Mozilla’s wonderful web browser, Firefox 3.6, includes support for some fantastic CSS version 3 recommendations that you may or may not be aware of. Obviously, these tricks won’t work in Internet Explorer just yet, but look for widespread support coming in the (hopefully) very near future. (more…)
Image Buttons and Accessibility
Thursday, November 19th, 2009Image buttons are a fairly common occurrence in web media. As with everything else in web design, you have a dizzying arsenal of methods from which you can choose to create this type of design element, and choosing the right method can greatly aid in your design’s accessibility, performance, and SEO-friendliness. (more…)
Reusable Transparent CSS Rounded Corners
Thursday, September 24th, 2009In retrospective, there are definitely some areas where I could have improved on my Karate Corners design. I decided to take a second look and write a quick post that details how I create corners today, after almost a year of evolution in the ever-changing world of web design. This is absolutely the most simple and efficient way to create rounded corners using strictly CSS and HTML. (more…)
The Wisdom of Simplicity
Friday, July 24th, 2009Web 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…)
A Whole New Web?
Thursday, June 25th, 2009Should 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…)
CSS Absolute Positioning
Monday, April 6th, 2009Absolute 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 Media
Monday, February 23rd, 2009Most 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…)