Did you know you can use a block-based approach with your WordPress website to gain more value from the platform, with significant advantages in flexibility, scalability, and ease-of-use? 

In this article, we’ll explain what blocks are, how they work, and how you can use them to build enterprise-grade websites quickly and efficiently, without compromising on quality.

—

WordPress is the most popular content management system (CMS) in the world right now, and it has been for a while. Unfortunately, though, some people still have the wrong impression that it is a CMS that can only be used to build more simple websites that do not have any real complex functionality or integrations, but this couldn’t be further from the truth. 

In fact, WordPress is far more intuitive and robust than most realise. The fact that around 45% of all websites online today are built on the platform goes a long way to prove that. WordPress also provides more scalable, agile capabilities that are perfectly suited to building enterprise-grade websites if leveraged in the right way.

There are intelligent – but still very straightforward – ways to use WordPress that can unlock more value from the CMS. If done with the right guidance, this can make WordPress a far better option than the more traditional, rigid approach of building websites.

This is an opportunity most large businesses are currently missing out on. In this article, we’ll show you how using blocks is a more flexible approach that can provide you with a wealth of benefits.

Understanding How Using Blocks In Your Website Backend works

In 2018, WordPress released a new block-based design and editing user interface (UI), known as Gutenberg. Instead of the typical page creation and editing functionality of a CMS, where you’d input text and images into a rich text editor, you can now build your site by creating and using a set of components. Components are blocks of code which have pre-defined style and input types. 

Each component is named, to denote what it is from the perspective of the front-end of your site on the web page. 

Note: Some agencies only provide a list of block names, but here at SoBold we also provide screenshots of each block so you can see it first. This makes the process much easier and saves you a great deal of time.

Each part of each web page is made up of these components, as pictured below.

However, taking a bespoke approach, you can design and construct unique blocks that are entirely your own. Blocks or components can be built for you by your agency so they’re bespoke to you, your style guidelines, your design preferences, and so on. And, when building your site, you can go into your pre-built components and edit things, like changing background colours, adding images, adding text, and so on. 

This can be set up for you by your agency, so you have everything you need to create, edit, and publish new pages with your pre-built blocks. Anytime you need to create a new page, you just have to pick the appropriate components and place them in the correct position to quickly and easily build the page. 

You can see a great real-world example of an intuitive, bespoke enterprise website built using this block-based design approach here. 

The Business Benefits of Using a Component-Based Approach

Scalability 

Scalability is one of the greatest benefits of using these blocks, especially if you are wanting to continue to build out your sitemap and build out the content. 

This scalability is where WordPress really shines, enabling simple, rapid, virtually limitless scaling of your website with a high level of accuracy. This is a cost-effective way of growing without having to compromise on the quality of your design.

Flexibility 

Blocks provide you with a great deal of flexibility in building, editing, and structuring of pages as well. The ability to customise all your components, along with the intuitive drag and drop functionality, allows you to effortlessly adapt and expand on your website.

Efficiency 

Building components, and repurposing them repeatedly across your website, is a highly efficient way of growing your site. It also makes it very difficult to make mistakes or take a wrong turn.

This efficiency of reusing blocks across your website will free up time for you to develop innovative new features, or focus on improving the service and experience you provide your clients.

Ease-of-Use 

If you have non-technical members of your team who would benefit from using WordPress, blocks will almost certainly improve the usability of the CMS for those people. 

An easier design and editing function helps more members of your team create web pages within clear, pre-set brand guidelines. That’s another aspect that frees up more time and resources to focus on higher value tasks. 

If you’re working with a design and development agency, this also makes it much easier for them to be able to train you and enable you to use the platform to manage your site. 

Faster Time-to-Market 

All this efficiency and ease-of-use will enable you to achieve a faster time-to-market for new web pages, extensions of your site, or even entirely new websites. 

That can, in turn, create competitive advantages for your business, particularly if your competitors are working with CMSs that are slower and harder to use.

Whether it’s you or your agency handling this, you can create and publish new web pages quicker than you could with any other approach.

Lower Costs and TCO

