How does your website look to others?

If you’ve made the effort to set up a website to show off your photography, it is important to test how it looks to others. Many users will access your website on their phone or tablet, rather than on a laptop or desktop PC which you probably used to set it up. So you have to make sure that it also looks good on these smaller devices. It amazes me how many websites of even professional photographers and tour companies become unusable if accessed on a phone or tablet.

Web designers follow a practice known as responsive design so that a website adapts to the device used to access it. Layouts are fluid, meaning that elements of your web pages will grow and shrink automatically to fill the available viewing space, and may also change their position to provide the best viewing experience. For example, a gallery of images might be shown as a grid on a larger screen, but be displayed in a single column on a phone where users swipe down the page to view them. Whether you’ve set up your website using a WordPress theme (as I did) or using a special online hosting service for photography websites such as Squarespace, SmugMug or PhotoShelter, your website should by default be responsive. If it’s not, then you made a bad choice as this is now expected of any good web design.

So let’s assume that you made a good choice and have a responsive website. Unfortunately, this doesn’t mean that it will still look good on all devices as you may have made some poor choices when it came to adding the content. One classic example is choosing a background image where the main subject is to one side which means that someone viewing it on a mobile phone or tablet held in portrait mode doesn’t see it. Another problem can be that the menu or logo doesn’t stand out against the background image as the colours are similar. Other examples that can result in breaks in the design are using very wide logos or long names for galleries that don’t display well in smaller pages or menus.

All this means that it’s important to test how your website looks on different devices. Ideally, do this with a demo of the design before you choose it to ensure that it is fully responsive and that you like how it will look on devices other than the one you are using. Then, when you set up your website, check again to see whether you could improve the look by changing some of the content. Remember too that mobile devices and tablets have two different modes – landscape and portrait – depending on how they are held, so you should check both.

So how can you check how your website looks on different devices? Of course you can test it on the set of different devices that you own, but this would generally mean that the website needs to be up and running, and that you have access to a wide range of devices. If you are working on a laptop or desktop PC, a simple way of doing basic checks is to resize your browser window to see how your website adapts. Developer tools provide a more precise way of checking, and are readily available to all users. For example, in the Google Chrome browser, click on the three bar icon (known as the hamburger icon), go down to the ‘More tools’ option and then select ‘Developer tools’. A panel will appear at the bottom of your browser window containing code for your website which you can ignore. What we are interested in is the mobile/tablet icon that appears in the second position from the left in the bar at the top of that panel. Click on that and your browser will now show a simulation of how your website will look on a particular device (as shown in the image below). At the top, there is a menu where you can select from a wide variety of devices. The screenshot below has the iPhone 6 plus selected. On the right, there is an icon that you can click on to switch between landscape and portrait modes. To return to normal browsing, you should click on the ‘X’ on the right of the bar above the code panel.

Testing out a few basic options should help you spot anything that might spoil the look of your website. However, it is important to note thatthese are simulations and may not look and behave exactly the same as using the device itself. For example, the position and size of your logo might differ slightly and look better on the actual device. Also, you will interact differently on a mobile device by using touch instead of a mouse and keyboard, and some animations may not work. But it should at least allow you to quickly check how your website will appear to others and if there are any major problems.

SIGN UP TO MY NEWSLETTER

If you would like to read the stories behind my images, subscribe to my mailing list to receive a monthly newsletter. Each newsletter will tell the story behind a specific image and give some information on how I captured and processed the image.