Changing Mobile Banner on Mobile Responsive site
For some Net Affinity designed sites, the banner image on mobile is managed separately to the banner images on desktop. This is for several reasons:
- Load Speed - Number of images – on desktop a carousel of images works great, but on mobile, for each additional image, it increases the weight of the site, and slows down load speed.
- Size & Proportion of Image – when sizing an image specifically for mobile, you have more control over the display of the image – ensuring that the image focus is correct showing the part of the image you want to display, as well as resizing it down to a smaller file size.
How to Change:
- Firstly, resize the image to the correct size, this will be approx. 420 * 600, but may very for your site. You can check for your own site under MEDIA-> IMAGES and find the size of the current image.
- Once the image has been resized, run through tinypng.com, this will reduce the file size of the image, without hampering the image quality.
- Go to MEDIA-> IMAGES -> ADD IMAGE and upload your new image. Be as specific as you can in your image name, to make it easier for you to find, but also as Google reads the name of the image as an ALT TAG, which is important for Search Engine Optimisation, e.g. Affinity Hotel – Exterior – Mobile or Affinity Hotel – Double Room – Mobile.
- Go to PAGES and the page you want to amend the mobile banner on.
- Under ADVANCED SETTINGS -> MOBILEBANNER, select the image you have just uploaded from the dropdown for USE UPLOADED. You will see it appear in the preview to ensure you have the correct one.
- Click SUBMIT CHANGES to save.
- Take out your mobile phone and check how it looks on the front end to ensure you are happy with the display.