As a result of all of the above, you can reduce costs on development and design, and achieve a much better total cost of ownership (TCO) with the WordPress platform. 

Something that takes an inexperienced agency days to complete with the classic design approach can be done in hours using bespoke blocks. This drastically reduces development costs and gives you a lower TCO in the long-term.

The Importance of Finding a Capable Agency Partner 

As mentioned earlier, bespoke blocks provide you with a proven way to unlock more potential with WordPress and gain greater value from the platform. However, in order to do that, it’s important to find the right agency partner. You’ll need an agency with enterprise-grade expertise and a certain level of skill to guide and support you through this process. 

Taking this approach to building WordPress websites is nothing new, but the real value here comes in creating blocks that are completely unique and specific to you, then enabling your team to use those to scale your site. 

Many WordPress agencies may lean on the generic block editor. But to get this right, you should push beyond that to find a partner who can educate you on the opportunities of using a bespoke design system to build a high-performance website that’s effortless to manage and edit. 

A great partner will also facilitate this for you in a way that ensures you have control, removing the risk of any users making mistakes with the flexibility of this system. You won’t need to worry about the integrity or quality of your site being spoiled because all your components will be built specifically to prevent that.

You’ll gain tremendous value from receiving an intuitive, quality website that you can easily grow at will, but one that’s also managed and supported by an experienced partner. Sticking to these blocks helps you stay within brand guidelines, adhere to best practices, and keep your site consistent. 

You then have the choice to manage, edit, and expand your site yourself, or rely on your partner to do it for you quicker, easier, and more efficiently than they would with a traditional CMS. 

Making the Most of Your WordPress Platform 

Modern businesses today require a powerful, sophisticated CMS that can deliver great websites at scale with enterprise-grade performance. WordPress is a platform that’s built to provide all those qualities and more. Embracing this block-based approach is the most effective and efficient way to achieve that. 

With a skilled agency partner to help you maximise the value your business gains from the platform, you’ll quickly realise just how well WordPress can deliver agile, intuitive websites. 

If you’re in the process of evaluating platforms to deliver a bespoke web development project, check our comprehensive guide to assessing and selecting the right CMS here

Would you like these insights straight to your mailbox?

Your emailSubmit

I consent to my submitted data being processed and stored by SoBold in compliance with Privacy Policy

The moment Marti joined us at SoBold, we were excited and eager to see how she would translate her enthusiasm and energy towards development towards real life projects. We were not let down and she hit the ground running.

2 years later, largely hampered by COVID, we now are getting the absolute best out of Marti. She is incredibly reliable, diligent and talented and she is involved in all of our biggest projects.

Marti has never been one to code for the sake of coding, and she always makes sure she understands the bigger picture before diving into a project. 

⅓ of the Italian SoBold Office crew, we are very fortunate to have Marti and we truly can’t wait to watch her skillset improve and see her continue to work on the biggest and best projects!

We caught up with Marti to find out more about what she gets up to in her day to day life.

At what point in your life did you decide to become a developer?

Having studied Foreign Languages and Literatures, since uni I had a dream to become a successful translator. I came to London to fulfil this dream but I wasn’t sure which field to specialise in yet. So I started working at a restaurant, and in my spare time, I would translate articles for online media sites and magazines, and also produce subtitles for tv series.

Later on, I started a course in software localisation, and this opened up the dev world to me as I had to put my hands on the software source code. When it was time to search for a job, reality had a massive hit: competition was high, work was difficult to find, it was clear I had to invest more time and specialise furthermore.

I felt stuck and didn’t really know what to do with my life. So I went backpacking around the world for a few months, and I decided to dive more into that dev world that I found so interesting. Time wasn’t really a problem while travelling, so I read a lot about web development and took a lot of online courses. I devoured so many online resources, I just couldn’t believe they were all a click away! Since my first “Hello World” project, I’ve found the process of coding and building a website from scratch a beautiful mix of creative problem solving that never disappoints. Long story short, that’s when I knew I wanted to become a developer.

Describe your typical day

