BlogmyQuery – BMQ

Front-end development is a tricky beast. It’s not difficult to learn, but it’s quite difficult to master. There are just too many things that need to be considered; too many tweaks that might be necessary here and there; too many details to make everything just right. Luckily, developers and designers out there keep releasing useful tools and resources for all of us to learn, improve our skills and just get better at what we do. Such tools are valuable and helpful because they save our time, automate mundane tasks and hence help us focus on more important things.

Here at Smashing Magazine, we’re continuously searching for time-saving, useful HTML-, CSS- and JavaScript-resources for our readers, to make the search of these ever-growing tools easier. We hope that these tools will help you improve your skills as well as your professional workflow. A sincere thanks to all designers and developers who are featured in this round-up. We respect and appreciate your contributions to the design community.

HTML and CSS Tools

HTML Email Boilerplate
This website and its sample code creates a template of sorts, absent of design or layout, that will help you avoid some of the major rendering problems with the most common email clients out there. It also provides some helpful examples and snippets that will keep your email design rendering as true-to-form as possible.

Initializr
This tool creates a customizable template based on HTML5 Boilerplate. Decide whether you want sample content, choose between JavaScript and jQuery, and specify your compatibility and server configuration needs. You’ll get a template based on key features of Boilerplate to start your next project. You might want to check out The HTML5 Framework Generator as well.

Layer Styles
A nice simple tool for creating CSS in an intuitive way — very much like you would do with a graphics editor. The tool lets you add drop shadow, inner shadow, background, border and border radius and generates cross-browser CSS code.

Mobile Boilerplate
A template that creates rich and performant mobile Web apps. You can get cross-browser consistency among A-grade smartphones, and fallback support for legacy Blackberry, Symbian, and IE Mobile.

Kotatsu
A simple HTML table generator that helps you create a table and throw in row as well as column classes quickly and easily. And if you want a quick tool to generate lists, you might want to take a look at li maker.

Zen Coding
Zen Coding is an editor plugin for high-speed coding and editing. The core of this plugin is a powerful abbreviation engine which allows you to expand expressions (similar to CSS selectors) into HTML code.

Vogue
This tool reloads the style sheet (not the HTML) of a page in all browsers, and it can even be configured to reload a page automatically in multiple browsers at the same time. The tool doesn’t host your website but rather runs your website’s own local server. To use it, you just need to install NodeJS and npm.

LiveReload
LiveReload applies CSS/JS changes to Safari or Chrome without reloading the page and reloads the page automatically once the HTML changes. Alternatively, take a look at Live.js, a library that makes sure that you’re always looking at the latest version of the page you’re working on, whether you are writing HTML, CSS or JavaScript.

css-x-fire
This tool allows editing CSS properties in the IDE from Firebug CSS editor and also allows the developer to concentrate on CSS styling without having to refresh the browser.

Ffffallback
A bookmarklet that lets you test different font stacks to find the best result. It bascially scans the page’s CSS and creates a clone page where you can test and analyze different fallback fonts.

LESS.app for Mac OS X
LESS extends CSS with variables, nested rules and operators. This app makes it very simple to use {Less} by automatically compiling *.less files into standard CSS.

Less-Boilerplate
Boilerplate CSS is written in Less and includes a CSS reset, CSS3 helpers, centered column blocks, and much more.

Needle v0.1a1
Needle is a handy tool you can use to test whether your CSS renders correctly by taking screenshots of portions of a website and comparing them with other screenshots. It also provides tools for testing calculated CSS values and the position of HTML elements.

inuit.css
A CSS framework that provides you with the best dev tips, tricks and practices in one handy file.

Spritemapper
This application merges multiple images into one and generates CSS positioning for the corresponding slices; by reducing the amount of images and better utilizing the connection, CSS spritemapping can reduce your website’s loading time.

CSSsitemap System
David Leggett shares with us the code for a CSS-based sitemap that Andrew Maier and himself have created and are still working on. A set of tools for project documentation & UX designers is also coming up soon.

CSS Stress Testing and Performance Profiling
Andy Edinborough shares the code he uses for his so-called ‘CSS Stress Test’ for almost all browsers.

Normalize.css
Normalize.css takes a slightly different approach to CSS resets. Rather than eliminating all browser defaults, Jonathan Neal and Nicolas Gallagher have taken the time to research how different browsers handle different bits of code and then kept the defaults that are useful. It saves you time as a designer, while also providing consistent results.

