8 Layout Solutions To Improve Your Designs


The organization of content is probably one of the most important and influential aspects of any good web design. Organizing information into a well-built layout is the basis of a website, and should always come before styling concerns. Without a good layout, the website doesn’t seem to flow correctly, and nothing connects the way it should.

In this article, we’ll discuss 8 useful layout solutions and techniques that will help you create a clean and organized content layout. The 8 techniques include sliders, tabs, progressive layouts, structured grids, modal windows, rollover elements, accordions and mega drop-down-menus.

You may also be interested in the following related posts:

1. Sliders and Carousels

Sliders, also known as carousels, are an organized, interactive and quite smooth way to present information. Sliders are a popular technique because they’re very usable, and you can put a good amount of content into a fixed, compact area – without a slider this content has to be placed somewhere on the page and in many cases you may have no space for it and you may deliberately want to show some information only “on demand”. This helps the user to focus her attention on one content block at a time which is helpful and convenient. And this is exactly where sliders may come in handy.

Examples of Sliders

Thumbnails and icons in the navigation area
When designing a content slider or an image slideshow, it’s best to provide users with icons or thumbnails in the navigation area to offer a simple and intuitive navigation. Thumbnails and icons give the user some orientation, explaining where they currently are in the slideshow and what navigation options are available (e.g. a slideshow can have a horizontal or vertical navigation). Besides, the user can quickly select a particular page on the slider.

In the slider used on the Coda site4 you can see that there are tabs provided at the top of the slider. They create a sort of "slider/tab"-element mixed together. This is an excellent idea, because by just looking at the thumbnails, the user can easily find a page in the element. Also, the icons add a very strong, memorable and clear visual support. Apart from icons and labels you can also use image thumbnails or even numbers for the same purpose.


Slider is used for navigation in product items
Opposite to the example above, sliders can be used not only to display large chunks of information, but also to help users navigate through dozens or hundreds of available product items in a convenient way. For instance, SourceBits6 (see the image below) uses multiple sliders (a horizontal and a vertical one) that provide users with an appealing navigation through CD covers.

The slider has large circular buttons on each end to indicate how the navigation works. There are smooth transitions, so the slider looks quite attractive and is comfortable to use. Also, you’ll notice that the illustrations are nicely spaced out, so it is easier to click on individual icons and it is also well-organized. Each item also has a nice lightning hover-effect.


Vertical content sliders with large horizontal “clickbars”
Let’s take a look at the slider used on QuickSnapper8. It is a very functional vertical slider that works perfectly in the layout. The slider holds a large amount of snapshot items. It is very well organized, and it is easy to find the items within the element. The best part of this slider are the buttons on the bottom and on top of it. They are extended to the entire width of the slider. The large buttons make it much easier to use the slider.

For instance, if you’ve picked one of the presented items and then decided to check further items, you can simply click on the large bar on the top or at the bottom to navigate. That’s convenient and user-friendly. Also, if you go to the site and try it out, you will notice that the buttons also have very nice :active- and :focus-effects, which looks nice and improves usability.


Slider Scripts

You can implement these techniques using the following freely available scripts, techniques and tutorials:

2. Tabbed Navigation Elements

Basically, tabbed navigation is a technique that is very similar to sliders. You can keep a large amount of data in a compact area that is much smaller than what you would normally need. Tabbed navigation is a common practice, and there a few different ways to carry it out. We’ll focus on the use of tabbed navigation elements within a page, instead of focusing on the use of tabs for main content navigation. A tabbed element obviously separates different content blocks, yet combines them into one area that only takes up a small amount of space.

Examples of Tab Elements

Distinctive backgrounds, large clickable areas, clear separation
The first example comes from the "Performance" section of the Mac Pro website19, and is a perfect example of a well-constructed tab element. The labels on these tabs are readable, have a large clickable area, and have a good visual separation, so they look exactly as most users expect them to look like. Also, you can see that the currently opened tab has a background matching the background of the main contant area. The inactive tabs have a slightly darker background, and a drop shadow from the content block to add depth and dimension. That’s a very simple effect, yet a very effective one.


Clean tabs with separation of buttons
Here’s another good use of tabs to present the information in a compact manner. The way Atebits21‘s layout was constructed, there was not a huge amount of space for multiple sections of content. Therefore, they placed the three sections into tabs, so the layout remains very clean and organized. Again, the open tab takes on the background color of the main content area, while the inactive tabs have a darker grey background. Also, you will notice a nice separation between the tabs to further define each individual button. A slight bevel is used to cleanly separate the buttons.


