Small Screens, Big Effect: Is Your Photo Website Mobile-Friendly?
Fact: today, more than 1 out of 2 people access the Internet through mobile. Whether it’s for checking your Instagram account, purchasing a new lens on Amazon or to read your favorite photography blog, you’ll more likely to unsheathe your smartphone rather than turn to your good, old desktop. No surprise: the exact same goes for your own visitors and clients. When they enter your online portfolio, a majority of them will do it from a phone or a tablet.
Due to the screen sizes of these devices, the website you created for desktop use isn’t necessarily optimized. As a matter of fact, there is a good chance that the images will look cropped, the text distorted and the menu hard to navigate through. This is precisely why you should immediately ask yourself: is my website mobile-friendly? The stakes are even higher for photographers, since you want to make sure that your pictures (your most valuable asset), will be displayed nicely on all screens, giving full respect to their quality and format.
How do we do that? The transition is not as complicated as it looks. With Wix, most of the work is already done, automatically, thanks to the powerful algorithms that roar under your smooth and intuitive website Editor. Yet, some adjustments need to be done manually, ensuring that your mobile visitors enjoy the same viewing experience. In this guide, we go over all the steps to ensure that your photography website looks just as great on small screens.
Why is a mobile-friendly website so important?
The first reason is to preserve the quality of the portfolio you invested so much passion and energy into. As we said, your treasure as a photographer is your image gallery. Most of the website editors will crop or distort your images when transferred to the small screen of a mobile. The second reason is performance. Thanks to 4G (and 5G) networks, phones can now enjoy impressive download speed. However, there is still a delay, called “latency”, between the requests and the time the bytes reach the phone of your visitors. On mobile, the latency is usually significant, which causes users to see a delay in displaying images. This is why the mobile version of your portfolio has to be lightened: to load faster.
Last but not least: the issue of SEO. On April 21, 2015, Google considerably restructured its algorithm to give a boost to mobile-friendly pages in the mobile search results. The update was so important that webmasters and developers around the world named it “Mobilegeddon”. Don’t be fooled by the somewhat impressive nickname. There are actually a lot of benefits to this shift. If your design and UX on phones and tablets are considered good, you stand a greater chance to be found by the users of these devices.
Ease the navigation
On mobiles, navigation can be particularly tricky causing you to lose a lot of visitors. The worst situation is when your users have to zoom in to consult the different categories of your site, simply because there is too much content. Luckily, Wix designed a series of menus specially for the mobile version of your site. These menu’s utilize the small space wisely and fit in with the browsing habits of smartphones and tablet users. Like always, with Wix, they are fully and easily customizable (from colors to fonts to effects), to make sure they integrate smoothly with your overall design.
On top of that, make sure you add a search bar for your visitors to quickly type (and find) what they’re looking for. It will reduce the number of steps they need to take before getting what they want. This all helps to save time which in turn will contribute to reducing your site’s bounce rate. Since a low bounce rate means better SEO ranking, you’ll definitely want to take this step. One last tip to enhance the UX (user experience) of your site: link your logo to your homepage. This way, your visitors will have a permanent “one-click” access to your most central content. It may seem obvious, but since a lot of (talented) web designers forget it, it’s worth mentioning!
Get rid of the superfluous
Does size really matter? Like it or not, the answer is “yes”. On smartphones’ screens, there is literally no room for anything extra. Every element (be it a portion of text, a picture or even a button) can dramatically overload your design, slow the speed and ruin the navigation process. Remember: your visitors won’t enjoy the rich features provided by desktop screens. As a consequence, on the mobile version of your photo website, you should only display the most important – and only that.
The Wix Mobile Editor automatically masks the superfluous elements of design from your mobile site. It will save you a lot of precious time that you’ll spend on prioritizing the rest of your content. Make a list of all the texts, images and other items you have on the desktop version of your site. Make sure you highlight the most important elements first and don’t feel bad discarding the less crucial elements. Don’t worry: you simply have to hide the elements that you don’t want on small screens. All these modifications won’t affect your desktop version.
Go for a responsive gallery
The spine of your online portfolio is your photo gallery. To create it, you’ll want to use the best tool possible. Lucky you! This tool already exists and it even has a name: the Wix Pro Gallery. You’ll conveniently find it (for free) in the “Galleries” section of your Editor. It was conceived by our developers to make sure your photos will look as fabulous on small screens as on computers, in any way possible. The Pro Gallery automatically identifies and matches your photographs to the exact number of pixels of your visitors’ devices. In other words, you make sure that your photo gallery is fully responsive on every single screen. It even allows the viewers to double tap to enlarge the size of the picture, with no loss of quality.
But great imagery is simply not enough: it has to be fast as well. The Wix Pro Gallery was conceived for excellent performance and making the most of the memory, central processing unit (CPU) and graphic processing unit (GPU) of mobile devices. It even solves the latency issue thanks to a protocol called HTTP 2.0, and an array of servers that are in close proximity to cellular core networks. This way, your photos appear quickly and safely on your visitors’ screens. It’s an expensive solution that most website platforms are unable or unwilling to invest in. Since Wix realized just how beneficial this tool is to the photography community, it was acquired without question.
Optimize your background
The diversity of devices is a sheer delight for tech-lovers. But it can be a nightmare for web designers and photographers alike. Indeed, you’ll want your website’s photos to occupy the entire screen, without margins – and of course, without cropping the image. However, it’s impossible to prepare an image that fits all devices perfectly. To better meet this challenge, the best practice is to shoot the photo at a 16×9 aspect ratio, to fit most high-end devices like the new iPhone and Samsung devices. Other devices will get a gentle margin with a color – which you can easily customize to fit your website design. Photographers should select the best background color to enhance their photos on devices that are not in 16×9 aspect ratio.
Be easily reachable
Mobile Internet users need direct access to the core information. This includes your contact details. If they have to scroll down to the very bottom of your site (and burn their fingerprints along the way) to find your phone number, you can be sure that you’ll miss a lot of commissioned work. The best solution here is to add the Mobile Action Bar. It’s an add-on layer on the mobile version of your site that allows your visitors to contact you directly with the click of a button via phone, email or social media. The cherry on top? The design of this strip is elegant and non-intrusive.
When browsing on mobile, your visitors will probably access your site outdoors, with poor lightning conditions, and often in a rush. Which means that it’ll be very hard for them to consume your textual content. Make their life easier (and avoid further headaches) by putting short paragraphs only on your mobile site. Of course, this shouldn’t be the case for your blog articles. When it comes to your homepage, your “About me” section or the description of your photography services, the shorter, the better.
On top of this, pay attention to the size of your font. Avoid a size 48, otherwise your visitors will only see the first three letters of your every first word. On the other hand, don’t go below 14 point font, since you don’t want viewers to zoom in to read your texts. Make sure you give sufficient spacing between your words to improve readability, and optimize the color contrast between your background and text, to make the latter stand out naturally.
Limit the typing
We all experienced it: typing on a mobile touchpad is not the most enjoyable thing. The letters are so small that it’s almost impossible to write a full sentence without a word misspelled or ridiculously twisted by the auto-correct. The solution? Limit the amount of info your visitors need to write on your mobile site. This is true for the subscription widget to your newsletter, to your contact form or the Wix Bookings app to receiving your first photo commissions.
Test it (and test it again)
Big brands like Apple, Google and Wix spend huge amounts of money testing their products. Why? Because failure is not an option, neither are approximate results. The same goes when you create your photography website. When the mobile version is ready, check it thoroughly on your own mobile. Plus, make sure you ask your friends on their devices, in order to see the results on different screens and browsers. An absolute must!
By Jonathan Sitbon
Editor-in-Chief of the Wix Blogs