After having a non-blogpost-worthy summer, I attended Fronteers 2008 Thursday and Friday last. Some people might have known about that, but I didn’t announce that on this weblog. In this blogpost, I’ll mention the things I liked about Fronteers 2008.

Fronteers 2008 was held in Pakhuis de Zwijger, Amsterdam (actually a few hundred meters away from the place where the whole Fronteers idea was initiated last year). As I did some volunteering during the conference, I did not see every session.

Friendly URLs

During a session about The Dutch Web Guidelines, Koen Willems told us about friendly URLs. Now I think everyone knows the general benefits of friendly URLs. Luckily, Koen came up with something new: a technique to handle search requests with friendly URLs. So instead of example.com/search.php?q=awesomekeyword you’d have example.com/search/awesomekeyword.

The key is to redirect the first one to the second one on the server, that is just a few lines of code. With some unobtrusive JavaScript you could add a feature to do the redirection on the client side. In my opinion, it is a bit overdone to rewrite this kind of URLs, mainly because a search result page for a perticular keyword is not part of the hierarchy of the website.

Maintainable CSS

Stephen Hay talked about maintainable CSS. He bundled the oh-i-know-that-but-i-don’t-do-that parts of writing CSS in a nice presentation. Main point is setting up a good structure in your document: layout, color and type, eventually in seperate CSS files. Also setting up a good structure in you HTML will make maintaining your code a lot easier.

Actually I don’t really like the idea of separating the layout, color and type parts of your design. I think I will need to click more through tabs in my editor. “How do you write CSS?”, you might ask. After setting up a good structure in my HTML, I build the CSS in the same order. So header parts at the top, footer parts at the bottom. I indent the selectors for elements inside the parts of my layout. Your file becomes quite large if you do it this way, but combined with a good text editor it works like a charm for me.

CSS selectors madness

After partying on the boat Lizboa, I walked towards the train station with Bert Bos and some other people. Bert told us how CSS was initiated, and what the difficulties were in the beginning. He mentioned the idea of selectors, before the cascade was developed. It would be like this mad: If you have an element, and two selectors actually select that element, you will get an average of the properties that apply to those selectors. For example, if you have p {color:red} and body p {color:blue}, your paragraphs would be… purple.

Maintainable JavaScript

Christian Heilmann picked maintaining JavaScript as topic for his presentation. Luckily he didn’t introduce much new things to me. He told about separating parts in your application in functions, and then make some of the general functions available outside the application, and some specific parts not. So if you have a small function to convert seconds to minutes and seconds, you can write it in your application as one function. Then call it every time you need it. You then reveal the re-usable parts out of the script’s scope, because some other script on your website might use it as well.

Another good thing to use, is a configuration object at the top of your application, instead of using class names and ID values inside the functional part of your JavaScript. What I missed a bit over there, is that some configuration might be depending on the page your JavaScript is loaded. You could simply use attributes of elements inside your webpage, and read them out via JavaScript. An example is using a meta tags in your head, with some strings for messages you display. You can translate an HTML page (eventually in your CMS), and use the same JavaScript file over and over again. You can also use the HTML5 data attributes. (However, you’ll get an “invalid” HTML webpage. The validator at W3.org cannot handle custom DTDs). I will write an in-detail instruction on how to do all this in the near future.

Absolute positioning to the rescue

Several front-end people sometimes ask me: why do you use absolute positioning for this…? My answer always is: I do not want to change the logical order of the content in my HTML. This is exactly what Andy Clarke presented about. First, he defined all kinds of positioning in CSS. Then he gave some (beautiful looking) examples of general occurring cases where absolute positioning is better than floating elements all around.

Conclusion

Fronteers 2008 was a really amazing experience, if I may say so as someone who helped organizing it a bit. If you’re interested in the other sessions, you might want to take a look at the page where all slides are collected. If you have any questions about the conference or the topics I mentioned above, feel free to drop a comment below.

Something that has annoyed me lately, is how in-accessible some web sites are for people who browse using their keyboard. Number one issue is, in my opinion, that some people simply remove outlines from links. Outlines are those gray borders around links when you click on them. But is is very okay if you remove outlines for some links, but only if you add a proper focus state to that link.

Let me give an example first. The first menu has a nice hover state. The second menu also has an hover state applied to it, but also hides the outline. Some designers dislike the outline, and try to hide it. Also some CSS reset methods (like the popular reset method by Eric Meyer) ‘reset’ the outline.

To be better accessible it is good to declare a focus state for your links. Focus states are, like hover states, a pseudo-class for CSS, which you can apply easily. If an element can receive actions with a keyboard, the state’s properties are applied. Think of typing into a text box, or hitting space when you use tab to navigate.

