Introducing NOW|Hydra

Our most secure, best performing, next generation website framework

New year, new problems

and how we solve them

Last year, we wanted to create our own website builder interface. After dealing with clients’ websites using divi and elementor-style drag-and-drop page composers, we wanted to have a go at making a bespoke solution for our agile website creation needs.

So we came up with a simple to maintain library of ACF flexible content layouts that have all the controls a standard web developer has in a neat layout UI. Third-party page builders are notoriously clunky and fiddly. ACF layouts enable devs to consistently roll out new features and update existing elements without the fear of having to track down an overridden style an end user might have made. They create consistent, fast pages that use Bootstrap as a style framework so it’s recognisable for any future dev to maintain.

But enough about some awesome products we’ve already made and use, that’s so last year! Let’s talk about what’s NEXT in Now|Comms’ toolkit.

Creating a headless WordPress framework has never been easier

What we use

Next.js

A flexible React framework that provides building blocks to create fast web applications

GraphQL

A query language for APIs and a runtime for fulfilling those queries with your existing data

React

A JavaScript library for building user interfaces

Tailwind

A utility-first CSS framework

ACF

A WordPress plugin which allows you to add extra content fields and blocks

What's the big deal?

and what is my website doing?

WordPress in a nutshell

WordPress is a fantastic CMS that the majority of developers use to create awesome websites. It’s a content management system designed for flexibility and customisation. There are three important things going on that make your website work, – frontend, middleware and backend.

Frontend

HTML, CSS and JavaScript are used to manipulate retrieved data and display it on a screen.

Middleware

PHP is used to fetch and retrieve data from the database so that it can be queried and displayed on the frontend.

Backend

MySQL is the database management. This is where everything to make your website work is stored.

This is how no-code editable websites are possible. Custom-made or third-party plugins can be used to increase user capability that doesn’t rely on a developer to implement (however, you should really let a developer do that because they can do it without the need for an endless amount of plugins that could break, slow down your website, or leave it vulnerable to abuse).

But there are some significant drawbacks to this functionality. The way WordPress is set up uses dynamically rendered content. This is great for serving updatable content, either based on user action or JavaScript and PHP requests, but there are some downsides to this approach.

Performance – making a unique server request for data increases loading times. Loading times are a key factor in visitor retention and goal conversion.
SEO – Google prefers statically rendered content. It’s an important performance metric that is hard to optimise with standard practices like caching and deferring.
Resource intensive – high-traffic websites can be brought down by too many server requests. If your hosting setup isn’t capable of scaling, it will go down.
Security – making a secure website is about mitigation more than anything else. Nothing is impervious to dedicated attacks but, by design, WordPress is very vulnerable to attacks. Especially if they rely on multiple third-party plugins.
Development bottlenecks – are a headache for developers. Maintaining development and live versions is not easy. A standard WordPress install needs a single domain to operate. Making sure versions are the same across a team development can get messy.
Scale – some companies have multiple properties that require unique domain names. Maintaining five or more individual WordPress installs across multiple domains and hosting is time-consuming and repetitive.

Say hello to

Creating a headless CMS

Headless WP has been around for a few years now. Back in 2016, WordPress released its REST api which allowed developers to decouple their core WordPress installation from the frontend of the website. This allowed use of the same data to build different web apps built for different purposes and devices. With a headless CMS, you can maintain your data and system from a single point (a bit like how network multi-sites work) but you also have the ability to use them independently, on different domains, different apps, hosted locally for development or deployed live in the wild.

React is a very popular JavaScript framework. It’s super quick and easy to develop. The problem is that it doesn’t work straight out of the box with WordPress. So we need to build an API that can talk to our WordPress backend and our React frontend. Next.JS and GraphQL are excellent options for adding the components developers need to integrate React apps to their WordPress CMS. Vercel offers excellent hosting services for its apps and makes deployment and updates a breeze.

Hydra is able to build websites that score 100 across the board

something almost impossible to do with standard WordPress installations

Super secure

Decoupling the frontend from your website limits opportunities for attack. Essentially, it removes the availability of the backend from the public. You can host your admin site on an entirely different domain, away from bots scraping wp-login pages and trying to use brute force.

Lightning fast

Because the apps are rendered as static sites, making page loading and information retrieval is almost instant. They are able to achieve almost impossible to optimise scores for dynamically rendered content.

Easily manageable

As you only need to maintain a single WordPress installation, you can manage multiple products on multiple domain names from a single admin CMS. The functionality to organise your WP Admin panel is straightforward and can be easily customised to user needs.

Scalable

As each app is, effectively, a self-contained piece of software, it will run anywhere node js can be run. Developers can be given the source code without having to have a locally installed version of the database on their computer. Frontend developers can get on with doing what they do best, without having to worry about setting up and maintaining the personal data which would need to be stored on their local machine in order to work on the website.

Popular Services

Overview

Refocus your brand’s messages, benefits and advantages to ensure they address the new problems faced by today’s potential customers, right at their moment of need.

Nurture new leads down the sales funnel with emails customers actually find useful. Send customers relevant information based on the priority pages they visit on your own website. Use lead scoring to pinpoint the hottest new leads on your sales database.

B2B sales can be long and cumbersome. Traditional social marketing can take weeks or months to deliver a steady flow of quality leads sales teams can work with. Our social selling accelerator fast tracks the social selling.

Social media allows businesses to connect and interact with potential customers on many different platforms, across the internet.

A micro-site is a usually temporary asset that acts as a sub-site and is focused on a single campaign. It can either be an individual homepage or a small collection of webpages. The micro-site will have its own unique content and usually exists on its own domain.

The best stories in the world don’t amount to a hill of beans if your key prospects can’t find them. This hack programme bundles SEO research, keyword analysis and meta insights to ensure your blogs, products and offers get found when new customers are searching.

We make sure your products and services get right in front of new customers quickly, by setting up or refreshing your Google ads accounts and doing all it takes to make a new campaign live.

When compared to a full-fledged website, a landing page is just one page with a very specific purpose: getting visitors to click through to your desired outcome. Good landing pages increase your chances of success when they are done correctly.

Blog writing is one of the most effective ways of communicating information to large numbers of people.

Products

The brand and messaging refresh hack

Marketing automation setup

Social selling accelerator for Account Based Marketing

Social marketing starter

The lead magnet micro-site hack

The SEO makeover hack

The Google Ads starter (or reboot)

The landing page promo hack

The mighty blog month hack

Our agile marketing stack

Overview

Web design strategy for marketing managers who think websites should change as fast as their business.

Content production for marketers who know that big ideas get off the ground faster when they start small.

Social media, search and email marketing campaigns driven by data, managed by experts.

Brand identity design is more than just choosing a logo and a catchy strapline.

Co-work with our agile digital marketing experts to get the ongoing support, data and insights you need to deliver results-based agile marketing programmes.