If you’ve never been to a conference of any type before, you possibly think you already know the important areas of your profession and can find out any developments from your colleagues or the internet. At least that’s what I thought prior to attending Pixel Pioneers 2022.

Which option sounds more appealing to you? Pick up extra skills on occasion, or go to a conference and absorb a mega-dose of industry knowledge, make connections and enjoy exploring fresh surroundings? Luckily at SoBold we have the opportunity to do both.

The conference covered both ends of the telescope – from broad topics such as energy consumption, to a fifty minute talk about the brief three milliseconds your screen goes blank in between webpage loads. How the visually impaired experience the internet, to technical developments in styling / fonts.

My personal hero was Chris How – his mantra of valuing your customer’s time and giving them small moments of delight strongly resonated with me. In accordance, I want to guide you through the content of the conference, with links to the core material that will best replicate what the SoBold team saw, whilst valuing your precious time.

GAVIN STRANGE : Less Thinkering, More Tinkering

A must watch to boost your levels of creativity. Gavin shares his personal and professional projects with Aardman Studios. Lots of useful insights into reaching the pinnacle of creativity. Highly engaging delivery, visuals and plenty of ‘further reading’ material. Definitely worth watching in entirety. Gavin Strange website – will give you a sense of his creative flair and influences. https://www.jam-factory.com/

“It’s better to beg for forgiveness, than ask for permission.”

Gavin Strange

BIANCA BERNING : Variable Fonts – WTF?

From a technical and design standpoint, learning about variable fonts is incredibly useful. Towards the end Bianca veers into the potential application of variable fonts – imagine a world where your computer mutates its content to fit the viewer’s specific needs. If you’re looking for new avenues for unique artistic features for your website – this talk is for you. Everyone should have a play with variable fonts – try it here https://v-fonts.com/

CHRIS HOW : You Got to Fight for the Right to Delight

Chris’s choice of examples and commentary is intentionally entertaining and eclectic. His approach to design changes your criteria for success and also would decisively influence your next project. Essential viewing. Whether you’re a seasoned designer or developer short of a design, this talk will give you a guiding direction. Information on the Kano product roadmap here. https://www.productplan.com/glossary/kano-model/

LÉONIE WATSON : Accessibility: The Land That Time to Interactive Forgot

Visually impaired people experience the internet through screen readers – the internet described in words. Léonie’s valuable insight will definitely re-balance your priorities and appreciation for how websites should function. Some of the technical history she overviews was a bit lost on the audience but the switch in mindset is valuable. Important to dip into, especially for gleaming a deeper understanding of how a web document is compiled and loaded. It might sound ‘techy’ but it’s like understanding how our lungs work – illuminating. If you haven’t viewed any of your own websites using a screen reader – you definitely should. For a great sense of how the net is best experienced for visually impaired users – just check out her website – tink.uk

LUKE MURPHY : Lightning Talk: Design Tokens – Searching for a Source of Truth

Design Tokens act as a very useful tool for blending the boundaries of where design and development meet, in fact, they act as a technical element that affect design and development in equal measures. If you have no idea what a design token is – this talk could unlock a tonne of structure for your product. Here’s an overview article on design tokens 

HANNAH SMITH : How to Make Digital Services More Sustainable

Hannah Smith’s talk invited us to critique our energy consumption and make changes to our habits as both consumers and producers of digital content. She makes the case that space travel is a waste of resources, and that using less lays the path to fulfilment. See if her arguments resonate with you.  Hannah’s book recommendation – Doughnut Economics by Kate Raworth

JHEY TOMPKINS : Supercharge Your Skills with Creative Coding

A mad professor of CSS and JavaScript – Jhey has a mixture of technical tricks and interesting libraries for speech recognition. Deadpan yet full of colourful examples, Jhey clumsily demonstrates his collection of magical creations and challenges you, the developer, to break out of your ‘siloed’ mentality for visual  presentation. Check out his catalogue of wondrous CSS/JS creations here

