Accepting rooms in general and pages on a website having some similarities, we need to realize that websites have hallways too. Just like in hotel suites, they give their portion to the experience using them to navigate between the pages, so let’s pay attention giving them that extra touch, which communicates the simple fact – along with the other tiny, but together very powerful details – you do care.

Websites and their hallways

OK, what do you mean with hallways regarding websites? - could you ask. Well, with hallways I mean the dynamic state between 2 static stages. For a more clear view, the way how the approximately 2-3 seconds looks and feels(!) like between jumping from a current page to another – or between the states in a process like registration or ordering. The loading phase of the page with all it’s background images and media, your visitor actually gets to see and follows with attention.

Going back to the hotel suite analogy, it’s like there were an interior design team in front of you in a rush hanging pictures on the wall and laying carpet on the floor – equipping the hallway every time you go to the bathroom. It would definitely be a part of the experience, I’m sure about that.

Making the hallway experience better on websites

Let’s make this idea even more clear with the simple scenario of having a big header image on your website (just like me up there), which takes maybe 2 seconds to load on an average broadband connection. Having a background with a different color and with the picture not showing up for that 2 seconds, your design could feel broke for that small period of time.

Giving a background-color definition in your CSS to the area your picture is being loaded can work very well on eliminating that “2 seconds design broke” feeling. Just choose the right color, a mainly dominating one from the picture and you are on your way to achieve a better experience.

Live demo

Just scroll down on this page to the footer and hit the refresh button in your browser. After try the same scrolling up to the top with the header area. What a difference, isn’t it?

Now, this is only one way to improve the overall look and feel, there are tons more of them and it’s definitely something your users won’t talk about as the next killer feature what the web has to offer, but I’m sure it gives it’s part to experiencing the site as consistent whole, with love and enthusiasm for all the small details, helping you generate feelings.