10 Examples of Beautiful CSS Typography and How They Did It

The title says it all. This article includes the key CSS that makes the typographical magic happen.

How to Create a Valid Non-Javascript Lightbox

You see lightboxes and modal windows everywhere and most are created in javascript, but not this one. Jenna Smith has developed a lightbox that only uses valid XHTML and CSS. Yahtzee, folks!

Usability Testing Demystified

Author and usability guru Dana Chisnell has fashioned a terrific article in “A List Apart” meant to take away the fear people have over doing usability testing.

Sprite Me

A great way of increasing page load speed is by reducing HTTP requests by using CSS sprites. SpriteMe.org has created a web application that scans a web page and combines all CSS background images into one large optimized image.

We’re interested in your recommendations as well, so if you have links that you’d like to share with the rest of us, post a comment or send an email to our office e-mail account.

Card Sorting: Pushing Users Beyond Terminology Matches

Here’s the summary as it appears at the top of the article: “It’s easy to bias study participants, whether in user testing or in card sorting, if they focus on matching stimulus words instead of working on the underlying problem.”

Doctype

A free question-and-answer site for web designers that will allow them to find solutions to their problems.

Twitter Postings: Interative Design

“Summary: We made a timeline message more punchy, credible, and viral through 5 rounds of redesign.”

10 User Interface Design Fundamentals

As @davemcfarland wrote, “Nice, short list of user interface design basics.” Couldn’t agree more!

Ten reasons to learn and use web standards

Like we said on Twitter, an oldie, but a goodie.

250+ Resources to Help You Become a CSS Expert

A great list to check out if you’re really dedicated to becoming a CSS know-it-all.

6 Ways To Improve Your Web Typography

Let’s face it, you can never read too much about typography on the web! You would be surprised how much the right font can spice up a web site.

25 Classic Fonts That Will Last a Whole Design Career

While we’re on that previous note, check out this piece on classic, durable fonts.

Web citizens trying to kill Internet Explorer 6

Former UF Webmaster Mark Trammell was quote in this article about a campaign against IE6.

An Overview of The CSS Summit

If you didn’t get a chance to attend The CSS Summit, catch up with our overview of it here.

Jobs @ Web Administration

UF Web Admin is hiring! Right now, we’re looking for an OPS Web Designer and a student OPS Web Designer. Feel free to pass along the info if you know someone who’s interested.

Sounds great, right? It gets better.

The Summit Series is entirely online, meaning you can skip the hotel reservations, the 5-hour flight delays and those little bags of peanuts the airlines give you while they secretly lose and/or destroy your luggage.

Our office purchased the meeting pass and watched the Summit in our conference room, but attendees are certainly allowed to participate from the comfort of their own home or office.

The CSS Summit, the first installment of the Summit Series put together by Christopher Schmitt and Environments for Humans, featured CSS-specific presentations from some of the top names in the business like Molly Holzschlag, Dave McFarland, Jason Cranford-Teague, and others.

Here’s a summary of some of the key takeaways from each of the speakers at the conference:

CSS and Troubleshooting IE6 with Kimberly Blessing

“Support does not mean that everybody gets the same thing”. Kim led her presentation off with this quote because it’s such an important point to remember when troubleshooting cross-browser inconsistencies. *cough* IE6 *cough*

The goal when troubleshooting IE6 is not to match the look pixel-for-pixel, but rather to try to preserve a similar and enjoyable user experience across all browsers. In order to do this you need to do determine what level of support you are going to give IE6, decide which factors will influence when support for IE6 will end, and document a technical strategy to cover coding techniques for dealing with IE6.

Kimberly also mentioned End of Life messages (EOLs), which are basically scripts that display a message prompting IE6 users to upgrade their browser. She mentioned a few sites that use this technique like YouTube and Facebook, but she didn’t officially condone them

Object-oriented CSS with Nicole Sullivan

Nicole’s three-prong web development philosophy is simple:

1. Work out of respect for the design
2. Designers make our code beautiful and clever on the outside as it is on the inside
3. Respect the original design vision. Consistent design = clean code = fast site

Object-oriented CSS is all about leaner code and easier maintenance. Elements like headings should be treated as the most basic reusable building blocks of a site. Anytime you can reuse them, you’re getting a performance freebie. You should avoid location-dependent style because it can easily lead to code bloating down the road.

One great suggestion to promote lean code Nicole shared was to create modules. In a module you would separate an object’s code into two parts: 1. A container and the content and 2. The structure and skin. One class solves the browser bugs, positioning, presentational elements and generally does the heavy lifting of CSS. The other class “skins” the object, adding the style. The goal is very predictable skins in which the complexity is absorbed.

Tomorrow’s CSS3 Today with Dave McFarland

Dave covered some of the highlights of CSS3 including advanced CSS3 selectors as well as some of the CSS3 properties that you can begin using today. the key takeaway frmo his talk was that while the modern browsers (Safari 4, Firefox 3, Chrome, etc…) are beginning to ship with increasing CSS3 support, these versions of the browsers simply don’t have a great enough market share to warrant widespread use of CSS3.

In short, use CSS3 at your own risk. If you believe your target audience is likely to use browsers with adequate CSS3 support, then using CSS3 properties and selectors to enhance to your designs may not be a bad idea. However, if your analytics show that many of your users are still browsing with IE6/IE7 and older versions of other popular browsers, then it’s probably only going to hinder your sites usability.

