Web design

Web

How to Create a Multilingual Website

Having a multilingual website means your website is available in more than one language. This is another aspect of Web Accessibility we love talking about here. There are two considerations: do you want your website back end to be in a language other than English? Or do you want to have your website served to your viewer in their preferred language?

Even here in Canada with our two official languages, I’d love to suggest that all Canadian websites should be multilingual and have a French and English version just by default – wouldn’t that be something? But as far as I can see, multilingual websites are typically only offered by government organizations.

And what are the stats showing? It’s easy to be complacent and presume that just because the majority of the internet is English speaking, this “global” language will suffice. But things get a little more complicated when you read stats from Google. 

In fact, the majority of online searches are conducted in languages other than English… And, when we say the majority of the Internet is English speaking, it makes up just 25%. Not much of a majority, is it?

Why does it matter if online searches being conducted in other languages? Simply put, if your online shop isn’t in the language your potential customer is using, you won’t appear in search results.

i18n or Internationalization is a big consideration for many companies, large and small. It can be dangerous to assume that your client base is comfortable with transacting online in just English. Whether you’re looking to improve your user experience (UX) by offering your site in multiple languages, or you want to improve your buyer’s experience online, there are things you need to consider – and things to avoid! – with your multilingual website.

5 Things to Avoid When Building a Multi Language Website

#1. Back away from Google Translate

