Responsive Website Photo Orientation

[S1:E9] RESPONSIVE WEBSITE PHOTO ORIENTATION: How to use the Rule of Thirds for Beginners & Startups in 2020

Responsive Website Photo Orientation Timestamps

  • [01:00] The Problem
  • [04:15 ] Solution 1: Take the photo with the subject in the center ninth square.
  • [05:50] Solution 2: The quick and dirty fix if the photos are already taken.
  • [07:50] Solution 1: More Information – White Noise
  • [10:02 ] Solution 3: Technical CSS x 2 Photos (Portrait for Mobile Phones and Landscape for Websites)

The Problem

Multiple uses for one asset!

If you think about it carefully…

We look at websites these day in portraite orientation when viewing on mobile devices, in landscape view on desktop regular monitors.

Add to that the photos that you source also need to work as regular sized photos for your websites and social media posts as well as extream landscape in hero bars.

That is a lot of different shapes, sizes and optimisation needs to consider.

The Solution

The Rule of Thirds

When taking photos, ALWAYS always ensure that the subject of the photo is in the very very centre of the photo.

Imagine a naughts and crosses grid across your camera lens. 3 rows of 3 columns (9 squares).

You need the outer-eight squares to be white-noise.

These squares are part of the image but if any one of them was cut out, the subject which lives in the very centre, will still remain in tac.


Mobile Device (Very narrow and tall).

As your website respondes to being viewed on such a device it will reposition the image and will literally hide the entire 1st and 3rd column of the photo (if we followed the rules of thirds above).

Regular Monitor (Very wide and short).

Likewise, your website will respond to displaying the photo to fit the hero bar of your website, but literally hiding the 1st row and 3rd row. Meaning the subject of the photo will remain on screen.

Centre 9th Square

Is the only SAFE ZONE of a photo. Everything else should exist to support the photo being viewed on various different mediums and can potentioally be hidden without the subject of the photo being lost.

The Benefits Gained


Used in the making of this video

Share This: