Website navigation is our common communication system between all other web pages. Interlinking through unique identifiers (URLs) has worked for decades. If anything navigation links have been with the basics of web design since the early days. Through advancements in digital arts and design we have seen new practices bubbling up everywhere.
Accessibility has turned into a major concern for Internet browsers. With more users on their mobile phones and tablet devices it’s important to develop a navigation around common themes. Below are some navigation accessibility themes repeated in modern designs for good, clear website navigation.
Placement is Everything
How your navigation looks holds well over 50% importance towards how your visitors will conceptualize and interact with your site. The needs between each website are also very different since there are varying degrees of access and focal points.
A personal portfolio website may contain 2-3 simple pages with content and information. This is much different than a social networking application which will present tens if not hundreds of different views. This means fitting a lot of links into the same amount of “room” on a user’s monitor.
Top/right placements have yielded the best results for collective site navigation. Often you’ll see horizontal links sewn across the page a-la bar-style. This works well and can even contain deeper level links in drop-down submenus.
Sidebar Links and Advantages
I haven’t seen too many around these days but for future reference there is always plenty of room in a website’s sidebar for overflow. Instead of trying to cram 30 or 40 links into a horizontal bar, why not split 8-10 of the site’s most important links as a heading?
Using this methodology you keep your visitors focused on the core pages at the top of your layout while offering sub-topics and related pages all down the sidebar. This method can work well with smaller-niche sites such as video game communities. Heading links should contain the site’s core pages while information about the games, characters, bios, forums and other resources can be split into sidebar pieces.
Develop Font Styles Concisely
CSS provides a number of advanced features, even for today’s standards. The ability to add text shadows, glows, embossing (and the list goes on) with just a few lines of code is irreplaceable. Typography will make up mostly all of the content on any website and this is especially true for site navigation.
As a small example the choice between sans-serif and serif font can make a world of difference in a finished product. Simple designers stick with simple mindsets and will sometimes choose options at random – clearly not the best approach. Consider how your final page layout should look, how elements are aligned. Take into account what style of font would best stand out as a frontier menu navigation.
You may also try simple text manipulation techniques to draw attention. Bold lettering, text capitalization, small caps and letter-spacing variants are all fun and unique options to try out. CSS3 offers universal rounded corners which can be applied onto background colors and images for neat effects.
Best Practices for Dynamic Menus
Since many site navigation links will require crawling it’s important to understand how to style a menu. As Google and Bing send their search bots out into the web you’ll notice how quickly a new website will become indexed. Pages which are readily available will be checked and ranked while an order of importance is applied.
It can be useful to structure links with unordered lists in HTML code. This is a malleable system which allows for easy addition/subtraction from a website. Often you’ll want to add links or change text in your site navigation on-the-fly. Holding all of the pieces together in a list will help web bots understand the hierarchy and makes editing super simple.
Separate File Includes
Web developers with any experience in backend programming such as Python or PHP should be familiar with includes. When working with multiple files in a project you are able to include code from another set into a page. This provides huge benefits when it comes to web layouts, especially for navigation design.
Instead of keeping multiple files with navigation links in each it is much simpler to hold an external file with HTML code already written. Then using include functions it’s simple to add the file into any web page. This process means you can add/remove links by editing just a single file – and all changes are updated site-wide immediately.
Though the exact code for including files will change based on your backend language of choice (PHP, RoR, etc…) it’s all generally the same idea. Check through Google for a basic guide if you’re lost, since the implementation is a bit out of scope for this article.
Design and Translate
The best way to learn proper navigation styles is to study the greats. Check out popular design galleries and notice key advantages to other navs (especially websites related to your niche). Modern design frequently changes and there are no base rules or stone-set solutions.
The best trends cannot be taught and must be learned through frequent practice. This is why studying comes so heavily into play when discussing unique webpage design. Examine the works of other skilled designers and compare elements. Take the best of all worlds and combine techniques together for your own navigation formula.
If you’d like to get more involved there are many HTML/CSS menu tutorials available for free. They offer an easy step-by-step process to get integrated in the world of web page navigation design. The topic is broad yet refined enough to present accessibility problems. Universal rules tend to limit creativity in this area, however one truth seems to remain: the best way to build is study and practice followed by innovative actions.
- How to Create a Vertical Slide-Out Menu with CSS Transitions
- How to Create a Full Width Responsive Tiled Menu with CSS
- Website Navigation Trends for Various Layouts
- How to Design Functional Sub-Navigation Menus
- Elements of Ugly Web Design – Navigation Animated Gifs
- 22 Adobe Flash Menu and Navigation Tutorials
- 10 Innovative Navigation Examples in Mobile App Design
- Tiny Details: A Look at Hamburger Menu Reveal Transitions