Let's say that you're considering using Drupal for your next web project. You've read about its unmatched robustness and flexibility... And still: real examples of brands that have their websites built on Drupal in North America would weigh heavier in your decision-making process than just... statements about its great features, right?
But which are they?
These websites powered by Drupal that are well known in Canada and the USA?
We've done our research and put together a list of both highly popular and uniquely designed Drupal-based websites.
So, here they are: the 10 best Drupal websites in North America to inspire you in 2020:
1. Ontario Institute for Studies in Education of the University of Toronto
OISE, Canada's most reputed center for graduate studies in education, has its website powered by Drupal.
And built by our own team of Drupal developers...
Why did they trust Drupal 8 with their digital presence?
because it's fast and good page load time was crucial for them
because Drupal's designed to “cope with” high volumes of content
because Drupal enables building websites with responsiveness in mind
because of Drupal's modular structure and flexibility: the OISE editorial team can easily add, update and publish new content, whereas new functionalities can easily be implemented in the future
2. World Vision International
A global organization impacting the lives of millions couldn't have chosen but a robust CMS platform like Drupal to power its website with.
With:
an intuitive UI design
clean and conveniently minimalistic design
a reliable content management system to support a site representing +90 countries
... the World Vision International's Drupal-powered site is built to make an impact.
3. MIT List Visual Arts Center, One of the Top Websites Built on Drupal in North America
How could we have possibly left it out of our Drupal websites list?
MIT's website taps into:
the flexibility of the Drupal entity system to grant visitors a content-rich user experience centered on content diversity: text, audio, lists, images
Drupal's features aimed at providing the editorial team, as well, the best experience
The result?
An intuitive, brand-driven content-rich experience for the users on the MIT website.
One that comes to complete the actual visiting experience at the MIT physical art museum and virtual art lab.
4. University of Arizona
One of the well-known websites using Drupal 8.
And it's no surprise that they've chosen precisely this CMS since Drupal's been the go-to platform in the higher education sector since... forever:
it empowers the staff to easily create, edit and publish content on the run
it enables that editorial team to easily share/reuse content across multiple sections of the website (and a high ed site is usually an intricate "ecosystem" of content sections and smaller sites)
it advocates for a "mobile-first" approach to website development
In the case of the University of Arizona, its old website got migrated to Drupal 8 and its design revamped, all in the name of a better user experience.
5. Think Global Health
Another one of the well-known websites built on Drupal in North America is this multi-contributor site that explores the way health changes impact societies, everyday lives, and economies on a global scale.
With such a heterogeneous content team and a wide variety of content being edited and added regularly on this newspaper website, no wonder that they've turned to Drupal.
6. Canadian Museum for Human Rights
Humanrights.ca has earned its own star on the Drupal websites' "hall of fame" due to a cutting-edge functionality that it incorporates:
Enabling visually impared users to configure their own experience on the site.
From adjusting the contrast to selecting the font size and style, they get the most of Drupal's "empower the end-user" philosophy.
7. Nature Conservancy California
Another one of those Drupal website examples where content variety "rocks supreme".
From video content to video footage, to interviews, to ambient sound, this platform's using Drupal for handling the multiple types of content formats that support its project stories.
8. Princeton University Admission
What makes this high ed website stand out from all the other university websites built on Drupal in North America?
the non-conventional visual storytelling techniques that it leverages in order to highlight what's representatively unique about this school
the impactful content (linear media), ranging from narrative faculty portraits to textural videos of the campus life, photo content providing visitors a more in-depth view into the life at Princeton
Furthermore, they chose Drupal in order to inject" top performance and give their "Undergraduate Admission" website a fully responsive web design.
9. Jack Daniel’s Tennessee Whiskey
JackDaniels.com makes a great example of a website that makes the most of Drupal's powerful content management features:
again, the site comes as a complex ecosystem of different types of content: immersive photography, video content, cinemagraphs...
local markets around the world get to custom-tune the website to suit their own local customers' needs; to personalize it with translated copy, market-specific programming...
A robust content management system along with the "empower the user" philosophy, these are 2 of Drupal's defining features that JackDaniels.com taps into in order to provide:
an engaging experience to its visitors
an empowering experience to its users (admins across the globe)
10. TraffickWatch
The storytelling Drupal website of a nonprofit that raises awareness about human trafficking.
The END!
What other famous websites built on Drupal in North America have we missed? Feel free to... scold us in the comments section down below.
Adriana Cacoveanu / Feb 25'2020
The line between useful and... useless (or pushy or simply annoying) is thinner than you think. That's why creating a mind map that aligns your site's content structure with the user intent is... critical.
"Whether you’re a product owner or designer, you don’t want your website to be a maze with nothing but frustrating blind alleys.” (source: altexsoft.com)
And there's no guessing work or discouragingly complex process in identifying the current user flow on each web page on your website:
Just take a look at the behavior flow report in your Google Analytics. No rocket science here...
Take it from there and:
identify the roadblocks
restructure content on each page so that it matches user intent and is fluid and easy to read
But let us give you a hand with that. With mind mapping your current customer journey and planning its improved version:
In this respect, in today's post we'll:
give you the “anatomy” of a user-friendly website: what elements make a website, well, user-friendly?
define mind mapping with respect to designing the user experience on a website
teach you how to create a mind map: an easy step-by-step guide
show you how to use a mind map to make UX improvements on your website
1. The Anatomy of a User-Friendly Website: 4 Essential Features
“A vague objective leads to poor results.”
There's no point in creating a mind map that would hopefully make your website more user-friendly if... you're not quite sure what key elements make a website user-friendly.
So, here's the list of must-haves for any website aspiring to deliver a great user experience:
1.1. High Speed
It's no news to anyone: the page loading time has a huge impact on the user experience.
Unnecessary interactive elements, that don't match users' needs and don't play any role in the conversion process either, will only get you a clunky and... well... slow website.
1.2. Useful Features
And “intuitive” I must add.
Again, we go back to the “elements justified by the user's needs” principle:
Is that slider useful and relevant for the user behavior on your website? It it too bulky, loaded with endless options that just ... discourage the visitor?
You might want to re-evaluate all the features on your website: are they relevant and intuitive enough?
1.3. A Well-Structured Information Architecture
Information that's:
easy to access
easy to interpret
… is key for a wannabe user-friendly website.
1.4. Content that Matches User Intent
If users are looking for online cooking classes, let's say — and that's precisely what you promise to deliver them — and you're only trying to sell them kitchen gadgets on your website, the only result that you'll get is them bouncing off in seconds.
2. What Is Mind Mapping with Respect to Designing the User Experience?
An overly simplified definition would be:
A way to brainstorm and present the generated information in a visual way.
Now, since I've promised you a definition “with respect to” creating the user experience, here's a more... context-specific definition:
Mind mapping is a vesatile technique where you put together a visual hierarchy of your site's present or future content. It lists out the key pages on your website (homepage, service pages, blog page, etc.), the various relations between different web pages, the links and CTAs on each page...
Source: altexosft.com
In short: mind mapping reveals how data is structured on your website.
Of course, you'll then consider creating a mind map of the target version of your current website. The more user-friendly one...
3. Main Benefits of Using Mind Mapping: From Great Ideas to... Actionable Steps
Finding new ideas is exciting.
But jumping on every new great idea that someone in your team has, without first checking whether it aligns with the user intent, is just like... making shapes out of soap foam.
Not only that they're not future-proofed, but that clutter of ideas might not work together either.
By using one of the best mapping tools available online for structuring those ideas as they... pop out, you turn them into actionable steps in your strategy for improving the UX on your website.
And the clear benefits to mind mapping are:
you define your ideas' roles: what role do they play in your UX strategy (if you can't assign them a role, they're just “Wow” ideas with no solid justification)
you assess their value: how does implementing this new idea bubble up to the user experience?
you identify the various relations between them: you might want to avoid “island-ideas”, with no connections to other ideas listed out in your mind map
4. Creating a Mind Map: 5 Simple Steps
Now that you know what a mind map is and why on earth you'd bother making one, let's see how you can actually put one together:
4.1. Create a Mind-Map Template
Just so you can have a basic idea of the current information architecture on your website.
List out how data's being structured on your website now and how you plan to structure it for its more user-friendly future version...
4.2. Map Out Your Ideal User Flow
How would you like your website visitors to engage with your content? What actions would you like them to perform?
Source: mindmeister.com
Once you've outlined the key pages on your website (homepage, services, features), start planning out the user flow.
4.3. Compare it to the Current Behavior Flow Available on Your Google Analytics
Before you can properly map out the user flow, you need to know what's the standard customer journey on your website now.
For that, just delve into your Google Analytics data and look for the user behavior report. It'll show you all you need to know about:
how users are engaging with your website's content
what paths they usually take when navigating through your current information architecture
4.4. Identify the Roadblocks
The user behavior data might reveal to you some unwanted realities regarding the user experience on your website:
poorly structured content
a bulky and tiresome collection of interactive elements
irrelevant features (embedded videos, interactive elements, social sharing functionalities)
too many tools that don't respond to users' needs
4.5. Make the Appropriate UX Decisions to Influence the User Behavior
Now that you've identified the main roadblocks in delivering the best user experience, it's time to... remove them, one by one:
turn chaos into a logical content hierarchy
trim irrelevant page elements, with zero value in the conversion process
adapt web pages' content structure to the needs of specific audience segments (make sure to include relevant information for those customer personas, redesign your CTAs if needed...)
5. How to Use a Mind Map to Make Powerful UX Improvements
Creating a mind map is but the first step:
Turning it into powerful UX decisions should be your main objective.
So, the answer to the question “Are mind maps effective/useful?” is:
They are if and only if you make them useful and... usable.
You can turn your mind map into:
an effective sitemap
a customer journey map
But let us take a real-life scenario and point out specific UX decisions that you could make with your mind map at hand.
It's an example that I've run into reading Mindmaster team's great blog post: A Simple Way to Design UX, UI and CX Using Mind Maps:
Say you're targeting 3 different customer personas on your website. You then need to plan 3 different user flows.
You start by grouping the web pages on your site into 3 categories, each of them corresponding to one audience segment.
Then, you start doing some user behavior mapping: how do you want each customer persona to navigate to the corresponding web page so that he/she clicks the CTA placed there?
Now, it's time to make some critical UX decisions:
what relations to set up between various pages on your website? You might have a user on a service page and you need him/her to visit your “get a quote” page, as well
what's the best CTA design for each one of your 3 types of pages?
what key information should you include on a page, depending on the customer persona accessing it?
See? Not only that creating a mind map helps you put together an effective information architecture, but it's also a great technique for generating content ideas that match the user intent.
6. Final Word
In the end, it all comes down to goal setting.
Creating a mind map is a great way to:
understand your website goals: what type of conversion actions do you want users to perform?
achieve those website goals by delivering a user-friendly experience: content that's useful, accessible, easy to read and to interpret
The END!
Do you usually create mind maps when building new websites, to ensure they'll deliver the best user experience?
Or for existing ones, to improve their UX?
Do you consider them critical or optional in designing the user experience?
Image by Biljana Jovanovic from Pixabay
Adriana Cacoveanu / Dec 14'2019
For that's the proper question to ask yourself: "What is the best web design platform for my own use case?"
For your own context, which is made of specific:
needs
constraints and limitations
business goals and objectives
particular budget
level of technical know-how
type of website that you need
And this last factor is, by far, the most important criterion to use when you evaluate the most popular web development platforms.
When you try to identify the best one for you...
It's also the criterion that we'll use in today's post to highlight for you the best web design platforms in 2019.
Just scan through the different types of website listed here below, spot your own type, and see which platform makes your best choice.
1. If You're Building a Low-Maintenance, User-Friendly Website...
Say you're not planning to "take over the world" with your new website and you need to be able to keep its maintenance and upkeep to a minimum.
Then you opt for Squarespace...
And here are the top reasons why you would want to choose this particular platform for web design:
you get a conveniently simple interface
it ships with a load of modules to choose from
it provides you with eCommerce functionality
It's true, though, that you don't get that much customization freedom as you'd get with other platforms, but it does the job if it's a:
user-friendly
low-maintenance
... website that you're planning to build.
2. If You're Building a Visually-Appealing Website...
In this case, your 2 best options are WordPress and Drupal.
The first "spoils" you with so many great templates to choose from to create a visually-stunning website. Not to mention the heavy load of WordPress plugins that you can use for custom-tuning your site to fit your aesthetical needs perfectly.
Whereas for Drupal (and particularly Drupal 8), you just can't ignore its built-in responsive design capabilities.
Note: one of the aspects that might discourage you from choosing this CMS to create a great looking website is the lower number of Drupal developers compared to the "deep" pool of WordPress talent. That's why we've focused an entire post on the topic of "hiring Drupal developers" and "stuffed" it with tips on where exactly to find the right Drupal talent for your project.
3. If You're Building an Enterprise-Level, Complex Website...
Drupal "rocks supreme" on this category:
it's equipped to withstand floods of traffic and massive volumes of content
it's designed to handle complex, multi-user content creation and management systems
it's robust enough to power heavy multi-site infrastructures
it ships with tons of modules to extend its functionality even further
In short: Drupal's an "enterprise-ready" platform; it's built precisely for large, high-trafficked websites (think Tesla.com, eBay, NASA, Harvard University's website).
Where do you add that Drupal stands out as the best platform for responsive web design, as well...
4. What Is the Best Web Design Platform to Rank High on Google?
If out-of-the-box SEO optimization features are your top priority, then you'll need to choose between WordPress and Drupal. They both ship with robust plugins, respectively modules, aimed at helping you make your website SEO-friendly.
WordPress
The system's already ideally optimized with regards to SEO:
it's coded so that search engines can easily crawl in
managing heading and title tags is dead-simple
creating and updating content's highly intuitive
Word of caution: WordPress's ease of use and SEO-friendliness does come at a cost: being so popular makes it particularly "tempting" for hackers, too. You don't want to cut down on preventive maintenance costs on your future website.
Drupal
Its SEO modules — Pathauto, Yoast, Global Redirect — are designed to streamline all your SEO efforts, from optimizing your meta tags to... setting up your SEO-optimized URLs.
5. If You're Building a Fully Customizable and Scalable Website...
"What is the best web design platform for me if I want complete freedom of customization and if I'm planning to scale my website over time?"
It's... Drupal, again.
From all the most popular web development platforms out there' Drupal sets itself apart as:
the most flexible one: there's a module for any customization work that you might want to do on your website
the most scalable one: Drupal's designed to scale up, seamlessly, to accommodate huge loads of content and traffic
6. If You're Building an eCommerce Website...
What platform should you power your eCommerce goals with?
Well, it depends greatly on whether it's a powerful "selling machine" that you're planning to build or an online store for your start-up business in eCommerce.
Magento
If you have a huge product inventory (maybe even a multi-source one), Magento's your best option. Here's why:
it's robust: Magento's built to cope with an intricate and heavy infrastructure of multiple stores, currencies, languages...
it's feature-packed
it's scalable: feel free to start with a small online store and to grow it into a complex multi-store network; Magento's designed to accommodate your growth plans, no matter how ambitious
Shopify
If you need a website for your start-up eCommerce business and you don't want to get tangled up in customization, a hosted platform like Shopify is the best option:
it's SEO-friendly
it provides you with unlimited bandwidth
it adjusts to your specific eCommerce business model: POS, dropshop, subscription-based...
it provides affiliates capabilities, purchase buttons, Facebook selling support, etc.
Word of caution: do keep in mind that, if you decide to migrate your online store to another platform, it's just your product information that you can export from Shopify.
In other words: don't expect to be able to transfer your user interface and your website design, as well.
7. If You Need a Beautiful Site but Have no Web Design Experience...
"What is the best web design platform for me if I want to create an eye-catching website but... I'm a non-developer?" you wonder.
"Oh, yes: and I want to build it fast and easy, if possible?" you ask.
It's Wix.
From the best web design platforms in 2019, Wix suits your needs and limitations perfectly:
you get a user-friendly WYSIWYG interface
it "spoils" you with a rich template collection
it's easy to learn and even easier to use
it "tempts" you with both free and low-cost options
In short: Wix is for anyone with close to zero web design experience who wants the freedom to set up, customize and further update his visually-appealing website himself.
8. If You're Building just a Small, Reference-Driven Website...
What if you just need to put together a basic business website to showcase your services? Nothing fancy, just a small website that should provide more detailed information to your potential new clients.
And that should fit your budget...
Then, what you need is the best website builder software that helps you get your site up and running in no time and grants you full control over its code and design.
And there are quite a few great ones:
Site Manager
Weebly
SiteBuilder
Shopify if it's a no-fuss eCommerce website
Wix, again
The END!
Have you found that type of website that you're planning to build listed here?
Photo by Kaleidico on Unsplash
Adriana Cacoveanu / Oct 30'2019
How do you get from a large audience to an... actively engaged large audience? How do you turn that massive volume of traffic that you've striven to attract into... actual sales? It's simple: you incorporate interactive website features into your site.
For it's elements like built-in feedback system, chatbots, or interactive photos that would get that large audience of yours involved on your website.
A fast, visually stunning, and mobile-friendly website won't grant you more leads. Instead, a website that retains and connects with its visitors will...
But let's dive right into these (not so) “mysterious” website design interactive features that will help you boost user engagement on your site:
1. What Is an “Interactive” Website?
But first, let's see what an interactive website is NOT:
It's not a site that simply displays... content.
Instead, an interactive website IS, in fact:
A site that gets visitors to interact with its displayed content. Instead of merely “consuming” it...
A website that drives users to communicate with its interface by filling in popping-up forms, typing in comments, or clicking on the on-screen image of a product...
2. Why Does Your Website Need to Be Interactive?
In other words: why would you care about adding this level, as well, to the user experience delivered on your website?
I mean, your website's already super fast, visually striking, and conveniently responsive. It should be more than enough to... engage visitors, right?
Well, not really. Here are the strongest reasons why you should consider making your website strategically interactive, as well:
it cuts down your bounce rate: users tend to spend more time on a website that interacts with them than on a static one that reduces them to... mere content consumers
it builds long-term relationships: engaged visitors are much more likely to turn into... returning visitors
it boosts your brand awareness: interactive user experience is always a high impact one, that clings to visitors' memories, making your brand... memorable
it boosts user engagement (duh!): strategically placed interactive website features trigger more action than a mere display of content
3. What Are the Best Interactive Website Features to Consider? Top 7
Disclaimer: there's no such thing as “universally best” interactive website elements.
There are, though, the “most suitable” interactive features for your own industry sector and business goals.
For instance: is it financial services that you provide? Then an interest calculator is the “best” interactive feature to incorporate into your company website. Relevance is key here...
Now, let's dig out the interactive website features with the biggest impact on user engagement metrics.
3.1. Simple Interactive Tools
Simple yet... highly effective, these tools range from short games to quizzes, to ad ROI calculators, to budgeting tools, to... math tools.
Needless to add that their selection depends entirely on your business goals.
3.2. User-Generated Content
And this must be one of the most powerful interactive website features that you could integrate into your site.
Image by OpenClipart-Vectors from Pixabay
Empower users to create and upload content on your website:
product/services reviews
pictures of them wearing/using your products
guest posts
comments
It's a highly effective means to connect with your website users.
… to make them feel that they have the power to influence the user experience delivered on your website, to make them spend more time there, and even attract other potential customers with their reviews.
3.3. Wisely Used Interface Animations
Animations should be on anyone's list of interactive features on a website.
Word of caution: mind you use animations sparingly and with the sole purpose of enhancing your website's usability.
If instead you use them to visually “wow” your visitors, you'll only risk making your website look amateurish and untrustworthy.
Not to mention that a site crammed with animations would make your content difficult to read, as well.
Still, when used wisely, scrolls-triggered animations and dynamic hover states on images or links, for instance, will engage users.
3.4. Social Media Apps
Image by ijmaki from Pixabay
The handiest way to “inject” interactivity into your website: social media apps.
And this “too” common functionality of enabling users to share your content and to follow your brand on social media is, still, one of the most effective ways to boost user engagement.
So, mind you don't underestimate the power of these buttons...
3.5. Live Chats or Chatbots
Assisting users throughout their visit on your website, being ready to anticipate and to promptly answer their questions... There's hardly a better way of connecting with and retaining website visitors.
Take live chats and chatbots as a too powerful mix of stellar customer service and “excuse” for users to stay on your website for a longer period of time.
3.6. An Interactive Feedback System
A built-in online survey tool or a contact form are other great ways of injecting a high level of interactivity into your website.
Take, for instance, the contact form: you get to reach 2 major goals with one shot.
you enrich your database of leads
you convey a “We Care” message to your online customers
3.7. Interactive Images and Videos
Let's try a little empathy exercise: get into the shoes of your eCommerce website user!
Now, answer this question:
“How convinced are you that you're making the right choice when you buy a product displayed in an on-site picture?”
Don't you struggle with the doubt that you might not make the best decision?
An interactive photo or video revealing certain features of that product in detail or showing it in action, in the real world, would have a dramatic impact on your customer journey, don't you think?
The END!
These are the 7 high impact interactive website features to put on your shortlist when you plan to make your site more engaging.
Which of these elements are you already making the most of on your website?
Main image by Caroline Attwood on Unsplash
Silviu Serdaru / Oct 04'2019
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? Is it flexibility and freedom of customization more important for you than simplicity and an intuitive interface?
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