We use cookies to ensure that we give you the best experience on our website. Click here for more information.
manage cookies
18
February 2021
, by
Ben Lattimore

How much did this website cost: Getty Residences

Welcome to the second installment of our “How much did this website cost?” series!

This week, we’re taking a look at The Getty Residences by Peter Marino. It’s a wonderful example of a minimal, confident and well-composed real estate website.

Many of our agency clients have significant real estate/property practices so we thought this one might be helpful for you – enjoy and, as always, feel free to pop any questions in the comments section.

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.

Getty Residences - Press Page - How much did this website cost: Getty Residences - Lattimore & Friends

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.

LATEST INSIGHTS

Related INSIGHTS

Working with Klawe Rzeczy

Working with Klawe Rzeczy

We worked with Klawe Rzeczy - a Lodz-based design studio - on a digital collage around the idea of "collaboration" for our new website. Find out more here.
Read more
Building WordPress Websites in a Sustainable Way

Building WordPress Websites in a Sustainable Way

Here is a deep dive into ways to make your next WordPress build more sustainable, written by Kuba Jawor, one of the developers here at L+F who brings a passion and interest in sustainability on the web.
Read more
How much did this website cost: Gucci Flora

How much did this website cost: Gucci Flora

Welcome to the fifth instalment of our How Much a Website Costs series (and the first of 2022), where we break down what we would have charged for various websites that we love and admire – as well as talk through some of the elements of the website that have an impact on costs and/or stand out to us. Today we focus on the Gucci Flora microsite.
Read more

How much did this website cost: Gucci Flora

Welcome to the fifth instalment of our How Much a Website Costs series (and the first of 2022), where we break down what we would have charged for various websites that we love and admire – as well as talk through some of the elements of the website that have an impact on costs and/or stand out to us. Today we focus on the Gucci Flora microsite.
Read more

How much did this website cost: Apple AirPods Max

Welcome to the fourth instalment of our “How much did this website cost?” series where we break down what we would have charged for various websites that we love and admire – as well as talk through some of the elements of the website that have an impact on costs. This time we focus on the Apple Airpods Max microsite.
Read more

How much did this website cost: PLUS

Welcome to the third installment of our “How much did this website cost?” series! Today we look at PLUS, a sustainable personal care brand and e-commerce website.
Read more