nbcommunication Posted January 13, 2021 Share Posted January 13, 2021 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) 28 3 Link to comment Share on other sites More sharing options...
3fingers Posted January 13, 2021 Share Posted January 13, 2021 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! ?? 1 1 Link to comment Share on other sites More sharing options...
nbcommunication Posted January 13, 2021 Author Share Posted January 13, 2021 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 4 1 Link to comment Share on other sites More sharing options...
Craig Posted January 13, 2021 Share Posted January 13, 2021 Fantastic site all-round and a great write-up here. Well done on the project, and thanks! ? 1 1 Link to comment Share on other sites More sharing options...
wbmnfktr Posted January 13, 2021 Share Posted January 13, 2021 This gets an A for awesome! And big thanks for the modules. They look pretty neat as well. 2 1 Link to comment Share on other sites More sharing options...
elabx Posted January 22, 2021 Share Posted January 22, 2021 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! 2 Link to comment Share on other sites More sharing options...
wbmnfktr Posted January 23, 2021 Share Posted January 23, 2021 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. :) 2 Link to comment Share on other sites More sharing options...
Marco Ro Posted January 25, 2021 Share Posted January 25, 2021 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! 1 Link to comment Share on other sites More sharing options...
nbcommunication Posted January 25, 2021 Author Share Posted January 25, 2021 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 1 Link to comment Share on other sites More sharing options...
LostKobrakai Posted January 25, 2021 Share Posted January 25, 2021 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. 1 Link to comment Share on other sites More sharing options...
jacmaes Posted January 25, 2021 Share Posted January 25, 2021 CloudFlare has just launched a privacy-respecting analytics solution that is basic but free: https://www.cloudflare.com/web-analytics/ Great site, congrats! 1 Link to comment Share on other sites More sharing options...
Kiwi Chris Posted February 5, 2021 Share Posted February 5, 2021 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. 2 Link to comment Share on other sites More sharing options...
nbcommunication Posted February 5, 2021 Author Share Posted February 5, 2021 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 Link to comment Share on other sites More sharing options...
tires Posted February 11, 2021 Share Posted February 11, 2021 (edited) Great Website!!! It needs to be listed in the processwire-showcase https://processwire.com/sites/ Edited February 11, 2021 by tires It is still in the showcase! 1 Link to comment Share on other sites More sharing options...
JeevanisM Posted March 18, 2021 Share Posted March 18, 2021 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 :) 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now