The DSIA Portal of Information Architecture provides a public body of knowledge that offers educational and technical content to the general public, business stakeholders, information architects, as well as user experience design practitioners whose responsibilities include or must consider the organizational function of information architecture.

DSIA portal of Information Architecture

Remember when web designers used to be total nerds?

Back in the early 2000s, web design was a technical skill; just getting a site to function was considered an achievement in and of itself, and things like interface design, usability, and UX largely fell by the wayside.

But times have changed. In the past few years, something magical has happened: Web designers have stopped being just nerds, and have started becoming artisans.

We don’t talk about tech specs much anymore, we talk about "handcrafted code" and "beautiful UIs". We describe ourselves as "code poets" and "design ninjas", and it’s perfectly acceptable to many of our clients.

It’s gotten to the point where we sound a lot more like old-world craftsmen than web nerds, and let me tell you, it’s a wonderful feeling.

But sometimes I wonder: Is our newfound sense of artisanship really helping our clients?

After all, we sell products to businesses that are focused on profitability, not necessarily artistry.

In my experience, acting in this manner is bad for clients and for us web designers. When you try to sell a website as if it were a handcrafted artisanal item, a few things happen immediately.

You create a disconnect between what your clients need, and what you plan to provide

Some business owners care about design. All business owners care about profit.

We may think of our work as pieces of art, but to most business owners, their websites exist as functional tools for achieving certain goals (bring in new customers, drive up company profits, increase brand awareness, etc.).

So when we try to position our products as if they were handcrafted artworks, this creates a fundamental disconnect between what our clients need, and what we will actually provide.

This might not seem like much, but having the ability to understand your clients’ goals is the most crucial part of landing new projects. And when they’re talking about the bottom line, and you’re talking about beauty, your clients can easily start feeling confused.

You lose out on your most profitable clients

When you focus on artistry, you gain clients that appreciate artistry, but you also manage to lose out on the holy grail of clients in our industry: Medium-sized businesses. You’ve probably encountered a few of them. They’re generally mid-stage companies who are profit-focused, need quite a bit of web work done, and are more than happy to keep coming back to you with project after project over the course of several years. Why? Quite simply because they’ve found that your services are making them more money.

When you’re able to provide services centered on achieving your clients’ business objectives, they’ll naturally be compelled to keep working with you.

You limit the types of services you can provide

Artisan web designers and developers are generally pigeonholed into being design- or code-focused, which means the "big three" services: Web design, graphic design, and web development. That trifecta covers quite a bit of ground, but can be limiting.

Some of the most lucrative services in the web design business go beyond designing and coding (UX consultancy, usability research, market research, conversion rate optimization, and online marketing being just a few). These services can be the lifeblood of a web design business, yet, as an artisan, it’s incredibly difficult to get these other types of work because your clients view you strictly as a design or code person.

I’m not saying that web designers aren’t artisans. The things we make take incredible skill. Our creations are expected to be beautiful and functional. But if you’re billing yourself as an artisan, make sure that it’s not to your detriment.

Related Content

About the Author

Casey Ark is the founder of Plato Web Design, a custom web design agency located in Harrisburg, PA. He’s also a newspaper columnist. Casey has over 9 years of experience in web design, development and print design.

The post Web Design Isn’t Just About Artistry appeared first on Six Revisions.


Do you find you’re sometimes designing or building out pages and wish you could start off with a template that has a proven conversion track record? Here is something for you. GoodUI Fastforward is a set of our best performing UI page templates with a sharp focus on conversion.

Now keep in mind that we’re continuously striving towards making the templates better as we learn from running a/b tests on an ongoing basis. When it comes to conversion, we continuously tweak and improve and therefore the pages within contain a change history on the second page of the PDF.

Of course we also understand that one size does not fit all and so we also offer each page type in flexible and editable formats such as: Balsamiq, Illustrator and Axure.

Speed up your design process and get GoodUI Fastforward where you’ll receive a full year’s worth of updates to all current and future page types. We have coherent pages which help you raise metrics such as: sales, trials, quotes, etc.

