View your site as a mobile app

There is a significant difference between how people using your app as a website through a web browser will see it compared to how it will appear on a mobile device. As the screen size is smaller, they will only be able to see a part of it at a time, and they may find that it is difficult to navigate if the controls (buttons, links etc.) that they have to use to select options and enter information are too small to use.

While you are developing your app, you can see how it will appear to mobile users by using the “Developer tools” on the Google Chrome web browser.

To access these, first click on these options:

This will open a split screen view – but you can ignore all of the information in the right-hand pane, unless you really want to get into the details ! Focus on the left-hand pane, which shows your team site as it would appear to a client using a tablet or a smartphone:

You can select from a range of devices using the device selection option. Walk through your site, checking for issues in the following areas:

  • Navigability: how easy is it to find things on your site ? What might improve this ?
  • Usability: how easy is it to get to the information once you’ve found the right place ?
  • Accessibility: is your site usable ? Are links clear and buttons big enough ? How would a user of your site manage if they had visual impairment or motor control issues ?

 

Make notes especially of places where the information seems confusing, or the navigation is not intuitive – think how your site would appear to someone using it for the very first time. Are there typos or confusing wording ? Don’t afraid to be critical – what is perfectly clear to one person may be confusing to another, so if the wording on your microsite is not as simple as it can be without losing the meaning or if the explanations on it are not clear to everyone, discuss how to make them unambiguous.

Once you have reviewed your site, you can exit the developer mode by clicking the “X” in the top right: