“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.
Adriana Cacoveanu / May 01'2020
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
Silviu Serdaru / Apr 14'2020
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
Adriana Cacoveanu / Apr 10'2020
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
Adriana Cacoveanu / Mar 27'2020
In this post, I'll share with you the top 10 rules of good UI design.
You will be learning:
What are the essential elements of a good UI design
What are the most common UI/UX mistakes that designers make
What are the UI best practices in 2020
Lots more UI design tips
Now, let's get started.
1. Aim at an Almost Invisible User Interface
What is a good UI design?
A logical structure & necessary visual elements only.
In other words, in order to design an almost invisible user interface you need to:
be “merciless” and keep the essential elements only
base your UI on a well-thought-out structure
use clear language in your text messages and on your labels
Source: Medium.com
A poorly structured and cluttered UI would only make the user ask questions like: “Where's the main menu?”
2. Keep It Consistent
And this is one of those good UI design principles that's overlooked or undermined most often.
Consistency should span over the entire ecosystem of elements that make up a UI design: fonts, colors, menus, buttons, icons.
Keeping a consistent UI throughout your website translates into creating patterns aimed at enhancing efficiency.
At improving the user experience.
And here I'm referring to layout, design, language patterns. Once the user gets familiar with a given pattern, it will be easier for him/her to interact with other parts of your website that present the same pattern.
3. Be Purposeful with Page Layout
One of the fundamental rules of good UI design is to structure your pages based on importance.
In this respect, here are the crucial principles of user interface design to guide your page layout creation:
take into account the spacial relationships between various elements on the page
place your UI elements strategically: draw users' attention to the most important information on the page and make it easy for them to scan it through
keep in mind that “form follows function”: design each item in accordance to its function (no need to reinvent the wheel and to turn the hamburger menu into a... sandwich menu, for instance)
stay away from clutter, at all cost: keep the visual elements on the page to a minimum
make smart use of headings, group similar elements together, add numbered items, as well, all in the name of readability
IMAGE Image by 200 Degrees from Pixabay
4. Use Color and Texture Strategically
Make smart use of color, texture, contrast, and light to direct the user's attention to key elements and important information on the screen.
5. Use Familiar UI Elements: One of the Key Rules of Good UI Design
One of the UI best practices that's both:
the easiest to implement
the most underestimated
And it all comes down to intuitive design. To sticking to common elements when creating your user interface.
Again, the hamburger menu makes the best example: once spotted, the user knows what it is and how to open it.
Restrain yourself from showing off your creativity as a web designer. From being "discouragingly" innovative. Form should follow function, remember?
Instead of impressing your users, you should help them get things done quickly and easily.
That's what delivering a good user experience is all about, after all.
6. Put the User in Control of the UI
Instilling a sense of control in the user is one of the most powerful UI design principles.
Source: xd.adobe.com
In this respect, here are some specific measures that you can implement:
6.1. Provide enough context
Ensure that the user knows, at each stage of his journey on your website, where he is, where he's been, and where he could go next.
Tip: place visual cues to help the user develop a sense of mastery and control.
6.2. Be transparent about the system status
Another one of those golden rules of good UI design:
Let the user know, at all times, what's the status of the process that he's initiated.
For instance, he/she might have started an action that requires some time for the computer to carry out.
In this case, make sure you provide feedback, at regular intervals, about the system status, about what's going on.
6.3. Make actions reversible
In other words, allow users to:
unselect
undo their last actions
restart whatever processes that they've engaged in
6.4. Design your UI with all user skill levels in mind
And this is one of the most obvious characteristics of a good UI design.
It's an easy to use interface for both casual and expert-level users.
6.5. Provide feedback on every user action
It's more than a good UI best practice: it's a matter of... good manners to provide at least some sort of feedback at each point of action.
Therefore, make sure your system delivers a meaningful reaction each time a user:
clicks on a menu
hits a button
clicks on a text message tab
Let the user know, using specific UI elements — animations, progress bars, pop-up windows, color change — whether he's successfully carried out the action or not.
7. Minimize Cognitive Load: Recognition over Recall
“Task-relevant information only” should be one of your key rules of good UI design.
And sticking to a limited number of elements within the display aligns with the very limits that the human attention, itself, imposes.
In this respect, it's human nature that your users prefer to recognize information across a sequence of screens rather than to strive and recall it from their memory.
For instance, our cognitive load is always lighter when we're challenged to answer multiple-choice questions compared to having to tackle short answer questions.
8. Stick to One Primary Action per Screen
And here, we go back to the “visual declutter” principle again:
Make sure that each screen supports just one single main action.
Squeezing too much information on the same screen and requesting the user to carry out more than one primary action will just:
confuse him/her
distract him
lead to attention overload
9. Use Typography to Create Visual Hierarchy
Most likely one of the easiest to follow rules of good UI design.
Strategically use different font sizes and display text to enhance:
readability
scanability
legibility
Photo by Alice Donovan Rouse on Unsplash
10. Stick to a Small Number of Gestures
Gesturing, swiping, tapping, pressing... no need to “squeeze” all these user actions into your app. Keep them to a minimum.
Tip: Facebook and WhatsApp make some good UI design examples; their interfaces require a limited number of user gestures.
Pro tip: make sure it's crystal clear to your users what gestures they need to perform in order to carry out certain actions on your interface.
Source: Medium.com
The END!
Now, I'm really curious to hear/read your thoughts:
How does your own list of must-follow rules of good UI design look like? Have I overlooked any key best practices?
Let me know in the comments below.
Image by FiveFlowersForFamilyFirst from Pixabay
Silviu Serdaru / Mar 17'2020
"How do I test my website for accessibility?" And right after you type in this question you discover that there are dozens of free website accessibility testing tools to choose from. So: why use Siteimprove?
In this post, I'll answer your key questions about Siteimprove:
What does Siteimprove do?
Why use precisely this accessibility evaluation tool?
How to use the Siteimprove Accessibility Checker?
Siteimprove vs Axe: what are the key differences?
Monsido vs Siteimprove: which is the best web accessibility testing tool for you?
Drupal 8 Siteimprove: what does it do?
So, let's dive in:
1. How Does the Siteimprove Accessibility Checker Work?
"The Siteimprove Browser Extension is a Chrome/Firefox plugin that allows you to see page specific DCI scores and if a CMS deep link is set-up, it also allows you to fix content to improve the scores directly in your CMS during your browser session." (source: Siteimprove.com)
Once added to your browser toolbar, you can use Siteimprove to identify accessibility issues on specific web pages. At any given time.
It provides you with:
explanations on how they impact the user experience
clear recommendations on how to address them
Free, handy, effective. These are the best 3 words to describe the Siteimprove extension.
Note: since all evaluation is performed in your browser, Siteimprove guarantees you a secure scanning of your non-public pages, multi-step forms, password-protected pages and pages with dynamic content.
2. Why Use Siteimprove over Other Website Accessibility Testing Tools?
What powerful features make it stand out from the crowd of automated accessibility testing tools that you could use?
I've selected the 8 most valuable ones:
2.1. Monitors all broken links and spelling mistakes on your web page
Maybe you consider these issues to be mere... negligences to be put at the end of your priority list.
But just imagine how much these "details" could affect a visually impaired user.
This is where the Siteimprove Accessibility Checker comes in. It keeps your website under "surveillance". Ready to spot and to highlight any broken link, any little spelling mistakes that it detects. Or any other quality issues that it identifies.
2.2. Generates an accessibility report for you to analyze
From ALT missing attributes to accessibility issues spotted in your tables and forms, the Siteimprove report lists all the problem areas to focus on.
A handy overview that you can use to define all future tasks that need to be carried out in order to improve your website's accessibility.
2.3. Pinpoints accessibility issues
It'll highlight them all right on-page and in-code.
In other words, you don't need to do a research on all the latest accessibility guidelines first.
The Siteimprove extension for browsers will outline all the key issues that you'll need to focus on to get started.
2.4. Integrates seamlessly with your CMS
Whether it's Drupal or WordPress that you're using, Siteimprove enables you to fix the signaled issues on the spot. Right there, in your CMS, while you're browsing around your website.
2.5. Allows you to automate the accessibility checks
And by automating the bulk of your testing process, you get to streamline all the tasks that it covers, such as:
testing various color combinations
evaluating your PDF pages' accessibility
testing your form fields
2.6. Provides specific recommendations
Why use Siteimprove?
Because it doesn't stop at pointing out the accessibility issues on your website: it also gives you clear explanations on how to address them.
2.7. Enables you to monitor your progress in improving your website's accessibility
industry benchmarks
historical graphs
automated reports
customizable dashboards
All these Siteimprove features enable you to measure the progress that your team makes for turning your website WCAG 2.1 compliant.
2.8. Allows you to set up a hierarchy for the accessibility issues identified
In short, the Siteimprove web accessibility checker enables you to categorize and to prioritize tasks by:
severity
conformance level
And to assign them by job role (webmaster, editor, developer...) or responsibilities.
3. How to Use Siteimprove Accessibility Checker?
Say you want to try the Siteimprove Google Chrome Extension. Here's how you use it:
install the Siteimprove Accessibility Checker Chrome extension from the Chrome Webshop from your Chrome browser
add the extension to your browser: "Add to Chrome"
look for the newly added icon in your browser window
enter your target web page's URL in your browser
click the Siteimprove Accessibility Checker icon and let it perform its audit
take a look at the results displayed on the right side of the page
Note: Siteimprove Accessibility Checker uses the same checking engine as the Siteimprove Accessibility platform.
4. Siteimprove vs Axe Accessibility Tool
Why use Siteimprove over Axe? How are they different anyway?
Let's compare these 2 popular accessibility testing tools:
4.1. Axe browser extension
It generates detailed results, but you might find its slideshow-style controls a bit challenging
4.2. Siteimprove Accessibility Checker
it stands out as an accessibility testing tool that allows you to filter tasks by "responsibility" (or job role)
also, it displays the issues that it detects following the same structure of the WCAG guidelines
it presents color-codes issues by conformance level (A, AA, AAA)
it points out to the specific WCAG criteria that those issues relate to
5. Monsido vs Siteimprove Accessibility Checker
And why would you choose Siteimprove over Monsido?
Here's what sets them apart:
Monsido provides comprehensive crawls weekly, whereas with Siteimprove you get automated crawls every 5 days
Monsido could discourage you with its less-friendly UI, whereas Siteimprove has a more intuitive dashboard
6. The Drupal 8 Siteimprove Module: What Does It Do?
"The seamless integration between Siteimprove and Drupal streamlines workflow efficiencies for your web team. With the module, your team can fix errors and optimize content directly within the editing environment." (source: Siteimprove.com)
In short, the module (or "Siteimprove plugin", if you wish):
scans your website for accessibility issues (broken links and misspellings, A, AA, AAA conformance level accessibility issues, readability levels, etc.)
that you can then turn into manageable tasks and assign to your team members
who can tackle them right in the editing environment that they're using
Tip: you can even use the Drupal 8 Siteimprove module to see what would be the impact if you unpublished a "problem" page before you apply this measure.
The END!
Have I managed to answer your "Why use Siteimprove?" question?
Are you already using it as your website accessibility checker? If not, what other tool are you using and why have you chosen precisely that one?
Let me know in the comments below.
Image by Sitanshu Kumar from Pixabay
Adriana Cacoveanu / Mar 12'2020
There’s no better way of telling which tool best fits your needs than by putting Drupal 8 Layout Builder and Paragraphs to the test, right?
If you were searching for an honest comparison of the 2 Drupal 8 drag and drop page builders, you’re on the right blog.
Because in this post I’ll compare Drupal Layout Builder vs Paragraphs.
What you’ll get is a straight answer to each one of your key questions regarding the 2 most popular page building tools in Drupal:
Why would you choose Drupal Paragraphs?
What are its main trade-offs?
What are its best use cases?
What are the key advantages of using Drupal 8 Layout Builder?
What are its limitations?
What are the use cases of Layout Builder vs Paragraphs?
Now, let’s get you those answers:
1. Drupal Layout Builder vs Paragraphs: Introducing the 2 Contestants
1.1. Drupal Paragraphs
The Paragraphs module was quite a revelation when it was first released.
Why? Because Drupal rocked supreme at enabling users to create template-based pages, but when it came to uniquely designed pages (i.e. landing pages) it started to show its limitations.
And this is where the Paragraphs module came in. It “seduced” Drupal developers with a new component-based approach to building a page’s layout.
Source: Championsdigital.com
The Paragraphs layout builder would allow developers to create individual paragraph types — popup elements, plain text, code blocks — and editors to assemble those paragraphs into highly flexible pages.
Moreover, they could reuse those page components to create new and new content layouts.
For instance, they could put together a page that included one WYSIWYG Paragraph, a Slideshow Paragraph, and one paragraph with both text field and image field...
The idea of “flexible structured content” had taken over the Drupal planet...
1.2. Drupal 8 Layout Builder
The drag and drop page builder in Drupal core designed to take the content editing experience to a new level.
How? By granting editors more control over the Drupal layouts they create.
Drupal 8 Layout Builder enables non-technical users to easily mix and match nodes, fields, and other types of content via a drag-and-drop UI.
They can create their visual layouts and landing pages in no time. All they need to do is drag and drop, then rearrange site-wide blocks and content fields to their liking.
Source: Drupal.org
Moreover, users can even create new custom “inline” blocks of their own.
Power and flexibility combined into one visual design tool aimed at improving the editor experience.
2. What Are Their Key Strengths?
2.1. Drupal Paragraphs
In a Drupal Layout Builder vs Paragraphs “battle”, why would you go with the “stacked components” approach to layout building in Drupal 8?
Source: Drupal.org
Because the content editing experience is intuitive: editors can use the “Add a popup” and “Add a quote” tabs and rearrange their components with drag and drop
Because it enables you to group multiple fields into new complex elements
Because it allows you to come up with an unlimited no. of ways for combining your paragraphs
Because it enables you to create reusable components that you can then use per node
Because it prevents the workflow of your nodes from becoming too cluttered by providing an entity type for your sub-page components
Source: Drupal.org
2.2. Drupal 8 Layout Builder
What are its key selling points? Why would you choose Layout Builder over Paragraphs?
Because it requires less custom code
Because it grants you a higher level of control over the layouts you’re creating
Because it grants you lower maintenance costs
Because you get to mix field content with blocks
Because you’re free to create and populate new landing pages from the ground up: just set up your custom content blocks and arrange them to your liking within the layout
Because it provides you with an improved authoring experience
Because you can extend the default set of layout grids through custom plug-ins
Because it allows you to keep your structured data
Because it enables you to get the most of the block system for creating your Drupal layouts: custom inline blocks, programmatic blocks, custom global blocks, custom field blocks
“Blocks” that are fieldable, translatable, templatable, reusable, and part of Drupal core, as well.
Source: Phase2Technology.com
In a nutshell, this Drupal page builder provides both:
an easy way to manage fielded content in the backend
the best drag-and-drop editor experience
3. Where Does Each Drupal Page Builder Fall Short?
3.1. Drupal Paragraphs
What could make you… hesitate before choosing the Paragraphs layout builder for creating structured content? What are its key limitations?
You (your content editors) still depend on a developer to set everything up
Managing nested paragraphs when dealing with complex layouts can get quite overwhelming
Source: Evolvingweb.ca
And this is the biggest trade-off that could discourage you from going with Paragraphs as your page building tool:
You get to nest/add new and new elements, which carry their own sets of elements, up to the point where this “unlimited nesting” of paragraphs turns into a too confusing interface to cope with.
3.2. Drupal 8 Layout Builder
Where does it fall short?
In a Drupal Layout Builder vs Paragraphs “debate”, which drawbacks of this visual design tool could make you choose Paragraphs instead?
You might find block content not to be 100% explicitly connected to nodes
Combining template-based with custom layouts is a bit challenging
Enforcing a sitewide consistency of your custom-made layouts is quite a dare
4. When Would You Use One Layout/Editing Tool Over the Other?
4.1. Drupal Paragraphs
When you need to reuse many of the content components on your website to create new pages
When being able to reuse those components “per node” is of particular importance for your workflow
When your structured layout does call for nested paragraph bundles
4.2. Drupal 8 Layout Builder
When would you use this particular solution for creating layouts in Drupal 8?
When is Layout Builder a better choice than the paragraphs module?
When your landing page calls for a grid-like layout, including both dynamic elements (custom blocks, views) and fielded content
When you need to “juggle with” multiple columns for creating your layout
When you need to create a fully customed page from the ground up; a “special” page, that’s not connected to any structured content on your website (i.e. a single “Get a Quote” page)
When you need to custom-tune templated layouts; to override existing page layouts
When you need to set up “layout templates”, such as the layout for your product page or your blog post page
5. Final Results: Which Approach Best Fits Your Needs?
What do the results of this Drupal Layout Builder vs Paragraphs comparison tell you?
That there’s no “best” Drupal page builder. Only the one that best fits your specific layout creation needs.
It all comes down to the level of diversity in your content:
If it’s a particularly intricate page layout that you need to create, you might not want to go with Paragraphs. Its nesting feature can turn against you.
If you’re “craving” flexibility and the content on your Drupal 8 website varies a lot from page to page, yet you still want to keep a level of layout consistency, the Drupal 8 Layout Builder is your best choice
Your turn now: which of these 2 page building tools do you prefer and why?
Let me know in the comments below.
Image by 200 Degrees from Pixabay
Adriana Cacoveanu / Mar 06'2020
You've gone through the guidelines, standards, warnings, and best practices included in the W3C recommendations and... you're stuck. How do you know whether your website is 100% WCAG 2.1 compliant? What are the best web accessibility testing tools out there that you could use?
Free, easy to use accessibility evaluation tools that you could run on your website to spot the issues lurking in there.
And which could even get you some valuable recommendations on the best ways to address them.
All that before you actually have someone (or even a whole team of QA testers) review your website. Before you carry out an in-depth accessibility audit and run user-centric testing sessions with... real people involved.
You must be thinking about browser extensions...
They're so accessible: you just open the page you want to check and click a button in your toolbar. They're free and make great "starts" for identifying accessibility issues on your website. And for getting your hands on some valuable recommendations on how to fix them.
So, here are 5 automated accessibility testing tools that we recommend you try first:
0.1. But What Are Accessibility Tools More Precisely?
"Are there any recommended tools available that can help me test for accessibility issues?"
Take these common accessibility issues that might still go "undetected" on your website:
there's not enough color contrast on certain pages (or no contrast at all)
one or more images don't have ALT descriptions added to
an editor deleted the content for one of the H2 tags but left that tag lingering in there and confusing the screen readers
someone from your design team has put a placeholder text instead of a text field, which risks displaying an unlabeled field, that screen readers cannot... read
there's one label missing from your newsletter sign-up form
These are all frequent issues that web accessibility evaluation tools can help you detect and address.
They fall into multiple categories:
browser extensions, that we'll be focusing on in this post
command-line tools accessibility testing tools that you can integrate with your continuous integration system
Tip: Keep in mind that the following 5 best web accessibility testing tools detect about 30% of the issues. They make a great starting point for a more complex audit and comprehensive monitoring strategy that you should set in place.
1. Wave, The Venerated Web Accessibility Evaluation Tool for Chrome
A full-featured, easy to use website accessibility checker that's been in most developers' toolkits for quite a few years now.
Here's how it works:
it adds a visual overlay of error icons and indications to the web page that you're auditing
icons which, once clicked, provide you with information and recommendations about the accessibility issues detected: redundant titles, structural elements, links to HTML, poor color contrast, how those issues impact different types of users, what WCAG guidelines they violate, etc.
it points out to you the "troublesome" code via annotated HTML popping up in the panel at the bottom of the screen
In short, Wave is one of the robust website accessibility checkers that goes beyond streamlining your audit process.
It's also geared at educating users (website owners, QA testers) about the accessibility issues to pay attention to.
"How to use Wave accessibility tool?"
Either way:
you can just enter your URL in the dedicated field on their website
you can download the browser extension
Go for the extension particularly if it's dynamic, password-protected and locally stored web pages that you need to check.
2. Tenon, Accessibility as a Service
"How do I test accessibility?"
Tenon's another tool that comes both in a free and paid version.
What makes it "worthy" of this top 5 selection?
it addresses the common scenario: running accessibility tests after neglected guidelines have already turned into critical issues that affect the user experience
it's such a flexible tool for content creators, designers, developers, and testers
it generates... generous reports with code snippets for each error, corresponding WCAG guidelines, and recommendations on how to fix them
In short: Tenon helps you run a preventive type of accessibility check on your website. You can detect key issues before they even get to turn into major usability problems
Furthermore, you can easily incorporate Tenon into your toolset via its API. It integrates smoothly with any CMS, IDE, deploy tool or automated build that you might be using.
3. Google Lighthouse, One of the Top Automated Accessibility Testing Tools
"How do I know if my website actually is WCAG 2.0 compliant?"
You give it a full check using a tool like Google Lighthouse here:
it's open-source
it's automated
it's so handy (it's Chrome built-in)
it's super easy to use
Moreover, this accessibility testing tool is part of a whole suite of checks that you can run using Chrome Developer Tools:
SEO
Progressive Web App
Performance
Best Practices
What it does it provide you with a full report of its test results:
whether all the buttons on that page have accessible names or not
whether all the images have ALT attributes added to
whether that page has a title or not ...
Next, you simply take it from there and improve the areas signaled in the report.
And here's how you use it:
open devtools in your Chrome Browser
look for the "Audits" tab
click "Perform an Audit"
Tip: save the report in a JSON format for later (or to send it to someone in your team).
Another great thing about Google Lighthouse is that it's one of those web accessibility evaluation tools that don't require you to sign up. You just drag a report onto the online report viewer that it provides you with.
4. Axe Browser Extension
"How do you know if your site actually is WCAG 2.0 compliant?"
You "grab" a tool like Axe here and give your site an automated audit.
It'll just attach itself as a new tab to your Chrome's Dev Tools. Once you click that blue "analyze" button, you'll be given a whole list of "violations" detected on your page.
Why have we included it in our highly exclusive list of 5 best web accessibility testing tools?
because it's free (a self-contained open-source library)
because you get to custom-tune it to your specific accessibility testing needs: add specific rules, integrate it with testing frameworks and browsers of your choice...
because each signaled issue "exposes" the corresponding markup, as well
Just hit "Inspect code" and you're taken to the tab in DevTools, where the "culprit element" is outlined.
Tip: another reason why this is one of the first website accessibility checkers that you should consider is that the Axe accessibility report goes beyond signaling clear violations of accessibility guidelines.
It also highlights aspects that you could improve on your website's UI.
5. Siteimprove, One of the Best Web Accessibility Testing Tools
We confess: Siteimprove is our favorite website accessibility checker. Here's why:
it provides us with actionable information regarding all the issues that it detects
it generates clear explanations on the impact of those issues on some users
it also "spoils" us with intuitive user experience: issues get highlighted to the right side of the page
Where do you add that the entire web page audit process is performed in our Chrome browsers.
Easy to use and highly efficient. What more could you wish from a free accessibility testing tool?
Final Word
Turn this type of accessibility testing — using Chrome extensions — into a part of a more comprehensive testing strategy.
You shouldn't limit your evaluation to the results that you get by using any of these 5 best web accessibility testing tools.
There's still some level of "human intervention" needed to interpret those results. To come up with the proper set of steps to take, right?
Use them if you just want to check whether:
there are any images without ALT descriptions on your website
the HTML is valid
your form fields have both labels and descriptions
Whereas for assessing:
whether that HTML is semantic or not
whether those form field descriptions are user-friendly enough
whether there's a proper heading hierarchy on a given page on your website
... you'll need human analysis.
Automated accessibility testing will (only) point out key aspects for your QA testers to focus on.
The END!
Have you used any of these accessibility testing tools on your website?
Do you usually stop your audit there or do you use an automated & manual testing type of "combo"? Does it depend on the context actually?
Share your thoughts in the comments down below!
Photo by John Schnobrich on Unsplash
Adriana Cacoveanu / Feb 29'2020
Let's say that you're considering using Drupal for your next web project. You've read about its unmatched robustness and flexibility... And still: real examples of brands that have their websites built on Drupal in North America would weigh heavier in your decision-making process than just... statements about its great features, right?
But which are they?
These websites powered by Drupal that are well known in Canada and the USA?
We've done our research and put together a list of both highly popular and uniquely designed Drupal-based websites.
So, here they are: the 10 best Drupal websites in North America to inspire you in 2020:
1. Ontario Institute for Studies in Education of the University of Toronto
OISE, Canada's most reputed center for graduate studies in education, has its website powered by Drupal.
And built by our own team of Drupal developers...
Why did they trust Drupal 8 with their digital presence?
because it's fast and good page load time was crucial for them
because Drupal's designed to “cope with” high volumes of content
because Drupal enables building websites with responsiveness in mind
because of Drupal's modular structure and flexibility: the OISE editorial team can easily add, update and publish new content, whereas new functionalities can easily be implemented in the future
2. World Vision International
A global organization impacting the lives of millions couldn't have chosen but a robust CMS platform like Drupal to power its website with.
With:
an intuitive UI design
clean and conveniently minimalistic design
a reliable content management system to support a site representing +90 countries
... the World Vision International's Drupal-powered site is built to make an impact.
3. MIT List Visual Arts Center, One of the Top Websites Built on Drupal in North America
How could we have possibly left it out of our Drupal websites list?
MIT's website taps into:
the flexibility of the Drupal entity system to grant visitors a content-rich user experience centered on content diversity: text, audio, lists, images
Drupal's features aimed at providing the editorial team, as well, the best experience
The result?
An intuitive, brand-driven content-rich experience for the users on the MIT website.
One that comes to complete the actual visiting experience at the MIT physical art museum and virtual art lab.
4. University of Arizona
One of the well-known websites using Drupal 8.
And it's no surprise that they've chosen precisely this CMS since Drupal's been the go-to platform in the higher education sector since... forever:
it empowers the staff to easily create, edit and publish content on the run
it enables that editorial team to easily share/reuse content across multiple sections of the website (and a high ed site is usually an intricate "ecosystem" of content sections and smaller sites)
it advocates for a "mobile-first" approach to website development
In the case of the University of Arizona, its old website got migrated to Drupal 8 and its design revamped, all in the name of a better user experience.
5. Think Global Health
Another one of the well-known websites built on Drupal in North America is this multi-contributor site that explores the way health changes impact societies, everyday lives, and economies on a global scale.
With such a heterogeneous content team and a wide variety of content being edited and added regularly on this newspaper website, no wonder that they've turned to Drupal.
6. Canadian Museum for Human Rights
Humanrights.ca has earned its own star on the Drupal websites' "hall of fame" due to a cutting-edge functionality that it incorporates:
Enabling visually impared users to configure their own experience on the site.
From adjusting the contrast to selecting the font size and style, they get the most of Drupal's "empower the end-user" philosophy.
7. Nature Conservancy California
Another one of those Drupal website examples where content variety "rocks supreme".
From video content to video footage, to interviews, to ambient sound, this platform's using Drupal for handling the multiple types of content formats that support its project stories.
8. Princeton University Admission
What makes this high ed website stand out from all the other university websites built on Drupal in North America?
the non-conventional visual storytelling techniques that it leverages in order to highlight what's representatively unique about this school
the impactful content (linear media), ranging from narrative faculty portraits to textural videos of the campus life, photo content providing visitors a more in-depth view into the life at Princeton
Furthermore, they chose Drupal in order to inject" top performance and give their "Undergraduate Admission" website a fully responsive web design.
9. Jack Daniel’s Tennessee Whiskey
JackDaniels.com makes a great example of a website that makes the most of Drupal's powerful content management features:
again, the site comes as a complex ecosystem of different types of content: immersive photography, video content, cinemagraphs...
local markets around the world get to custom-tune the website to suit their own local customers' needs; to personalize it with translated copy, market-specific programming...
A robust content management system along with the "empower the user" philosophy, these are 2 of Drupal's defining features that JackDaniels.com taps into in order to provide:
an engaging experience to its visitors
an empowering experience to its users (admins across the globe)
10. TraffickWatch
The storytelling Drupal website of a nonprofit that raises awareness about human trafficking.
The END!
What other famous websites built on Drupal in North America have we missed? Feel free to... scold us in the comments section down below.
Adriana Cacoveanu / Feb 25'2020