What is WordPress 6.2?

WordPress 6.2 was released at the end of March 2023, and we have taken a significant amount of time to test and understand everything that this breakthrough release has to offer for our clients. 

The main aim of this release is to make the user’s experience in the admin area just as easy and enjoyable to use as the front-end of the site. The newly released features decrease the complexity of editing site content, bringing a lot of the controls into one place, as well as giving the site administrator more control over how their website looks.

New Features

Site editor is no longer beta

The WordPress site editor has been available on supported themes for a few releases now, however, in 6.2 this feature is officially out of beta. Full site editing allows developers to take Gutenberg block* development to the next level, whilst also benefiting site administrators by bringing the control of important site elements into one area. 

From the site editor you can access and edit templates for any pages/posts, edit global styles that will be applied across the entirety of the site and take control of the branding of your website. If your website uses a classic theme, you will still not have access to the site editor and the admin experience will be the same as before this latest release.

From a developer perspective, full site editing gives us the opportunity to build even more lightweight themes by taking advantage of the theme.json file. This is a configuration file that allows a developer to take full control of typography, sizing, spacing and default layouts of blocks.

The main benefit of this new feature is that we can significantly reduce the amount of CSS needed to build out a site. This will have performance benefits as the CSS is classed as a render-blocking resource, so the more styling we can do within this configuration file, the better.

* Note – Gutenberg is the block-based editor that is designed to give users a much nicer experience of editing their site and adding content. Its biggest attraction is allowing the administrator to see exactly what their end user will see on the front-end before the post/page goes live.

Templating without a plugin

In previous releases, templates for plugins and posts were something a developer had to create using code or something that was reliant on a third-party plugin to create. While these were useful, the overall experience was often clunky and never particularly straightforward.

The newly released template area of the site editor changes that completely, making using templates a simple, stress-free experience – giving the site administrator complete control over how they want their different offerings to look on screen.

Every page can be assigned a different template if required, however, grouping similar pages and posts into certain templates is the most efficient way to use the template area. New templates can be easily added once your theme has been built, using the library of blocks that are assigned to the theme.

Easier styles

Styling has become global and more fluid with the release of WordPress 6.2. Rather than uneditable styles being defined by the developer during the site build phase, the initial styles can be preset by the developer and then modified in the site editor further down the line. This makes a subtle reskin of a site a lot easier without the hassle of having to pick code apart and rebuild the site. 

From within the site editor, you can click on the half and half circle (1) to reveal the styles library. There are multiple options here: 

• Typography editing (2) – This section allows you to set font styles, family and sizing for every typographic element in the site (text, links, heading and buttons).
• Colour editing (3) – The colour section shows the defined colour palette for the site, along with colours set to individual elements across the site. The colour palette can be changed, along with adding extra custom colours to change up the look and feel of your site.

If styling needs to be any more granular than the defined styles set by your developer, then each individual block (4) can be given its own specific style to fine tune the look of the site even further.

The main benefit of this section is that it gives you the control to give your site a refresh when you feel it is necessary. It also makes it much easier for a developer to go in and set a completely new style using the theme.json file, making such jobs a whole lot quicker and easier.

Content editing and adding – using blocks

Content editing has just got a lot slicker with the introduction of the latest WordPress release. Rather than adding content into blank text fields, the content editor will enter the content into a real view of what their page will look like, making it easier to add the right content to the right blocks on a page.

Every standard WordPress block theme comes with a library of blocks accessible on any page/post. All of these elements allow you to build pages by piecing together blocks to create different layouts to suit your content.

With custom themes, we can add extra block options to specifically meet the design needs of your brand and your website.

There are also new editing modes for different types of admin users. For example, the distraction free mode hides all settings and block controls for users who prefer concentrating on just writing good quality content. Whilst these little touches aren’t major for everyone, they all add to the end goal of the 6.2 release: creating that improved user experience.

New navigation – the jury is out

One of WordPress’s biggest changes in this release is the new navigation block, taking away the need to use the old style drag and drop menu editing section. The aim of this is to make the management of menu items more efficient. As a team, we have had some mixed feelings on this new feature. Whilst it makes simple menus much easier to work with, we have found it more confusing to build and develop complex mega menus. As a result, it makes editing these mega menus tedious for the site administrator once the site is live.

As a workaround, on some of our latest sites, we have brought back the old style menu editor and built out a custom navigation block which still allows the administrator to define site logos and mobile-friendly button icons.

