Jump to content

Shetland.org | Welcome to the Islands of Opportunity


nbcommunication
 Share

Recommended Posts

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.

 
shetland-org.thumb.png.8421cdfbf435a4d34bdadc09ae7e180a.png
 
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:

NB Modules

We also used a number of modules we've authored:
 
Used to retrieve the 6 latest images from instagram.com/promoteshetland.
 
shetland-org_instagram.thumb.png.1c24cb0f12a000555fe8ad5a7b3c4296.png
 
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-).
 
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.
 
shetland-org_srcset.thumb.png.81389f6b0f84f668e4eb885480d0ba5a.png
 
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.
 
shetland-org_video.thumb.png.890b1c080033ecd5b70d477186661c17.png

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)

 

 

  • Like 28
  • Thanks 3
Link to comment
Share on other sites

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! ??

  • Like 1
  • Thanks 1
Link to comment
Share on other sites

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

  • Like 4
  • Thanks 1
Link to comment
Share on other sites

  • 2 weeks later...

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! 

  • Like 1
Link to comment
Share on other sites

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

  • Like 1
Link to comment
Share on other sites

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.

  • Thanks 1
Link to comment
Share on other sites

  • 2 weeks later...

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.

  • Like 2
Link to comment
Share on other sites

  • 1 month later...
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.

 
shetland-org.thumb.png.8421cdfbf435a4d34bdadc09ae7e180a.png
 
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:

NB Modules

We also used a number of modules we've authored:
 
Used to retrieve the 6 latest images from instagram.com/promoteshetland.
 
shetland-org_instagram.thumb.png.1c24cb0f12a000555fe8ad5a7b3c4296.png
 
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-).
 
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.
 
shetland-org_srcset.thumb.png.81389f6b0f84f668e4eb885480d0ba5a.png
 
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.
 
shetland-org_video.thumb.png.890b1c080033ecd5b70d477186661c17.png

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  :) 

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...