![\"Screenshot](\"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/11wordpress-amnestyusa.jpg\")
<\/a><\/p>\nThe website redesign that Amnesty International USA<\/a> launched in May 2017 was based on a six-month project that defined a design system to reinforce the branding, which would make it easy to implement on any page of the site using WordPress, Bootstrap 4 and Advanced Custom Fields. <\/p>\n Senior web developer and digital technology manager Daniel Schutzsmith<\/a> explains: \u201cAmnesty already has a Global Identity Toolkit<\/a> that provided the outline for how we should use typography, images, colours, and even content for the new website. We looked to a terrific social impact design studio founded by two refugees out of Brooklyn called Hyperakt<\/a>.\u201d<\/p>\n \u201cAfter months of stakeholder interviews and exercises, they created several different types of modules that we could place on a page to create a unique design. We then developed the WordPress site in-house and focused on bringing this design system to life through the Advanced Custom Fields plugin<\/a> and its Flexible Content field<\/a>. The result is an easy interface in the edit post screen for any user to be able to add, edit, or remove different design modules at will.\u201d<\/p>\n Love for Iceland<\/a> is a unique and very content-heavy tribute to the nordic country, built by Spanish studio Veintid\u00f3s Grados<\/a>.<\/p>\n According to co-founder Vicente Lucendo<\/a> the biggest difficulty was to integrate all the content. The team wanted to add a spin of creativity to the traditional blog structure, while keeping usability in mind, and focused on the navigation to make it easy to use and more app-like. <\/p>\n \u201cWe used the WordPress REST API and developed a front-end application with a custom fields plugin that allowed us to have control of everything,\u201d Vicente explains. \u201cIt was important to be able to show the content immediately, so we developed a preload system in the background that anticipates what can be seen and has all the content ready when the user requests it.\u201d<\/p>\n For the backgrounds, the team used a displacement map made with WebGL, but as that\u2019s bad for performance they had to be very careful with the rest of the animations to prevent janks and FPS drops as much as possible<\/p>\n The site won a very rare FWAWWWARD award<\/a>, only given to those sites that manage to win an Awwward<\/a> and an FWA award<\/a> on the same day.<\/p>\n Toilet Twinning<\/a> is a water and sanitation initiative, run by Tearfund<\/a> and Cord<\/a>, with a novel approach to fundraising: you donate \u00a360 and get a certificate of a latrine in a developing nation with which you \u2018twin\u2019 your own. <\/p>\n The main website is based on WordPress with version 5 of the Advanced Custom Fields plugin<\/a>. Joe Lambert<\/a>, director of Rareloop<\/a>, says they chose it because of the amount of control they can give to content editors. <\/p>\n The customised setup also relies on a couple of open-source frameworks to help make the site more secure and maintainable: <\/p>\n Bedrock<\/a>: provides proper dependency management of third party packages and plugins via PHP\u2019s Composer<\/a>.<\/p>\n Timber<\/a>: provides access to the powerful Twig templating language, so you can separate view and controller code.<\/p>\n Joe Lambert explains: \u201cWe also now build all our sites using an open source pattern library we created called Primer<\/a>. This enables us to build and test all components of the front-end of the site in isolation without having to worry about where the data that powers it comes from. We\u2019ve found this componentised approach to front-end code has really helped us to build out re-useable \u2018design systems\u2019 rather than a series of hard to change templates. Our WordPress setup integrates with Primer, so that the same Twig templates are used between the two. This makes iterative changes much easier to manage and allows for the pattern library to be a living document post launch.\u201d<\/p>\n Stories for Good<\/a> is an independent online publication that features films, photography and articles about important issues around the world. <\/p>\n It\u2019s one of designer Christopher Dowson<\/a>\u2019s favourite sites of the year. \u201cI’m always excited by seeing a simple idea that has been really well executed, and Stories for Good just ticks all the right boxes for me,\u201d he explains.<\/p>\n \u201cThere can be a temptation with WordPress to over-design a theme. After all, there are so many bells, whistles and widgets available that it’s easy to shoehorn in a lot of functionality and then attempt to find a use for it later. This site has clearly been designed away from the CMS, with WordPress’s inherently flexible feature set easily integrated to create a fast and powerful experience for users.\u201d<\/p>\n Chris also highlights security concerns. As the most popular CMS, WordPress is also the most targeted but any indication that Stories for Good is based on WordPress has been carefully and cleverly concealed. This will keep it safe from even the most determined of would-be attackers.<\/p>\n The official website of the Art Institute at the Academy of Art and Design in Basel, Switzerland<\/a>, focuses on what it wants to teach: art. <\/p>\n It follows an uncompromising movement that rejects mainstream web trends, called \u2018web brutalism\u2019, named after architecture characterised by simple, block-like forms and raw concrete construction, which flourished in the 1950s and 1960s. The term was coined by Pascal Deville, co-founder and creative director of Freundliche Gr\u00fcsse<\/a>, a full-service creative agency based in Z\u00fcrich and Berlin.<\/p>\n In an interview on his site brutalistwebsites.com<\/a>, the art institute\u2019s director Chus Martinez explains that they chose a brutalist design \u201cbecause it defeats corporate visual standards, and it really suits the purpose of leaving a memory behind.\u201d<\/p>\n The site was designed and coded by Dan Solbach<\/a> and Esther Hunziger<\/a>, artist and teacher at the art institute. <\/p>\n Web development and strategy agency 10up<\/a> partnered with Stanford eCorner<\/a> (as part of the Stanford Technology Ventures Program) to redesign their website, and migrate its content and users to WordPress, with audio and video files hosted on Kaltura<\/a>.<\/p>\n \u201ceCorner\u2019s mission is to educate the masses about entrepreneurism \u2014 that it’s not just for engineering or business students but for all,\u201d explains 10up\u2019s senior web strategist Ruth Rosengren<\/a>. \u201cThe challenge for our team was two-fold: First, strategically, how to organise the content in a more meaningful and categorial way (they previously organised by type, for example, video, podcast, or article) that’s also easily digestible, and second, integrate their media with Kaltura and Rev<\/a> for hosting and transcription.\u201d<\/p>\n The site utilises a number of post types and also allows visitors to register in order to save collections of content for later consumption. <\/p>\n Keith Brymer Jones is a British potter and ceramic designer as well as a judge on the BBC\u2019s The Great Pottery Throw Down. He\u2019s also the director and head of design for designer ceramics and homeware store MAKE international<\/a>. The company ended up running five separate ecommerce sites, and one of the major drawbacks was that the inventory had to be regularly and manually updated to avoid stock levels falling out of synch with the other sales channels \u2014 a labour-intensive process that was prone to human error.<\/p>\n Web consultancy Narrative Industries<\/a> chose omnichannel retail management system Brightpearl<\/a>, which comes with a built-in CRM, accounting and a powerful API, but found that the WooCommerce plugin that\u2019s available for Brightpearl fell short of their ambitions.<\/p>\n Founder and digital strategist Alec East<\/a> explains: \u201cWe built our own Brightpearl connector that can handle real-time inventory across multiple sales channels, but also takes advantage of the multi-currency, retail and wholesale, customer specific pricing, multi-lingual support, and a host of other enterprise level features that Brightpearl offers but the standard plugin doesn\u2019t support. We wrapped it all in an elegant queuing system for those times when connections break, to improve reliability.\u201d<\/p>\n MAKE now has just two sites: one for Keith Brymer Jones<\/a> and one for the multi-brand. Since the launch in August, conversion rates across both sites have doubled, the bounce rate is down from around 37% to just 2%, and average order value is up. <\/p>\n Build in Amsterdam<\/a>, who won the awwwards ecommerce site of the year 2016<\/a> for Protest Sportswear<\/a>, have created an ecommerce experience for Mendo<\/a>, \u201ca candy store for book aficionados\u201d.<\/p>\n Back-end and front-end technologies of the site include WordPress, WooCommerce and Backbone plus Marionette<\/a>. The site features a custom search function and a smart algorithm for book suggestions. If you click on the button \u201c+ how big is this\u201d, you can compare the book with a pair of glasses, a charger or even a pizza slice. There\u2019s also a homemade responsive lazy-loading, parallax and animation set. <\/p>\n Since Mendo launched the new site, its sales have increased by 70%. <\/p>\n The online shop for Danish chocolate brand Simply Chocolate<\/a> is made on a base of WordPress and WooCommerce and \u2014 on the front-end \u2014 out of 99% of JavaScript, using Pixi.js, React and Redux. <\/p>\n Pelle Martin<\/a>, founder and creative director of independent digital product and brand experience company Spring\/Summer<\/a> explains: \u201cIt has a few restrictions but we made a big effort in making it feel and seem integrated throughout. The checkout actually is a separate setup. The concept is tied together when you finish your checkout, and you get a little message from one of the bars that you have just purchased.\u201d<\/p>\n The site also makes use of a few plugins and a tool called Texpack<\/a>, which Pelle says they compiled on their Digital Ocean droplet to generate spritesheets, all of which are then compressed using Pngquant<\/a>, an image optimisation tool for the lossy compression of PNG images.<\/p>\n The StoryCorps Archive<\/a> comprises one of the largest digital collections of human voices. Their private interview database was on Drupal, while the mobile app used WordPress and PhoneGap. <\/p>\n 10up worked with StoryCorps to write a grant application to secure the funding to combine both platforms and built a new site, together with the in-house development team. <\/p>\n \u201cThe archive is a public facing site that utilises a customised REST API to connect to the mobile app and store interviews recorded by users directly to the new combined database,\u201d Jay Moore<\/a>, senior web strategist at 10up, explains. \u201cLeveraging the power of Elasticsearch<\/a> and ElasticPress<\/a> (10up\u2019s search and query engine for WordPress) to expand the capabilities of WordPress, the new product makes navigating the more than 100,000 interviews intuitive, and efficient for research.\u201d<\/p>\n Built using WordPress and WooCommerce, Olivine Life<\/a> is an online interior design service. The key feature is the ability to design your own room by adding fabrics and furniture to your board. You can then either get in touch with the interior designers behind the site for a consultation or simply buy everything from your board.<\/p>\n Kirsty Burgoine<\/a>, lead front-end developer at Fisheye<\/a>, who built the site, says that setting up the products was a big challenge and required quite a lot of customisation.<\/p>\n \u201cThere needed to be an option to buy a cutting or to order a certain amount of metres of the fabric,\u201d she explains. \u201cHigh value items like sofas needed links to external sites, where you could buy them, as the interior designers couldn’t keep everything in their own warehouse. In order to create these options, the site used a number of WooCommerce product extensions like Composite Products<\/a> and Product Bundles<\/a>. It also used a very customised version of a wishlist facility to allow the ability to create your own boards.\u201d<\/p>\n <\/p>\n What were your favourite WordPress sites of the year? Let us know in the comments below. <\/p>\n","protected":false},"excerpt":{"rendered":" Nearly 30% of the world’s websites run on WordPress. As web developers continue to innovate on the platform, we wanted to present a roundup of some of the best sites, running on WordPress, that launched or relaunched this year, and get into how they were created.<\/p>\n","protected":false},"author":2,"featured_media":17557,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12,24,27],"tags":[],"class_list":{"0":"post-17539","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-guest-posts","8":"category-web-design","9":"category-wordpress"},"yoast_head":"\nLove for Iceland<\/h3>\n
![\"Screenshot](\"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/11wordpress-loveforiceland.jpg\")
<\/a><\/p>\nToilet Twinning<\/h3>\n
![\"Screenshot](\"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/11wordpress-toilettwinning.jpg\")
<\/a><\/p>\nStories for Good<\/h3>\n
![\"Screenshot](\"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/11wordpress-storiesforgood.jpg\")
<\/a><\/p>\nInstitut Kunst<\/h3>\n
![\"Screenshot](\"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/11wordpress-institutkunst.jpg\")
<\/a><\/p>\nStanford eCorner<\/h3>\n
![\"Screenshot](\"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/11wordpress-stanfordecorner.jpg\")
<\/a><\/p>\nMAKE International<\/h3>\n
![\"Screenshot](\"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/11wordpress-makeinternational.jpg\")
<\/a><\/p>\nMendo<\/h3>\n
![\"Screenshot](\"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/11wordpress-mendo.jpg\")
<\/a><\/p>\nSimply Chocolate<\/h3>\n
![\"Screenshot](\"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/11wordpress-simplychocolate.jpg\")
<\/a><\/p>\nStoryCorps Archive<\/h3>\n
![\"Screenshot](\"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/11wordpress-storycorps.jpg\")
<\/a><\/p>\nOlivine Life<\/h3>\n
![\"Screenshot](\"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/11wordpress-olivinelife.jpg\")
<\/a><\/p>\n