Since this is the first release that has featured the new navigation block, we are still hopeful that it will grow and develop into a much more streamlined process for larger menus. We shall keep an eye on future releases and see if we can use further iterations of the block in our build process.

Site structure – how does this work with SEO and tracking?

One of the biggest changes seen in this update is the complete restructure of the file system used to build out a site. In all previous versions of WordPress, there has been an editable header and footer file, which allows developers and the SEO team to edit and add different tracking scripts into the <head> section of every page.

However, when 6.2 came along, we quickly noticed that these files were missing and set about researching how best we could replicate the tracking work that is done on every site that we build.

We have come to the conclusion that using a very lightweight plugin to inject these scripts into the <head> section of pages is the best way to go. After tests of different plugins, we settled on Code Snippets by WPCode. This had the least impact on performance and carried out the job it needed to perfectly.

One of the worries regarding the removal of the header and footer files was, how would this impact on pre-existing themes that took advantage of this feature? Rest assured, these files are only non-existent in new block themes and will have no impact on older classic themes.

How we work with the new update

Our team at SEO Works has really embraced the new offerings of WordPress’ 6.2 release in order to build better quality, better performing sites for all of our clients. We work with a combination of pre-existing WordPress blocks, as well as developing our own to suit the content that will be displayed on your site. The custom block libraries allow for great flexibility in terms of page layout and structure (that can vary from the initial design), allowing you to piece together a site that works perfectly for you.

A big part of our work is producing a high-quality CMS for our clients. We see numerous CMS that rely on page builders that are often rigid and frustrating for the site administrators to use. Creating a CMS that is easy to use and completely flexible is our main aim, giving the client a great experience when working on their site.

The beauty of building blocks, as we do here at The SEO Works, is that we only load onto the page the required render-blocking resources. Whereas standard theme builders tend to load lots of unrequired styles and scripts onto every page, our block themes are super lightweight and aimed at delivering the best performance possible.

Looking ahead to 6.3

WordPress is constantly adapting, with the 6.3 Beta release rumoured to be released in early August. We are looking forward to seeing what improvements are coming on the back of 6.2, with hopes for further development of key aspects of the CMS, and seeing how the system can grow and aid us as a team of developers.

The post Our Guide to WordPress 6.2 appeared first on The SEO Works.

What are website layout patterns?

There is more to how a web page is designed than just looking nice – the specific layout is something that is carefully considered, weighing up multiple factors and aims.

An ideal web page layout will help to guide website users along a desired user journey and through the web funnel. But all websites have different aims, and therefore different layouts will be required to achieve them. 

Web designers will utilise proven layout patterns to help guide users from one key UI (user interface) element to the next. 

By setting a strong layout design, it encourages the user to interact with the page fully and increases the likelihood that users will click on your desired call to action buttons – resulting in more website conversions. 

There are two commonly used patterns used in web page design – ‘F’ and ‘Z’ layout patterns. These represent how a user’s eye moves across the page in a specific pattern and how they may interact at key points.

In this blog post, we will be taking you through these layouts – explaining what they are, what they look like, and what they’re used for.

The F Layout

The ‘F’ layout is based on making the user read from left to right across the page before moving down to read the next part of important information, and finally navigating down the left hand side – therefore resembling an ‘F’ shape. 

Here’s what that looks like:

This pattern is useful for content-rich pages with many facets of information – where the intention is for a user to scan the content on the page before making the interaction.

It is commonly used with traditionally stacked content featuring a heading on top of text/image and a call to action (eg. an eCommerce product page).

The Z Layout

The ‘Z’ layout pattern follows the conventional way of reading, starting the user at the top left of the page and guiding their eye across the top before directing them down to the bottom left of the page. The final move in the movement is across to the right, being led towards an endpoint, which is normally a CTA button.

This pattern is mainly used on landing pages that use a lot of white space, with the aim to encourage the user towards the most important part of the page.

The start point is incredibly important in this layout – a common starting point is a brand logo in the top left of the navigation which provides a natural starting point for the user’s eye.

How to test them

It may be that there isn’t a clear choice for you and your website. Often, the only way to know for sure is to test. Enter – A/B testing.

A/B testing is a common method to pinpoint which pattern works best for the website. Getting real users to test two different options will help ensure you’re utilising a pattern that’s fit for purpose.

You can measure the performance of each example against the aims you have for the page, and see how they compare. Whichever layout achieves your aims best is the obvious choice, and it’s been tested with an accurate, live, audience.

