5 Useful Coding Solutions For Designers and Developers


Often creative and truly remarkable design solutions remain unknown because we, designers, simply overlook them. Being busy with our own projects, we sometimes try to grasp the intuition behind (probably) complex and cluttered code of other designers to understand how they manage to implement particular design ideas. In fact, by just observing the code of other developers we can learn a lot from them; we can find interesting ideas and improve the quality of our work.

As you know1, we, at Smashing Magazine, are quite curious folks. We are truly interested in unusual design approaches and creative solutions. Therefore we are regularly looking for them and once we found them, we analyze them, try to understand them and try to figure out both advantages and disadvantages of the technique we have found. And in this post we want to share some of them with you.

We would like to start with 5 advanced elegant coding solutions and ask you if you are interested in this series and would like to have more similar articles. Please let us know what you think in the comments to this post. Now let’s dive in. You should probably have some CSS-knowledge already before starting reading this article.

1. Sliding vertical navigation + overlay

Over the last years we have discovered a strong trend toward sliding horizontal menus (also known as Coda Slider effect2). In particular, they are often used in corporate designs where a product and its features are supposed to have the dominant position in the design layout. Kobe3 uses a similar yet different approach.


The navigation options at the top of the site are slightly animated yet creating an appropriate atmosphere. Once one of the sections is clicked, the main content area slides vertically — first the background image, then the content. If the content area also has some navigation options, they are slided vertically as well. In this situation it might be a slightly better design decision to use horizontal navigation instead to make it easier for visitors to distinguish between the primary and secondary navigation.

All content blocks are not loaded on demand via Ajax, but loaded up front when the page is loaded. All content blocks are loaded in the very beginning. Although the page seems to be animated, Flash is used sparsely — essentially, the design is a pure CSS+JavaScript-based solution. The main problem of the design is, however, that it’s just impossible to navigate the site if JavaScript is disabled. In fact, navigation options are not visible at all. As professional, you should always keep gradual degradation in mind.

How is it done? For the main horizontal navigation at the top of the site, kobe use CSS sprites. All navigation options are packed in one single image; the displayed chunk of the sprite is selected via background-position-attribute as usual. The sprite itself is a transparent .gif (here5 is the file). The position of animated sparks is defined using JavaScript — depending on the currently selected navigation option and using absolute positioning.


The main content area consists of the background image and an overlay-layer which displays related information and (sometimes) further navigation options. All overlay-layers (for all navigation options) are loaded together with the main page and are not displayed unless an appropriate navigation option is selected. The sliding is created with the SlidePanel-component of the jQuery library.

The overlay image7 is semi-transparent and is positioned absolutely within the main content block upon the background image (using the z-index-attribute). The background image for each navigation section is defined via CSS for each overlay-layer.


A very similar overlay-approach is used to present the description of a project in Ivan Aleksić9‘s portfolio (see above). Initially the visitors see only thumbnails of the projects done so far. When one of the thumbnails is hovered, further information is displayed in an overlay beyond the thumbnail. This overlay always uses the space that was previously occupied by the hovered thumbnail and the one below it. The tiny arrow at the right of the site always allows users to jump to the top of the page.

2. Neighbours navigation

EllisLab10 uses an interesting design approach to present the members of its team. Instead of listing each of them one after another, with small thumbnail and brief description, they use simple yet intuitive primary and secondary navigation menus placed next to each other. And to make sure that visitors are convinced that the team takes its work very seriously, quite esoteric cartoons are additionally placed next to the menus.


Both primary and secondary navigation menus use arrows and slight color indications to highlight where users are at the moment. Notice that the menus are not just placed next to each other, but divided via a sharp vertical line. Besides, the secondary menu is placed few pixels below the upper border of the left one, and thus indicates the hierarchy in the navigation.

The whole content area is divided into two main parts — the primary navigation at the left, and the content block at the right. The latter contains the secondary navigation and a sub-area for description on the right hand-side (see screenshot below). The background-images for the content block are defined via CSS and are applied via IDs. A semi-transparent background image is used for the description block on the right-hand side of the content block. The rest is pure CSS and (X)HTML. Simple yet elegant solution.


3. Panel block

Over last months it seems to have become a common practice to focus the design of a site on its main objective and display the unnecessary details on demand. For instance, Wishingline13 presents contact information and links to social networking profiles in a semi-transparent panel. This panel is opened when the user clicks on some specific link and is not displayed until then.


Notice that different services are highlighted differently — designers use both link colors and icons to precisely communicate links to external services. Usually it’s not the best decision to use multiple link colors for similar tasks, but in this case it works fairly well.

