Today, the internet is more popular (and more essential to business) than ever. As a result, your website needs to be good - but what “good” means has changed a lot over the years.
These days, we need to look at many areas, from speed, performance and SEO, to user needs and the ability to manage the website effectively. This is why “hard coded“ websites often don’t work anymore. They are slow (bad for users) and don’t allow website owners to easily load new content (whether it’s a blog or ecommerce listings).
Fortunately, technology has come a long way and today, we have plenty to choose from. But first, before we can plan the ultimate website-building approach for 2020 (and beyond), we first need to assess the actual situation…
User Needs vs Website Owner Needs
A website has to do a lot these days. It needs to look good, perform well and be managed easily - but that’s just the tip of the iceberg.
- It must be fast. In this day and age, waiting for loading is a key driver off of your website (especially on mobile).
- They need something that works on numerous devices, whether it’s mobile or desktop. This means responsive designs and the ability to perform on low connections are essential.
- It needs to look good, too - without compromising on the above two points.
For your website team…
- It must meet all of the users’ needs, above.
- It needs to be SEO-friendly - more than just being readable by Googlebot, that means being super web and mobile-friendly from a technical point of view.
- There must be a way to load content without technical assistance (for content teams, for instance) and without compromising on performance.
For example, imagine you are running an ecommerce store. From a user perspective, they need a fast, smooth experience that doesn’t falter when browsing numerous product listings. Your marketing team, likewise, wants the site to be fast and readable for SEO purposes, while those responsible for managing all of the content want an easy and effective way to do it - one that doesn’t require technical assistance.
Of course, we wouldn’t be talking about it if we didn’t have the answer for you!
Why We Use JAMstack
Let’s be honest, we love JAMstack development over here. It’s our go-to method for solving all of the above. It’s fast, it performs well (especially on mobile, so good for SEO) and, when paired with a CDN or, better yet, a headless content management system, your content, marketing and other teams can work as normal!
What is JAMstack?
A techstack built around technologies that work the best on the web, especially for the end user, JAMstack keeps a core focus on web-friendly technology, favoring static generators over completely dynamic content.
As a result, it’s faster and puts less strain on browsers, so it loads much better. It’s also more secure, great for SEO and great for users alike. If you know what you’re doing, it ticks all the boxes.
The Benefits Of Static
Static content doesn’t require a database, so there’s never any heavy searching or requests being sent from the client to the server. In other words, static keeps things blazingly fast.
In short, if you want your site up to 10x faster, ditch the database and go static. The use of a CDN or CMS will replace the need for a database, working alongside your static generator of choice (although we highly recommend Gatsby in your JAMstack).
“But I have dynamic needs!”
JAMstack doesn’t mean everything has to be static, just as much as possible. If you want websites to look good, it’s expected that you might need the occasional dynamic element.
Let’s use Gatsby as an example. It keeps your site as static as possible, but also supports the likes of React and other common frameworks (based on JavaScrip, of course). This, paired with API, means you can also get the dynamism you need, but the static markup will still mean the core of the website is loaded first.
Adding a CMS
We’ve already mentioned that JAMstack development tries to avoid databases as much as possible, but you still often need a CMS or some other way to store and send content to the website.
Fortunately, a headless CMS pairs well with JAMstack - but only if it’s headless. Without the dedicated frontend, we’re free to use our static generators and convert the text - through the likes of markdown - through our own means.
What about Ecommerce?
It’s worth discussing ecommerce because it’s a sector that’s continually growing and, this year, it’s been more important than ever. Fortunately, the same benefits of JAMstack apply here too - ecommerce sites need to be fast, performance and secure.
The biggest challenge with ecommerce is all the media needed to accurately display a website. As always, we stick to the mantra of delivering static content where we can and using dynamic content or pulling media where necessary. This way, we still get a fully functioning web store, but our efforts have gone into optimization without removing the key visual elements that are vital for online shopping.
What about Ecommerce Platforms?
Platforms like Magento and Shopify are designed first and foremost for the commercial operations of a website. You still need to determine development options when it comes to the wider content needs - and if you don’t want to use Shopify included hosting and support, you can still determine your own delivery system.
Nonetheless, a JAMstack approach will keep things as light as possible. Between the markdown and API, client-side strain will be minimal, even with media-enriched pages.
And don’t forget that the best ecommerce sites often use blogs and other pages for marketing purposes, so you’ll still need a means to add and update content.
JAMstack Development for 2020… and beyond
So there you have it, our answer for building a website in today’s competitive age: go JAMstack. It’s fast, it’s good for SEO and it’s easily usable by your entire company, from developers to content teams.
It’s also a great option for future expansion. Not only does it avoid hardcoding as much as possible, as it instead utilizes backend Content Delivery Networks or CMS with markdown, the performance-optimized approach means expansion (whether on-page or through new pages entirely) doesn’t immediately compound the technical issues… because said issues don’t exist in the first place!