Architects’ websites: who has the best in the AJ100?

The short answer is probably yes. But that doesn’t mean we can’t try. Some aspects of web design (and all design for that matter) are certainly subjective. Every practice is unique and needs to express itself according to its own criteria. But some aspects of web design are not subjective. Every website is built with one core aim: to deliver content to people. To do this, each site is coded, hosted on a server and accessed through a web browser. Pages take time to download. Content is read and understood by search engines. People use multiple devices and browsers, have varying connection speeds, and even different ways of reading. Technology underpins the whole process.

Google understands this and wants to improve the web for everyone. So they created Lighthouse — an open-source, automated tool for improving the quality of web pages — to help web designers and developers like us make technically better websites. We use it all the time to check our work (alongside a sweep of other quality assurance checks).

Because we work with lots of architects, we thought it would be interesting to run every AJ100 architect’s website through Lighthouse to see what we could find. We wanted to see if there were any underlying trends, issues or opportunities for the UK’s biggest practices.

Lighthouse measures four key areas and gives sores out of 100 for each.

• 0–49 is poor
• 50–89 is OK
• 90–100 is good

Each score is accompanied by the opportunities and recommendations that can be implemented to help improve the score.

In a nutshell, this is how fast the website is, which is important because, well, people like things fast. Google uses eight performance metrics to determine this score.

Accessibility is fundamental to web design. It is the principle that content on the web should be available to “literally anyone [...] not just the narrow range of the ‘typical’ user”. As Google points out, though “only a subset of accessibility issues can be automatically detected so manual testing is also encouraged”. So a high score here does not necessarily mean you have a truly accessible website.

Google Best Practice checks “highlight opportunities to improve the overall code health of your web app”. They check (among other things) that your website is secure, coded well, avoids depreciated technologies and presents a good user experience.

We say this a lot: there is no magic bullet for appearing high in search engine results pages (SERP). High-quality original content is always the best way to get people looking at your website. There are, though, some basic steps that ensure Google can read and understand your content.

An average of all the above.

This research does not take into account the subjective element of web design. Some people will like your website because they like your architecture, or because of the font you used, or the way you write (or don’t write). It may be a platitude, but we’re all entitled to like what we like. We’re not suggesting that a low score on Lighthouse makes a website bad. It simply means that, from a technical perspective, there are areas for it to improve.

Lighthouse doesn’t tell us what CMS the website uses, either. So for that information, we used whatcms.org.

We also did some checks on keyword ranking to check search engine page results.

We looked at the 2019 AJ100 and our Lighthouse audits were performed on 20 July 2020. Here’s the data on Google Sheets.

Lighthouse gives a score for a single page, rather than a whole website. So to get a better measure of the whole, we audited the homepage of each website and what we felt was a representative internal project page. We took an average of the two-page score to create our own ranking.

We also analysed the individual reports for each site to see what opportunities and recommendations Google suggested could improve the scores.

Another thing to note is that we don’t have a control group. These websites are only measured against themselves. So we can’t say if the architects’ websites are any better or worse than 100 websites picked at random.

Performance is the biggest issue for architects’ websites

Around three-quarters of websites scored OK, but over a quarter scored poorly. And only one practice, EPR Architects, scored highly for performance. Credit where it is due.

We analysed the individual reports to see what was going on.

It’s pretty clear: images are the biggest impediment to high performance.

Google recommends serving next-generation image formats on no less than 76 of the AJ100 websites. Just under half need to size their images correctly, and over a third aren’t encoding them correctly. 28 practices would benefit from deferring loading images until they’re in view.

Google estimated one practice could shave an astonishing 525 seconds — that’s nearly nine minutes — off its total mobile page load time by serving next generation images and encoding them correctly.

Thankfully the websites scored much better on accessibility than on performance.

14% got a high score with only 4% scoring low. Of the low scorers, no single issue stood out. It tends to be multiple smaller errors that collectively reduce the websites’ accessibility score. So the lesson here is that details do matter, especially if you ignore more than a few of them.

SEO scores are good. Almost 50% score highly on SEO and no practices scored low. This doesn’t mean that each practice shows up high in the rankings for the keywords it wants to rank on. It means that, as far as Google can tell, search engines can read and understand the content on the sites.

We ran a Google search to check how highly the websites appeared for the search term “UK architects”. This unsurprisingly favours practices with big-name eponymous founders (Zaha Hadid, Norman Foster and so on) and only 17 AJ100 practices ranked in the first 100 results. That said, it would be highly surprising if the AJ100 correlated closely with the first 100 results for this search term.

High scores here, too with 14% scoring 90+ and all other practices scoring 54 or more (so none scored poorly). Since it doesn’t seem like this area is much of a concern we didn’t investigate any further. You can see from the stepped nature of the graph that Best practices seem to use simpler metrics than the other three areas.

