Blog

Web Trends for 2021

Web Trends for 2021

For the last couple of years, the web scene has been moving like crazy. It seemed like everything was new. As soon as you got the hang of the new, there was a ‘new’ new. New “best practices”, new methodologies, and new tech platforms.

This was great for someone who loves to constantly learn. But it was challenging for companies trying to pick the best route forward with their website or application.

  • Should they stick with the tried and well documented?
  • Or choose a newer platform for a competitive advantage in technology and talent?

Thankfully, over the last year, we began to see some relative stabilization in the tech world… even if the rest of the world seemed to be going coo-coo bananas.

Marketing Sites

Through content, imagery, and videos, a marketing site represents and validates a brand, product, or intellectual property on the web.

WordPress – Still the Biggest CMS on the Planet

WordPress

The majority of the web is still running on WordPress (as much as 30%). The huge user base and existing plugin system, makes it awesome from the perspective of “Hey can we add this feature to our site?”.

WordPress’s easy-to-use backend and extensibility make it a good choice for most if not all businesses looking to create a marketing presence or small to mid-sized eCommerce site.

There are very few unique features that your business has that don’t already exist via a free or premium plugin. Modal popups, eCommerce, member restricted content, advanced form builders… yeah it has all that.

The trade-off with a WordPress site is cost, site speed, and security.

Cost – A well-built and maintained WordPress site is going to be more expensive than a site builder.

Speed – Even on robust hosting with advanced caching and properly sized content, it will not be as fast as a static generated site.

Security – The fact that it has such a large install base makes it an ongoing target for the spammers of the world.

Site Builders – Squarespace, Webflow…

Webflow and Squarespace

Fast to market and relatively inexpensive. Those are the primary factors for choosing to use the site builder route. You choose an available template, modify it to meet your branding and communication goals, and away you go.

The reasons for not choosing a site builder typically arise when you need your site to do something that isn’t included in the box.

  • Do you want to add a new exit intent modal?
  • Do you want to create a multistep client onboarding form?
  • Or maybe integrate your new CRM?

If your site builder doesn’t offer it, you are out-of-luck.

One other key thing to mention is search engine performance. If SEO is a big factor in your online success, you need to choose your site builder wisely. They aren’t all created equal. Wix sites have been historically terrible at search engine performance and optimization efforts.

Static Site Generators – Gatsby, Gridsome, Hugo …

Gatsby, Gridsome, and Hugo

Static sites continue to grow in their popularity in select niches. They are typically wicked-light in bandwidth and fast loading. Letting you crush those speed performance tests from Google.

A static site is fast because it is just HTML, optimized images, and compressed CSS and javascript. All of which can be served from content delivery networks (CDNs).

Static sites are compressed, cached, and served from servers that are physically closer to their visitors. The data has less distance to travel, making a faster browsing experience.

This means that your site will be as fast as possible, regardless of where you are in the world.

And because the site is highly compressed it is much friendlier to areas of the world where bandwidth and data costs are at a premium.

It isn’t all upside with static sites though. The downside comes in complexity, publishing time, and cost.

Complexity of Static Sites – a static site generator requires either physical files or a headless content management system that it can connect to. When content is created or modified, the site needs to be rebuilt and uploaded to the appropriate servers. The rebuild process adds “complexity” when compared to the traditional dynamic database generated site.

Publishing Time of Static Sites – if you are accustomed to simply publishing an article or minor change on a WordPress site… a static site isn’t that. As noted earlier, each time you create or edit content the site is rebuilt. The larger the site the longer that can take.

Generators – like Gatsby and Gridsome are getting smarter and smarter with incremental builds. But it still isn’t as fast as releasing content on a dynamic WordPress site or site builder.

Cost of Static Sites – A very simple 5-page site is likely to be cheaper than a WordPress or even site builder created site. However, if you are creating a site that will feature ongoing content growth with multiple authors your complexity will require more tooling and technology costs to make it all work.

eCommerce

Any site that sells physical or virtual goods is an eCommerce product.

Self Hosted Open Source eCommerce – Magento 2, WooCommerce

Magento and WooCommerce

Self-hosted means the company that is running the eCommerce site is also in control of where and how the site is hosted.

Magento and WooCommerce are arguably the largest players on the self-hosted eCommerce front. Businesses can install these open source eCommerce solutions on relatively low cost hosting providers or on high-end performance-tuned environments.

Businesses choose Magento and WooCommerce because they can be cost-effective, configurable, and have a large support and development community.

Cost-Effective – Notice I didn’t say cheap. It takes a great deal of time, and invariably cost, to design, build, secure, operate, and maintain an eCommerce store. However, Magento and WooCommerce driven sites can be more cost-effective than other eCommerce solutions out there.

Configurable – The beauty of open source solutions like Magento and WooCommerce is that you can extend and configure them to meet your exact business requirements. You have near-total control in how you display products and handle the business logic around your products and sales.

Support and Development Community – Being open-source, the vast majority of the development is done for you. And there are thousands of other businesses running their site on the same platform. This means that your technology or business requirement has likely already been realized and addressed by someone within the support and development community.

eCommerce as a Services – Shopify, BigCommerce, Squarespace

BigCommerce and Shopify

The eCommerce as a service category is an interesting one. The pricing model for these services can allow you to get an online store up and running in a short period of time and with a limited budget.

However, as your business starts to scale with products and feature requirements you will find yourself in two different camps – “Nope” and “It Will Cost You”.

Camp 1: Nope – Squarespace, as an example, has a very simple eCommerce feature. If your online sales model falls into that feature set, great. If you need to expand beyond that model, you can’t. To be fair eCommerce is not what Squarespace is about. It is a value add feature and not a core focus.

