The majority of web users now visit UFV.ca websites using a mobile device.
Reduce scrolling
On mobile devices, lengthy content means users will need to scroll… and scroll… and scroll some more. Edit your content down to what’s most important, and aim to front-load the most critical info so users see it first.
Keep your headings short
An ideal length is six words or fewer. Longer, and you risk headings that go on for two or three lines on a small screen.
Avoid PDF content
A downloaded PDF document is very difficult for a mobile user to read because of its small text. Make it your practice to include all important content as text on the actual webpage.
Make links easy to tap
On a small screen, a link can shrink to a tiny area that's easy to miss. Add enough space around each link so that users won't accidentally tap the wrong one. And use enough words in your link label that it's a clearly visible target. For example, "Learn more about Convocation 2021," instead of "Learn more."
Don't make spatial references
Layouts on mobile devices are often different from desktop or tablet layouts. It might work to say, "Refer to the checklist to the right" on desktop, but the same checklist might be below on a mobile screen.
Adjust your image width
In most cases, UFV’s website will make your image responsive — that is, your image will shrink as the screen gets smaller. It’s always a good practice to check this for yourself, though, and then troubleshoot if your image is not resizing properly. Try setting the image width to 100% to fix this issue, or ask the web team for help.
Use responsive videos
UFV’s website has a built-in content type called “embed responsive video.” Use this content type to embed your videos from Youtube or Kaltura so your videos will automatically adjust their width as needed.
Set your table width to 100%
Be sure to set your table width to 100%, which will allow it to adjust for mobile screens. If your table has many columns, it may not shrink nicely. In that case, reach out to the web team for advice.