Shetland.org | Welcome to the Islands of Opportunity

[nbcommunication 213]

Shetland.org is a website run by Promote Shetland which inspires people to visit Shetland, encourages people to move to Shetland to live, work and study, and attracts people to invest in commercial activities in the isles.

 

 

We (NB Communication) have run the Promote Shetland service on behalf of the Shetland Islands Council since 2017, and as part of the contract undertook a project to redevelop the existing Shetland.org website.

 

In this showcase we’ll highlight a selection of modules we used and what they helped us achieve.

 

Visit the site: www.shetland.org

Pro Modules

ProCache

We use this on almost every site we build. Indispensable. The cache settings used are pretty simple – most templates are set to 1 week, with the entire cache being cleared on save.

 

We use ProCache’s CDN functionality to serve assets from CloudFront via c.shetland.org.

 

We also use the API provided by ProCache to compile (SCSS), minify and collate our styles and scripts via $procache->css() and $procache->js(). We then use the URLs returned to preload the assets, making the site even faster!

 

ProFields: Repeater Matrix 

Again, we use this on almost every site we build. Another must have Pro module.

 

This module allows us to create a really powerful page builder field (we call it ‘blocks’) that handles the majority of the content on the site. 

 

On a simple development, we just use two block types - Content and Images - the latter displaying as a gallery or a slideshow. On this site we have 13 different types, including ‘Quotes’, ‘Video’, ‘Accordion’, and ‘Links’. Additionally many of these are configurable in different ways, and some render in different ways depending on the template and context.

 

Have a look at the links below for some examples:

• https://www.shetland.org/visit/do/outdoors/walk
• https://www.shetland.org/blog/how-shetland-inspires-me-artist-ruth-brownlee
• https://www.shetland.org/life/why/teach-shetland-school

NB Modules

We also used a number of modules we've authored:

 

Instagram Basic Display API 

Used to retrieve the 6 latest images from instagram.com/promoteshetland.

 

 

Markup Content Security Policy

Used to implement a CSP for the site. Currently scoring a C on observatory.mozilla.org – not the best score possible but significantly better than all the other destination marketing websites I tested (all got an F but one which was a D-).

 

Pageimage Srcset

Used throughout to generate and serve images of different sizes via the srcset and sizes attributes. This module is really useful if you are looking to optimise the serving of images to improve page speed times/scores.

 

 

Video markup for YouTube/Vimeo

This module was developed specifically for use on this website, as we wanted more control over the rendering of the oEmbed data. In the example below, the video thumbnail is displayed with a text overlay – when clicked the video (YouTube embed) opens in a lightbox.

 

And a big shout out to…

Page Path History

The previous site was also built by us in ProcessWire, but a number of years ago now. The new site has significant changes to the sitemap, but 1000+ blog posts were also migrated. Instead of an .htaccess file with thousands of 301 redirects, we were able to use the functionality provided by this module to implement redirects where required, and in the case of the blog posts which were migrated via an import script, implement the redirects via the API  - $page->addUrl().

...

The above is just a fragment of the features present on this site, and the development just a part of a much larger project itself. 

We're really proud of what we've achieved, and we couldn't have done it without ProcessWire.

Cheers,

Chris (NB Communication)

 

 

[3fingers 334]

What a project! 🤯

May I ask you some insights?

a. Very clever use of the interactive map https://www.shetland.org/map. How you have managed the interaction between the custom search nav and the map reactivity?
b. On the vacancies page, how you have made a relationship between the url query string and the filter strip?
c. Any insights on you've built the inner search functionality? I'm particularly curious about the ajax refresh 🙂

Last one, I promise:
Could you give us a roughly timespan of the project (design and development phases) and an brief indication of the budget your agency had?

Thanks and thumbs up again! 👍🏻

[nbcommunication 213]

Hi @3fingers,

Both a and c are part of an internal (proprietary) GraphQL API implementation. The short explanation is:

• A GraphQL query is generated from the filters when the form is 'submitted'
• The GraphQL endpoint is queried and returns results
• The result is rendered

b would take an age to explain properly, but basically the query string ends up in sessionStorage (JS) and the filter strip JS checks this to set the active option(s). When the filter options are changed the sessionStorage values change too so that the state is essentially retained throughout the user session.

I can't give you any indication on budget unfortunately. We run the Promote Shetland contract, which is much more than just the website, so the redevelopment project is effectively 'in-house'. Timespan was just short of 6 months (design/development) I think, I wasn't involved in the early stages so can't say exactly when it began, but my involvement as developer started in August and we launched mid-November.

Cheers,

Chris

[Craig 600]

Fantastic site all-round and a great write-up here. Well done on the project, and thanks! 🙂 

[wbmnfktr 1,201]

This gets an A for awesome!

And big thanks for the modules. They look pretty neat as well.