Category Archives: Articles

The Importance of Clean and Simple Navigation

The web is evolving at an incredible rate. Since those early days of HTML code in the 90s, we’ve come a long way. With HTML and CSS now going hand in hand, and new technologies like HTML5 just on the horizon, there’s never been a better time to double-check that your website is completely optimised for usability. For a long time, companies and online publishers were happy enough to simply have a web presence, and to be able to give their customers or readers a place to find out more.

Today, however, the internet is a very different place. From golf shoe stores to online marketing companies, the web is packed with sites. And social media now drives a lot of traffic on the web, meaning that quality content (and design) can spread rapidly. Unfortunately, this also means that the opposite is true: bad design and poor content can be ‘called out’ with relative ease. Thankfully there are ways to make your website user experience seamless with very little effort – starting by ensuring you have simple, clear, and intuitive navigation in place.

Why is navigation so vital?

You wouldn’t head out on a road trip without a map or a sat nav system, because you’d get lost and probably turn back the way you came. Exactly the same logic applies to web design. Navigation is one of the core elements to any website. You could have the best looking site in the world with as many bells and whistles as possible, but if your visitors can’t find their way around it, its success may be limited. By having navigation that is not only easy to understand, but also placed correctly and naturally, you’ll be helping your users to enjoy your site in the best way possible.

Examples of good navigation

There are many websites out there that have great navigation implemented; however do remember that the size of the website needs to be taken into account. A highly specific site that does one ‘main’ job – one for a certain product or service, for example – will have fewer requirements in terms of navigation. For example, if the site has a maximum of ten pages, the navigation menu will need roughly that number of options – or even fewer. A larger site, such as a department store like Amazon, will need a much more complex level of navigation with more ‘levels’. The first thing to do before you start to analyze your own navigation is to assess the size of your site, and therefore how complex your new navigation will need to be. This analysis will serve you well during the redesign process, and can be very handy when it comes to troubleshooting end-user issues.

Keep it simple

To be doubly sure that your navigation is as clean and simple as possible, always keep your user in mind during the design process. Test constantly, even when you’re still scribbling ideas on paper. Think to yourself: ‘how would a user find this section?’ or ‘Where would the user want to go from here?’. With these questions in mind, you’ll be far better armed to create a form of navigation that’s effortless and effective at the same time. Another key concern that designers often overlook is placement of the navigation menu. For sites such as Amazon, left-hand navigation works well because it allows ‘pop-out’ layers to fill the screen as necessary. For smaller sites, such as those for businesses or services, a top menu with the option for drop-down sub-menus is often the best choice.

It’s all about user experience

User experience (or UE, or UX, or whatever name you’d like to give it) is becoming one of those ‘hot button’ topics. The reason is simple: the web has evolved to a stage whereby the technical details are now secondary and the visual design has taken over. We no longer need to rely on technical wizadry (or at least, not so much), and can instead focus on how users interact with designs. As a web designer, it’s vital to respond to these changing industry conditions and to create websites that are as easy-to-use as they are visually striking.

As Speed Becomes A Ranking Factor Is It Time To Ditch Those Images And Textures For A Clean, Crisp Site?

BitFreedom is a good example of a modern, crisp and very clean site. There are no massive background images, snowflakes falling in a flash header or a full library of twenty seven textures used on every possible element of the articles, sidebar and footer – and you know what it looks great and users can get straight to the information which is surely the most important part of any site.

A Brief History Of ‘Fancy’ Content On The World Wide Web

The first websites were very dry with lots of plain black text and blue links. They rarely flowed well and weren’t very much fun to navigate. Early users had few tools to ‘spruce up’ their site except borders, crazy colours, fonts and the dreaded animated GIF’s and garish repeating backgrounds. Who can forget such classic site looks as this?

This tacky phase of the Web lasted far too long largely due to the fact that it was relatively difficult at the time to develop code for the Internet. Most people who worked in the sector were coders not artists. That was all to change as Cascading Style Sheets (CSS) evolved and modern browsers and Broadband speeds allowed much more varied use of graphics and image files. Designers and artists started to learn to code and developing for the Web became more natural to them. Sites such as css-tricks are a good example of those curated by the modern blend of artist and coder.

Images Come To Dominate Design

Many designers then moved into the habit of designing in a graphics application then chopping and working the image into small parts for the site. This was natural as many of their visions and ideas were too advanced for the early CSS. Anyone designing sites over the last five years will remember all the little corner pictures that used to be required to make rounded borders on an article or sidebar widget!

The use of semi-transparent graphics files allowed overlapping elements of images to create some pretty nice effects. Some of these were replaced in CSS by shading and transparency but many designers will continue to use transparent images for some time to come, whether it be to create rounded buttons and other odd-shaped images with ‘see through’ corners, such as the ones seen on this personal finance site, or to build up layered background textures with the illusion of depth.

A strong desire to make everything look ‘glossy’ at a time when CSS didn’t support enough different shading and bordering options to create suitable buttons led to images for menu-bars, buttons and sidebar areas. Sidebar widgets abounded with brushed metal textures, sprites, social icons and their own unique menu buttons.

The Big Bang: Slow Sites Set To Suffer In The Rankings

All the major search engines are now going to consider site loading times a major factor in ranking. The site we just described had hundreds of images for all kinds of different artistic purposes and each one of those has to be downloaded. Many home pages have ballooned to such a size that even forgetting search engines they just load too slow on almost any device and especially on the mobile devices so many users will be browsing on. Some designers optimise as best they can – using one big image for sprites instead of separate ones etc – but this is no comparison to a crisp, image free (or low image) modern CSS driven site.

Unfortunately whilst modern CSS can create some of the looks that could only be created from images, it cannot fully replace all the artistic features some designers have become accustomed to. Instead designers are moving towards cleaner, clearer sites with less visual elements and more crisp, modern feels.

One only has to check out the way all the Google sites are starting to look from GMail to YouTube to get a sense of how the Web is changing. There is much more use of open white or gray space allowing text to be showcased clearly. More modern fonts such as Trebuchet have come to the fore as many find them easier to read on screen that printed fonts such as Times New Roman. Header areas are often full width with tidy text menus and subtle but effective rollover highlighting.

All these changes are making the Web much more useful as an information resource. Artistic and beautiful sites that load more slowly will always have their place for some types of business and individual. For many sites presenting information and functionality in this modern and professional way makes them not only easier to read and browse but faster loading and more suitable to a low bandwidth mobile World. Hopefully you agree as you enjoy browsing BitFreedom.