I wake up at 6:30am, I feed Coco and Lucy (my cats), I put some tunes on while having breakfast, quick shower. Then it’s checking the weather time: if it looks cloudy and rainy I’ll take the tube, otherwise, I’ll most probably board my Brompton and off we go to the office! Ideally, I like to conclude the evening by doing some form of exercise, usually rollerskating or a walk/run.

What’s your favourite project to date

I really enjoyed working on the new SoBold website, it’s been a huge team effort and the result it’s simply amazing!

What is the best advice you have ever heard?

I once read this quote: “If we all threw our problems in a pile, we’d grab ours back.”

I think it’s a beautiful sentence, it makes me appreciate life every day and makes me very grateful for all I have.

If you had to change careers what would you do instead?

Not sure what but surely something related to sport.

What was your most recent challenge and how did you overcome It?

When you’re a developer, every day there’s a new challenge. You just have to learn how to tackle them. In general, I think talking with a colleague helps a lot. Also “rubber ducking” can be a useful method for debugging code. In both cases, they’re powerful methods that consist in taking a break and articulating the problem in plain language.

What’s your favourite thing to do outside of work?

I’m a big ramp skate fanatic. https://www.instagram.com/martymcroll/

What 3 items would you bring to a desert island?

🇨🇭 🔪  🎸 and  🛌🏽

Would you like these insights straight to your mailbox?

Your emailSubmit

I consent to my submitted data being processed and stored by SoBold in compliance with Privacy Policy

As of September 2017, SoBold has become the exclusive digital partner for Clanwilliam Group.

About Clanwilliam Group: Clanwilliam Group, headquartered in Dublin, Ireland, operate a number of industry leading brands in the private and public healthcare sectors across the Republic of Ireland, the UK, Australia, New Zealand as well as other worldwide locations. Formed in 2014, Clanwilliam has rapidly expanded in size, now with over 15 brands under the Clanwilliam Group umbrella. Clanwilliam is driven to establish itself as a global group of highly synergistic healthcare technology and services businesses.

About SoBold: SoBold Digital Marketing, founded by Managing Director Will Newland in 2014, work with companies and brands deriving from an impressive multitude of sectors including Healthcare, Fitness, Luxury, Hospitality and more. With a growing portfolio of over 80 brands, SoBold has a proven track record of delivering expertly crafted digital marketing solutions to help small and medium sized businesses grow and flourish.

We are delighted to become Clanwilliam Group’s exclusive digital partner. Clanwilliam is rapidly increasing their reach in the Healthcare sector and we at SoBold are proud to work with them to implement a powerful digital strategy.

Would you like these insights straight to your mailbox?

Your emailSubmit

I consent to my submitted data being processed and stored by SoBold in compliance with Privacy Policy

The end-to-end process of web design is made up of a number of different phases that should all inform and complement each other. 

When working with a web design and development agency, they should use their expertise and experience to guide you through this process, which consists of:

• In-depth research and careful planning
• Visual exploration and mood boards
• User experience (UX) design 
• User interface (UI) design.

Once you’ve completed each of those phases and you have a design that you’re proud of, your agency partner will be tasked with preparing your website for development.

This article will explain the process of preparing a website for development, helping you understand what’s involved, what to expect, and how to approach it.

Designing  Your Website Across Different Break-Points 

In a recent article, we explained how the purpose of your UX is to help your visitors complete a task or process on your website as easily as possible, ultimately leading them to follow a call-to-action. 

Your UX is brought to life by your UI, which includes all the visual and interactive elements of your website, from colour and font to buttons and scrolling. 

Towards the end of the UI design phase, the next step will be to roll out your designs across a number of break-points. 

Break-points are the screen sizes of devices that your design will fit within. This allows your website to be designed as responsive and optimised for use across a wide range of different devices and channels. 

This is important because certain aspects of your site may not translate down perfectly across different screen sizes. 

Here at SoBold, we design sites across the following break-points, but this may vary from agency to agency:

• 1,920px – For most external computer monitor sizes
• 1,366px – For most laptop screen sizes
• 992px – For most Notebook and iPad devices
• 768px – For most other tablet devices
• 375px – For most smartphones.

