@font-face is all the rage in the CSS world these days and I’ve been dying to give it a whirl. This entry won’t discuss the best practices in terms of CSS syntax or the ins-and-outs of @font-face; that has been done in numerous other places which I will link to at the bottom of this entry. I’d rather focus on a specific Windows-related issue.
Have you ever spent a lot of time getting the color in your image perfect only to have it go flat and dull when it was exported to the Web and viewed in a browser?
The problem is with color profiles and here’s how to get rid of them.
Another MU WebCom project is done! The redesigned Human Resource Services (HRS) site is live. This was a long, complex project that touched almost everyone on our staff. Every aspect of the site was rebuilt, from the information architecture to the final design. The following is a quick recap of our goals.
A few years ago, at a Web design seminar, I was able to see Nate Keochley speak about the redesign of Yahoo! and Yahoo! Mail. I found it to be the best presentation at the conference, so when I found a video of another one of his presentations I was eager to check it out.
Professional Frontend Engineering begins with a good explanation of what a frontend developer does and why it’s so hard to develop in “the most hostile software development environment imaginable.” The second part gets into explaining html tags, doctypes, proper naming conventions, some CSS concepts and unobtrusive JavaScript.
It’s worth watch and full of great information.
Poor Interface_ Blog. We’ve been so busy here in Web Com that we’ve neglected you. It’s been a long time since someone posted anything. I wouldn’t be surprised if everyone deleted us from their feed readers!
To make up for it I’m going to work on being a better blog author by offering up some quick CSS tricks I use on almost every site I build.
First up is styling “skip-to” anchor links. These handy links help people using assistive software or hardware, or mobile devices. They allow quick access to the navigation, main content or any other important element on the page without having to “tab” through all the page’s links. Try hitting the tab key (option+tab in Safari) and go through a page’s links to get to the main content. It takes a while doesn’t it? You can see an example of this working on or Parent Relations site.
These links should be the first thing in your mark-up so the users who need them can find them. This is great for accessibility, but they can sometimes get in the way of your page design. Luckily, there’s a way to hide them while still keeping them accessible.
Start by placing this code right after the open <body> tag.
<div class="offset">
<a href="#skip">Skip to main content</a>
<a href="#nav">Skip to navigation</a>
</div>
Be sure to include the #skip #content anchors somewhere on your page so the links have somewhere to go.
.offset a {
position:absolute;
left:-1000em;
padding:5px;
font-weight:bold;
background-color:#fc3;
}
.offset a:focus, .offset a:active {
position:absolute;
top:2em;
left:2em;
}
What this does is take our “skip-to” links and indents them off the screen to the left. When the link is in focus or active, from “tabbing,” the indention is removed and the link becomes visible.
Screen readers will not read items with the display:none rule, so we need to use position:absolute and indent the links to hide them.
The best part about this little CSS trick is that it’s really easy to apply and it won’t affect your existing site design, so there’s no reason not to add this bit of functionality.
Since Paul wrote some posts on JavaScript frameworks before (part 1, part 2), I thought I’d mention something about CSS frameworks. I’ve begun using them on several projects and have found them to be a huge help. I find that laying out the page is easier, the most common styles are already set and browser bugs are few and far between.
It’s pretty much a library of pre-built styles that help with designing a Web site. The goal of using a CSS framework is the same as other programming frameworks — to speed up development and ease collaboration between developers. A List Apart wrote a good article on the subject.
Usually, when beginning to style an XHTML page, I’d start with a few basic styles to override some of the browser’s defaults. Then I’d throw in a few other styles for hidden “skip-to” links and basic typography style. This would save me a load of time and without realizing it, I was using a CSS framework!
Other designers used similar methods and one of the first to become widely adopted was Eric Meyer’s “reset styles.” It was a set of styles that would override a browser’s default styles and give the designer a blank canvas eliminating a lot of browser testing.
CSS frameworks have taken this one step further and have included styles for typography, forms, browser bugs and layout grid systems. The methods in which styles are applied have structure so one designer doesn’t have to decipher another’s naming conventions.
Opera recently announced the release of their Dragonfly Web Developer application, that will be built directly into the Opera Browser.
From their website
Opera Dragonfly is Opera’s all-new set of developer tools, designed to give developers a lightweight-but-powerful application that provides effective mechanisms for web standards debugging and problem solving without slowing down the browser, and fits in nicely with the development workflow.
To evaluate it, you will need to download the 9.5 beta 2 version of the Opera browser. Once installed, launch the browser and go to Tools/Advanced/Developer Tools.
It appears that with Dragonfly, Opera is taking aim at Firebug. Although similar, Dragonfly is not yet as robust as Firebug, though it is easy to see that it has potential. This is a very early release, so it will be interesting to see what features Opera decides to add to this tool.
Of course, as a developer, ANY tool that helps us do our job in a faster, more efficient manner is appreciated.
Usability is not an exact science. Just because someone did a study that says light text on a dark background is hard to read doesn’t mean it is in your design. Just because Cynthia Says your site is accessible doesn’t mean it is. Every element on the page is relative to each other. To accurately determine readability and usability you have to test the site as a whole, not in little stand-alone chunks.
I agree with almost every article A List Apart produces. I like them so much that I regularly advise people to give the site a read, but I have to say something about their entry, Zebra Striping: Does it Really Help?, because I disagree with its process and what it implies.
I know the study wasn’t conclusive in any way, but this piecemeal approach to usability doesn’t accomplish much. There are too many variables in the way you can construct a table for a simple usability survey study to address. What about text alignment, font choice, line height, stripe color, borders, font size, contrast or table width? All these things affect usability and the study example didn’t vary in any of those ways.
What troubles me most about this type of inconclusive study is that when they get published on a site like A List Apart, it tends to be taken very literally. People read the generic conclusion and start removing zebra striping on their tables for no reason other than because the article said so.
Generic usability tests can be a nice place to start, but don’t let them determine your design and think for you. They are recommendations, not rules. When designing, take a moment to actually read and use the entire page you’re designing. Is it easy to read? Is there enough contrast? Can you tell the difference between navigation and page content? Can you scan the page? Common sense will answer almost all of your questions. If you have the time and the budget, usability testing your design as a whole should cover the rest.
When designing Mizzou Wire, I wanted to emphasize the different types of multimedia content that would appear on the site as well as identify stories that were linked off-site. To do this, I created a set of small 16x16 icons to appear next story headlines and teasers that had multimedia.
They all had a Mizzou feel and I thought other Web developers on campus might like to use them, so I added them as a resource in the MU Web Communication's Image Library. Feel free to use them on any University of Missouri related Web site.
I often joke around that my job here at MU Web Communications is just to make things pretty. It’s somewhat true, but that’s only part of the job. There’s a lot more going on with a Web site design than pixels on a screen, so I thought I’d share my design process.
Here at Web Communications, the design process isn’t started until after the goals of the site have been established, a content inventory has been finished and a wireframe layout has been put together. Depending on the complexity of the site, some usability testing may also be completed with the wireframes before I start.
