Fit for Phones - why this website looks different

Fit for Phones - why this website looks different

We have redesigned the site so that it’s easier to use on mobile phones and tablets.  Let us know what you think.

You may have noticed that most of the pages on this website now have a different feel.  The motive behind these changes is to make the website easier to use on mobile phones and tablets.  We had noticed a steady increase in visitors accessing the website using a phone or tablet and we decided it was time we show that we want them to have the best browsing experience possible…

Some of the changes you may have already noticed.

  • We’re using a new logo, which is bolder and clearer
  • We’ve adopted Instagram-style square images as standard
  • We made it easier to scroll through our indexes.

    We’ve provided more opportunities for affiliated groups to personalise their listings

Our web-designer, Steve Ireland of Ivyparkmedia, brought his considerable skill to this task, which is known as mobile optimisation.  It is not a simple affair because there were a myriad of decisions to be made about how information should flow across a smaller screen and each of these brings with it the need to create new designs.

For example on the desktop display we continue to use a coloured background to the text.  But you will notice that when you are using a mobile phone, the text has a white background, making it easier to read on the smaller screen.  On tablets there is coloured background but it is lighter in shade.

Sometimes decisions made for the sake of the mobile screen have implications for the desktop version.  For example we chose to use square images because these make it easier to fit text around them on a mobile screen.  But having made this decision we then had to redesign the desktop version in order to accommodate the use of square images.

There was the question of what to do with the side columns which appear on the desktop display.  Sometimes it made sense for the information to go underneath the main text.  But where the side column offered an aid to browsing it makes more sense to put the information at the top of the page.  So then we had to think again about how the information was could be displayed to take up less space.  In some cases we’ve hidden the information behind a dropdown menu – but how should we indicate that a dropdown option is available?

A similar decision had to be made about our use of tabs for the main menu options, as we do on the desktop display.  We found that to include all ten tabs on a mobile phone took up too much space if they were going to be big enough to stab with your finger.  One solution was to hide the options behind a so called hamburger symbol – three parallel horizontal lines which indicate that a drop down menu is available.  But would the audience instinctively know what a hamburger symbol represented?  When we began the redesign fifteen months ago we weren’t sure, but over the last months the hamburger has become so commonplace that we knew we could use it with confidence.

So what we have now is a website that comes with three different faces.  The ‘desktop’ is what you will see on a normal PC.  Then we have two versions for mobile devices, the fully ‘phone compatible’ smallest version and somewhere in between, the tablet version.

We hope we’ve not only given mobile users an easier time, but in the process have brightened up the website for all users.  For example we felt that the Current Highlights section on the Home Page wasn’t working well, so we’ve completely changed the look.

We realise that any redesign will throw up some oddities and anomalies which may not be immediately obvious until the new design has been put to the test.  So if you come across something which you feel isn’t working right, please get in touch by emailing webmaster@pcnbritain.org.uk

Thanks,

Andy Vivian, (PCN Britain, website editor)

Comments

Comment on this entry

Name:

Email:

Your comment:

Please note all comment will be moderated by the site administrator.

Back to News