LATEST FROM OUR BLOG

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

Drupal Layout Builder vs Paragraphs: Which Drupal Page Builder Should You Use?
There’s no better way of telling which tool best fits your needs than by putting Drupal 8 Layout Builder and Paragraphs to the test, right? If you were searching for an honest comparison of the 2 Drupal 8 drag and drop page builders, you’re on the right blog. Because in this post I’ll compare Drupal Layout Builder vs Paragraphs. What you’ll get is a straight answer to each one of your key questions regarding the 2 most popular page building tools in Drupal:   Why would you choose Drupal Paragraphs? What are its main trade-offs? What are its best use cases? What are the key advantages of using Drupal 8 Layout Builder?  What are its limitations? What are the use cases of Layout Builder vs Paragraphs?   Now, let’s get you those answers:   1. Drupal Layout Builder vs Paragraphs: Introducing the 2 Contestants 1.1. Drupal Paragraphs The Paragraphs module was quite a revelation when it was first released. Why? Because Drupal rocked supreme at enabling users to create template-based pages, but when it came to uniquely designed pages (i.e. landing pages) it started to show its limitations. And this is where the Paragraphs module came in. It “seduced” Drupal developers with a new component-based approach to building a page’s layout. Source: Championsdigital.com   The Paragraphs layout builder would allow developers to create individual paragraph types — popup elements, plain text, code blocks — and editors to assemble those paragraphs into highly flexible pages. Moreover, they could reuse those page components to create new and new content layouts.  For instance, they could put together a page that included one WYSIWYG Paragraph, a Slideshow Paragraph, and one paragraph with both text field and image field... The idea of “flexible structured content” had taken over the Drupal planet...   1.2. Drupal 8 Layout Builder The drag and drop page builder in Drupal core designed to take the content editing experience to a new level. How? By granting editors more control over the Drupal layouts they create. Drupal 8 Layout Builder enables non-technical users to easily mix and match nodes, fields, and other types of content via a drag-and-drop UI. They can create their visual layouts and landing pages in no time. All they need to do is drag and drop, then rearrange site-wide blocks and content fields to their liking. Source: Drupal.org Moreover, users can even create new custom “inline” blocks of their own. Power and flexibility combined into one visual design tool aimed at improving the editor experience.   2. What Are Their Key Strengths? 2.1. Drupal Paragraphs In a Drupal Layout Builder vs Paragraphs “battle”, why would you go with the “stacked components” approach to layout building in Drupal 8? Source: Drupal.org   Because the content editing experience is intuitive: editors can use the “Add a popup” and “Add a quote” tabs and rearrange their components with drag and drop   Because it enables you to group multiple fields into new complex elements   Because it allows you to come up with an unlimited no. of ways for combining your paragraphs   Because it enables you to create reusable components that you can then use per node    Because it prevents the workflow of your nodes from becoming too cluttered by providing an entity type for your sub-page components   Source: Drupal.org   2.2. Drupal 8 Layout Builder What are its key selling points? Why would you choose Layout Builder over Paragraphs?    Because it requires less custom code   Because it grants you a higher level of control over the layouts you’re creating   Because it grants you lower maintenance costs   Because you get to mix field content with blocks   Because you’re free to create and populate new landing pages from the ground up: just set up your custom content blocks and arrange them to your liking within the layout   Because it provides you with an improved authoring experience   Because you can extend the default set of layout grids through custom plug-ins   Because it allows you to keep your structured data   Because it enables you to get the most of the block system for creating your Drupal layouts: custom inline blocks, programmatic blocks, custom global blocks, custom field blocks   “Blocks” that are fieldable, translatable, templatable, reusable, and part of Drupal core, as well. Source: Phase2Technology.com   In a nutshell, this Drupal page builder provides both:   an easy way to manage fielded content in the backend the best drag-and-drop editor experience   3. Where Does Each Drupal Page Builder Fall Short? 3.1. Drupal Paragraphs What could make you… hesitate before choosing the Paragraphs layout builder for creating structured content? What are its key limitations?   You (your content editors) still depend on a developer to set everything up Managing nested paragraphs when dealing with complex layouts can get quite overwhelming   Source: Evolvingweb.ca   And this is the biggest trade-off that could discourage you from going with Paragraphs as your page building tool: You get to nest/add new and new elements, which carry their own sets of elements, up to the point where this “unlimited nesting” of paragraphs turns into a too confusing interface to cope with.   3.2. Drupal 8 Layout Builder  Where does it fall short? In a Drupal Layout Builder vs Paragraphs “debate”, which drawbacks of this visual design tool could make you choose Paragraphs instead?   You might find block content not to be 100% explicitly connected to nodes Combining template-based with custom layouts is a bit challenging Enforcing a sitewide consistency of your custom-made layouts is quite a dare 4. When Would You Use One Layout/Editing Tool Over the Other? 4.1. Drupal Paragraphs   When you need to reuse many of the content components on your website to create new pages When being able to reuse those components “per node” is of particular importance for your workflow When your structured layout does call for nested paragraph bundles   4.2. Drupal 8 Layout Builder When would you use this particular solution for creating layouts in Drupal 8?  When is Layout Builder a better choice than the paragraphs module?   When your landing page calls for a grid-like layout, including both dynamic elements (custom blocks, views) and fielded content   When you need to “juggle with” multiple columns for creating your layout   When you need to create a fully customed page from the ground up; a “special” page, that’s not connected to any structured content on your website (i.e. a single “Get a Quote” page)   When you need to custom-tune templated layouts; to override existing page layouts   When you need to set up “layout templates”, such as the layout for your product page or your blog post page   5. Final Results: Which Approach Best Fits Your Needs? What do the results of this Drupal Layout Builder vs Paragraphs comparison tell you? That there’s no “best” Drupal page builder. Only the one that best fits your specific layout creation needs. It all comes down to the level of diversity in your content:   If it’s a particularly intricate page layout that you need to create, you might not want to go with Paragraphs. Its nesting feature can turn against you.   If you’re “craving” flexibility and the content on your Drupal 8 website varies a lot from page to page, yet you still want to keep a level of layout consistency, the Drupal 8 Layout Builder is your best choice   Your turn now: which of these 2 page building tools do you prefer and why? Let me know in the comments below.   Image by 200 Degrees from Pixabay  ... Read more
Adriana Cacoveanu / Mar 06'2020
What Are Some of the Best Web Accessibility Testing Tools to Evaluate Your Website With? Top 5 Chrome Extensions
You've gone through the guidelines, standards, warnings, and best practices included in the W3C recommendations and... you're stuck. How do you know whether your website is 100% WCAG 2.1 compliant? What are the best web accessibility testing tools out there that you could use?  Free, easy to use accessibility evaluation tools that you could run on your website to spot the issues lurking in there.  And which could even get you some valuable recommendations on the best ways to address them.  All that before you actually have someone (or even a whole team of QA testers) review your website. Before you carry out an in-depth accessibility audit and run user-centric testing sessions with... real people involved.  You must be thinking about browser extensions...  They're so accessible: you just open the page you want to check and click a button in your toolbar. They're free and make great "starts" for identifying accessibility issues on your website. And for getting your hands on some valuable recommendations on how to fix them.  So, here are 5 automated accessibility testing tools that we recommend you try first:    0.1. But What Are Accessibility Tools More Precisely?  "Are there any recommended tools available that can help me test for accessibility issues?" Take these common accessibility issues that might still go "undetected" on your website:    there's not enough color contrast on certain pages (or no contrast at all) one or more images don't have ALT descriptions added to an editor deleted the content for one of the H2 tags but left that tag lingering in there and confusing the screen readers someone from your design team has put a placeholder text instead of a text field, which risks displaying an unlabeled field, that screen readers cannot... read there's one label missing from your newsletter sign-up form    These are all frequent issues that web accessibility evaluation tools can help you detect and address.  They fall into multiple categories:    browser extensions, that we'll be focusing on in this post command-line tools accessibility testing tools that you can integrate with your continuous integration system    Tip: Keep in mind that the following 5 best web accessibility testing tools detect about 30% of the issues. They make a great starting point for a more complex audit and comprehensive monitoring strategy that you should set in place.    1. Wave, The Venerated Web Accessibility Evaluation Tool for Chrome  A full-featured, easy to use website accessibility checker that's been in most developers' toolkits for quite a few years now.  Here's how it works:    it adds a visual overlay of error icons and indications to the web page that you're auditing icons which, once clicked, provide you with information and recommendations about the accessibility issues detected: redundant titles, structural elements, links to HTML, poor color contrast, how those issues impact different types of users, what WCAG guidelines they violate, etc. it points out to you the "troublesome" code via annotated HTML popping up in the panel at the bottom of the screen    In short, Wave is one of the robust website accessibility checkers that goes beyond streamlining your audit process. It's also geared at educating users (website owners, QA testers) about the accessibility issues to pay attention to.  "How to use Wave accessibility tool?"  Either way:   you can just enter your URL in the dedicated field on their website you can download the browser extension    Go for the extension particularly if it's dynamic, password-protected and locally stored web pages that you need to check.    2. Tenon, Accessibility as a Service  "How do I test accessibility?"  Tenon's another tool that comes both in a free and paid version.  What makes it "worthy" of this top 5 selection?   it addresses the common scenario: running accessibility tests after neglected guidelines have already turned into critical issues that affect the user experience  it's such a flexible tool for content creators, designers, developers, and testers it generates... generous reports with code snippets for each error, corresponding WCAG guidelines, and recommendations on how to fix them  In short: Tenon helps you run a preventive type of accessibility check on your website. You can detect key issues before they even get to turn into major usability problems  Furthermore, you can easily incorporate Tenon into your toolset via its API. It integrates smoothly with any CMS, IDE, deploy tool or automated build that you might be using.   3. Google Lighthouse, One of the Top Automated Accessibility Testing Tools   "How do I know if my website actually is WCAG 2.0 compliant?"  You give it a full check using a tool like Google Lighthouse here:    it's open-source it's automated it's so handy (it's Chrome built-in) it's super easy to use  Moreover, this accessibility testing tool is part of a whole suite of checks that you can run using Chrome Developer Tools:  SEO Progressive Web App Performance Best Practices  What it does it provide you with a full report of its test results:    whether all the buttons on that page have accessible names or not whether all the images have ALT attributes added to whether that page has a title or not ...    Next, you simply take it from there and improve the areas signaled in the report.  And here's how you use it:    open devtools in your Chrome Browser look for the "Audits" tab click "Perform an Audit" Tip: save the report in a JSON format for later (or to send it to someone in your team).  Another great thing about Google Lighthouse is that it's one of those web accessibility evaluation tools that don't require you to sign up. You just drag a report onto the online report viewer that it provides you with.    4. Axe Browser Extension  "How do you know if your site actually is WCAG 2.0 compliant?"  You "grab" a tool like Axe here and give your site an automated audit.  It'll just attach itself as a new tab to your Chrome's Dev Tools. Once you click that blue "analyze" button, you'll be given a whole list of "violations" detected on your page.  Why have we included it in our highly exclusive list of 5 best web accessibility testing tools?    because it's free (a self-contained open-source library) because you get to custom-tune it to your specific accessibility testing needs: add specific rules, integrate it with testing frameworks and browsers of your choice... because each signaled issue "exposes" the corresponding markup, as well   Just hit "Inspect code" and you're taken to the tab in DevTools, where the "culprit element" is outlined. Tip: another reason why this is one of the first website accessibility checkers that you should consider is that the Axe accessibility report goes beyond signaling clear violations of accessibility guidelines. It also highlights aspects that you could improve on your website's UI.   5. Siteimprove, One of the Best Web Accessibility Testing Tools We confess: Siteimprove is our favorite website accessibility checker. Here's why:    it provides us with actionable information regarding all the issues that it detects it generates clear explanations on the impact of those issues on some users it also "spoils" us with intuitive user experience: issues get highlighted to the right side of the page    Where do you add that the entire web page audit process is performed in our Chrome browsers.  Easy to use and highly efficient. What more could you wish from a free accessibility testing tool?    Final Word  Turn this type of accessibility testing — using Chrome extensions — into a part of a more comprehensive testing strategy.  You shouldn't limit your evaluation to the results that you get by using any of these 5 best web accessibility testing tools.  There's still some level of "human intervention" needed to interpret those results. To come up with the proper set of steps to take, right?  Use them if you just want to check whether:    there are any images without ALT descriptions on your website the HTML is valid your form fields have both labels and descriptions    Whereas for assessing:    whether that HTML is semantic or not whether those form field descriptions are user-friendly enough whether there's a proper heading hierarchy on a given page on your website   ... you'll need human analysis.  Automated accessibility testing will (only) point out key aspects for your QA testers to focus on.    The END!  Have you used any of these accessibility testing tools on your website?  Do you usually stop your audit there or do you use an automated & manual testing type of "combo"? Does it depend on the context actually?  Share your thoughts in the comments down below!  Photo by John Schnobrich on Unsplash  ... Read more
Adriana Cacoveanu / Feb 29'2020
What Are Some of the Most Popular Websites Built on Drupal in North America? Top 10
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.   ... Read more
Adriana Cacoveanu / Feb 25'2020
How Creating a Mind Map Helps You Make Your Website More User-Friendly
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   ... Read more
Adriana Cacoveanu / Dec 14'2019
What Is the Best Web Design Platform for... You? For the Type of Website that You Need?
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  ... Read more
Adriana Cacoveanu / Oct 30'2019
It’s Fast, It’s Lean... But Is Your Site Engaging Enough? 7 Interactive Website Features to Implement
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 ... Read more
Silviu Serdaru / Oct 04'2019
6 Outdated Web Design Trends: Age-Old UI Cliches that You Should Bury for Good
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   ... Read more
Silviu Serdaru / Jun 03'2019
What Is the Best Magento 2 Page Builder Extension? Here Is a Top 6
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   ... Read more
Silviu Serdaru / May 10'2019
What Are the Best Popup Plugins for WordPress in 2019? Top 5
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   ... Read more
Adriana Cacoveanu / May 01'2019