
Smashing Magazine we smash you with the information that will make your life easier. really.
5 Useful Coding Solutions For Designers and Developers
By Smashing Editorial, August 11th, 2008 in CSS | 125 Comments | Forum
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 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.
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 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 (here 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 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ć’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
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
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 absoultely. The first one has a transparent pointer 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 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 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
There is a variety of ways 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 Croft uses a different approach for tags — tag chart list reveals not only most popular tags, but also how popular these tags are.
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 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, Relative). 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 Shiflett 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!
Leave a Reply
Sponsors
- Advertise with us!
Smashing Links
Stay in touch
Popular Posts
- 100 Wordpress Themes
- 83 Wordpress Themes
- 80 AJAX Solutions
- 75 JavaScript Techniques
- 70 Best Photoshop Tutorials
- 70 Best Illustrator Tutorials
- 53 CSS Techniques
- 50 Blog Designs
- 50 Graffiti Artworks
- 50 Brilliant Photos
- 50 Movie Posters
- 40 Free Fonts
- 40 Creative Layouts
- 35 Beautiful Icon Sets
- Beautiful Desktop Wallpapers
- Beautiful Macro Photos
- Beautiful Underwater Photos
- Free Design Templates
- Free CSS Layouts
All Posts
- 35 Designers × 5 Questions
- 50 Designers × 6 Questions
- 404 Error Pages
- AJAX Libraries
- AJAX Solutions
- AJAX Tutorials
- Badges and Pins
- Batch Image Processing
- Black & White Photography
- Block Quotes
- Blog Designs 1, 2, 3, 4, 5
- Blog Headers
- Book Covers
- Brochures and Booklets
- Browsers Round-Up
- Browser Test Suites
- Buzz-Monitoring
- Calendar Designs
- Charts and Diagrams: Tools
- Cheat Sheets
- Code Beautifier
- Copyright Explained
- CSS Coding Techniques
- CSS Designs 1, 2, 3, 4, 5
- CSS Clean Code
- CSS Editors
- CSS Expert Ideas
- CSS Float Theory
- CSS Frameworks
- CSS Free Templates
- CSS Footers
- CSS Forms 1, 2
- CSS Frameworks
- CSS Galleries
- CSS Ideas
- CSS Layouts
- CSS Menus
- CSS Print-Layouts
- CSS Specificity
- CSS Styleguides
- CSS Tables
- CSS Tutorials
- CSS-Techniques
- CSS Tools
- Data Grids and Tables
- Data Visualization 1, 2
- Date Stamps
- Design Books 1, 2
- Design Magazines
- Designer's Checkpoints
- Divine Proportion
- Domain Tools
- Dreamweaver Tutorials
- Drupal
- E-Mail Delivery
- Favicons 1, 2, 3, 4, 5, 6
- Firefox Themes
- Fireworks Tutorials
- Flash Designs
- Flash Slideshows
- Flash Tutorials
- Fonts 1, 2, 3, 4, 5, 6
- Font Management
- Form Design Patterns
- Forums
- Fractals
- Gadgets 1, 2, 3
- Google AdSense
- Google PageRank
- Graffiti
- Graphics Design
- Grid-Based Design 1, 2
- Grunge Design 1, 2
- Hand-Drawing Style 1, 2
- Handwriting and Lettering
- Hotkeys
- HDR Pictures
- HTML Template Systems
- Icon Sets 1, 2, 3, 4, 5
- Icons, Templates 1, 2, 3
- Illustrator Tutorials 1, 2
- JavaScript Techniques
- jQuery
- Laptop Sleeves
- Laptop Designs
- Link Building
- Links in New Windows?
- Macro Photography
- Mascots
- Moleskine Art
- Motion Graphics
- Motion Blur Photos
- Movie Posters
- Music Videos
- Navigation Menus
- Newspaper Designs
- Online Converters
- Online Generators
- Packaging Design
- Pagination
- PDF Magazines
- Photoshop Actions
- Photoshop Tutorials 1, 2
- Pixel Art
- Podcasts
- PNG Transparency
- Portfolios
- Pricing Tables
- Product Designs
- Rain Photography
- RSS Best Design Practices
- RSS Feed Icons
- Screencasting
- Screensavers
- SEO Tools
- Shopping Carts
- Short Movies
- Slideshows & Lightboxes
- Smoke Photography
- Source Code Editors
- Splash Pages
- Start Pages
- Stock Icons
- Space, Nebula wallpapers
- Tab-Based Interfaces
- Tag Clouds
- Textures
- Textures & Backgrounds
- Texture Design
- Tooltips Scripts
- Tutorials
- Typefaces 1, 2
- Type Setting Principles
- Typographic Posters
- Typography In Motion
- Typography Showcase 1 2, 3
- Underwater Photography
- Usability Books
- Usability Glossary
- Usability Nightmares
- Usability Principles
- User Interfaces
- Version Control Systems
- Vintage & Retro Posters
- Vintage & Retro Designs
- Vintage & Retro Tutorials
- Wallpapers 1, 2, 3, 4
- Web 2.0 Tutorials
- Weblog Engines
- Whitespace & Simplicity
- Wordpress Plugins
- Wordpress Themes 1, 2, 3, 4
- Wordpress Toolbox
- WYSIWYG Editors
Fresh Bookmarks
22 Free Seamless Vector Pattern Resources Perfect For Web Design
A collection of resources and articles related to vector patterns.
10 New PHP Content Management Systems
All based on PHP.
25 Beautiful Logos with Sequential Concept
Sequential logos maybe is a new trend among logo designers.
Designing a blog with HTML5
Much of HTML 5’s feature set involves JavaScript APIs that make it easier to develop interactive web pages.
20+ CSS Data Visualization Techniques
Get inspired.
CSS3 – a big storm is coming
With CSS3 media queries and multi-column layouts it will be a whole new ballgame.
Woodgrain: A Free Social Media Icon Set
With 18 social networks represented alongside astandard RSS icon in PNG format,
Webdesign: Five Minute Upgrade
Making Your Design Pop.
45 Stylish Typographical Desktop Wallpapers
These beautifully designed wallpapers are not solely about typography.
The Light CMS Trend
A new trend in CMSs I’m calling “light” CMSs.
Blogroll
- Bittbox
- CatsWhoCode
- Colorburned
- Design Disease
- Designm.ag
- Deziner Folio
- Dr. Web Magazin (.de)
- Dr. Web Shop (.de)
- Freshome Blog
- FudgeGraphics
- I Love Typography
- MakeUseOf.com
- Naldzgraphics
- Noupe.com
- Pro Blog Design
- Search-This
- Six Revisions
- SmileyCat
- Spoon Graphics
- Typesites
- Usability Post
- Walyou
- Webdesigner Depot
- Weburbanist
- Wellmedicated




















