Approximately 13% of traffic to the University website is via a smartphone, with a further 6% also using tablets*. As mobile technology becomes increasingly utilised by our audience, ensuring that your content works well on mobile devices is a must.
The University website comes with a responsive design that allows it to adapt to screens of all shapes and sizes – from desktops and laptops through to tablets and smartphones. When it comes to making sure your basic content works across multiple devices, the responsive design takes care of the heavy lifting.
If you have content with a more complex layout and you can’t quite configure it to work well on a smartphone or tablet, the Web Services Team are always happy to help you find a solution.
What to look out for
While the website design will do most of the hard work for you, there are still a few things all publishers should be mindful of when creating new content.
Images play a large part in the design of the University website. Some useful tips to keep in mind are:
Image size matters
The responsive design will automatically adapt most images within content to fit mobile devices. However, sometimes the position and size of your image can affect the user experience. Always keep in mind how someone will interact with your content when viewing on a smaller screen. For example, consider placing images after the first paragraph of text instead of before so that users have a chance to immediately engage with your key message.
Optimise your images
This is highly recommended regardless of how you are viewing the website, but is especially important for your mobile viewers. Optimising your images to reduce their file size will help pages load quicker on a smaller device. Remember, a quick loading page is a good page.
You can optimise your images using photo editing software such as Adobe Photoshop or Microsoft Office Picture Manager. Online sites such as Yahoo Smush.it also offer a quick and simple way to optimise your images for web.
Background images, as well as the homepage and landing page carousel images, are not displayed on a smartphone. For any image used to accompany a homepage or landing page carousel, ensure the text included in the related caption box accurately reflects what it is linked to and can effectively engage the user without the use of an image.
Depending on your browser, these images can still be downloaded even if they aren’t being displayed. As technology advances, some browsers can tell what images are not being used and therefore won’t load them.
Content vs sidebar
All your sidebar content – news, events, features, call to actions, social widgets and so on – will adapt automatically for display on mobile devices.
That said, you should always consider placing your primary call to action as a hyperlink within the main content area of your page. Sidebars are pushed to the bottom of the page on smaller screens, and as such may not always be reached by the user.
Example of a table that requires user to scroll across the screen to view data.
Beware of complex tables
Tables consisting of more than a few columns of data do not always adapt well to smaller screens. While our responsive design does cater for larger, more detailed tables by allowing users to scroll from left to right on mobile devices, you should always be mindful of the complexity of your table when publishing – sometimes it’s best to keep things simple.
If you are using tables as a content layout method, consider our more accessible alternatives to ensure the best experience for your mobile viewers.
You should always test your content on a mobile device. If you think your content isn’t functioning as well as it possibly can for your audience, consider some of the options mentioned above. And if you’re not sure or need some help, submit a ticket to the Web Services Team.
*Google Analytics data, sourced 12/11/2014.