All “social” data is hidden in the panel — probably to not overcrowd the design with vivid symbols and icons which simply do not fit to the initial design. This design approach has advantage of offering clean layout and disadvantage of hiding secondary navigation options. The trade-off is, as always, designer’s decision, but in this case both options would probably work equally well.


How does it work? The panel itself has a semi-transparent background and is given a fixed position in the layout using absolute positioning and the z-index-attribute. Hence, it doesn’t change when the font-size is changed or the browser window is resized. That’s not necessarily a good thing, however, one can live with that.

To create a panel designers use two containers put next to each other and positioned absoultely. The first one has a transparent pointer16 as the background image and is placed next to “click to view”-link. The second container with a border-background-image17 is placed next to the first one, creating the illustion of a “bubble”-pannel. The single elements (links to social networking profiles) in the second div-container are marked up using a definition list <dl>.

Notice that designers also use a traditional UI element at the bottom of the panel to indicate that the panel can be closed. It would actually make more sense to place this button at the right-hand side at the top of the panel since this is the place where most users would expect the button to appear.


Antonio Lupetti19 uses a similar approach to display all options for RSS-feed-subscription. It would actually make sense to remove dots for the “Feed RSS”-link using outline: 0;-assignment (notice that one should be careful when using the outline property, since it is really useful to navigate through the page using keyboard).

4. Tags Chart List

There is a variety of ways20 to design tag clouds. Styled according to its weight, tags in tag clouds reveal the importance of a topic or site quality via an assigned visual weight (often color and font size). However, there is one important thing which “normal” tag clouds fail to do: they convey the big picture, but can’t reveal meaningful data, information in terms of how popular these tags are.

Jeff Croft21 uses a different approach for tags — tag chart list reveals not only most popular tags, but also how popular these tags are.

Jeff Croft22

Apart from the actual tags “most popular tags”-section shows how often the tag was used and also displays a vertical bar which indicates its popularity compared to other tags. Notice that Jeff Croft uses three levels of visual communication (position of the tag in the list, vertical bar and the number on the right-hand side) — visual redundancy is often not superflous (as usually assumed) and useful to help readers understand the context in which data is presented.

Once some tag is hovered, the corresponding block-level-element is highlighted using a lighter background color. Notice that both bar and the figure are highlighted as well. How is it achieved? Jeff Croft uses an unordered list; each list item contains three block-level-elements: a link to the tag, a span-element (span.count) displaying the figure on the right-hand side and a span-element (span.index) displaying the bar (span-elements are inline-level-elements, of course, but they are declared to block-level-elements in Jeff Croft’s stylesheet).

Tag ranking23

Tag links are aligned to the left using relative positioning, the figures on the right hand-side are pushed to the right using absolute positioning within relative positioning (standard approach also known as Making the Absolute, Relative24). The bar is initially assigned the width of 100% for every tag. When the page is being loaded the width of the element is changed (probably via PHP Python on the fly) using style="width: xx%"-assignment. Styling is defined in CSS, of course. The position of the bar is, again, defined using absolute positioning within the absolutely positioned list item-element. The hover-state is defined using li:hover .index, li:hover .count and li:hover-definitions.

It’s worth mentioning that Jeff Croff uses an accessible design approach: if no visual elements can be displayed, the index-element displays the percentage value of the popularity of the tag; otherwise this text is removed using the text-indent-attribute with CSS.

Notice that this solution is also flexible. For instance, if the sidebar will be expanded for some reason, the tags chart list will be expanded automatically since percentage values are used. That’s efficient.

5. Clever archive navigation

Designing archive navigation isn’t an easy task, particularly because designers don’t want to slam visitors with too much information and users often just want to quickly get the information they are looking for in the first place. Chris Shiflett25 uses an interesting approach to present a user-friendly, simple and compact archive navigation.


Jon Gibbins, Jon Tan and Chris Shiflett combined both levels of navigation — year and month navigation — within a compact two-lines-block. The current selection is clearly visually highlighted using colors and arrows. Available navigation options are clear as well. Once a visitor has decided to browse through the navigation section she has to select the year and the month; however, this can be done quickly since the the month selection is updated automatically when a new year is chosen.

The markup and JavaScript are quite straight-forward: the designer uses unordered lists and definitions lists to markup the year as well a special class to indicate currently chosen year and month. When some year is clicked, a new layer under the year navigation is displayed — there visitors can also define the month they are interested in. There seems to be a bug since in the very beginning when the page is being loaded, all navigation options for all years are displayed.