If you want your website to be designed as mobile-first, it’s important to raise it at the beginning of the project so your agency can create your wireframes in that context. However, you should only ever make that decision based on real data regarding your target audience’s preferences. 

In this case, your agency should work with you to conduct some additional research and determine the best screen size for your particular audience. This will ensure the UX designers work with the right starting point for your high-fidelity wireframes.

A Thorough Hand-Over from Design to Development 

This phase of a website project involves a process that takes a lot of careful work and close collaboration between the different teams within an agency. 

Here at SoBold, we make a point to ensure the design team talks the development team through all the work they’ve done on your mood boards, UX design, and UI design in detail. This includes explaining the decision making process behind everything they’ve designed.

While a lot of agencies will just hand the designs to the developers and ask them to start building, we believe this is something that should be treated as more of a team effort. Doing so as a core part of our process has proven to add tremendous value to the work our clients have received in recent years. 

It’s beneficial to the overall project for the developers to fully understand why the decisions have been made about the designs. It’s also important that they’re given a detailed run through of what they’re building within the context of the whole site.

For example, there may be a fairly complex block which is built early on in the development process. If the developers are made aware that slight variations of this same block will be used several times throughout the site, they can save valuable time and work more efficiently by repurposing the first block when it’s first built. 

This hand-over is crucial in ensuring the development process runs smoothly, providing you with a high-performance website that meets your expectations, delivered on time and within budget.

A Well Designed Website Ready to Be Built 

After the hand-over is complete, your agency will be able to export all your design assets and the developers will begin building your website. 

While web design may seem straightforward when explained like this, in reality it’s a complex process that requires a great deal of specialist skills and expertise. That’s why it’s so important to have the support of an agency partner you can trust and rely on to guide you. 

Working with a talented agency will ensure you’re able to create a unique design that will resonate with your target audience and help you achieve your strategic business goals through your new website. 

Keep an eye out for our upcoming blog series where we’ll walk you step-by-step through the web development process, making it far more approachable and easy to manage for you.

If you’d like to discover how generative AI technology is transforming the web design and development space, read our recent article here. 

Would you like these insights straight to your mailbox?

Your emailSubmit

I consent to my submitted data being processed and stored by SoBold in compliance with Privacy Policy

We recently had a friendly debate in our office of which we thought was a better experience but putting personal bias aside there is no right or wrong answer. It all depends on the type of service you are providing.

Content is what defines your website and the reason why your audience will return again and again. Choosing the right browsing experience based on your unique content will enrich the experience rather than leave your audience feeling confused and frustrated.

What is infinite scrolling?

I think it’s fair to say at some point we have all fallen down the rabbit hole of endless scrolling. In short infinite scrolling is a technique used to fetch a continuous source of information as a user reaches the bottom of a page. Pinterest and Unsplash are great examples of the use of dynamic content.

What is pagination?

Pagination is the sequence of numbers used up to divide pages of content that a user can control, you’ll see this commonly used on large e-commerce sites or information websites that update content regularly. 

The pros and cons of:

Infinite scrolling 

Pros:

• Continually scrolling as we know is addictive, a pro…debatable but it does have a better usability experience than clicking

• There is a better chance of user engagement

• Users have the opportunity to discover new content with little to no thinking

• Thanks to social media continuously scrolling on mobile has become the prefered way to interact with content

Cons:

• There is no way for the user to reference or bookmark content of interest
• If done incorrectly it can have an impact on site performance as the page needs to load infinite content as the user scrolls
• Your user will never reach the footer which may house important information for them

Pagination

Pros:

• Your pages will have a good conversion rate because as people are searching it will show in a specific list of items
• It will give your users a scene of control and clarify how long it will take them to find what they are looking for.
• A returning user will be able to identify quickly where the content is

Cons:

• It obstructs the user experience which will lead to lower engagement rates
• If not implemented properly can cause confusion
• So which one is better for you? The bottom line is no ideal or stronger one, it all comes down to your UX and content requirements. The best thing to do is to analyse web and user goals and make decisions based on them. 

Would you like these insights straight to your mailbox?

Your emailSubmit

I consent to my submitted data being processed and stored by SoBold in compliance with Privacy Policy