You could, for example, declare both focus and hover in one selector, using a comma to separate them. See this example. It should be noted, that I change both the color and shape of the element. This is done for people with a color deficiency, because if you use (slight) color changes the link would be much more difficult to recognize by colorblind people.

If all was that simple.

I could give a list of nice blog post I wrote this year. I could post a cool movie related to web development. However, I would like to do an mind experiment on how to markup the year 2007. Oh yeah, with HTML.

2007 is in my opinion just an chain reaction of both interesting and boring things. Like always we have the option to choose, so I pick the first one. ‘Things’ is multiple, so a good start is using a list. Here we go.

The element name is, as you can see, year2007. I couldn’t find if this is an allowed name in the DTD specification, but I could just see <2007> in my browser if I used that one.

Another thing I ran into was the fact that some events are really general, but some are personal. So I also use the type attribute to indicate which one it is. The attribute can be used on the year2007 element itself, or one of the list items. So now we are talking about semantics!

Only missing is when the events happened. Okey, in the year 2007, but that is not precise enough. So the datetime attribute could be used on the list items. User agents may want to export the dates to a history e-book, for example. So have a look at the example with usage of the datetime attribute.

I am lazy, and since this is a bad joke I will not write a full DTD for all this. However, if I had written one, I could use a good validator that can read custom DTDs and Doctypes to validate the cool document I will markup later. Writing one would not be that difficult, though.

Now we have some kind of structure the list can be filled with some real events. You could expect it, I added some general and personal events that happened in 2007.

To add some style, I made a style sheet to indicate the differences between general and personal events. Since personal events are very important for me, they are a bit heavier. Just a simple CSS2 selector, nothing new invented. Check that out.

By the way, happy new year!

Often a web site displays only a part of the shop items, search results or blog posts. This so called pagination uses buttons or links to navigate through the pages. However, not all pagination methods are very usable or accessible. In this article some ways to optimize this part of a web site.

Design

Size and place. The pagination is a main part of the web site. Since it is critical for users to use this, the worst thing to do with your pagination is to make it small. The links do not have to be huge, but absolutely do not make them smaller than the normal texts on your page. For more attention on the links, you could also use some white space around the pagination. If the links are directly underneath the search results, the don’t catch the attention of the visitor.

Space. The controls need to be easily click-able, so use a quite large area for the links (using some padding). People browsing with a notebook, or people with a motoric skill impairment, can much easier click on these links. Be aware that this space needs to be visible, you could use a background color or a border for this. Some space between the controls themselves is also a good idea (you have plenty of room).

Identification. People know it is a pagination, so underlines are quite useless. It is, however, a good idea to use a hover and a focus state to make things even more clear if you actually use the pagination. It is also not needed to make a link of the current page indicator. You could better emphasize it by a different look and feel. Buttons for the next and previous page help the visitor to recognize a pagination.

Markup

Next en previous links. HTML allows you to specify if a link to another page is the next or previous one in a series of pages. This can be done by using the rel-attribute. The values of the rel-attribute may (for example) be ‘next’ or ‘prev’. It is also possible to use a link-element in the head of your document. That link-element can have a href and a rel attribute. User agent (such as browsers) can use this information to assign short keys to browse to the next page.

Some don’ts. For links it is possible to declare an accesskey and a tabindex attribute. However, these attributes can screw up the normal ‘flow’ of the browser. For example, the tabindex messes up the order of all links on a page. Even so, the accesskey attribute sounds great in theory, but in practice nobody uses them and simply doesn’t expect them. And what if the visitor already uses that key for a program or function within his operating system?

More to read

• All link types for the rel and rev attributes.
• Pagination 101 by Faruk Ateş.
• Item pagination patern at YDN.

I came across an web page (I don’t link) that had removed the outline from all links. Why? I don’t know. Maybe because it looks nicer. By removing the outline, however, an accessibility problem occurs.

But first, what are the outlines? And how to remove them? Outlines are the gray dotted borders around links, buttons and input elements that indicate where the focus is. To remove them, the CSS property outline needs to set to none. Example: a:focus {outline:none;}. Some CSS reset methods also remove the outline. Not all browsers support this property, but quite a few do.

The problem you get when you do remove the outline, is quite simple. If you don’t use a mouse to navigate, but instead use the keyboard, you cannot navigate easily. Because you use the tab-key, you don’t know which link you are when you hit tab. As alternative you only can see the URL in the status bar (not ideal, is it?).

It can become even worser when the page uses the tabindex attribute to mess up the default order. I have never believed in the usage of that attribute, since you simply need to place the elements in the order you want in the source. With CSS you can visually place them almost anywhere you want.

Conclusion: just not remove the outline. Your page looks the same, and everybody is happy.