STUART LANGRIDGE : You Really Don’t Need All That JavaScript, I Promise

Painting with the broad brushes down to the nat-hair infinitesimally small details, Stuart reminds us of the importance of returning to the basics in order to best utilise the web. Unfortunately some of the libraries he suggests do not have extensive compatibility and thus aren’t for mainstream production… yet. His insight does provide a deeper understanding of the mechanics of the tools we use, although the message is quite drawn out. Example of the shared transitions js library https://codepen.io/drenther/pen/NjzeOO

RACHEL ANDREW : What’s New in CSS?

Rachel Andrew – new css features either in or emerging from or newly arrived from CSS-land. Truly at the coalface of emerging CSS features. For a frontend developer it was akin to being shown new letters in the alphabet that were being proposed. A summary of similar information can be found here – https://www.smashingmagazine.com/2022/03/new-css-features-2022/

Bristol itself is well worth a visit – a centre for nightlife, hedonism and youthful idealism. Simply walking around the harbour area in the daytime will refresh your appreciation for one-of-a-kind shops and overflowing street art. Make sure you have plenty of free space in your phone for all the photos. The SoBold team had a very enriching experience and bonded even tighter as a team. I hope to see you at the next one!

Links to the conference videos will be available via the Pixel Pioneers website.

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. 

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

Providing your website’s visitors with a great user experience (UX) is a challenge. Especially for corporate websites that require sophisticated features and functionality, this can be an ongoing struggle. But it’s a challenge you need to solve if you want to stay relevant and remain competitive in today’s digital business landscape.

Usability is the measurement of how easy or difficult your website is to use for your audience. Good usability makes the experience of using your website as convenient and simple as possible for all your site’s visitors.

Despite the obvious value of this, usability is often neglected by businesses when building a website. That could be because you don’t have the time or budget to follow best practices, you don’t have the in-house design expertise, or you simply aren’t aware of just how important usability is today. Whatever the reason, you can’t afford to take the risk of releasing a site with a poor UX. 

Understanding the Importance of Web Usability 

You’d be amazed by how many websites these days fail to give their users an experience that delivers on their basic expectations. If your website falls in that category, poor usability may have an influence on whether your users adopt or reject your site. This could be the difference between a visitor abandoning a poorly designed page or sticking around and converting to become a customer.

So, how do you ensure your website doesn’t end up on this ever-growing list of failures? 

The key is to focus on your users’ needs, and put yourself in their shoes when planning, designing, and developing your site. 

Even if your site isn’t customer-facing, good usability is also crucial for internal systems. Employees are users too, and their adoption – or rejection – of your technology will also have an impact on your business.

This is easier said than done, we know. That’s why we’ve provided a selection of tips and advice to help you overcome this challenge.

How to Improve the Usability of Your Website

1 – Keep it Simple 

Whenever you’re thinking about UX, always follow the rule that simplicity is best. If a website has a design or functionality that’s complicated, its usability will suffer. Try to keep things as simple as possible at all times.

2 – Nail the Fundamentals 

While some design choices, like colour and font, can be argued as subjective, there are certain aspects of usability that are more objective. Getting the fundamentals right will help you ensure you’re delivering great usability. 

For example, optimising your site to ensure its pages load quickly, organising your pages with proper headings and sub-headings, making sure clickable buttons and links stand out, avoiding making any text or touch-points too small, even providing clear, useful error messages, and so on.

You can read a more extensive list of fundamentals and best practices for UX design in our related article on usability here.

3 – Adhere to Accessibility Guidelines 

Usability shouldn’t be confused with accessibility. Accessibility’s purpose is to make all technology accessible and easy-to-use for everyone, equally, with a significant focus on those with disabilities and other difficulties. 

To ensure your website meets the current requirements for accessibility, you need to follow a set of principles and standards known as the Web Content Accessibility Guidelines (WCAG), linked here. 