Do NOT rely on Google Translate! It can be helpful to a certain extent, but the worst thing you could do to translate your website would be to copy and paste whole content into Google Translate, and back again. Google Translate can be helpful for ensuring that visitors will get a general idea of what you’re trying to say. But, cultures and keywords are different across the globe, and it’s not always just about translation (see #4 below!). Google Translate is NOT FOR YOU.

#2. Too Many Duplicate Pages in your Menu

The last thing you want to see is a menu bar with three home pages in three different languages. Three versions of every single page will overload your menu bar, and really diminish the user experience for your visitors. This is where having a language switcher comes in, where you have different versions of your site in different languages. This kind of multilingual website can make for a much smoother user experience!

#3. Using Fonts That Aren’t International

It’s easy to forget, but make sure you choose a font that displays special characters. French accents (like this: é) can totally change the meaning and pronunciation of a word, so they’re important to include and get right. You can read more about font choices here.

#4. Including Culturally Insensitive Photos, Words, Phrases

Watch out for outdated stock photos. Make sure images you’re using are inclusive and represent the people you’re writing for. If you’ve translated your site into 50 different languages, but only show images of one country, people, food, your message is not going to get across. The same applies to the language and words you use. And beware of unintentional ethnocentrism (cultural superiority complex) or even just cultural bias within your writing – are you really writing for a diverse international audience? Consider partnering with a local to translate your content. The Neil Patel article link above also recommends this, and really it’s the perfect solution.

#5. Messing Up Date and Time

1/10/2021.

Wait – is it Jan 10 2021 or Oct 1 2021? This is a small, simple thing that causes endless confusion on all sides of the ocean. Avoid it entirely by just writing out the full date instead: for example, January 10, 2021.

How to Easily Create a Multilingual WordPress Site

If you’re working on a WordPress site, luckily you’ve got some pretty straightforward options. If your site theme isn’t already translation-ready (which means that it already supports multiple languages) then stop right now and just change it. This will involve some revamping of your website, obviously, but this is probably your easiest strategy. I mean, honestly, designers need to be accounting for this already in their design; if they’re not, doesn’t it make you wonder what else they’re skipping? And this is WordPress, which offers the most user-friendly options for improving your website’s accessibility.

If you’re totally committed to your existing theme and for some reason you’re unwilling to change (although may I add, if you’ve been using the same design for over a year it’s probably time to consider updating it just to stay fresh) then there are plugins available for WordPress sites. WPML plugin is the most common, which can translate pages, posts, custom types, taxonomy, menus and even the theme’s texts. It is also great for multilingual website SEO, which is a critical feature. Here’s what WPML itself says it does:

WPML lets you fully optimize your site for SEO in multiple languages.

  • You have full control over how URLs look.
  • You can set SEO meta information for translations.
  • Translations are linked together.
  • Sitemaps include the correct pages and pass Google Webmasters validation.

With WPML, search engines understand your site’s structure and drive the right traffic to the right languages. Sounds pretty critical, right?

You can also read this WPBeginner article for some suggestions on creating a WordPress multilingual site.

Create a Multilingual Website With Other Site Builders

It’s true, there are other website builders out there, with varying features and levels of success.

Wix used to make you duplicate and translate all of your pages, but now their Wix Editor is integrated with Wix Multilingual (sites on Wix ADI are not integrated at time of this writing.) I have to point out that their own support forums encourage users to use Google Translate. (See my Tip #1 above for why that’s NOT a good idea.)

Weebly offers a few apps. From what I can tell, these are paid add-ons. Weebly’s Tutorials are outdated and reference using third-party services, many of which are no longer available, to translate your website content. I do not know if there is now a built-in feature – no offense to any Weebly lovers out there, but I doubt it.

With Squarespace, you’ll have to manually create each set of pages for each language you want to offer – or create a whole separate website for each language. And you’d probably need to upgrade your subscription in order to handle that number of pages.

Shopify does not offer its own native solution to make your store multilingual, but there are a couple different options – although only one of them really makes any sense. You can have multiple stores (this might sound like a good idea at first, but it’s a nightmare to manage and maintain) OR you can use a multilingual app. The most common right now is an app called Weglot, which will let you add hundreds of languages to your store in minutes. It claims to take care of detecting and automatically translating the whole of your Shopify site (including checkout and email notifications), and it also handles the multilingual SEO of your newly translated store. 

Conclusion

Creating a multilingual website isn’t particularly easy, but it should be part of your natural development process. Adding a multi-language option for your website doesn’t have to be highly technical, but you or your web designer should have a good handle on how it will impact the usability of your website, AND your SEO.

At the very least, you can easily research into your target audience and what languages they speak at home. In Canada, Wikipedia offers demographics based on Stats Canada surveys, so it’s not that hard to find – and the results just might surprise you.

speed testing for wordpress websites

Update: In 2019 we migrated this website over to Teachable to offer a streamlined online learning platform. But the speed testing tips here still apply to your own WordPress site!

Sometimes as a web designer, you set up a website based on certain specs and needs and then whoa! Within a very short time, you realize the business has already evolved way beyond what your initial vision imagined and your specs are suddenly much, much different. And the website that was all shiny and new and fun just a short time ago is laggy, getting laggier, and (as its designer) downright embarrassing.

That’s what happened with the first version of the Current ECG website. Our initial WordPress website launch was reasonably good, with a few hiccups (see my article here about what I’ll never do again!) but otherwise pretty smooth and straightforward. We monitored and analyzed and made tweaks over the next couple of weeks, but all seemed to be going okay.

BUT… within a matter of weeks, the site was laggy. As in, 8 seconds+ on PageSpeed, GTMetrix and Pingdom load reports. Even knowing these reports vary a bit each time they run, try counting out loud to 8. It’s a reeeeeally long time when you’re waiting for a website to load.* Who’s going to wait for 8.53 seconds for a homepage to load? I certainly won’t.

*Full disclosure: this load time is how long it takes for ALL the elements of the web page to load, not just the immediately visible ones – ie., it doesn’t necessarily mean you’d be looking at a totally blank screen – or the (God forbid) spinny wheel of death or worse, some cutesy little icon – for 8.53 seconds.

Below is Pingdom’s initial result. You can use Pingdom yourself for any website, and if you own or design a website it’s a worthwhile tool for your resource belt: https://tools.pingdom.com/

GoDaddy’s so-called premium WordPress hosting (more on that another time, but for now let’s just say we are not amused) couldn’t seem to handle the loads that they’d initially assured us they could do. And when we questioned it, they wanted us to “upgrade” and assured us again that it would do the trick. Combined with a whole ream of new ideas that had evolved after the original launch, I realized we needed to do something drastic.

WordPress Hosting for Speed

WordPress has a reputation as a bit of a resource hog. If you’re on shared hosting, which is generally what a “budget” package will provide, you’ll probably be okay with their standard hosting package until your website gets too much traffic, too many features, too many products, bigger, or otherwise complicated. Although budget hosting can’t address high volumes of traffic or specific e-commerce needs, if those aren’t an issue for you then often the budget hosting can be just fine. The best trick is usually a combination of awareness of the problem and making sure that you use a super-clean, well-written theme and you don’t get carried away with third-party plugins. And continually manage your website!

Unfortunately, the theme that we started with for Current ECG looked pretty, but it was bloated – another common problem with WordPress themes, free or otherwise. Combined with the necessary plugins to run all the features we needed, all of a sudden it had become a whale of a WordPress site. Even though there wasn’t all that much content (photos, videos, etc) on it yet, the back end was getting crowded. At one point we had almost 30 third-party plugins, and that was just to run the theme and the necessary components for the business! If you didn’t already know, LESS IS MORE with WordPress websites and having more than, say 10 plugins, can be problematic.

Despite all the tricks applied, it was impossible to streamline it and get it to below 5 seconds to load the homepage. This is, obviously, no good for a website today, especially for one whose primary audience is accessing the site on their mobile devices.

So, over the course of a few days, I initiated a complete re-do.

speed it up

Despite the popularity of the original theme, it wasn’t intended to function as a forum, or a blog, and even the podcasting series (never mind the video podcasts) were already starting to slow it down. It also didn’t seem to work well with memberships and subscriptions, and managing a membership base that is growing fast. Because we were still stuck with the shared hosting of GoDaddy, I moved several components to subdomains, copied the website theme elements to each so they’d keep a consistent brand, and began the process of paring down each subdomain so it could function as fast as visitors expect.

Note the difference in the load time, down from 5.4 to 3.42 seconds, and the number of requests from 76 to 42! 3.42 is still not my final target, but it’s a big improvement over 8+ with the original theme. Most of these improvements came about simply from changing the theme, which required a whole whack of third-party plugins just to function and then didn’t work well with all the other necessary plugins for podcasting, memberships, and subscription management (among other things). That simple change enabled me to remove a huge number of now-unnecessary plugins, and from there ran a series of changes to further improve the performance of the website.

There are several free pagespeed tools available, so don’t rely on just one to test your site. See below for a list of the best wordpress speed test tools.

There are other ways this streamlining could be done (moving to a new host is an obvious one), and this project is an ongoing one so we’ll continue to target improved speed and performance. My own personal target is always going to be the 1-second WordPress website, but sometimes you have to balance the functions you need with your hosting limitations (looking at you, GoDaddy).

the Best WordPress speed test tools are:

Read more about 5 excellent WordPress Speed Test Tools here: https://themeisle.com/blog/wordpress-speed-test-tools/

Happy designing!

Screen Readers: Website design for non-visual users

Designing for website accessibility for users with little to no vision, and using Screen Readers

As a user who doesn’t experience any real vision or textile considerations, I find discussions about accessibility within the internet space fascinating. I had never truly considered the experience a non-visual user might have visiting my website with a screen reader, and after attending a webinar recently it’s become one of my biggest arguments for accessible web design.

A few months ago I attended a webinar presented by a near-blind web developer. She offered a chance to experience what surfing the internet is like for someone who uses a screen reader. It was an absolutely mind blowing experience. 

As a web designer who has full control of my sensory faculties, it can be hard to keep other users’ experiences at hand when designing or redesigning a website. The good news is that if you take these things into consideration, you actually end up with a better-designed website that is easier for search engines to find, and often cleaner in code too. 

There are a few options for internet users who have screen readers to help them surf the web. Note I’m basing pretty much all of this article on this one webinar presented by one user, so some of these assumptions may be biased.

Screen Readers

The screen reader provides a really interesting way to looking at your website’s layout. A screen reader uses an “accessibility tree”. This “tree” comes up when the user’s browser recognizes the reader itself.

Your website title is the first thing read by the Reader. Guess what that means? If your website title is “Stephanie Sedgwick”, that doesn’t tell the visitor anything much at all. However, if the title is “Stephanie Sedgwick, web and graphic designer”, that at least tells them what they can expect if they visit my site. But as a visually impaired person, chances are good a “web designer” website is going to be loaded with images they can’t even see.

Even better, maybe you want to have your title be interesting enough to get their attention – such as, “Steph Sedgwick, providing functional, accessible web and graphic design”. That would at least indicate it might be worth their time to click on my website link and actually visit the site.

The image here is from Speckyboy.com. Check out the related article here: https://speckyboy.com/myths-about-how-blind-people-use-the-internet/

from Speckyboy.com: David Ball blindfold testing websites

A Different Approach

Divide & Conquer

If you’re visually impaired, you can’t take in a website in “one glance”. It’s just not possible visually, but it’s also an impossible goal with readers. Best you can do is ensure your page is divided into regions or chunks that the screen reader can make sense of. ie., Header, Footer, Nav, Main. This will at least give an experienced visitor a sense of the chunks of the page as well as the layout.

List Element

A “list element” will tell screen reader what’s there (ie. “list of 12 items”, ordered or unordered). This can be really helpful if your main menu has a drop-down function. Your visitor can’t see the little notch indicating that there’s a drop-down menu to be found, so they certainly can’t hover their mouse there. And a screen reader needs to be able to recognize that element in order to describe it  to the visitor.

Contact Forms

One of the biggest takeaways from this webinar was a really small thing that makes a massive difference to overall usability. many of us started removing the label on contact form fields because we felt it interfered with a “minimal” design approach. But if you’re using a screen reader, there is nothing to indicate if they’re on the right section. What if you wanted to send a message to the company whose website you’re on? You may be successful in tabbing your way over to the form, but what if you accidentally hit tab too many times and don’t realize it? If your screen reader can’t tell you that you’re on the last name field rather than the email field, you’re going to have a really hard time entering any information into the form collection.

Submit Buttons

Another contact form issue is when the post-submission message is not visible, or appears at the wrong time. Imagine how frustrating it would be to get through the data collection form, only to be unsure whether your message was sent or not. If there’s nothing to indicate to the reader that it was successful, or the success message pops up before you’ve hit “submit”, what kind of an experience is that to offer your visitor? Pretty sure they wouldn’t bother to dig up your phone number to call  you and sort it out.

Too many H1 tags

If you can’t visually scan a page to see what it’s trying to tell you, you need to rely on the html markup to have your reader interpret it for you. If you have H1 tags all over the place, it makes for a very confusing experience.Where’s the important info? What are the different sections?

Sidebars and footers

How many web designers like to clutter up the sidebar and footer with nifty-looking widgets? Full disclosure, I’ve done it myself. What about a sidebar widget that shows recent blog posts, category links, share links, newsletter signups, graphics that don’t include any alt text, ads in the sidebar, “Quick Summary” which aren’t quick at all when you’re not sighted.

High-contrast themes

Some websites offer an option to change their theme from light to dark, offering a high-contrast text version of the site for easier legibility. This is a nice function, although not very helpful for non-visual users. One example of this application is tink.uk.

The Experiment

As part of the webinar, the presenter, Leonie, took us on a screen share to test a specific website: mass.gov. This is the government site for the state of Massachusetts, and handles pretty much every information reference an individual or business would need: tax refunds, food stamp programs, your UI benefits, licenses, permits, you name it – if you need to find out how to do something in Massachusetts, that’s the site you need to go to. We listened and watched as she tried to navigate her way to find the Unemployment Insurance application on that website. 

Leonie, a self-described “very experienced” web surfer, followed her reader’s interpretation of the website. The main menu didn’t follow the standard for software “menu”. While she was attempting to figure out where to try finding the information she wanted, a pop-up appeared on her screen. Us sighted users watching her screenshot knew it was a sign-up request, but there were no cues to tell the screen reader how to interpret it. So Leonie was left trying various things to try to figure out what as going on. She tried hitting the Esc button, which brought her to a search form, and without any way to interpreting the visual cues that were being given, she had no idea how to proceed. She ended up giving up and exiting from the website – long after most of us would have given up in frustration. 

Edge doesn’t support html a11y. But don’t discard it – and Internet Explorer – too quickly; the reality is that there are a lot of screen reader users that are still on older versions of reader technology that rely on IE. Other browsers, however, are pretty good, and many offer extensions that you can try. You can also test a variety of screen readers to really help you understand your web user experience. There are readers available on a few platforms including Windows (open source readers such as NVDA and Firefox), Mac (voiceover only), Android (Talkback), and Apple devices (Rotor). 

Best tips for designing accessible websites

Guess what? For sighted developers, testing doesn’t have to be complicated. Try this handy tip: cover your screen. Or just turn it off. You don’t actually need to use screen readers to get a sense of what your site “looks” like! That will help you to “see” what kind of experience your website actually offers for non-visual users.

When in doubt, KISS. 

Keep It Simple, Stupid.

Really, we don’t need to say anything else here. But if you’re still reading this, then consider these basics:

Field Labels – If you’re thinking about removing field labels because you think it clutters up your design, think twice – what other functions might those labels serve? Is there another way you can clean up your forms and still keep the labels there?

Media Players – Play/pause buttons can be really tricky for non-visual users to understand. This makes perfect sense to me, because even as a sighted user an automatically playing video can cause instant anxiety while I madly click around trying to find the way to shut it off. If the volume is on, it’s even more anxiety-inducing. It’s awfully similar to my reaction to alarm clocks, actually. Autoplay = OFF!

Handy Tools – There are also some browser screen readers that can be of some help to us sighted developers and designers. At the time of this writing, Chrome offers an extension called ChromeVox. For desktop users, this screen reader is also found in Chromebooks. Although it’s not commonly used by people with vision impairment, it can be a useful pairing for testing purposes. For more info about readers, try www.hollier.info/browserpairing/

Interested in more? Try some of my other articles here, and be sure to check out Smashing Magazine in the link below.

Leonie’s webinar was so useful on promoting accessible usability, it is now available for free on smashingmagazine.com/2019/02/accessibility-webinar. I highly recommend it for anyone, not just web designers and developers.

Building a Subscription WordPress Website

Or Why Not to Use a Countdown Timer

One of my more challenging recent projects involved setting up a website that included a members-only area. Now, normally building a subscription WordPress website is not such a complicated thing of itself. But there’s nothing like compounding the pressure by using a live count-down timer for the new site’s launch.

Part of the beauty of WordPress is the proliferation of third-party plugins. They can help allow your website do almost anything you want. Often – okay, most of the time – those plugins are open source and/or free. With a little elbow grease, you can have far more functionality than what you get with paid-upgrade websites offered by other platforms (ahem, GoDaddy. Squarespace. Shopify.)

Sometimes, though, I can get a little carried away with plugins. It’s okay, I admit it. I’m usually pretty good at reining myself back in, so it all works out. I generally like the idea of countdown timers on a coming soon page – or at least, I did until recently. But it turns out that might be one plugin I’ll ignore next time… When you have a growing audience anxiously awaiting the launch of the new website in anticipation of some pretty cool giveaways, you’d better be darn sure you know exactly what’s going to happen in that first Zero Plus One Minute.

Payment Gateways

The trick that I found with this particular launch was managing the payment gateways. You can run as many test and sandbox scenarios as you want while the website is still in “coming soon” mode. But once that site goes live, you have to simultaneously take the payment gateways out of “coming soon” mode too. Sound easy? Maybe. But you always need to account for weird little glitches.

All the followers who signed up for a notification of your site launch, and all the followers who knew exactly what time your site was set to go live, were ready to jump in and check it out. That’s a lot of people relying on your website working the way you think it will, and you DO NOT HAVE TIME to mess around.

Even with extensive testing and prep leading up to this launch, I had absolutely set myself up for some launch quirks. Add the pressure of the countdown timer and the fact that hundreds, even thousands of followers had been posting and tweeting about the upcoming launch, I’m lucky I didn’t fall flat on my face.

Happily, the payment gateway issues were resolved within the first 10 minutes or so. (Happily = it wasn’t longer than 10 minutes, but ten minutes online is a very long time!) Over the next couple of days we tweaked some minor details to improve and streamline. Those first 10 minutes were pretty intense and I think I’ll return to recommending a “soft” launch to my clients from here on.

The end result

*This website has since migrated to a Teachable platform.

My client has a subscription WordPress website that (in my opinion) is capable of doing even more than we’d initially hoped for. His marketing campaign is developing and evolving. His new website can handle all of his business as well as a huge potential for growth in his first year. And I have obviously learned to handle the countdown timer with great caution!

Please check it out at https://currentecg.com, and if you’re a paramedic or other emergency medicine practitioner/student, try out his podcasts! To see more details about the website design for Current ECG, click on my portfolio page here.

current ecg homepage screenshot

Your Website is Like a Houseplant

Or how to keep your website from withering away

Update: In 2020 we revised this website again and switched to a SquareUp website (Weebly).

Recently I’ve completed a couple of redesigned WordPress websites for local businesses in Windsor. It got me thinking about how easy it is for business owners to forget to keep your website up to date.

Pretend your website is a houseplant: You don’t buy it and think, Whew – done!… Then forget to water it. Or maybe you do – in which case, you might want to invest in succulents. Websites need that fresh intake just as much as your houseplant does.

And to be sure, it’s easy – especially for entrepreneurs – to feel overwhelmed with all the hats you have to wear. Too frequently, that website is probably the last thing on the priority list – not because you don’t think it’s important, but there’s just SO MUCH to do before you get to it! And then, regardless of the CMS your site uses, you have to add in the learning curve of how to use it. Even though WordPress is a relatively easy platform to use, if you’ve never used it before it’s a new skill set. Without practice, it can fade quickly and then updating your site just becomes yet another chore.

But that’s where outsourcing can save the day and revive your plant – and your website. My web design services can range from full-service turnkey products to buckets of hours that can be applied to your own project. There’s even a low monthly update option that can take care of most of your “watering” needs. Check out some offerings here.

Case Study

The website for The Spoke & Note is the perfect example of how your business can evolve past your website to the point where the website is no longer serving you well. Your website needs to be kept up to date, just as your business does.

The Spoke & Note – music and bikes in Windsor

In 2018, Tony & Ashley Wood opened a brand new shop in Windsor, focusing on offering services and products for bike and music enthusiasts. At that time, I provided them with a very basic, one-page WordPress website that was low on budget and intended to effectively get them online and into the various search engines.

But after one year of operations, The Spoke & Note had evolved far beyond the needs initially served by their first, simple website design. As their web hosting was coming due for renewal, we decided it was definitely time for an overhaul.

The website

Having set up this website for The Spoke & Note last year after they opened, it was a real treat to be involved with a total revamp when their hosting was coming due for renewal. Their business has evolved and expanded significantly, and their first design was not serving them well anymore. Their website had a lot of room to improve!

Now their new website is bright, with lots of white space, and still prominently featuring their penny farthing rider logo. The biggest difference is a LOT more content, to help drive the SEO of the website – and to really top off their functionality improvement, we added an e-commerce catalogue. Now folks will find their website more easily and also see the range of products and services they offer.

WordPress and WooCommerce

Using e-commerce with WordPress via WooCommerce is a great choice as there are so many ways you can customize your online shop. In this case, we chose to disable the online shopping feature for now. Utilizing a YITH catalogue plugin, we can list the items in the store as a catalogue only. Although the store carries far more products than are included on the online catalogue, we chose to showcase select categories of items to give visitors a sense of what they might be able to find if they come by.

The Design

*Note in 2020 we revised this website completely. It is no longer a WordPress website.

I was pleased to use this website redesign as a pilot project for a WordPress page builder that I’ve been wanting to try for some time. Beaver Builder is one of the highest-rated website builders that has a strong focus on accessibility. Rather than use WordPress’s Gutenberg editor (which I feel is still loaded with problems and design issues), Beaver Builder will allow the site owner to customize their site after it’s completed without losing the branding and visual focus already created.

And as a convincing bonus, if we ever switch away from using Beaver Builder, all that hard work and content won’t be lost or scrambled – which is often the case with other page builders.

Features

  • Responsive & Mobile-friendly
  • Fast, clean design
  • WooCommerce functionality
  • Instagram feeds and other social media integration
  • SEO optimization built-in with schema markup and compression

Go check it out! And while you’re at it, be sure to like and follow their page on facebook to keep up with their events.

What is the New WordPress Block Editor: A WordPress Gutenberg Guide

If you manage a WordPress website, you probably noticed the warnings and additional editor plugins that were being promoted over the last year. For a while, there was a Gutenberg editor plugin that would help you to “test” your website. But as of December 6, 2018, WordPress 5.0 and later will use Gutenberg as the default content writer for WordPress. And as a “block editor”, boy, is it different.

Whether or not you’ve updated your site to WordPress 5.0 yet, you’re going to need to learn how to use the blocks and the editor’s other features, to create content on your site. And you might want to make sure you read this through before you jump into that WP5.0 update, because this has a pretty significant impact on your site.

There’s some debate about whether this editor is the “future of website creation” or just a “nail in the coffin for WordPress”. It certainly seems that WordPress came about this drag-and-drop editor well after so many other drag-and-drop editors were popular. So perhaps it was a bit reactionary. However, it does make for some interesting discussion and it definitely allows for a more intuitive experience for newcomers to WordPress.

In this article, we’ll go through the following:

  1. What is Gutenberg?
  2. What does Gutenberg do?
  3. What does Gutenberg change in WordPress?
  4. Pros & Cons of Gutenberg
  5. Accessibility of Gutenberg
  6. Understanding Compatibility Issues

1. What is Gutenberg?

Named after Johannes Gutenberg, who invented the mechanical printing press, Gutenberg was introduced to the world by Matt Mullenweg at WordCamp Europe in 2017. Gutenberg is the new default WordPress editor, in a drag-and-drop “block” editor style much like Wix, Divi, or Visual Composer. It claims to simplify website creation and editing for the average non-technical user.

Gutenberg replaced the WordPress TinyMCE editor (also referred to as the classic editor) as the default WordPress editor in WordPress 5.0. While Gutenberg was the official name while the editor was”  under development , it’s now just “the WordPress block editor” – or “the WordPress editor” – because it’s officially part of the core software.

The old WordPress classic editor.
The new Gutenberg or block editor.

It’s not just aesthetic changes, though. The block-based approach to content is a whole new editing experience, with the eventual goal to have the block editor go beyond posts and into page templates and ultimately, full site customization.

Haven’t updated your site to WordPress 5.0 yet? If you’re worried about Gutenberg breaking your theme or plugins, install and activate WordPress Classic Editor plugin first. Then update your WordPress so you have the latest for performance and security reasons. Just bear in mind that Classic Editor will probably be phased out in another year or two, so you’re going to have to get used to Gutenberg sooner or later!

2. What Does Gutenberg Do?

Gutenberg is more than just an editor because it allows you to handle website content in customizable chunks, or blocks. You don’t need to be fluent in HTML or write shortcodes, and you can control a website’s entire layout (back and front ends) from a single console.

What’s a block?

Well, a block can be pretty much anything. For example, you can have blocks for:

  • Regular text
  • Images
  • Video embeds
  • Buttons
  • Widgets ( yes, those same widgets you use in your sidebar or footer)
  • Copy and paste links for embeds
  • Add excerpts for subheads
  • Third-party blocks from plugins

And because each block is “separate”, you can also add things like custom backgrounds  just for specific blocks . In general, it gives you more flexibility and in-depth control.

3. What Does Gutenberg Change in WordPress?

The sole purpose of the Gutenberg editor is to provide an alternative to the current open text editor, not to mention the difficult-to-remember shortcodes, with an agile and visual user interface (UI).

In short, Gutenberg doesn’t change how WordPress functions. It does, however, change the way website owners (or creators) interact with it.

So Gutenberg is like a page builder?

Well, no actually. It does make it easier to style regular content like blog posts or standard pages, but it’s not a great substitute for page builders – at least, not yet.

Gutenberg attempts to combine the best features from both page-builder plugins such as Divi and  Visual Composer, as well as do-it-yourself platforms such as Medium, Wix and Squarespace. So, just like those page-builder plugins, you can handle multi-column layouts through a single interface.

Does this spell the end of plugins such as Divi and Beaver Builder? My opinion is no. In fact, you can not only continue to use those plugins but I would actively encourage you to do so. Keep reading to find out why.

4. Pros & Cons of Gutenberg

PROS

  • No technical skill is required to make a custom layout for a blog post or website. User-friendly editing experience.
  • Blocks allow non-developers to create complex layouts.
  • Gutenberg editor itself works reasonably well on mobile.
  • Increased screen space can offer a less distracting user experience for many developers.
  • Developers can create customized reusable blocks using HTML5.

CONS

  • Doesn’t support responsive columns.
  • Backward compatibility is a primary concern for developers. It can destroy current themes and plugins, especially ones that require integration with TinyMCE.
  • Can’t design sites to be mobile-first (unless you’re using a theme specifically designed for it).
  • Accessibility with Gutenberg has actually regressed from Classic. Read more below.
  • For average users and non-developers, it’s kind of like putting Wix into WordPress, but without the performance of WordPress.

5. Accessibility of Gutenberg

If you start digging, there’s some flak online about Gutenberg’s so-called accessibility. In my ignorance, I implied that WordPress and its “Make WordPress Accessible” objective were awesome in one of my last articles. But according to a recent webinar offered by Smashing Magazine, Gutenberg did not actually make accessibility its first focus. In fact, the Accessibility Team Lead, Rian Rietvald, resigned in an attempt at protesting the lack of accessibility considerations.

Now that Gutenberg has been released – and forced onto us WordPress users (and some of us think the release is premature) – it now has to actually reverse engineer itself in order to make it more user-friendly. How ridiculous is that?

In spite of the improvements for the average user, in my opinion the cons definitely outweigh the pros.

6. Understanding Compatibility Issues

Despite its simplicity and agility, Gutenberg might not be everyone’s cup of tea. Most WordPress developers (including myself) might find it difficult to work with, especially in the beginning.

  • Owing to the backward-compatibility issue, you will need to update many plugins and themes to ensure they are fully compatible with the new editor. You may also need to go page by page or post by post to convert your content to blocks. If you have a lot of content, this is going to take some time.
  • For the time being, blocks are more focused on content. As a result, Gutenberg lacks precision and control over the layout of custom websites.
  • Shortcodes are replaced by shortcode blocks. However, you will still be able to add shortcodes from the widget block.
  • Meta boxes will be available under a new name and a new UI. Conflicting meta boxes are likely to lead to the classic editor, instead of Gutenberg, with an alert. While this system might prove helpful, some meta boxes will not be supported in Gutenberg.
  • Custom post types – some claim that they are supported and remain backward-compatible in Gutenberg, and others say you might need another plugin that is Gutenberg-friendly to manage custom post types.
  • You won’t be able to turn off Gutenberg once it is integrated in WordPress core. However, you can disable it using the official plugin – at least for now.

Regardless of how I or other developers might feel about the implementation of Gutenberg, the upshot is that it is following the current trend in website creation. As time goes by, we’re seeing Gutenberg-ready themes, plugins and tools surfacing everywhere. So you might as well be a part of this change from the beginning.