Sunday, 25 May 2014

A Small Adjustment

A quick update on a small change I've made.

I've added in the 'titles' for each colour section on each of the pages. These were initially designed to look like this.
And that's fine, I've stuck with that design and I like it. When I added the graphics to the HTML and had a look at the end result, though, I noticed an issue. There was a bit of a clash with the layout.

Considering the pages on my website are going to be reasonably long, it's important for the user to be able to easily find out where they are on it. Hence the titles for each chapter that split it up and make each chapter further distinguishable (despite the obvious changes in colour...). To add to the ease of getting to places on the site I've also added a fixed home button, which displays in the top left hand corner no matter how far you are down the page. These are both good additions to the navigation of the page but they display on the page together like this...
They clash. It's okay that the home button sits above it - that's what I want it to do - but them being one on top of the other makes one less readable, doing nothing for my goal of creating a good and easy experience for the user. So, I've switched the subtitles to the other side.
Much better.

How is this aspect responsive? 
When the width of the site goes beneath 769px, this style of subtitle will disappear and text subtitles will replace it.

Above 960px
769px to 960px
470px to 769px
470px and below

No comments:

Post a Comment