It’s a simple yet useful idea to present the archive navigation on each archive page, so the user can easily navigate through all posts without going to the archive-page and then to the post again. Please also notice the month navigation at the bottom of every archive page. Maybe it would actually make more sense to present the full archive navigation at the bottom of the page as well.

Interested in similar articles?

Let us know! What should we focus on? Should we present both good and bad examples? Or you can also suggest some interesting design approaches you’ve found by yourself — we would like to analyze them, understand them and present them in one of our upcoming posts!


  1. 1 http://www.smashingmagazine.com/2008/07/04/web-form-design-patterns-sign-up-forms/
  2. 2 http://jqueryfordesigners.com/coda-slider-effect/
  3. 3 http://www.arcinspirations.com/kobe/
  4. 4 http://www.arcinspirations.com/kobe/
  5. 5 http://www.arcinspirations.com/kobe/images/template/navigation_onerow.gif
  6. 6 http://www.arcinspirations.com/kobe/
  7. 7 http://www.arcinspirations.com/kobe/images/template/overlay.png
  8. 8 http://www.sroown.com
  9. 9 http://www.sroown.com
  10. 10 http://ellislab.com/company/team/justin_hurlburt/
  11. 11 http://ellislab.com/company/team/justin_hurlburt/
  12. 12 http://ellislab.com/company/team/justin_hurlburt/
  13. 13 http://www.wishingline.com/notebook/
  14. 14 http://www.wishingline.com/notebook/
  15. 15 http://www.wishingline.com/notebook/
  16. 16 http://www.wishingline.com/notebook/images/elsewhere_pointer.png
  17. 17 http://www.wishingline.com/notebook/images/elsewhere_content.png
  18. 18 http://woork.blogspot.com/
  19. 19 http://woork.blogspot.com/
  20. 20 http://www.smashingmagazine.com/2007/11/07/tag-clouds-gallery-examples-and-good-practices/
  21. 21 http://jeffcroft.com/
  22. 22 http://jeffcroft.com/
  23. 23 http://jeffcroft.com/
  24. 24 http://www.stopdesign.com/articles/absolute/
  25. 25 http://shiflett.org/blog/2005/feb
  26. 26 http://shiflett.org/blog/2005/feb
  27. 27 http://shiflett.org/blog/2005/feb

↑ Back to top Tweet itShare on Facebook

