Scrolling in two directions (on mobile)

Mobile use is rising 

Increasing numbers of people are coming on to the University of Derby website via a mobile device. This may not surprise you. Over the last 12 months, 55% of measurable visitors were using a mobile, compared with 42% on desktop and the remainder (3%) on tablet. Over the previous 12 months, the figures were 50%, 45% and 5%. So mobile use up, desktop and tablet use down. 

And scrolling is what you do on a mobile device. You scroll down the web page to read content (though your action is to push the page up to do so). This works well when your page is moving solely in the vertical plane ie up and down. But the user experience deteriorates when the page also starts moving from side to side. 

Your user’s experience degrades further if they have a disability such as tremors which makes it hard for them to hold their phone firmly, or if they’ve broken their arm or are simply walking down the street. If they are having to scroll in two directions this could mean our content is very difficult to access.   

One direction 

Our web pages should scroll up and down only, even on a small mobile device such as an iPhone 5. Everything should reflow and fit on that page width. It gives the best user experience and it is also required for compliance with the accessibility regulations.  

What causes two-dimensional scrolling? 

I’m glad you asked. There could be a number of reasons. But they are usually pretty easy to spot. It could be a particularly long word in a main heading, an incorrectly formatted table or broken full url links. It can also be something that’s not easy to spot, such as long strings of text with coded, non-breaking spaces. These often appear around hyperlinks (including buttons) and active (mailto:) email addresses. 

How do I check? 

Another excellent question. You check by previewing the page in Terminal Four before you publish. Your preview will most likely open up initially in desktop view (ie landscape/wide screen). From there, you have two options to get a mobile view of the page. You can take the browser window off maximised view and simply squeeze it until it shows you a vertical window like a mobile phone. You will see the page reformat as the shape changes.

Or you can activate the Developer Tools window [by using F12 on desktop or shift-F12 on laptop or you can right click on the page and go to Inspect]. Once this window is open on the side of your page, you click on the mobile device/tablet icon and the screen will switch to mobile view. If you are a keyboard-only user, you can tab to the icon and hit return.

Once in mobile view, you should be able to see if there is any content that is pushing beyond the screen width. For example, a line of text with non-breaking spaces or a badly formatted table [as well as the table in the example breaking the screen width, the table headings are black on grey when they should be white on blue, which is another clue that it is not formatted correctly]:

How do I fix it?

You and your questions. We have some advice on how to deal with long words/strings on mobile causing horizontal scrolling. This deals with fixing long words in page headings (H1), or long strings of text with coded (html) spaces (often around links and buttons). 

Url (web address) links should never be written full out on a web page, they should be linked behind appropriate link text. We have additional advice on how to write good link text.

To fix badly formatted tables, I’m afraid the advice is to start over. Tables not responding correctly on mobile is often a symptom of the table having been copied from another platform, such as Word or Excel. T4 is very sensitive to this and requires tables to be built from scratch.

NB you should always check the mobile view of any table you build as it may influence your column and row order.