UPDATE: ideas for stock imagery

[AndyClifton]

Contents

New Features

WIP on #8.

• Adds ideas for new stock imagery. Images refer to potential applications for Twined and Octue and use similar colours as found in the Octue palette (reds, whites, blues).
• Some images in the asset folder are much reduced in size when rendered by Gatsby (i.e., I am not proposing serving 11 MB files)

Breaking changes

No known breaking changes.

Minor fixes and improvements

• Applying appropriate limits to image size and resolution to speed up loading times.

Quality Checklist

• Checked lighthouse report and performance is > 90

Edit: performance report is 84, but it looks like that's not my fault. There are some unused scripts, etc. that could be removed to improve load times.

[gatsby-cloud[bot]]

Gatsby Cloud Build Report

planex-site

:tada: Your build was successful! See the Deploy preview here.

Build Details

View the build logs here.

:clock1: Build time: 2m

Performance

Lighthouse report

Metric	Score
Performance	:large_orange_diamond: 85
Accessibility	:green_heart: 94
Best Practices	:green_heart: 100
SEO	:large_orange_diamond: 71

:link: View full report

[AndyClifton]

Some thoughts for the deployed version:

• [ ] It would probably make sense to pre-process the images to reduce their size. This would reduce the build time. We should do this once the images are finalized.
• [ ] Some images appear full height in the tablet / mobile options. We should provide a max-height CSS property.
• [ ] The 4, gridded images under "Take your work further" all appear on the phone version. We could consider hiding three of them on the phone display for easier reading.

[thclark]

• [ ] It would probably make sense to pre-process the images to reduce their size. This would reduce the build time. We should do this once the images are finalized.

The build time is less than two minutes when they're cached, so I don't think this is a priority. But @AndyClifton I wanted to check you're running yarn start (aka gatsby develop) rather than doing gatsby build during development? I can see how iterating then running a full build would make iteration quite painful?

• [ ] Some images appear full height in the tablet / mobile options. We should provide a max-height CSS property.

Is this minor enough to leave for now until the designs come in late April? If you think it's important enough, can you make an issue showing the problem please?

• [ ] The 4, gridded images under "Take your work further" all appear on the phone version. We could consider hiding three of them on the phone display for easier reading.

Agreed. Maybe make an issue for this? I don't think it's super high priority but it's a good chance for you to use the <Hidden /> api which is a really elegant way of pulling component switcharoos on the breakpoints. You'll find it much less clumsy than CSS modifiers.