Shetland.org | Welcome to the Islands of Opportunity

[nbcommunication 246]

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 376]

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 246]

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 615]

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

[wbmnfktr 1,268]

This gets an A for awesome!

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

[elabx 914]

What a great looking website! Everything looks/feels on spot! And Shetland does look awesome too haha.

PageimageSrcst is in all my installs from the moment it releases. Can't thank enough for that module!

[wbmnfktr 1,268]

7 hours ago, elabx said:

Shetland does look awesome

I'd like to buy a shed there... right next to the coast or at least a lake or something... this would be even more than awesome.

Offers are welcome and can be made through my public profile. :)

[Marco Ro 93]

Hi @nbcommunication, I like a lot your project and thank you for sharing your experience. 
Could I ask you few questions?

• I really like your map, I haven't been able to figure out what you used to create the map! what did you use?
• Why you use Google Analytics and also Matomo?  Shouldn't Matomo replace what analytics does? 

Thanks! 

[nbcommunication 246]

Hi @Marco Ro,

The map uses LeafletJS with two layers, OS Maps (UK only) for the road map, and Mapbox for the satellite.

For analytics, we're still experimenting with explicit consent. Matomo has a cookie-less option so theoretically we're able to record every site visit using it, but can only record those that have consented using GA. I really hope Google figure out a cookie-less analytics implementation soon, it is an absolute nuisance!

Cheers,

Chris

[LostKobrakai 5,221]

5 minutes ago, nbcommunication said:

For analytics, we're still experimenting with explicit consent. Matomo has a cookie-less option so theoretically we're able to record every site visit using it, but can only record those that have consented using GA. I really hope Google figure out a cookie-less analytics implementation soon, it is an absolute nuisance!

I moved to plausible analytics starting this year. Even a cookie-less option for google analytics might not solve the issue given google will likely continue to use the tracked data for own purposes, which affects the classification by the gdpr beyond just the tech. boundries of cookies.

[jacmaes 255]

CloudFlare has just launched a privacy-respecting analytics solution that is basic but free:

https://www.cloudflare.com/web-analytics/

Great site, congrats!

[Kiwi Chris 296]

Nice clean site. Although I'm on the other side of the world, I remember seeing Shetland calendars and other things most years, because in the pre-internet days Mum made a pen-friend connection with a Shetland woman with the same first name as her. I believe the two were put in contact by a publication run by Enid Blyton - yes The Enid Blyton of Famous Five fame.

Mum's never been to Shetland nor has her pen friend ever been to New Zealand, but in our family we've always had this kind of long distance connection. I have an idea that my brother's mother-in-law actually has relatives from Shetland, so the connection there is even stronger.

[nbcommunication 246]

Hi @Kiwi Chris,

There's a lot of Shetland-New Zealand connections! I've an uncle that lives there (in Christchurch I think), and other aunties and uncles have been over to visit. One of our project managers travelled around NZ a few years back too!

Cheers,

Chris

[tires 31]

Great Website!!!

It needs to be listed in the processwire-showcase https://processwire.com/sites/

Edited February 11 by tires
It is still in the showcase!

[JeevanisM 81]

On 1/13/2021 at 12:20 PM, nbcommunication said:

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)

 

 

Such an amazing website, makes me find a job there and move into Shetland !  :)  Please let me know if any openings for a PHP/Processwire Dev in Shetland  :)