Design study · Sidetrack journalThe best oil and gas websites, and what makes them work

How we studied these websites

We inspected nine company homepages in a live browser: BP, ADNOC, Equinor, SLB, NOV, Shell, Halliburton, ADNOC Drilling and XRG, plus two deeper equipment pages from SLB and NOV. That is nine websites and eleven page studies. Desktop captures used a 1440 by 1000 viewport and mobile captures used 390 by 844. Each page was recorded at its opening, roughly one screen farther down, and again on a phone.

This is a design assessment, not a ranking, and we have not put the companies in an order. We had no access to their analytics, conversion data, budgets or accessibility audits, so where we say something works we mean it works for a reader, in our judgement as designers. These sites also change continuously. Everything below describes the state we recorded on 8 September 2026.

• Does the opening screen explain what the company actually does?
• Does the reading order survive the move to a phone?
• Do the images do a job, or do they fill space?
• Can a buyer reach the relevant capability without reading a company history?
• Does the identity continue past the hero into type, products and interaction?

BP makes the work understandable

A bright aviation refuelling scene puts a person, the equipment and the purpose of the work into a single frame. A floating light navigation bar sits above it and the main reading area sits below the photograph, so the copy never fights the image for attention. On a phone the sequence of image, then headline, then action is preserved rather than compressed.

The transferable idea is the connection between the work and its consequence. A photograph of a machine tells you a company owns a machine. A photograph of someone using it, for a visible purpose, tells you what the company does. The rotating campaign area and the corporate audience breadth are BP problems, not yours.

Observed on the BP homepage

ADNOC art directs one idea

The opening campaign combines several parts of the energy value chain into a single composed image, carried by very large type, one yellow action and a preview of the next story. Further down, technology is introduced through film and people rather than through adjectives.

What is worth taking is the discipline of making a visual argument about the company's role, and committing to it. Most energy websites put up an image that could belong to any company in the sector. The expensive part of ADNOC is the production. The valuable part is the decision about what the picture is supposed to say.

Observed on the ADNOC homepage

Equinor lets a real place carry the authority

A panoramic offshore photograph is identified with its location and a credit. The headline and supporting text then move onto a calm white reading surface. The typography is generous and mostly regular in weight, with no attempt to look rugged.

This is the clearest evidence that industrial work does not need a distressed or aggressive interface. Specific photography and confident spacing establish seriousness on their own. The long corporate prose that follows is less useful as a model, because a smaller company's main page has to sell rather than report.

Observed on the Equinor homepage

SLB makes engineering part of the identity

A strong blue identity, a distinctive typeface and a playing hero film tie people and technology together. Large statements then transition into business priorities and image led capability content, and the visual system holds all the way through.

The lesson is that an identity has to continue past the hero. Typography, image treatment, product presentation and interaction should feel like they belong to the same company. A great opening screen followed by generic content is the most common way a website loses the impression it just created.

Observed on the SLB homepage

NOV keeps atmosphere and a route inward

A vessel film establishes industrial scale beneath bold type, and a search and topic strip leads directly toward a broad product and service catalogue. Below that, separate photographs show different aspects of capability rather than repeating the hero.

This answers a question smaller companies ask constantly: can a website look impressive and still be useful? It can, as long as the route to the equipment and applications stays direct. The weaker part of the page is the generic promise to power industry, which would sound the same coming from any supplier.

Observed on the NOV homepage

Shell and Halliburton organise around the reader

Shell runs a contained photographic lead story with clear cards and familiar yellow actions, producing a legible editorial site. On a phone the hero copy moves below the image, which keeps the headline readable instead of laying it over a busy crop.

Halliburton opens with a playing film of people in working environments, using light type and a red framing device, and its navigation follows the stages of well activity. That navigation is the most transferable idea of the two. Organising around the customer's work beats organising around your internal departments. What is less useful in both cases is the density, and the generic values language that competes for space with the actual capability.

Observed on the Halliburton homepage

Two equipment pages, two different lessons

SLB pairs a substantial wellhead render with a clear category title and a plain statement of what the product is for. Specification documents, contact and related resources are prominent, and application routes and deeper information follow in order. It is a good model for how a product page should be built.

The NOV Hercules page supplies everything a buyer needs on paper: configurations, features, benefits, applications and resources. Its opening, though, leaves a small isolated product render floating in a large white area. The information structure is strong and the composition is weak, which is a useful reminder that these are two separate problems. A major supplier can still publish a page that falls below its own standard.

Observed on the Cameron wellhead systems page

XRG shows a simple system can still be distinctive

A large wordmark, a distinctive rounded typeface, blue and yellow, broad photography and a recurring directional mark add up to a recognisable system without any elaborate technique. Consistency across the page does the work.

One caution came out of the same capture. The mobile crop loses much of the human subject that makes the desktop image work. An impressive wide photograph does not automatically survive a phone, and the crop has to be composed rather than inherited.

Observed on the XRG homepage

What the strongest examples have in common

Across all nine, the sites we judged strongest shared a small number of decisions. None of them are expensive on their own.

• The opening screen shows the work being done, not the industry in general.
• One idea is art directed properly, instead of five images competing for the same job.
• The reading order survives the move to a phone, because the mobile layout was composed rather than compressed.
• Images have distinct jobs: wide context, people at work, product detail, and documented evidence.
• The identity continues past the hero into typography, product presentation and interaction.
• A buyer can reach the relevant capability without first reading a company history.

What a smaller company should take from this

You are not competing with these budgets and you do not need to. Most of what makes these sites work is decision making rather than expenditure. The decision about what the opening image is supposed to say costs nothing. Composing the mobile layout separately costs a little care. Organising navigation around the customer's work rather than your internal structure costs a conversation.

The pattern we see most often on smaller energy websites is the opposite of everything above: one industrial photograph carrying the entire design, a paragraph of company history, a grid of interchangeable service boxes, and a contact button at the bottom. Better typography and a newer photograph do not fix that, because the problem is structural. The page never makes a specific argument about this particular business.

If you change one thing, make it the opening. Write a single sentence describing what your first screen has to prove, then judge the image, the headline and the first action against it. If that sentence would read the same for a hauler, a machine shop and a consultancy, it is not specific enough yet.

What we could not assess

Aramco and TechnipFMC returned readable official text through web retrieval but failed visual access in our browser, and Baker Hughes returned an access denied page. We recorded all three as limitations rather than assessing them. No security restriction was bypassed.

We had no analytics, conversion data, production budgets, performance scores or independent accessibility certification for any site in the study, so nothing here should be read as a commercial result. Mobile captures are browser emulation rather than physical device testing. Websites change, and these observations describe September 2026.