Menu Search
Jump to the content X X
SmashingConf London Avatar

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. our upcoming SmashingConf London, dedicated to all things web performance.

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. [Content Care Oct/17/2016]

As you know, 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.

You may want to take a look at related articles:

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 Link

Over the last years we have discovered a strong trend toward sliding horizontal menus (also known as Coda Slider effect). 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. Kobe 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. 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 image 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ć4‘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. Neighbors navigation Link

EllisLab 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 Link

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, Wishingline 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 absolutely. The first one has a transparent pointer5 as the background image and is placed next to “click to view”-link. The second container with a border-background-image is placed next to the first one, creating the illusion of a “bubble” panel. 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 Lupetti 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 Link

There is a variety of ways to design tag clouds6. 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 Croft uses a different approach for tags — tag chart list reveals not only most popular tags, but also how popular these tags are.

Jeff Croft

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 ranking

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, Relative7). 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 Link

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 Shiflett8 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.

Footnotes Link

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6 /2007/11/07/tag-clouds-gallery-examples-and-good-practices/
  7. 7
  8. 8
  9. 9
  10. 10

↑ 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 front-end/UX workshops, webinars and loves solving complex UX, front-end and performance problems in large companies. Get in touch.

  1. 1

    Very useful! First?

  2. 2

    You guys should definitely do more articles like this. My fiance is a developer and, while he finds your site pretty cool, he doesn’t come here much because there isn’t much in the way of resources for developers and cool tips/tricks and tutorials like there are here for designers. So more please!

  3. 3

    Nice innovative article, I doubt the “first!” readers actually read the article though.

  4. 4

    I really love this article, i browse this site every so often, and i just had to leave a comment for this piece. I would totally love more articles that show websites with a very nice design code, and talk about how its achieved and why it’s good vs. bad.

  5. 5

    One of the most useful posts I’ve seen on Smashing. And one of the few I’m saving for myself to use later.

  6. 6

    Very nice article. I would appreciate more examples of that nature. Another suggestion to make it even more useful is to isolate the element in question into a downloadable or copy/paste example. So if one finds the example to be something they want to use, they don’t have to investigate the other xhtml / css for which part is actually making the magic happen. Efficiency, not lazyness :P

  7. 7

    Great read, I’d love to see more articles like this!

  8. 8

    Nice article.

    Silly and pointless aside: Jeff Croft uses Python not PHP to modify his tag chart. He’s a Django designer/developer.

  9. 9

    I’m totally in love with your latest articles.
    Great work Smashing Magazine. Geek and Hype

  10. 10

    Definitely more like this. Loved it!!

  11. 11

    Andrew Wilkinson

    August 11, 2008 4:40 pm

    This is fantastic — the thought of using a semi-transparent PNG for a background never even OCCURED to me until I read this article! Even better, thanks to, it works flawlessly in IE6. I foresee this being quite a time-saver!

  12. 12

    I have been reading Smashing Mag pretty diligently for about 6 months now, and this was the first article i both:
    1) loved and will use some part of immediately
    and 2) wrote a comment for.

    I love it , so keep it up!

  13. 13

    Bruce Alrighty

    August 11, 2008 5:21 pm

    This is a great idea! Would like to see a lot more.

  14. 14

    I found this very useful, inspiring and informative – thank you.

  15. 15

    I’m learning css and I found this article really inspiring. Thanks for posting this one!
    SM should definitely publish more articles like this.

  16. 16


  17. 17

    gaurav chandra

    August 11, 2008 8:01 pm

    great work. very useful articles. good for web applications point of view also.

  18. 18

    This kind of article is much better than just list of links and tell nothing.
    There are so many lists in an article and I never go through them, it’s just too much. 50 best …, 45 best … etc.
    This article is nice because it gives only five examples and give your thoughts.
    This is the some of articles I really read and making comment now.
    This is the way to go. Keep it up. No more lists of links.

  19. 19

    Its really nice. I’d like to try some in future.

  20. 20

    Like always … You guys are amzing !!! This post has some serious things for consideration :-D Good info..

  21. 21

    New techniques rock!

  22. 22

    Thomas Dedericks

    August 11, 2008 11:15 pm

    Thanks guys, really interesting & useful article.

    It would actually make sense to remove dots for the “Feed RSS”-link using outline: 0;-assignment.

    One should be careful when using the outline property, since it is really useful to navigate through the page using keyboard…

  23. 23

    Duh! You even have to ask? Of course I want more of these articles. Bring ’em on!!

  24. 24

    Vitaly Friedman & Sven Lennartz

    August 11, 2008 11:23 pm

    @Thomas Dedericks (#23): you make a good point. Thank you. The article was updated.

  25. 25

    Very good article that is indeed a nice break from the lists (even though I as a blogger understand the need for those). But more of this on occasion please!

  26. 26

    Wauw, simply amazing. Great job! More of these, please.

  27. 27

    speaking of lists… perhaps what smashing needs is an article discussing the reliability and usefulness of lists?

  28. 28

    This article is really helpful. A lot of inspiration in one page :)

  29. 29

    Great article. Elegant semi-transparent backgrounds are great. Animated interfaces without Flash as well.

    Site note, the link on the Ivan Aleksić website screenshot is wrong.

  30. 30

    Marco Otte-Witte

    August 12, 2008 12:07 am

    I just created a simple Slider control, that slides content in a surrounding div similar to the Code slider. Maybe anyone finds that interesting:

    Only works in FF and Safari right now.

  31. 31

    Marco Otte-Witte

    August 12, 2008 12:09 am

    Forgot to mention that my Glider is based on

  32. 32

    Thanks for featuring Kobe! Glad you like it :D

    Just so you know, it was a conscious decision not to support people with javascript disabled. The number of people from the target audience (18 – 30’s, Student, living in the UK, etc) visiting the site without it enabled is negligible.

    It could have been done, but the time it would have taken is not really worth it.

    Thanks again,
    Will (Engage Interactive)

  33. 33

    Panagiotis Spiliotis

    August 12, 2008 1:35 am

    By far one of the most interesting articles I have ever read on your website. Great job. It takes full advantage of the way an Internet magazine can present and discuss information that is both usefull and responsive to the current needs of it’s audience.
    Thank you

  34. 34

    Keep it moving and forward.

  35. 35

    An excellent and interesting article. Thanks!

  36. 36

    Like it!
    keep rocking dudes.

  37. 37

    Very nice. A few more techniques filed away in my brain now.

    I like how you took the time to do a quick explanation of how this stuff was created and not just dump me off with a link.

  38. 38

    Bizarro; Kobe Bar is just down the road from me!

    Their drinks are a bit pricey for my liking.

  39. 39

    Very usefull.

  40. 40

    I thought this was a great article. I’ve been reading SM for a few weeks now and, being on the development side, was considering dropping the feed. I have to say, I’m very glad I didn’t since these are the articles that help me the most.

    As a general thought, I felt this could have been improved by breaking down the topic in more detail and using the example to drive home your point; instead, I felt the examples were your starting point and the topic seemed to be a necessary subject to bring up when going through the example site.

    All in all, excellent article! Keep writing these and I will absolutely keep coming back!

  41. 41

    Interesting, I always like to see new techniques like this.

  42. 42

    Im agree. This article its very interesting and helpful. I would like to see more articles like this one.
    Thanks guys.

  43. 43

    Really helpful stuff, you folks make it easier to keep up with all the new things going on… thanks. Please consider doing similar articles.

  44. 44

    Really Great Article.. I will use this techniques in my design work. Also I ‘m looking forward for same articles in future from you. Thanks for sharing knowledge.

  45. 45

    Excellent. Love seeing beautiful sites without having to resort to overuse of flash. In developing our client sites, we have become firmly in favor of using javascript in place of flash for animation when possible.
    Keep it coming.


  46. 46

    Yes, I would love to see more articles like this

  47. 47

    Mike [gamebittk]

    August 12, 2008 11:20 am

    Great article! Definitely bookmarking this for reference. :D

  48. 48

    Nice! Will remember to refer to this in future, for learn more funky CSS techniques.


  49. 49

    Love it. Really gives an insight into inspiring Webtechniques.

    Please give us more…. :)

  50. 50

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

  51. 51

    yes, definitely more articles like this.

  52. 52

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

  53. 53

    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…

  54. 54

    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.

  55. 55

    That’s one smashing article!

    Very useful and inspiring. Please keep it coming.

  56. 56

    “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.

  57. 57

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

  58. 58

    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.

  59. 59

    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’ Sound object to add the ‘beep’ sound as the overlay appears was purely for fun :)

  60. 60

    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.

  61. 61

    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

  62. 62

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

  63. 63

    Stuart Rutter

    August 14, 2008 12:42 am

    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…..

  64. 64

    awesome article! good work! thanks a bunch!

  65. 65

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

  66. 66

    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.


  67. 67

    @ 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.

  68. 68

    Chris Shiflett

    August 19, 2008 10:20 pm

    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. :-)

  69. 69

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

  70. 70

    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.

  71. 71

    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?

  72. 72

    Nice article, guys!

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

  73. 73

    “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.

  74. 74

    Gaurav Kashyap

    January 22, 2009 1:45 am

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

    New Techniques R O C K !!!!

  75. 75

    This article is really useful

  76. 76

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

  77. 77

    @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!

  78. 78

    Very helpful and informative article, thanks for sharing.

  79. 79

    I thought that was useful and interesting

  80. 80

    CSS Browsers Resets. Ever heard of them?


↑ Back to top