Responsive websites are crucial to your business. Being 'responsive' offers an easy way of keeping consistency with your brand and website on all major devices. You have to make sure to choose banners for responsive websites properly. Ever tried to load a website with your phone only to find a jumbled mess on the screen? That is what happens if a site isn't responsive (or mobile friendly).
Images are one of the most frustrating aspects of responsive websites, specifically banner/full width images. These are the things most likely to break. Or not appear correctly on the screen.
Why is this happening? To understand this, we will explain what it means for your website to be responsive.
Responsive websites “shrink” the dimensions of your website horizontally. This means that while the website changes horizontally, everything on your website is re-positioned. This is what is called a Fluid Layout.
Since responsive websites re-size and change layouts depending on your device, it can be hard to see all the details of a website image if the page isn't responsive. Banners are particularly hard, since they are very large, and almost always full of detail.
Below I have provided some best practices for you when you choose banners for responsive images with Advisor Websites.
How to Choose Banners for Responsive Websites
Ensure the size of the photo is not too small.
We recommend banner images for responsive websites to be a minimum of 2000px by 600px for the best quality image. Anything less than this size (for either width or height) will result in a blurry image. The larger the image, the more room we have to play around and crop the right section of your banner.
Try to pick images with no focus.
Choosing banner images which have no main focus, such as a landscape, is one of the best images to have on your websites banner. No matter the device, the viewer will be able to distinguish the image's details. Since there is no focus, we can place the image without worrying about how the website will be re-sized on devices. Here are some examples below.
As you can see, the image shrinks horizontally, but since the landscape is so large, clients can still see what the background is.
Choose an image with a focus.
Let's say you would like a photo of a person, or object on your website as a focus. When using photos with a focus, it is very important to keep the main focus in the center of the image. Since responsive banner images like to shrink horizontally, we lose a great deal of the sides (white space) of the images.
In the examples, you can see the rock and the individual are in the center of the image. This allows for a clean, resized image.
Above all, test your images.
The best way to test your images is to try them out on your website. Testing images will help you also understand what type of photos do and don’t work. You can try it yourself, or work with our awesome support team.