Navigation

How To articles

A great way to catch the attention of a visitor to your website is a "splash screen" or an "intro screen". However, making a successful one is very difficult for one simple reason: splash screens easily irritate users. Splash screens...
In this tutorial we'll look at the techniques needed to make a navigation menu that is hidden off screen until the user clicks on a menu icon, at which point the content slides over and darkens, and the menu slides in. The menu will also be responsive...
We have capabilities in our browsers that we wouldn’t have dreamt of 5 or 10 years ago. Entire 3D game worlds can run in the browser and interactive websites can be more immersive experiences. With a certain virtual reality company being purchased...
In the last few months, the buzz around SVG images has grown and grown. SVG has been around for years, but it’s only recently that it’s started to look like a real contender. The hype around SVG isn’t just some hipster trend, SVG completely...
Horizontal layouts of all kinds have intrigued me ever since I found out you could do that. I don't know exactly why I'm fascinated with them... maybe it's just my inner rebel talking. Whatever the reason, I'm just about ready to declare vertical...
In this tutorial we're going to look at how to speed up the user experience on small static sites using a few different methods. (A static site is one which doesn't have any renewing content, so no blog posts or photo streams etc.) The way we're...
Last time we covered our bicycle enthusiast's page, we built an entire basic page in less than twenty minutes flat using the magic of Foundation. Today, we're going to take that magic even further, and without touching a single line of jQuery...
Zurb's Foundation is one of the most widely-used responsive frameworks available at the minute — and for good reason, too. With a flexible grid system, a seemingly endless features-list and a community working to push new and improved features...
In the previous part of this tutorial, using a mixture of HTML5, jQuery and CSS, we constructed the barebones functionality of our HTML5-driven full-screen video background. This time, we're going to be styling it, preparing fallbacks...
Full screen images used as the background of sites have an amazing visual impact, but did you know that you can use video in exactly the same way? After all the excitement of working with HTML5 audio, I felt it was only logical to follow-up by moving...
When Google and other search engines index websites, they don't execute JavaScript. This seems to put single page sites — many of which rely on JavaScript — at a tremendous disadvantage compared to a traditional website. Not being on Google,...
Print's a tricky business. Just because the dimensions are set in stone, we tend to think that everything will come out just the way we designed it. Oh, and it turns out the dimensions aren't set in stone… The reality is that print is as device...
When it comes to styling webpages, nothing's as tricky as forms. And when it comes to styling forms — almost — nothing's as tricky as the <select> input. We can style a <select> with CSS, but there are big limitations on how much...
The power of a good visual isn’t just a scientifically well-documented phenomenon; it’s the whole reason our industry exists. Indeed, our existence as a species is largely defined by our sense of sight. What we see, and how we interpret...