The key is to use CSS3 sparingly to progressively enhance your designs while making sure that you don’t alienate or hinder your users that aren’t using a modern browser with CSS3 support. For more information on CSS3 selectors and properties, visit http://www.css.info or www.w3.org/Style/CSS/current-work.

CSS & Fluid Width Typography with Jason Cranford-Teague

The main focus of Jason’s presentation was the future of web typography. Scalable Inman Flash Replacement (sIFR) has been the popular pick for accessible custom typography since its release in 2005, but its drawbacks, namely its requirement of both Flash and javascript to be enabled in the user’s browser, clearly leave the door open for something better to come along.

Enter the @font-face rule.

The implementation is simple. Embed the font of your choice with the @font-face rule, then call it with the font-family property like you would any standard browser font. The problem lies in the file formats. Modern browsers, besides IE, are beginning to support the Trutype (.ttf) and OpenType (.otf) formats (IE only supports Embedded Open Type .eot). However, fonts are considered intellectual property meaning, of course, that embedding them through @font-face is subject to EULAs (End User License Agreements).

Another stalemate for the time being? Perhaps, but these are exciting times for the future of web-native fonts. Jason pointed to Small Batch, Inc.’s Typekit service, Kernest.com, and Cufon as evidence that a new era in web typography is coming soon.

CSS & Flexible Layouts with Zoe Gillenwater

Why bother with flexible layouts? Zoe Gillenwater asks, “why not?”

The benefits of flexible layouts are pretty clear: they respect the user’s preferences, they increase usability, readability and accessibility, they maximize typographic control, and they take advantage of screen real estate while preserving design proportions.

Reaping these benefits, however, takes a good deal of planning. It’s important to realize that not every comp can be successfully turned into a liquid or elastic layout. You have to design the site differently from the start, taking into consideration which features are not compatible with a fluid-width layout such as fixed heights for anything containing text.

When putting together a site with a flexible layout there are a few general techniques to stay away from: irregular shapes defining a text area, text matched with images that can’t expand, and horizontal alignment across columns, just to name a few. Instead, try using scalable images or images that can slide along with the resizing of the window.

CSS & Coding Layouts with Stephanie Sullivan

Great design is all about overcoming challenges and making things work. A website is made up of its content; the information, sales, marketing, etc… If the content is the core of any website, doesn’t it make sense the layout of that content is key in any website’s design?

Think about these questions when drawing up your next wireframe or comp: How do you best present this content? How do you want your user to interact with this content? Make sure to be logical and create a flow through the site.

CSS & The Open Web: A Brave New World with Molly Holzschlag

Last, but certainly not least, was Molly Holzschlag. Author of over 30 books on Web Design and related topics, Molly brought her experience in to discuss the ever-growing importance of open standards on the web. As the popularity of web apps continues to grow, standards are becoming more and more vital.

Designing with a foundation in standards not only helps to ensure more positive user experiences across the board, but can also prove to be cost effective. Some of the benefits of designing with standards are that it provides infrastructure and process, it offers a variety of content delivery options and allows for effective scaling and growth.

Next Up: The DIY Summit

If you missed out on the CSS Summit, don’t worry, the Summit Series continues on Sept. 17. with the DIY Summit. According to the event description, the DIY Summit is “for those who go it alone, designing and managing entire websites by themselves, either by choice or by chance. Whether they are freelancers or in-house webmasters in a larger company or university, our goal for the DIY Summit is to streamline the workflow for those who don’t have a team to fall back on.” Register now! You won’t be sorry.

http://images.webadmin.ufl.edu/signatures/UF-Signature-Themeline.gif

Using this URL means that users don’t have to download the same image for every site they visit at UF. While it’s only a few kilobytes, chances are pretty good that your site loads a little bit faster because the image is cached.

Now, if you’ve downloaded a template from our site in the past couple of years, you might have received a copy pointing at a different signature:

http://style.webadmin.ufl.edu/images/wordmark.gif

We are now redirecting this URL to:

http://images.webadmin.ufl.edu/signatures/UF-Signature-Themeline-BAD.gif

This signature is slightly smaller than the official version, and its use is strongly discouraged. Because we don’t want to break your sites, we aren’t going to remove it permanently. However, If you have been using the old URL, please take this opportunity to update your sites. To do so, you’ll have to modify your CSS slightly. The old CSS is:

/*\*/#footerHome span {
background:url(http://style.webadmin.ufl.edu/images/wordmark.gif) no-repeat;
height:62px;
position:absolute;
right:0;
top:10px;
width:188px;
}/**/

To use the new image, we have to update the background, width and height attributes:

/*\*/#footerHome span {
background:url(http://images.webadmin.ufl.edu/signatures/UF-Signature-Themeline.gif) no-repeat;
height:54px;
position:absolute;
right:0;
top:10px;
width:195px;
}/**/

All of our template downloads contain this change as of today. If you have any questions, feel free to comment!

Improve your jQuery — 25 excellent tips

For those of you that either use jQuery or are curious about it, TVI Design has compiled some great tips on how to develop the most efficient code.

All About Floats

Floats are often confusing for those starting out in CSS. To be honest, they can be confusing for anyone regardless of skill level. CSS Tricks has attempted to break down the use of floats to simple, easy-to-understand bits.

Adobe Browserlab

Most web folks know that you should always test your designs on multiple browsers and platforms, because quirky issues can sometimes occur, especially in Internet Explorer. Here is another online browser testing app that will keep you from having to jump from computer to computer in order to verify if site renders well for all users.