Get GoodUI Fastforward

Credits: Jakub Linowski

Website speed is crucial for developing the best user experience possible, because, well, no one likes to wait for web pages to load.

One of the simplest ways for improving the performance of a site is by serving page dependencies like JavaScript libraries and CSS frameworks via a public content delivery network (CDN).

A public CDN is a web service that hosts and serves open source projects used for web development (e.g. jQuery, AngularJS, and Bootstrap). Public CDNs allow websites to use their services for free.

Here are the best public CDNs for web development.

jsDelivr

jsDelivr

With over 1,000 open source projects hosted on jsDelivr, it’s currently one of your most comprehensive options. jsDelivr relies on a couple of reputable CDN companies — CloudFront as the primary and MaxCDN as the failover — which ensures great service uptimes. jsDelivr is an open source project.

cdnjs

cdnjs

Another extensive public CDN is cdnjs, which has a little over 900 open source resources conveniently listed all in one page. Tip: See their list of plugins and extensions on GitHub to find useful tools related to the service — for example, there’s CDNJS for WordPress, a plugin for quickly implementing cdnjs-hosted projects on WP sites.

Microsoft Ajax Content Delivery Network

Microsoft Ajax Content Delivery Network

Many people outside of the ASP.NET development community don’t know that Microsoft has a public CDN. Among the open source projects on Microsoft’s Ajax CDN are jQuery, Bootstrap, and Respond.js. Compared to your other choices, Microsoft’s list of available open source projects is sparse, but what you do get is the peace of mind that comes from using a service maintained by a well-established, 39-year-old tech company.

Open Source Software CDN (OSSCDN)

Open Source Software CDN

This CDN is an open source project by MaxCDN and is powered by jsDelivr. The difference between OSSCDN and jsDelivr, besides the user interface and project ownership, is that MaxCDN, which is jsDelivr’s failover/backup CDN, is the primary content delivery network.

Google Hosted Libraries

Google Hosted Libraries

Google is a leader in the realm of website speed and performance. But not to be a company satisfied by just talking the talk; they also walk the walk by maintaining a public CDN that hosts popular JavaScript frameworks such as AngularJS, jQuery, and even older ones like MooTools and Prototype.

Project-specific CDNs

Some open source projects have their own CDNs. Here’s a couple of popular ones.

Bootstrap CDN

Bootstrap CDN

This public CDN can be used to serve Bootstrap core, as well as Font Awesome and Bootswatch.

jQuery CDN

jQuery CDN

The jQuery project has its own CDN for serving various versions of jQuery and its related projects (jQuery UI, Qunit, etc.).

Why Use a Public CDN?

Performance

Content delivery networks, in general, can reduce your page response times because they are able serve resources from multiple geographic locations, lowering the distance the data has to travel to reach the user.

Compared to multipurpose web servers, like the ones used by shared web hosting providers, CDNs also have optimized backend technology specifically for sending out static page resources such as images, JS files, stylesheets, and so forth.

Ease of use and maintenance

It’s a hassle to upload and update open source libraries on your server. With public CDNs, all you have to do is reference your dependencies and they will just work.

And, if you were away on vacation or aren’t keeping up with project updates as much as you should, you have little to worry about because the public CDN will likely update the files they’re serving.

Reliability

The public CDNs in this list are backed by major tech companies, giving you a bit of assurance with regards to their trustworthiness and service performance.

Higher cached probability

Because public CDNs are used by many websites, there’s a bigger chance that the user coming to your site already has a resource stored in their browser, further improving your page response times.

It’s free

In my definition of what a "public CDN" is, the service should have no fees and should be accessible by anyone, just like Gmail or Dropbox.

Related Content

About the Author

Jacob Gube is the founder of Six Revisions. He’s a front-end web developer by profession. If you’d like to connect with him, head on over to the contact page or follow him on Twitter: @sixrevisions.

The post A List of Free Public CDNs for Web Developers appeared first on Six Revisions.

Website speed is crucial for developing the best user experience possible, because, well, no one likes to wait for web pages to load.

