Topic: User Experience

Designing Body Type

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. Continue reading…

Input Prompt Text: A Better Way

It’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. Continue reading…

8.9%, Where are you?

According to W3Schools’ latest March update, 8.9% of internet users are still using the old and oft-neglected grandson of Microsoft’s intrepid series of web browsers, Internet Explorer version 6. Times are changing people, and you’re falling behind. It’s amazing to me that a web browser that is now two major versions outdated, that is no longer supported by its developer, and that was released almost ten years ago is still in circulation today. Nearly one in ten internet users are browsing the internet like it’s 2001. That’s simply not acceptable. You are missing out; there is so much more to see! As a web designer, my charge is to make websites look good. This is my plea: please, update your browser, and never look back. Continue reading…

Image Buttons and Accessibility

Image 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. Continue reading…

The Wisdom of Simplicity

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. Continue reading…

A Whole New Web?

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. Continue reading…

Pure CSS Image Hover

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. Continue reading…

Best Practices: Images on the Web

Web design is about much more than HTML and CSS. In many cases, the quality of a website lies just as much in its code and functionality as it does in the quality and optimization of its images and other graphical information. The amount of choices in image format, quality, and optimization is dazzling to say the least. What format should you use? Is there a end-all format for the web that trumps all other formats? Continue reading…

CSS Font-Size: em vs. px vs. pt vs. percent

One of the most confusing aspects of CSS styling is the application of the font-size attribute for text scaling. In CSS, you’re given four different units by which you can measure the size of text as it’s displayed in the web browser. Which of these four units is best suited for the web? It’s a question that’s spawned a diverse variety of debate and criticism. Finding a definitive answer can be difficult, most likely because the question, itself, is so difficult to answer. Continue reading…