The New Hungarian Startpage - startlap.hu

published on September 25, 2011 in technical

Hungary's one of the most famous sites has just been redesigned. Many people have probably put in many hours of work to make it look and work like this. Let's take a closer look at the result

1. First impression

There have been only very small design chages, like the roounded box headers. Nothing new here, not in design, nor in CSS technique. The owner, as usual, stayed in a very conservative position as for the used technologies. I surely would have done that otherwise, surely would have used CSS3 where I could.

The same conservative approach may be found on the design itself. There is almost no white space. Sadly, because the use of that would have helped in presenting that huge amount of information.

A bit more about rounded boxes. I feel that that was a hype a few years back, nowadays that is not so new anymore. If we chek what the  zurb team has done with the Boston Globe, then I feel that I am bit right.

There is a social box on the site, which has a litle tiny button underneath it. If you click that, the another row of icons is displayed. Wow! What is that good for? And that little tiny button is so little, that it is almost unusable with a touchpad.

Scrolling down, there come the tabs. Unusual tabs. They look like tabs, but actualy they are some kind of content delimiters. What on earth is that good for? If they used tabs, why didn't the put them on top, to be visible and usable? So that users do not have to scroll down for years.

2. Under the hood

Due to my developer background, I always check the source of sites. I did this here, too. Here are my points about what I saw:

  • The frontend developer did not really know what lists are. On the other hand, he demonstrates quite a good command of inline CSS (hope you feel my irony)
  • The w3 validator found 722 errors on this site, which is very, very much
  • And again: the frontend developer not only never heard of lists, but had no clue about professional HTML markup
  • <select> was replaced with a custom built select box. This is very personal opinion, but I think that is a very big mistake. If one wants to create custom user interfaces, then that is what should be done, but not by replacing the built-in element with ones that look and function the same way. There is no point in that. Also, the replacement used here is not usable enough: the list dissapears if I navigate away with my mouse pointer. That is not what users expect.
  • All <a> elements have an id. I do not get it. What is that for? If not for some strage binds, which open the links in new tabs. But even then, there is no need of those ids, we can use effective selectors for that.
  • Hurray! We also have inline javascript! I love this feature too (I hope you feel the irony again)
  • Many of us got used to not puting javascript code in the <head>, simply for loading speed. We also got used to minimizing the request numbers by reducing these to one CSS and one JS. Somehow this simple technique isn't used here either.

3. Conclusion

There is that saying: "Good designers redesign, great designers realign". In this case, none of them happened. A bit of rounding here, a bit of color change there. But not in the good direction.

As for the source. That is really bad. If a student would produce anything similar in school, he or she would never graduate.

There are still a lot of things to improve here. I will be checking the site from time to time, and update this article if needed.