LATEST FROM OUR BLOG

Take your daily dose of (only) relevant news, useful tips and tricks and valuable how to's on using the latest web technologies shaping the digital landscape. We're here to do all the necessary information sifting for you, so you don't have to, to provide you with content that will help you anticipate the emerging trends about to influence the web.

How to Make Icons Accessible to the Widest Range of Users? 10 Best Practices
Material icons, flat icons, thin icons, ready-made or fully custom, on-brand icons... No matter what type of web icons you opt for, the same rule applies: the need to be visible to all users. So, you ask yourself: "How to make icons accessible to... everyone?". For, in vain you go with an eye-catching web icon design if its color contrast is so low that some users just don't see it. Or if it's interactive, but only when... mouse clicked. See my point? Therefore, in today's post I'll tackle aspects like:   what accessible icons are what goes into making icons accessible: most effective approaches and best practices what are the different types of web icons and the specific techniques for making them accessible    Let's dive in:   1. What Are Accessible Icons More Precisely? What makes an icon accessible to screen reader users? What requirements should it meet to be fully inclusive? Here are the 6 most important things to consider when you're designing accessible icons:   1.1. Make Them Noticeable For, it's pretty logical:  If an icon's not instantly perceivable to all visitors, it becomes inaccessible. And by "instantly perceivable", I mean that users shouldn't be constrained to perform some sort of action in order to make the icon... visible. 1.2. If It's Purely Decorative, It Shouldn't Be Read Out One of the best practices for designing accessible icons (decorative icons) is to skip the part where the ALT text gets read out to screen reader users. That's because, in the case of a decorative icon, informing the user about its existence on the page (e.g. "There is a key icon!") is just... superfluous. Which leads us to the next requirement that all "wannabe accessible" web icons should meet:   1.3. Always Add a Text Label The magnifying glass icon is universally recognized as a "search" tool. But that's the only universally recognizable icon... Therefore, it's best to play safe if you want your icons to be accessible to the widest range of visitors. Whether you have a hamburger menu icon or a house-shaped one, accompany it with a text label to prevent any ambiguity.   1.4. Keep in Mind the Color Contrast  This is one of the recommendations on top of any "How to make accessible icons" list that you might stumble upon: Make sure there's enough foreground-background color constrat in your icons, so that visitors with different levels of visual imparirment can easily notice them.   1.5. Make Sure They're Properly Sized And by "properly sized" I mean somewhere around 44x44 pixels. Pay particular attention to the size in the case of icon links: Any smaller than 44x44 pixels and they become inaccessible on smaller devices: some users won't be able to click on them.   1.6. Make Sure They're Mouse, Touchscreen, AND Keyboard Accessible Have you decided to "sprinkle" some interactive icons across your website?  Then make sure that users can easily click on them whether they use their mouses, they tap on their touchscreens or they depend on their keyboards for that. 2. How to Make Icons Accessible: 10 Approaches & Best Practices  Now that we've gone through "what" makes an icon accessible, let's get to the "how-to" part: How can you make your web icons more accessible for screen readers users? Here's a list of simple approaches and valuable tips to consider:   2.1. Consider Pixel Measurements and Square Dimensions  Most icons have square dimensions.  And if you're curious which are some of the most frequently used sizes for web icons, here are some popular examples:   128x128 16x16 512x512 64x64 256x256   2.2. The Easiest Way to Make Your Linked Icons Accessible Is to... ... add an ALT-text that lets the user know what the link does. What its destination is. For instance, you can add "Email us" as the ALT-text accompanying your "@" email icon. 2.3. When In Doubt, Choose an SVG or a PNG File Format  Even if some prefer the SVG icons systems, while others choose to go with PNGs (making icons accessible is easier with that file format), all web designers agree on this: Icon fonts should be the very last option to consider.   2.4. Make Sure Your Document and Your Icon Are The Same Size    2.5. See that There's Enough Icon-Background Color Contrast Will you be adding your web icon to a background?  If it's a yes, then check and adjust the color contrast.   2.6. Check Your Icon's Size Before Exporting It The 6th tip on our "How to make icons accessible" is pretty... predictable: All web icons should be properly sized prior to export, making sure they're not too large.   2.7. Hide the Text Accompanying the Icon, but Keep It Visible to Screen Readers Let's say that you've inserted an explanatory enough copy text within your link icon, but you don't want it to be visible to all users.  You want it to be visible to screen readers only. For this, you can use a visible-hidden class selector.   Word of caution! Going with this solution does call for 2 compromises:   the click/touch area is smaller screen reader users might not understand what that icon does (the VoiceOver will then read something like: "internal link, home"). 2.8. Accompany Your Semantic Icons with Visible Text to Avoid Ambiguity "What's a semantic icon?" you ask?  A standalone icon that has meaning.  Now, if you want to make sure you'll prevent all situations where users might just overlook it, just add a visible "Menu" text next to it. This way, its meaning will be 100% clear to anyone.   2.9. The Simplest Way to Make Icon Fonts Accessible Is... ... to add aria-hidden="true" to the element. Note: again, whenever possible, avoid icon fonts and opt for inline SVGs instead.   2.10. Skip Adding ALT-Text to Text-Based Icons Let's say that you have an "Email Us" linked icon.  Now, it would be quite superfluous to have an ALT text added to, saying the same thing to the screen reader user, wouldn't it? In this case, the icon is purely decorative, since the copy text around it already conveys the meaning on its own.   The END! Now you have at least 10 different answers to your "How to make icons accessible to the widest range of users" question. But maybe you need help choosing the best approach and implementing these best practices in order to make your brand icons more accessible.  We're here to help! Just drop us a line and let's find the most suitable solution for making your web icons available to everyone visiting your website. Image by Виктория Бородинова from Pixabay  ... Read more
Adriana Cacoveanu / May 06'2020
How Good of a Website Analysis Tool Is Google Lighthouse? 6 Reasons to Use it (plus, OPTASY.com Lighthouse score)
“What's the best audit tool that I can use to check my website's performance?” you ask yourself. Why would you consider Google Lighthouse? How reliable is its scoring system? And how accurate are the results that it provides? Now, let's get you some answers on:   what is how to use  why you'd want to use … the Google Lighthouse testing tool. 1. What Is Google Lighthouse? Before we get into the “Why”, let's see “What” the Google Lighthouse score is, actually: It generates separate scores for different aspects on a web page, like:   SEO rundown of best practices accessibility performance PWA   In other words: it evaluates precisely the factors with the strongest impact on the user experience (page load time, anyone?). What you get is a report on the measures to take in order to fix the identified issues. And to hopefully get a maximum Google Lighthouse score next time...   2. How Do You Use Google Lighthouse? And here we tackle one of this testing tool's biggest selling points: ease of use. Now, there are 3 ways that you can run a Google Lighthouse report:   2.1. Use it Right in Chrome DevTools  The simplest way to run this audit tool on your website is to:   Download Google Chrome for Desktop (if you haven't done that already) Enter the web page's URL in your browser Click F12 to open up your Chrome Developer Tools (or just click “Inspect” anywhere on the page) Hit the “Audits” Tab Click “Perform an audit” (you'll see there the aspects of your website that it's about to check: SEO, Accessibility, Performance...) Hit “Run Audit” to have Google Lighthouse generate your audit report directly through your browser   Easy peasy... 2.2. Install the Lighthouse Chrome Extension If you prefer to run this website analysis tool as a Chrome extension, just:   Download Google Chrome for Desktop Install the extension from the Chrome Webstore Go to the web page that you want to test Click the “Lighthouse” icon newly added to your Chrome address bar Hit the “Generate Report” button   Just wait for about 30-60 seconds for the tool to inspect the page and generate the results in a new tab. Source: developers.google.com   2.3. Run It Via the Node.js Command Line  If you're more of a CLI person, you'll find this workflow more suitable:   Again, if you haven't downloaded Google Chrome for Desktop already, now it's the time Install the latest version of Node.js   Install Lighthouse by typing npm install -g lighthouse into your command line Next, enter the lighthouse <url> to run an audit   Note: use the lighthouse –help command to get an overview of all the options. That's it! Note: it's an HTML version of the audit report that you'll get when you run Google Lighthouse via the command-line tool. Just so you know it. Tip! There's also a... forth way to use the Google Lighthouse audit tool, probably one of the quickest ways to run your report:   Just go to web.dev Click “TEST MY SITE” Enter your URL  Click “RUN AUDIT”   And voila: you'll have your Google Lighthouse score generated for that particular web page in no time! 3. 6 Reasons Why You'd Use Google Lighthouse (And Why We're Using It) Now that you know precisely what it is and the different ways that you can use it: Why would you choose this particular website auditing tool over... all the other testing tools out there? To give you an honest answer, let me share with you the key reasons why we, the OPTASY team, are using it on our clients' websites and even on our own site:   it's so easy to use: why compromise ease of use for accurate audit results, when... you can have both? it's Google-developed (not just a no-name third-party testing tool) it's open-source it's fully automated it tests how the scanned web pages look and perform on mobile devices, as well it's user-centric metrics that it provides: what's the point of optimizing a website merely for our own “fame and glory” and... risk losing sight of the user's own expectations?   Whether we're:   building a new website for one of our clients optimizing a client's existing website optimizing OPTASY.com itself   … and we want to check how well its web pages perform, we just run a Google Lighthouse audit. And speaking of using it on our own website, here's a sneak peek into the Lighthouse Score that it's got after we put it through some major optimization work: In short, the scoring system and suggestions of improvement that Google Lighthouse generates make the best "barometer" for us to:   assess the quality of the audited pages (in case of an existing website, so we know what we're dealing with) evaluate our work (after we've built/improved a website) identify existing issues and prepare our “To Do” lists to get them fixed   4. Final Word  Do you want to learn more about how to use Google Lighthouse to its full potential? About how you can boost your Google Lighthouse performance score, like we have for OPTASY.com? Or maybe you've already generated a report, you have the list of recommendations at hand and you need help to implement them on your website? Either way, we're here to help. Just drop us a line. ... Read more
Adriana Cacoveanu / May 01'2020
Top 10 Drupal Websites in Asia: From The Jakarta Post to... the Mitsui Chemicals
What are the top 10 Drupal websites in Asia?  What famous Asian brands, newspapers, NGOs, key players in various industries, have their websites powered by Drupal? To answer your question, we've done some digging and put together a selection of the best Drupal-based websites in Asia, ranging from the most popular to the most niche ones:   1. Mitsui Chemicals Inc., Japan   Japan's leading chemicals manufacturer runs its multi-site infrastructure on Drupal. Why Drupal?   because of the powerful multi-site and multi-language features that it provides, out of the box because Drupal enables them to store content centrally and then share it, personalized for each country, across their ecosystem of sub-sites: Japan, Germany, China, Singapore   In short: Mitsui Chemicals Inc. needed a robust CMS. One that could withstand its heavy structure of domains and groups of sites and enable them to manage all their content on a single platform. 2. ABS-CBN News and Current Affairs, Philippines The news division of this reputed media corporation in the Philippines —  ABS-CBN — has its website powered by Drupal. And the reasons why they chose this CMS are... pretty obvious:   we're talking about a complex network of various types of content: video, multimedia, story... the website delivers critical news in real-time, so Drupal's feature of processing and publishing data in real-time is critical for them the newspaper has a whole community of online readers built around it, so it depends on Drupal's access control system   A content-heavy, high trafficked website, that updates its content in real-time… Drupal's built precisely for this type of scenarios. And that's why ABS-CBN News and Current Affairs is listed among the top 10 Drupal websites in Asia. 3. The Haribon Foundation, Philippines Now, we couldn't have left out non-profit organizations from our list of popular Drupal websites in Asia, now could we? The Haribon Foundation is a biodiversity conservation organization in the Philippines, that trusted Drupal for turning its website into a user engaging one. One that tells their story right to all the future volunteers, donors, members, and partners. Why Drupal?   because it ships with plenty of built-in functionality, enabling them to get their website up and running in no time because it provides them with a robust taxonomy system, which enables them to categorize and organize their content  because it's scalable: it's built to accommodate all future initiatives, no matter how bold, and all future loads of traffic because it's open-source  because it's easy to use by non-technical users (anyone can create, add, publish, and further edit content)   4. The Beijinger, China A community website with an audience made of English-speaking expats living in Beijing, China. Why did they go with Drupal?   because of the different types of content that they display on their website, ranging from forums to events, to reviews, podcast, blog, directory, photo gallery because a significant part of the content is user-generated, which means that they can get the most of Drupal's user role and permission-based access control system  because they needed a CMS that could grant them the best editorial experience: adding and editing so many types of content, on different sections of the website, had to go... smoothly   5. The Jakarta Post, Indonesia, One of the Top 10 Drupal Websites in Asia The largest English language newspaper in Indonesia, The Jakarta Post is on the list of the key media sites using Drupal. A heavy load of content, that needs to be updated in real-time... these are just 2 of the key factors that turned Drupal into the only CMS suitable for this high trafficked newspaper site.   6. Amman Stock Exchange, Jordan Another one of the top 10 Drupal websites in Asia, due to:   the crucial role that this economic platform plays in the region  the outstanding user experience that it provides, despite the complex technical challenges that it needs to deal with “in the backstage”   Why did they choose Drupal over any other CMS option?   Drupal enabled them to provide their users a mobile-first experience: a seamless user experience was crucial for the Amman Stock exchange website, with users being enabled to view charts, graphs, and tables on the go, from any devices Drupal provides the right tools to “empower the end-user”: users can set up and easily manage their own portfolios on the website, set filters for the content that they receive, personalize their notifications, etc. Drupal's robust enough to withstand high spikes of traffic Drupal integrates seamlessly with their ecosystem of third-party systems, that provide the Amman Stock Exchange users with market and financial information Drupal is multi-lingual right out of the box: Amman Stock Exchange could provide a personalized experience to business owners and investors from all over the world   7. Pacific Aikido, Japan The Aikido dojo, which been teaching its classes in and around Tokyo since 1991, has its website powered by Drupal. And it's no surprise to anyone why they chose it:   Drupal makes it plain easy for the end-users to manage their own content: students and parents can log in and engage in conversations with the site owner, while the latter can upload and update content quick and easy Drupal's conveniently extensible: it enabled the team working on this project to implement the Image API and thus enable the site owner to upload his/her own images nice and easy   Images that get resized automatically, by default, once published on the website... The website's both a public-facing site and an easy to use private back-end, where students and parents can communicate with the site owner. 8. Playtika, Israel We can't put together a list of the most popular Drupal websites in Asia and not include Playtika, the leading gaming company based in Tel Aviv, Israel. Since Drupal ships with a whole collection of responsive tools and responsive themes, it made it a lot smoother for their UI and UX design to look great on both their web and mobile websites. 9. Al Bawaba, Jordan This independent digital news, blogging, and media platform — the largest one in the Middle East — is on all the “Top 10 Drupal websites” selections. Why did they decide to build their digital presence with Drupal?   because they have a large, diverse, and expanding content team — different types of editors, researchers, journalists, publishers — so they decided to leverage Drupal's system of user roles and its flexible content workflow because they depended on Drupal's powerful SEO features because they were facing increasingly high volumes of content (multimedia content here included) and Drupal's built with content-packed websites in mind   An efficient digital media assets solution and a conveniently scalable CMS were critical for this content producer and distributor in the Middle East. So, Drupal was the only CMS framework that checked all the requirements off their list.   10. Taiwan Environmental Information Center     Another NGO — the “product” of a larger non-profit and non-governmental organization: Taiwan Environmental Information Association —that's earned its place among the best Drupal websites in Asia. Their website stands out as an extensive network of environment-related information: editorials, green events, feature articles, news... Now, the reasons why they trusted Drupal with their digital presence are clear to anyone:   it's open-source it empowers the content team to add, edit, and publish content (multiple types of content) on the fly it's extensible and conveniently scalable it's non-technical user-friendly   The END! This is how our list of “top 10 Drupal websites in Asia looks like”. What other websites would you have added? Image by Lizbet Palmer from Pixabay   ... Read more
Adriana Cacoveanu / Apr 21'2020
Which Drupal Page Builder Should You Use: The Gutenberg Editor or Cohesion DX8?
You want to enable your content editors to build new pages on their own. So, which drag and drop Drupal page builder do you choose? Let me try and guess what's on your "wishlist":   to be super easy to use, with an intuitive front-end editing interface to be light to be compatible with your Drupal theme to load fast to provide a decent collection of ready-to-use designs to be conveniently flexible   Have I guessed it right? Now, which of these 2 popular editors for Drupal 8 — Gutenberg Editor and Cohesion DX8 —  checks the most must-have features off your list? Let's compare them: 1. Introducing: Acquia Cohesion DX8 “The only low-code platform for the design, build and management of Drupal 8 websites.” (Drupal.org) A Drupal website builder that empowers you (your designers and content editors) to create all the visual aspects that make a website:   layout theme element styles templates components   And all that in the browser, via a highly visual drag-and-drop user interface... With no need to write CSS, PHP or HTML. Here's how it works:   Acquia Cohesion DX8 provides your editors with a library of branded (reusable) content components — sliders, tabbed elements, hero sections, banners, video players, feature panels they select, mix and match, and assemble together the blocks of their choice … and fill them in with content.   Tip: your non-technical editors can also edit, inline, those display components (block “templates”). And voila: A simplified way of building Drupal websites. A component-based approach to building a Drupal site. And during all this time, your development team can focus on building all those unique functionalities that you have in mind. 2. 5 Reasons Why You'd Want to Use Cohesion DX8 Now, let's talk... benefits. What are the main advantages of choosing Acquia Cohesion as your Drupal page builder?   2.1. Your content editors can assemble new page layouts quick and easy. And “quick” is the keyword here.  The non-developers in your marketing and other teams can assemble new web pages in no time: They just drag and drop and arange different components available in the library, making them fit into the design pattern that you've already defined for them.   2.2. Your marketers are free to edit content & layouts right on the page. Another strong benefit that you can reap from using this particular Drupal layout system is that your editors can easily modify content/layout right on the live website. In other words, Acquia Cohesion DX8 provides them with an easy to use in-context editor. This means that your content editors can open the page that they need to update and make any change in... seconds. Tip: you get to set different levels of permissions and keep track of who's updated what on the website.   2.3. Your content editors can build and manage your website with no coding skills needed. In other words, you'll turn your editors into... web designers. Source: Dri.es They need no coding skills, except for a low-level understanding of some general website concepts, to put together a new enterprise-grade Drupal website if needed.   2.4. You can replicate the newly created design on all your Drupal websites Why would you opt for this low-code site builder?  Because it enables you to export and reuse the same style configuration and web design across your entire ecosystem of websites. To sync your brand styles across your whole network. An easy way to control your brand across a multi-site structure.  And a guarantee that your non-developers, who are granted such “power”, will keep brand-compliant in their work.   2.5. Your non-technical teams can build uniquely designed and fully responsive websites The non-developers in your team (content editors, designers with little coding knowledge) can easily put together custom layouts using this drag and drop page builder for Drupal. Source: Acquia.com Moreover, Acquia Cohesion DX8 makes it easy for them to preview their newly created layouts in multiple device aspect ratios.   3. What You Can Expect from Using this Drupal Page Builder Let's say you've already found the answer to your “Gutenberg Editor vs Cohesion” dilemma: you've opted for Cohesion DX8. Here's what you'll notice:   your team sets up and launches brand new Drupal websites faster now the costs for developing new websites have lowered all the Drupal 7 to Drupal 8 website migrations have been streamlined keeping brand consistency across your multiple Drupal websites is no longer a challenge your digital marketing and content authors are more confident to experiment with new content (since updating and reverting changes is so straightforward) your senior developers gain more time to innovate; to focus on their own development tasks   4. What You Can Build with Cohesion DX  Let's see precisely what you can create using this page editor for Drupal:   full page content templates  master templates that your content editors can use to put together headers, navigation systems, footers... menu templates, from basic list menus to interactive, multi-level ones content components, which can then be assembled together into unique layouts CSS styles view templates for your blocks or page page content layouts   5. Introducing: Drupal Gutenberg       The Gutenberg Drupal 8 module comes as an alternative to the body field editor in Drupal: Editors can build a new page by assembling content blocks instead of writing text in a text body. Source: Drupalgutenberg.com A Drupal page builder that enables them to:   move blocks around the page, as needed reuse uniquely designed contrib blocks across multiple pages on your Drupal site and even across multiple projects select from the pre-built blocks — lists, paragraphs, tables — that Drupal Gutenberg provides them with insert raw HTML in the form field   When it comes to the “user-friendliness” factor, Drupal Gutenberg “bids on” a highly visual editing experience, just like Cohesion DX8 does: Any member of your team, regardless of his/her technical skills, can easily build a new page by putting together media, text, and content blocks.   6. 4 Reasons Why You'd Want to Use Drupal Gutenberg  “Why would I choose precisely Gutenberg as my page editor?” Here are some compelling answers:   6.1. You empower your editors to build new landing pages on their own. It's all about “democratizing publishing": Drupal Gutenberg enables them to add, move around, and edit blocks quick and easy.   6.2. Your editors get a whole collection of custom blocks to choose from That's right: Gutenberg Cloud library comes as a rich content repository for contributed blocks. From:   call to action sections to uniquely designed forms to web components   ... your content editors get a whole collection of blocks created by other developers to dig into when building new pages.   6.3. You grant your editors a flexible, visual editing experience.  One of Drupal Gutenberg's biggest selling points is its React-powered UI API. The JavaScript type of “fuel” that makes the editing experience both flexible and powerful:   a scalable, high performant editor that content creators can use with great ease; no technical background needed   Where do you add that they get “spoiled” with lots of pre-designed elements to choose from, as well.   6.4. You enable your editors to use and... reuse Drupal media assets. Gutenberg's conveniently integrated with Drupal's media library. This means that your marketing team can easily scan through and choose the media assets that they need to incorporate into their landing pages. And even re-use them as many times as needed.   7. What You Can Expect from Using this Particular Drupal Page Builder A more independent, empowered marketing department. Which automatically translates into a more productive development team, as well.   8. What You Can Build with Drupal Gutenberg “What are the most typical use cases for the Gutenberg editor?” you might ask yourself.   landing pages text-heavy content types (e.g. blog posts) designs that don't call for a lot of dynamic configurations  simple layouts content structures and designs that blend in perfectly with your theme's looks   9. Final Word  “So, which Drupal page builder should I choose: Drupal Gutenberg or Cohesion DX8?” It depends greatly on your feature needs and on your content team's skill level, as well. For instance: do you value the convenience of replicating the same designs on all your websites (Cohesion) more than... having an entire library of contrib content blocks to select from (Gutenberg)? Keep “confronting” the features of these 2 website builders and put them against your team's needs and experience, as well.   The END! How flexible is the authoring experience for your own team? Have you tried implemeting any of these page editors into your page building workflow? Feel free to share your experience, good or bad, in the comments below. Image by 200 Degrees from Pixabay   ... Read more
Silviu Serdaru / Apr 14'2020
Why Is Accessibility Important? 7 Ways that Having an Accessible Company Website Benefits You
You already agree on this: web accessibility benefits users with permanent, temporary, and situational disabilities. But why is accessibility important for you? For your business... How does having an accessible website benefit you directly? And that's precisely what you'll find out in this post: 7 clear benefits that you can “reap” from making your website ADA-compliant. 1. Why Is Accessibility Important For Your Business? 7 Ways It Benefits You Directly   1.1. You Improve the Visitor Experience for... Everyone Source: disabled-world.com       “Who benefits from web accessibility?” All users. As you adopt all the good practices to improve your web pages' accessibility and you:   use a clear and simple language make sure that you have enough color contrast on your site add video captions   … you make your website easier to use for all users.   Tip 1: a video caption benefits both users with hearing loss and... any user who watches your video content in a loud environment. Tip 2: an adequate color contrast benefits not only users with low contrast sensitivity but pretty much anyone. It makes your content more visible and easier to understand for all users.   How does this translate into a clear benefit for you? Better user experience for all your website's visitors means:   a higher impact on your SEO rankings more traffic on your website better user engagement a higher conversion rate …   Should I carry on?   1.2. You Grow/Future-Proof Your Customer Base Source: canada.ca      North America is aging. By making your website accessible, you ensure that it accommodates the needs of both:   users born with a disability users acquiring certain levels of disabilities as they age; seniors who still want to able to access the web   In other words: you'll be simultaneously growing and future-proofing your customer base.    1.3. You Minimize the Risk of Facing Legal Action  “Why is accessibility important?” Because it's a legal requirement.  Ignore it and you face the risk an accessibility lawsuit... Is minimizing the risk of being prosecuted a strong enough benefit for you?   1.4. You Develop a Mindset for Innovation  “Why is accessibility important in web design?” Because it challenges you to solve all types of unanticipated problems and thus... to get creative. The constraint of adapting your design so that it incorporates a whole set of accessibility features challenges you to... come up with innovative solutions.  And to preserve that mindset for innovation in the long term.   1.5. You Boost Your SEO Efforts Just think about it: some of the best practices for improving a website's accessibility are to:   add ALT-text to images write clear and concise copy go for a clutter-free page layout  design with consistency in mind ...   But these are all good SEO practices, as well. “So, why is accessibility good for business?” Because, by making your website more accessible, you're also making it more... SEO-friendly.   1.6. You Improve Your Brand Reputation  Source: Acquia.com “Why is accessibility important for your business?”  Because it helps you grow your brand reputation. By making sure that all your website visitors are granted equal rights and easy access to your web content, you build a positive reputation around your brand. 1.7. You Improve Your Page Loading Time Studies have proven it: By improving a page's level of accessibility, you improve its speed score, as well. The main idea rests the same: As you implement features considered to be designed “exclusively” for users with disabilities, you're making your website a better place for all users. And “faster” does mean “better”. So this is definitely a key benefit to keep in mind.   2. What Are the Most Important Aspects of Web Accessibility? Now that you have multiple answers to your “Why” question  — “Why is accessibility important?” — let me try to answer your “What” question, as well: What makes a website accessible? But first, here's a list of goals to set for your company website's content and design to be accessible:   To be perceivable: are your design elements and text visible and easily identifiable by all users? To be robust: is your content robust enough to be easily parsed through and interpreted by various assistive technologies? To be operable: make sure that all users are able to carry out the actions that your website's UI requires them to perform To be understandable: is the information delivered on your website clear enough? How about the UI and the actions that it requires users to perform?   2.1. Color Contrast  An accessibility feature that benefits all your website visitors:   those that have a sight condition (elderly visitors here included) those accessing your website from their mobile devices those accessing it in a poorly lit environment anyone accessing your website Source: w3c.github.io Implementing a good color contrast between the background and the foreground makes your design elements more visible and the text more readable.  And everybody wins.   2.2. Text to Speech Why would you bother to implement this technology on your company website? In other words: Who benefit(s) from this accessibility feature? users with learning disabilities users with literacy difficulties or learning a new language users with low vision (seniors here included) all users who just love to... multitask (e.g. imagine yourself driving your car and listening to an e-book)   It makes your website content accessible to more people.   2.3. Clear and Constant Feedback Remember to provide feedback —  clear instructions and error/success messages  —  for every action that users need to complete or have already completed. Who'll benefit from it?   users with cognitive and learning disabilities users with lower computer skills anyone accessing your company website    Providing clear instructions and constant feedback helps all users complete their tasks (e.g. fill in forms) on your website quick and easy. It makes your website conveniently predictable to everyone accessing it. 2.4. Video Captions  Why is accessibility important? Because it turns your website into a “welcoming” place for everyone. In the case of captions (or “subtitles” if you wish), it makes your video content accessible to:   people with hearing loss people accessing your website from a loud or quiet environment Just imagine yourself having to go through a video, in a crowded place, when don't have your headphones with you. It's another one of those win-win accessible situations.   2.5. Clear, Clutter-Free Layout and Design And here, the main benefits are obvious. A simple design:   loads faster  bubbles up to the user experience  impacts your site's SEO rankings   Keep your website clutter-free by removing:   all the unnecessary design elements that make it a bit too clunky and more difficult to navigate all the non-relevant and non-useful content all the unnecessary code still lingering in there   Perform an audit of the menus, text sections, and links on your site and... start decluttering it. This way, you'll improve the experience of all the users, making your website:   faster easier to scan through  more usable 2.6. Voice Recognition  Imagine yourself driving (again) and having to search for a particular piece of information on a website. If that website has a voice recognition system incorporated, it should go smoothly. If not... you might consider switching to one of its direct competitors. See my point here? Implementing voice recognition on your website doesn't benefit just users with various physical disabilities. It benefits anyone who simply prefers uttering search phrases instead of entering them in the search bar.   2.7. Keyboard Navigation Make sure that users can easily navigate your website using their keyboards only.  Word of caution: are there any animated navigation buttons that unfold drop-down menus? If so, are they perfectly usable for visitors who depend on screen readers to navigate your site?   2.8. Use of ALT-Tags Go for useful, genuinely helpful descriptions over... the too generic, perfectly SEO-optimized ones. Accessibility is about making all users feel confident and comfortable. Therefore, impersonal image descriptions, centered around focus keywords, are anything but helpful to them.   2.9. Accessible Buttons and Controls  Making your clicking or tapping areas:   larger featuring enough color contrast featuring clear and actionable title text (“sign up”, “download”, “log out”)   .. will make your website more usable for:   visitors with a certain disability those with a limited digital dexterity those accessing it from their mobile devices   The END! Does this answer your questions and dilemmas on “Why is accessibility important for my business”? Now, we're quite curious to know: What accessibility feature has had the biggest impact on the user experience that your website provides? Image by athree23 from Pixabay   ... Read more
Adriana Cacoveanu / Apr 10'2020
What’s the Best Free SEO Plugin for WordPress (Apart from Yoast SEO)? Top 5
Let me guess: for you, the best free SEO plugin for WordPress is the one that   is feature-packed is quick to set up is super easy to use, featuring a straightforward UI automates common SEO optimization tasks such as setting the meta-information is regularly updated “plays well” with other plugins   “Am I asking too much from an optimization plugin?” you might ask yourself. Not at all.These are all legitimate expectations. Now, we've done some digging and put together a top 5 WordPress SEO plugins that meet your criteria. So, without further ado, here are the finalists:   1. The SEO Framework If you're looking for a lightweight optimization plugin tailored for smaller-sized websites, this might just be the one for you. Here's how it works: It displays color-coded guidelines that point out to the aspects on that page that you need to improve.  And that's not all: If you hover over with your mouse pointer, it'll trigger useful notes on how precisely you can optimize those specific elements on the page. In short: it provides you with both the WHAT and the HOW to optimize (on) your website. You'd want to go with The SEO Framework because:   it's lightweight it provides you with good documentation and enough filters to customize your SEO settings it's effectively simple (or “simply effective”): there are no extraneous features, it's one of those WordPress SEO plugins that does precisely what you expect it to do it's open-source it has clean, well-structured code it ships with a UI that integrates seamlessly into WordPress    Source: quicksprout.com   2. Rank Math, Probably the Best Free SEO Plugin for WordPress   Source: Ahrefs.com As Joshua Hardwick from Ahrefs admitted it, as well, Rank Math is the free SEO plugin for WordPress with the most intuitive UI. And if, to the convenience of an easy to use interface, you add a heavy load of SEO features, your quest for the best optimization plugin might just end there. But let's see precisely what its set of features and selling points include:   it's free it's easy to set up it comes with built-in redirection it integrates with Google Search Console it provides you with full Google Schema Markup (rich snippets... 14 different snippets, to be more specific) it enables you to keep track of your Google Keyword rankings it provides you with card previews for Facebook and Twitter it generates internal link suggestions it monitors 404 errors: it keeps track of the users landing on “dead” pages and provides you with useful data on the URL of those “problem” pages and on the no. of times they've been accessed   3. Redirection    This WordPress SEO plugins comparison had to include a reliable plugin for implementing 301 redirects, right? Well, here it is. And here are its strongest pros:   it's so very easy to use: just enter the source and the target URLs, click “add redirect” and you're good to go it's free it provides support for other 3xx redirects as well   Tip: if you're in the “advanced users” league, you can go even further and use regex matching for redirects (and ignore URL parameters, trailing slashes, etc.) Simplicity at its best...   4. All in One SEO Pack   If you're looking for a “swiss tool” to boost your SEO efforts with, this might just be the one. The All in One SEO Pack plugin comes packed with all the essential SEO features you need. And it makes a great option if you're not an SEO guru yourself. If you only want to help your blog (or startup website)... gain some traction in the search results.  Source: Quicksprout.com But let's see which are the specific features that make it a strong candidate for the title of “the best free SEO plugin for WordPress”:   it sets itself apart from Yoast (its more popular “twin plugin”, some say), with unique features such as canonical tag support, auto-generated description tags, a “bad bot” blocker it “spoils” you with a clean, intuitive dashboard its essential (free) features are robust enough to power your SEO strategy if it's a basic blog (or a small website) that you need to boost in the search engines   5. EWWW Image Optimizer   We couldn't have left out precisely an image compression tool from our list of top 5 WordPress SEO plugins now, could we? EWWW Image Optimizer comes as the most effective free alternative to the well-famed ShortPixel image optimizer. Its biggest selling point? It's very easy to use. You get to compress your images in bulk, on the go. And by “images” I do mean the previously uploaded ones, as well. Source: themeisle.com But let's see what are its most “tempting” features:   it provides you with options for lossless and lossy image compression it puts no limit on the number and the size of the image files that you upload  it provides you with JPG, PDF, PNG, and GIF optimization support its free version carries out the optimization tasks on your web server; no need for you to sign up in order to use this plugin   And that last feature becomes particularly important if it's a privacy-focused website that you need to optimize for speed. Word of caution: since EWWW uses your own server to perform the optimizations, it can put a strain on it if you go overboard with the no. of images that you use it for.   Honorable Mention: The Yoast SEO Plugin Why did we leave the “rockstar” plugin out from our list? Isn't Yoast the best free SEO plugin for WordPress, according to many users? Source: backlinko.com Yes and no... Yes, it's by far the most popular (and the most comprehensive) SEO plugin for WordPress. But there are certain aspects which have blurred its “rockstar aura”:   the annoying paid aids the reputation of slowing down the back-ends of the websites using it (its features aren't powerful enough to compensate for that) the fact that it trades looks for functionality: its UI is not one of the prettiest ones   The END! What's the best free SEO plugin for WordPress according to your own feature requirements and criteria? Is it included in this list? And why do you prefer it? Let us know in the comments below.  Image by tomekwalecki from Pixabay   ... Read more
Adriana Cacoveanu / Apr 08'2020
Top 10 Drupal Websites in Australia: From the Most Impressive to the Most Visited Ones
They're visually-appealing, highly popular, built on top of robust structures, so that they should "cope with" with huge amounts of traffic and content... These are but some of the things that the top 10 Drupal websites in Australia have in common. But which are they, more precisely? Australia's finest examples of websites using Drupal? We've done our research and put together a 10 best list for you. Let's dive right into it:   1. Australian Nuclear Science and Technology Organisation(ANSTO)   "Australia's research and development organization, and the center of Australian nuclear expertise..." (source: directory.gov.au) And the presentation could go on with other superlatives to "wow" you with:   Australia's most important science infrastructure (one of) Australia's largest public research organizations it sums up more than 1000 experts that use nuclear techniques to find the answer to various medical, environmental, and industrial challenges   A significant content load? A large team of content editors in need of the most robust tools to streamline their content management workflow with? The web project had Drupal 8 written all over it... And it quickly became one of the top 10 Drupal websites in Australia. Why Drupal? Because Drupal provides the best editing experience. Content managers are free to build new custom pages on their own, by just selecting and assembling pre-designed blocks. Not to mention that the "component-based" approach to design ensures consistency throughout the website and, implicitly... the best user experience, as well.    2. University of Technology, Sidney The University of Technology Sidney (UTS), Australia's #1 university and the 10th best one in the world, also has its website running on Drupal. Drupal is the platform that powers a lot of higher education websites worldwide, so... no surprise here, right? The reasons why UTS chose Drupal are obvious:   their multi-site structure incorporates no less than 150 UTS sub-sites the "cluster" of mini-sites needed a central content hub and a unified platform the internal content team needed enough freedom and flexibility to create, edit, and publish content across the entire network of sub-sites they needed to integrate lots of third-party systems (e.g. systems sourcing course information)    In short:   Drupal makes the perfect choice for multi-site setups it integrates seamlessly with third-party apps it provides the best editorial experience   3. The Australian Government       Undoubtedly one of the top 10 Drupal websites in Australia.  "The Government of Australia is standardizing on Drupal for hundreds of government departments and agencies across Australia, starting with the country’s homepage. Drupal enhances digital services to millions of citizens." (source: Drupal.org)   Why Drupal? For multiple reasons:   Drupal's ideal for multi-site architectures Drupal provides a granular permission system it integrates with lots of third-party services and solutions (payment systems, citizen service centers, various "latest news" sources)  it's one of the most secure CMS platforms: Drupal has its own dedicated Security Team and a foolproof process for monitoring, identifying, and publishing any security issues it's flexible, giving unmatched freedom to content editors and website admins: anyone from the internal team can update content on the website quick and easy Source: Drupal.org   4. Bunjil Place     The "home of arts and entertainment in the City of Casey" is Drupal-powered.  And it's probably one of the most visually impressive examples of Drupal websites from Australia. A high-trafficked website, that "bids on" Drupal 8 to provide an interactive user experience. Now, if we were to list just some of the strongest reasons why Drupal was the best option for this Australian website:   the diversified content hosted on the website (text, video, eye-catching images), that falls into multiple sections and subsections the need for a new responsive design the need to incorporate some powerful user-oriented functionalities (e.g. visitors can easily book spaces in the palace for their future events)   Drupal was the only choice here... 5. The Australian Drupal's already famous for being the best CMS solution for news websites. And the CMS platform is behind the online presence of "The Australian" — Australia's national news brand — as well. A high-trafficked, content-packed website, with content that needs to be updated on the fly, on a regular basis.  They couldn't have opted for another platform than Drupal... 6. Australian Conservation Foundation, One of the Top 10 Drupal Websites in Australia   Australia's national environment organization — over 600,000 people — has its website running on Drupal. It's a campaign-driven site, one of the most popular Drupal-based websites in Australia, that leverages the CMS platform's top features to:   manage all their content workflows with great ease engage their member database and anyone willing to address urgent environmental problems via social networking, donation processing, event management, analytics, fundraising   A website that needed to withstand high amounts of traffic and to support complex content workflows: Drupal was the most suitable CMS solution.   7. Australian War Memorial "The Memorial's purpose is to commemorate the sacrifice of those Australians who have died in war or on operational service and those who have served our nation in times of conflict." (source: awm.gov.au) One of the top 10 Drupal websites in Australia that turned this CMS platform into a reliable publishing tool for all the historians, researchers, and designers accessing it. We're talking here about a content-heavy website, hosting content that ranges from:   war-related material to extensive archive to a database of unique collections of film footage, artworks, sound recordings to articles on Australia's military history   And where there's rich and varied content, that needs to be handled with ease by various internal teams, there's Drupal, as well. Drupal with its:   robust inline content creation and editing tools sophisticated access control system   8. Charles Darwin University  One of Australia's public universities and one of the world's most reputed universities (among the top 2% universities on the globe) has its website running on Drupal. And for all the self-evident reasons:   they needed to provide internal users with the best experience: Drupal enables content editors to create their custom course pages by simply putting together pre-built components they also needed to provide an intuitive search experience to all the external users: Drupal makes it easy for students to find, review courses, and sign up   9. International Business Times Australia   The Australian version of this digital news publication is built on Drupal. But is it of any surprise that the go-to source of financial news in Australia has chosen this CMS platform to build its online presence on? After all:   news publications are Drupal's "specialty" Drupal's already famed for powering some of the most content-intensive websites in the world  Drupal's gained a reputation for being the CMS that provides the best content editing experience: the internal team at International Business Times Australia can create, update, and publish new content on the go   10. Car News Australia       One of the top 10 Drupal websites in Australia, that stands out from the crowd as a high-trafficked one. Its complex content ecosystem has turned Drupal into the Carsguide team's only option. The site's an intricate network of 7 different sections — "buy + sell", "reviews", "news", "advice"... — that unfold, each, into "clusters" of multiple sub-sections. A content network that called for a CMS with particularly powerful content creation and editing features. A content-rich architecture that's now powered by Drupal.   The END! We're curious now: what other famous brands are on your own top 10 Drupal websites in Australia? Photo by Iván Lojko on Unsplash  ... Read more
Adriana Cacoveanu / Apr 03'2020
You Have Your List of Web Accessibility Issues: What Do You Fix First? 8 Simple Ways to Prioritize Accessibility Problems
You've run your audit, you've got your list of web accessibility issues: now what? Where do you start? Before you get to the point where you ask yourself “How do I fix web accessibility issues on my site?” you wonder: “Which issue to address first?” How do you prioritize accessibility problems? By noticeability, by severity or by tractability? What criteria do you use? And this is the question that this post will answer to. It's a list of 8 simple ways to prioritize the issues included in your accessibility audit report:   If Your Website's Image-Heavy, ALT Text Becomes a Priority If You Host Lots of Videos, Adding Captions Is Critical Let the Data on Your Target Audience Dictate Your Priorities If the Issue Is Repetitive for Screen Readers, Then It's High Priority Put on Your List of Web Accessibility Those that Impact the User Navigation  Prioritize the Issues that Prevent Users from Submitting Forms Prioritize The Accessibility Issues Detected on Key Pages of Your Site Prioritize Low Complexity, but High-Value Issues 1. If Your Website's Image-Heavy, ALT Text Becomes a Priority Do you have lots of images on your website? Then adding ALT text is a top priority, by default. 2. If You Host Lots of Videos, Adding Captions Is Critical Do you have lots of video content on your site? Then adding captions should be one of the first tasks to carry out after you've run your web accessibility audit.    3. Let the Data on Your Target Audience Dictate Your Priorities Customer analytics should be the main criteria to use when you put together a list of web accessibility issues. How many people in your customer base use screen magnifiers to zoom in specific sections on your website? Are there users depending on screen readers in order to interact with your website?  What does the analytics data tell you?  It's those stats that determine how you should prioritize your usability problems. And how you should design your website accessibility plan. Source: Medium.com In this case, categorizing (and therefore prioritizing) web accessibility issues by their WCAG level (A, AA, AAA) is a bit rudimentary. The data that you have on your user target group might reveal to you that complying with certain AA (or “nice to have”) standards is more important for your audience than complying with some A standards... In short: start with those issues that have a direct impact on your specific customer base. 4. If The Issue Is Repetitive for Screen Readers, Then It's High Priority Take an issue listed in the W3C accessibility checklist as common as... link names. It says there that the displayed text should be unique, meaningful and descriptive enough. Has your automated accessibility testing tool identified multiple instances of this issue? Do they seem to be so repetitive that the experience of any website visitor using a screen reader is just... terrible? Then you should address them ASAP.   5. Put on Your List of Web Accessibility Issues Those that Impact the User Navigation  You've run your web accessibility audit and now you need to prioritize the issues detected. An effective criterion to use for setting up a hierarchy of “errors” is the impact that those issues have on users' navigation experience. For, if those issues prevent users who depend on assistive technologies from navigating your website, they'll get discouraged/frustrated. And leave your site. For instance, your accessibility audit might detect a problematic heading structure. Which, by the way, falls into the AA category. If that heading structure:   skips certain levels or, even worse, there is no heading structure at all or it contains too much irrelevant information   … and is the main “culprit” for the poor navigation experience on your website, then you should make it a priority.   6. Prioritize the Issues that Prevent Users from Submitting Forms For there's nothing that says “I don't care about you” like web accessibility issues that stop users from filling in a form on your site. In short, make sure you tackle those first. I'm talking here about usability issues like:   unhelpful error text messages like “please enter correct information” unaccessible inline error messages   … that make it impossible for these website visitors to submit any form.   7. Prioritize the Web Accessibility Issues Identified on Key Pages  Build your web accessibility test plan around the most important pages on your website. Source: support.siteimprove.com For instance, optimizing a page with a Help article isn't a top priority.  But optimizing for accessibility your:   Product page Login page Checkout page User Registration page Contact Us page Feedback or Survey page   … should be listed among your top priorities. Tip: a common web accessibility mistake is to ask people with disabilities to enter information from their paper receipts on the survey page.  Make sure this problem is among the first ones that you address. So, before you go ahead and add problems to your top list of web accessibility issues, you might want to ask yourself some key questions:   “What's the scope of the page presenting accessibility issues?” “What's the traffic on the page that you're about to optimize?”   8. Prioritize Low Complexity, but High-Value Issues And now you have your answer to the question: “What if I have a high-value issue, but with low complexity like... defining page titles for dynamic pages on my website?” Final Word: Internal Prioritization Is Crucial  Putting together a list of web accessibility issues to tackle first depends on your website's:   audience content functionality   Sticking to an “A level vs AA level” technique for figuring out what problems to fix first is... a bit too simplistic. For even not all A-level accessibility standards are of equal importance and not all AA-level issues are just “nice to haves”: Source: www.w3.org Your turn now: What criteria do you use to prioritize the accesilbity issues that you identify on your website? Are there other prioritization techniques that I should add to this list? Let me know in the comments below. Image by Gerd Altmann from Pixabay   ... Read more
Adriana Cacoveanu / Mar 27'2020
Drupal Layout Builder vs Gutenberg: How Do You Know Which Page Builder’s Right for You? 
Drupal Layout Builder vs Gutenberg: which of these 2 next-generation site-building tools to use to create your page layouts?  Or, better said, to empower your content editors to design great-looking pages on their own.  In order to help you make an informed decision, I've made an honest “Layout Builder modules vs Gutenberg editor module” comparison.  Therefore, in this post you'll find your answers to the following questions:    What issues with the editing experience in Drupal do these 2 new page layout builders come to address? What is the Gutenberg Editor? What are Drupal Gutenberg's main strengths? What are its limitations? What is the Layout Builder for Drupal? What are the Drupal Layout Builder's main strengths? What are its weaknesses? When would you use one Drupal page builder over the other?    1. Drupal Layout Builder vs Gutenberg: What Limitations Do They Address?  Or, to put it this way: what makes a good content editing experience?  Here are some of the editors' main requirements:    to be easy to use (with an intuitive drag and drop interface) to enable them to create custom page layouts on the fly, with zero CSS or HTML knowledge to be ideally flexible, enabling them to adjust the pages to their needs    Now, if we put editors' requirements against the "reality" of the editing experience in Drupal, here are the limitations we can identify:    it doesn't provide a decent level of visual design it compromises branding for flexibility or the other way around it requires some HTML experience it doesn't go beyond the level of a basic WYSIWYG editor it doesn't allow them to design fully customed page layouts it doesn't provide a 100% intuitive user interface it still makes editors dependant on the site builders/Drupal developers in their teams And these are precisely the problems that these 2 Drupal page builders "promise" to solve.    2. Introducing: The Gutenberg Drupal 8 Module   The Gutenberg Editor module is no more than WordPress's layout system integrated with Drupal.  What sets it apart from the other tools for creating page layouts in Drupal?  Its block-based approach.  Creating content in Drupal becomes a matter of selecting and assembling multiple blocks.  Each block stands for an individual piece of content: a separate block for a button, another separate block for an image, another one for a column, for a heading...  Furthermore, you get to create content inline. To edit the media content, text, and blocks on the page that you're building.  In short, you can take the Drupal Gutenberg module as a convenient "block editor".  You (or your editors) can put together and visualize your page layout in one large form field. That, instead of editing every single form field that makes up a page.    3. 4 Reasons to Choose Drupal Gutenberg  Let's say that you're looking for a site building tool to build a... landing page (or one that would empower your content editors to create it).  Why would you go with the Gutenberg content editor for Drupal 8?  Here are 4 good reasons to choose it:    it provides you with lots of predesigned elements out of the box you can see what you're building on the editor side it doesn't require you to be experienced in working with CSS or HTML you can design your own blocks or use blocks created by other open-source developers    4. 6 Reasons Why You Might Hesitate to Choose Gutenberg  Any honest Drupal Layout Builder vs Gutenberg comparison must include the 2 tools' main weaknesses, as well, right?  So, here's why you may want to think twice before choosing the Gutenberg content editor in Drupal 8:    the way it stores data could be... better it doesn't excel when it comes to layout flexibility: you can align your blocks left, right, center, but you can't add custom margins, for instance the style options that it provides are quite limited, one of the main drawbacks highlighted in any Gutenberg vs page builder comparison updating a page created with Gutenberg is particularly overwhelming the visual editing experience is not one of the best ones: visualizing your layout is a bit more difficult you cannot reuse your Gutenberg blocks and the page layouts that you create with this editor    Tip: when it comes to the poor visual experience that you get with the Gutenberg Editor, you can always improve it with page builder plugins. There are some pretty good ones out there that guarantee you a 100% visual design.   5. Introducing: The Drupal Layout Builder Module (Core) "Drupal 8's Layout Builder allows content editors and site builders to easily and quickly create visual layouts for displaying content. Users can customize how content is arranged on a single page, or across types of content, or even create custom landing pages with an easy to use drag-and-drop interface." (source: Drupal.org) The Layout Builder for Drupal enables you to create layouts by putting together separate form fields and block entities. No coding know-how needed.  No need to tweak the templates in the theme's source code.  In short, it "spoils" you with a drag-and-drop type of visual editing experience. You can put together structured content quick and easy.  Source: Drupal.org "But how exactly does it work?"  Here's how you create a custom layout with this Drupal page builder in 5 quick steps:  enable the module go over to the "Manage Display" tab of your target content type click the "Use Layout Builder" checkbox click the "Manage Layout" button then, you're free to use your Layouts and Blocks (after you've created them), dropping them in the defined regions of the page that you're building    6. 7 Reasons to Choose the Layout Builder in Drupal 8  Here's a legitimate question that this Gutenberg Editor vs Layout Builder in Drupal 8 comparison should respond to:  “Why would I want to use Drupal Layout Builder?”  The best answers would be:    you can create your content blocks and just drop them on the regions of your page layout you get to (re)arrange otherwise static fields the way you want to you're free to add views, blocks, widgets, to any section of your page the content that you create is specific to that page type, so all the pages of that type will have the same layout you get to override the default layout to create fully customed pages your layout is rendered on the web page in real-time you're free to incorporate blocks in the main content region 7. 5 Reasons Why You Might Hesitate to Choose the Layout Builder  When comparing Drupal Layout Builder vs Gutenberg, you inevitably get to the point where you ask yourself:  "What are the Layout Builder's main weaknesses?"  Now, here's why you wouldn't want to jump on it right away:    you can use it only on the main content area of your page unlike the Gutenberg Drupal 8 module, the Layout Builder doesn't ship with prebuilt elements for you to just choose from and assemble with Drupal Layout Builder, you need to create your blocks and page type first; you can't "get away with" choosing user-contributed blocks it's not always easy to see what precisely gets overridden you can't rely on a granular permissions system for overriding individual pages    8. When to Use Drupal Gutenberg: 4 Typical Use Cases  You'd want to use the Gutenberg Drupal 8 module if:    your Drupal website's a content-packed one you need to build a landing page you need to create a simple layout: Gutenberg doesn't really shine when it comes to style options you need to create content that fits perfectly into your theme's looks: Drupal Gutenberg pulls right from your theme's styles    To sum up, designing landing pages are Gutenberg's most typical use case.  Use it to add just some extra design (nothing too "extravagant") to an "About Me" page, for instance.   9. When to Use the Drupal Layout Builder: 2 Typical Use Cases  You'd want to use the Layout Builder for Drupal if:    it's a field-intensive page that you're building: a product page, a case study, etc. you have synced content on that page (from Salesforce, for instance)   The END!  Your turn now: have you tried any of these Drupal page builders?  Which one best serves your content goals?  What other pros and cons would you have added to this Drupal Layout Builder vs Gutenberg comparison?  Let us know in the comments below.  Photo by Jason Dent on Unsplash  ... Read more
Silviu Serdaru / Mar 25'2020