Silviu Serdaru

Silviu Serdaru

SILVIU SERDARU, Front-End & Drupal Developer

Constantly seeking to enrich the "arsenal" of technologies that I already have a hands-on experience in working with (HTML5 to CSS3, JavaScript, jQuery, PHP...) and on a permanent lookout for front-end development challenges with a Drupal-specific flavour.

Back to Blog Posts
When to Use GatsbyJS? What Are Its Strongest Use Cases? Top 10
It's fast, it's secure, it boosts SEO and it provides a great developer experience, but does it fit your use case? For it all comes down to one key question: “When to use GatsbyJS?” Is it suitable for both a portfolio or documentation site and an app with a large content base? Or a large-scale enterprise website, for instance? Should you use GatsbyJS irrespective of your/your team's JavaScript experience?  What are the obvious and some of the... less expected use cases for GatsbyJS? Key benefits that would make you want to choose it over a framework like... NextJS, for instance? Now, let me break down the strongest use cases of Gatsby for you. See for yourself whether your own use case has made it to the list or not:   1. When to Use GatsbyJS? When You Need a Static Site... Obviously GatsbyJS's is optimized for this particular use case, after all: generating static websites. Say you have a static web page (a landing page), that serves plain HTML, some JS, and CSS. As for your more specific types of content, you plan to use Youtube and a platform like Medium to host it on. Gatsby would make the perfect choice for your use case since:   it provides server-side-rendering out of the box it ships with a heavy load of plugins to delve into (extract data from your CRM of choice: Contentful, Drupal...) it has a robust data layer built-in   Use it to create pages dynamically from almost any data source.   2. Use It for Your Documentation/Personal Portfolio Website or Blog Use GatsbyJS for your blog, eCommerce website or any other general static site that's under 500 pages, where you don't expect to serve any kind of dynamic content.  Note: there are the obvious use cases of GatsbyJS and the more... project-specific ones.  The volume of content served on your website and the amount of traffic aren't always clear indicators of whether you should or should not use Gatsby.  It's all a matter of infrastructure and of whether:   you do afford a build process for your React-based web app your team's experienced enough to get the most of a micro-service architecture and of serverless functions  you depend on a database that should reflect, instantly, any changes made   GatsbyJS's built to go beyond small/medium scale static sites if used to its full potential.   3. Use It When You “Crave” High Performance Not only that it's fast by nature, but GatsbyJS even stands out from the crowd of static site generators... If page load time is your main concern, you might want to consider Gatsby as your first choice.   4. Use It When Your Project Demands a High Level of Security    “When to use GatsbyJS?” you ask yourself. When you need to add an extra layer of security to your website. Since it serves plain HTLM files and there's no database or sensitive customer data stored on the server... there's not much to hack there, is it? The only thing left to “contaminate” if they do manage to get in is... your HTML files.   5. Use It to Build Your Progressive Web App For GatsbyJS is far more than just another static site generator: It's designed, from the ground up, to be a PWA website framework. Quote source: The New Stack In this respect, it:   ships with robust progressive web app features is built to be fast and highly accessible across all devices and in all hardware and network contexts   6. Use It If Developer Experience Is One of Your Top Priorities Luckily enough for your development team, GatsbyJS provides a modern development environment: simple, robust tooling and powerful built-in features. To give you just a few specific examples:   it automatically generates static assets like CSS and images from the “static” directory it builds routes between pages automatically it minifies everything “behind closed doors” before it serves it up to the client   7. Use It If You Have Enough JS/React Experience One of the few constraints when it comes to using GatsbyJS is the above-the-average JS/React experience required. There's no two ways about it... Also, another answer to your “When to use GatsbyJS?” question is: When you already have some React components or codebase available to reuse on your static web pages.   8. Use It if You Fancy a Huge Ecosystem of Plugins  Why use GatsbyJS? Source: Reddit.com   Because it ships with an impressive collection of plugins. Basically, it enables you to enhance your otherwise simple, static website with all kinds of powerful plugins:   you could just plug in Google Analytics into your site you could “inject” a gatsby-source-medium plugin and have previews of your articles automatically served up on your website   9. Use It if SEO Is Crucial for You When to use GatbsyJS?  When the SEO factor is of critical importance to you.  The web performance boost that you'll get from powering your website with Gatsby — since it'll render static HTML only — won't go unnoticed by your users and... by Google itself. Just make sure:   a static architecture is, indeed, the right fit for your project you've configured your SEO settings properly   10. Use It with a Headless CMS It's another one of those primary use cases for GatsbyJS: Pair your Gatsby site with a CMS data source of choice (a “headless” CMS):  Contentful, Drupal, Netfly, WordPress. This way, you pass all the “worries” regarding hosting and serving your data over to your CMS. GatsybyJS integrates seamlessly with any data repository, so you can focus on implementing your front-end instead. The END! These are the top 10 use cases for GatsbyJS, ranging from the most common to specific ones.  Which of its benefits — security, high performance, plugin system, developer experience, CMS integration — is more important for your own use case? Image by nugroho dwi hartawan from Pixabay  ... Read more
Silviu Serdaru / Oct 25'2019
The Chatbot Testing Checklist: Tools, Techniques, and Metrics to Include in Your Testing Strategy
With no standardized chatbot testing method at hand, how can you ensure your bot is error-free and user-engaging? What performance testing tools should you use? What are the most effective mechanisms for testing its functionality? What metrics should you include in your scenarios? In other words: what goes into a solid bot testing strategy? In this respect, here's a chatbot testing checklist — tools, ground-rules, best practices, techniques, key considerations — aimed at helping you set your own standardized testing plan.   1. Test Your Bot's Conversational Flow Engage your chatbot in a conversation.  Take it as a form of UI/UX testing, where the interface's given by the questions and replies that your bot serves up. Start with the broad, user-greeting questions and critical use cases (or chatbot testing scenarios), then gradually tackle the edge cases, as well. Your list of questions, as this stage of your chatbot testing process, should include:   Does my chatbot understand the user's questions? Does it respond promptly to them? Are its responses accurate enough and relevant? Are there enough conversation steps or... too many? Does it keep the user engaged?    2. Run a Custom, Domain-Specific Test Now, you can imagine that including every single expression specific to your field and every possible question related to your services/product is... mission impossible. And yet, you can still provide broad classes when setting your context-specific questions for the bot to answer to. Do pay great attention to how you formulate them and to what niche terms you include there: This is that stage of the conversation where your chatbot provides credible information on your products/services. Where it should influence the user into making a decision...   3. Include Developer Testing It goes without saying that your team of developers working on your chatbot project will test it anyway while building it. Developer Testing Photo by Studio Republic on Unsplash For them, it'll be more of a verification and validation test. They will have predefined the bot's replies and set the users' inquiries, so at this stage they'll just: Check whether the chatbot serves up accurate and relevant answers to a hypothetical user's questions.   4. Run a Chatbot-Error Handling Test Or what you might call a “limit test”. Image by Tumisu from Pixabay While putting together your chatbot testing strategy, just ask yourself: What if a user enters a meaningless sentence or a not so commonly used expression? How would my chabot respond to that? Of course, you cannot possibly anticipate all the irrelevant information that users might enter. All the exceptions that your chatbot will be challenged to handle... elegantly. And still, your developers should come up with “emergency replies” for those exceptions that you do anticipate. This is that phase of your testing process where you check whether your bot provides understandable answers in such “exceptional” scenarios.   5. 3 Chatbot Testing Tools to Consider “What tools can I use for chatbot testing?” you might ask yourself. Here's a shortlist of 3 tools to consider streamlining your testing efforts with:   5.1. Chatbottest An open-source guide packed with 120 questions for assessing the user experience that your chatbot delivers. It operates at three levels:   possible chatbot testing scenarios expected scenarios almost impossible scenarios   And it provides you with 7 different metrics to use for evaluating your bot's performance:   Understanding: does your chatbot understand any kind of user input — curse words, small talk, idioms, emojis...? Answering: are its answers context-relevant and accurate enough? Navigation: is it intuitive enough for you to go through the conversation you're having with your bot? Personality: does its tone suit your audience and the nature of the ongoing conversation? Onboarding: is it clear enough to the user what your chatbot's functionality is, from the very start? Is it intuitive enough how he should interact with the bot? Intelligence: does your chatbot “remember” certain details, key information that the user has provided throughout the conversation? Error management: how does your chatbot handle errors and exceptions?   5.2. Botanalytics From usability to conversational flow, to the delivered user experience, this custom service enables you to test every key aspect of your chatbot.   5.3. Dimon The great thing about this chatbot testing tool is that it integrates seamlessly with major platforms like Telegram, Slack, WeChat, Facebook Messenger. Use it to detect any issues in your bot's conversational flow, in the user experience that it provides.   6. Automate Your Chatbot Testing “How can I automate my bot testing process?” is another valid question that might be “haunting” you. You use a chatbot that'll interact with your own bot. No intervention from your side. This way, you can run your conversation transcripts... automatically. Your job boils down to 1 key task: evaluating your chatbot's replies.   7. Final Word: It's an Ongoing Testing Process Whether it's you, your development team or you opt for automated testing, any chatbot testing prior to its release is... beta testing, after all. Real-life feedback, provided by its users, is the real test. In other words: be ready to constantly adjust your chatbot to the feedback you get after its release. Keeping it relevant, future-proofing its current performance calls for an ongoing testing process. Image by mohamed Hassan from Pixabay   ... Read more
Silviu Serdaru / Oct 23'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
Migrating from Magento 1 to Magento 2: A 7-Step Plan to Migrate Your Theme, Extensions and Data
On one hand, you “crave” improved site performance, improved checkout process, improved scalability and all the other improvements that Magento 2 “seduces” you with. On the other hand, just the thought of risking to compromise your data, your Magento extensions or the various customizations in your store simply... paralyzes you. It's obvious: you need a bulletproof, actionable and 101% safe plan for migrating from Magento 1 to Magento 2... A step-by-step guide to:   reduce some of the intimidating complexity of the process  secure each one of its phases (from the preparation phase to the data migration phase... all the way to deployment) streamline it   Well, here it is: the 7-step migration roadmap that you need to safely and efficiently structure your Magento 2 migration process.   1. Evaluate Your Current Implementation and Try to Estimate Your Migration Effort The first step to take in the preliminary part of your plan is to review your Magento 1 implementation. Start by assessing your current environment and setting it against this list of Magento 2 software and hardware requirements:   PHP: 7.0.13+ or 7.1.x +2G of Ram MariaDB 10.0,10.1,10.2 or Percona 5.7 or MySQL: 5.6, 5.7 PHP extensions: soap, curl, mcrypt, gd, iconv, PDO/MySQL, openssl, intl, ctype, bc-math, libxml etc.   Next, take some time to analyze your current e-commerce store's provided user experience, extensions, configurations... Then, reflect on the following key questions:   How many storefronts and domains are included in your Magento 1 architecture? Needless to add that moving a highly customized multi-site infrastructure is going to be a lot more challenging than migrating a single store... How large is your current store (run an inventory of all your products, users, attributes, orders, categories)? How bulky is your ecosystem of third-party extensions, Magento core customizations, custom themes, various integrations (CRM, ERPs)? It's only after you've performed an in-depth analysis of your current online store (or multi-store) that you can roughly estimate the migration complexity. Word of caution: remember to backup your Magento 1 online store (secure your folders, database, and files) and to always migrate data from your cloned database instead of transferring it straight from your live online store...   2. Make an Inventory of Your Extensions: Search for Similar Versions in Magento 2 And this step makes a perfect opportunity to... declutter: Run an inventory of all the extensions on your current e-store and decide which ones are to be kept and which of them you should let go of... Next, divide your “pile” of extensions into 3 categories:   Magento 1 extensions with corresponding versions in Magento 2 Magento 1 extensions with third-party alternatives instead  Magento 1 extensions that were custom-built for your current store, that you now need to rebuild Run a 1:1 analysis and identify the extensions, themes and custom code on your e-commerce store that are compatible with Magento 2...   3. Migrating from Magento 1 to Magento 2: Choose the Right Migration Tool In this respect, the Magento 2 data migration tool is a highly reputed one. It will greatly streamline the whole process, but do keep in mind that:   you'll still need to write custom code to seamlessly merge data into the new platform you'll need to adjust your custom code to fit in; for instance, tables and columns aren't considered standard dataset in Magento 2   Note: now it's the best time to reconsider your third-party extensions. Do they really compensate for all those data entries and product parameters that they injected into your Magento 1 store? If you still consider them relevant and valuable enough to be moved over to your new Magento 2 store, you might want to consider the Magento 1 to Magento 2 code migration tool for this.   4. Migrate Your Theme And this will be possible only if:   your current Magento 1 theme is compatible with Magento 2 there is a version of your current theme available in Magento 2   If not, if you've been running your e-commerce website on a custom theme, let's say, then you can either:   create a whole new theme from the ground up purchase a Magento 2 theme   Note: this is also that step of your “migrating from Magento 1 to Magento 2” roadmap where you integrate your new online store with your key corporate systems.   5. Migrate Your Extensions  As already mentioned, there are 3 possible actions that you can take regarding your current load of extensions:   check whether they have Magento 2 counterparts if so, incorporate those Magento 2 versions into your new store if not, integrate some brand new extensions, that provide the same or similar functionality   6. Migrate Your Code Customizations Rely on the Code Migration toolkit for this and let it do all the heavy lifting that the code migration process involves. Word of caution: after you've let it perform its function, remember to go back and focus on all those files that need manual editing.   7. Migrate Your Data  As already mentioned, the Magento 2 Data Migration Tool is one of your most reliable “allies” in migrating from Magento 1 to Magento 2.  And I'm referring here to the orders stored in your store, products, settings and configurations, categories and so on... How do you use it? It's no more than a 5-step process:   Use Composer to install the tool Enter your authentication keys (Magento Marketplace > Sign in > Click on My Access Keys) or generate a new pair configure your tool migrate your Magento 1 store's settings (system/store configurations, shipping, tax settings...) Migrate your data by entering this command: php bin/magento migration:data --reset <path to your config.xml>   Next, it's testing time: test, test, test, then... test some more! Check whether your new Magento 2 store works properly. Make sure you run your performance analysis and optimization process on real data. This way, you can check whether the actual Magento 2 store is capable to withstand real-life loads of data... Also, do keep in mind to update the existing data with the newly added one before deploying your Magento 2 store. And that because at this point you might end up with identical data: identical products, users, categories... Once you've fixed this issue, you only need to pick the right time — preferably not the “peak traffic” hours on your website — to launch it...   The END! Have I missed any key step(s) that anyone migrating from Magento 1 to Magento 2 should take?  Image by Ross Mann from Pixabay ... Read more
Silviu Serdaru / May 31'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 Solutions for Creating a Slider in Drupal? 4 Drupal 8 Slideshow Modules
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 ... Read more
Silviu Serdaru / Apr 25'2019
How Does Using Component-Based Development in Drupal 8 Benefit Your Team More Precisely?
With the Twig templates replacing the old PHP templates, Drupal has been brought to a whole new “era”. We can now leverage the advantages of a component-based development in Drupal 8. But what does that mean, more precisely? How does this (not so) new approach in software development benefit you? Your own team of developers... And everyone's talking about tones of flexibility being unlocked and about the Twig templates' extensibility. About how front-end developers, even those with little knowledge of Drupal, specialized in various languages, can now... “come right on board”. Since they're already familiar with the Twig engine... Also, we can't ignore all the hype around the advantage of the streamlined development cycles in Drupal and of the consistent user experience across a whole portfolio of Drupal apps/websites. But let's take all these tempting advantages of component-based UI development in Drupal 8 and point out how they benefit your team precisely.   1. But First: What Is a Component? It's a standalone piece of software that can appear in multiple places across your Drupal website/application. One of the most relevant examples is that of a content hub. One displaying teasers of the latest blog posts, events... You could set up a component that would determine how each item in that content hub should look like. In short:   one single component can be used by several types of content any update to its template/style would automatically reflect on all those content types, as well   Accessible via an API, this independent piece of software explicitly defines all its application dependencies.| Your team could then easily architect a new interface by just scanning through and selecting from the library of components.   2. What Is Component-Driven Development? What Problems Does It Solve? A succinct definition of component-based software engineering would be: A software development technique where you'd select off-the-shelf, reusable components and put them together according to a pre-defined software architecture. “And what challenges does it address?” It streamlines and lowers the level of complexity of otherwise intricate, time-consuming development and design processes. As the author of given components, your role is to get them implemented. No need to worry about how they'll get “assembled”; this is what the well-defined external structure is there for. Word of caution: mind you don't get too... engrossed in putting together the right components, in architecting the best component-based structure, for you then risk investing too little time in... building them properly.   3. Component-Based Development in Drupal 8 Now, if we are to focus our attention on the component-based UI approach in relation to Drupal 8 software development, here are the key aspects worth outlining:   with the Twig engine in Drupal 8, you're free to “joggle with” extensible templates; once you've defined a Twig template in one place, we get to reuse it across the whole Drupal website/app   the Component Libraries module allows you to set up template files (storing all their needed JS and CS), assign a namespace for them and place them pretty much anywhere on your Drupal filespace (not just in your themes' “templates” directory)   you then get to use the KSS Node library and define a living style guide; it's where you'll store all the component templates built for your Drupal website (styles, markup, JS behaviors, etc.)   By filling in your toolboxes with all these tools — the results of a joint effort of the Drupal and the front-end communities  —  you're empowered to design themes that are more modular. And, therefore, more efficient... 4. The Top 6 Benefits of the Component-Based UI Approach   4.1. It Ensures UX Consistency Across All Your Drupal 8 Websites Take your library of components as the “headquarters” for all the teams involved in your Drupal project: QA, business, development, design teams... It's there that they can find the pre-defined standards they need to keep the consistency of the features they implement or of other tasks they carry out across multiple projects. A consistency that will bubble up to the user experience itself, across your whole portfolio of Drupal 8 websites/applications...   4.2. It Accelerates the Process of Turning Your Visual Design into a UI  Embracing the component-based development in Drupal 8 you'd avoid those unwanted, yet so frequent scenarios where the front-end developer gets tangled up in the wireframe he receives and:   he/she translates parts of it the... wrong way he digs up all types of “surprise” issues     By using a component-driven UI approach translating a visual design into a user interface gets much more... event-less.  With:   a pre-defined component architecture to rely on well-established standards to follow a whole library of component templates at hand   … there are fewer chances of discrepancies between the UX defined in the visual design and the one delivered via the resulting user interface. Not to mention the reduced delivery timelines...   4.3. It Streamlines the Whole Development Process  “Sustainability” is the best word to define this approach to Drupal software development. Just think about it:   whether it's a particular grid, navigation or layout that your front-end developer needs when working on a new project, he/she can pull it right from the component library at hand   … and “inject” it into the app/website that he's working on   in case that element needs further updating, the developer will already have the baseline to start with   … there's no need for new components to be designed, from the ground up, with every single project: the already existing ones can always get further extended   And that can only translate into significant savings of both time and money.   4.4. It Reduces the Time Spent on Setting Up the Functionality & Defining the UX And this is one of the key benefits of using component-based development in Drupal 8. Your various teams would no longer need to define the UX requirements and the functionality every single time during the design process. With an easily accessible library of components, they can always pull a component standing for a specific requirement (display of complex data, filtering, pagination in grids, etc.) and just define its extensions. And the business logic, as well.   4.5. It Enables You to Systematically Reuse Your Components And “reusability” goes hand in hand with “sustainability”. I would even say that it's a synonym for “future-proofing”, as well... Just think about it: by having a Drupal 8 website in a component-based format you can always rearrange components as technologies grow outdated and new ones emerge... In short, embracing a component-based development in Drupal 8 enables you to remove the need of rebuilding your website every time its underlying technologies “grow out of fashion”. With your component library at hand, you'll be able to swap your guidelines, design patterns and various content templates in and out, keeping your Drupal app or website up to date.   4.6. It Integrates Seamlessly into the Development Process  By leveraging a component-based development in Drupal 8, you'd also gain better control over the whole development cycle. The update process here included... Since you'd then build your components and manage your production quality user interface code in a repository like GitHub, every update that you'd make will be displayed in there. And be easily accessible to everyone in your team. In short, your developers get to pull pieces of code from the repository to further extend them, then re-submit them to GitHub (or to another source code repository) for review. With the ability to version your component library, your team can keep a close track of all your Drupal applications with their corresponding versions of the approved UX.   The END! This is how the component-based development in Drupal 8 would benefit you and your team. Have we left out other key advantages of using this approach? Image by Arek Socha from Pixabay ... Read more
Silviu Serdaru / Apr 11'2019
How to Make Your Mobile Call to Action Buttons Intuitively Usable: 10 Best Practices
Simple, yet visible enough, actively persuasive, yet not invasive, powerful, yet intuitive. How do you make your mobile call to action buttons intuitively... usable? What are those techniques which, once applied, enhance their intuitiveness? And thus boost their effectiveness, as well... How do you know whether your current mobile CTAs aren't optimally designed for mobile devices and adapted to mobile users' specific UX needs?    users spend too much time on the action screen; it's not obvious enough for them which are the highest priority actions to take, there are too many options crammed in there, too much text, etc. your click-through rate could be... better, to say the least   Now, here are 10 straightforward, yet highly effective tips to make your mobile call to action buttons more effective:   1. Bold Your Text Labels Differently to Indicate Priority Level A simple, yet powerful technique, that's often underrated: varying the boldness of mobile CTAs based on priority. This way, you'd put different emphasis on the various actions referred to.  For instance, is the action of “checking out” more important than that of “viewing the cart”? Indicate this hierarchy of priorities using varied intensity when you bold your text labels: go from the least bold to... the boldest.   2. Go for Button Shapes Instead of... Text-Only “Buttons” Stick to the safe beaten road of UX when designing your mobile call to action buttons: don't trade straightforwardly shaped buttons for text-only ones. You'd only end up confusing your users: “Is that a button or a piece of information?” And you'd risk having them miss/skip your most important CTA because... they won't notice it or just take it for... copy. In other words: place your text labels into “familiar” button shapes.   3. Consider Those Screen Areas of "High Thumb Activity" Always take heed of “the thumb zone”! It's made of all those key spots on a phone's screen that are the easiest for users' thumbs to reach and to... click on.  Once identified, strategically place your mobile CTAs there...   4. Consider Users' Natural Scanning Pattern when Placing Your CTAs Do you want your mobile call to action buttons to be (just) visible or effective? In this respect, placing the highest priority CTA first, will make it visible, but not necessarily effective, as well. Why? Because users are then forced to scan the screen bottom-up. And this is not their natural flow: first the “Checkout” button, then the “View Cart”, then the “Continue Shopping” buttons... Any deviation from this familiar flow will affect the “intuitiveness” of your CTAs.   5. Stick to the Best Practices for Mobile Call to Action Placement Left or right? Top or bottom? Where is it most effective to place your mobile CTAs on the screen? You'll get the best answer to your question only once you've studied your target audience:   what triggers them to... action? what catches their attention first on a screen?   Run some tests to identify those best practices on call to action placement that are most effective for your own scenario.   6. Keep It Straightforward: One CTA Per Page Challenging users with too many options is another “self-sabotaging” technique. So, make sure you don't fall into the trap of overcrowding your screens with multiple CTAs. Instead, make the most of that limited real estate on a mobile device's screen and place just one CTA per given space.  Otherwise, you only risk discouraging users with a too complicated decision-making process...   7. Use Color Wisely to Signal Progressive Actions & Priority Levels Let's take 3 of the most common actions that mobile users are presented with: “Continue shopping”, “View cart” and “Checkout”.  Now, how would you indicate a given user the lowest, the medium and highest priority action to take? How would you signal progressive actions (as opposed to regressive actions, like “view cart”)? You use the same color, but with different levels of saturation and brightness. Note: using equally saturated color on all your mobile call to action buttons wouldn't make the hierarchy of priorities very intuitive, while using different colors would only place the same emphasis on all those progressive actions. Tip: to indicate the highest priority, you could also opt for light text label set against a dark background; as opposed to the dark text on a lighter background, that you'd use for lower priority CTAs.   8. Use White Space to Make Your Mobile CTAs Stand Out And this best practice goes hand in hand with the “one CTA per given space” technique: let the white space work for you/your call to action button.  Make sure to wrap it in enough white space to help it... stand out and catch users' attention.  You'd then:   make the most of the limited real estate that you're constrained to work with avoid unwanted scenarios where, due to screens crammed with text and CTAs, users accidentally click the “wrong” links   9. Keep Your Copy Concise, Yet Persuasive Your mobile call to action buttons should feature text that's:   short, yet descriptive enough concise, yet actively persuasive action-oriented   10. Use an Icon to Indicate the Highest Priority Action What about color blind users? How can you make your mobile call to action buttons visible and intuitively easy to use for them, as well? For using color wisely and varying the boldness of your text labels to indicate different priority levels sure isn't helpful for them. Well, you go with an... icon. Just place it inside your checkout button and you'll make it stand out even more. It will be that visual element that they'll spot and cling to once they lend on a screen.  The END! These are our 10 easy to implement techniques that will help you boost the “intuitiveness” of your mobile call to action buttons. Would you have added other ones, as well? Image by LeoNeoBoy from Pixabay. ... Read more
Silviu Serdaru / Apr 05'2019