If you’re working with an agency, they should have best practices for accessibility already incorporated into their approach. Make sure you check this anytime you’re evaluating agency partners for a website project. 

4 – Learn from Experience 

We’re all users of websites, and we all know how it feels to encounter a frustrating UX. Use your own experience of this to try and build empathy for your users and what they might like and dislike. Any time you come across a website that gives you a bad experience online, make note of this and ensure you don’t allow similar problems to creep into your own site.

5 – Don’t Make Assumptions 

While the previous point is important, it’s also crucial to realise it’s not enough. Using your own experience will only get you so far and, in some cases, it could even cause additional problems.

Remember that usability is dependent on delivering for your target audience’ personal preferences when interacting with your website. It’s always risky to assume you know how your users think and feel.

Don’t make decisions about design and functionality without considering who the target users are and what they need from their experience. This leads us nicely into the next point.

6 – Test With Real Users

It’s always necessary to test the usability of your site with real people who are part of your target audience. The best way to ensure your website will provide a great UX is by asking real-life users to test it out, collect their input, and put that feedback into the final version. This is known as usability testing, which is a phase of the design and development process that every successful project requires. 

7 – Know When to Ask for Help

All of these tips are helpful to be aware of, but for the average business they can be daunting and difficult to put into practice. That’s why the majority of large businesses with outstanding websites have worked alongside a specialist agency partner with expertise in user-centric design. To ensure your site has great usability, it’s often necessary to find the support of an agency who has proven experience delivering similar projects successfully. 

Usability Should be a Priority 

Usability is crucial to the success of any website, but it’s something most businesses are still struggling to get right. Ultimately, though, your users are the ones who will determine the success or failure of your investment. 

You have to put yourself in their perspective when designing and developing your site, and that includes getting real people’s feedback and approval. Only then will you create something that meets your target audience’s expectations for speed, convenience, and simplicity. 

If your website provides a clunky or frustrating UX, most users today won’t hesitate to go elsewhere rather than waiting around to complete their task on your site. If that task in question is purchasing a product or service, you’ll see that poor usability will eventually begin to have a negative impact on your business.

Following the tips and best practices listed in this article will help you avoid that trap and create a UX that’s better than most websites. Doing that will begin to drive positive outcomes like greater adoption rates, improved customer retention and loyalty, and a stronger return on investment. 

To continue learning with a deeper dive into the topic of web usability, including more insight into its principles, additional guidance on design best practices, and current trends and future predictions, read our related article here. 

March 8th is still an important date to remind us of the brilliance of being a woman in our society. Even though it can be a struggle every day, we know that women are capable of anything and we are very proud to celebrate the achievements of these creative and intelligent women.

Hedy Lamarr

Who can live without Wi-Fi nowadays? In 1942, Hedy invented the technology that later helped the creation of wireless signals. 

Rear Admiral Grace Hopper

If you’re not in the programming world, you may not have heard of COBOL. This programming language created in 1952 is still used on business applications to this day. Grace was one of the first ever compilers and her work led to the creation of COBOL.

Margaret Calvert

Even in the age of Sat Nav, you’ve probably relied on a road sign at some point, right? Either driving or walking down the street, the reliable signs are a source of comfort when technology fails. Margaret was part of the team that redesigned the whole UK road sign system. It all started in the late 1950s and her work still guides us even to this day.

Carolyn Davidson

‘Just do it’ – the famous tagline from a brand you might have heard of, called Nike. The tick logo was first developed by Carolyn when she was just starting design and the idea behind it to represent speed and motion. Even though the Nike tick is now one of the top 10 most recognised logos worldwide, Carolyn has only made $35 from her design.

Susan Kare

We all know Apple. We all know that they’ve conquered the world of technology by consistently presenting unique designs with both their hardware and software. What you probably didn’t know was that Susan was the designer responsible for developing all the typefaces, icons and other elements that serve as the core for what we now know as the Apple brand.