We are photographers. We love art, we love good looking pictures and good looking designs. We want also our site to be user friendly on mobile and desktop, and to load fast. As I started to get messages telling me that my WordPress photography site was not always the mobile friendly or fast, I started to make research on how to update my site for mobile experience and speed improvement.
If you want a solid and fast website with a nice user experience on mobile and desktop, make it simple. Try WordPress themes like Twenty Nineteen and Twenty Twenty which look really good and are AMP ready, create your pages with the WordPress editor Gutenberg, install only the few necessary plugins. I will describe my site in this article.
Here are the main chapter of this article :
Intro With my Websites Trials and Errors
Photography website specification
WordPress theme : Twenty Twenty
15 plugins for my photography website
What is the annual cost of this photography website ?
Let’s begin with my website history. I will tell you about my journey in the world of websites. This will then allow me to tell you what I expect from my photography website. Finally, I will describe in detail how I build my website on WordPress, what them I use, which plugins, and how much it costs.
Intro With my Websites Trials and Errors
Since I created my photography business, I opened a website. I’m a freelance photographer with no physical shop. I wanted at first to have a web presence to tell people I existed, and showcase my work. Blogging came later. As I love programming and tech, I started creating a WordPress website on my own. I redesigned my website several times :
- my first website was made on wordpress.org. But at that time, several years ago, themes were not as smooth as they are now, and there were not as many plugins as well. You always had to get in the code and add some php or more by yourself. The result was a good looking site… For a while. But then every wordpress or theme upgrade became soon a nightmare…
- so I decided I was done with site programming. I looked at the website hosts for photographers, hesitated for a while between Zenfolio and Smugmug, and went on for Smugmug. Life was becoming easy again… But some features were lacking. In my case, I wanted to blog, and blogging was not a native feature in Smugmug. I had to create posts with workarounds, it was not so great looking, and time consuming.
- So back to wordpress.org, I bought a fancy theme which proved to be too fancy and too flashy. I got bored in 6 months. But it took me two years to decide to get back on tracks again…
- I went for another WordPress theme, a lot more classical and elegant. It was last year. I loved it and it served me well. I will not tell its name, because there is a but… A few months ago, I started to get messages from Google Search Console : ” Text too small to read ” for mobile usability. There was nothing easy I could do with the theme’s customization. I had to go back into css and code stuff, or leave…
- Ok, here I am, so I left…
Now you know my website history a little better… I will get into details on how I enhanced my photography site for mobile usability and speed.
Photography website specification
I will tell you here what are the important features of a photography website for me. The list will not be the same for every photographers, depending of their domain and activity, their taste.
I am a French photographer in commercial and art photography. I use my website to ;
- showcase my work to my potential clients
- sell prints to my clients
- blog in French and in English
- blog about news, technical photography issues
So here are the specifications of my ideal website :
- elegant looking and simple
- solid and durable
- fast loading
- User and SEO friendly
- cheap
- easy to blog with
That’s it. It’s so simple I don’t understand why I made so many tries in the past years… But in fact, I know : at first, I was too geeky, then lazy, then blinded by fashion, then outdated.
Anyway, what do I mean with User and SEO friendly ? :
- More and more people use their mobile to search on the web.
- Google bots are now indexing websites from a mobile perspective, and not from a desktop one anymore.
- Page loading Speed is usually slower on mobile than on desktop. Loading a long text on mobile could take 8 seconds. Far too long.
- I wanted to address the mobile usability errors I got, for instance “Text too small to read “.
- Google has 3 new explicit criteria in Google web Master presented as page enhancements. I is a good strategy to address them if they are meaningfull ( and in fact I think they are ) :
- Speed (experimental)
- Mobile usability
- AMP. I read a lot about Accelerated Mobile Pages (AMP). Noticed the polemics around it and made up my mind to go for it whenever possible for the sake of speed and simplicity.
WordPress theme : Twenty Twenty
Choosing a theme gave me headache. Really. You go into the Appearance dialog for adding themes and look at a ton of themes. But it’s difficult to get an idea of how it could look like with your own pictures and pages so you try it.
Then you start googling and read all about the best photography themes in wordpress. Most of them are free with a few amount of features, then you’ve got to paid to try the full version. So you hesitate and the headache gets worse.
Then you start looking at the number of times the theme has been downloaded or bought. You know, the more people chose it, the better it must be… But oftentimes, these bestseller themes are not free, and you’ve got to buy them to try them, so you don’t.
I took some time off the task, got outside in the sun, and forced me to think instead of searching frantically.
I remembered there was a big newcomer in the world of WordPress last year, a big evolution named Gutenberg. This new editor brought in blocks. Beforehand, you had to buy themes or big plugins if you wanted to create blocks and for instance columns in your pages or posts. But now, blocks are native in Gutenberg, the new WordPress editor.
That left me with two wordpress themes to test : “Twenty nineteen” and “Twenty twenty“. It was a matter of taste, I loved the elegance of twenty twenty at first. So I chose to give the WordPress twenty twenty theme and try and adopted it.
Twenty Twenty is built around Gutenberg
And then I thought that WordPress is at the heart of the WordPress world. That’s common sense. So maybe it would be a good idea to check if a WordPress theme would suit my website needs, a recent theme that would have been created after Gutenberg, and thus would natively integrate Gutenberg.
Twenty Twenty is AMP ready
The compatibility with AMP was also another main argument for my website. I wanted to be able to implement AMP easily, even if I new some of my web posts could not be AMP compatible. I wanted my website to be generally and efforlessly AMP-friendly. And Twenty Twenty is AMP ready. It was really easy to install an AMP plugin and migrate.
No mobile usability errors with Twenty Twenty
I knew I would get it easier with a standard core WordPress them. All my mobile usability error went away. The theme come with a rather small number of parameters, it’s solid, simple and elegant. And I could customize it to my taste.
For instance I like the menu design :
Twenty Twenty allows you to define 5 menus :
- Desktop Horizontal Menu. Nice with WMPL language switcher.
- Desktop Expanded Menu. Discret (three bars at the right upper corner).
- Mobile Menu. For me the same as Desktop Expanded Menu.
- Footer Menu. I don’t use it yet.
- Social Menu. Integrated social widget menu.
My website is build upon twenty twenty. This is one usage of the theme. You may be interrested by a demo site created with the twentytwenty theme : 2020.wordpress.net.
The WordPress theme and plugins work together for your website’s infrastructure. Here are the ones I use.
15 plugins for my photography website
Here are my plugins. Some of them provide features for the look of the site, others are rather dedicated to the administration of the site.
I chose to keep the list minimal, because plugin add complexity, security and compatibility vulnerability and add to the loadin time of your pages. If I fancy a plugin just for the needs of one post, I think twice before installing it. Could I do things in another way ?
| PLUGIN | FUNCTION | VERSION | AMP-ready |
| AMP | Enables Accelerated Mobile Pages | Free | Yes |
| BackWPup | Backup | Free | Yes |
| WPForms Lite | Mail contact | Free | Yes |
| Envira Gallery | Gallery plugin | Paid | NO |
| EWWW Image Optimizer | Reduce file sizes for images within WordPress | Free | Yes |
| Head, Footer and Post Injections | Adds code to the heads and footers of pages / posts | Free | Yes |
| Media Library Assistant | Enhances the Media Library for metadata | Free | Yes |
| OSM | Embeds maps in your blog and adds geo data to your posts | Free | NO |
| Redirection | Manage all your 301 redirects and monitor 404 errors | Free | Yes |
| Simple Custom CSS | Add custom CSS | Free | Yes |
| Wordfence Security | Security – Anti-virus, Firewall and Malware Scan | Free | Partially |
| WP Super Cache | Very fast caching plugin | Free | Yes |
| WP-Optimize | Cleans WordPress database | Free | Yes |
| WPML Multilingual CMS | Add multilingual support | Paid | Yes |
| Yoast SEO | SEO solution | Free | Yes |
I’ve been using most of these plugins for several years now. Some of them are newbies in my list : Getwid, OSM.
AMP
AMP by AMP Project Contributors is a plugin that enables your site to use AMP. With the Twenty Twenty theme, it’s easy to have the global theme to work with AMP. Then you have to see plugin by plugin what are the problems and fix them one by one. It took me half a day to have 90% of my website AMP ready.
This plugin has 3 options. I chose the standard one : “The active theme integrates AMP as the framework for your site by using its templates and styles to render webpages. This means your site is AMP-first and your canonical URLs are AMP”.
Yur pages will be by default AMP, but all your pages and posts are not all AMP ready. In my case, I use Envira Gallery. All pages or posts that embed a gallery is not AMP compatible. I had to edit all gallery pages one by one and deselect the “Enable AMP” option in the page editor.
In order for Google Analytics to work with this AMP, you just have to copy / paste this piece of code with your own Analytics ID in the AMP > Analitics menu :
{
"vars": {
"account": "UA-xxxxxxxx-y"
},
"triggers": {
"trackPageview": {
"on": "visible",
"request": "pageview"
}
}
}BackWPup
Backwpup by Inpsyde GmbH is my backup solution on wordpress. I programmed a regular backup and the .gz generated file contains a full backup of :
- my wordpress site directory
- my database
- my posts & other publications except for the images itself
I can also run a manual backup.
A backup plugin is mandatory. It saved me hours of work twice. I had been working on my website, made some hasty change and could not start the site again. It’s been a bad moment but could be easily recovered thanks to this backup.
Three more things on backups :
- When your backup is set up, run it once to test it. You’ll have an idea of the requested storage for one backup, and you’ll be able to see it if runs correctly till the end.
- After this first backup, look at the generated file and try to recover things from it.
- Check regularly the backup result, see if Backwpup could make a backup file correctly.
WPForms Lite
WPForms Lite by WPForms is a mailing plugin. You can define several contact form, and may easily customize texts, admin fiels andd captchas.
A contact form is a shortcode you copy on to your page / post.
Envira Gallery
Envira by Envira Gallery, LLC is a gallery plugin. There is no free version of this plugin, but several pricing plans.
It’s easy to use : you define a gallery. Envira gives you a shortcode that you insert in your post or page.
The mobile integration is great.
I use the following addons (which are included in Envira):
- Slideshow Addon
- Envira Gallery – Protection Addon
You can embed an Envira gallery with a shortcode, or you can access a gallery directly by its URL. For instance, here is a gallery of images I took in the Alps in France, a region called Le Vercors.
Moreover, you can use an Envira Gallery within an iframe as below :
However, as much as I like Envira, there is a BUT…
Envira is not compatible with AMP.
If you try to display the AMP version of an envira standalone gallery, or a page embedding an Envira Gallery, the content will be blank.
As a result, I disable AMP for any post or page or standalone Envira gallery that contains an Envira gallery. It’s possible to disable AMP for single page, post or gallery in the WordPress editor.
EWWW Image Optimizer
EWWW Image Optimizer by Exactly WWW helps you optimize your images when they are on your site.
Unchecks ‘remove metadata’ in EWWW Image Optimizer
In the Settings for the plugin,
- I unchecks ‘remove metadata’ which is checked by default. I want to keep my keywords and GPS coordinates in the file.
- I let the JPG Optimization Level to ‘Pixel perfect’. It uses the stock Jpegtran build used by most website performance testing sites (lossless). This is the default value, one level below the ‘no compression’ option.
You can the look at the work done by EWW Image Optimizer in the Media window.
Head, Footer and Post Injections
Head, Footer and Post Injections by Stefano Lissa helps me display the breadcrumbs.
Here is how is works : yoast generates the breadcrumbs, and provides php code to display them wherever you want on your site. However, no field has been provided by the theme for breadcrumbs, so I had the choice : either to add the php to the theme code, or use a plugin. I preferef the latter one.
With this php, the breadcrumbs appear on the upper left corner of the site. However, the character are too big. So in order to make it nicer, I added a piece of CSS code with the plugin Simple Custom CSS :
breadcrumbs {font-size: 75%; color: #8e908f;margin:1em 0 2em 0;}
breadcrumbs a {display: inline; border: none; padding: 0; text-transform: none;}
Media Library Assistant
Media Library Assistant by David Lingren adds a sub-menu to the Media menu. I use it to bulk-add “Alt Text” to a set of images.
OSM
OSM – OpenStreetMap by Mika is a plugin that allows yo to display maps in your posts and pages. I’ve only discovered it recently so I can still barely speak about it, but I installed it because :
- it displays Openstreetmaps and Stamen maps
- you can geotag your posts and pages
Redirection
Redirection by John Godley is an admin plugin that helps you redirect posts or pages (301) and monitor 404.
Simple Custom CSS
Simple Custom CSS by John Regan and Danny Van Kooten adds custom CSS styles that override Plugin and Theme default styles.
In my site, I use it to display nicely breadcrumbs :
breadcrumbs {font-size: 75%; color: #8e908f;margin:1em 0 2em 0;}
breadcrumbs a {display: inline; border: none; padding: 0; text-transform: none;}
Wordfence Security
Wordfence Security by Wordfence is a firewall and security scanner.
All features in Wordfence are not AMP compatible. However, it’s easy to install the free version of Wordfence and customize it so that it becomes AMP-ready.
Wordfence Security works with AMP if you disable the “front-end website” option for handling whitelisted URLs.
Go to Wordfence > Firewall and open the “Whitelisted URLs” section at the bottom of the page. Then under “Monitor background requests from an administrator’s web browser for false positives“, uncheck “Front-end Website“. Save.
WP Super Cache
WP Super Cache by Automattic generates static html files from your dynamic WordPress blog. After a html file is generated your webserver will serve that file instead of processing the comparatively heavier and more expensive WordPress PHP scripts.
It provides an easy tab for people using it first time. At first, I was quite afraid of using it but it proved to enhance really the loading time of my webpages.
Once you setup a caching tool, keep in mind it exists. When installing a new feature on your site, and when this feature does not run as expected, this may sometimes be due to the cache.
WP-Optimize
WP-optimize by David Anderson, Ruhani Rabin, Team Updraft cleans and optimises your database. It may also help optimize your images and cache your site pages, but I do not use these options.
WPML Multilingual CMS and WMPL Media
WPML Multilingual CMS by OnTheGoSystems Limited is my multilanguage tool. I use it to :
- Write posts / pages… in different languages
- Display language switchers on the site
For instance, if I create a post “Voici mon article” in French, with the url https://www.laurencebichon.com/voici-mon-article, I can choose to translate it and so have a corresponding version in English. I can then choose to title this English version of my post “Here is my post” and change the page address from voici-mon-article to here-is-my-post. WMPL knows that they are two versions of the same post. I will have two versions of the same post :
- https://www.laurencebichon.com/voici-mon-article
- https://www.laurencebichon.com/en/here-is-my-post
WMPL keeps the link between translated articles and allows to to edit them in all languages in WordPress post panel.
Another nice feature : WMPL is able to duplicate and synchronize posts in different languages. Moreover, the duplicates are created as canonical link elements which helps webmasters prevent duplicate content issues in search engine optimization. Nice, when you do not want to translate every article, and still want them to appear in in the article lists of both languages.
You can add you language switcher in the menu, at the beginning or the end of your posts, in the footer or code them where you wish.
You have to purchase this plugin. It is almost a standard multilingual plugin in the industry. Once using it, always check that whatever you intend to buy or install is wmpl compatible though.WPML publishes a plugin compability table and a theme compability table.
The wordpress theme I chose, twenty twenty, is not in the list, however, all twenty xxx previous WordPress themes are, and I had no problem so far. So I assumed the list had not been updated yet.
WMPL is almost AMP ready.
Restriction : you can not use country flag switchers on your pages.
I had one issue with WMPL on AMP though : I could not get the language switchers display as small country flags as I liked. However, I switch to plain text language switcher and it worked.
Yoast SEO
Yoast SEO by Team Yoast helps you with your search engine optimization.
Here is what I use :
- sitemap generation
- breadcrumbs generation
- automatic rich result generation : Local businesses, Sitelinks searchbox, Logos
- SEO meta tags (title and meta description)
- overall seo check of the page / post (ex seo title length)
My shop
I sell pictures in my e-shop. For instance I shoot a sport event and sell the pictures online. Having a photography shop online allows people to select the pictures they want to buy.
I had several choices to implement this commercial feature :
- use a photo website hosting like Zenfolio, Photodeck, Smugmug, Squarespace…
- use a wordpress plugin or theme with an e-commerce feature
As selling pictures online is not the main part of my pro photography activity, I chose to keep it simple and use a photo website hosting. I tested several solutions and opted for Zenfolio.
Zenfolio is easy to setup, and offers monthly or annual subscriptions, which is very flexible.
What is the annual cost of this photography website ?
How much does my photography site cost per year ? In fact, it is fairly easy to detail. I will not take into account the domain name location nor the web hosting.
| Product | Cost per year |
| Envira Gallery | 29 $ |
| WMPL | 29 $ |
| Total | 58 $ |
Performances
When I use pingdom to test my site, I see that the traffic for loading my homepage is not a lot smaller thant it used to be, in terms of number of files transfered and of KB transfered.
This is kind of the minimal page I will have in my website, because my homepage displays 3 images and text in its french version.
Conclusion
It’s been a long post. I hope you enjoyed reading it and have got some new ideas for your own photography website.
I thank you very much for your visit !
I wrote other technical posts related to photo processing, web sites on wordpress or fujifilm cameras if you are interested in these topics.
A bientôt
Q&A
Is twenty twenty fully compatible with AMP for WordPress ?
Yes , the Twenty Twenty them is AMP ready. I made a lot of researches on the web and did not find any related problem. I also implemented AMP over the WordPress Twenty Twenty theme on my website and every thing work perfectly so far.
Does WMPL work with AMP for WordPress ?
Yes, WMPL works perfectly on my site. The only restriction I encountered was to use plain text language switchers instead of flag switchers on post and pages.
Is Envira Gallery compatible with AMP for WordPress ?
No, Envira gallery is not compatible with AMP. I decided to go for AMP on my whole site, but deactivate AMP on pages and posts that display an Envira gallery.
Is Wordfence compatible with AMP WordPress ?
The free version of Wordfence Security is not fully compatible with AMP for WordPress. However, if you desactivate the Wordfence > Firewall “Front-end Website” in the “Whitelisted URLs” section, Wordfence works as expected and AMP does not report errors due to this plugin for the AMP pages.