Websites with left and right arrow keyboard navigation
Over the last week or so I have come across several websites that allow users to navigate using the left and right arrow keys. I think this is an interesting approach and I really like this method of navigating a website. Perhaps it’s just me but I like using keyboard shortcuts (because they seem to allow me to do things faster) …. so it’s interesting to see websites using the left and right keys in this way. Here are the website examples I have spotted that use this method.
- Crush + Lovely. This is a fantastic design and the left and right keys enable you to scroll between the various content sections. Try it and see!
- Pictory is a photo story website and it uses left and right keyboard navigation in a similar way.
- Thinking for a Living uses left and right keys for horizontal scrolling between sections/pages.
- OnSugar uses a left-right arrow key method to navigate between images in a gallery.
There is an adding keyboard navigation tutorial at jQuery for Designers which explains how a similar effect is achieved with an image slider. The jQuery Tools website has Scrollable which enables a content slider to be navigated with left-right keys.
There may be disadvantages to this method but I’m keen to find out more about it so if you know of other websites that use this approach, let me know.
Related Posts
Comments
Stunning CSS3: A Project-Based Guide: Use this book to work through a series of practical yet cutting-edge projects. Each chapter walks you through standalone exercises that you can integrate into projects you're working on, or use as inspiration.
» Buy from Amazon.com · Amazon.co.uk
We Like
ThemeForest sell a range of site templates from some fantastic designers. They also sell some great WordPress themes!
Online invoicing made easy with CurdBee!
» Sign up
Join SugarSync for online backup. Sync your files between Mac, PC and mobile phone. Get 5 GB FREE and up to 10 GB bonus space!
Featured Book
HTML5 and CSS3 for the Real World will show you how to create websites using these new methods.
This easy-to-follow guide covers everything you need to know to get started. You’ll master the new semantic markup available in HTML5, as well as how to use CSS3 without sacrificing clean markup or resorting to complex workarounds. Buy the Book! · FREE Chapters
Stephen Webb 8 March 2010, 10:31 1
This is a different approach to website design that I’ve not really seen done successfully before. In many ways it’s a modern version of the original one page websites that filled the internet in the early days, however much more refined. The multiple background capabilities and smooth scrolling options offered by the jQuery implementation gives the sites a very polished effect, and the usability of the keyboard enhances this.
I can see many applications for this type of site design, most notably for freelancers who quite often prefer a single page portfolio. The capability of being ably to style each section accordingly, with a floating left menu makes the design very usable and adaptable.
I wonder how much of this style we will see in the coming months, if it will catch on and have widespread implementation. I would like to know how SEO could be successfully performed on the site, as the obvious lack of pages means meta data must be limited.
Clive Walker 8 March 2010, 14:05 2
@Stephen: One page sites seem to be more prevalent recently but they do have their SEO disadvantages as you mention… and for most clients I would not advise this type of website.
Manu Mohan 23 March 2010, 18:42 3
I have a one page site with left + right + up + down arrow navigation :)
Clive Walker 25 March 2010, 13:55 4
@Manu: Nice one. Thanks for sharing.