One of the simplest ways for improving the performance of a site is by serving page dependencies like JavaScript libraries and CSS frameworks via a public content delivery network (CDN).

A public CDN is a web service that hosts and serves open source projects used for web development (e.g. jQuery, AngularJS, and Bootstrap). Public CDNs allow websites to use their services for free.

Here are the best public CDNs for web development.

jsDelivr

jsDelivr

With over 1,000 open source projects hosted on jsDelivr, it’s currently one of your most comprehensive options. jsDelivr relies on a couple of reputable CDN companies — CloudFront as the primary and MaxCDN as the failover — which ensures great service uptimes. jsDelivr is an open source project.

cdnjs

cdnjs

Another extensive public CDN is cdnjs, which has a little over 900 open source resources conveniently listed all in one page. Tip: See their list of plugins and extensions on GitHub to find useful tools related to the service — for example, there’s CDNJS for WordPress, a plugin for quickly implementing cdnjs-hosted projects on WP sites.

Microsoft Ajax Content Delivery Network

Microsoft Ajax Content Delivery Network

Many people outside of the ASP.NET development community don’t know that Microsoft has a public CDN. Among the open source projects on Microsoft’s Ajax CDN are jQuery, Bootstrap, and Respond.js. Compared to your other choices, Microsoft’s list of available open source projects is sparse, but what you do get is the peace of mind that comes from using a service maintained by a well-established, 39-year-old tech company.

Open Source Software CDN (OSSCDN)

Open Source Software CDN

This CDN is an open source project by MaxCDN and is powered by jsDelivr. The difference between OSSCDN and jsDelivr, besides the user interface and project ownership, is that MaxCDN, which is jsDelivr’s failover/backup CDN, is the primary content delivery network.

Google Hosted Libraries

Google Hosted Libraries

Google is a leader in the realm of website speed and performance. But not to be a company satisfied by just talking the talk; they also walk the walk by maintaining a public CDN that hosts popular JavaScript frameworks such as AngularJS, jQuery, and even older ones like MooTools and Prototype.

Project-specific CDNs

Some open source projects have their own CDNs. Here’s a couple of popular ones.

Bootstrap CDN

Bootstrap CDN

This public CDN can be used to serve Bootstrap core, as well as Font Awesome and Bootswatch.

jQuery CDN

jQuery CDN

The jQuery project has its own CDN for serving various versions of jQuery and its related projects (jQuery UI, Qunit, etc.).

Why Use a Public CDN?

Performance

Content delivery networks, in general, can reduce your page response times because they are able serve resources from multiple geographic locations, lowering the distance the data has to travel to reach the user.

Compared to multipurpose web servers, like the ones used by shared web hosting providers, CDNs also have optimized backend technology specifically for sending out static page resources such as images, JS files, stylesheets, and so forth.

Ease of use and maintenance

It’s a hassle to upload and update open source libraries on your server. With public CDNs, all you have to do is reference your dependencies and they will just work.

And, if you were away on vacation or aren’t keeping up with project updates as much as you should, you have little to worry about because the public CDN will likely update the files they’re serving.

Reliability

The public CDNs in this list are backed by major tech companies, giving you a bit of assurance with regards to their trustworthiness and service performance.

Higher cached probability

Because public CDNs are used by many websites, there’s a bigger chance that the user coming to your site already has a resource stored in their browser, further improving your page response times.

It’s free

In my definition of what a "public CDN" is, the service should have no fees and should be accessible by anyone, just like Gmail or Dropbox.

Related Content

About the Author

Jacob Gube is the founder of Six Revisions. He’s a front-end web developer by profession. If you’d like to connect with him, head on over to the contact page or follow him on Twitter: @sixrevisions.

The post A List of Free Public CDNs for Web Developers appeared first on Six Revisions.

Website speed is crucial for developing the best user experience possible, because, well, no one likes to wait for web pages to load.

One of the simplest ways for improving the performance of a site is by serving page dependencies like JavaScript libraries and CSS frameworks via a public content delivery network (CDN).

