By John Macon, Director of Web Development
Medium Giant
Websites are the foundation of any brand’s digital experience, and if your site isn’t built with flexibility in mind, it’s likely to impact your long-term success negatively by costing you exorbitant time and money to maintain or optimize.
We’ve created a scalable and flexible website development framework that makes it easy to:
- Optimize a site’s speed and performance
- Update or add new functionality
- Customize the user interface
- Update and maintain roles-based security
Simply put, our model enables you to easily optimize your site, without exhausting resources, in order to achieve ongoing alignment with evolving web standards and practices.
An evolving web requires an adaptable website
Web standards, search algorithms, user needs, and company goals are constantly shifting. You need a website that can adapt with you instead of holding you back.
New functionality and updated standards are added to web browsers about every six weeks. By understanding and taking advantage of these updated standards, you can constantly improve your site’s speed and security without requiring a rebuild.
For example, this new carousel slider supported by modern browsers was recently released and is 30 times faster than previous sliders. When a website is developed to be flexible and scalable, a developer is able to easily replace or add functionality, like this slider, to improve a website’s speed and experience for users, without impacting other functional aspects of the site.
Often, new features or functions that need to be added stem from internal company initiatives or new user needs.
Let’s say you built your website with all the functionality you needed at the time, but two years later you need to add e-commerce because your business has expanded. You’d want the ability to add shopping and checkout functions without having to rebuild the entire site — which would create a massive project that would blow your budget and take longer than you’d like. This is why the ability to add layers of functionality to a site is critical for a growth-oriented business.
Treating the site’s application of style as its own layer is important too. On average, companies rebrand themselves every seven to 10 years, with minor design and brand tweaks in-between. A flexible website framework that treats style as its own layer enables developers to align your website to new brand standards without having to do a full rebuild.
Repeatable blocks allow for ultimate customization
The fastest and most secure websites are built using native content management system (CMS) functionality.
At Medium Giant, the scalable framework we’ve created is built as a custom WordPress theme that extends the functionality of native Gutenberg blocks. Each of the content modules on any given page are called Blocks, and they are built to be reusable, repeatable, and configurable in an infinite number of combinations.
Blocks have become the gold standard in flexible web design, compared to page templates. They allow all admins of a website, no matter what their technical background, to easily build pages using repeatable elements that can be configured at the instance-level.
Our scalable planning starts in the design phase, when we prepare a design system that includes all of the blocks needed to fuel the website. We have a library of more than 40 custom blocks that can be configured for the nuances of the site’s design and functional needs, and we’re consistently adding to the library as new use cases arise for additional blocks.
The old method was to create page templates that had semi-static elements as parts of the page. You may have a photo, a paragraph of text, and a map built into a page template that looks exactly the same. While the content might be slightly tweaked from page to page, it’s always in the same spot.
We’ve blown that concept up. We don’t build page templates in the traditional sense at all. Instead, we build repeatable blocks that a user can place anywhere. You can place a map or blog carousel on any page, wherever you need.
Maybe you’re thinking, “But templates can be helpful!” You’re not wrong. We’re able to create Block Patterns within our custom theme that allow the content manager to apply a specific configuration of Gutenberg blocks in a specific order on the page. Or the content manager can start from scratch and apply any configuration of blocks they need, so we have the best of both worlds for our CMS users.
Gutenberg blocks make it easy to customize a website and future-proof it. You’ll never be stuck within the confines of a page template again.
The high cost of using website plugins
Plugins are incredibly helpful to amateur web developers. They make it easy to add functionality and features to a website. But they also introduce a host of problems that can impact your website performance and security.
We’ve seen legacy websites that are cobbled together with over 40 plugins. This old way of creating websites negatively impacts the experience in multiple ways:
Slower site speed
Plugins add extra code to the website. They require browsers to load more scripts and stylesheets. This increases the time it takes to process and load everything on each page. Fewer plugins equals fewer scripts and stylesheets to load, which equals a faster website.
Security vulnerabilities
Every plugin is a point of vulnerability when developed by third-party companies or developers because they are not in your direct control.
Free plugins may also inject malicious code into a website. For instance, one popular gallery plugin inserted advertising on all the websites that were using it to generate a lot of revenue in a short amount of time before the exploit was discovered. It’s easy to imagine how something even worse could have happened.
When you download a plugin, you are placing a lot of trust in developers you don’t know.
Plugin collision
Plugin collision is when plugins have competing functionality that hurts the performance of your site. It can be a difficult problem to diagnose and an even more difficult problem to resolve.
We ran into this issue when we onboarded a client who was having problems with their page builder theme. They used a ton of time trying to troubleshoot their tool. After we got under the hood, we learned that a new newsletter plugin they added was breaking their page builder.
Companies that use multiple plugins damage the long-term viability and customization of their websites. True, plugins are cheap and simple solutions for intro websites, but overuse is not recommended for larger businesses and use-cases, or any brand that wants to build a protracted digital experience.
Plugin-based website creation might save money for you in the short-term, but isn’t a scalable or flexible solution.
Block framework over page builders
We built our website framework to take care of our clients’ website budgets in a responsible manner. Instead of building from scratch every time, our framework allows us to easily create the basic elements of a website. We can then spend our time on the advanced functionality and tweaks to make a client’s website go above and beyond.
When we were developing Ulster County’s website, the client wanted to immerse users in the beauty and charm of the area using an array of stunning photography that would draw users in, regardless of what size screen the site was viewed on. So with the basic website built, we focused on optimizing the responsive viewing experiences, including a custom side-by-side view for an ultra-widescreen monitor.
Many quick-build websites use clunky page builders such as Divi Builder or WPBakery. These builders can be overly complicated and often slow the website down because of how bloated the codebase for these themes can be. Many override the native WordPress block elements and are at risk for conflicting with updates to new WordPress core versions or other plugins on the site. Additionally, many page builders make it impossible to export the content into a new website in the future.
Our framework, which extends the functionality of native Gutenberg blocks, eliminates the need for an exorbitant number of plugins, making your site faster and more secure.
Additionally, our framework has a variety of customizable block types available to use as needed. One of the most popular block types is the call-to-action (CTA), which is displayed as an eye-catching banner anywhere you place it on the site. While it’s best practice to put a CTA on a number of pages on your website, you might want it to vary from page to page. Instead of programming 20 different CTAs, we have one CTA block that has the functionality to be easily customized, including changing the background, color, and placement so your CTAs work effectively within the page’s content hierarchy.
By using customizable blocks, you can deliver the best experience for your user by planning a page content-first instead of being forced to align content to a specific template.
Website as a Service (WAAS)
When we make updates to our framework, those updates are applied to all the websites we built that we host and maintain for our clients. So if we upgrade to a new slider that increases the speed of a website, all of our retained clients get an increase in speed by way of this update.
We continuously update our framework so that our clients are able to take advantage of the optimizations from the latest and greatest functionality, features, and performance enhancements.
We deliver a user manual for every site we build so that content administrators are confident when we hand them the keys. The base manual teaches the standard elements of the back end, such as post type, locations of blocks, and the purpose of each field. We then customize each manual to explain the custom website elements that we’ve built or configured specifically for that client.
Our training sessions are less than two hours, and by the end, our clients generally know how to manage their entire website. We then deliver the written user manual and a recording of the training session. After the training, any non technical user is able to add blocks, pages, and content with confidence.
Security is critical
Websites are long-term assets for a business and as such can be targets for cyber attacks. Your website should have a focus on security by addressing vulnerabilities both inside and outside the organization.
Two-factor-authentication (2FA) for users is one of the simplest ways to help prevent third-party users from gaining access to your website’s CMS.
We’ve already addressed that plugins can be vulnerabilities for websites. Because of this, we recommend a thorough plugin vetting process for plugins, and we keep the limit to seven to 10 plugins for any website we build or maintain to minimize third-party exposure.
At Medium Giant, we contact every plugin developer to make sure that its security is up to our standards. We also spend time reviewing the code before allowing a plugin to hit our hosting environment and interact with our clients’ websites.
Safety and security are among the most important parts of the job. Our clients trust us with their digital experience, and we do everything we can to limit points of vulnerability.
Build something great
A flexible and scalable website allows you to easily spin up the basic building blocks of your site, so you can focus on the cool features that make your website an impactful extension of your brand.
Not everyone can afford to rebuild their website every few years, so a flexible website foundation helps you to continue expanding the functionality and style of your website to meet the needs of your business objectives and your customers’ needs.
Think your website could be better?
Recently, three websites that we executed using this scalable framework won MarCom Awards, an international competition for marketing and communication professionals.
The success of the framework we’ve outlined here for the effective execution of a flexible, fast, and secure website is intrinsically linked to our proprietary website hierarchy of needs, which posits that the most basic digital experience needs (such as accessibility) must be fulfilled by the website before moving on to more advanced digital experience needs (such as usability). We evaluate, build, and optimize all digital experiences through this lens.
Our advice is not to jump to a rebuild right away if you are unhappy with your current website. Instead, you should pause to take a deep dive into evaluating your current state of affairs through the lens of our website hierarchy of needs, then prepare your plan of action from there. And as always, focus on building a website that is flexible and scalable for the future.
