How does your website look to others?

This article was updated on 12 May 2019.

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.

You can see this in the following screenshots of one of the galleries on my website first viewed on my iPad held in landscape mode, and then in an iPhone held in portrait mode.

In landscape mode on the iPad, the gallery is displayed as a grid and a menu of pages and links to social media are displayed in the top right of the page.

However, given the much smaller screen size on the iPhone in portrait mode, the images of the gallery are displayed in a single column and the menu of pages plus social icons is not displayed on the page. The menu of pages will only be displayed as a list of options when the user clicks on the ‘hamburger’ icon at the top right of the page. The social icons only appear at the bottom of this page.

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 SquarespaceSmugMug 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 icon at the top right to get a menu of options for customising and controlling the browser. Go down to the ‘More tools’ option and then select ‘Developer tools’.  A panel will appear either on the right of your browser window as shown in the image below, or at the bottom of  your window.

This panel contains code for your website that developers can use to test and debug things. You can ignore this.

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 the code panel. Click on that and your browser will now show a simulation of how your website will look on a particular device. For example, in the image above the browser is showing me what my website would look like on an iPad held in portrait mode.

There is a menu at the top of the area where website is shown that allows you to select from a variety of mobile phones and tablets. To the right of that menu, 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 that these 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.