It’s time again to start nominating your favorite higher-education Web sites for the annual eduStyle Awards. This is the same awards where Mizzou Wire won Best Magazine Site last year. Time to nominate is limited, so be sure to head over to eduStyle, browse the Gallery and nominate a deserving site.
March 2009 Archives
Interface_ blog now has a Twitter account. We’ll be posting blog updates along with quick thoughts and links about higher-ed Web design. Check out or Twitter page and Follow us!
The fabled, IE8 is here ushering in a new era of compatibility, Web standards and fewer browser bugs. There will be much rejoicing by Web developers whose jobs will suddenly become easier and they can spend more of their time creating great Web sites that make the world a better place.
Not quite.
Compatibility in IE8
In a post on the IEBlog, Just The Facts: Recap of Compatibility View, IE8’s compatibility is explained. Be sure to take some notes because simple it ain’t. Yes, IE8 runs in standards mode by default, but the new “Compatibility View” feature and IE8 site blacklist start making things difficult.
Since the IEBlog is about as clear as mud, I found an alternative explanation on the topic, The IE8 Blacklist minefield. I suggest giving it a read. It clearly explains the situation and what Web developers have to do about it.
What are the issues with IE8?
To sum it up quickly, here are the things you should know about IE8 and compatibility:
- IE8 renders in standards mode by default unless
- Your site is on the IE8 blacklist
- A user opts to run your site in Compatibly View
- Compatibly View does not render the same as IE7, so you have a new browser to test in (yay!)
- You can select which mode the browser renders in by using a versioning meta tag or HTTP header
- If you use select a rendering mode, your site visitor will not have the option to use Compatibly View
So basically, I have to opt-in to standards mode?
Yup. The IE8 blacklist basically forces you to pick a rendering mode or else Microsoft or your users will pick for you. That’s the only way a developer will have control over how their content is rendered.
Start learning those meta tags and start testing.
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.
The XHTML
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.
The CSS
.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.
Why not just use display:none?
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.
You try it
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.
