Prepare your web pages for the mobile-first redesign

redesignUse the tips below to create user-friendly web pages and prepare your website for the redesign into a mobile-first website:

Less is more

Don’t overload your pages with information. Ask yourself what information your visitors are looking for on a page and present that information clearly and in full, alongside high-quality and relevant images in web resolution.

Use content elements with moderation on your pages. Elaborate on your most important content in the middle section and include links to additional information in the text.

Apply the web editing tips to your texts.

Clean up or archive

This is the ideal moment to freshen up your website. Get rid of all redundant information. Delete old pages. Don’t just make the pages invisible in the navigation, because users will still be able to find them on Google.

If you want to remove a lot of information or an entire website, ask webredactie@uantwerpen.be for an archive copy. We’ve set up a workflow together with the Library Department to archive obsolete web pages on the university’s servers and remove them from the website. You’ll receive a link to the archive copy.

Right-hand column is disappearing

The right-hand column often remains unnoticed by internet users. Leave it empty or put some nice extras there, like pictures. On mobile devices, these items currently appear at the bottom of the page.  

After the redesign, the right-hand column will disappear. The elements in your right-hand column won’t disappear, but will end up at the bottom of the page.

The navigation isn’t always on the left, the right-hand column is sometimes at the bottom

Keep in mind that the navigation options are located at the top of your smartphone screen (collapsed), and the elements from the right-hand column are currently shown underneath the middle section. After the redesign, the right-hand column will disappear completely. So never refer in your text to ‘the navigation on the left’ or ‘the button on the right’. Include a link to what you describe in your text. This is also a good practice for the desktop version.

For example:

  • Don’t write: ‘To register, click on the button in the right-hand column’
  • Write: ‘Register' + direct link on this text to registration.

Add beautiful and relevant images to your pages

The fresh web design will only stand out if all editors also pay attention to the graphic aspect of web editing.

Support your content by adding a beautiful and relevant image. Only use high-quality images, in web resolution, which you own the copyright for.

Tables

Try to avoid tables. Tables are currently non-responsive: the information in the tables is compressed. After the redesign, you’ll be able to scroll through tables on your mobile device, but this still isn’t ideal.

Information in a table isn’t always easy to read, even on a desktop. It’s better to present a study day programme as a list with an attractive lay-out and bullet points instead of a table. The text will then scale nicely depending on the screen width.

Open links in the same tab

Open links in the same tab wherever possible. Within your own website, always choose ‘_parent’ or ‘Same window’ as the link target. That way, internet users can find their way back by using the back button, which is even more important on mobile devices than on desktops.

For downloads and links to other websites, you can opt to open another tab (_blank), although this isn’t a must.

Links on images

A link placed on an image will be harder to detect on a smartphone than on a desktop. On a desktop, you’ll notice a hand when you hover over the image with your cursor. On a smartphone this isn’t possible.

Keep this in mind when using a call-to-action image. Be sure to activate the play button for a video or publish the call-to-action with a title and description.

For a normal call-to-action, the link is made clear by the arrow:

call to action

Don’t use too many collapsibles

Reading the site with collapsibles requires an extra effort on the part of the mobile reader. Use these text elements only if you really have to.

Don’t use too many arrows

Arrows should best be used in the middle section, at the bottom of a text, for example to indicate a next step such as ‘Sign up’ or ‘Find out more’.

Don’t use arrows to give a list of links and don’t use them in the right-hand column. They won’t align nicely.