Holmes
The tool is a diagnostic CSS style sheet that highlights possibly invalid or erroneous mark-up. Just add a single class, and it will create a red border around errors, a yellow border around warnings and a gray border around deprecated styles. In addition to the downloadable CSS style sheet, there’s also a Holmes bookmarklet that lets you apply holmes.css to any page within your browser.

CSS Crush
A CSS pre-processor that is familiar, convenient, intuitive, and much more — everything Pete Boere wants a pre-processor to be.

CSSPrefixer
CSSPrefixer helps you improve your workflow and saves you a lot of time while inserting all of the necessary CSS prefixes for various browsers.

iOS Media Query Previewer
A very simple tool to preview how a particular website looks on an iPhone as well as iPad.

CSS Pivot
Here you can add CSS styles to any website and share the result with a short, handy link.

PCSS
A PHP-driven CSS preprocessor that helps you unleash the CSS3 power with much less code and features like class nesting, server-side browser specifics, default unit and variables. The tool requires PHP5.

JavaScript Tools

Modernizr 2
Modernizr is a widely used open-source JavaScript library that helps you build HTML5 and CSS3-powered websites. With the second version of the tool, you can now combine feature detection with media queries and conditional resource loading. That gives you the power and flexibility to optimize for every circumstance. Developed by Paul Irish, Faruk AteÅŸ and Alex Sexton.

yepnope.js
A conditional loader for your polyfills that is very fast and allows you to load only the scripts that your users actually need.

FitText
FitText is a jQuery plug-in for responsive and fluid layouts that resizes display text to fit the parent element. A good solution for creating headlines that look good on everything from a small mobile device to a 30-inch desktop display.

jQuery Waypoints
Waypoints is a small jQuery plugin that makes it easy to execute a function whenever you scroll to an element.

jQuery Plugin Boilerplate
This boilerplate implements public and private methods, as well as public and private properties, making it very easy when building both simple and complex jQuery plugins.

ligature-js
This Java script lets you convert text patterns into common typographic ligatures by going through the text on a web page and inserting ligatures where appropriate.

Placeholder jQuery Plugin/Polyfill
This jQuery plugin provides support for the new placeholder="" HTML5 form attribute in browsers that don’t natively support it (IE et al).

StronglyTyped
A JS library that allows you to specify strongly typed properties of various types (Boolean, Number, String, etc.) and constants (final properties in Java). It uses ES5 getters and setters and falls back to regular, loosely typed properties in non-supporting browsers.

Kaffeine
A set of extensions to the JavaScript syntax that attempts to make it nicer to use. It compiles directly into JavaScript that is very similar, readable and line for line equivalent to the input.

Crossroads.js
A JS routing library inspired by URL Route/Dispatch utilities which are present on frameworks like Rails, Pyramid, Django, CakePHP, CodeIgniter, etc. It parses a string input and decides which action should be executed by matching the string against multiple patterns.

Doctor JS
Doctor JS analyzes your JavaScript code and provides you with a complete analysis in JSON, whether you’re dealing with polymorphism, prototypes, exceptions or callbacks. Tell Doctor JS about it:

HEAD.js
A script that speeds up, simplifies and modernizes your site — a concise solution to universal issues. You can load scripts like images as well as use HTML5 and CSS3 safely.

Hivelogic
Posting your email address on a website is an easy way to get an inbox full of spam. This anti-spam email address enkoder helps protect email addresses by converting them into encrypted JavaScript code so only real people using real browsers will see them. An alternative, more robust solution is Mollom.

JavaScript Garden
A JS project that offers advice on avoiding common mistakes and subtle bugs, and lays down performance issues and bad practices that JavaScript programmers might run into on their journey to the depths of the language.

Syntaclet
By clicking on the Syntaclet bookmarklet, you can automatically see all language specific syntax colored with line numbers to all the code on the page.

Bookmarkleter
This tool creates bookmarklets from JavaScript code. It removes new lines, tabs, and optional spaces, URL-encodes special ASCII characters and places code in a wrapper function (if not done already).

Bookmarklet Crunchinator
This great tool helps you quickly create a bookmarklet from any JavaScript code and will automatically be wrapped in a function to make it bookmarklet-friendly.

Grids

The JavaScript Grid
A JavaScript-based grid overlay — just drag the snipplets into your bookmarks bar, open your URL and click the bookmark.