Despite the performance issue, no practices fall into the red overall. Only four score highly, though: Allies and Morrison, Ryder Architecture, Nicholas Hare Architects and Pozzoni Architecture. The last one, Pozzoni, comes with the caveat that something on the site is preventing the accessibility test running (which is embarrassing because we built it — next time we get to work on the site we’ll try to see what the issue is and run the test again). Nicholas Hare Architects was designed and built by us, too. So even if Pozzoni falls down the list we still have bragging rights in the green zone.

We could identify which CMS was used on most websites. WordPress held a 44% share. Craft CMS is second with 14%.

Other CMSs identified were Adobe Muse, Django Framework, SiteCore, Umbraco, ProcessWire, Laravel, Drupal, ExpressionEngine, Adobe Dreamweaver, Business Catalyst, SilverStripe CMS, Gatsby and Squarespace.

When we looked just at the top 25 practices the graph shifts: only 8% use WordPress and 32% use Craft CMS.

We’ve written about our love of Craft CMS before, so it’s great to see it being used by so many top-flight practices.

Big practices don’t necessarily have the best websites

Only one practice, Allies and Morrison, is in the top 10 of the AJ100 (#5) and in the top 10 of Lighthouse rankings (#1 overall, in fact). The next closest is Sheppard Robson at #6 in the AJ100 and #14 on Lighthouse (disclosure: we designed and built Sheppard Robson’s website so we have to give it a shout-out).

There are, however, three practices in the top 10 of the AJ100 that appear in the bottom 10 of lighthouse scores: AHMM, Atkins and Scott Brownrigg.

If it seems mean to name these practices, I reiterate that low lighthouse scores do not denote a bad website. And it may not matter at all to the individual practices how they line up against their peers in this unsolicited comparison. In an industry like architecture, your past portfolio is much more of an indicator of future success than the speed or accessibility of your website.

When business is good, practices can be so focussed on work that it’s hard to see the benefit in spending time and money on the website. But practices like Allies and Morrison, which near the top of the AJ100 and take #1 on our list (with a newly relaunched website courtesy of Base), are clearly in fine fettle and show other practices (and web developers like us) what is possible. Neither of these commanding positions happens by accident; in both cases, it shows they care deeply about the details.

One more special mention goes to Nicholas Hare Architects (designed and built by us) — a practice in the lower reaches of the AJ100 at #91 but rising to #3 in its Lighthouse score: the biggest positive difference of all the websites we measured.

Most practices could improve their website’s performance by making changes to the way images are served

This is the biggest single takeaway for us. Broadly, practices in the AJ100 do well on accessibility, SEO and best practices. There’s room for improvement in most cases, but few score poorly. Performance, though, is evidently a problem, with 25% in the red zone and only one fit for commendation (props again to EPR).

I’d like to evaluate all the reports again, to see how much download time could be saved by the AJ100 as a whole if all practices addressed the image issue in full. If I get time, I’ll do it and update this bit of the article. For now, though, it’s anyone’s guess.

Maybe as practices periodically redevelop their websites and next-generation images become more commonplace, performance will become less of a problem. It will be interesting to revisit this review in a couple of years to see what progress has been made. We would also be interested to see if there’s a correlation between ageing websites and poor scores, but it might be hard to get that data together.

WordPress dominates overall but Craft CMS has the edge in the top quarter of the list

There doesn’t seem to be much correlation with different content management systems and lighthouse scores. Craft sites perform slightly better on average than WordPress ones, but only at 74% to 69% respectively.

Not much of a difference there, but since you asked, we still recommend Craft over WordPress any day of the week. And if you’re in the market for a new website, just shout.

If you’ve made it this far down the page I guess you deserve an answer. So I’m going to put my neck out and say Allies and Morrison has, on the face of it, the best website in the AJ100. It gets the highest Lighthouse score overall, so on a technical level (according to Google), it beats the rest of the pack.

It also stands out for a number of other reasons, like, where’s the logo? Forgoing something as fundamental as that is a bold move. It has been replaced by a search bar that its designers say “invites you to explore their immense hub of knowledge” (a crawl counted almost 300 pages, discounting listings). Other fundamental differences, like the navigation bar that highlights the practices “preoccupations” instead of the usual Projects, Practice, Contact etc show confidence and personality. It’s a fine line to tread, though. Break too many conventions at once and you run the risk of confusing people, rather than engaging them.

The real test of an architect’s website is whether or not it supports the practice’s goals, which is a lot harder to measure than how fast each page loads. And as I said earlier, each practice needs to express itself according to its own criteria. Some people will love Allies and Morrison’s website, but some won’t. That’s the subjective nature of design.

Could we have done better?

This is an even harder question to answer. Allies and Morrison have made some bold decisions and finding consensus for that takes skill, empathy and patience. We like to think we have those qualities. Sometimes things just click. When we collaborate with people that get us, and when we get them, it’s easier to make those big leaps into the unknown. It takes trust on both sides.

We’re technically proficient. But more than that we’re interested in what makes companies special. The trick (if it is a trick) is to look at each project anew. To find a practice’s ‘secret sauce’ and run with it. This is true of all our work — not just our architects’ websites. Each project is an opportunity to build trust, break new ground, make a difference and maybe, do better than we’ve ever done before.