What makes Drupal a great choice from a UX standpoint? What features are responsible for the enhanced end-user experience in Drupal 8? Those features that enable you to easily create an intuitive and enjoyable visitor experience on your own Drupal-based website/application.
And to constantly improve it...
Is it all those performance enhancements that it ships with? Or maybe its “responsive out-of-the-box” nature? Or rather its multilingual capabilities?
1. But First: 7 Evergreen Ways to Improve Your Website's UX
It goes without saying that, in order to create an enjoyable, rich user experience on your Drupal 8 website, you'll need to:
put together a solid UX strategy
run extensive user research and map the user's journey
come up with an effective, well-planned UX design, paying attention to all the latest design trends (and now decoupled Drupal empowers you to tap into a whole range of new possibilities...)
And while carrying out all these phases of the UX design process, make sure to apply the following evergreen techniques for enhancing the visitor's experience.
1.1. Optimize the page loading time
For speed will always be the factor with the biggest influence on the user's experience on your Drupal site.
In this respect, there are tons of performance enhancements that you can implement, ranging from aggregating your JS and CSS files to properly configuring your cache to opting for a CDN, to...
1.2. Use bullets to structure your text
Bulleted lists are the “holy grail” of neatly structured, easy to read content.
For, in vain you invest time and effort in providing content that delivers real value to your website's visitors if you display it as an... “impenetrable” block of text.
In this respect, bullets help you break down the information. The result: users will see the key product or service benefits/will go through all of the presented features a lot quicker.
1.3. Use white space strategically
Speaking of easy to read content: there's no better way to enhance readability and to draw attention to specific elements on a page than... by using the white space itself.
It will automatically direct their attention to the text/image emphasized by all the white space surrounding it.
1.4. UX design is consistent design
From color palette to button styles, from the size of the headings in your text to the chosen font, from the used photos to various design elements... keep consistency across all the pages on your Drupal website.
Otherwise, you risk to confuse and to eventually... tire its visitors.
1.5. Go for visible, attractive CTAs
Always use action words for your calls to action and make sure they're easily recognizable. CTAs play a crucial role in setting up an intuitive, efficient navigation structure on your website...
1.6. Use images wisely
As images are always well-deserved “breaks” for the eye, especially when it's a long text that it's challenged to go through.
And yet, if you fail in using the relevant images, those that perfectly team up with your text... the user experience that you'll deliver will be anything but compelling...
1.7. Make your headings a high priority
Remember to write your headings around some of the main keywords.
Also, strategically design them so that they're highly visible and help users to quickly scan through the content.
2. 4 Features Responsible for the Superior End-User Experience in Drupal 8
Gluing together all the design best practices that make a great user experience does call for a flexible and dynamic web platform.
Drupal 8 is that platform. It comes packed with powerful features that make it easy for you to create the best visitor experience on your website.
Here are the ones with a huge influence on your website's UX:
2.1. Drupal 8 is responsive right out-of-the-box
And responsiveness, along with top page loading speed, still is one of those factors with a great influence on visitors' experience with your Drupal website.
With:
all the available base themes now being responsive
the convenience of adapting your images to various screen sizes right from their display properties
… creating a compelling end-user experience in Drupal 8 is dead-simple.
2.2. Enhanced performance
From a performance standpoint, Dries Buytaert's post on Drupal 8's performance optimizations is still one of the most relevant sources.
If Drupal was already built to “inject” enterprise-level performance into static pages, Drupal 8, with all its caching enhancements, is designed to speed up dynamic web pages, as well...
2.3. Multilingual capabilities
Remember the user experience's main facets, ranging from useful to findable, to valuable, to credible to... accessible?
Well, Drupal 8 provides you with multilingual capabilities right out of the box. You get to translate your website's UI, content, configuration, etc.
Meaning that, with this multilingual system at hand, you can easily create an accessible user experience on your website.
2.4. Content personalization (by segment, login time, device, language...)
In this respect, the Aqua Lift Connector module is your most reliable tool.
What it does is bring together customer data and content, so that you can deliver targeted content experiences across multiple channels and devices.
The END!
And these are those robust features that stand behind the superior end-user experience in Drupal 8. The very reasons why this platform, and particularly this version of Drupal, makes your best ally in creating the most compelling UX on your website.
Photo by Lucian Novosel on Unsplash
Adriana Cacoveanu / Apr 17'2019
What's the rough cost of an application? What goes into its price more precisely? What are those heavy weight factors that influence and end up determining the mobile app development cost?
Is it the (custom) features and app-specific functionality that you need to get implemented into your app? Or maybe the app development company itself? The chosen platform, the post updates, the number of screens or maybe the API development and integration?
Or rather all of these elements, plus a few more?
Here's a breakdown of the key aspects which, all put together, will decide your mobile app's price tag:
1. The Mobile App Development Platform Itself
As it “dictates” the operating system that your app will run on: Windows OS, Android OS, iOS OS, Blackberry OS. And, therefore, it heavily influences the cost of the mobile app development process itself.
What type of mobile application do you have in mind? Who's going to be its target audience?
These are but 2 of the crucial questions whose answers will determine your choice of app platform.
Note: do keep in mind that it's your mobile app development platform of choice that will determine the version of the OS system, as well.
With Android, your available options go from Jelly Bean to Nougat, from KitKat to Marshmallow and Lollipop. Whereas with iOS you'll get to choose between version 9, 10 and 11.
2. The Features You Need Will Strongly Influence the Mobile App Development Cost
How does your list of “must-have” features look like? And what about your... “nice to have” one?
Do your expectations in terms of app functionality go from:
push notifications
to geolocation
to in-app purchases
to streaming
to user login
to offline mode
to media content (smileys, emoticons, editing functionality here included)
to Google maps integration
to instant messaging?
Well then, do keep in mind that every feature on your wishlist is going to get reflected on the bill. You might want to trim it down a bit.
But if you've decided to stick to your feature requirements, make sure they're perfectly:
adapted to your target audience's expectations
suited for your specific type of mobile app
3. The Contracted Team of Mobile App Developers Itself
And it's not just the proven expertise and experience of the team members that will influence the mobile app development cost, but their... number, as well.
A “standard” app development team would include:
UX or/and UI designer(s)
QA engineer
project manager
in-house mobile app developer(s)
Plus a back-end developer, depending on your specific requirements (whether you'll need an API developed, as well, or not).
An extended team could include also 1 system administrator, plus more people for each one of the above-mentioned roles.
A larger team translates into higher costs, right? Yet, a too small team might also reflect in the longer time spent working on your app project. And time is... money.
In short, when evaluating the potential candidates, try to balance your budget and those teams' level of proficiency. Your specific feature requirements and their provable experience in implementing them.
For, a badly integrated functionality could be cheaper now, yet get quite expensive on a long term...
4. Your Specific Back-End & API Development Needs
Do you need an API? A scalable and powerful back-end for your app's content and data?
And would a basic cloud-based server suit your needs or do you need a middleware layer developed, as well?
Start analyzing all these variables and knowingly make your choices: all back-end and API requirements will finally bubble up to the mobile app development cost estimate...
5. Your Post-Development Updates & Maintenance Requirements
Just think of every user as of a new potential “risk”. One that could unknowingly inject all types of bugs and threats into your future app.
How will you get these risks under control? By:
implementing a continuous maintenance process
running regular updates on your mobile app
And having a dedicated team at your service to keep your application “sanitized” and properly updated does come with a price tag on...
One that will influence your mobile app development cost.
6. The Copyright and App Licensing Options
Just imagine: you've waited from 3 up to 6 months for your app to be ready, with all the “valuable” features and custom functionalities “baked in”. Then, after another few months, key elements from it get copied.
To avoid such a scenario, there's another aspect (and cost) to consider: applying for copyright.
You'll need to invest in an app license, that will protect your mobile application from getting copied.
7. The Number of Screens to Be Incorporated into Your App
How many screens have you planned for your future mobile app?
The answer to this question is highly influenced by the “palette” of features that you want to get incorporated into your app. The more of them, the more screens will need to be implemented...
And the higher the price will be, obviously. Your app development team's invested resources of time and effort will be proportional to the number of screens you'll request from them.
In short: be 100% certain that each and every feature that you wish to have implemented in your app is relevant and it adds value.
No need to overcrowd your app with lots of screens crammed with non-essential features.
8. Native or Hybrid Mobile App? What Will It Be?
And each type of mobile app comes with its own advantages and disadvantages:
native mobile apps stand out in terms of performance and come bundled with a wide range of functionalities; yet, do expect a high mobile app development cost (and a longer development cycle, as well)
hybrid mobile apps get developed and running in no time, across multiple platforms, so they're much more cost-effective; yet, they do not “rock” in terms of performance, nor do they live up to the same UX standards as the native ones
The choice depends entirely on your own priorities: outstanding performance & a full range of functionalities vs versatility & lower costs...
Note: needless to add that there are other aspects related to your app-specific type — basic functionality app, app depending on the device's hardware, data-driven app — that will influence its development cost.
9. The Security Features to Be Implemented
And you need to give this aspect its due consideration. With payment gateways integrated into your future app and loads of confidential user data being handled there, you can't afford to underrate the security aspect.
It goes without saying that the mobile app development cost will get influenced by the specific security features that you'll integrate.
Final Word
Identify your needs before even attempting to estimate the mobile app development cost. And, most importantly: set them apart from your... wishes.
It's only after you've put together your own list of requirements, project-specific constraints, and preferences that you can arrive at an accurate estimate.
Image by krzysztof-m from Pixabay
Adriana Cacoveanu / Apr 10'2019
How does a (truly) effective mobile app launch checklist look like?
What key areas to look into does it include? What critical issues to be fixed before launch day? What metrics to measure and features to test should there be on this well-constructed “to-do” list?
Here, we've trimmed down all the steps to take before launching a mobile app to... a shortlist of 10.
10 aspects you must absolutely check and optimize before... going public.
1. Identify all Redirects and Broken Links
Make sure you address these issues before launch day.
For, if overlooked, they'll keep slowing down your app and affect the user experience.
Broken Links
Two of the most popular free tools for detecting and fixing broken links are:
Xenu
Broken Link Center
Once spotted, decide whether they should be removed or just updated.
Redirects
Rely on Screaming Frog to scan your website for redirects or, on HSTS to get rid of the SSL redirect.
2. Minify Your JS, CSS and HTML Files
A step to be found on any mobile app launch checklist.
How does this size reducing process work? By removing unnecessary code:
unused spaces in your CSS
superfluous JavaScript code
redundant line breaks in your HTML
Plugins like Autoptimize and Fast Velocity Minify (if it's a WordPress-based app that you're launching) are just a few examples of plugins you could use to streamline the process.
3. Measure and Optimize the Time to First Byte
To what extent does the handled data affect your app's performance when traveling across the network? Does it use too much network bandwidth?
Keep a close track on the time to first byte and, if you detect any alarming signs, here are some of the solutions at hand:
apply flush techniques to prevent your backend from getting “overweight”
closely monitor your database configuration and schema
compress all data sent over the network
modify your server configuration
In short, remember to include tracking this specific metric on your mobile app launch checklist...
4. Trim Down the Content to Its Essential Elements and Features
Consider the smaller screen that your content will be accessed. Next, empathize with those users and try to anticipate the experience they'll get if:
your content's “stuffed” with lots and lots of footers, headers, sidebars, menus
… graphs, tables
Would you be able to easily swift through this heavy load of distracting elements, to identify the main message and... stay focused on it?
So, you get my point: trim down the clutter and keep it concise.
Enable your content to easily shine through, instead of “burying“ it under a load of bulky elements.
Note: you might want to consider going for video content where possible and removing the hover-effects if there are any; not all mobile devices support this functionality.
5. Text Compression: A Bullet Point on Any Mobile App Launch Checklist
Another one of those fixes that you must absolutely do before launching your mobile app is compressing your text files.
It's one of the bulletproof techniques for boosting your app's performance.
How to do it? There are multiple ways:
enable default compression using Gzip, since it's highly likely that your CDN supports compressed files
if compression is not already enabled (assuming that you don't host your own website), just opt for any of the available plugins to set it up yourself: WP Super Cache, W3 Total Cache, WP Rocket...
6. Streamline Your Checkout Process
A step from your mobile app launch checklist that you shouldn't overlook.
Since confusing and/or too long checkout process is one of the main factors affecting UX after all...
What can you do to optimize it?
test your mobile app on various devices, with different screen sizes and try to detect the “bottlenecks” in the process
address any too small touch points issues
simplify the discouragingly complex form navigation
integrate your app with payment gateways; this way you'll automate the tedious “enter your checkout information” process
enable users to set up profiles that would allow them to save and to automatically re-use all the needed information whenever they need to re-fill the form
7. Measure and Boost Your Mobile App's Speed
Another critical metric to measure before you launch your app is speed.
How fast does your mobile app load? Are there too many requests overburdening your back-end servers that drag your app down?
Or, even worse: that cause it to crash?
And these requests overstaining your server range from:
API requests
to DNS lookups
to network bandwidth
to data size
to HTTP calls
8. Simplify Your Website's Structure: Keep It Highly Intuitive
Apply the “extreme simplicity and maximum efficiency” principle to your website's structure.
Keep it conveniently easy to navigate and review all content hierarchies before launching your application. Make sure they're not confusingly... bulky.
Now, here's an example of a well-constructed website structure for mobile:
homepage
categories/sections
subcategories
single posts and individual pages
Again, turn empathy into your most powerful tool: try to anticipate users' standard “routes” on your website. Then, see if all the categories in the hierarchy make instant sense.
9. Optimize Your Images
By far one of the most effective and handiest “To Do's” on your mobile app launch checklist...
Resizing your images and optimizing them for specific uses will speed up your app dramatically.
And speaking of “handy solutions”, you surely do not run out of options when it comes to image optimization tools:
Cloudinary, Fastly, Akamai, for hosting and optimization
XNConvert, ImageOptim for on-off optimization
Imagemin, Thumbor, Imageflow for automated optimization
10. Split Your Code: Break Down Large JavaScript Bundles into... Smaller Chunks
Heavy bundles of JavaScript to be processed will just... slow down your mobile app.
This is why code splitting should be one of your top 10 issues to fix before launching a mobile app:
it will break those “beefy” JS bundles down into smaller pieces
and deliver them way quicker
... only upon users' requests
Note: you can split your code either at a component or at a route level using tools like WebPack, Parcel, React...
The END!
These are the 10 essential To Do's to include in your mobile app launch checklist.
Why? Because:
they address critical issues which, if left unsolved, will have the biggest impact on the user experience
there are multiple handy solutions for them all (and most of them are free), that you only need to... apply
Image by Fedorussie from Pixabay.
Adriana Cacoveanu / Mar 26'2019
The earth is round and images are “the usual suspects” of too long page loading times... Along with video content. So, what do you do? You comprise, of course. And then you face a major challenge: resizing images for the web without impacting their quality.
What file format should you select when saving your images for the web? And what type of compression should you choose?
How do you strike a balance between an image file's ideal size and that quality standard that you've set for your website?
On one hand, you strive to optimize your images for the web — to reduce their sizes — and thus to improve your website's overall speed and the user experience delivered there. But, on the other hand, you risk affecting precisely the user experience if you over-comprise your images and compromise their quality.
Now, time to shed some light on this “size vs quality” dilemma here:
1. What Does It Mean to Optimize Images for the Web?
In short: what does Google expect you to do when it suggests you to optimize the images on your website for improving your page loading times?
To reduce your image file sizes...
This way, you'd lift some of the weight and give your load time a speed boost!
You can do that either manually, using a script/plugin or... both.
And, when it comes to compressing images for the web, you have 2 common methods to choose from:
lossy compression
lossless compression
And we'll be delving into details in a bit...
What I want to stress out now is a bad practice that too many website owners stubbornly stick to:
Even though image optimization is one of the easiest ways that one can improve his website's performance, it's too often the most underrated one, as well.
Resizing images for the web means no more than:
saving your images in the correct format
using the context-appropriate image compression method
2. Choosing the Best Image File Format for Web: JPG vs PNG vs SVG vs GIF
What does it mean to save your images for the web “correctly”? What file type should you use, more specifically?
Here are the most commonly used ones along with helpful suggestions on their best use cases:
2.1. The JPG Image Format
Opt for a JPG (or JPEG) file format when you optimize your images for the web if it's screen shorts and general photos that you're saving.
Images that include many colors...
Now, what you do need to keep in mind is that:
The JPG format helps you reduce the files' sizes for the web, but with a loss in the quality of your images.
And here we get to the compression technique specific to this file format: the lossy compression.
It's a filter that, for the sake of decreasing the image's size, removes some of the data from the original file. This can only affect the quality of the image who's size you're trying to reduce.
Do keep in mind that this “degradation” process is irreversible...
In short: your web page will load faster, yet at the cost of your image's quality. The more you'll try to compress it, the... uglier it'll get.
The solution?
When you're faced with a scenario that requires this type of image format (e.g. saving images with lots of colors, complex still images), strike a balance between its quality and its size.
Just mind you don't over-reduce its size in the name of page loading speed...
2.2. The PNG Image Format
Choose the PNG format when resizing your images for the web if you do need high resolutions and high detail.
If it's simple images that you're saving (instead of fine-art photos with lots of colors).
Wondering what's the compression technique specific to this file format? The lossless compression:
A technique where the image's size gets reduced with no compromise on its quality.
2.3. The GIF Image Format
There's no point adding that it's a file format specific to animations.
When compressing your animated GIFs, it's the lossless technique that's being used. In other words, no need to worry about the loss of quality.
2.4. The SVG Image Format
Is it a logo, text, icon, or simple image that you're planning to optimize for the web? And are you looking for an image format that supports animation and interactivity?
Opt for the SVG format then.
Here are some more reasons why it might be the most suitable one for your use case:
Google indexes SVGs, JPGs, and JPGs the same way; there would be no impact on your website's SEO
SVG image files are scalable, by default, in both photo editing tools and browsers
in most cases, SVG files are lighter than JPG and PNG image files
3. Resizing Images for the Web: Lowest File Size vs Acceptable Quality
What's that reasonable file size that you should target, that would preserve an acceptable quality of your images?
How do you strike a balance between compression rate and “decent” quality?
you choose the appropriate file format for the type of image that you're trying to optimize
and, implicitly, the suitable compression method, for that image format, as well
Yet, nothing beats “the golden rule of moderation” when looking for the balance between size and quality:
Opt for a medium compression rate.
Don't get “greedy”, don't reduce your images' sizes to the point of affecting their quality.
Even if it's top page load speed that you'd be gaining (and speed is UX, right?), the poor quality images resulting will still have a negative impact on the user experience.
4. Web Images Best Practices
Here's some sort of “guide”, including all the essential must-dos when resizing images for the web and optimizing them for an improved page loading time:
save them in the correct file format
save them at the appropriate size
choose lossy compression, whenever possible
lazy load images, when possible, for better page load times
use pixels instead of inches when sizing images for the web; DPI — dots per inch — is not fit for the layout on the web
automate the process, as much as possible
go with a plugin that would compress and optimize your images externally, on their servers; this way, you'd be offloading your own website
use web fonts instead of text within your images; they take less space and scale better
when creating Retina images, make sure they're two times larger and, therefore, clear enough once displayed on the Retina device; the quality of the images should be the highest possible on your Retina Display-driven website
The END!
These are our tips and tricks on resizing images for the web and optimizing them without risking to affect their quality.
What other best practices would you have included?
Photo by Markus Spiske on Unsplash
Adriana Cacoveanu / Mar 13'2019
We wanted to share this good news with you: OPTASY, the Canadian Drupal firm, has been ranked as a 2019 "Canada leader" in 3 categories of the Clutch annual list.
Top Development Firms in Canada
Canada Top Web Developers
Best PHP Developers in Canada
Thank you!
For taking the time to answer the Clutch team's questions and give your honest feedback on working with us. For challenging us to be our best and turn our expertise into your results.
We're looking forward to working with you on new projects.
Sincerely,
The OPTASY team
Adriana Cacoveanu / Mar 07'2019
Which of those Drupal modules that are crucial for almost any project make you want to just... pull your hair out?
For, let's face it, with all the “improving the developer experience” initiatives in Drupal 8:
BigPipe enabled by default
the Layout Builder
Public Media API
and so on
… there still are modules of the “can't-live-without-type” that are well-known among Drupal 8 developers for the headaches that they cause.
And their drawbacks, with a negative impact on the developer experience, go from:
lack of/poor interface
to a bad UI for configuration
to hard-to-read-code
too much boilerplate code, verbosity
to a discouragingly high learning curve for just some one-time operations
Now, we've conducted our research and come up with 4 of the commonly used Drupal modules that developers have a... love/hate relationship with:
1. Paragraphs, One of the Heavily Used Drupal Modules
It's one of the “rock star” modules in Drupal 8, a dream come true for content editors, yet, there are 2 issues that affect the developer experience:
the “different paragraphs for different translations” issue
the deleted (or “orphaned”) paragraphs that seem to “never” leave the database for good
Developers are dreaming of a... better translation support for the Paragraphs module. And of that day when the deleted pieces of content with paragraphs data don't remain visible in their databases.
2. Views
Here's another module with its own star on Drupal modules' “hall of fame” that... well... is still causing developers a bit of frustration:
You might want to write a query yourself, to provide a custom report. In short, to go beyond the simple Views lists or joins. It's then that the module starts to show its limitations.
And things to get a bit more challenging than expected.
It all depends on how “sophisticated” your solution for setting up/modifying your custom query is and on the very structure of the Drupal data.
Luckily, there's hope.
One of the scheduled sessions for the DrupalCon Seattle 2019 promises to tackle precisely this issue: how to create big, custom reports in Drupal without getting your MySQL to... freeze.
3. Migrate
There are plenty of Drupal developers who find this module perfectly fit for small, simple website migration projects. And yet, they would also tell you that it's not so developer friendly when it comes to migrating heavier, more complex websites.
Would you agree on this or not quite?
4. Rules
Another popular Drupal module, highly appreciated for its flexibility and robustness, yet some developers still have a thing or two against it:
It doesn't enable them to add their own documentation: comments, naming etc.
And the list could go on since there are plenty of developers frustrated with the core or with the Commerce Drupal module...
The END!
What do you think of this list of Drupal modules that give developers the most headaches? Would you have added other ones, as well?
What modules do you find critical for your projects, yet... far from perfect to work with?
Adriana Cacoveanu / Mar 01'2019
For it's not just the developer's job to code it or the designer's task to design it. It's your responsibility as well, as a content editor, to... write a website's accessibility. Creating accessible content is how you can contribute, directly, to ensuring its accessibility.
Since it's a shared responsibility: a website's accessibility is not just coded and designed, it's written, as well.
Your own accessibility checklist, as a content editor, would include tasks like:
adding alternative texts to every non-text element of the content
writing relevant, descriptive text links
putting together an easily scannable headings structure
writing clear copy
In one word: your self-assigned “mission” when it comes to making a website accessible for everyone is to create/further optimize every aspect of the website's content with accessibility in mind.
With empathy...
But What Is Accessible Content?
First of all, we should make one thing clear:
“Web content that's accessible to everyone” doesn't mean just “web content that's also accessible to people with various disabilities".
It also refers to content that can be easily accessed and understood by:
smartphone users
elderly users with no broadband
users with low literacy
users with English as their second language
Now, a website's content is accessible if it follows the WCAG 2.0 standards from the W3C. Or the POUR checklist if you wish:
perceivable: content should be presented so that the website users can perceive it effortlessly and instantly
operable: the way it's structured should be easily operable
understandable: a content's understandable once it's simple and concise and its structural elements meaningful
robust: content should be easily scanned through and correctly interpreted by assistive technologies
#1 Tip: Add Alternative Text to Non-Text Content Elements
Here's a quick empathy test for you:
Imagine that you're a visually impaired user. You access a website displaying lots of visually-striking imagery that you cannot or can hardly see.
Or maybe there's a button there, on the homepage, that you need to click in order to listen to a podcast, but you just can't spot it.
See my point?
Creating accessible content means adding alternative text to every non-text content element — image, design element, chart/table, button — on the website. Screen readers can read text only: they cannot interpret images for their assisted users...
A few best practices for using ALT text:
keep your text under 125 characters
there's no need to start your alternative text with “image for...”
when possible, restrain yourself from using images with text (e.g. diagrams or graphs)
# 2 Tip: Write Clear Copy
For clear copy is... accessible copy.
Keep your writing simple, your core ideas clear and always use plain language. This way, you'll make the message on the website accessible to everyone:
visitors with cognitive disabilities
non-native English speakers
users accessing the website from their mobile devices
Best practices for writing clear copy:
use active voice
put the key ideas up front
always “bet on” short sentences
stay away from jargon
avoid idioms
# 3 Tip: Writing Accessible Headings Means Creating Accessible Content
Writing for accessibility means, among other things:
Structuring and styling your content so it's scannable.
And relevant, properly formatted headlines will allow assistive technologies (and their assisted users, implicitly) to scan through your content, jumping from heading to heading.
This way, they can easily find what they're particularly interested in, instead of forcing them to go through the entire chunk of content.
A few best practices for writing accessible headings:
go for clear and relevant headlines rather than “cute” or “smart” ones
don't just bold your headlines, but use the proper hierarchy (H1, H2, H3...) and formatting — <h> tag — instead
Note: if you overlook to format your headlines using the <h> tag, the assistive technologies won't recognize them as... headlines.
# 4 Tip: Accompany Links with Good, Descriptive Link Texts
And creating accessible content does mean tackling "the links issue”:
Whenever you're creating a link, make sure to add a descriptive link text, too. This way, it will be crystal clear, to all users, what kind of page that link would take them to, once/if clicked...
Some best practices for writing link texts:
make sure to signal if the link leads to a download; just insert the word “Download” in the link text or “PDF” in parentheses or “new window”
keep it concise, so that the screen reader can read it fast enough
avoid using “ALL CAPS” in your link text, they're harder to read
avoid relying on color, only, to indicate linked text, as that's not at all writing for accessibility if you consider the color blind visitors on the website
#5 Tip: Use The Right HTML Tags to Create Bulleted Lists
Can't have a clean, scannable text without some bulleted or numbered lists strategically “sprinkled” here and there, right?
Just remember to format them properly:
use the <ul> tag for bulleted lists
… and the <ol> tag for numbered lists
# 6 Tip: Add Captions & Transcripts to Your Audio/Video Content
Now, just try to step into the shoes of a non-native English speaker, of a hard of hearing/deaf visitor or of a user unfamiliar with the speaker's accent. How accurately would you be able to understand a video or audio piece of content?
Creating accessible content means, also, adding text versions — captions — to the videos and the audio content displayed on the website.
Best practices for creating captions:
write your own captions, don't rely on automated ones (or rely on a service that transcribes the audio content for you, like Rev)
make sure your captions are synchronized
… exhaustive: remember to caption sound effects and background music/noise, as well
and equivalent: avoid paraphrasing
Note: also, keep in mind to add a static transcript, too, useful for any user who won't/can't access your video or audio content and depends on the equivalent text
Wrap Up: Make Accessibility Part of Your Content Creation Process
Making your content (more) accessible should be an integral part of your editorial workflow, not a last-minute checklist to handle.
Therefore, grow a habit of:
adding alt text while you're editing your copy
adding a caption as you're editing that new video that you're about to upload
structuring and formatting your headings as you're working on your new blog post
and so on...
In short: adopt an accessibility-first approach to your content!
Adriana Cacoveanu / Feb 20'2019
Is your website adapted to... lure in and greet voice searchers? It should, considering that there are a ton of stats showing that by 2020 30% of online searches won't even... involve a screen anymore. Voice searches are (already) taking over text-based searches. So, the question “haunting” you right now must be: “How do I optimize my website for voice search in 2019?"
For, what grew as a mega-trend in 2018 — no less than 1 billion voice searches performed in January alone — will turn into reality this year.
And there's no surprise here. It's just... convenience at its best:
no hands, not even a screen are required
spoken language over a lot more formal, rigid written language
Now, getting back to your legitimate concern — how to get your website voice search-friendly — here are the web design and content creation/planning best practices for voice search optimization. The 2019 guide version...
1. Put the Most Sought After Information at the Very Top
OK, here's the situation:
User “X” has opted to use his/her search voice gadget or voice assistant to make an online query.
This can only mean 2 things:
that he/she wants to skip all the steps that a text-based search would require — all that clicking and scrolling — and take the shortest path to find the needed information
that he/she looks for a specific piece of information or wants to perform a specific action
And I don't mean just making a call.
For instance, here's the next most sought after information or “want to perform" actions where users would use voice search instead of text:
to make an appointment
to get information about any current sales, promotions and special offers (e.g. free shipping offers)
to find out what are the opening hours of a given brick-and-mortar store...
to get information about upcoming events
How do you prepare your website for voice search from this standpoint?
You put the most commonly sought after information in the header! So potential customers can... “grab” it as soon as they've uttered their voice queries.
For instance, you could display snippets of information in the navigation bar...
2. Use Conversational Phrases and Long Tail Voice-Oriented Keywords
“How do I optimize my website for voice search in 2019?”
A short answer would be:
By “sprinkling” conversational, long-tail keywords on your web content. By focusing your SEO efforts on phrases, even whole sentences.
For, let's face it:
The spoken language is clearly different from the written language.
Voice queries have nothing to do with the “stiff”, standard keywords that we'd use for performing a text-based search.
In this respect, use voice-oriented keywords and phrases/sentences in your featured snippets, in your metadata...
3. “How to Optimize My Website for Voice Search in 2019?” Localize Content
In other words: optimize for local voice search.
And it's no “mystery” here:
46% of voice searchers look for information on businesses in their geographic area.
Just put yourself in their shoes:
It's far more likely that you utter “Where can I eat the best pasta in New York” compared to “Where can I eat the... in USA?”
So, make sure you localize the content on your website. Meaning that you:
use verbiage and colors that resonate with those locals
use visuals specific to that region
include the name of that city/region (don't forget about your metadata)
tag your images and video content with the name of that city/region
put together location-specific pages on your website
In short, local voice search optimization is made of all those efforts geared at helping your website rank high in the voice search results. Where the voice searches are based on “... near me” or “... in [name of location]” type of queries.
A piece of advice: optimizing your website for local voice search also means keeping critical information about your business — opening hours, location, updated contact number(s) — up to date and most visible in your profile.
Also, do consider creating content around business profile-relevant keywords, like “best Italian restaurant” or more specific ones: “the best carbonara pasta”.
4. Anticipate The Most Frequently Asked Questions and Create Content Around Them
Another top answer to your “How to optimize my website for voice search in 2019” type of question would be:
Creating content answering those specific voice queries that your potential customers are most likely to perform.
And how do you anticipate those most frequently asked questions?
You rely on powerful tools like Answer the Public and, if your website's old enough, you dive into your Google Analytics data. There, under Acquisition > Search Console > Queries you'll find plenty of valuable information to explore and “exploit”.
Once you know what the most common queries are, start creating your targeted content:
write quality blog posts around the answers to those “popular” questions
remember to insert those highly relevant long-tail keywords in your metadata
put together a detailed FAQ page on your website
place the answers to those frequently asked questions in featured boxes; this way, they'll just “stand out”, so users won't need to scan your entire website to get them
… also, once/if marked properly, users don't even need to access your website: the featured snippet, including the answers to their queries, will already show up in the voice search results
Final Word
“How do I optimize my website for voice search in 2019?”
By adapting the navigation & search on your website to this new reality: users... using their voices to search online.
And that doesn't mean getting your website to “talk back” to its visitors. There are voice assistants and conversational UIs for that.
Instead, focus your efforts on:
Localizing and, overall, creating voice-search friendly content that should provide quick, accurate, specific answers to users' anticipated voice queries.
Adriana Cacoveanu / Feb 15'2019
API first, responsive Bartik, headless and decoupled Drupal, Layout Builder, React admin UI... Drupal's evolved tremendously over these 18 years! Yet: the emails that we send out via its otherwise robust email sending system aren't different from those we used to send a... decade ago. And customers expect rich experiences outside your Drupal website or app. While website administrators expect to be enabled to easily manage, via the admin UI, their email content templates. So: how do you send HTML emails in Drupal 8?
Without relying on external services, of course...
And who could blame customers for expecting 2019-specific user experiences? Experiences that HTML-enabled emails deliver through their great features.
Features that support Drupal editors' marketing efforts, as well:
traffic-driving hyperlinks; you get to link to your landing page right from the email
visually attractive custom design; emails that look just like some... microsites
all sorts of design details that reinforce your brand: buttons over cryptic links, responsive design, templated footers and headers
web fonts
QR codes
hierarchical display of content, that enhances readability and draws attention to key pieces of content and links in your email
images and attachments
tracking for monitoring opens
And speaking of admin and/or editors, the questions they ask themselves are:
“How can I easily theme the emails to be sent out?”
“How can I change their content templates right from the admin UI?”
And these are the questions that I'll be answering to in this post.
Here are your current options at hand — 3 useful Drupal 8 modules — for easily crafting and sending out HTML emails that appeal and engage.
1. The HTML Mail Module
It does exactly what you'd expect:
It enables you to configure HTML emails from Drupal 8.
It's the Drupal 7 go-to option whenever you want to go from plain text emails to HTML-formatted ones. A module available for Drupal 8 in alpha version.
Furthermore, it integrates superbly with the Echo and the Mail MIME modules.
2. The Swift Mailer Module, The Best Way to Send HTML Emails in Drupal 8
Swift Mailer is the highly recommended method for configuring Drupal 8 to send out visually-arresting, HTML emails.
Since you can't (yet) send them right out of the box with Drupal...
The module stands out as the best option at hand with some heavy-weighing features:
it supports file attachments
it supports inline images, as well
it enables admins to send HTML (MIME) emails
… to send them out via an SMTP server, the PHP-provided mail sending functionality or via a locally installed MTA agent
Note: you even get to use this module in tandem with Commerce to send out your HTML-enabled emails. There's even an initiative underway for replacing Drupal's deprecated core mail system with the Swift Mailer library.
And now, here are the major configuration steps to take to... unleash and explore this module's capabilities:
first, set up the Swift Mailer message (/admin/config/swiftmailer/messages) settings to use HTML
next, configure the Swift Mailer transport settings (/admin/config/swiftmailer/transport) to your transport method of choice
and finally, configure the core mail system settings to use this module for the formatter and the sender plugins
And if you're not yet 100% convinced that the Swift Mailer module is significantly superior to Drupal's default mail system, here are some more arguments:
it enables you to send... mixed emails: both plain text and HTML-enabled
it provides HTML content types
it supports various transport methods: Sendmail, PHP, SMTP (the current mail system supports but one method)
it enables you to integrate key services with Drupal — like Mandrill, SendGrid — right out of the box
it incorporates a pluggable system, allowing you to further extend its functionality
How about now? Are these strong enough arguments that Swit Mailer's the way to send HTML emails in Drupal 8?
3. The PHPMailer Module
Another option for configuring Drupal 8 to send out HTML emails is the PHPMailer module.
How does it perform compared to Swift Mailer?
It's not pluggable
it's not as easily customizable as Swift Mailer
it's already embedded in the SMTP module (in fact, in Drupal 8 the default mail interface class is named “PHPMail” instead of DefaultMailSystem)
What features does it share with Swift Mailer?
it enables you to send out HTML-enabled emails with Drupal
it enables you to add attachments to your emails
it, too, enables you to send out mixed emails
it, too, supports external SMTP servers
Moreover, you can extend its core functionality by integrating it with the Mime Mail component module (currently in alpha 2 version for Drupal 8).
4. The Mime Mail Component Module
Briefly, just a few words about Mime Mail:
as already mentioned, it's a “component module”, that can be used for boosting other modules' functionality
it enables you to send out HTML emails with Drupal: your mail would then incorporate a mime-encoded HTML message body
it enables you to set up custom email templates: just go to your mimemail/theme directory, copy the mimemail-message.tpl.php file and paste it into your default theme's folder; this way, your email will take over your website's design style
any embedded graphics gets Mime-encoded, as well, and added as an attachment to your HTML email
do some of your recipients prefer plain text over richly formatted HTML emails? Mime Mail enables you to switch your email content over to plain text to meet their specific preferences
The END!
Now that you know your options, it's time to step out from the (too) long era of rudimentary, plain emails sent out with Drupal.
... and into the era of richly formatted HTML emails, that will:
enrich your customers' experiences
enhance Drupal 8 site admins' experience
Adriana Cacoveanu / Feb 06'2019