Grid Calculator
A calculator that helps you easily create your own grid and download it for either Adobe Illustrator or Photoshop.

GridCalc
This easy-to-use grid calculator lets you download a configuration as a CSS file which you can use in your project by simply entering the desired width of your page and an aproximate range for your column and gutter width. The calculator then gives you all the possible combinations within the limits you entered and provides you with a nice visual representation of the results and how the grid can be used.

Modular Grid Pattern
This tool enables you to create a grid template for Photoshop and other image editing applications. Enter the baseline, the module’s width and height, the gutter width, and the number of modules (columns), and it gives you a custom pattern to import into Photoshop. A Photoshop extension is also available, and you can download a PNG or transparency map, too.

Susy
A Rails framework that enables you to create a completely custom grid based on your mark-up and designs. No more compromises because the grid framework you’re working with isn’t quite what you need, and no more spending hours tweaking things to get them just right so that the design works the way you want.

Griddle.it
A clean and simple way to help you align your layouts. All you need to do is put your dimensions after the URL provided to get a background guide image to work with in your browser. Grids are created on the fly, so any combination should work.

Last Click

ASCII Pronunciation Rules for Programmers
Most programmers would recognize ASCII characters on a website and know how to use them in their own work. But how many know what to call all those characters? This article gives a pretty thorough rundown of common and not-so-common names for ASCII characters. It’s a useful guide if you’re ever at a loss when listening to another programmer speak about coding.

Weave Silk
Is your desktop, motivation or even design work in need of something fresh, swirly and remarkable? Just weave some Silk! Yuri Vishnevsky created this experimental, magical interactive gimmick. You can spend minutes playing around with this little technique, based upon HTML5 Canvas: no Flash in use.

From Me To You
No, this has nothing to do with CSS, HTML or JavaScript, but it is just remarkable. On his photography blog, Jamir collects scenes from around the world, memorable events, food, people and small personal universes. The interesting part is that the photos are animated (hence the name); they come to life using good old animated GIFs. Pay a visit to the article Positioning an animated gif over a jpg image. His short tutorial explains how to save on bytes when putting GIFs and JPEGs together, without losing too much quality.

Related Articles

You might want to take a look at our previous related articles:

• Powerful New CSS Techniques and Tools (April 2011)
• Useful JavaScript and jQuery Tools, Libraries, Plugins (April 2011)
• CSS: Innovative Techniques and Practical Solutions (February 2011)
• Time-Saving and Educational Resources for Web Designers (January 2011)

(vf) (il)

© Smashing Editorial for Smashing Magazine, 2011. | Permalink | Post a comment | Smashing Shop | Smashing Network | About Us
Post tags: CSS, HTML, JavaScript, libraries

Reading Ethan Marcotte’s book Responsive Web Design was a strange experience in some ways. While much of the techniques and philosophies described in the book are familiar to me, reading about everything from flexible design to mobile first with media queries carefully distilled into one book was something of a revelation that brought back feelings from over a decade ago.

Ethan opens the book with this:

As I begin writing this book, I realize I can’t guarantee you’ll read these words on a printed page, holding a tiny paperback in your hands. Maybe you’re sitting at your desk with an electronic copy of the book up on your screen. Perhaps you’re on your morning commute, tapping through pages on your phone, or swiping along on a tablet. Or maybe you don’t even see these words as I do: maybe your computer is simply reading this book aloud.

Ultimately, I know so little about you. I don’t know how you’re reading this. I can’t.

Read full post

Posted in Accessibility, CSS, Reviews.

Copyright © Roger Johansson

Photographers often turn to sunsets to capture some spectacular and vibrant color palettes painted across Mother Nature’s canvas. The sky turns so many different shades as the sun sinks behind the horizon, that you find many saying that sunset is a time of inspiration. As designers, we can turn to these amazing photos not only to inspire but to capture some of those color palettes for our own work.

That is why we have this post working double duty for our readers. We have collected some wonderful photographs of sunsets and arranged them in a gallery to inspire you. And we have generated color palettes from the photos that we have included in the post so that you can save them and use them later in your future designs.

The Goods

Sunset at Ger Tor by Alex37

A cold sunset by Johnny Deluxe

Sunset on Goulais Bay by spisharam

Sunsets by Mohamed Malick

Sunset by Neils Photography

Sunset by Brian Forbes

Sunset by sudarshan vijayaraghavan

Sunset at Chitwan National Park Nepal by Worldizen

Sunset by halfrain

Sunset by luvjnx

Sunset by Don Dearing

Sunset tree by jsogo

Sunset by AntiSpy

Sunset by S-moon

Sunset by onlyphoto

Golden Sunset by XipnosS

Sunset by aiyoshi

Sunset by yakushkin

Sunset by theotherdude

Sunset by MaraDamian

A Sunset by metagore

Sunset in Oporto by nfp

Sunset by Neils Photography

Fisherman and Sunset by WindyLife

Lupins Sunset by Xavier Jamonet

Shore Sunset by robcherry

at sunset… by WiciaQ

sunset by sultan-alghamdi

Hawaiian Sunset by andrewmcconville

Sunset by ak87

Lake Sunset by 777ultimate

a Boat at the Sunset by jjuuhhaa

Sunset VIII by norfold

Red Sunset by Mariposita1

Sunset blaze – Brampton by wildplaces

(rb)

The thing that makes navigation difficult to work with in Web design is that it can be so versatile. Navigation can be simple or complex: a few main pages or a multi-level architecture; one set of content for logged-in users and another for logged-out users; and so on. Because navigation can vary so much between websites, there are no set guidelines or how-to’s for organizing navigation.

Designing navigation is an art in itself, and designers become better at it with experience. It’s all about using good information architecture: “the art of expressing a model or concept of information used in activities that require explicit details of complex systems.�

Organizing Navigation Structure

Perhaps the most difficult part about navigation on the Web is organizing and designing it. After all, coding it can be relatively easy. In this first section, we’ll go over some methods and best practices for organizing navigation, which can lead to a more intuitive user experience and higher conversion rates.

Primary vs. Secondary

Most websites, especially those with a lot of content or functionality, need navigation menus. But as a website grows in complexity, guiding users to that content and functionality shouldn’t be the job of any one menu. All of that content just doesn’t always fit in one large menu, no matter how organized it may be. While many websites need more than two, all websites have at least two main menus: primary and secondary.

SpeckyBoy

You might assume that the primary and secondary navigations are marked in a wrong way on the image above, but I believe that this is not the case.

Primary navigation stands for the content that most users are interested in. But importance is relative; the type of content linked from the primary navigation on one website may be the same kind linked from the secondary navigation on another (for example, general information about the company or person).

Secondary navigation is for content that is of secondary interest to the user. Any content that does not serve the primary goal of the website but that users might still want would go here. For many blogs, this would include links for “About us,� “Contribute,� “Advertise� and so on. For other websites, the links might be for the client area, FAQ or help page.

If you’d like to learn more about primary and secondary navigation, “Understanding Site Navigation: Key Termsâ€� is a great article with detailed explanations of different navigation terms, including for primary and secondary menus.

The first job in organizing navigation is to organize the content. Only after the content has been organized can you determine what is primary and what is secondary, and then you can determine the location and navigational structure of any remaining content. Content that fits neither the primary nor secondary navigation can go in other menus, whether a sub-menu, footer menu, sidebar widget or somewhere else. Not to suggest that primary navigation cannot go in these areas of the page; there are many instances where primary navigation is best suited to the sidebar or in drop-downs.

Also ask whether navigation is even needed beyond the primary menu? If a secondary menu is needed, then why and what’s the best way to implement it? No matter how organized the content is, if there’s a lot of it and thus a need for a more complex navigational structure, then distinguishing between primary and secondary content can be daunting. Fortunately, there’s a great method that designers can try: card sorting.

Information Architecture: Card Sorting

What’s the best way to organize content? How should the navigation be labelled and grouped and positioned? How will people use the navigation?

Card sorting is commonly used in information architecture and can help Web designers answer all of these questions even before the design phase begins. Card sorting basically helps designers organize navigation, especially complex navigation, in the most efficient way possible.

One complaint I hear regularly about websites… is that they’re designed around how the organization is structured. Given that the information architecture is usually completed by internal teams, this makes sense. One way to get input on structuring a site to reflect a a visitor’s way of thinking is by collecting input from card sorts.

Card sorts are a way to have website visitors organize and label content. It’s useful to have a visitor show you how she’d approach your website, and grouping and labeling are key elements for determining the best navigation for a website. Of course, you’re likely to get a variety of different groupings from users, so you’ll be looking for overlaps and commonalities while also considering how to help those who used varying  groups and labels.