A public CDN is a web service that hosts and serves open source projects used for web development (e.g. jQuery, AngularJS, and Bootstrap). Public CDNs allow websites to use their services for free.

Here are the best public CDNs for web development.

jsDelivr

jsDelivr

With over 1,000 open source projects hosted on jsDelivr, it’s currently one of your most comprehensive options. jsDelivr relies on a couple of reputable CDN companies — CloudFront as the primary and MaxCDN as the failover — which ensures great service uptimes. jsDelivr is an open source project.

cdnjs

cdnjs

Another extensive public CDN is cdnjs, which has a little over 900 open source resources conveniently listed all in one page. Tip: See their list of plugins and extensions on GitHub to find useful tools related to the service — for example, there’s CDNJS for WordPress, a plugin for quickly implementing cdnjs-hosted projects on WP sites.

Microsoft Ajax Content Delivery Network

Microsoft Ajax Content Delivery Network

Many people outside of the ASP.NET development community don’t know that Microsoft has a public CDN. Among the open source projects on Microsoft’s Ajax CDN are jQuery, Bootstrap, and Respond.js. Compared to your other choices, Microsoft’s list of available open source projects is sparse, but what you do get is the peace of mind that comes from using a service maintained by a well-established, 39-year-old tech company.

Open Source Software CDN (OSSCDN)

Open Source Software CDN

This CDN is an open source project by MaxCDN and is powered by jsDelivr. The difference between OSSCDN and jsDelivr, besides the user interface and project ownership, is that MaxCDN, which is jsDelivr’s failover/backup CDN, is the primary content delivery network.

Google Hosted Libraries

Google Hosted Libraries

Google is a leader in the realm of website speed and performance. But not to be a company satisfied by just talking the talk; they also walk the walk by maintaining a public CDN that hosts popular JavaScript frameworks such as AngularJS, jQuery, and even older ones like MooTools and Prototype.

Project-specific CDNs

Some open source projects have their own CDNs. Here’s a couple of popular ones.

Bootstrap CDN

Bootstrap CDN

This public CDN can be used to serve Bootstrap core, as well as Font Awesome and Bootswatch.

jQuery CDN

jQuery CDN

The jQuery project has its own CDN for serving various versions of jQuery and its related projects (jQuery UI, Qunit, etc.).

Why Use a Public CDN?

Performance

Content delivery networks, in general, can reduce your page response times because they are able serve resources from multiple geographic locations, lowering the distance the data has to travel to reach the user.

Compared to multipurpose web servers, like the ones used by shared web hosting providers, CDNs also have optimized backend technology specifically for sending out static page resources such as images, JS files, stylesheets, and so forth.

Ease of use and maintenance

It’s a hassle to upload and update open source libraries on your server. With public CDNs, all you have to do is reference your dependencies and they will just work.

And, if you were away on vacation or aren’t keeping up with project updates as much as you should, you have little to worry about because the public CDN will likely update the files they’re serving.

Reliability

The public CDNs in this list are backed by major tech companies, giving you a bit of assurance with regards to their trustworthiness and service performance.

Higher cached probability

Because public CDNs are used by many websites, there’s a bigger chance that the user coming to your site already has a resource stored in their browser, further improving your page response times.

It’s free

In my definition of what a "public CDN" is, the service should have no fees and should be accessible by anyone, just like Gmail or Dropbox.

Related Content

About the Author

Jacob Gube is the founder of Six Revisions. He’s a front-end web developer by profession. If you’d like to connect with him, head on over to the contact page or follow him on Twitter: @sixrevisions.

The post A List of Free Public CDNs for Web Developers appeared first on Six Revisions.

A fixed navigation bar, also referred to as a "sticky" navigation bar, is a toolbar that stays in place while the user is scrolling the web page.

It’s a commonly-used site navigation design pattern for displaying a site’s main navigation menu, as well as other essential interface components such as a search box, social media buttons, and notifications. The design pattern guarantees that important interface components are easily viewable and accessible regardless of where the user currently is on a web page.

In this tutorial, I’ll walk you through a simple CSS technique for implementing a top horizontal fixed navigation bar.