Vitaly Friedman loves beautiful content and doesn’t like to give in easily. Vitaly is writer, speaker, author and editor-in-chief of Smashing Magazine. He runs responsive Web design workshops, online workshops and loves solving complex performance problems in large companies. Get in touch.

  1. 1

    Love it. Really gives an insight into inspiring Webtechniques.

    Please give us more…. :)

  2. 52

    @ maghen: You have shout it out! FIRST! Questioning is too grown-up ;P

  3. 103

    yes, definitely more articles like this.

  4. 154

    So tired of CSS. Its boring and ridiculous after you used SVG.

  5. 205

    great article… love to see more!

    IE sucks so much. For this reason SVG isn’t worth a look for me. Trying to design modern websites for the masses is quite difficult. In some cases neglecting IE6 users is no option…

  6. 256

    i can’t wait until silverlight 2 goes RTM. then i can finally say “bye-bye” to CSS forever and not have to worry about wacky css browser differences. just build a silverlight app, deploy it and rest assured that your users are going to see the same thing no matter which browser / platform they are using. as a developer, i shouldn’t have to spend 80% of my time on fixing wacky presentation issues. that’s just so backwards.

  7. 307

    adelaide web design

    August 12, 2008 2:58 pm

    thanks again for the css design tips, informative as usual. Us

  8. 358

    That’s one smashing article!

    Very useful and inspiring. Please keep it coming.

  9. 409

    “There seems to be a bug since in the very beginning when the page is being loaded, all navigation options for all years are displayed.”

    Surely it’s not a bug – it’s just the right way to use JS. I.e. applying it once the page is loaded so that non-JS users still get to use the full menu.

  10. 460

    I used a pretty advanced script on this site for the navigation: http://www.puredezigner.com

  11. 511

    @maghen, nobody cares if you are first. You’re a tool.

  12. 562

    I think this is really great. Though…I would like to have more articles on designing and developing for these type of cool items for people with disabilities or to where they can degrade appropriately! Thanks.

  13. 613

    First off, thanks for the nice writeup!

    I just wanted to point out a couple other things in regard to the semi-transparent overlay panel block and how it was devised. As you said, the primary goal was to get all that “stuff” out of the way so the main focus could be on the content rather than everything else. There’s definitely trade offs with doing that but we decided we could live with them.

    Perhaps the more important trait about how that overlay works is that it degrades if Javascript is disabled and the JS that makes it function is applied unobtrusively at runtime, not as inline onclick handlers. If you turn off Javascript in your browser and click the link (you’ll need to refresh the page most likely), you still have access to the exact same content albeit in a different context.

    The use of Script.aculo.us’ Sound object to add the ‘beep’ sound as the overlay appears was purely for fun :)

  14. 664

    Thank you, thank you, thank you.

    I would love to see Smashing publish more articles on the developer side. I have been looking for a good tutorial on sliding navigation.

  15. 715

    Christopher L. Jorgensen

    August 13, 2008 5:15 am

    As someone who knows too little about design, but still likes to play around with wed design, this article was pretty darn cool!

    Christopher L. Jorgensen

  16. 766

    Here’s my take on #3: Drop-down category chooser

  17. 817

    Loves it. Great article and some things I can put to use. Kudos.

  18. 868

    Great Article, it’s quite often difficult to see the wood for the trees sometimes? But these ideas will come in useful. Thanks again and keep up the great work…..

  19. 919

    awesome article! good work! thanks a bunch!

  20. 970

    very interesting. wonder why Kobe site does not display properly in Opera? secondary menu is partially under left hand edge of image window?

  21. 1021

    Ye! Definitely you should present some bad examples. I’d rather prefer some bad examples as you can learn what is wrong and how it should be instead. Good examples are good for inspirational purposes.


  22. 1072

    @ susan taylor

    We did test in opera, which version are you using? I think our version may be out of date. I’ll have another look.

  23. 1123

    Thanks very much for mentioning the site. We spent a lot of time thinking about blog archive navigation, and I think there is much room for improvement.

    As an aside, the “bug” mentioned was addressed long ago by a JS update Jon Gibbins sent me, but I only just now applied it. :-)

  24. 1174

    Very nice article. Liked the way you commented on the navigation approaches. Would like to see more of this too :)

  25. 1225

    The Kobe site’s flash glitter thingie is opaque on Linux (FF3+Flash 10 beta). I’d imagine this is a bug/missing feature in Flash’s Linux version. Unfortunately the effect isn’t easily reproducible with a gif animation (too bad APNG isn’t supported in all major browsers). One option would be to place the gif animation under the text (as the glitter doesn’t show on top of the white text anyway), but this would ‘fail’ on the text edges where you have non-white AA pixels. That could be fixed by using a png instead of gif for the menu sprite, but then you’d have to worry about IE6’s shoddy png support. I do understand that Linux users aren’t really a big user group especially for such a site, so going to great length to work around Adobe’s misgivings on Linux isn’t a top priority.

  26. 1276

    It’s 2008—why are we still talking about tag clouds? Do any of you really find them that much of a usability enhancement to good, old-fashioned alphabetical order?

  27. 1327

    Nice article, guys!

    I especially like the semi-transparent Panel Block. I might try and implement something like that over on my site.

  28. 1378

    “i can’t wait until silverlight 2 goes RTM. then i can finally say “bye-bye” to CSS forever and not have to worry about wacky css browser differences. just build a silverlight app, deploy it and rest assured that your users are going to see the same thing no matter which browser / platform they are using. as a developer, i shouldn’t have to spend 80% of my time on fixing wacky presentation issues. that’s just so backwards.”

    i can’t wait until software professionals use their initiative to support and develop platform neutral architectures and open standards rather than parochial gulags of M$ controlled darkware.

  29. 1429

    This article is really helpful. Good examples are good for inspirational.

    New Techniques R O C K !!!!

  30. 1480

    This article is really useful

  31. 1531

    Very nice info! Thanks a lot! Its very useful to me!

  32. 1582

    @Alex Willcox..

    wow, that is so NOT cool for that other site to steal your design!! When I first read the article and saw that it wouldn’t work if javascript was disabled, I was a bit thrown off, but when I saw the reason why you chose not build for users with js disabled, it made sense. (not that you guys owe anyone an explanation), its just nice to see that there was a method to the madness… nice site& great work!

  33. 1633

    cool! used to use slide with flash all the time back in the day:

    (used to be a small popup – button to turn off music in lower right corner)


    I was also a poor designer, lol.

    I’m itching to use slide again. Thanks for the article. Nice Kobe site!

  34. 1684

    Very helpful and informative article, thanks for sharing.

  35. 1735

    I thought that was useful and interesting

  36. 1786

    great posting, i definitely like this amazing site, keep on it.

  37. 1837

    CSS Browsers Resets. Ever heard of them?


↑ Back to top