Clean separation of the entire tab set
Fontcase23 has another nicely designed tab set with a strong modern look and feel. Although this design doesn’t have a separation between the unopen tabs, the open one has a clear border. Also, you can see that there is a border above and below the set of tabs. These tabs make use icons and white space to support the text, making the tabs easier to use.


Tab Scripts

You can implement these techniques using the following freely available scripts, techniques and tutorials:

3. Modal Windows

Modal windows, or floating windows, are an excellent way to present additional information that has no space in the page layout. In modal windows, you can present larger images, extra content, alerts/tips that the user will easily notice, videos, and more. When you put information in a modal window, you need to make it clear for your users how to close the window.

It is also important that a link, a thumbnail, an icon, or any other graphic element that triggers the modal window to open is strongly (and clearly) related to the content of the modal window. A similar icon, header or visual can help users to establish a connection between the original link and the opened window.

Examples of Modal Windows

Modal windows for logins and signups
The most common element where modal windows are used (apart from “traditional” media-files such as images, audio, video, screencasts etc.) are login- and signup-windows. When you use a floating window for a login/signup, you are saving a good amount of space on each page. Also, the user doesn’t have to load an entirely new page just to login. They can login on any page on the entire website without their current session being interrupted – of course, if the designer of the site made sure that the login- or signup-process can happen behind the scenes with Ajax.

Grooveshark32 uses a nice signup-window on each page throughout its web-site. Notice that the login-button in the signup-window does not open a new page, but replaces the sign-up form below with the login-form input fields (using the accordion-effect, see below). That’s very convenient and user-friendly.


Fade out the page or/and use a drop shadow
If you are going to be using a modal window, it is very important to fade out the page behind the window in some way. This could mean using a semi-transparent backdrop, a drop shadow, or both. By doing this, you are making two important design decisions. First, you are bringing the users focus toward the floating window and away from the page behind the window.

Also, you are adding more depth and separation between the window and page, to give the appearance the window is actually physically floating. In the screenshot below (KissMetrics34) , you can see a login form contained within a floating window, and the page behind is faded out. By the way, notice, how well the cancel/sign in-buttons are visually designed, too. Beautiful design.


On RealMacSoftware36 a dropshadow is used behind the window instead of the entire page being faded out. This technique still works nicely by creating depth and separation.


Modal Scripts

You can implement these techniques using the following freely available scripts, techniques and tutorials:

4. Rollover Elements

A rollover element is another design element that is nowadays gaining on popularity, particularly in corporate web-sites, portfolios and product sites. The main idea behind the rollover element it that when users hover the mouse over some site element such as a button, the content in some other layout area is displayed automatically. Take a look at the examples below to get a better understanding of what exactly is meant.

Examples of Rollovers

Rollover tabs
Below you’ll find a screenshot of the Miro’s homepage46 where a large and very well-designed rollover element is used. This element is similar to a slider, yet it doesn’t use a button to slide through pages – the sliding takes place automatically.


Subtle rollover hover elements
TaoEffect48 is a brilliant example of a rollover element that present additional information in a very beautifully styled and clean layout (this effects was used on the Coda-site first, but we chose to use this example instead). The information is presented in a very user-friendly way; all you have to do is hover over the button.

If you visit the site, you can see that this rollover has some nice and soft animated transitions. The opening transition is a vertical wipe with a fade. Finally, you can see that the background is semi-transparent. There is also a highlighted border that adds a clear separation from the other content.


A content map with rollover elements
OneHub50 uses a rollover element for another effect. Similar to a map, the site page is split into a number of chunk with hints; when a visitors hovers over a hint, additional information is displayed automatically. This effect can be particularly useful for sites that are supposed to showcase product’s features or provide users with explanations or an introduction.


Rollover element integrated in a slideshow
Another interesting design approach is presented by SquaredEye52 – the carousel menu uses rollover effect on the trigger elements to let the users preview previous and next navigation item. In some situations this approach can be useful.


Tooltip/Hover Element Scripts

You can implement these techniques using the following freely available scripts, techniques and tutorials:

5. Progressive Layouts

A “progressive layout” is one way to describe a series of content chunks that are supposed to be displayed on a site in a specific order. This is a quite uncommon way to organize information, but it still can be seen on many sites. A progressive layout helps users to move through a long series of information easily.