maghen (August 11th, 2008, 3:04 pm)
Very useful! First?
Tristina (August 11th, 2008, 3:09 pm)
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!
jordan (August 11th, 2008, 3:19 pm)
Nice innovative article, I doubt the “first!” readers actually read the article though.
Roman (August 11th, 2008, 3:24 pm)
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.
Ryan Imel (August 11th, 2008, 3:28 pm)
One of the most useful posts I’ve seen on Smashing. And one of the few I’m saving for myself to use later.
JamieO (August 11th, 2008, 3:30 pm)
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
Danny Tatom (August 11th, 2008, 3:39 pm)
Great read, I’d love to see more articles like this!
Alex Holt (August 11th, 2008, 3:49 pm)
Nice article.
Silly and pointless aside: Jeff Croft uses Python not PHP to modify his tag chart. He’s a Django designer/developer.
pickupjojo (August 11th, 2008, 3:56 pm)
I’m totally in love with your latest articles.
Great work Smashing Magazine. Geek and Hype
Brad (August 11th, 2008, 4:27 pm)
Definitely more like this. Loved it!!
Andrew Wilkinson (August 11th, 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 iepngfix.htc, it works flawlessly in IE6. I foresee this being quite a time-saver!
Jordan (August 11th, 2008, 5:16 pm)
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!
Bruce Alrighty (August 11th, 2008, 5:21 pm)
This is a great idea! Would like to see a lot more.
Kara (August 11th, 2008, 6:03 pm)
I found this very useful, inspiring and informative - thank you.
Julez (August 11th, 2008, 6:52 pm)
I’m learning css and I found this article really inspiring. Thanks for posting this one!
SM should definitely publish more articles like this.
gr8pixel (August 11th, 2008, 7:59 pm)
perfect!!!!
gaurav chandra (August 11th, 2008, 8:01 pm)
great work. very useful articles. good for web applications point of view also.
elvis (August 11th, 2008, 9:30 pm)
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.
Geshan (August 11th, 2008, 9:45 pm)
Its really nice. I’d like to try some in future.
Rakesh.S (August 11th, 2008, 10:46 pm)
Like always … You guys are amzing !!! This post has some serious things for consideration :-D Good info..
Shuuun (August 11th, 2008, 11:02 pm)
New techniques rock!
Thomas Dedericks (August 11th, 2008, 11:15 pm)
Thanks guys, really interesting & useful article.
One should be careful when using the outline property, since it is really useful to navigate through the page using keyboard…
grazz (August 11th, 2008, 11:20 pm)
Duh! You even have to ask? Of course I want more of these articles. Bring ‘em on!!
Vitaly Friedman & Sven Lennartz (August 11th, 2008, 11:23 pm)
@Thomas Dedericks (#23): you make a good point. Thank you. The article was updated.
Youri (August 11th, 2008, 11:37 pm)
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!
SSV (August 11th, 2008, 11:47 pm)
Wauw, simply amazing. Great job! More of these, please.
listsfan (August 11th, 2008, 11:52 pm)
speaking of lists… perhaps what smashing needs is an article discussing the reliability and usefulness of lists?
Cycu (August 11th, 2008, 11:56 pm)
This article is really helpful. A lot of inspiration in one page :)
LC (August 12th, 2008, 12:02 am)
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.
Marco Otte-Witte (August 12th, 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: http://github.com/marcoow/glider
Only works in FF and Safari right now.
Marco Otte-Witte (August 12th, 2008, 12:09 am)
Forgot to mention that my Glider is based on script.aculo.us
Will (August 12th, 2008, 12:33 am)
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 (Link [www.engageinteractive.co.uk])
Panagiotis Spiliotis (August 12th, 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
deepakd (August 12th, 2008, 2:07 am)
Keep it moving and forward.
Riccardo (August 12th, 2008, 2:38 am)
An excellent and interesting article. Thanks!
Alex Willcocks (August 12th, 2008, 2:46 am)
Good article, and thanks for featuirng Kobe - was a challenging site to work on with all the JS, making use of Ariel Flesler’s great localscroll script (google it) to achieve the transitions.
I’m all for sharing knowledge and tips to help push the industry forward, but sometimes people can take things a bit far, such as the site below, which I’m sureyou’ll agree bears all too many similarites (and the google tracking code - schoolboy error) as Kobe.
Link [www.gfcservizidiristorazionesrl.com]
A polite e-mail to the ‘designers’ asking for it to be removed didn`t result in much, so back to the good old name and shame!
MerovingiaN (August 12th, 2008, 3:03 am)
Like it!
keep rocking dudes.
tom (dB) (August 12th, 2008, 3:47 am)
Bizarro; Kobe Bar is just down the road from me!
Their drinks are a bit pricey for my liking.
Cosmi (August 12th, 2008, 4:51 am)
Very usefull.
Austin (August 12th, 2008, 5:22 am)
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!
Seth (August 12th, 2008, 5:25 am)
Interesting, I always like to see new techniques like this.
Cesar (August 12th, 2008, 6:26 am)
Im agree. This article its very interesting and helpful. I would like to see more articles like this one.
Thanks guys.
ptamaro (August 12th, 2008, 6:32 am)
Really helpful stuff, you folks make it easier to keep up with all the new things going on… thanks. Please consider doing similar articles.
ashok (August 12th, 2008, 6:37 am)
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.
Peter (August 12th, 2008, 7:06 am)
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.
Trumpet
Dan (August 12th, 2008, 11:07 am)
Yes, I would love to see more articles like this
Mike [gamebittk] (August 12th, 2008, 11:20 am)
Great article! Definitely bookmarking this for reference. :D
Mattieu (August 12th, 2008, 11:38 am)
Should also look into simple plug-ins, like AddToAny for the RSS example above, or sharing using any social sites… will save a lot of time…
Link [www.addtoany.com]
Abdul Akbar (August 12th, 2008, 11:58 am)
Nice! Will remember to refer to this in future, for learn more funky CSS techniques.
AK
Felix (August 12th, 2008, 12:03 pm)
Love it. Really gives an insight into inspiring Webtechniques.
Please give us more…. :)
profiterror (August 12th, 2008, 12:04 pm)
@ maghen: You have shout it out! FIRST! Questioning is too grown-up ;P
Evan (August 12th, 2008, 12:22 pm)
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.
Create Sean (August 12th, 2008, 12:42 pm)
yes, definitely more articles like this.
james (August 12th, 2008, 1:00 pm)
So tired of CSS. Its boring and ridiculous after you used SVG.
Alex (August 12th, 2008, 2:07 pm)
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…
dave durose (August 12th, 2008, 2:35 pm)
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.
adelaide web design (August 12th, 2008, 2:58 pm)
thanks again for the css design tips, informative as usual. Link [www.duivesteyn.com.au]
Albi (August 12th, 2008, 3:34 pm)
That’s one smashing article!
Very useful and inspiring. Please keep it coming.
K (August 12th, 2008, 3:50 pm)
“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.
PureDezigner (August 12th, 2008, 4:12 pm)
I used a pretty advanced script on this site for the navigation: Link [www.puredezigner.com]
Blah (August 12th, 2008, 4:17 pm)
@maghen, nobody cares if you are first. You’re a tool.
Donna (August 12th, 2008, 6:04 pm)
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.
Scott (August 12th, 2008, 6:11 pm)
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 :)
Jim Hanifen (August 12th, 2008, 6:46 pm)
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.
Christopher L. Jorgensen (August 13th, 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
Link [www.jackassletters.com]
Mark Nutter (August 13th, 2008, 9:57 am)
Here’s my take on #3: Link [nuttersmark.com]
Lostgorilla (August 13th, 2008, 7:35 pm)
Loves it. Great article and some things I can put to use. Kudos.
Stuart Rutter (August 14th, 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…..
chris p (August 14th, 2008, 5:18 am)
awesome article! good work! thanks a bunch!
susan taylor (August 14th, 2008, 3:40 pm)
very interesting. wonder why Kobe site does not display properly in Opera? secondary menu is partially under left hand edge of image window?
Chang (August 14th, 2008, 7:55 pm)
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.
Thanks!
Will (August 18th, 2008, 2:12 am)
@ 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.
Chris Shiflett (August 19th, 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. :-)
Alexandros (August 21st, 2008, 1:45 am)
Very nice article. Liked the way you commented on the navigation approaches. Would like to see more of this too :)
Timo (August 31st, 2008, 11:54 pm)
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.
Kevin (September 21st, 2008, 7:18 am)
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?
Mark (January 13th, 2009, 9:58 am)
Nice article, guys!
I especially like the semi-transparent Panel Block. I might try and implement something like that over on my site.
jono (January 14th, 2009, 12:57 pm)
“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.
Gaurav Kashyap (January 22nd, 2009, 1:45 am)
This article is really helpful. Good examples are good for inspirational.
New Techniques R O C K !!!!
preejith (April 3rd, 2009, 2:58 am)
This article is really useful
Tom Kennedy (April 30th, 2009, 1:14 pm)
e78mu2eqmkq7e1p0
转
Vijayta (May 19th, 2009, 9:10 pm)
inspiring post
Thanks
Link [vijaytapanchal.com]