They used to be THE norm and to dictate web designers' decisions. No one questioned their usability or long-term efficiency. Or that they would soon grow into some outdated web design trends. Deprecated conventions that, when not mocked, are now regarded as mere haunting “ghost of the past”.
A “past” where glossy buttons, flashy design, and overly embellished page dividers used to steal the spotlight.
Now, let us go against today's trend of talking about “the biggest web trends in 2019” and, instead, dig out some old UI cliches. Just to determine the cause of death so that you:
don't risk falling into yesterday's pitfalls in terms of web design once again
leverage the lessons of the past to contribute to a better future of the web
1. The Flash Menu
Remember those “glory days” of the... flashy web?
There was sound pretty much everywhere on a web page, animated buttons, interactive elements. And there were fancy flash menus, of course.
All web designers used to take “flashy” and “animated” for... “user engaging”.
The causes of death:
applying any changes to a flash menu was discouragingly challenging (you couldn't get away with just editing a text file)
it had a negative impact on the website's SEO; crawling those flash files was “mission impossible” for the search engines
it wasn't mobile-friendly
it had poor loading times
it had to be installed into the browser
plugins had to be updated constantly... frequently
2. The Frame, the Elder “Cousin” of Today's iFrame
Now, let's turn back the hands of time and “freeze” it right at those days before tables stepped into the spotlight. What did we use for basic layouts back then?
We used frames...
Which are now no more than another one of the outdated web design trends that, well, it's not worth resuscitating. Back then, we didn't have JavaScript to overtake the burden of loading data, so web browsers had to do all the heavy work.
The causes of death:
they would compromise the browser history and break the back and forward buttons
copying and pasting links to web pages on the same website was a dread
they would enable the web browser to partly update a page instead of loading a brand new one
reloading a website would, more often than not, mean no more than guiding the user back to the exact front page
3. The Table Layout, One of Those Outdated Web Designs Trends to... Bury
OK, maybe there's no need to “mourn” over this dead UI convention, but we can't just overlook its massive contribution to... the evolution of web design.
Image source: Genealogy Web Creations
Back then, when the table-based layout trend emerged and stole the spotlight, it opened a whole world of possibilities:
It empowered us to structure our web content by breaking it into multiple columns and rows.
Surprisingly enough, that mix of GIF files and inline styles did manage to glue those layouts together.
The causes of death:
it wasn't responsive
<div> tags and classes came to... seal its faith
CSS, “tempting” us with floats, stepped on the stage of web design
4. The Border Ornament and Decorative Page Divider
The overly embellished page separators are another “once a norm, now just one of the outdated web designed trends”.
Image source: Image by Karen Arnold from Pixabay
In its “glory days,” it was our only option to split chunks of text on our web pages. And since the <hr> elements looked a bit too... dull, we went to the other extreme and started using these overly embroidered GIF separators to section our web pages.
Separators which, at first, were no more than some horizontal bars. Until web designers fell prey to the urge of gilding the lily.
The causes of death:
the heavily ornamented borders ended up diverting users' attention away from the essential: the text itself
CSS/CSS3 eventually stole our attention, as web designers
divs and classes made the segmentation of a web page much more... fluid, with no impact on the overall user experience
5. The Blinking Marquee
There was a time, way before image sliders gained their bad reputation when we would have text just... slide across web pages, from right to left.
What made this “sliding” possible? HTML's marquee tag, the equivalent of Internet Explorer's <blink> tag...
The causes of death:
it distracted website visitors from the core message
it affected SEO, since it only displayed partial information to search engines
it was an unnecessary artifice in most cases, for it carried minor information and it was the main “culprit” for a high cognitive load
6. The Image Button
Another one of those outdated web design trends dating back to early 2000, when “flashy”, “cluttered” and (most of all) “fancy” were the best adjectives to describe web designers' work.
And the glossy, 3D-looking image-based buttons created in Photoshop were fancy, alright! Where do you add that they paired with custom-made, animated cursors, as well.
The causes of death:
with text “carved” into the image, buttons were too difficult to manage, too difficult to apply changes to
they weren't responsive (they would get “partially responsive” and that only after a lot of hard work)
CSS3 came to... bury it for good
The END!
These are the 6 most representative UI conventions for the early 2000s that have gradually turned into some outdated web design trends.
Or, better said, into “learning materials” on the old/wrong ways of designing for the web and how they influenced today's UI design best practices.
Image by Mudassar Iqbal from Pixabay
Silviu Serdaru / Jun 03'2019
Let's take this scenario: you need to create a landing page for your Magento 2 website. You have no coding experience, you need it built fast and preferably as easily as... dragging and dropping some builder elements. “What's the best Magento 2 page builder extension?” you then ask yourself...
Now, let me try and guess the other key features on your “must-have” list for this page builder:
to provide a drag and drop interface (definitely!)
to be optimized for speed
to come packed with powerful customization options
to support responsive design and mobile-ready layout
to make it easy for you to change the layout elements and build new blocks
to be integrated with Magento WYSIWYG
to provide a rich collection of widgets for you to “joggle with”
to be compatible with other Magento themes and extensions
Have I guessed most of your “wishes”?
Now, here are 5 Magento 2 page builders that meet your expectations of performance and ease of use:
But First: What About the Built-In Page Builder in Magento 2.3?
First of all, you should know that you'll get this page builder out of the box with the Magento 2.3 Enterprise Edition edition only. The Community edition doesn't provide it.
So, if your eCommerce website's running on the EE edition, the default Magento 2 page builder gets automatically installed.
It provides you with powerful content creation tools and visual drag and drop page builder to create and to easily edit your pages.
1. Landing Pages for Magento 2, from Amasty
A flexible module for creating landing pages in Magento 2.
Expect to get “spoiled” with lots of powerful functionalities aimed at boosting conversation:
it allows you to create custom sub-selections of your products/services, for each page
… custom meta tags
… Google friendly URLs
it enables you to put together unique and engaging content for your landing pages
Key features:
it allows you to display your custom CMS blocks at the top/in the bottom of your landing page
it allows you to create page-specific lists of products by leveraging the flexible conditions that it provides
it allows you to list your landing pages to your sitemap
it allows you to create a wide range of landing pages
2. Bluefoot CMS & Page Builder for Magento 2
In your “quest” for the best Magento 2 page builder extension, you'll definitely want to consider Bluefoot, as well.
It's a content management system and page builder that empowers you to create custom, feature-rich webstore pages, with zero technical knowledge (either PHP or Magento template system related...).
Using it is unexpectedly easy:
its interface resembles the already familiar admin panel in Magento 2
just use Bigfoot once you have the WYSIWYG in Magento popping up
Key features:
drag & drop page builder
easy third-party content integration: from Google Maps to Youtube, building feature-rich web pages, posts and categories becomes surprisingly easy
a whole collection of styling options
Magento WYSIWYG integration
static block integration
open-source code
In short, with Bluefoot CMS and Page Builder, creating custom web pages turns into a matter of... minutes.
3. Magento 2 Page Builder, from Landofcoder
The best Magento 2 page builder extension if you fancy the idea of creating and configuring your (complex, feature-rich) pages right at the front-end. No admin panel needed...
Easy to use, convenient and highly intuitive.
Key features:
create an unlimited number of page layouts
easily change your layouts
a collection of +50 popular Magento widgets
a built-in element builder to create your own content elements and mix and match them to your liking
visual drag & drop admin interface
CSS skin builder, that grants you full control over your web pages' looks
block builder: create your blocks, then assign them to specific positions on your pages
top performance; it's built with page load time in mind
4. CleverBuilder
Simple, intuitive, flexible and fast. What more expectations could you have from the best Magento 2 page builder extension, right?
Key features:
intuitive interface: just swipe through and select out of hundreds of content elements and templates
an all-baked-into-one solution: manage your whole web design workflow from one place
live front-end editor & inline editor: apply changes to your webstore pages (and test the end-results) in real-time
top performance
100% visual design: simplicity & flexibility at its best
5. Front-End CMS Page Builder, from Magesolution
From homepages to content pages, to ads pages, to landing pages, this page builder allows you to create your CMS pages right at the front-end, by just dragging and dropping content elements.
Key features:
+30 builder elements
enhanced speed for your newly created web pages
highly intuitive drag & drop interface that display the updates you're making in real-time
responsive design options
compatible with other extensions and themes
6. Page Builder for Magento 2, from Magezon
Another candidate for the title of “the best Magento 2 page builder extension”. And no wonder why: Magezon's page builder empowers you to create custom page layouts in no time. With zero coding experience required...
From adding descriptions to your products to putting together your website's structure, you're free to configure everything about your layout.
Key features:
+50 content elements
drag & drop page builder
fast performance with cache
ready-made templates
Magento WYSIWYG editor
a wide range of plugin integrations
a wide collection of customizable options
The END!
Needless to add that it's not the best Magento 2 page builder extension that you should be looking for, but the most “suitable” one for your own needs. So, what features do you value most?
Would you trade ease of use for... lightning-fast performance? Are flexibility and freedom of customization more important for you than simplicity and an intuitive interface?
Contact our team of Magento 2 experts in Toronto or leverage our Magento web design services in Vancouver to drive outstanding development outcomes.
Image by 200 Degrees from Pixabay
Silviu Serdaru / May 10'2019
Disliked by users, controversial, yet a constant presence on WordPress websites and a holy grail of high conversion rates if leveraged in the right context... But how do you know which of the best popup plugins for Wordpress is the perfect match for your own use case?
Well, you first identify your expectations in pop-ups. What exactly are you looking for in a popup plugin?
out-of-the-box responsiveness?
a handful of highly customizable templates and design features to choose from?
smooth integration with the software that you're currently using on your WordPress website?
a dead easy to use, drag-and-drop popup builder?
page selection and trigger option features?
that it should be conveniently lightweight and fast?
real-time analytics?
advanced targeting options?
A/B testing functionality?
Once you've articulated your needs, start digging into this shortlist of 5 best rated Wordpress popup plugins in 2019:
1. Ninja Popups
If you're looking for one of the best popup plugins for WordPress that should:
provide you with a solid, yet conveniently lightweight drag-and-drop-builder
… one that enables you to easily set up and fine-tune your popups in the slightest detail (even if you have zero coding experience)
ship with tons of features to choose from
allow you to either create your custom popup from scratch or to choose out of a large collection of built-in popup themes
… then Ninja Popups is the plugin that meets all your specific requirements.
It's powerful, loaded with advanced features and flexible enough to empower you to customize your popup till it perfectly fits your needs. You even get to select the color and size of your popup.
Other key features:
A/B testing
responsive
highly flexible
enhanced customization
a data-rich analytics page
+74 animation options
+73 pre-built themes
an easy to use visual builder
Note: if lots of customization power is too overwhelming for you, you can always opt for its more lightweight builder and simply place your text inside one of its pre-made templates...
2. Elementor Pro
Elemenentor Pro makes another great option if the popup that you want to create is more complex than... an email opt-in, for example.
Just like the Ninja Popups plugin, this one, too, allows you to build both:
popups from scratch, from a... blank slate, that you're free to custom-tune to your exact needs
popups on top of one of its already pre-made templates (and it ships with +100 of popup templates...)
Full control over your popup and unmatched flexibility, thanks to all its robust features, from which its trigger/targeting options help it stand out.
For example, you get to configure it so that it triggers your popup:
after a defined number of sessions
after a defined number of page views
based on scrolling, exit intent, clicks, inactivity, page loading
Furthermore, you to target specific content on your WordPress website where your popup should get triggered:
specific blog posts
specific post formats and types
certain authors, tags, categories
specific devices
user logged-in status
Also, the types of popups that you get to build with Elementor Pro range from:
modal forms
to full-screen overlays
to top/bottom notification bars
to slide-ins
And the list of options doesn't end here. It's not for no reason that this is one of the best popup plugins for WordPress. It provides you with an extensive range of styling options and widgets to include in your popup:
registration forms
buttons
contact forms
countdown timers
Notes:
it integrates seamlessly with WooCommerce
you can configure it so that it triggers your popup for non-logged-in users only
its most notable limitation is analytics: it doesn't provide you with A/B testing functionality and built-in analytics tools
3. OptinMonster, One of the Best Popup Plugins for WordPress
“Flexibility at its best” must be the most accurate definition for this popup builder:
it provides you with an extensive range of targeting and triggering rules
… an easy-to-use, drag-and-drop editor
… loads of functionality to scan through and to choose from
Like the other WordPress popup plugins on this list, it enables you to either build your popup from the ground up or to tap into one of the pre-built templates...
Powerful trigger features
exit-intent triggers; and this functionality is its "specialty": it tracks and analyzes your website visitors' browsing behaviors to determine when they're most likely to leave a specific page so that it triggers the popup
user inactivity
time
click (two-step opt-ins)
Advanced targetting features
you can adapt your offers based on whether the targeted user has already converted on one/some of your popups or not; no need to "bug" one of your website visitors with an email opt-in if he/she has already signed in to your list...
you can target your popups by cookie, adblock usage, referrer, page, new vs returning visitors, device
Moreover, its easy to use builder, loaded with tones of advanced features, allows you to create other campaigns, as well, not just popups:
footer bars
in-line forms
floating headers
scroll triggered boxes
welcome gates
slide-in forms
Other "tempting" features:
A/B testing
widgets that you can select from to put together your popup
you even get to configure your popups to be triggered at specific times
it "plays well" with your email marketing software
4. Bloom
It's with the visually-appealing interface that Bloom manages to set itself apart from the other 4 best popup plugins for WordPress here.
But also with the lack of some key features:
it doesn't ship with a popup builder, so you can't use it to create popups from scratch
it's designed precisely for email opt-ins
it doesn't provide an exit-intent trigger option
it offers fewer targetting features compared to the other WordPress plugins listed here
Nevertheless, you can still choose from over 100 pre-built templates and customize the:
text
borders and edges
colors
form details
animations
images
Also, since I've mentioned that email opt-ins are its specialty, here are the 6 ways that you can display them when using Bloom:
as inline opt-in forms
as widger area forms
as automatic popups
as required opt-in for content unlock (you can restrict access to premium content on your website, thus encouraging users to opt-in first...)
as automatic fly-ins
as below content forms
Its most “luring” features:
a great-looking dashboard
it allows you to set up view analytics
A/B testing
some unique trigger options (that I'll talk about in a bit)
Trigger features:
scroll depth
inactivity
time
after purchasing triggers: you can display a popup as soon as the user has completed the checkout process
after commenting triggers: you can display a popup after one of your website visitors has submitted a comment
Content targeting features:
by specific posts
by post types
by post categories
5. ConvertPlus
Another great choice if you're more into tweaking pre-built templates rather than building popups from scratch.
And we're talking about +100 templates to “delve” into. Once you've selected the perfect one for your popup, feel free to leverage the real-time customizer to tweak its:
colors
animations
form field/labels
text
Not really fond of the idea of merely customizing a pre-made template? Then you can always upgrade to Convert Pro and get your drag-and-drop builder...
Now, here are some of the types of popup forms that you can create using ConvertPlus:
email opt-ins
sidebar widgets
notification bars
full-screen popups
slide-ins
top/bottom bar information
sticky boxes
Key trigger options:
exit-intent
user inactivity
time
scroll depth
launch after content (triggering the popup only after the user has reached the end of the content in question)
click (for two-step popups)
Finally, ConvertPlus includes detailed targeting/trigger options, as well as built-in A/B testing and analytics to help you optimize your popups.
Main targeting options:
logged-in users
referrer detection (you can build popups specifically for visitors coming from a partnering website)
device
page level targeting
new vs returning visitors
Other robust features:
+700 fonts to select from
custom CSS, background settings, animations
real-time analytics
it integrates seamlessly with Zapier, WooCommerce, Contact Form 7, WP Registration Form
The END!
These are the 5 best popup plugins for WordPress in 2019. Those that:
ship with tons of powerful trigger/targeting options
grant you full control over the look and feel of your popup
Image by OpenClipart-Vectors from Pixabay
Adriana Cacoveanu / May 01'2019
Do you need to set up a custom image carousel? Or maybe one slider with a teaser, displaying content from your website? What are the best Drupal 8 slideshow modules to consider for implementing and maintaining your slideshow?
And out of the box options are... out of question, right? Your requirements are too specific for that.
Maybe you need:
a certain number of slider items
different arrow designs
to display the image slideshow on other pages, too, not just on your homepage
With such flexibility and customization requirements in mind, we started digging into the “pile” of Drupal 8 image slider modules.
And here are the 4 ones that we've selected, those with the best reviews in the Drupal community:
1. Views Slideshow
If it's a fully customized slideshow that you want to implement, Views Slideshow's the module you need.
It'll “spoil” you with tons of add-ons to select from and give your unmatched flexibility. From:
titles
to images
to teasers of the last X blog posts on your website
… you get to include any type of items in your carousel.
Furthermore, it's jQuery-powered and it allows you to configure different settings for each one of the views that you'll create.
Note: oh, yes, you'll need to be pretty comfortable using Views in order to leverage this module at its full capacity.
Some of its key features:
your slider can include and display the latest products added to your eCommerce website
you can set up a news item slideshow (the latest X news articles published on your Drupal 8 website)
from the latest X blog entries to the latest videos, testimonials, forum posts etc., you're free to include any type of content in your slider...
Now, here's a very brief step-by-step on how you can set it up and use it to create your slideshow:
1.1. Install and enable the module
Once you've downloaded it from Drupal.org, installed and enabled it, make sure to download its corresponding ZIP folder on Github, as well.
Give your folder a new name — /jquery.cycle/ — then start uploading all its files to the
/libraries/ folder in the root of your Drupal website.
1.2. Set up your view
Time to create your slideshow now. For this, just go to Structure> Views>Add new view
1.3. Publish your slideshow block
For this, go to Structure>Block layout and select the region on your website that you want your slider to get displayed on.
1.4. Create a new image style
As you can see, the images included in your slideshow are currently of different sizes. Therefore, they're not perfectly adjusted to fit the block region that you've chosen for your slider.
To solve this inconvenience, just go to Configuration>Image styles>Add Image style.
There, you can create a new style, that will be shared by all the images included in your slideshow.
2. Slick Slider, One of the Most Popular Drupal 8 Slideshow Modules
Another one of Drupal's modules for creating custom image slideshows, that ships with a heavy load of options. Powerful and flexible... what more could you ask for from your slider solution?
Capitalizing on Ken Wheeler's Slick carousel, working perfectly with Views and fields, the Slick Slider module:
enables you to set up a slider including multiple views, value fields and paragraph types
comes with image, audio and video support
supports complex layouts, as well
Some of its key features:
you're free to enable/disable the swipe functionality
it's responsive (scales along with its container)
some of its layouts are CSS-built
it's designed to work with Field collection, Media, Views, Image (and also to work perfectly fine with none of these modules)|
it allows you to configure your own “slide selecting” dots, the arrow keys and your slider's navigation, as well
it provides modular and extensible skins
you get to choose how you want your slideshow to be scrolled: swipe, desktop mouse dragging, auto scroll, mouse wheel scroll...
3. Owl Carousel
Another one of those Drupal 8 slideshow modules that gets the best reviews.
Here's why:
it leverages the Owl Carousel slider built by OwlFonk.
it, too, empowers you to customize your image slideshow; in this respect, it ships with a myriad of customization settings
it's responsive
it capitalizes on a small ecosystem of submodules: Administration UI, Views Style, Field Formatter
Some of its key features:
from customizing your events to styling your controls, it allows you to tailor your image slider to suit all your needs
it supports multiple sliders
touch events
4. jCarousel
A simple module to consider each time you need to display a group of images in a compact way on your website. It even allows you to set the number of items to be included in your carousel...
Speaking of which, you should know that jCarousel, as its name says it, allows you to leverage the jCarousel jQuery plugin.
For this, it ships with a developer API for other modules to access. Furthermore, it integrates with Views, so you can easily turn any list of images (or other type of content) into a slideshow...
Some of its key features:
jCarousel field formater
out-of-the-box Views support
API for using jCarousel without Views
a collection of modern skins to choose from
Carousel pager that enable users to jump between multiple sliders
The END!
These are the first Drupal 8 slideshow modules to consider when looking for the best method for setting up your custom image/content slider.
Packed with tons of customization options, feature-rich and powerful, these 4 solutions for creating image carousels in Drupal 8 should be on your short list when you start looking beyond the out-of-the-box options for putting together a slider...
Photo by Samuel Zeller on Unsplash
Silviu Serdaru / Apr 25'2019
Simple or custom-made? Is it a quick-to-assemble, rather “prototypical” form that you need for your website? Or a more complex, custom-made one? In a Drupal 8 Contact Forms vs Webform “debate”, which Drupal form builder best suits your data collection requirements?
On one hand, you have the convenience of creating your web forms in no time: simple, straightforward, “conventional” web forms. On the other hand, you get to scan through a never-ending list of advanced options and come up with a complex, fully custom-made web form.
That, of course, if you don't mind the time you need to invest in going through all those different form elements and available features and the risk of getting... overwhelmed by tons of field customization options.
Ease of use vs unlimited capabilities...
The convenience of getting your forms up and ready to collect user data in no time vs the chance to tailor some more advanced forms, ideally customized, carrying lots of different field values.
Decisions, decision...
Now, to help you decide, here's a more detailed Drupal 8 Contact Forms vs Webform comparison. Weigh each one of the 2 form modules' benefits and drawbacks, set them against your own needs and... make the choice:
1. The Contact Forms Module
Being part of Drupal core, there's no need to download and install the module.
Just go to Structure>Contact forms. Next, choose either to opt for the default form or to set up a new one: click the “Add contact form” button.
Once in the form creation screen, enter your form's values in the predefined fields that you have there:
give the form a name in the “Label” field
enter the email address where all the form submissions will be sent to (most probably your site admin address) in the “Recipients” field
enter your “Thank you” text in the “Message” field there; this will be the “thank you” text line your users will see once they hit the “submit/send” button
in the “Redirect path”, enter the URL to the page that you want them to get forwarded to after they've submitted the forms (that if you don't want them to be redirected back to the homepage, by default)
click “Save” and there you have it: a simple form, with all the basic, must-have field values, added to in no time
Of course, that doesn't mean that you can't further explore the given features and maybe add a few more fields and even styling options.
For instance, you could “Edit” your newly created form. Just select it in the “Contact Forms” screen and, scrolling down the options in the drop-down menu opening up, click the “Manage fields” option.
Click “Add field”, then “select a field type” – Text(plain), let's say – enter the “Label” and configure its settings.
Furthermore, if you want to style your form a bit, hit the “Manage form display” tab and... opt for a placeholder, for example. Next, explore the options available in the “Manage display” screen. For instance, you get to decide if you want your field label to be hidden, inline or visually hidden...
In short: in a Drupal 8 Contact Forms vs Webform comparison, the first form builder will always outshine the latter when it comes to ease of use.
It empowers you to set up a simple form quick and easy...
2. The Webform Module
Now, if Contact Forms is a rather minimalist form builder, the Webform module is a feature-rich, powerful one.
The customization features that it ships with go from email notifications to fine-grained access, from statistic collection of data to delivering results in a CSV format. From exporting data in various formats to... conditional sorting and filtering.
In other words, with Webform sky is the limit when it comes to the contact form that you can create.
It can go from a basic one to a highly complex, multi-page form. One made of lots of elements, advanced options for the user to select from, settings and features for you to leverage in the back-end...
But, let's keep in mind that it's a contributed module, so you'll first need to download it from Drupal.org.
Next, go to “Structure” and hit the “Webforms” tab. Then, click the “Add webform” button and, in the next screen popping up, give your new form a name (enter it in the “Title” field).
You'll be automatically forwarded to the “Build” tab, which is where all the “magic happens”. Once you click the “Add element” button, you'll get to “swim through” a sea of lots and lots... and lots of form elements (known as “fields” in Contact forms) to choose from. Ranging from basic to really advanced ones...
Let's assume that you'll want to add a “Text field” element. Click the “Add Element” button corresponding it, then scan through all the new customization options listed up in the “Add Text field element” screen opening up next...
Feel free to add other elements to your webform: a “text area” maybe, an “email” element, as well...
Note: do keep in mind that, once you've settled for the final fields/elements to be included in your web form, you can always change the order to get them displayed in. Just drag and drop them till they fit that predefined order in your mind...
Also, you can check/mark them as “Required” and turn them into “must fill in" fields, as opposed to optional form fields.
Note: feel free to edit that “Thank you” page that your webform will automatically forward users to. How? By clicking “Back to form”>"Settings”>"Confirmation” and selecting from the different options that you have there:
enter your own Confirmation title (e.g. “Thank you!”)
customize your Confirmation message
3. Drupal 8 Contact Forms vs Webform: Key Differences
Now that we've run our spotlight over each one of these 2 form building tools, let's make an inventory of the differences that we've identified:
first of all, it's obvious that the Webform module gives you more control over your web forms' design
also, unlike Contact Forms, it supports conditional emails; you get to send an email to a specific user in your list based on conditions associated with the value of certain elements in your form
Webform enables you to add basic logic to your web forms
… it comes packed with tons of advanced options, ranging from JS effects to conditional logic, to submission handling, etc.
Contact Forms, on the other hand, allows you to set up a simple contact form in the blink of an eye; you skip the tedious process of scanning through lots and lots of options, settings, and complex features
Webform allows you to create your forms either in a YAML file or in its the admin-friendly UI
also, Webform comes as a “cluster” of submodules – Webform REST, Honeypot, Webform Views, SMTP, Webform Encrypt, etc. – which are “responsible for” its multiple capabilities
4. In Conclusion...
The conclusion of this Drupal 8 Contact Forms vs Webform “debate” is quite simple:
If you need a basic form on your website and you need it built fast, go with Contact Forms. Being included in Drupal 8 adds convenience...
But if you want to customize your form (and you have the time), to style it to your liking and “turbocharge” it with advanced features and options, go with Webform.
It's a much more powerful and feature-rich form builder, perfectly suited for your complex requirements...
Image by Tumisu from Pixabay
Adrian Ababei / Apr 24'2019
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
Simple, yet visible enough, actively persuasive, yet not invasive, powerful, yet intuitive. How do you make your mobile call to action buttons intuitively... usable? What are those techniques which, once applied, enhance their intuitiveness?
And thus boost their effectiveness, as well...
How do you know whether your current mobile CTAs aren't optimally designed for mobile devices and adapted to mobile users' specific UX needs?
users spend too much time on the action screen; it's not obvious enough for them which are the highest priority actions to take, there are too many options crammed in there, too much text, etc.
your click-through rate could be... better, to say the least
Now, here are 10 straightforward, yet highly effective tips to make your mobile call to action buttons more effective:
1. Bold Your Text Labels Differently to Indicate Priority Level
A simple, yet powerful technique, that's often underrated: varying the boldness of mobile CTAs based on priority. This way, you'd put different emphasis on the various actions referred to.
For instance, is the action of “checking out” more important than that of “viewing the cart”? Indicate this hierarchy of priorities using varied intensity when you bold your text labels: go from the least bold to... the boldest.
2. Go for Button Shapes Instead of... Text-Only “Buttons”
Stick to the safe beaten road of UX when designing your mobile call to action buttons: don't trade straightforwardly shaped buttons for text-only ones.
You'd only end up confusing your users: “Is that a button or a piece of information?” And you'd risk having them miss/skip your most important CTA because... they won't notice it or just take it for... copy.
In other words: place your text labels into “familiar” button shapes.
3. Consider Those Screen Areas of "High Thumb Activity"
Always take heed of “the thumb zone”! It's made of all those key spots on a phone's screen that are the easiest for users' thumbs to reach and to... click on.
Once identified, strategically place your mobile CTAs there...
4. Consider Users' Natural Scanning Pattern when Placing Your CTAs
Do you want your mobile call to action buttons to be (just) visible or effective?
In this respect, placing the highest priority CTA first, will make it visible, but not necessarily effective, as well. Why? Because users are then forced to scan the screen bottom-up. And this is not their natural flow: first the “Checkout” button, then the “View Cart”, then the “Continue Shopping” buttons...
Any deviation from this familiar flow will affect the “intuitiveness” of your CTAs.
5. Stick to the Best Practices for Mobile Call to Action Placement
Left or right? Top or bottom? Where is it most effective to place your mobile CTAs on the screen?
You'll get the best answer to your question only once you've studied your target audience:
what triggers them to... action?
what catches their attention first on a screen?
Run some tests to identify those best practices on call to action placement that are most effective for your own scenario.
6. Keep It Straightforward: One CTA Per Page
Challenging users with too many options is another “self-sabotaging” technique. So, make sure you don't fall into the trap of overcrowding your screens with multiple CTAs.
Instead, make the most of that limited real estate on a mobile device's screen and place just one CTA per given space.
Otherwise, you only risk discouraging users with a too complicated decision-making process...
7. Use Color Wisely to Signal Progressive Actions & Priority Levels
Let's take 3 of the most common actions that mobile users are presented with: “Continue shopping”, “View cart” and “Checkout”.
Now, how would you indicate a given user the lowest, the medium and highest priority action to take? How would you signal progressive actions (as opposed to regressive actions, like “view cart”)?
You use the same color, but with different levels of saturation and brightness.
Note: using equally saturated color on all your mobile call to action buttons wouldn't make the hierarchy of priorities very intuitive, while using different colors would only place the same emphasis on all those progressive actions.
Tip: to indicate the highest priority, you could also opt for light text label set against a dark background; as opposed to the dark text on a lighter background, that you'd use for lower priority CTAs.
8. Use White Space to Make Your Mobile CTAs Stand Out
And this best practice goes hand in hand with the “one CTA per given space” technique: let the white space work for you/your call to action button.
Make sure to wrap it in enough white space to help it... stand out and catch users' attention.
You'd then:
make the most of the limited real estate that you're constrained to work with
avoid unwanted scenarios where, due to screens crammed with text and CTAs, users accidentally click the “wrong” links
9. Keep Your Copy Concise, Yet Persuasive
Your mobile call to action buttons should feature text that's:
short, yet descriptive enough
concise, yet actively persuasive
action-oriented
10. Use an Icon to Indicate the Highest Priority Action
What about color blind users? How can you make your mobile call to action buttons visible and intuitively easy to use for them, as well?
For using color wisely and varying the boldness of your text labels to indicate different priority levels sure isn't helpful for them.
Well, you go with an... icon. Just place it inside your checkout button and you'll make it stand out even more. It will be that visual element that they'll spot and cling to once they lend on a screen.
The END!
These are our 10 easy to implement techniques that will help you boost the “intuitiveness” of your mobile call to action buttons.
Would you have added other ones, as well?
Image by LeoNeoBoy from Pixabay.
Silviu Serdaru / Apr 05'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
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