You can also use heatmap software, such as Hotjar, to test whether the layout you’re using is working as intended.

These softwares record real user interaction points to generate hotspots on a page, which can then be analysed to gauge how users are interacting with a page.

Importance for user experience

Your choice of layout and how well it’s executed is paramount to a good user experience.

If you have a clear vision of the goals and objectives of your site, it’s important that you guide users to ensure a good flow. But it needs to be intuitive and natural…

Most users don’t want to have to think about which route they’ll have to follow in order to get where they intend, so ensuring that this is made easy for them is imperative. 

Creating a seamless journey through the website is more likely to encourage users to come back as they have already had a positive experience with the site in previous visits.

Placing important elements of content and CTAs in the correct positions helps to signpost the user towards the target destination and will be more likely to keep the user happy as well as completing a conversion.

Trust the experts

Hopefully, this blog has helped to not only explain the different web page layouts but also that the way your site looks is very important – for more than just aesthetics.

However, this is just an introduction and the world of web design is both incredibly complex and ever-developing.

Investing in a poorly designed website can see marketing budget go to waste, so it’s crucial to entrust an expert with the project.

Our award-winning web design services have helped countless businesses achieve their goals – and working with our web development team, created stunning and effective websites.

Get in touch today for a free quote.

The post A Complete Guide to Webpage Patterns appeared first on The SEO Works.

When you set out to create a website, it can be very tempting to use a pre-built, off-the-shelf, website theme. However, the disadvantages of pre-built website themes often don’t become clear until later on.

From the offset, pre-built themes are tempting as a much easier and cheaper option, and they can look very appealing in the previews! But, as the saying goes, you do often get what you pay for.

Here are a few of the major issues…

1. Over-bloated

Most pre-built themes will come with a range of different features and plugin integrations, in order to cover a wide range of functionality or design elements the site may need. This isn’t always beneficial as not all these features will be used, leaving the site bloated with unnecessary code. 

Custom themes in comparison are bespoke and contain only the required functionality, specifically coded for one website.

2. Resource Intensive

As pre-built themes contain multiple template versions and functionality, this extra code can have an effect on the site’s speed, making optimisation difficult. Some will also come with required plugins to install that if not used, are unnecessarily slowing the site down. 

3. Restrictive Design

Customisation available on a pre-built theme can vary and is usually limited to the existing templates the theme provides. It can be difficult to stand out from the crowd as many pre-built themes share a similar look and layout. 

With a custom theme, the designer has the benefit of starting from a blank slate, with the ability to design a completely bespoke design that will fit the intended user base. A custom theme can also be tailored to suit existing branding and ensure this is incorporated throughout the site. 

4. Update Dependent

Pre-built themes will include future version updates in order to patch out any bugs, fix any found security vulnerabilities, and keep it up to date with newer CMS versions. These are reliant on the theme developer to provide in a timely manner if, for example, a new theme exploit is discovered or a CMS update releases. Any plugin integrations will also require keeping up to date, and can sometimes require additional licenses if not included in theme updates. 

Sometimes major changes are included within a theme update, which may break existing functionality or design elements and require a manual fix. 

It’s also possible for the theme developer to discontinue or stop updating a theme completely, leaving it vulnerable to hacks and permanently outdated when a new CMS update is released. 

5. Code Quality

Most bought themes provide demos so you can view what certain pages and templates will look like beforehand. However, these mainly focus on showcasing the design and frontend elements, and it’s not always possible to view the quality of the code from these demos. 

Any bugs with the theme will most often not be identified until after the theme has been purchased and installed.

6. SEO Limitations

Similar to not being able to evaluate the theme’s code before purchasing, it’s also not possible to check if the theme is optimised efficiently for SEO. This could stall an SEO campaign from reaching its full potential if the theme is not suited to follow SEO best practices.

7. Limited Support

Additional support can vary with bought themes, most will have a ticketing system or comment section to report bugs, which are heavily reliant on how responsive the developer is. The majority of themes will also have a time limit of support they offer for these requests after the original purchase. Once this expires there may be an additional cost required in order to receive a response to a support ticket.

Custom built themes

Due to these key disadvantages of pre-built website themes, our Web team only develop custom-built themes – that way, we can guarantee the quality and the longevity of the sites we create.

Sadly, as you can see, that isn’t the case when using pre-built themes.

Get in touch with our award-winning Web team to get a quote for a custom-built site, or find out more about our Web Design & Development services.

The post 7 Drawbacks of Pre-built Website Themes appeared first on The SEO Works.