BigSmoke

Smokes your problems, coughs fresh air.

Tag: design

Exemplary web design: danwebb.net

March 1, 2013 /

While investigating fragment identifiers and hashbangs for payformystay.com quite a while back, I came across this article by Dan Web, when I noticed that I really, really liked the design of danwebb.net:

Screengrab of danwebb.net

Screengrab of danwebb.net

It’s not often that I find myself liking a dark design, but this one’s much nicer and even more readable than most light designs. The contrast is good. It’s clean. It’s simple. I just really like it.

I’m finishing this post today, because I just noticed that a secret project that I’m currently working on might have its design unconsciously inspired by this or something similar.

Very, very old homepage

February 15, 2010 /

Today, in the images-that-I-stumble-upon-somewhere category: an image of a very old homepage that I hosted at my ISP back in the day:

Old bigsmoke @Home homepage

I’m not even entirely sure if I was already pulling this stuff together with XSLT. Probably I was, because I vaguely remember that this was one of the alternate CSS styles and I can’t imagine myself adding more than one <link> tag to every source file. 😉 (Unlike a sense of esthetics, laziness is deeply ingrained in every somewhat decent programmer.)

Exemplary web design: Qt

February 11, 2010 /

Often, I come across websites that have a beautiful design or even just interesting design elements. Instead of continuing to spread these URLs all over my $HOME and my (del.icio.us) bookmarks, I thought I’d start adding them here. Today, I want to start with an entry from ~/jot/exemplary-web-design.txt: Qt

Qt homepage

Qt homepage

I’ve actually programmed in Qt a bit in a dark past. Even though I’m not too fond of it (or C++ in general), it’s a very decent toolkit as far as toolkits go. What’s really great, though, is their website (now at qt.nokia.com).

The website logo with integrated slogan is perfectly clear. At the top right, there’s a nice and clear Google Custom Search, below which there’s a language switcher and a cleverly placed contact link.

Then comes the horizontal navigation bar with the tabs. It clearly shows which section you’re in. The homepage has an icon instead of a text, which is a nice touch. Also, the Developer Zone tab has a distinct layout with a big icon. I like this; it makes it clear that Nokia (formerly Trolltech) appreciates its developers (insert Ballmer monkey dance here).

The content area starts with a clear h1 heading text and a one-sentence-introductory paragraph. Then, four of the sections are highlighted again, with a short summation below of what can be expected in that section.

Below that, is another visually distinct area which highlights the latest news-items, events and other recently featured items.

Testimonies by two high-profile projects are used to interrupt the flow of information at this point, before Qt in 2 minutes is presented. Qt in 2 minutes is clearly made to quickly help people who are new to Qt along to the right information. This takes up 7 headings and they use JavaScript to show only one subsection at the time, allowing you to switch subsection by clicking the headings in the menu at the left.

At the end of the content area, there’s a subtle reference to the KDE project and a list of the biggest-name customer logos.

The content area is closed by another horizontal navigation bar. This one has a link to the sitemap, an accessibility statement, and to the contact page again. At the right, it also contains a Nokia logo.

Then in almost invisible print (because it isn’t interesting), there’s the copyright statement and a link to the privacy policy.

Jeroen Dekker (photography) on-line

May 30, 2007 /

Jeroen Dekker, a friend and photographer, has recently, on May the 5th, put his website on concert photography on-line. (Go check it out! He has some great pictures there.)

I was very flattered when I was asked by Jeroen to give some SEO advice in the test stage of his website. I was even happier when I saw how well he had implemented my suggestions. In his concert photography section, he now has links consisting of the event name and the band name and the number of the photo. An example URL: http://jeroen-dekker.com/concerts/noordschok-2007/prey-band/1/. Also his page titles follow the same structure. As is often the case with SEO, the best results are acquired by remembering that good URLs are URLs which are cool enough that you won’t want to change the in the future and that good titles are titles which look good anywhere, be it in a bookmark or a search result.

Jeroen Dekker concert photography Jeroen Dekker news

I also noticed that, following some evangelizing on semantics and CSS from me, he had greatly cleaned up the HTML markup. Some pages could still profit from some bettermore pedantic markup though. An example from the news section (cleaned up for readability):

<p> The following bands played:<br>
 - <a href="http://jeroen-dekker.com/concerts/fear-dark-festival-hedon-12-mei-2007/eluveitie-band/">Eluveitie</a><br>
 - <a href="http://jeroen-dekker.com/concerts/fear-dark-festival-hedon-12-mei-2007/thy-majestie-band/">Thy  Majestie</a><br>
 - <a href="http://jeroen-dekker.com/concerts/fear-dark-festival-hedon-12-mei-2007/drottnar-band/">Drottnar</a><br>
 
 - <a href="http://jeroen-dekker.com/concerts/fear-dark-festival-hedon-12-mei-2007/whispering-gallery-band/">Whispering Gallery</a><br>
</p>

In my opinion, the above is a very awkward way to define what is really an unordered list:

<p>The following bands played:</p>
<ul>
  <li><a href="http://jeroen-dekker.com/concerts/fear-dark-festival-hedon-12-mei-2007/eluveitie-band/">Eluveitie</a></li>
  <li><a href="http://jeroen-dekker.com/concerts/fear-dark-festival-hedon-12-mei-2007/thy-majestie-band/">Thy  Majestie</a></li>
  <li><a href="http://jeroen-dekker.com/concerts/fear-dark-festival-hedon-12-mei-2007/drottnar-band/">Drottnar</a></li>
  <li><a href="http://jeroen-dekker.com/concerts/fear-dark-festival-hedon-12-mei-2007/whispering-gallery-band/">Whispering Gallery</a></li>
</ul>

Finally, a nice touch that I noticed on his site is that he doesn’t have explicit pagination. By this I mean that clicking on the page 2 link simply takes you to the first photo on that page, so that he needs only an URL for each photo and not an URL for each page or even photoset.

© 2024 BigSmoke

Theme by Anders Noren — Up ↑