Leeds Baby Bank (charity)

Bloke · 2020-05-30 00:17:28

Took this one on recently to keep me entertained while nothing much is happening. They had a WordPress site that someone set up and then left, and none of the staff at the charity could fathom how to update the content. After getting a login, I could understand why. It was an utter mess back there. Slow and illogical on the admin side, and the front-end took anywhere between 3 and 7 seconds to load the front page!

Although it was responsive (of sorts), it had a pagespeed score of low-20s for mobile and mid-50s for desktop. On top of that, content was badly organised, the menu was haphazard and there were, somewhat confusingly, two pages for donations and three pages for fundraising.

Anyway, I cloned their content, keeping the design much the same as they had it but smartening it up across devices. Shuffled content around a bit, and made stuff more manageable long term.

Features:

Super duper, clean and simple page structure. Just three pages:
- default for the front page
- regular for the blog, when they write them
- one-page for ‘static’ content, which is most of the site
Rocket-fuelled (96 pagespeed on mobile, 100 on desktop. Pingdom gives it an A/96 rating).
FAQs are individual articles collected together on the /faqs landing page.
Supporters and funders on the /fundraising page are all Content->Links for ease of management.
Per-section banners (such as the ones in place now for COVID) are handled by sticky articles. Change the sticky content to alter the banner or set it Hidden to remove the banner for that section. The front page banner is in a dedicated article in a pageless “snippets” section. Assign category1 as one of three categories under the ‘Alert status’ parent to set the class that dictates the severity of each banner.
The original site used fontawesome – the entire stack loaded from CDN, despite only using 9 icons in the site. After a tip-off from Julian, I used icomoon to create a .woff file of just those icons and loaded it locally instead from the stylesheet.
I’ve cached most of the static content but not compressed the CSS yet, and pagespeed whines about non-optimal images. I also haven’t tested the @2x retina logo due to lack of retina devices in my household. Hope it works.
Banner images are all from unsplash or pixabay.
Plugins in use:
- smd_redirect to mop up some of the old URLs.
- com_article_image.
- smd_textile_bar.
- smd_where_used.

Hope it works okay across devices. Any issues, please let me know.

leedsbabybank.org/

bici · 2020-05-30 03:16:38

Bloke wrote #323426:

Took this one on recently to keep me entertained while nothing much is happening. They had a WordPress site that someone set up and then left, and none of the staff at the charity could fathom how to update the content.
Hope it works okay across devices. Any issues, please let me know.

leedsbabybank.org/

You are good man Gunga Din!
It looks great and very fast on my end.

KUDOS! You killed two birds with one website: Damn WP and you have given them a very responsive site!

jakob · 2020-05-30 04:54:20

It’s looking good and a big improvement :-) The retina logo works fine too, and its efficient too – also in its use of plugins. I like your idea of the traffic-light banner status.

Are the FAQ articles the new pageless type?

colak · 2020-05-30 05:31:31

Looks pixel perfect from my end!

Bloke · 2020-05-30 07:03:51

Thanks guys. Glad it works well, and pleased the retina logo is okay.

The FAQ articles are individually available via the URL. There’s one linked from the ‘referral’ text block on the home page. After discussion with them, they were finding that a lot of their time was spent fielding calls from people who asked the same stuff so making the articles directly accessible and pulling one or two links onto the home page seemed like a good search engine move.

Last edited by Bloke (2020-05-30 10:21:42)

zero · 2020-05-30 07:35:16

Great stuff!

singaz · 2020-05-30 13:04:12

It works fast. I like!

On the page: https://leedsbabybank.org/blog/

there are two closing tags </a>:

<a rel="bookmark" href="https://leedsbabybank.org/blog/baby-bank-ball-september-2019" class="read-more">Read more…</a></a>

Bloke · 2020-05-30 13:14:05

singaz wrote #323437:

there are two closing tags </a>

Oooh, great catch, thanks. I’d forgotten I’d wrapped the entire article block in an anchor, and left the individual permlink anchor around the Read More… link. Fixed now, thank you.

EDIT: I have the usual issue with that /blog landing page. The variable nature of the image sizes means the excerpts are often way smaller than the floated image, which ‘sticks out’ beyond its wrapper. Once they get a few more posts in there, I’ll tweak the page to maybe use flexbox or something more gridish.

Last edited by Bloke (2020-05-30 13:17:55)

bici · 2020-05-30 15:39:00

jakob wrote #323429:

It’s looking good and a big improvement :-) The retina logo works fine too, and its efficient too –

Until now i was not aware of the Retina Logo
thanks!

Last edited by bici (2020-05-30 15:39:24)

Bloke · 2020-05-30 15:53:50

bici wrote #323439:

Until now i was not aware of the Retina Logo

Yeah, it was only because they supplied me with a logo that was at 144dpi I decided to use that as the @2x version, then convert it down to 72dpi for regular screens.

I then just found someone that suggested an appropriate media query was:

.site-logo {
  background-image: url('/images/logo.jpg');
  width: 150px;
  height: 150px;
}
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
  .site-logo {
    background-image: url('/images/logo@2x.jpg');
    background-size: 150px 150px;
  }
}

Not sure if the -webkit prefix rule is required any more. And I don’t profess to understand why they use background-size on the retina image and regular width and height on the standard one. But apparently, it works.

phiw13 · 2020-05-31 00:36:15

Bloke wrote #323440:

I then just found someone that suggested an appropriate media query was:

even slightly better

@media print,  (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {}

Not sure if the -webkit prefix rule is required any more.

Yes it is needed for Safari.

And I don’t profess to understand why they use background-size on the retina image and regular width and height on the standard one. But apparently, it works.

the width / height is used for both resolutions – it sizes the box that contains the image. the background-size is used on the retina image else the image would be twice the size of the box. that is how screens work.

Bloke · 2020-05-31 08:52:30

phiw13 wrote #323441:

even slightly better

Thank you for the edit. Applied. And thanks for the insight on the background image thing. It makes total sense when you explain it that way.

Textpattern CMS

Textpattern CMS support forum

#1 2020-05-30 00:17:28