– Amy Hissrich

Card sorting can be used to determine menus and sub-menus, the wording on them and even their design and structure. We’ll go over the basics here, but be sure to check out the resources below for more information, guides and examples.

(Image: Dunk the Funk)

There are two types:

• Open card sorting is when participants are given cards with content topics and are asked to organize them into groups. They are given no information or context beforehand. Then they name the groups. Depending on the project, participants could be asked to create two groups, unlimited groups, sub-groups and so on. They could also be asked to organize the groups and content into the hierarchy they think best.
• Closed card sorting is when participants are given cards with content topics as well as the categories to put them into (and even sometimes sub-categories). Participants are not responsible for naming the cards. This option is great for exiting websites with established categories, menus, etc.

Below are some resources and further information on card sorting:

• “Card Sorting for Navigation Designâ€�
• “Card Sorting: Introductionâ€�
• “Card Sorting: Mistakes Made and Lessons Learnedâ€�
• “Card Sorting: Stacking the Deck for Better Navigationâ€�
• Card Sorting: Designing Usable Categories

There are also many applications for card sorting, some desktop and others online. Online card sorting can be easier to run, but it’s not always the right choice. A great article on UX for the Masses that covers the pros and cons of each approach: “Online Card Sorting: Even Better Than the Real Thing?� For easy card-sorting tools, check out OptimalSort, WebSort and UserZoom.

Grouped Content: Classification Schemes

When a lot of content is grouped in one category, another issue arises: what order to put it all in? Card sorting and similar methods may help to create groups and a hierarchy and to differentiate between top-level and sub-levels of navigation, but how should content within those groups be ordered? Alphabetically? By most used or most popular? Most recent to oldest?

Below is a list of the most common content classification methods, along with suggestions for what each is best for:

• Most recent to oldest
  Suitable for time-sensitive content.
• Alphabetical
  Great for when the user needs to find something fast. This includes definitions, indexes and other content that users know about before they find it.
• Most popular or most used
  Great for interest-based browsing, rather than content that users need.
• Geographical
  Is certain content irrelevant to certain regions or sub-regions?
• In the order of the process
  If the content in some way represents a process (for example, “How to file your taxes�), then it could be organized according to the order of actions the user has to take. FeverBee has a great example of this: “How to Build an Online Community: The Ultimate List of Resources.� While the website is a blog, the content isn’t necessarily time-sensitive, so the author has created a great navigational structure that puts much of the content into a step-by-step process.

For more on classification schemes, check out UX Booth’s “Classification Schemes (and When to Use Them).�

Navigation And User Levels

For websites where navigation changes based on whether a user is logged in or out, other organizational challenges arise. Some websites may have a simple client area, while others have full-fledged communities. When this kind of interaction is involved, user roles and available content may vary, and owners may want to highlight some content or design it differently.

Below are a few tips for organizing navigation across membership levels:

• What user levels are there?
  Many website owners plan this out ahead of time, and it depends greatly on their business model. As the designer or developer, make sure you know what navigation levels are needed, and keep the content in them straight.
• Design and plan for each level separately.
  Don’t wait until the membership area is set up before considering the navigation structure of the levels. How should content be organized for logged-out users? How should it be structured for logged-in users? Administrators vs. basic members? Free accounts vs. paid accounts?
• What content should each type of user be able to access?
  A logged-out visitor will want to know more about the community or service. A logged-in member will already be convinced, and so the primary navigation for them should reflect what is available with their membership. Is there special content for paid members, and should it be highlighted to be more visible? Should special links or content be shown to logged-out administrators, or will that all be taken care of once they log in?

Planning for different user levels can be done with the same methods outlined for primary and secondary navigation. Card sorting can be helpful for each level. Think about what the primary navigation should be, what the secondary navigation should be, where everything should go (i.e. hierarchy), and how menu items should be labelled.

What do members need to do? What does they want to accomplish? These are great questions to ask when organizing beyond membership levels or beyond logged-in and -out states.

Take Facebook. Content is everywhere, and it’s user-generated. How does one organize the navigation around this? Facebook is structured by context; it’s defined and organized by how the user functions on the website. Feeds, messages, events and friends are part of the primary navigation, while the other navigation is based on specific applications, requests, friends’ friends, etc. The remainder of the navigation is based on how the user has used Facebook in the past.

Below is a selection of websites that have memberships, client areas and the like. It shows how varied websites can be in how they handle navigation and structure based on user levels and logged-in and -out states.

MailChimp

On MailChimp, the location of the primary navigation for logged-in and logged-out users is the same, but the content of the menus is different. For logged-out users (and new visitors), MailChimp’s navigation guides them to sign in and gets them interested in signing up, with items such as features and pricing. For logged-in users, the navigation becomes the control panel for the service.

Should navigation always change this much? Not at all, although in this case it was the most user-friendly solution. There are many other scenarios in which the primary navigation should remain the same, but supplemented with additional navigation for logged-in users.

MailChimp

Freelance Mingle

On Freelance Mingle, the secondary navigation is the only main menu that changes for logged-in and logged-out users. The mini menu up top handles the core needs of members, and the primary menu below and the footer navigation remain the same. Many areas of the website are accessible to both logged-in and logged-out members, which keeps the navigation fairly simple; but only members may post content.

Also, making the sections visible to new visitors, while limiting their functionality, serves as a live tour of the website. If you sign up, this is what you get!

Freelance Mingle

FreshBooks

Some websites go in an entirely different direction. While the two examples above have a style and navigation scheme that is similar for logged-in and logged-out users, FreshBooks and many other websites have an entirely different layout and structure for members.

FreshBooks sells its service and promotes sign-ups to logged-out users. On clicking the “Login� link in the top-right area, the user is redirected to a log-in page. Once logged in, they are redirected to the client area, whose content is tailored to their preferences and which contains none of the content offered to logged-out users.

FreshBooks

Business Catalyst

Business Catalyst does something similar but keeps more of its own branding, allowing for little customization in the client area. The home page for logged-out users is much the same as that of other websites; the content and navigation focus on getting new users to sign up. After logging in, the user is redirected to the client area, rather than a logged-in version of the home page. The layout, navigation structure and menu change completely for logged-in users, very tangibly separating the two areas of the website.

The client area exhibits an especially good organization of otherwise complex navigation. The first tab is for basic account information, and the other tabs are for other pages or sections. The main features for members are clearly separated in these tabs and in the mini-menu up top. The separate “Recent items� drop-down menu on the right is also great, making it easy for users to navigate to their recent and most used documents. Tools like this make it easier to use a large website with complex navigation.

Business Catalyst

Common Considerations

Navigation design is all about findability and usability. No matter how simple or complicated, navigation must work well for its users. Now we’ll look at some trends in navigation and how these designs might benefit or hinder websites.

Horizontal vs. Vertical

The decision of whether to make the navigation horizontal or vertical tends to be determined by the nature and focus of the website. Often, it’s a mix of both, but with primary navigation we see certain tendencies. Small websites often lean towards horizontal navigation at the top of the site, while large corporate websites often use both horizontal and vertical navigation (usually with drop-down menus). Blogs vary greatly; primary navigation (such as for categories or pages) is sometimes horizontal, while most of the other menus are vertical. On news website, the navigation is mixed, with no clear tendency either way.

A number of factors will influence the decision for horizontal or vertical navigation, including design, usability and density of content. Sometimes designers add icons to the navigation or add visual elements around it to make it better stand out. Rich typography is another common consideration: since the navigation is the most popular area of the website, it could be given a special typographic treatment to make the user experience a bit more distinctive and unique.

Amazon’s list of departments is much too long to go in a horizontal menu without looking crowded. Instead, across the top we find a search bar, which is a kind of navigation in itself. Many Amazon customers know exactly what they are looking for and so go to the search bar first; perhaps far more often than on other websites. Amazon puts its menu of departments along the left. Because the list is so long and varied, its purpose is chiefly for browsing; and vertical menus are good for browsing. The sub-menus, also vertical, help the user refine their browsing among departments and products.

Another thing to consider is the website’s primary language and whether the content will need to be translated into several languages. English words are relatively short compared to German and French words, so horizontal real estate is a consideration with horizontal menus. Will translated items require two lines instead of one or an overflow in the horizontal menu? Is more space required, and if so, is a vertical menu viable? One must always think about how the website will be read and used and about practical issues such as language.

