Key takeaways
Key takeaways
- Design with mobile in mind to support key user tasks across all screen sizes.
- Prioritize CTA visibility on mobile聽to boost conversions with faster user action.
- Adapt layout and images per viewport to ensure clarity and impact on all devices.
- Use high-resolution images聽to deliver sharp visuals tailored to every device.
- Avoid images withtext and always provide alt text to improves accessibility and SEO performance.
Viewports differences
On the bigger viewports and in some content-blocks, the image is left- or right-aligned while on the small viewport it鈥檚 always on top.聽Understand how responsiveness works:
CTA visibility
Start by identifying what are the most important and common tasks for your visitor on the mobile. Supporting these tasks is crucial, so your mobile website will be measured by how well customers can achieve their goals.
CTA visible on mobile
Make sure that the most important CTA is as high as possible in the mobile view.
Desktop view
Desktop view
Mobile view
Mobile view
Images recommendations
Provide the publisher with images of as high resolution as possible.
Define the most useful section of an image for each viewport. This can be done very easily with the cropping tool. Check the cropping for each viewport before going live.
Do not use images of text. They can have negative consequences for people with vision deficits such as color-blindness and low vision.
If an image conveys information useful for interacting with or understanding the web page content, then it needs alternative text.
Desktop view
Desktop view
Mobile view
Mobile view
