Traditionally, websites with horizontal scroll bars have been more difficult to navigate because: 1) people read vertically, and 2) the mouse was designed for vertical scrolling. As a result, the majority of websites scroll up and down.

Then, the need for out of the box web experience, with the emergence of multi-touch devices, widescreen monitors and the multi-way scrolling mouse, allowed us to rethink the usability concerns of horizontal designs.

However, horizontal websites are not for every type of websites. They work best for low-quantity text and image-heavy sites, such as portfolio or design publications.

Here are some examples of horizontal websites on the Internet:

You can find more examples at:

If your website is image-heavy and you want to experiment with the horizontal design, there is an easy way: the Horizontal Way. You can download the horizontal template from their website and customize it to your own needs (ie. text, images…).

*NOTE* You will need some HTML and CSS experience.

1. Download the template file package and unzip it onto your computer.

2. The 2 files you need to customize: thw-template.html and thw.css

3. The “thw-template.html” file contains all your website content. You will need to replace the sample text with your own content. Once you’ve customized the “thw-template.html” file, make sure you save it as “index.html” before you upload it to your website.

4. Make all the necessary styling changes you need in the thw.css file.

5. All images are found in the “img” folder. To change the images, simply replace the default ones with your own.

6. When you’re ready, upload everything in the THW_template_ folder onto your FTP server as per your account’s FTP instructions (ie. / directory for Basic Hosting).

Further reading: Useful tips to design horizontal website layout

Now, before you go and change your website to horizontal, do keep in mind that not everyone is used to (or will get used to) a horizontal scrolling website. Just ask, Are my users ready to break out of the box?

Comments

comments