Examples

Before we get started with the tutorial, it’s probably best if we look at some sites that have fixed navigation bars, just to make sure we’re on the same page, and to show you practical applications of the design pattern.

Below are some examples of actual sites.

Niice has a fixed navigation bar that contains a search box and the site’s navigation menu. While you’re browsing designs for inspiration, you can rapidly filter them with minimal interruption to your experience simply by using the search box at the top of your screen.

An animated GIF demonstrating the fixed navigation bar on the website, Niice.

99U, an online publication, has a fixed navigation bar where the site’s navigation menu is seated. This gives users convenient access to the site’s menu at any point in the reading experience.

Animated GIF showing the fixed navigation bar on the website, 99U.

The Forbes.com site employs a fixed navigation bar to make its menu, search feature, and login widget available anywhere in the reading experience. The fixed navigation bar helps people quickly jump to another article after they have completed reading the current article. The fixed navigation bar can have the potential to reduce bounce rates because users are constantly given a menu of other articles to read.

An example of a fixed navigation bar on Forbes.com

As shown in the examples above, the navigation design pattern works well on web pages that have a lot of stuff.

A fixed navigation bar is a good way of minimizing the delay and interruption caused by switching to a new task (searching the site, logging in, or moving to other sections of the site). The design pattern, in essence, enhances usability through the application of Fitts’ Law.

Creating a Fixed Navigation Bar

Now that we’ve looked at a handful of real-world applications for the fixed navigation bar design pattern, as well as briefly discussing how it can enhance usability, I’ll now show you a quick and easy implementation method that only requires HTML and CSS.

Here’s a demo page that you may want to explore and review first.

Screenshot of a fixed navigation bar demo page.

View Demo

Download Source from GitHub

View GitHub Repository

HTML

The markup required is very minimal, just a block-level element that will hold the contents of the fixed navigation bar.

<nav class="fixed-nav-bar">
  <!-- Fixed navigation bar content -->
</nav>

For semantics and enhanced interoperability-potential with third-party web services, like search engine robots interested in finding and understanding your website’s IA, a nav element is a good option here. The nav element also happens to be a block-level element by default, which saves us a line of CSS (icing on the cake).

However, if you’d rather not use the nav element, any block-level element will do, whether it’s a natural block-level element like a div or an inline element such as a span that’s assigned a display: block CSS property/value.

CSS

Here’s the style rule that makes the fixed navigation bar stay in place.

.fixed-nav-bar {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  width: 100%;
  height: 50px;
  background-color: #00a087;
}

Earlier, we gave our HTML element a class attribute of fixed-nav-bar so that we can apply the above style rule to it.

The last three properties (width, height, and background-color) are variable; change their values according to your needs.

Let’s talk about the four key CSS properties responsible for the magic in greater detail.

position: fixed;

Giving the position property a value of fixed positions the bar relative to the viewport. This property declaration allows the bar to stay put even when the user is scrolling the document.

top: 0;
left: 0;
right: 0;

Setting the top, left, and right properties to 0 avoids unintended margins/padding at the top and the sides of the fixed navigation bar.

Tip: If you’d rather have a fixed bar that’s persistently at the bottom of the viewport, which is another common design pattern, simply change top: 0 to bottom: 0.

z-index: 9999;

An unusually high z-index value is used to significantly reduce the possibility that an HTML element is rendered on top of the fixed navigation bar, as long as there are no other z-index values higher than 9999.

That’s all there is to it.

Note

In the demo, there’s also a very rudimentary CSS-only responsive navigation menu. This menu is only a proof-of-concept, and it’s not production-ready. Since the focus of this tutorial is on building a fixed navigation bar, which can hold different types of menus and other interface components, I won’t be discussing that portion of the demo. I’ll just let you explore the source code if you’d like to see how that part of the demo works (if you’re having trouble or if you have questions about it, just send me a tweet and I’ll be happy to help out).

Wrapping Up

A fixed navigation bar is simple to implement. It requires minimal HTML markup and only a few CSS properties that you’re already familiar with.

