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
Drupal Performance Optimization: 17 Drupal Caching Best Practices To Speed Up Your Page Load Time- Part 2
"How can I make my Drupal 8 website faster?" Are you still struggling with this? Still striving to figure out which are the best (and most straightforward) Drupal performance optimization techniques for your website? Well, here I am today with a handful of 9 more ways that you can speed up your Drupal site. In addition to the 8 ones that I covered in the first part of this post. And yes: it's another round of Drupal caching best practices that'll help you boost your page load time. So, let's dive right into it: Tip #9: Use the Dynamic Page Cache Module  ... to cache for both authenticated and anonymous users. Unlike the Internal Page Cache module, that I mentioned in Part 1, which only caches pages for anonymous users. Tip #10: Use Distributed Cache, A Highly Effective Drupal Performance Optimization Technique But how does it work, more precisely? Once you've installed a distributed cache, it'll store your database's cache tables (Drupal's "cache_" tables) either in: file or memory Tip #11: Enable Drupal Cache for Anonymous Users Another one of those quick, yet powerful Drupal performance tuning steps that you can take. Tip #12: Use Squid to Cache Images and Static Content on Your Website "How to optimize Drupal for better performance?" You could go for Squid, an open-source caching proxy server. Now, since Drupal's already famed for its particularly dynamic content, the only cases where Squid does make a great performance booster are those where you need to cache static content. Tip #13: Add a Front-End Cache (i.e.Varnish Cache) Here's another handy Drupal performance optimization method for you: Use Varnish Cache to reduce the load on your server. How does it do it? It stores the HTML response, so that next time that the same page is requested, it serves it from memory. The result? Bypassed PHP and web server and... improved page load time. Tip #14: Use the Advanced CSS/JS Aggregation Module to Improve the Front-End Performance of Your Website  Combining your assets together is one of the most straightforward and effective ways to address those Drupal performance issues on your website. From: file grouping to caching to compressing ... the AdvAgg module handles all the steps that you need to take to aggregate your CSS and JS files. Tip #15: Install Memcache to Reduce Your Database Load You know how you're often struggling with keeping your database load to a minimum by caching database objects in RAM? In this respect, Memcache makes a great Drupal 8 performance optimization technique. It helps you reduce that load on the database and boost your page loading time. How? By taking standard caches out of the database. And by caching the results of resource-intensive database operations... Tip #16: Use the Entity Cache Module to Cache... Entities   Another caching best practice to boost Drupal 8 with is installing the Entity Cache module.  And its name says it all: it helps you cache entities. Tip #17: Cache Views  Here's the situation: Page requests made by registered users on your website lead to loads of queries to your database. Which impact the page load time. Now, to query the database, views are being used. And this is where this views caching module comes in handy to... boost things in there.   The END! These are our 17 recommendations for you on the best Drupal performance optimization methods for boosting your page load time. Not thrilled about the idea of having to go through the... Memcache installation process or to configure Varnish for Drupal? Or to put your current projects on hold so that your team can set up a... distributed cache? Maybe you don't have a professional Drupal maintenance team that could handle all these caching settings? We're here to help! Just drop us a line and let's figure out which of these 17 techniques are best suited for your website and the specific performance issues that it's struggling with. Let's speed things up in there! Image by Izwar Muis from Pixabay   ... Read more
Silviu Serdaru / Jun 23'2020
Drupal Performance Optimization: 17 Drupal Caching Best Practices To Speed Up Your Page Load Time- Part 1
"Why is my Drupal site so slow?" "How do I speed up my Drupal website performance?" In other words, what Drupal performance optimization techniques should you use? Which is the: most budget-friendly quickest most straightforward most effective ... solution to those Drupal performance issues that are slowing down your website? Caching... And luckily, Drupal 8 (it is a Drupal 8 website that you have, isn't it?) "spoils" you with one of the most advanced caching systems out there. The trick is that you follow the Drupal caching best practices and use it to its full potential. Speaking of which, here's a list of 17 such best practices: * I'll be covering 8 of them in this post, leaving the 9 remaining ones for the next blog post. But First: What Is Caching? "What is the purpose of caching?" "How does caching improve performance?"  2 legitimate questions that you might be yourself right now. Let me start by defining the Drupal caching process: Once a user accesses a page on your website, content elements and web data from that specific page (images, HTML, CSS, etc.) get stored in an accessible space. When that user visits the same web page again, your website will serve him/her the cached version of the content.  That if you haven't updated it since his/her last visit, of course... And this translates into: reduced bandwidth faster page loads Tip #1: Use the Internal Page Cache Module to Cache Pages for Anonymous Users   Say you have an "Add to cart" functionality for anonymous users on your eCommerce website. You can use this module to cache precisely this functionality. A Drupal performance optimization tweak that'll take you less than a minute to set up. Tip #2: Go for the Best Suited Tools for Heavy Traffic Drupal Sites Say you have a fairly busy Drupal 8 website. You've turned on caching in your performance settings, but... you haven't noticed any significant impact on your site's loading speed. So, you need to bring in the heavy artillery. To use powerful caching tools designed for high traffic websites. Here are some of the best tools and optimization techniques to try: switch to a Drupal-specialized hosting provider like Pantheon or Acquia move your database to its own VM/container (that if you still have it running locally, on your Drupal web server) upgrade to PHP 7.1.0 Enable OPcache via php.ini.  Put a proxy (i.e. Nginx) in front of your server Tip #3: Enable Block Cache - A Quick and Easy Drupal Performance Optimization Solution How to increase Drupal 8 performance? You cache those blocks that don't get updated frequently (like from one user to another). Tip #4: Use Views Content Cache to Update Upon Content Changes Only How does this Drupal module help you optimize your website for better performance? It allows you to expire views caches every time you update or remove content. The great thing about this caching method is that you get to cache blocks that appear on thousands of pages. Tip #5: Use a Content Delivery Network By far the most powerful Drupal performance optimization solution for your website. Why? Here are the 2 strongest reasons why you'd want to use a CDN to cache the static content (files, CSS, images, JS, fonts...) on your website: you keep the network delay to a minimum since your CDN has endpoints across the globe you get a better page loading time: your CDN has a domain different from your website's, so web browsers load content requests to your domain in parallel with the content coming from the CDN Tip #6: Set a Far Future Expiration Date for Your Static Assets Set up a "Newer expire" policy for your static components (e.g. use a far future Expires header) Tip #7: Use Redis as a Drupal Performance Optimization Technique to Store Large Amounts of Data Data that wouldn't fit into your server. "But what is Redis?" you ask? An in-memory store optimized for high-performance. Tip #8: Set the Maximum Time that Your Pages Can Remain Cached Another one of the Drupal caching best practices is setting the maximum amount of time that browsers should keep your cached data. The END of Part 1! And these are but 8 Drupal performance optimization solutions focused on caching. I have a whole list of 17 tips ready to share with you... So, stay tuned for another round of simple and effective caching techniques that'll help you speed up your website... But what if you don't have the time or the people in your team that you could assign tasks like: enable a block cache set up Redis  install the... views_content_cache module ...?  What if you could have a dedicated Drupal maintenance team implement all these performance optimization techniques on your website for you? We're ready to help you speed things up on your website. Drop us a line and let's set up the best caching strategy for your Drupal website. Image by mohamed Hassan from Pixabay   ... Read more
Silviu Serdaru / Jun 19'2020
What Makes a Website Easy to Navigate? 11 Best Practices for Organizing Your Website’s Navigation
Quick and easy access to the content they're after is more important for your website users than a... visually-stunning design. Simple, straightforward navigation is what they expect to find. But what makes a website easy to navigate?  What are some good practices to follow to make your website easier to navigate? Here's a top 11: 1. Put Your Navigation Right Where Users Expect to Find It Don't compromise good user experience for the sake of "wowing" visitors with your innovative navigation system. Do users expect to see a navigation bar at the top of the page? Or a navigation menu in the top right corner? Give them that. This way, they get faster access to the information on your website that they're interested in. Tip! Do you feel particularly creative and you want to add multimedia content to your navigation? Make it obvious to your site visitors that those are clickable elements. 2. Tailor the Navigation Bar To Your Own Audience and Business  A navigation bar optimized to meet the needs of a particular audience is what makes a website easy to navigate. So, ask yourself this: What do visitors do on your website? What are they're looking for? More information on some of the services that you provide? Or maybe they want to have a look at the projects in your portfolio and at your previous clients' testimonials? Are they on your website for your blog posts? Once you're done with this empathy exercise and you have all the data, you'll know how many links are "too many" or "too few" for your navigation menu.   Source: Clutch.co  3. Make Your Sidebars Stand Out from the Rest of the Page "How do I organize my website navigation?" You make sure your sidebars don't blend in with the content on the page. And there are many simple and effective ways that you can set it apart from the body copy. Here are just 2 of them: use a different background color for your sidebars use white space strategically to make it stand out from the other elements on the page 4. Make It Legible and Easy to Read on Any Screen  How easy is your website to navigate?  Before you rush in to answer that, make sure you test it for legibility on smaller screen devices, as well. Here 2 of the best practices to follow for legible navigation in all usage contexts: use a font that's at least 12 pixels avoid narrow scripts and fonts break out your navigation into clear categories with up to 7 items use main menu, second, and third-level dropdown menu, as well, to organize your navigation if your website holds a lot of pages 5. What Makes a Website Easy to Navigate? A Fairly Straightforward Navigation Menu  Keep your navigation titles clear, accurate, and easily recognizable: stay away from witty or riddle-like titles. Why would you want to change already familiar title phrases like "About Us" or "Contact Us" and risk to confuse the user? To make him/her lose valuable time trying to figure out "what the poet meant by..."? Just keep it simple and predictable. 6. Make Your Hypertext Stand Out from the Body Copy "How do I make my website easier to navigate?" You make sure that users can tell hyperlinks from the rest of the page content. How? make them bold use another color underline them ... Just make sure your navigation links are 100% usable.  Make it obvious to the users that that is a hypertext and they can click on it. Source: Clutch.co  7. Make Sure Your Navigation Is Fully Responsive  This is, by far, one of the website navigation best practices. And the adjustments to consider for your mobile navigation menu range from:  making the links large enough for mobile phone users to tap on with no effort  to tightening the menu so that it fits smaller screen sizes to using a hamburger menu on mobile devices 8. Mind the Footer  Too often overlooked, the footer navigation has a big impact on the user experience (positive or negative, depending on whether you "forget" about it or not). Just put yourself into the shoes of a user who's just landed on your website: You've scrolled all the way to the bottom of the homepage and you now want to go to a specific service page or product page. Wouldn't it be great if you could access it via a hyperlink placed right there, in the footer? That, instead of going back to the header menu... "But what should I put in my footer?" you ask yourself. You can either: mirror the links included in your header navigation menu or put links to other key pages on your website: contact page, target blog posts, email newsletter sign up, etc. 9. Include Internal Search Functionality  What makes a website easy to navigate? Effective on-site search functionality... Especially if you have an eCommerce website, where users look for specific products/services. Once you've implemented it, follow these tips for making your search bar stand out: use an icon of a magnifying glass insert a "Search Here" text inside the search box use a different color to make it pop out And don't stop there: Merely adding internal search functionality is just the first step. Make sure that the entire search experience meets the user's expectations. And in 2020 users expect much more than just the basic product filters like color, size, and style. They want to narrow down their selection to products that are on sale or to products that have been recently added to the website or... 10. Use Text Links Instead of Buttons for Your CTAs Here's why you don't want to use buttons in your header navigation: it's bad for your SEO: search rankings can't read buttons (but they can read text) they make your navigation look clunky you can't make a specific link stand out from the rest buttons load slower, affecting the overall page loading speed In short, use text for your menu items for both usability and SEO. It's one of the website navigation best practices in 2020. 11. Create a Sitemap for Your Website's Visitors Provide them with a map before you expect them to explore your website. This way, you: make your website more usable for its visitors help search engines crawl in and index your web pages A win-win. The END! With these best practices on what makes a website easy to navigate at hand... what next? How do you implement them on your own website? We're ready to help you create that intuitive and effective navigation system. Just drop us a line. Image by OpenClipart-Vectors from Pixabay   ... Read more
Silviu Serdaru / Jun 10'2020
Cross-Platform App Development: 6 Reasons Why You’d Want to Build Your Cross-Platform App with React Native
You've decided to jump on the cross-platform app development “bandwagon” and to build an app that targets both Android and iOS users. An app that works on multiple frameworks and caters to multiple audiences... at the same time. Now, the question that arises is: Why would you go for React Native? Over any other cross-platform app development framework? Why not... Flutter or Xamarin? Or maybe Ionic? What are the key benefits that, as a business owner, you'd reap from going for this particular framework? I've piled together all the reasons why you'd want to use React Native to build your cross-platform app with, then I've narrowed down the long list to... 5 reasons. The strongest ones. Here they are:   But First: What Is Cross-Platform App Development More Precisely? Compared to native app development, cross-platform mobile development refers to: Building a custom app meant to work on several platforms. And to be compatible to multiple software environments. In short: a versatile mobile app that works on both iOS and Android.  Having one codebase, one development team and just one app to test (and to maintain) translates into lower costs. And it bubbles up to the user experience, as well. Now, getting back to the best possible answers to your legitimate question: “What are the advantages of React Native for cross-platform app development?” … here are 5 key reasons why you'd lean towards this framework:   Reason #1: It's Cost-Effective Why? It's pretty obvious:   React Native allows you to code once and use the same codebase for any operating system; you get to (re)use the same code for both Android and iOS development it provides you with platform-specific UI elements there's only one JavaScript codebase to... test; fewer test cases for you to “juggle with” since you only need to fix all bugs and errors once   Reason #2: You Can Quickly Prototype an App React Native accelerates your prototyping process, so you can:   get a functional cross-platform app up and running in no time collect valuable user feedback much quicker   If you run a startup betting on a highly innovative app idea or a product company, the speed at which you manage to turn your idea into a prototype and to release it to the market is crucial.   Reason #3: Brand-Aligned and Consistent User Experience  “Why would I choose React Native as my cross-platform app development solution?” Because it helps you keep consistency in your app's UI design. Users get to interact with the same UI elements, irrespective of the platform that they use your mobile app on. Which instills a sense of familiarity and delivers them a uniform user experience...   Reason #4: You Expand Your Audience  And this is the first reason that you'd get in any “native app development vs cross-platform” debate. As a cross-platform mobile app development framework, React Native enables you to widen your app's reach: You build one app for both Android and iOS users. Reason #5: You Build Your Mobile App Faster Why go for React Native over other cross-platform app development frameworks?  Because it speeds up the development process: Your development team can put together a mobile app faster thanks to the pre-built components that React Native provides them with. Do they need to implement certain functionality into your cross-platform app? They stand high chances to find it, already coded by other React Native developers, and free to be deployed in your own app.   Reason #6: You'll Only Need One Development Team A single team, that has hands-on experience working with a set of technologies. Speaking of cost-effectiveness, right? Moreover, by having a unique team handling all the stages of your project you avoid a scenario where too many teams risk to... sabotage one another. And to compromise the app project itself.   Final Word: React Native's the Right Cross-Platform App Development Solution for You If...   you're a startup you're a small-medium company  the time factor is critical for you and you need to prototype a mobile app in no time ... with as little resources as possible   Don't have a React developer in your team? We've got you covered. There's a whole team of React Native developers here, at OPTASY, ready to help you. Just drop us a line.  Tell us about that innovative mobile app idea of yours, the functionalities that it should incorporate, and... we'll get back to you with a draft plan. Image by ijmaki from Pixabay   ... Read more
Silviu Serdaru / May 19'2020
How to Speed Up a WordPress Website: 11 Universal Ways that You Can Make It Faster (With and Without a Plugin)- Part 2
I'm back with the rest of 5 simple ways to speed up a WordPress website. So, grab your pen and paper and get ready to take notes. As promised, I'll pin-point only easy tweaks that you can make to your website and boost its performance. So, let's dive right in:   Add Page Caching via a WordPress Caching Plugin How to Speed Up a WordPress Website: Minify Your CSS and JS Files Clean Up Your Database Switch to a (More) Lightweight Theme Enable GZIP Compression, The Fastest WordPress Speed Optimization Technique   7. Add Page Caching: Use a WordPress Caching Plugin for That  Here's how caching improves your site-loading speed: It creates – and stores on the server – static files for each page/post on your WordPress site. So, once a user accesses any of those pages, your website delivers the content much faster. In short: by adding page caching, you speed up your WordPress website's response to search requests. For this, you'll need to consider choosing an effective caching plugin for your website. And you definitely don't run out of options there. But if we were to make a very drastic selection, we can honestly say that you'll find the best plugin to speed up your WordPress site with on this shortlist:   W3 Total Cache (vetted by Neil Patel himself) WP Fastest Cache WP Super Cache  Cache Enabler    Tip! Pair your Wordpress cache plugin with a powerful caching mechanism like Varnish and you'll double your website's page loading speed. 8. How to Speed Up a WordPress Website: Minify Your CSS and JS Files Another quick and easy way to reduce page load time on your Wordpress site is to minify your resources (aka CSS and JS files). To cut down on the number of calls and on these files' sizes, as well. How? You can either:   do some manual fixing, following the steps on the Google PageSpeed   or go with a plugin to streamline the whole process   9. Clean Up Your Database Since WordPress is database-driven, it's crucial that you clean up your database of all the:   spam comments old drafts fake users pingbacks post revisions tables transient options   A measure that falls into the “reducing overhead” category, like the technique of removing all the unused plugins, that I've mentioned in Part 1. This way, you keep the size of your database to a minimum. Which will minimize the size of your backups, as well. And why do everything manually when there's at least one plugin for it? One that'll put the whole database clean up process on autopilot. WP-Optimize, for instance.  Once enabled, it'll take you just a few clicks to delete most of your database build-up. Moreover, you can schedule it to remove residual content automatically.   10. Switch to a (More) Lightweight Theme Now, you might wonder also: “How do I speed up a WordPress website without a plugin?” Going for the lightest WordPress theme is but one valid option. In other words, resist the temptation of choosing a theme that “seduces” you with a parade of dynamic elements, social icons, sliders, widgets... glitz and glamour. In most cases, these shiny elements translate into:   higher page sizes a higher strain on the web server   Tip! Go for the most simple, lightest theme/template and build all the additional functionalities that you might need on top of that base.  When in doubt, choose one of the default WordPress themes! Tip! If your WordPress site's a particularly feature-rich one, go with a theme that uses a robust framework like Foundation or Bootstrap.   11. Enable GZIP Compression, The Fastest WordPress Speed Optimization Technique And this is the “simplest” technique, as well. Just enable GZIP compression and start saving valuable bandwidth usage and reducing the page load time on your WordPress site. Here's how it works: GZIP compresses different files on your website, so that when a user tries to access it, his/her browser will first need to unzip the site. This way, you bring down the bandwidth usage.  And, as you can guess, there's at least one plugin that enables GZIP compression. Take PageSpeed Ninja, for instance...   The END! Our list of 11 simple ways that you can speed up a WordPress website ends here. Struggling with low speed on your WordPress site? Do you need help implementing and adapting these optimization techniques to your own website? We're here to help. Just drop us a line and let's put together an optimization battleplan for your site! Image by deanmarston432 from Pixabay    ... Read more
Silviu Serdaru / May 13'2020
How to Speed Up a WordPress Website: 11 Universal Ways that You Can Make It Faster (With and Without a Plugin)- Part 1
“How do I make my WordPress site faster?” you ask yourself. And let me guess: you want to address this challenge – how to speed up a WordPress website – the easiest way possible... So, what you're looking for is some effective and universally applicable tweaks that you could make on your own website without much fuss, right? You're in the right place, then... For in this post (Part 1) I'll be listing and detailing 6 of the 11 simplest ways to make your WordPress site faster:   Use a CDN: Deliver Content from the Nearest Possible Server How to Speed Up a WordPress Website: Compress Your Images Minimize External Scripts Upgrade to PHP 7 (At Least): A Simple WordPress Optimization Step to Take Switch To a Better Hosting Provider (With a Dedicated Server) Remove the Plugins that You Don't Need   So, let's dive in:   1. Use a CDN: Deliver Content from the Nearest Possible Server Do you serve content to an international audience? Then using a content delivery network is a must for you. Here's precisely how it'll reduce the page load time on your WordPress site: It serves your static files (e.g. your images) to your visitors based on their geographic locations.  In other words: if a user's located too far from where your website's hosted, a CDN will deliver the static content on your website from the data center nearest to him. A CDN  helps you keep the site-loading speed to a minimum when your website's accessed from different corners of the world. All there's left for you to do is... a little digging. See which are the most popular CDN services out there (Cloudflare, MaxCDN, KeyCDN, etc.) and evaluate their offerings against your specific feature needs. And budget.   2. How to Speed Up a WordPress Website: Compress Your Images More often than not the (too) large, high-resolution images are the “usual suspects”. So, the no. 1 rule is to compress your images.  Or, better said: to optimize your image files – aka to reduce their size with no compromise on their quality. And here you have 2 options:   you either compress them manually, in Photoshop, Chrome PageSpeed, or by using any other tool of your choice or you just use a WordPress plugin: WP Smush, Optimole, EWWW Image Optimizer, etc.   3. Minimize External Scripts Keep your font loaders, ads, and other external scripts to a minimum. They're one of the main reasons why your WordPress website's loading so slowly. 4. Upgrade to PHP 7 (At Least): A Simple WordPress Optimization Step to Take Because PHP 7 is significantly faster than its predecessors (e.g. PHP 5.6). Here, again, you have 2 options:   you either upgrade the PHP version yourself or you ask your hosting provider to give you a hand   Note! Needless to add that it's critical that you opt for a host that supports this version of PHP.   5. Switch To a Better Hosting Provider (With a Dedicated Server) Hosting is the no.1 culprit for a WordPress website's poor performance. And that because:   a badly configured web hosting server has a huge impact on your page load time a shared hosting environment won't guarantee you decent loading times at high-traffic hours; your website's sharing the same server with many other sites...   So, if it's a shared hosting provider that your website's running on, consider this: Unlimited emails, domains, bandwith and the many other features that a sharing hosting plan might “seduce” you with can't compensate for the... slow loading times and the clogging of RAM and CPU. So, one of the best answers to your “How to speed up a WordPress website” dilemma is: 6. Remove the Plugins that You Don't Need Want to make your WordPress faster? Start by decluttering your plugin collection. Are there any plugins that you've... never used? Get rid of them! Why? Let me give you just one example of how a heavy load of plugins can slow down your WordPress site: The more plugins that you have there, the larger the size of your backup will get. And this will only put an unnecessary strain on your server with every backup file that's generated for these non-essential plugins. You might want to consider replacing them with third-party services that serve the same purpose.   END of Part 1! Has any of these 6 steps on how to speed up a WordPress website caught your attention? Do you consider switching to a new hosting provider and you need some expert advice on which one to go with? Or maybe you're having trouble identifying the plugins that are unnecessarily bogging down your site? We're here to help. Whether it's just a recommendation of what CDN to use or putting together and implementing an entire optimization strategy for your WordPress site, just drop us a line. And stay close for the second round of WordPress speed optimization tips in Part 2! To be continued... Image by PublicDomainPictures from Pixabay ... Read more
Silviu Serdaru / May 07'2020
Which Drupal Page Builder Should You Use: The Gutenberg Editor or Cohesion DX8?
You want to enable your content editors to build new pages on their own. So, which drag and drop Drupal page builder do you choose? Let me try and guess what's on your "wishlist":   to be super easy to use, with an intuitive front-end editing interface to be light to be compatible with your Drupal theme to load fast to provide a decent collection of ready-to-use designs to be conveniently flexible   Have I guessed it right? Now, which of these 2 popular editors for Drupal 8 — Gutenberg Editor and Cohesion DX8 —  checks the most must-have features off your list? Let's compare them: 1. Introducing: Acquia Cohesion DX8 “The only low-code platform for the design, build and management of Drupal 8 websites.” (Drupal.org) A Drupal website builder that empowers you (your designers and content editors) to create all the visual aspects that make a website:   layout theme element styles templates components   And all that in the browser, via a highly visual drag-and-drop user interface... With no need to write CSS, PHP or HTML. Here's how it works:   Acquia Cohesion DX8 provides your editors with a library of branded (reusable) content components — sliders, tabbed elements, hero sections, banners, video players, feature panels they select, mix and match, and assemble together the blocks of their choice … and fill them in with content.   Tip: your non-technical editors can also edit, inline, those display components (block “templates”). And voila: A simplified way of building Drupal websites. A component-based approach to building a Drupal site. And during all this time, your development team can focus on building all those unique functionalities that you have in mind. 2. 5 Reasons Why You'd Want to Use Cohesion DX8 Now, let's talk... benefits. What are the main advantages of choosing Acquia Cohesion as your Drupal page builder?   2.1. Your content editors can assemble new page layouts quick and easy. And “quick” is the keyword here.  The non-developers in your marketing and other teams can assemble new web pages in no time: They just drag and drop and arange different components available in the library, making them fit into the design pattern that you've already defined for them.   2.2. Your marketers are free to edit content & layouts right on the page. Another strong benefit that you can reap from using this particular Drupal layout system is that your editors can easily modify content/layout right on the live website. In other words, Acquia Cohesion DX8 provides them with an easy to use in-context editor. This means that your content editors can open the page that they need to update and make any change in... seconds. Tip: you get to set different levels of permissions and keep track of who's updated what on the website.   2.3. Your content editors can build and manage your website with no coding skills needed. In other words, you'll turn your editors into... web designers. Source: Dri.es They need no coding skills, except for a low-level understanding of some general website concepts, to put together a new enterprise-grade Drupal website if needed.   2.4. You can replicate the newly created design on all your Drupal websites Why would you opt for this low-code site builder?  Because it enables you to export and reuse the same style configuration and web design across your entire ecosystem of websites. To sync your brand styles across your whole network. An easy way to control your brand across a multi-site structure.  And a guarantee that your non-developers, who are granted such “power”, will keep brand-compliant in their work.   2.5. Your non-technical teams can build uniquely designed and fully responsive websites The non-developers in your team (content editors, designers with little coding knowledge) can easily put together custom layouts using this drag and drop page builder for Drupal. Source: Acquia.com Moreover, Acquia Cohesion DX8 makes it easy for them to preview their newly created layouts in multiple device aspect ratios.   3. What You Can Expect from Using this Drupal Page Builder Let's say you've already found the answer to your “Gutenberg Editor vs Cohesion” dilemma: you've opted for Cohesion DX8. Here's what you'll notice:   your team sets up and launches brand new Drupal websites faster now the costs for developing new websites have lowered all the Drupal 7 to Drupal 8 website migrations have been streamlined keeping brand consistency across your multiple Drupal websites is no longer a challenge your digital marketing and content authors are more confident to experiment with new content (since updating and reverting changes is so straightforward) your senior developers gain more time to innovate; to focus on their own development tasks   4. What You Can Build with Cohesion DX  Let's see precisely what you can create using this page editor for Drupal:   full page content templates  master templates that your content editors can use to put together headers, navigation systems, footers... menu templates, from basic list menus to interactive, multi-level ones content components, which can then be assembled together into unique layouts CSS styles view templates for your blocks or page page content layouts   5. Introducing: Drupal Gutenberg       The Gutenberg Drupal 8 module comes as an alternative to the body field editor in Drupal: Editors can build a new page by assembling content blocks instead of writing text in a text body. Source: Drupalgutenberg.com A Drupal page builder that enables them to:   move blocks around the page, as needed reuse uniquely designed contrib blocks across multiple pages on your Drupal site and even across multiple projects select from the pre-built blocks — lists, paragraphs, tables — that Drupal Gutenberg provides them with insert raw HTML in the form field   When it comes to the “user-friendliness” factor, Drupal Gutenberg “bids on” a highly visual editing experience, just like Cohesion DX8 does: Any member of your team, regardless of his/her technical skills, can easily build a new page by putting together media, text, and content blocks.   6. 4 Reasons Why You'd Want to Use Drupal Gutenberg  “Why would I choose precisely Gutenberg as my page editor?” Here are some compelling answers:   6.1. You empower your editors to build new landing pages on their own. It's all about “democratizing publishing": Drupal Gutenberg enables them to add, move around, and edit blocks quick and easy.   6.2. Your editors get a whole collection of custom blocks to choose from That's right: Gutenberg Cloud library comes as a rich content repository for contributed blocks. From:   call to action sections to uniquely designed forms to web components   ... your content editors get a whole collection of blocks created by other developers to dig into when building new pages.   6.3. You grant your editors a flexible, visual editing experience.  One of Drupal Gutenberg's biggest selling points is its React-powered UI API. The JavaScript type of “fuel” that makes the editing experience both flexible and powerful:   a scalable, high performant editor that content creators can use with great ease; no technical background needed   Where do you add that they get “spoiled” with lots of pre-designed elements to choose from, as well.   6.4. You enable your editors to use and... reuse Drupal media assets. Gutenberg's conveniently integrated with Drupal's media library. This means that your marketing team can easily scan through and choose the media assets that they need to incorporate into their landing pages. And even re-use them as many times as needed.   7. What You Can Expect from Using this Particular Drupal Page Builder A more independent, empowered marketing department. Which automatically translates into a more productive development team, as well.   8. What You Can Build with Drupal Gutenberg “What are the most typical use cases for the Gutenberg editor?” you might ask yourself.   landing pages text-heavy content types (e.g. blog posts) designs that don't call for a lot of dynamic configurations  simple layouts content structures and designs that blend in perfectly with your theme's looks   9. Final Word  “So, which Drupal page builder should I choose: Drupal Gutenberg or Cohesion DX8?” It depends greatly on your feature needs and on your content team's skill level, as well. For instance: do you value the convenience of replicating the same designs on all your websites (Cohesion) more than... having an entire library of contrib content blocks to select from (Gutenberg)? Keep “confronting” the features of these 2 website builders and put them against your team's needs and experience, as well.   The END! How flexible is the authoring experience for your own team? Have you tried implemeting any of these page editors into your page building workflow? Feel free to share your experience, good or bad, in the comments below. Image by 200 Degrees from Pixabay   ... Read more
Silviu Serdaru / Apr 14'2020
Drupal Layout Builder vs Gutenberg: How Do You Know Which Page Builder’s Right for You? 
Drupal Layout Builder vs Gutenberg: which of these 2 next-generation site-building tools to use to create your page layouts?  Or, better said, to empower your content editors to design great-looking pages on their own.  In order to help you make an informed decision, I've made an honest “Layout Builder modules vs Gutenberg editor module” comparison.  Therefore, in this post you'll find your answers to the following questions:    What issues with the editing experience in Drupal do these 2 new page layout builders come to address? What is the Gutenberg Editor? What are Drupal Gutenberg's main strengths? What are its limitations? What is the Layout Builder for Drupal? What are the Drupal Layout Builder's main strengths? What are its weaknesses? When would you use one Drupal page builder over the other?    1. Drupal Layout Builder vs Gutenberg: What Limitations Do They Address?  Or, to put it this way: what makes a good content editing experience?  Here are some of the editors' main requirements:    to be easy to use (with an intuitive drag and drop interface) to enable them to create custom page layouts on the fly, with zero CSS or HTML knowledge to be ideally flexible, enabling them to adjust the pages to their needs    Now, if we put editors' requirements against the "reality" of the editing experience in Drupal, here are the limitations we can identify:    it doesn't provide a decent level of visual design it compromises branding for flexibility or the other way around it requires some HTML experience it doesn't go beyond the level of a basic WYSIWYG editor it doesn't allow them to design fully customed page layouts it doesn't provide a 100% intuitive user interface it still makes editors dependant on the site builders/Drupal developers in their teams And these are precisely the problems that these 2 Drupal page builders "promise" to solve.    2. Introducing: The Gutenberg Drupal 8 Module   The Gutenberg Editor module is no more than WordPress's layout system integrated with Drupal.  What sets it apart from the other tools for creating page layouts in Drupal?  Its block-based approach.  Creating content in Drupal becomes a matter of selecting and assembling multiple blocks.  Each block stands for an individual piece of content: a separate block for a button, another separate block for an image, another one for a column, for a heading...  Furthermore, you get to create content inline. To edit the media content, text, and blocks on the page that you're building.  In short, you can take the Drupal Gutenberg module as a convenient "block editor".  You (or your editors) can put together and visualize your page layout in one large form field. That, instead of editing every single form field that makes up a page.    3. 4 Reasons to Choose Drupal Gutenberg  Let's say that you're looking for a site building tool to build a... landing page (or one that would empower your content editors to create it).  Why would you go with the Gutenberg content editor for Drupal 8?  Here are 4 good reasons to choose it:    it provides you with lots of predesigned elements out of the box you can see what you're building on the editor side it doesn't require you to be experienced in working with CSS or HTML you can design your own blocks or use blocks created by other open-source developers    4. 6 Reasons Why You Might Hesitate to Choose Gutenberg  Any honest Drupal Layout Builder vs Gutenberg comparison must include the 2 tools' main weaknesses, as well, right?  So, here's why you may want to think twice before choosing the Gutenberg content editor in Drupal 8:    the way it stores data could be... better it doesn't excel when it comes to layout flexibility: you can align your blocks left, right, center, but you can't add custom margins, for instance the style options that it provides are quite limited, one of the main drawbacks highlighted in any Gutenberg vs page builder comparison updating a page created with Gutenberg is particularly overwhelming the visual editing experience is not one of the best ones: visualizing your layout is a bit more difficult you cannot reuse your Gutenberg blocks and the page layouts that you create with this editor    Tip: when it comes to the poor visual experience that you get with the Gutenberg Editor, you can always improve it with page builder plugins. There are some pretty good ones out there that guarantee you a 100% visual design.   5. Introducing: The Drupal Layout Builder Module (Core) "Drupal 8's Layout Builder allows content editors and site builders to easily and quickly create visual layouts for displaying content. Users can customize how content is arranged on a single page, or across types of content, or even create custom landing pages with an easy to use drag-and-drop interface." (source: Drupal.org) The Layout Builder for Drupal enables you to create layouts by putting together separate form fields and block entities. No coding know-how needed.  No need to tweak the templates in the theme's source code.  In short, it "spoils" you with a drag-and-drop type of visual editing experience. You can put together structured content quick and easy.  Source: Drupal.org "But how exactly does it work?"  Here's how you create a custom layout with this Drupal page builder in 5 quick steps:  enable the module go over to the "Manage Display" tab of your target content type click the "Use Layout Builder" checkbox click the "Manage Layout" button then, you're free to use your Layouts and Blocks (after you've created them), dropping them in the defined regions of the page that you're building    6. 7 Reasons to Choose the Layout Builder in Drupal 8  Here's a legitimate question that this Gutenberg Editor vs Layout Builder in Drupal 8 comparison should respond to:  “Why would I want to use Drupal Layout Builder?”  The best answers would be:    you can create your content blocks and just drop them on the regions of your page layout you get to (re)arrange otherwise static fields the way you want to you're free to add views, blocks, widgets, to any section of your page the content that you create is specific to that page type, so all the pages of that type will have the same layout you get to override the default layout to create fully customed pages your layout is rendered on the web page in real-time you're free to incorporate blocks in the main content region 7. 5 Reasons Why You Might Hesitate to Choose the Layout Builder  When comparing Drupal Layout Builder vs Gutenberg, you inevitably get to the point where you ask yourself:  "What are the Layout Builder's main weaknesses?"  Now, here's why you wouldn't want to jump on it right away:    you can use it only on the main content area of your page unlike the Gutenberg Drupal 8 module, the Layout Builder doesn't ship with prebuilt elements for you to just choose from and assemble with Drupal Layout Builder, you need to create your blocks and page type first; you can't "get away with" choosing user-contributed blocks it's not always easy to see what precisely gets overridden you can't rely on a granular permissions system for overriding individual pages    8. When to Use Drupal Gutenberg: 4 Typical Use Cases  You'd want to use the Gutenberg Drupal 8 module if:    your Drupal website's a content-packed one you need to build a landing page you need to create a simple layout: Gutenberg doesn't really shine when it comes to style options you need to create content that fits perfectly into your theme's looks: Drupal Gutenberg pulls right from your theme's styles    To sum up, designing landing pages are Gutenberg's most typical use case.  Use it to add just some extra design (nothing too "extravagant") to an "About Me" page, for instance.   9. When to Use the Drupal Layout Builder: 2 Typical Use Cases  You'd want to use the Layout Builder for Drupal if:    it's a field-intensive page that you're building: a product page, a case study, etc. you have synced content on that page (from Salesforce, for instance)   The END!  Your turn now: have you tried any of these Drupal page builders?  Which one best serves your content goals?  What other pros and cons would you have added to this Drupal Layout Builder vs Gutenberg comparison?  Let us know in the comments below.  Photo by Jason Dent on Unsplash  ... Read more
Silviu Serdaru / Mar 25'2020
What Are the 10 Rules of Good UI Design? What Is Good UI/UX Design?
In this post, I'll share with you the top 10 rules of good UI design. You will be learning:   What are the essential elements of a good UI design What are the most common UI/UX mistakes that designers make What are the UI best practices in 2020 Lots more UI design tips   Now, let's get started.   1. Aim at an Almost Invisible User Interface  What is a good UI design? A logical structure & necessary visual elements only. In other words, in order to design an almost invisible user interface you need to:   be “merciless” and keep the essential elements only base your UI on a well-thought-out structure use clear language in your text messages and on your labels   Source: Medium.com A poorly structured and cluttered UI would only make the user ask questions like: “Where's the main menu?”   2. Keep It Consistent And this is one of those good UI design principles that's overlooked or undermined most often. Consistency should span over the entire ecosystem of elements that make up a UI design: fonts, colors, menus, buttons, icons. Keeping a consistent UI throughout your website translates into creating patterns aimed at enhancing efficiency. At improving the user experience. And here I'm referring to layout, design, language patterns. Once the user gets familiar with a given pattern, it will be easier for him/her to interact with other parts of your website that present the same pattern.   3. Be Purposeful with Page Layout One of the fundamental rules of good UI design is to structure your pages based on importance. In this respect, here are the crucial principles of user interface design to guide your page layout creation:   take into account the spacial relationships between various elements on the page place your UI elements strategically: draw users' attention to the most important information on the page and make it easy for them to scan it through  keep in mind that “form follows function”: design each item in accordance to its function (no need to reinvent the wheel and to turn the hamburger menu into a... sandwich menu, for instance) stay away from clutter, at all cost: keep the visual elements on the page to a minimum make smart use of headings, group similar elements together, add numbered items, as well, all in the name of readability    IMAGE Image by 200 Degrees from Pixabay     4. Use Color and Texture Strategically Make smart use of color, texture, contrast, and light to direct the user's attention to key elements and important information on the screen.   5. Use Familiar UI Elements: One of the Key Rules of Good UI Design One of the UI best practices that's both:   the easiest to implement the most underestimated   And it all comes down to intuitive design. To sticking to common elements when creating your user interface.  Again, the hamburger menu makes the best example: once spotted, the user knows what it is and how to open it. Restrain yourself from showing off your creativity as a web designer. From being "discouragingly" innovative. Form should follow function, remember? Instead of impressing your users, you should help them get things done quickly and easily. That's what delivering a good user experience is all about, after all.   6. Put the User in Control of the UI Instilling a sense of control in the user is one of the most powerful UI design principles. Source: xd.adobe.com In this respect, here are some specific measures that you can implement:   6.1. Provide enough context  Ensure that the user knows, at each stage of his journey on your website, where he is, where he's been, and where he could go next. Tip: place visual cues to help the user develop a sense of mastery and control.   6.2. Be transparent about the system status Another one of those golden rules of good UI design: Let the user know, at all times, what's the status of the process that he's initiated. For instance, he/she might have started an action that requires some time for the computer to carry out. In this case, make sure you provide feedback, at regular intervals, about the system status, about what's going on.   6.3. Make actions reversible In other words, allow users to:   unselect undo their last actions restart whatever processes that they've engaged in   6.4. Design your UI with all user skill levels in mind And this is one of the most obvious characteristics of a good UI design. It's an easy to use interface for both casual and expert-level users.   6.5. Provide feedback on every user action It's more than a good UI best practice: it's a matter of... good manners to provide at least some sort of feedback at each point of action. Therefore, make sure your system delivers a meaningful reaction each time a user:   clicks on a menu hits a button clicks on a text message tab   Let the user know, using specific UI elements — animations, progress bars, pop-up windows, color change — whether he's successfully carried out the action or not.   7. Minimize Cognitive Load: Recognition over Recall “Task-relevant information only” should be one of your key rules of good UI design. And sticking to a limited number of elements within the display aligns with the very limits that the human attention, itself, imposes. In this respect, it's human nature that your users prefer to recognize information across a sequence of screens rather than to strive and recall it from their memory. For instance, our cognitive load is always lighter when we're challenged to answer multiple-choice questions compared to having to tackle short answer questions.   8. Stick to One Primary Action per Screen And here, we go back to the “visual declutter” principle again: Make sure that each screen supports just one single main action. Squeezing too much information on the same screen and requesting the user to carry out more than one primary action will just:   confuse him/her distract him lead to attention overload  9. Use Typography to Create Visual Hierarchy Most likely one of the easiest to follow rules of good UI design. Strategically use different font sizes and display text to enhance:   readability scanability legibility   Photo by Alice Donovan Rouse on Unsplash    10. Stick to a Small Number of Gestures Gesturing, swiping, tapping, pressing... no need to “squeeze” all these user actions into your app. Keep them to a minimum. Tip: Facebook and WhatsApp make some good UI design examples; their interfaces require a limited number of user gestures. Pro tip: make sure it's crystal clear to your users what gestures they need to perform in order to carry out certain actions on your interface. Source: Medium.com     The END! Now, I'm really curious to hear/read your thoughts:  How does your own list of must-follow rules of good UI design look like? Have I overlooked any key best practices? Let me know in the comments below. Image by FiveFlowersForFamilyFirst from Pixabay   ... Read more
Silviu Serdaru / Mar 17'2020