Web design

Over the last 20-years I’ve built five complete websites from scratch, starting from the very early days when standards were not fully defined, right up to now when web standards and tools are extremely sophisticated. For this most recent site I wanted to explore the latest tools and plugins available, as well as to find a pleasing and fast format for showing full screen photographs. I describe the structure and design of mcaughtry.photo below as much for my future reference as for any other purpose. Any readers wanting to create a website of a similar style and design to mine might find this helpful.

Web design goals

My goal for the web design was to provide a very easy to navigate space in which the maximum area would be reserved for photographs. A key requirement was that the site could be viewed as effectively on a phone or tablet as it was on a PC or laptop (this is called ‘responsive’ in that the site responds to the type of device that is viewing it).

The latest technology allows many interesting display effects and while I wanted to experiment, I also didn’t want these to be garish or distracting.   In addition, I wanted a muted, semi-translucent style for the main homepage display that put the images first.

A core design goal was for the visitor to be able to navigate directly from the home page to the various styles of photography (birds in flight, people, landscape etc) and to different albums, and other areas on the site like blog posts or general information, without having to go through multiple submenus or follow on pages.

As the images are the focus of the site, I wanted the display of these to be full screen where possible but with easily accessible information about the photos. That information needed to include not only the title of the picture but also a descriptive caption and full details about the camera settings that were used for shooting the picture (EXIF data). This information needed to be callable on demand, but not to occupy the screen during normal viewing.

Platform.

The most popular platform for creating websites and blog posts is called WordPress. It hosts something like 40 million of the world’s websites. On my first site WordPress (WP) had not been invented or probably even thought of. All my subsequent websites have been built on WordPress and during the 10 years or so of its existence it’s become very sophisticated. 

What is WordPress exactly?  In the early days of web design, creators were very often writing in HTML and CSS as well as occasionally PHP. Individual pages were individually coded. A huge leap forward was made with content management systems (CMS) like WordPress, which simplified that by putting all the essential elements to build the content in a central database and calling those elements dynamically as a user requested a page or post from a browser.  The basic structure of how a page is constructed and what headers and footers look like, as well as consistent fonts and colours across the entire site, is handled in WordPress by a pluggable piece of code called a Theme. 

It’s now possible to build an extremely complex site that is fully scalable and of commercial strength without knowing any coding or without even necessarily being a professional.  This is invariably done by using additional plugins which augment the basic functionality of the WordPress platform. To use a simple analogy, WordPress provides the engine and bodywork of the car and the plugins provide things like tune-up capability,  GPS, wheels, seats of different comfort levels, colour schemes and so on.  The more sophisticated and commercially focused the plug is,  the more expensive it tends to be and although none of them are individually particularly costly, all together the costs mount up.

Theme and Plugins

For this site I wanted to use the latest and smartest tools, but at the same time use only free plugins wherever possible. That’s not just because of me being cheap but also because paid plugins can’t be updated once the annual payment has expired.  If you happen to miss the payment, then your site can quickly fall all out of date and may stop working. While you get less functionality with free plugins, they are usually simply updated and keep on going a lot longer.

To get this effect, I used three main components. The photography part is handled by a Gallery plugin called Gmedia. This is written by a gentleman with the unattractive name of Rattus, and the plug-in turns out to be based on a similar but much earlier product that I started using probably over 10 years ago at the dawn of WordPress.  Gmedia handles all the album and gallery display including the lightbox images that you see full screen when you click on a photograph, except for the homepage. It also handles the display of EXIF or camera information, which is useful for those who are interested in the technical aspects of the images.  It’s an amazing piece of code and it’s the only paid item on the site, coming in at an eye-watering $17.99.  I evaluated all the other competitors in the field and in fact paid $250 for the market leader in the plugin category for photographs, Nextgen gallery. I got my money back from Nextgen because it failed in almost every respect when compared against the functionally superior, lighter and cheaper Gmedia gallery. Specifically Nextgen cannot display EXIF data in its pro version,  has dreadful responsive behaviour particularly on phones, and has much less attractive gallery displays.

The master theme for the WordPress site is Kadence, a free theme from some very talented programmers based in Missoula,  Montana (a town I know only through the books of James Lee Burke which has led to a very dark view of it as a place to live).  Kadence provides a level of flexibility and control over the site that is unique in my experience and not available with some very expensive paid themes. On my homepage the transparent header and the relatively complex menu structure (which may not be immediately obvious), together with the sticky header that stays in place as you scroll down the screen, and a number other quite clever attributes are all provided courtesy of Kadence.

The homepage slideshow was constructed with Elementor, which until recently was the hottest thing in WP page building. It provides the ‘Ken Burns effect’ which is the slight change in zoom as the slide show progresses, and despite a weird interaction with Kadence on mobile menus, is the best free home page slider I have found so far.

Hosting platform

Although the WordPress platform is free, it needs to be hosted on a web server, preferably one that is optimised or at least set up for WordPress usage. Over the years, I’ve tried multiple web host providers from the good to the appalling. The problem is that they all get swallowed up into larger and larger organizations and then the performance and customer service deteriorates rapidly. I have found Siteground to be amongst the best but they are a pretty expensive option if you want reasonable functionality.

Readers may know that the largest provider of industrial web hosting in the world is Amazon AWS.  Amazon’s web services offerings are not designed at all for the end user and all the tools, terminology and support are couched in the terminology of corporate IT and complex infrastructure. The whole vast edifice is pretty forbidding to the average end user and is probably designed to be that way.

However, over recent years I have started to use Amazon AWS services – initially using SES, their mail delivery platform which is designed for bulk mail shots and is used by people like the Reader’s Digest and others. It’s amazingly fast and incredibly cheap. The cost for sending our 4000 newsletter mailshots per month is around 32 cents. I’ve started also to use Amazon S3 which is their storage solution and which is again incredible value for money. I’ve now got 2 terabytes in long-term backup with S3 and it’s by far the cheapest archival cloud storage anywhere on the internet.

Emboldened by these two early toes in the water, I have now put this entire website on Amazon AWS, using their Lightsail system. This enables you to bring up a full WordPress instance in about 5 minutes and then equally quickly delete it if you wish. The level of memory and performance for the WordPress instance is absolutely equal to that of a company like Siteground but is at a monthly cost of about $5-6 or about 40% of the cost of other hosters. The great thing about it is that you can bring up a second test site to make things work properly before going live and then equally quickly delete it when you don’t need it anymore. 

Some aspects of AWS like getting FTP access to the site files, establishing the security procedures for log on to the various services and systems available, or setting up and then renewing SSL certification, are complex but once mastered, the system seems to work very smoothly.

So there we have it. This is a reasonably complete description of the mcaughtry.photo web design. There may well be changes and tuning as time goes by and new products arrive and others get obsolete and I may or may not update this page.  But for sure, the tools and techniques outlined above would enable anybody to get up a quite effective and professional site for little money and in a relatively short time.

© 2020 David McAughtry – Photography Portfolio