What to consider when quoting for web development work

Reusable Components (or Lack Thereof)

One of the major impacts on the cost of this website is the lack of reusable components. What does this mean?

On a larger site, the cost of each template tends to fall as we quote for the project, as a coherent “design pattern” begins to emerge. For instance, the homepage might take two days to build but the final “Our Story” template might take just a few hours, as it re-uses components previously laid down in the design. Various elements are re-used to a greater or lesser extend – this might include:

• A “card” format for displaying certain forms of content
• Various content might share a broad structure, such as a block with text left, image right
• All section titles might have the same look
• Etc, etc

We’re seeing more and more projects where designers are approaching the website through the lens of a “design pattern,” rather than strict, single-purpose templates. Indeed, with Gutenberg, WordPress’ internal modular page builder, this is the future of the WordPress platform – and it is clear to see why. Websites are living entities and the more we can empower website admins to take control of the content of their website (whilst working within the bounds of the brand experience), the better ROI end clients will see.

The Getty Residences website is very much the opposite of a design pattern. Indeed, my one complaint with the website is that it has been designed with an eye for a “poster”or “magazine” rather than as a website. Each template is so different to the other that there is minimal opportunity for cost-savings in website development.

Background Video

Using video in the right way is a regular discussion we have with our agency clients, and this website is a great example of doing this well.

The video is the first thing you see when you land on the website and they made the right compromises to make it work well:

• At 16 seconds long, the video is small and thus loads very quickly
• WIth no audio, it can auto-play on page load, immersing the website user instantly
• Chrome and other browsers will often prevent auto-play of videos that have audio because… it’s not 1995 and nobody wants to have audio auto-playing when they land on a website.
• As a background video, it expands/contracts to the viewport, always filling the screen. The video also has its key content centered in the video so that any cropping that occurs will not impact the message of the video

Lots of animations/transitions (luckily they are simple!)

Though there are extensive animations/transitions on the website, these are off the simpler varieties, including:

• “lazyLoading” style effects
• Simple “parallax” effects
• Subtle movements of elements on entering the viewport

These sorts of animations can be easily handled by great animation/transition libraries, meaning that they add minimal costs to a web development project.

Personally, I would seek to add an additional half day to any web development budget with this level of animation, just to ensure we have some budget and time padding to refine these animations to perfection. With minimal websites, the animations/transitions are what provide a deeper sense of immersion and brand experience for the user, so we want to ensure they are pitch perfect.

Speed!

This is an extremely asset heavy website and it was clearly built with speed in mind.

Using a CDN (Content Delivery Network) to improve site speed

All the assets (images, video, downloadable files) are provided via Amazon Cloudfront – https://aws.amazon.com/cloudfront/ – the AWS content delivery network. This ensures that these assets are delivered quickly, regardless of where in the world your users are browsing from.

Building the fastest website award goes to: Gatsby.js

This website is actually built with Gatsby (https://www.gatsbyjs.com/), a static site generator that creates blazingly-fast website.

We’ve seen amazing speed improvements with Gatsby; in internal testing, the WordPress version of a website got between 60-70 out of 100 for performance in Google Lighthouse. However by using WordPress in its API format, integrated with a Gatsby front-end, we saw performance of 95+ ????

The downside of Gatsby is cost. JavaScript development is still significantly more expensive than standard WordPress work and although we’d love to do more work like this, we wouldn’t recommend this kind of build to budget-conscious clients.

Our Recommendation

We would find it hard to recommend the cost of a Gatsby solution to many of our clients, especially when we have more affordable ways to easily boost performance:

• We would still recommend using a CDN like Amazon Cloudfront to provide the assets.  This way, rather than uploading files to WordPress, the website admin would upload media to Cloudfront and then place the Cloudfront URL in the WordPress website
• We have a Premium server with WPEngine and because it’s a dedicated server (and on the latest Google Cloud systems) our hosted sites load significantly faster than they did when we were on a standard server – this advanced hosting comes in at £900+VAT per year
• Caching is the key here. Gatsby and other static site generators work by turning a website with a CMS (such as WordPress) into static code – just HTML, CSS and JS.This means the website doesn’t need to load any content from the database as you navigate the website. Caching works in a similar way; saving pages into the same static format (though not quite as efficiently). This is one of our preferred caching plugins: https://wp-rocket.me/

The ‘quote’ below is based off of this recommendation.

Press

The Press page is an ideal example of a decision we would make to use either a Repeater Custom Field, or a Custom Post Type. It’s a great example to give you an idea of how we structure our WordPress back-ends.

Repeater Custom Field

Using our beloved Advanced Custom Fields plugin (https://www.advancedcustomfields.com/), this is one way of handling the management of the various press links.

A Repeater field is a way to “repeat” the same element on a page template, in this case, each press coverage “card.” Each repeatable element would likely have the same internal custom fields, such as:

• Press coverage logo
• Press coverage summary text/quote
• Card background image
• URL for press coverage

Custom Post Type

WordPress is made of different post types by default, which are:

• Posts (“blog posts” essentially)
• Pages
• Menu items (random but true)

As WordPress developers, we are able to create custom post types. These post types are typically used to structure data in a more easily managed way for our site admins. Regular use cases are for:

• Projects/Case Studies
• Teams / Team Member pages
• Products
• Locations

The key use case is for repeatable content but normally at a higher level than the repeater field. Custom post types can have:

• Archives (such as Projects Archive)
• Which can also be searchable/sortable/filterable
• Single Post Type templates (eg domain.com/project/example-project)
• This also has the benefit of having a shareable URL

Our Recommendation

As there is no need for searching/filtering, nor a need for a Single Press template (e.g. thegettyresidences.com/press/galerie), this is an ideal use case for a Repeater Custom Field.

‍