The method discussed in this tutorial has excellent browser compatibility because it only uses tried-and-true CSS, and can thus be rendered properly even in some of the most ancient web browsers. However, if backwards-compatibility is important to your projects, then you may decide to replace the nav element (which is an HTML5 element) to a div.

In the proper context, a fixed navigation bar can improve usability and UX because it reduces the delay between switching to a new task. It therefore increases the affordance of the UI components within it, compared to the traditional top horizontal navigation bar that requires scrolling back up to the top of the web page.

Related Content

About the Author

Jacob Gube is the founder of Six Revisions. He’s a front-end web developer by profession. If you’d like to connect with him, head on over to the contact page or follow him on Twitter: @sixrevisions.

The post How to Create a Fixed Navigation Bar appeared first on Six Revisions.

A fixed navigation bar, also referred to as a "sticky" navigation bar, is a toolbar that stays in place while the user is scrolling the web page.

It’s a commonly-used site navigation design pattern for displaying a site’s main navigation menu, as well as other essential interface components such as a search box, social media buttons, and notifications. The design pattern guarantees that important interface components are easily viewable and accessible regardless of where the user currently is on a web page.

In this tutorial, I’ll walk you through a simple CSS technique for implementing a top horizontal fixed navigation bar.

Examples

Before we get started with the tutorial, it’s probably best if we look at some sites that have fixed navigation bars, just to make sure we’re on the same page, and to show you practical applications of the design pattern.

Below are some examples of actual sites.

Niice has a fixed navigation bar that contains a search box and the site’s navigation menu. While you’re browsing designs for inspiration, you can rapidly filter them with minimal interruption to your experience simply by using the search box at the top of your screen.

An animated GIF demonstrating the fixed navigation bar on the website, Niice.

99U, an online publication, has a fixed navigation bar where the site’s navigation menu is seated. This gives users convenient access to the site’s menu at any point in the reading experience.

Animated GIF showing the fixed navigation bar on the website, 99U.

The Forbes.com site employs a fixed navigation bar to make its menu, search feature, and login widget available anywhere in the reading experience. The fixed navigation bar helps people quickly jump to another article after they have completed reading the current article. The fixed navigation bar can have the potential to reduce bounce rates because users are constantly given a menu of other articles to read.

An example of a fixed navigation bar on Forbes.com

As shown in the examples above, the navigation design pattern works well on web pages that have a lot of stuff.

A fixed navigation bar is a good way of minimizing the delay and interruption caused by switching to a new task (searching the site, logging in, or moving to other sections of the site). The design pattern, in essence, enhances usability through the application of Fitts’ Law.

Creating a Fixed Navigation Bar

Now that we’ve looked at a handful of real-world applications for the fixed navigation bar design pattern, as well as briefly discussing how it can enhance usability, I’ll now show you a quick and easy implementation method that only requires HTML and CSS.

Here’s a demo page that you may want to explore and review first.

Screenshot of a fixed navigation bar demo page.

View Demo

Download Source from GitHub

View GitHub Repository

HTML

The markup required is very minimal, just a block-level element that will hold the contents of the fixed navigation bar.

<nav class="fixed-nav-bar">
  <!-- Fixed navigation bar content -->
</nav>

For semantics and enhanced interoperability-potential with third-party web services, like search engine robots interested in finding and understanding your website’s IA, a nav element is a good option here. The nav element also happens to be a block-level element by default, which saves us a line of CSS (icing on the cake).

However, if you’d rather not use the nav element, any block-level element will do, whether it’s a natural block-level element like a div or an inline element such as a span that’s assigned a display: block CSS property/value.

CSS

Here’s the style rule that makes the fixed navigation bar stay in place.

.fixed-nav-bar {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  width: 100%;
  height: 50px;
  background-color: #00a087;
}

Earlier, we gave our HTML element a class attribute of fixed-nav-bar so that we can apply the above style rule to it.

The last three properties (width, height, and background-color) are variable; change their values according to your needs.

Let’s talk about the four key CSS properties responsible for the magic in greater detail.

position: fixed;

