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.

Today I picked up the new Google introduces another ‘meta-tag’. First, the term ‘tag’ is wrong. And second, I don’t like extra markup for search engines.

Okey, the keywords and description metadata are in my opinion not bad at all: they say something about the page. That’s what metadata always does.

But what about this: Google recently announced that a page can include a meta element with name ‘Googlebot’ and content unavailable_after: with the date when it will be unavailable. The page will be deleted from Google’s servers within a day after that date. But Googlebot? What does that say about my web page? That I like the Googlebot? No, it says absolutely nothing about my web page.

The rel="nofollow" attribute, does that say anything? Not at all. The rel attribute is for a relation between pages. But the almighty Google says that it can be used for them to give that link no Page Rank value. The term nofollow is also crap, because Google does follow the link. I have banned these attributes from my web log some moths ago.

In my opinion are these kinds of markup not good, what do you think?

Many designers want to use fonts for a web site that are not installed on most of the computers. More fonts are a large problem, but there are some solutions.

The first one is a replacement system. You just use h1 and h2 elements for your headers, and after the page is loaded a JavaScript will turn them into an image or a Flash file. All the images are auto-created. sIFR is the most used one in that kind. This solution is very welcome when you’re building a large web site, or a web site that changes of content very often, like blogs.

When the web site is static (the content doesn’t change often), there are two methods you can choose. But one is in my opinion very bad practice.

That bad practice is the usage of a background image, attached to the headers via CSS. It can be done via text-indent (set that to a large, negative number), or via a span element within the header element. CSS then hides the text with the simple rule display: none;.

This is bad practice, because when the user had images turned of, the user doesn’t see anything! Plus, it is not very semantic because you do show an image, aren’t you?

My way for small web sites, is to use just an image tag inside the header element. Via the alt attribute you handle the search-engines, screen readers and people with images turned off. Unfortunately, some browsers do render something weird when there is no image to display, like that red cross in Internet Explorer. I satisfied myself to hope not many people have turned images off…

So, all not very cool solutions… but better solved in this way than wait for ages for more fonts for the web.

From 3 to 6! That change did my PageRank underwent lastly when the ToolBar PageRanks were updated. The update is still going on at this moment. Check DigPageRank for your new PageRank.

Last week I discovered PageRank splitting on several of my websites. Google sees my site as two web sites. Backlinks from sites point to the version with, and to the version without www. So the PageRank is also unique for both versions, and is lower than when I had organized it better.

From now on, I will only use the version without www to prevent this annoying effect. With a short .htaccess code I redirect people towards the good version.