While it is generally good practice to make simple primary menus horizontal, it’s not essential. Below are a few designs that use vertical menus for primary navigation, and pull it off. However, all of these websites have simple menus and fairly minimal design and content; websites with a lot of content could easily overpower vertical menus. Good/Corps (the first site below) is a nice example of how a quite large amount of information is presented in a very compact, even minimalistic way. Subsection are indented, providing users with a clear sense of hierarchy on the site.

Good/Corps

Stura TU-Chemnitz

Baltic International Bank

Analogue Digital

Cambrian House

Divensis

Mellasat

Debbie Millman

Of course, horizontal menus can work really well, too, and menus that follow best practices don’t have to be boring. In fact, combining horizontal and vertical menus is even a possibility.

Below is a small showcase of horizontal menus in action, at either the primary or secondary level.

Moody International

The Big Feastival

Web Standards Sherpa

Tijuana Flats

Unlocking.com

Cultural Solutions

Tinkering Monkey

JustBurns

Drop-Downs And Mega Drop-Downs

While horizontal menus are best for top-level navigation, larger websites often need more in-depth navigation. Drop-down menus can fit a lot of items in one space, thus saving valuable real estate and keeping the navigation organized. The hierarchy can be refined with sub-levels and even sub-levels of sub-levels, helping users filter the information to get to the page or section they want.

Even more useful are mega drop-downs, which can accommodate an even wider variety of content and layouts, but more importantly provider larger click areas for users. They can be used to better organize navigation, as well as contain more content while saving space. They are also a great place for additional features and otherwise non-essential content. In both cases it is important to clearly indicate that the drop-down menu is available, either by using arrows or icons or something else.

Below is a small showcase:

Aviary

Estee Lauder

Portero Luxury

Sunglass Hut

See how some of these menus are creative in their organization of content and navigation. Below are a few points to note:

• Much of the navigation the small showcase above is organized into categories and sub-categories, which can be determined with the card-sorting method above.
• Many of the websites have a different layout and style for each drop-down menu under each top-level link. This creates more variety and creates the appearance of sub-pages under the main page of a design.
• Some of the websites have icons, images and regular text for link items; these elements could be used for promotion, navigation usability or simply organization.

These are just a few of the features in the drop-down designs above, but of course many more interesting solutions could be found. The point is that navigation is sometimes so extensive that sub-menus (whether via drop-downs or mega drop-downs) are necessary.

With smart CSS and semantic mark-up, implementing mega drop-downs shouldn’t be much harder than building traditional drop-down menus. However, one could run into issues. For example, in Safari, mega drop-downs tend not to display over Flash content. There are several workarounds to this, but the most popular seems to be to wrap the Flash in a div or other layer and then hide it when the drop-down is expanded.

Below are a few tutorials on drop-down and mega drop-down menus:

• “How to Build a Kick-Butt CSS3 Mega Drop-Down Menuâ€�
• “Mega Menus: The Next Web Design Trendâ€�
• “Mega Drop-Down Navigation Menus Work Wellâ€�
• “Mega Drop-Down Menu, Enjoy It Responsibly!â€�
• “Mega Menus Gone Wrongâ€�

Conclusion

Navigation that is complex, whether because of content volume or membership considerations or something else, can add a lot of work to the design and development process. But with solid pre-planning and good organization, the work can be fairly easy. Organizing, designing and coding navigation can take many shapes, but there are definite trends to follow and resources to turn to for help at every stage.

Feel free to share other tips, examples and best practices related to complex navigation. There are probably many approaches to each stage of navigation development, and hearing about the practices and experiences of other designers and developers would be great.

Further Resources

• “Ambient User Experienceâ€�
• “A Practical Guide to Information Architectureâ€�
• “Classification Schemes (and When to Use Them)â€�
• Card Sorting

(al)

© Kayla Knight for Smashing Magazine, 2011. | Permalink | Post a comment | Smashing Shop | Smashing Network | About Us
Post tags: navigation, Showcases

In a recent project I needed to add a button to a column on the page. The design called for the button to be centered in the column. This turned out to be slightly less straightforward than I initially thought.

Centering elements is normally taken care of by giving them a width and auto for horizontal margins. In this case I didn’t want to set a width on the button since the site will be available in several different languages, so the amount of text on the button will differ.

My first thought was to just avoid setting a width since form controls are replaced elements and have an intrinsic width anyway once rendered by the browser, so I might be able to get away with this:

.button {
    display:block;
    margin:0 auto;
}

Read full post

Posted in Browsers, CSS.

Copyright © Roger Johansson