Giving the position property a value of fixed positions the bar relative to the viewport. This property declaration allows the bar to stay put even when the user is scrolling the document.

top: 0;
left: 0;
right: 0;

Setting the top, left, and right properties to 0 avoids unintended margins/padding at the top and the sides of the fixed navigation bar.

Tip: If you’d rather have a fixed bar that’s persistently at the bottom of the viewport, which is another common design pattern, simply change top: 0 to bottom: 0.

z-index: 9999;

An unusually high z-index value is used to significantly reduce the possibility that an HTML element is rendered on top of the fixed navigation bar, as long as there are no other z-index values higher than 9999.

That’s all there is to it.

Note

In the demo, there’s also a very rudimentary CSS-only responsive navigation menu. This menu is only a proof-of-concept, and it’s not production-ready. Since the focus of this tutorial is on building a fixed navigation bar, which can hold different types of menus and other interface components, I won’t be discussing that portion of the demo. I’ll just let you explore the source code if you’d like to see how that part of the demo works (if you’re having trouble or if you have questions about it, just send me a tweet and I’ll be happy to help out).

Wrapping Up

A fixed navigation bar is simple to implement. It requires minimal HTML markup and only a few CSS properties that you’re already familiar with.

The method discussed in this tutorial has excellent browser compatibility because it only uses tried-and-true CSS, and can thus be rendered properly even in some of the most ancient web browsers. However, if backwards-compatibility is important to your projects, then you may decide to replace the nav element (which is an HTML5 element) to a div.

In the proper context, a fixed navigation bar can improve usability and UX because it reduces the delay between switching to a new task. It therefore increases the affordance of the UI components within it, compared to the traditional top horizontal navigation bar that requires scrolling back up to the top of the web page.

Related Content

About the Author

Jacob Gube is the founder of Six Revisions. He’s a front-end web developer by profession. If you’d like to connect with him, head on over to the contact page or follow him on Twitter: @sixrevisions.

The post How to Create a Fixed Navigation Bar appeared first on Six Revisions.

A fixed navigation bar, also referred to as a "sticky" navigation bar, is a toolbar that stays in place while the user is scrolling the web page.

It’s a commonly-used site navigation design pattern for displaying a site’s main navigation menu, as well as other essential interface components such as a search box, social media buttons, and notifications. The design pattern guarantees that important interface components are easily viewable and accessible regardless of where the user currently is on a web page.

In this tutorial, I’ll walk you through a simple CSS technique for implementing a top horizontal fixed navigation bar.

Examples

Before we get started with the tutorial, it’s probably best if we look at some sites that have fixed navigation bars, just to make sure we’re on the same page, and to show you practical applications of the design pattern.

Below are some examples of actual sites.

Niice has a fixed navigation bar that contains a search box and the site’s navigation menu. While you’re browsing designs for inspiration, you can rapidly filter them with minimal interruption to your experience simply by using the search box at the top of your screen.

An animated GIF demonstrating the fixed navigation bar on the website, Niice.

99U, an online publication, has a fixed navigation bar where the site’s navigation menu is seated. This gives users convenient access to the site’s menu at any point in the reading experience.

Animated GIF showing the fixed navigation bar on the website, 99U.

The Forbes.com site employs a fixed navigation bar to make its menu, search feature, and login widget available anywhere in the reading experience. The fixed navigation bar helps people quickly jump to another article after they have completed reading the current article. The fixed navigation bar can have the potential to reduce bounce rates because users are constantly given a menu of other articles to read.

An example of a fixed navigation bar on Forbes.com

As shown in the examples above, the navigation design pattern works well on web pages that have a lot of stuff.

A fixed navigation bar is a good way of minimizing the delay and interruption caused by switching to a new task (searching the site, logging in, or moving to other sections of the site). The design pattern, in essence, enhances usability through the application of Fitts’ Law.

Creating a Fixed Navigation Bar

Now that we’ve looked at a handful of real-world applications for the fixed navigation bar design pattern, as well as briefly discussing how it can enhance usability, I’ll now show you a quick and easy implementation method that only requires HTML and CSS.