Camp 2: It Will Cost You – Shopify and BigCommerce start to lose their competitive price edge as you add on features and sales volume. This can mean a move from $200 a month in service fees to $1200 and beyond. That doesn’t mean the cost isn’t worth it, but it does warrant consideration.

Headless eCommerce – Shopify, BigCommerce, Magento 2

Don’t worry, headless isn’t a Marie Antoinette thing. Headless eCommerce means a separation between the frontend (what your customer experiences) and the backend (business logic and administration).

The frontend of your eCommerce site talks to your backend using an API (application programming interface). Separating the frontend from the backend (going headless) brings flexibility, performance, and scaling.

Flexibility – when the frontend is decoupled from the backend, they are both free to choose whatever technology platforms are best for their specific tasks. That typically means a reactive javascript library/framework like React or Vue.js on the frontend. While the backend could be run on Node.js, Python, PHP, or any other language or framework.

Performance – A well built headless eCommerce site is going to be faster than a traditional self-hosted eCommerce solution. This is simply due to a separation of concerns and input and output. Your frontend is not bogged down by the different business logic, processing, and ongoing tasks of your backend. And your backend is not interrupted by the constant page and file serving needs of the frontend.

Scaling – Traditional eCommerce platforms typically run off a single server. If your site is behaving slowly then your only real option is to add resources (RAM, storage, and processors) to that server. This is known as vertical scaling. The problem with vertical scaling is there is a ceiling to it. You can only add so much RAM, storage, and processors.

Headless eCommerce – works a bit differently. Instead of a single server, headless sites are run on multiple servers. One or more servers running the frontend of your site and one or more servers running your backend. This type of scaling is referred to as horizontal scaling and it has a much higher ceiling.

Web Applications

Backend Technologies

Javascript, PHP, and Python

Javascript

Javascript is arguably the king of backend languages at the moment.

This statement is primarily and arguably attributed to Node.js.

  • Node.js is an asynchronous event-driven JavaScript runtime. Designed and built for scalable network applications.

The scalable nature of node.js allows it to be an easy choice for small and enterprise-level applications alike.

PHP

PHP continues to be a widely used and popular programming language. While it has taken a dip in popularity and usage in the last couple of years, it is still very much viable and thriving.

WordPress, Magento, and many other popular web and eCommerce platforms are built using PHP.

It also happens to be the language used in my personal favorite open source framework Laravel. The Laravel team and contributors have been doing an amazing job at continuing to grow and improve an already great framework in 2020. And I look forward to what is to come in 2021.

Python

A programming language that continues to grow in popularity. This language is loved by developers, data scientists, and the educational community.

There are several reasons behind Python’s following. The syntax is clean, easy-to-read, and relatively easy to learn. Added to the large assortment of data and image manipulation libraries and you get a powerful and fun language to use.

Python has several backend frameworks to choose from. Some of the most popular frameworks include Django and Flask. Django is used for building enterprise-level applications. Flask is labeled as a micro-framework and is often used to create several small services that are later combined into a single application.

Frontend Technologies

Javascript – Hands Down Winner

Node.js, React, Vue.js, Svelte

Javascript is simply the biggest technology to pay attention to right now. Javascript has a huge ecosystem of libraries and frameworks to choose from. It also has the ability to be used on both the frontend and backend of your website/web application.

  • React – Facebook-invented and backed heavyweight used by thousands of sites and applications. React is the current champion. Facebook, Netfilx, and a ton of other tech giants use it.
  • Vue.js – Awesome but a silver medalist for many. Considered easier to read and use, Vue.js enjoys strong community support and powerful features.
  • Svelte – Svelte is its own language that compiles down to vanilla javascript. Its advantage is speed and bundle size compared to Vue and React.
  • jQuery – Dead but still kicking. Love it or hate it, jQuery is still in the wild. But its time has definitely passed and is being phased out everywhere.

Templating Engines – Still Viable

Templating engines play a unique role in the frontend world. In actuality, they exist in both the frontend and the backend worlds. Templating languages are first processed by the server before they are sent to the frontend user.

Example Template Engines

  • Blade – Clean, easy-to-read, and feature-packed, the default template language of Laravel. Blade is a clean template language with inheritance and render sections. Add in some blade components and you have a powerful and flexible template.
  • Handlebars – A little bit of logic goes a long way featuring limited logical operations like if, with, unless, and each. Handlebars is widely used in the javascript community.
  • Twig – Billed as fast, secure, and flexible, a Symfony project and the default template engine for Drupal, you can find Twig used throughout the web.

Where does that leave us for 2021?

I believe that 2021 will continue on the stability trend. Polishing out some of the newer technology platforms and adding some “new hotness” to the mainstays.

  • Marketing Sites – WordPress will continue to be the largest, but more companies will move away from it in favor of the site builder or headless approach.
  • eCommerce – Headless eCommerce is the future. So look for this growth to continue. Magento and WooCommerce will still have their share, but both platforms will likely continue to build out headless options.
  • Web Applications
    • Frontend – Continue to look for React to dominate the javascript frontend library/framework scene. But Vue.js is likely to gain some ground with the release of version 3.
    • Backend – Node.js, Django, Laravel, etc… organizations and developers will continue to use the language and framework that they know and like. There will likely be different flavors released but I don’t see a dramatic shift this year.

Conclusion

If you’d like to learn more about how to build an eCommerce site or marketing website, contact Fuzzy Duck. We offer FREE consultations and would love to help your business create an effective and useful website.

Let’s Connect! 

 

Author