Examples of Progressive Layouts

An entire site consists of progressive pages
The entire portfolio Sursly.com60 (shown below) is based on a progressive layout. You can see the "Go" button in the upper right corner of the page. Each page is accessed from the page before it. This progressive system of pages is a substitute for a navigation bar or menu. Of course, the main disadvantage of such layout is the simple fact that it is quite hard to navigate and rather serves the purpose of interactivity.

Although single pages in such layouts can be bookmarked (using the #-anchor), they make it impossible for random visitors to get a broader overview of available navigation options immediately. Besides, such layouts usually have only one “direction” of navigation – forward. It’s not good from the usability point of view.


Progressive Vertical Page
Danny Blackman62 (the example below) shows a portfolio that is constructed solely on a progressive layout of content. There are separate elements, all displayed vertically on a single page. An auto-scroll feature is provided to bring the users from element to element throughout the page. Again, no menu or main navigation is used, just buttons bringing the user from one element to the next, or back.


ScrollTo Script

  • ScrollTo64 – This is a JQuery plugin that can be used for vertical progressive layouts, like the one shown above.

6. Grids

No article about layouts would be complete without a mention of grids. Grids are often considered to be the fundamental part of any balanced, ordered and concise web layouts. Many designers consider them to offer the most effective way to communicate a large amount of information to the users. Grids can be used solely to display information, without the use of any other techniques. A good grid system will join all of the content of a page into one flowing layout, but still allow for readability and scannability of individual sections.

In the website below, you can see a very strict grid layout in use. There is only a page of content on the entire site, so this page has a good amount of information. However, the information is organized into a clean grid with two columns, creating a strict, strong and solid layout with the fair amount of spacing; the content is readable and scannable.


Using different backgrounds to separate sections of a grid
When making a grid, you may have a large amount of information in a very compact area. You need to make it clean and organized, but don’t have enough room for a good amount of (positive and negative) white space. Therefore, you can use different backgrounds for each sections of a grid. Instead of spacing between grid sections, you just need a small amount of padding, and it will still look nice. On Valleycreek.org66 (see the image below) you can see this very tactic being used to create a very well-constructed content layout. You can see that a very thin line is used to divide sections, but aside from that the color contrast provides a separation that is distinct enough.


Grid Generators, Templates, and Tools

7. Accordions

Accordion menus are based on the same concept as sliders and tabs: it takes a large amount of information and encapsulates it in a smaller area. Accordions are blocks organized in a vertical or horizontal manner such that once a tab is clicked, a content-block slides upon the other one – similar to an accordion, hence the name.

Examples of Accordions

Functionality and large clickable areas
Alex Cohaniuc74 uses a very well-designed and accordion menu. Keeping portfolio items in the accordion is reasonable because it keeps (unnecessary) details about each project hidden and displays them on demand. This accordion is well designed for several reasons. First, you will notice that the headers of each canvas a very large, making them easily clickable. Also, you can see that each header uses a triangle to symbolize whether the accordion tab is opened or not. Finally, in this design, the header of the current tab has a distinctive background color.


Horizontal content slider
Jason Reed76 uses the accordion to keep the content of the entire website on one single page. Instead of having the appearance of a totally out of place element, this accordion takes on the same styling and color as everything else on the page. In addition, this accordion is horizontal (although the navigation options have a vertical orientation). Also, take a look at the tabs. First, you will spot a significant amount of space between each of the tabs. These tabs, or headers, don’t have a separation like you saw it in the last screenshot, so a good amount of space was used to separate here instead. Also, large and readable labels are included in this accordion. These little details are important, because the user needs to know exactly what to expect in each tab.


Accordions containing images and information
Marius Roosendaal78 uses another excellent vertical accordion to “hold” portfolio images. Each content block is an image showcasing a work, same as before. However, this one includes textual labels for each image. You can see that a small button is used to show/hide these descriptions. You can also find a link to a larger, more in-depth view of the portfolio item. You can’t present huge amounts of information in an accordion this small, so it is always good practice to include a link to more information if possible.


Accordion Scripts

You can implement these techniques using the following freely available scripts, techniques and tutorials:

8. Mega-Drop-Down-Menus

Navigation doesn’t have to be a simple set of links; recently it is “reinvented” to present not only available navigation options, but also the hierarchy and structure of the site’s content. The so-called "Mega" drop-down menus are commonly seen in e-commerce or product layouts as a way to show detailed information about products. Menus such as these are a new trend, and are quickly catching on because they can instantly provide users with the information that they are looking for – without a single click, quite similar to the concept of a rollover element.

Examples of Mega-Drop-Down-Menus

A classic example for a mega drop-down menu is the Guide Index on Ruby On Rails Guide87. The menu serves as a well-organized and nicely presented secondary navigation menu. Notice that on contrary to the menus presented above, this menu uses a “switcher” icon on the right hand side to trigger the drop-down menu at the bottom. Also notice a nice soft shadow that gives the menu depths and helps it stand out.


Multi-level menus with information
Porsche89 (shown below) is a perfect example of the technique explained above. Porsche’s homepage contains a multi-level menu that allows users to navigate to all of the cars manufactured by Porsche without a single click. On the third level, a window with information about the selected car can be found. The window contains an image, many links, and quick information about the car. Of course, the large content block is a large clickable area, hence all details and features can immediately be clicked. For a better understanding of the technique, click on the image below and visit the full page.


Search results displayed in a drop-down-list
A recent trend that is related to this technique is the tactic of including search results in a "drop-down" menu. This technique is used in the Media Temple Knowledge Base91. Instead of using an entirely new page to show users the search results, designers chose to display results in a drop-down list, which updates while you type. However, take note of the fact that a link is provided to full search results on a page, which is not to be forgotten in such situations.


Providing extra information in drop-downs
Once again, on Gateway.com93 you can see a mega menu being used to show information about products, along with links. The products in this drop-down are very well-organized and the images are included to add visual support. This menu provides a bit of information too, such as the price listed for each computer. This helps the user pick products before viewing the page, because many potential customers are likely to be interested primarily in price – at least in the initial stage of the purchasing process. Mega menus such as this ultimately make navigation easier and offer a better way to present information that users are looking for.


Menu Scripts

Further Resources

You may be interested in the following related posts:


  1. 1 http://www.smashingmagazine.com/2008/08/11/5-useful-coding-solutions-for-designers-and-developers/
  2. 2 http://www.smashingmagazine.com/2008/09/03/40-creative-design-layouts-getting-out-of-the-box/
  3. 3 http://www.smashingmagazine.com/2009/01/14/web-design-trends-for-2009/
  4. 4 http://www.panic.com/coda/
  5. 5 http://www.panic.com/coda/
  6. 6 http://www.sourcebits.com/nerve/
  7. 7 http://www.sourcebits.com/nerve/
  8. 8 http://www.quicksnapper.com/
  9. 9 http://www.quicksnapper.com/
  10. 10 http://sixrevisions.com/tutorials/javascript_tutorial/create-a-slick-and-accessible-slideshow-using-jquery/
  11. 11 http://www.ndoherty.com/demos/coda-slider/1.1.1/
  12. 12 http://www.flowplayer.org/tools/scrollable.html
  13. 13 http://nettuts.com/tutorials/javascript-ajax/create-an-amazoncom-books-widget-with-jquery-and-xml/
  14. 14 http://plugins.jquery.com/project/agile-carousel
  15. 15 http://cssglobe.com/post/3783/jquery-plugin-easy-image-or-content-slider
  16. 16 http://jqueryfordesigners.com/slider-gallery/
  17. 17 http://jqueryfordesigners.com/coda-slider-effect/
  18. 18 http://zendold.lojcomm.com.br/icarousel/
  19. 19 http://www.apple.com/macpro/performance.html
  20. 20 http://www.apple.com/macpro/performance.html
  21. 21 http://www.atebits.com/tweetie-iphone/
  22. 22 http://www.atebits.com/tweetie-iphone/
  23. 23 http://www.bohemiancoding.com/fontcase/index.html
  24. 24 http://www.bohemiancoding.com/fontcase/index.html
  25. 25 http://nettuts.com/html-css-techniques/how-to-create-a-slick-tabbed-content-area/
  26. 26 http://www.barelyfitz.com/projects/tabber/
  27. 27 http://www.kminek.pl/lab/yetii/
  28. 28 http://www.crackajax.net/tabs.php
  29. 29 http://blog.cutterscrossing.com/index.cfm/2007/6/15/Updated-JQuery-Nested-Tab-Set-with-Demo
  30. 30 http://wiki.github.com/madrobby/scriptaculous/tabs
  31. 31 http://www.nyokiglitter.com/tutorials/tabs.html
  32. 32 http://listen.grooveshark.com/
  33. 33 http://listen.grooveshark.com/
  34. 34 http://www.kissmetrics.com/
  35. 35 http://www.kissmetrics.com/
  36. 36 http://www.realmacsoftware.com/rapidweaver/themes/index.php
  37. 37 http://www.realmacsoftware.com/rapidweaver/themes/index.php
  38. 38 http://fancy.klade.lv/home
  39. 39 http://www.lokeshdhakar.com/projects/lightbox2/
  40. 40 http://www.dynamicdrive.com/dynamicindex4/facebox/index.htm
  41. 41 http://woork.blogspot.com/2008/01/lightbox-using-mootools-and-pathfusion.html
  42. 42 http://nyromodal.nyrodev.com/
  43. 43 http://nyromodal.nyrodev.com/
  44. 44 http://stickmanlabs.com/lightwindow/
  45. 45 http://prototype-window.xilinus.com/
  46. 46 http://www.getmiro.com/
  47. 47 http://www.getmiro.com/
  48. 48 http://www.taoeffect.com/espionage/
  49. 49 http://www.taoeffect.com/espionage/
  50. 50 http://onehub.com/features/user-home
  51. 51 http://onehub.com/features/user-home
  52. 52 http://squaredeye.com/
  53. 53 http://squaredeye.com/
  54. 54 http://www.nickstakenburg.com/projects/prototip2/
  55. 55 http://jqueryfordesigners.com/coda-popup-bubbles/
  56. 56 http://net.tutsplus.com/tutorials/javascript-ajax/build-a-better-tooltip-with-jquery-awesomeness/
  57. 57 http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/
  58. 58 http://net.tutsplus.com/tutorials/javascript-ajax/create-a-simple-powerful-product-highlighter-with-mootools/
  59. 59 http://cssglobe.com/post/1695/easiest-tooltip-and-image-preview-using-jquery
  60. 60 http://www.sursly.com/#tyler
  61. 61 http://www.sursly.com/#tyler
  62. 62 http://www.dannyblackman.com/
  63. 63 http://www.dannyblackman.com/
  64. 64 http://plugins.jquery.com/project/ScrollTo
  65. 65 http://www.neutroncreations.com/
  66. 66 http://valleycreek.org/
  67. 67 http://valleycreek.org/
  68. 68 http://www.gridsystemgenerator.com/
  69. 69 http://spry-soft.com/grids/
  70. 70 http://960.gs/
  71. 71 http://grid.mindplay.dk/
  72. 72 http://www.29digital.net/grid/
  73. 73 http://www.smashingmagazine.com/2009/01/27/css-typographic-tools-and-techniques/
  74. 74 http://www.alexcohaniuc.com/
  75. 75 http://www.alexcohaniuc.com/
  76. 76 http://www.jasonreedwebdesign.com/
  77. 77 http://www.jasonreedwebdesign.com/
  78. 78 http://www.mariusroosendaal.com/
  79. 79 http://www.mariusroosendaal.com/
  80. 80 http://nettuts.com/javascript-ajax/create-a-simple-intelligent-accordion-effect-using-prototype-and-scriptaculous/
  81. 81 http://jqueryfordesigners.com/slide-out-and-drawer-effect/
  82. 82 http://docs.jquery.com/UI/Accordion
  83. 83 http://jquery.bassistance.de/accordion/demo/
  84. 84 http://www.i-marco.nl/weblog/jquery-accordion-menu/
  85. 85 http://www.i-marco.nl/weblog/jquery-accordion-menu/
  86. 86 http://designreviver.com/tutorials/jquery-examples-horizontal-accordion/
  87. 87 http://guides.rubyonrails.org/contribute.html
  88. 88 http://www.gateway.com/
  89. 89 http://www.porsche.com/usa/
  90. 90 http://www.porsche.com/usa/
  91. 91 http://kb.mediatemple.net/
  92. 92 http://kb.mediatemple.net/
  93. 93 http://www.gateway.com/
  94. 94 http://www.gateway.com/
  95. 95 http://www.clarklab.net/blog/posts/animated-drop-down-menu-with-jquery/
  96. 96 http://users.tpg.com.au/j_birch/plugins/superfish/#examples
  97. 97 http://www.sitepoint.com/blogs/2009/03/31/make-a-mega-drop-down-menu-with-jquery/
  98. 98 http://buildinternet.com/2009/01/how-to-make-a-smooth-animated-menu-with-jquery/
  99. 99 http://css-tricks.com/designing-the-digg-header-how-to-download/
  100. 100 http://www.kriesi.at/archives/create-a-multilevel-dropdown-menu-with-css-and-improve-it-via-jquery
  101. 101 http://www.smashingmagazine.com/2008/08/11/5-useful-coding-solutions-for-designers-and-developers/
  102. 102 http://www.smashingmagazine.com/2009/03/24/designing-drop-down-menus-examples-and-best-practices/
  103. 103 http://www.smashingmagazine.com/2009/03/09/slideshows-in-web-design-when-and-how-to-use-them/
  104. 104 http://www.smashingmagazine.com/2008/09/03/40-creative-design-layouts-getting-out-of-the-box/
  105. 105 http://www.smashingmagazine.com/2009/01/14/web-design-trends-for-2009/
  106. 106 http://www.smashingmagazine.com/2009/04/08/from-table-hell-to-div-hell/

↑ Back to top Tweet itShare on Facebook

Matt Cronin is an avid graphic designer, web designer/developer, Cocoa programmer, photographer, digital artist, and the like. He also enjoys writing, and does quite a bit of writing for Smashing Magazine. He is currently working on a startup called VAEOU, which will have new services coming soon.

  1. 1

    great post. And im the first to post im better than the rest of you !

  2. 2

    Jack Griffiths

    May 19, 2009 7:55 am

    Awesome, thanks.

  3. 3

    Great roundup on design patterns with related tools and tuts.

  4. 4

    amazing, thank you

  5. 5

    One of the best post ever here in smashingmagazine!

  6. 6

    Don’t mean to nitpick, but apart from point 6, this is a post about user interface elements, not layout.

    I know accordions and large drop-downs sort of cross over into structuring the display of content, but I guess I was expecting lots of wireframe analyses of sites or something….

  7. 7

    Nice…I can see really using this in my projects.

  8. 8

    weik…. yang ke 8

  9. 9

    Nothing really new, but still cool nonetheless!

  10. 10

    Very nice, thanks.

  11. 11

    Perfect post! Many thanks!

  12. 12

    Perfect for my needs in inspiration! Thank you!

  13. 13

    Nice, although we already knew about these layout solutions, it’s good to have them documented with examples and scripts in one place.

  14. 14

    I’ve been waiting for something like this for a long time, it’s always to show samples, demos and downloading the actual code is a plus. Keep posts like these coming…

  15. 15

    I Like it! Very good

  16. 16

    it’s funny to see that all these new developments are really all part of the same trend. The trend of keeping your visitor happy by staying on the same page but still giving him new information to keep him interested. I personally love this and I think these one page website will take a big flight this year!

  17. 17

    i love you. i have been fighting making SM my home page, but it became so about a month ago. awesome content you guys, keep it up.

  18. 18

    The mega-drop-downs are a relatively new thing, but I think they are truly one of the best features to appear for a while. They expand on the convention and make it much more useful. Great article!

  19. 19


    May 19, 2009 10:43 am

    QuickSnapper does not function properly in ie

  20. 20

    Great article, a ton of inspiration mixed with i need to get off my lazy ass and do these things

  21. 21

    coolest post ever on sm! contains EVERYTHING i need in near future… THX! where do i sign up for sm? …. i wanna avatar, too! :-)
    great works dudes, keep on rollin

  22. 22

    This is really great stuff. and thank you, thank you, THANK YOU for the links to different sources. it’s really helpful instead of just listing the different techniques and examples. We want to know HOW to do it too :)

  23. 23

    Awesome ressources so often, thanks a lot guys, huge work, hugely apreciated.

  24. 24

    Great post – excellent list of sites….

  25. 25

    The more stuff people put on their webpages the more minimalist my own will become.

    Yes yes it looks nice but it’s really confusing, messy and awkward for the most part. Think of the bandwidth usage, the reliance on scripts etc. why not keep it simple, stupid? :3

  26. 26

    Another example for progressive vertical page design –

  27. 27

    I’m totally with you Quakeulf. My portfolio website used to feature a bunch of sliders and all sorts of nonsense, which operated janky and usually loaded slow. Then it hit me: content is king. I’ve never looked back, and I’m so much happier with my site (it’s also pretty nifty, even for how simple it is).

  28. 28

    These are the articles i like! Good work!

  29. 29

    what r_jake said. Good, but how about something tuned more into Layout frameworks and less UI

  30. 30

    great solutions wish there were more than just 8 though!

  31. 31

    Thats really a great article. I would love to see more like this. Thanks mate

  32. 32

    very inspiring roundup

  33. 33

    Come on Rob… If you are going to tell us how cool your site is, at least give us a link and let us look at it. Market yourself….

  34. 34

    Fantastic post. No more comments

  35. 35

    Nice roundup, although several of these can be achieved using CSS instead of scripts. Good inspiration!

  36. 36

    I would definitely not consider Sourcebits as a good slider horizontal/vertical slider example. The interaction/relation between both is incredibly confusing.

  37. 37


  38. 38

    Good article, but it lacks warning. These techniques are all great and can much improve the user experience, but only when used correctly. Think a thousand times before using any of these patterns, for two reasons.

    Firs is that they haven’t jet proven themselves as much as the older patterns we know, some are known to be quite confusing for some users.

    Secondly they’re all CPU- and bandwidth suckers, and therefore not suitable for users with slower systems or internet connections.

    The most important thing to ask yourself is this: what pattern suits my audience? Don’t choose a pattern because it’s fun to build of because you like it’s slick looks, use it because it improves your site. If it doesn’t, don’t use it!

  39. 39

    Wow, absolutely amazing tools. Should really dazzle up a web page!

  40. 40

    Odd nobody disagrees or “complains” why Quicksnapper works in FF and not in IE + puts the computer processor to extra work running the script (cool script BTW!).

    Great post, though :)

  41. 41

    great, thank’s

  42. 42

    really helpful for me, thanks for d article,….:) hope some will works under troublesome-ie6 though

  43. 43

    Very Useful. Thanks

  44. 44

    nice round up… very useful and handy …

  45. 45

    Awesome post :)

  46. 46

    thanks for the article, brilliant

  47. 47

    like it very much! read and learn

  48. 48

    Incredible useful article! Millions of thanks!

  49. 49

    i like it

  50. 50

    Dalibor Vasiljevic

    May 19, 2009 10:13 pm

    Once again a good post. Keep good writing ;)

  51. 51

    Very nice description of the solutions. I use a few of them in my Projects. The Slider is my favorite…

    But tooltips for Link Hover or the tabs are very cool too :)

  52. 52

    Great post. Keep up the good work

  53. 53

    Very good work. Thanks for that post.

  54. 54

    Very nice examples. Glad to see the modal window examples, thickbox didn’t work for me when trying to open using onload

  55. 55

    Nice post again boys.

  56. 56

    Very nice presentation and I need to dig in to get more out of the article. Thanks for the info!

  57. 57


  58. 58

    nice job man

  59. 59

    Very nice! This is a great list of references and a great toolbox of web elements to design your way out of a tight spot!

  60. 60

    some great examples here. i’m inspired to incorporate some into my site.

  61. 61

    As usual, a great and inspiring article with lots of additional sources of relevant info.

  62. 62

    Very good! A lot of useful links! All that I need.

  63. 63

    thank you very much! greetings from cologne :)

  64. 64

    Thank you, all is very usefull! Specialy jQuery is amazing …

  65. 65

    Nice post as usual, I was hoping it would be about the layout of a site itself. I’d like to see some different ones, instead of the usual – logo goes here, flash goes here, text here… navigation here etc. Mine tend to follow simular layouts.

    Just an idea…

  66. 66

    All of them can be used with Word Press?

  67. 67

    Evan Skuthorpe

    May 20, 2009 4:34 am

    some great examples here. i’m inspired to incorporate some into my site.

  68. 68

    Mike Archibald

    May 20, 2009 4:51 am

    Great post thanks.

  69. 69

    a ton of inspiration great poste

  70. 70

    good shit

  71. 71

    Great article, interesting and thought provoking.

    The Mac Pro website tab effects works really nicely in IE8, I presume it works in Safari but looks really poor in Firefox and the tab effect doesnt work

  72. 72

    Really great article, but as already mentioned by a couple of people, not really what I expected from the title. Apart from point 6, these are all website ‘elements’ as oppose to layouts.

    It would be nice to see comparisons between different sites evaluating common or interesting placement of menus in relation to headers in relation to logos in relation main content in relation to key graphics etc etc..

    Still, great stuff SM. Especially liked the mega drop down menus and they will certianly be useful on a project I’ve just taken on.

  73. 73

    Very cool techniques. Just know what you are doing when implementing as they all have the potential to be obtrusive and/or quirky across different browsers.

  74. 74

    Excellent post. One of the best ones I have read for a while. I am always impressed at the myriad ways to get information into limited areas using the above techniques.

  75. 75

    Nice post!
    But be carefull with all of them: keep it unobstrusive and crossbrowser compatible. My experience is: this takes a lot of time if coding isnt prepared well enough

  76. 76

    When you start feeling the need for rollover tips and mega drop-downs, it’s time to stop and ask yourself the real question: How can I simplify this site?

  77. 77

    Another great compilation

  78. 78

    Love U guys! I was just looking for vertical slide solution and U gave me so much opportunities! Great Article!

  79. 79

    How can you continue to create so god damm posts! Wow!

  80. 80

    This was a great post, I love that you show the examples backed up with the scripts. Excellent work!

  81. 81

    Great article. As we can see, technology is pushing design to create amazing and organized layout :) thanks !

  82. 82

    The modal boxes is great stuff; just what I was looking for. Thanks again SM

  83. 83

    Great article. I was looking for cool effects for my portfolio and that’s exactly what I needed.

  84. 84

    write more about this stuff

  85. 85

    Younten Jamtsho

    May 21, 2009 3:51 am

    nice collection– all the way from Bhutan

  86. 86

    incredible post. congratulations.

  87. 87

    Absolutely the most useful design article I have read in a long time. Thank you!

  88. 88

    curious, is it right that tabbed navigation make page reload?
    didnt tabs mean change content without reload?

  89. 89

    Typo in your Modal section, the script is called facebox not facebook, understandable error… :-)

  90. 90

    I have loved the slider elements ever since I saw Panic’s Coda site. But I’m beginning to think it’s overused. Although, I once said that of tabbed navigation.

  91. 91

    gr8 posts man…but need more info on logo designing….

  92. 92

    Steffan Williams

    May 23, 2009 11:10 am

    Could I also make a suggestion for Gridinator under your grid section? It’s a simple fixed, fluid and elastic grid calculator.

  93. 93

    Nice collection! Many thanks!!!
    Smashing Magazine is my absolute favorite concerning these subjects!

  94. 94

    @ Steffan Williams

    gridinator.com is wonderful! Thanks for this great link!

  95. 95

    This article is wonderful, chock full of great design information. I loved it.

    The only thing I don’t like about modal windows is that some that are used as logins don’t recognize or don’t work with my 1Password application.

  96. 96

    This is one of the best collections of scripts that I have seen to improve design. Thank you for introducing so many new ideas, and I will definitely be incorporating them into my designs in the future.

  97. 97

    real amazing! Im Webmaster and Designer – very helpful scripts thanks.

  98. 98

    Ashely Adams : Sticker Printing

    June 11, 2009 3:30 am

    Though I wouldn’t call myself a hardcore web designer, I’ve had to design a few now and then. This tutorial is excellent in helping me explore some really cool possibilities. Thanks.

  99. 99

    es uno de los mejores post que he visto en mucho tiempo, que grande hijo

    this is simply one of the best post i´ve ever seen in a long time, great dudes!

  100. 100

    Thanks for this great article….

  101. 101

    Just wanted to let you know I finally released a new version of the agile carousel JQuery plugin you covered in this article. Lots of new features and bug fixes. Check it out here: agilecarousel.com/instructions

  102. 102

    thanks a lot !!! may be the best post ever ^_^

  103. 103

    Great collection! Good to see all these on a single post.

  104. 104

    Really helpful! Thanks a lot!

  105. 105

    a nice collection…thanx…

  106. 106

    I realise I am pretty late coming to this post, but I felt I needed to say thanks – this is a wonderful post – one that I’m going to store for reference…! Thank you very much!!

  107. 107

    Thanks a lot For this.

  108. 108

    The post is just AWESOME… Ctrl+Ded it for my future reference… Looking forward for some more similar posts. Thanks!!

  109. 109

    This is very useful artical

  110. 110

    my god. smashingmagazine is really rocking with extremely valuable resources.

  111. 111

    Well completed! I would really be happier individual if everyone wrote too as you do. Thanks again


↑ Back to top