Here’s a demo page that you may want to explore and review first.

Screenshot of a fixed navigation bar demo page.

View Demo

Download Source from GitHub

View GitHub Repository

HTML

The markup required is very minimal, just a block-level element that will hold the contents of the fixed navigation bar.

<nav class="fixed-nav-bar">
  <!-- Fixed navigation bar content -->
</nav>

For semantics and enhanced interoperability-potential with third-party web services, like search engine robots interested in finding and understanding your website’s IA, a nav element is a good option here. The nav element also happens to be a block-level element by default, which saves us a line of CSS (icing on the cake).

However, if you’d rather not use the nav element, any block-level element will do, whether it’s a natural block-level element like a div or an inline element such as a span that’s assigned a display: block CSS property/value.

CSS

Here’s the style rule that makes the fixed navigation bar stay in place.

.fixed-nav-bar {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  width: 100%;
  height: 50px;
  background-color: #00a087;
}

Earlier, we gave our HTML element a class attribute of fixed-nav-bar so that we can apply the above style rule to it.

The last three properties (width, height, and background-color) are variable; change their values according to your needs.

Let’s talk about the four key CSS properties responsible for the magic in greater detail.

position: fixed;

Giving the position property a value of fixed positions the bar relative to the viewport. This property declaration allows the bar to stay put even when the user is scrolling the document.

top: 0;
left: 0;
right: 0;

Setting the top, left, and right properties to 0 avoids unintended margins/padding at the top and the sides of the fixed navigation bar.

Tip: If you’d rather have a fixed bar that’s persistently at the bottom of the viewport, which is another common design pattern, simply change top: 0 to bottom: 0.

z-index: 9999;

An unusually high z-index value is used to significantly reduce the possibility that an HTML element is rendered on top of the fixed navigation bar, as long as there are no other z-index values higher than 9999.

That’s all there is to it.

Note

In the demo, there’s also a very rudimentary CSS-only responsive navigation menu. This menu is only a proof-of-concept, and it’s not production-ready. Since the focus of this tutorial is on building a fixed navigation bar, which can hold different types of menus and other interface components, I won’t be discussing that portion of the demo. I’ll just let you explore the source code if you’d like to see how that part of the demo works (if you’re having trouble or if you have questions about it, just send me a tweet and I’ll be happy to help out).

Wrapping Up

A fixed navigation bar is simple to implement. It requires minimal HTML markup and only a few CSS properties that you’re already familiar with.

The method discussed in this tutorial has excellent browser compatibility because it only uses tried-and-true CSS, and can thus be rendered properly even in some of the most ancient web browsers. However, if backwards-compatibility is important to your projects, then you may decide to replace the nav element (which is an HTML5 element) to a div.

In the proper context, a fixed navigation bar can improve usability and UX because it reduces the delay between switching to a new task. It therefore increases the affordance of the UI components within it, compared to the traditional top horizontal navigation bar that requires scrolling back up to the top of the web page.

Related Content

About the Author

Jacob Gube is the founder of Six Revisions. He’s a front-end web developer by profession. If you’d like to connect with him, head on over to the contact page or follow him on Twitter: @sixrevisions.

The post How to Create a Fixed Navigation Bar appeared first on Six Revisions.

Google Maps launched in 2005 and it was a revolution: you could go to your desktop browser, click and drag a map with a mouse and watch it render smoothly and quickly. Before then, you usually had to click arrows at the edge of a map in order to pan it, and wait for it to load.

Google Maps’ ‘fishbone’ zoom controls predominated the map; after all, screen resolutions were small, and double-clicking the map would re-centre it rather than zoom into it. Beside the map, a column of suggested searches and instructions took over one third of the screen’s width. Oh, and it only worked in Firefox and Explorer browsers.

Only eight years later, Google Maps spans multiple browsers and operating systems on desktop, mobile, tablet, and wearable devices. But how did its latest reincarnation come into play?

Learn some of the design foundations that fuelled Maps’ latest evolution.

Google Maps Design Secrets Revealed

Powered by WP Robot