Five things we learned building Elegant Seagulls 2017
When we first started thinking about a new website relaunch in early 2017, the decision to use WordPress felt natural. It’s been our go-to CMS for more than 10 years.
But when Ben Johnson, our creative director, made the decision to challenge the status quo of Seagulls’ design, our development team felt it was only appropriate to incorporate that same challenge into the build.
No risk, no reward, right?
So we switched it up. As our first project using React and a headless CMS, this build wasn’t easy, but we’re pretty proud of the final product.
Headless CMS makes life easier
This was our first time using Contentful and a headless CMS. Contentful, which is specifically designed for management of interactive and multichannel content, describes a headless CMS as traditional (ish) CMS without the front-end.
“Because of its backend-only nature, a headless CMS does not care about how content gets displayed to the end user. A headless CMS stores and delivers content — nothing more.”
One of the most challenging aspects of working with WordPress is syncing the database between members of our development team. With a headless CMS, all of the content is stored on our provider’s server. Additionally, Wordpress is php only — most headless CMSs are language agnostic.
Working within the confines of WordPress can sometimes be a pain. No more resetting post data because of the need to pull in two different post types on the same page. With a headless CMS, we can change the structure of our API call and we’re in business.
Netlify is awesome
There are plenty of arguments both for and against client-side rendering/server-side rendering. We chose the client-side option and used Netlify as our host. Netlify was a brilliant option suggested by one of our developers, and now we can’t imagine life without it.
Generally, client-side rendered applications have poor SEO because google doesn’t crawl client-side javascript. Netlify offers pre-rendering, which according to Netlify works like this:
“When a request hits one of our CDN servers, our CDN software determines if it’s a prerendering request from a crawler. If prerendering is enabled for your site, our cache servers will contact the prerendering backend straight from our CDN nodes instead of serving the normal cached request.”
With Netlify’s prerendering we’re able to successfully get link previews in slack/social media and appear in google search results.
Image CDN is a must
One of the reasons we chose Contentful is because it comes with an image CDN (Content Delivery Network). Using a CDN should make the site faster because most have built-in tools to compress images, and reduce the amount of requests hitting our server so we can load more content faster. They can also increase site performance while making things easier for our developers, giving them the ability to crop and serve scaled images based on screen size and art direction.
But they’re also great for client solutions, as well. Image CDNs give clients the flexibility to upload images without having to worry about optimizing them.
Styled Components are…
According to Max Stoiber, a maintainer, of Styled Components,
“styled-components forces styles to be bound components. That way you avoid the global namespace of CSS classes and have the full power of JavaScript at your disposal to make your app look great”
Styled Components are great, and some of our team members have used them in personal projects with great success. However, we’re not sure they were the right decision for this project. There were a lot of one-off styles, so many of our components were only used once, which isn’t super efficient.
One of the most complicated portions of this build was the team section. In short, each person was built with a component, which was used on both the Home and About pages. The styling was based on each individual’s position which means they needed to be styled with props received from their parent. Figuring out how to use `nth-of-type` was a bit of a struggle because of how the components were nested.
Would we use them again? It depends on project fit. With styled components it’s really easy to style components based on data received from an API call or any other props received from parents.
Javascript
At Seagulls, we’re always looking to improve our JavaScript skills, so building an entire site in JavaScript provided some great practice. The React eco-system helped (forced) us to become more familiar with ES6, Babel, Webpack, API calls, Express, and obviously React.
Go check us out!
This project has been a labor of love for our team, all that time and effort has left us feeling pretty proud. We’re always looking for ways to improve efficiency, while providing the best possible product for our clients; now we’ve got a few new tricks up our sleeves. Be sure to stop by our site and say hi. We’d love to hear from you!
