LATEST FROM OUR BLOG

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

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? Are flexibility and freedom of customization more important for you than simplicity and an intuitive interface? Contact our team of Magento 2 experts in Toronto or leverage our Magento web design services in Vancouver to drive outstanding development outcomes. Image by 200 Degrees from Pixabay ... Read more
Silviu Serdaru / May 10'2019
What Are the Best Popup Plugins for WordPress in 2019? Top 5
Disliked by users, controversial, yet a constant presence on WordPress websites and a holy grail of high conversion rates if leveraged in the right context... But how do you know which of the best popup plugins for Wordpress is the perfect match for your own use case? Well, you first identify your expectations in pop-ups. What exactly are you looking for in a popup plugin?   out-of-the-box responsiveness? a handful of highly customizable templates and design features to choose from? smooth integration with the software that you're currently using on your WordPress website? a dead easy to use, drag-and-drop popup builder? page selection and trigger option features? that it should be conveniently lightweight and fast? real-time analytics? advanced targeting options? A/B testing functionality?   Once you've articulated your needs, start digging into this shortlist of 5 best rated Wordpress popup plugins in 2019:   1. Ninja Popups     If you're looking for one of the best popup plugins for WordPress that should:   provide you with a solid, yet conveniently lightweight drag-and-drop-builder  … one that enables you to easily set up and fine-tune your popups in the slightest detail (even if you have zero coding experience) ship with tons of features to choose from allow you to either create your custom popup from scratch or to choose out of a large collection of built-in popup themes   … then Ninja Popups is the plugin that meets all your specific requirements. It's powerful, loaded with advanced features and flexible enough to empower you to customize your popup till it perfectly fits your needs. You even get to select the color and size of your popup. Other key features:   A/B testing responsive highly flexible enhanced customization a data-rich analytics page +74 animation options +73 pre-built themes an easy to use visual builder   Note: if lots of customization power is too overwhelming for you, you can always opt for its more lightweight builder and simply place your text inside one of its pre-made templates... 2. Elementor Pro     Elemenentor Pro makes another great option if the popup that you want to create is more complex than... an email opt-in, for example. Just like the Ninja Popups plugin, this one, too, allows you to build both:   popups from scratch, from a... blank slate, that you're free to custom-tune to your exact needs popups on top of one of its already pre-made templates (and it ships with +100 of popup templates...)   Full control over your popup and unmatched flexibility, thanks to all its robust features, from which its trigger/targeting options help it stand out. For example, you get to configure it so that it triggers your popup:   after a defined number of sessions after a defined number of page views based on scrolling, exit intent, clicks, inactivity, page loading   Furthermore, you to target specific content on your WordPress website where your popup should get triggered:   specific blog posts specific post formats and types certain authors, tags, categories specific devices user logged-in status   Also, the types of popups that you get to build with Elementor Pro range from:   modal forms to full-screen overlays to top/bottom notification bars to slide-ins   And the list of options doesn't end here. It's not for no reason that this is one of the best popup plugins for WordPress. It provides you with an extensive range of styling options and widgets to include in your popup:   registration forms buttons contact forms countdown timers   Notes:   it integrates seamlessly with WooCommerce you can configure it so that it triggers your popup for non-logged-in users only its most notable limitation is analytics: it doesn't provide you with A/B testing functionality and built-in analytics tools   3. OptinMonster, One of the Best Popup Plugins for WordPress      “Flexibility at its best” must be the most accurate definition for this popup builder:   it provides you with an extensive range of targeting and triggering rules … an easy-to-use, drag-and-drop editor … loads of functionality to scan through and to choose from   Like the other WordPress popup plugins on this list, it enables you to either build your popup from the ground up or to tap into one of the pre-built templates... Powerful trigger features   exit-intent triggers; and this functionality is its "specialty": it tracks and analyzes your website visitors' browsing behaviors to determine when they're most likely to leave a specific page so that it triggers the popup user inactivity time click (two-step opt-ins)   Advanced targetting features   you can adapt your offers based on whether the targeted user has already converted on one/some of your popups or not; no need to "bug" one of your website visitors with an email opt-in if he/she has already signed in to your list... you can target your popups by cookie, adblock usage, referrer, page, new vs returning visitors, device   Moreover, its easy to use builder, loaded with tones of advanced features, allows you to create other campaigns, as well, not just popups:   footer bars  in-line forms floating headers scroll triggered boxes welcome gates slide-in forms   Other "tempting" features:   A/B testing widgets that you can select from to put together your popup you even get to configure your popups to be triggered at specific times it "plays well" with your email marketing software   4. Bloom       It's with the visually-appealing interface that Bloom manages to set itself apart from the other 4 best popup plugins for WordPress here. But also with the lack of some key features:   it doesn't ship with a popup builder, so you can't use it to create popups from scratch it's designed precisely for email opt-ins it doesn't provide an exit-intent trigger option it offers fewer targetting features compared to the other WordPress plugins listed here   Nevertheless, you can still choose from over 100 pre-built templates and customize the:   text borders and edges colors form details animations images    Also, since I've mentioned that email opt-ins are its specialty, here are the 6 ways that you can display them when using Bloom:   as inline opt-in forms as widger area forms as automatic popups as required opt-in for content unlock (you can restrict access to premium content on your website, thus encouraging users to opt-in first...) as automatic fly-ins as below content forms   Its most “luring” features:   a great-looking dashboard it allows you to set up view analytics A/B testing some unique trigger options (that I'll talk about in a bit)   Trigger features:   scroll depth inactivity time after purchasing triggers: you can display a popup as soon as the user has completed the checkout process after commenting triggers: you can display a popup after one of your website visitors has submitted a comment   Content targeting features:   by specific posts  by post types by post categories 5. ConvertPlus     Another great choice if you're more into tweaking pre-built templates rather than building popups from scratch. And we're talking about +100 templates to “delve” into. Once you've selected the perfect one for your popup, feel free to leverage the real-time customizer to tweak its:   colors animations form field/labels text   Not really fond of the idea of merely customizing a pre-made template? Then you can always upgrade to Convert Pro and get your drag-and-drop builder... Now, here are some of the types of popup forms that you can create using ConvertPlus:   email opt-ins sidebar widgets notification bars full-screen popups slide-ins top/bottom bar information sticky boxes   Key trigger options:   exit-intent user inactivity time scroll depth launch after content (triggering the popup only after the user has reached the end of the content in question) click (for two-step popups)   Finally, ConvertPlus includes detailed targeting/trigger options, as well as built-in A/B testing and analytics to help you optimize your popups. Main targeting options:   logged-in users referrer detection (you can build popups specifically for visitors coming from a partnering website) device page level targeting new vs returning visitors   Other robust features:   +700 fonts to select from custom CSS, background settings, animations real-time analytics it integrates seamlessly with Zapier, WooCommerce, Contact Form 7, WP Registration Form   The END! These are the 5 best popup plugins for WordPress in 2019. Those that:   ship with tons of powerful trigger/targeting options grant you full control over the look and feel of your popup   Image by OpenClipart-Vectors from Pixabay   ... Read more
Adriana Cacoveanu / May 01'2019
Drupal 8 Contact Forms vs Webform: Choosing Between Drupal Most Popular Form Builders
Simple or custom-made? Is it a quick-to-assemble, rather “prototypical” form that you need for your website? Or a more complex, custom-made one? In a Drupal 8 Contact Forms vs Webform “debate”, which Drupal form builder best suits your data collection requirements? On one hand, you have the convenience of creating your web forms in no time: simple, straightforward, “conventional” web forms. On the other hand, you get to scan through a never-ending list of advanced options and come up with a complex, fully custom-made web form. That, of course, if you don't mind the time you need to invest in going through all those different form elements and available features and the risk of getting... overwhelmed by tons of field customization options. Ease of use vs unlimited capabilities... The convenience of getting your forms up and ready to collect user data in no time vs the chance to tailor some more advanced forms, ideally customized, carrying lots of different field values. Decisions, decision... Now, to help you decide, here's a more detailed Drupal 8 Contact Forms vs Webform comparison. Weigh each one of the 2 form modules' benefits and drawbacks, set them against your own needs and... make the choice: 1. The Contact Forms Module  Being part of Drupal core, there's no need to download and install the module. Just go to Structure>Contact forms. Next, choose either to opt for the default form or to set up a new one: click the “Add contact form” button. Once in the form creation screen, enter your form's values in the predefined fields that you have there:   give the form a name in the “Label” field enter the email address where all the form submissions will be sent to (most probably your site admin address) in the “Recipients” field enter your “Thank you” text in the “Message” field there; this will be the “thank you” text line your users will see once they hit the “submit/send” button  in the “Redirect path”, enter the URL to the page that you want them to get forwarded to after they've submitted the forms (that if you don't want them to be redirected back to the homepage, by default) click “Save” and there you have it: a simple form, with all the basic, must-have field values, added to in no time   Of course, that doesn't mean that you can't further explore the given features and maybe add a few more fields and even styling options. For instance, you could “Edit” your newly created form. Just select it in the “Contact Forms” screen and, scrolling down the options in the drop-down menu opening up, click the “Manage fields” option. Click “Add field”, then “select a field type” – Text(plain), let's say – enter the “Label” and configure its settings. Furthermore, if you want to style your form a bit, hit the “Manage form display” tab and... opt for a placeholder, for example. Next, explore the options available in the “Manage display” screen. For instance, you get to decide if you want your field label to be hidden, inline or visually hidden... In short: in a Drupal 8 Contact Forms vs Webform comparison, the first form builder will always outshine the latter when it comes to ease of use. It empowers you to set up a simple form quick and easy...   2. The Webform Module Now, if Contact Forms is a rather minimalist form builder, the Webform module is a feature-rich, powerful one. The customization features that it ships with go from email notifications to fine-grained access, from statistic collection of data to delivering results in a CSV format. From exporting data in various formats to... conditional sorting and filtering. In other words, with Webform sky is the limit when it comes to the contact form that you can create. It can go from a basic one to a highly complex, multi-page form. One made of lots of elements, advanced options for the user to select from, settings and features for you to leverage in the back-end... But, let's keep in mind that it's a contributed module, so you'll first need to download it from Drupal.org. Next, go to “Structure” and hit the “Webforms” tab. Then, click the “Add webform” button and, in the next screen popping up, give your new form a name (enter it in the “Title” field). You'll be automatically forwarded to the “Build” tab, which is where all the “magic happens”. Once you click the “Add element” button, you'll get to “swim through” a sea of lots and lots... and lots of form elements (known as “fields” in Contact forms) to choose from. Ranging from basic to really advanced ones... Let's assume that you'll want to add a “Text field” element. Click the “Add Element” button corresponding it, then scan through all the new customization options listed up in the “Add Text field element” screen opening up next... Feel free to add other elements to your webform: a “text area” maybe, an “email” element, as well...  Note: do keep in mind that, once you've settled for the final fields/elements to be included in your web form, you can always change the order to get them displayed in. Just drag and drop them till they fit that predefined order in your mind... Also, you can check/mark them as “Required” and turn them into “must fill in" fields, as opposed to optional form fields. Note: feel free to edit that “Thank you” page that your webform will automatically forward users to. How? By clicking “Back to form”>"Settings”>"Confirmation” and selecting from the different options that you have there:   enter your own Confirmation title (e.g. “Thank you!”) customize your Confirmation message   3. Drupal 8 Contact Forms vs Webform: Key Differences Now that we've run our spotlight over each one of these 2 form building tools, let's make an inventory of the differences that we've identified:   first of all, it's obvious that the Webform module gives you more control over your web forms' design   also, unlike Contact Forms, it supports conditional emails; you get to send an email to a specific user in your list based on conditions associated with the value of certain elements in your form   Webform enables you to add basic logic to your web forms   … it comes packed with tons of advanced options, ranging from JS effects to conditional logic, to submission handling, etc.   Contact Forms, on the other hand, allows you to set up a simple contact form in the blink of an eye; you skip the tedious process of scanning through lots and lots of options, settings, and complex features   Webform allows you to create your forms either in a YAML file or in its the admin-friendly UI   also, Webform comes as a “cluster” of submodules – Webform REST, Honeypot, Webform Views, SMTP, Webform Encrypt, etc. – which are “responsible for” its multiple capabilities   4. In Conclusion... The conclusion of this Drupal 8 Contact Forms vs Webform “debate” is quite simple:  If you need a basic form on your website and you need it built fast, go with Contact Forms. Being included in Drupal 8 adds convenience... But if you want to customize your form (and you have the time), to style it to your liking and “turbocharge” it with advanced features and options, go with Webform.   It's a much more powerful and feature-rich form builder, perfectly suited for your complex requirements... Image by Tumisu from Pixabay ... Read more
Adrian Ababei / Apr 24'2019
What Are the Key Benefits of Using Kubernetes? Why Would You Use It? How Is It Different (Better)?
How is Kubernetes any better than... standard virtual servers? What are those unquestionable benefits of using Kubernetes? What are its features, first of all?  And what are... containers? What specific needs does a container orchestration tool come to address? In this respect, why would you use Kubernetes over... Docker, for instance?  Let's dig up its unique features and most compelling benefits:   1. But First: What Are Containers More Precisely? Before we (even) attempt at defining Kubernetes we need to... define containers, right? They're (mini) virtual machines that deploy ready-to-run applications on other virtual machines (or host OS)... The conveniences they provide?   they're smaller, lighter (considering that apps usually need just the bare essential in terms of operating systems to run on) they streamline app deployment they're the guarantee that those virtual machines are used at their full capacity  they can be run just like any VM template: with no configuration (or hardly any)   Note: you can find tons of preconfigured Docker images in Dockerhub. The bundles of convenience come from the fact that you're free to scan through and download the needed nginx as well as complex items without worrying about configuring them. Other developers have invested their time and knowledge to set up all the due software configurations for you... 2. What Is Kubernetes in Simple Words?  Going back to containers, we're faced with a specific need: that of keeping a close track of them. How do you monitor your virtual machines? How do you identify, let's say, those that keep running pointlessly? Without doing... anything in fact?  Also, by keeping track of your current containers, you'd be able to easily spin up a few more when you need more CPU, storage or memory... This is where a cluster container orchestration tool comes in handy. A tool like... Kubernetes. What it does, precisely, is to streamline the whole process of managing your containers, enabling you to leverage their full potential. In short, by using Kubernetes you can easily deploy your containers to clusters (“ecosystems” of virtual machines). You get just one interface that you can use for deploying your containers to:   virtual machines physical machines multiple types of clouds...   And where do you add that it's designed to manage a wide range of container types. Not just Docker containers. Note: Google, its creator, has been using it for 10 years. Now, just try to imagine all their heavy systems running on this particular container management tool! They must have “stuck” to Kubernetes for a good reason... Luckily for us, Kubernetes joined the “club” of the open source technologies 2 years ago. Furthermore, it's now a managed service on Azure and Google Cloud, as well.   3. Why Should You Care? 7 Key Benefits of Using Kubernetes Why would you use Kubernetes? The long-term payoffs must to be more than “tempting”, considering that the learning curve is quite steep. And they are... Here, I've selected the 7 best possible answers to your “Why should I use Kubernetes?” question:   3.1. It works smoothly with Node apps Which means that you get to run any type of application with it.   3.2. It reduces and simplifies... 2 of the main benefits of using Kubernetes is that:   it cuts down cloud computing costs it simplifies operations and trims down your container architecture...   3.3. It helps you get the most of your hardware resources And here I'm referring to network bandwidth, memory, storage I/O...  How does it help you maximize the way you use them?   it helps you automate the whole process of updating your cluster (and respectively rolling back those updates, when necessary) it bundles together, on the very same hardware, all those apps that use minimal resources  it places those applications "in need for" more resources on systems that can better cope with their “needs”   In short: Kubernetes will optimize the use of hardware resources.   3.4. It's easy to use Compared to other container management engines and despite its high learning curve.    3.5. It speeds up the development process This is another one of the undeniable benefits of using Kubernetes. How precisely does it boost the development cycle?   it runs all the needed updates it performs automated deployments, operations across multiple clusters of hosts, scaling... it manages all your apps and services included in your infrastructure with minimum downtime   3.6. It ships with a self-healing mechanism From re-scheduling to auto-restarting, to replicating containers, Kubernetes' self-healing system is one of its strongest points. Basically, it lifts the time-consuming burden of keeping your app up to date and perfectly adapted to users' latest expectations. It will restart services when trouble strikes: it will address all the “health issues” that might occur and get your app automatically “cured”.   3.7. You Can Run Your App in Both Hybrid and Multi-Cloud Environments           Just imagine: Kubernetes enables you to leverage features specific to multiple individual clouds.  Basically, you're free to run your Kubernetes application in any cloud or “combo” of public or private clouds.  Using its own set of primitives — federation — it's designed to synchronize multiple clusters, placed across different clouds and regions...   4. When Is Kuberentes the Best Choice? First of all, Kubernetes makes a great choice when it's a highly available distributed system that you have in mind. Secondly, choose it when the convenience of using the same CLI for orchestrating all your different systems is of particular importance to you. Just think: is it crucial for you to have just one CLI for pushing your containers to various different clouds (the Amazon cloud here included), to your physical and in-house machines...? The END! Are these 7 answers on the benefits of using Kubernetes convincing enough for you? Image by RSunset from Pixabay  ... Read more
RADU SIMILEANU / Apr 19'2019
What Makes the End-User Experience in Drupal 8 Stand Out?
What makes Drupal a great choice from a UX standpoint? What features are responsible for the enhanced end-user experience in Drupal 8? Those features that enable you to easily create an intuitive and enjoyable visitor experience on your own Drupal-based website/application. And to constantly improve it... Is it all those performance enhancements that it ships with? Or maybe its “responsive out-of-the-box” nature? Or rather its multilingual capabilities?   1. But First: 7 Evergreen Ways to Improve Your Website's UX It goes without saying that, in order to create an enjoyable, rich user experience on your Drupal 8 website, you'll need to:   put together a solid UX strategy run extensive user research and map the user's journey come up with an effective, well-planned UX design, paying attention to all the latest design trends (and now decoupled Drupal empowers you to tap into a whole range of new possibilities...)   And while carrying out all these phases of the UX design process, make sure to apply the following evergreen techniques for enhancing the visitor's experience.   1.1. Optimize the page loading time For speed will always be the factor with the biggest influence on the user's experience on your Drupal site. In this respect, there are tons of performance enhancements that you can implement, ranging from aggregating your JS and CSS files to properly configuring your cache to opting for a CDN, to...   1.2. Use bullets to structure your text Bulleted lists are the “holy grail” of neatly structured, easy to read content. For, in vain you invest time and effort in providing content that delivers real value to your website's visitors if you display it as an... “impenetrable” block of text. In this respect, bullets help you break down the information. The result: users will see the key product or service benefits/will go through all of the presented features a lot quicker.   1.3. Use white space strategically Speaking of easy to read content: there's no better way to enhance readability and to draw attention to specific elements on a page than... by using the white space itself. It will automatically direct their attention to the text/image emphasized by all the white space surrounding it.   1.4. UX design is consistent design From color palette to button styles, from the size of the headings in your text to the chosen font, from the used photos to various design elements... keep consistency across all the pages on your Drupal website. Otherwise, you risk to confuse and to eventually... tire its visitors.   1.5. Go for visible, attractive CTAs Always use action words for your calls to action and make sure they're easily recognizable. CTAs play a crucial role in setting up an intuitive, efficient navigation structure on your website...   1.6. Use images wisely As images are always well-deserved “breaks” for the eye, especially when it's a long text that it's challenged to go through. And yet, if you fail in using the relevant images, those that perfectly team up with your text... the user experience that you'll deliver will be anything but compelling...   1.7. Make your headings a high priority  Remember to write your headings around some of the main keywords. Also, strategically design them so that they're highly visible and help users to quickly scan through the content.   2. 4 Features Responsible for the Superior End-User Experience in Drupal 8 Gluing together all the design best practices that make a great user experience does call for a flexible and dynamic web platform. Drupal 8 is that platform. It comes packed with powerful features that make it easy for you to create the best visitor experience on your website. Here are the ones with a huge influence on your website's UX:   2.1. Drupal 8 is responsive right out-of-the-box And responsiveness, along with top page loading speed, still is one of those factors with a great influence on visitors' experience with your Drupal website. With:   all the available base themes now being responsive the convenience of adapting your images to various screen sizes right from their display properties   … creating a compelling end-user experience in Drupal 8 is dead-simple. 2.2. Enhanced performance From a performance standpoint, Dries Buytaert's post on Drupal 8's performance optimizations is still one of the most relevant sources. If Drupal was already built to “inject” enterprise-level performance into static pages, Drupal 8, with all its caching enhancements, is designed to speed up dynamic web pages, as well... 2.3. Multilingual capabilities Remember the user experience's main facets, ranging from useful to findable, to valuable, to credible to... accessible? Well, Drupal 8 provides you with multilingual capabilities right out of the box. You get to translate your website's UI, content, configuration, etc. Meaning that, with this multilingual system at hand, you can easily create an accessible user experience on your website. 2.4. Content personalization (by segment, login time, device, language...) In this respect, the Aqua Lift Connector module is your most reliable tool. What it does is bring together customer data and content, so that you can deliver targeted content experiences across multiple channels and devices.   The END! And these are those robust features that stand behind the superior end-user experience in Drupal 8. The very reasons why this platform, and particularly this version of Drupal, makes your best ally in creating the most compelling UX on your website. Photo by Lucian Novosel on Unsplash ... Read more
Adriana Cacoveanu / Apr 17'2019
What Are the Key Factors Influencing the Mobile App Development Cost? Top 9
What's the rough cost of an application? What goes into its price more precisely? What are those heavy weight factors that influence and end up determining the mobile app development cost? Is it the (custom) features and app-specific functionality that you need to get implemented into your app? Or maybe the app development company itself? The chosen platform, the post updates, the number of screens or maybe the API development and integration? Or rather all of these elements, plus a few more? Here's a breakdown of the key aspects which, all put together, will decide your mobile app's price tag:   1. The Mobile App Development Platform Itself As it “dictates” the operating system that your app will run on: Windows OS, Android OS, iOS OS, Blackberry OS. And, therefore, it heavily influences the cost of the mobile app development process itself. What type of mobile application do you have in mind? Who's going to be its target audience? These are but 2 of the crucial questions whose answers will determine your choice of app platform.  Note: do keep in mind that it's your mobile app development platform of choice that will determine the version of the OS system, as well. With Android, your available options go from Jelly Bean to Nougat, from KitKat to Marshmallow and Lollipop. Whereas with iOS you'll get to choose between version 9, 10 and 11.   2. The Features You Need Will Strongly Influence the Mobile App Development Cost How does your list of “must-have” features look like? And what about your... “nice to have” one? Do your expectations in terms of app functionality go from:   push notifications to geolocation to in-app purchases to streaming to user login to offline mode to media content (smileys, emoticons, editing functionality here included) to Google maps integration to instant messaging?   Well then, do keep in mind that every feature on your wishlist is going to get reflected on the bill. You might want to trim it down a bit. But if you've decided to stick to your feature requirements, make sure they're perfectly:   adapted to your target audience's expectations suited for your specific type of mobile app   3. The Contracted Team of Mobile App Developers Itself And it's not just the proven expertise and experience of the team members that will influence the mobile app development cost, but their... number, as well. A “standard” app development team would include:   UX or/and UI designer(s) QA engineer project manager in-house mobile app developer(s)   Plus a back-end developer, depending on your specific requirements (whether you'll need an API developed, as well, or not). An extended team could include also 1 system administrator, plus more people for each one of the above-mentioned roles.  A larger team translates into higher costs, right? Yet, a too small team might also reflect in the longer time spent working on your app project. And time is... money. In short, when evaluating the potential candidates, try to balance your budget and those teams' level of proficiency. Your specific feature requirements and their provable experience in implementing them. For, a badly integrated functionality could be cheaper now, yet get quite expensive on a long term...   4. Your Specific Back-End & API Development Needs Do you need an API? A scalable and powerful back-end for your app's content and data? And would a basic cloud-based server suit your needs or do you need a middleware layer developed, as well?  Start analyzing all these variables and knowingly make your choices: all back-end and API requirements will finally bubble up to the mobile app development cost estimate...   5. Your Post-Development Updates & Maintenance Requirements Just think of every user as of a new potential “risk”. One that could unknowingly inject all types of bugs and threats into your future app. How will you get these risks under control? By:   implementing a continuous maintenance process running regular updates on your mobile app   And having a dedicated team at your service to keep your application “sanitized” and properly updated does come with a price tag on... One that will influence your mobile app development cost.   6. The Copyright and App Licensing Options Just imagine: you've waited from 3 up to 6 months for your app to be ready, with all the “valuable” features and custom functionalities “baked in”. Then, after another few months, key elements from it get copied. To avoid such a scenario, there's another aspect (and cost) to consider: applying for copyright.  You'll need to invest in an app license, that will protect your mobile application from getting copied.    7. The Number of Screens to Be Incorporated into Your App How many screens have you planned for your future mobile app? The answer to this question is highly influenced by the “palette” of features that you want to get incorporated into your app. The more of them, the more screens will need to be implemented... And the higher the price will be, obviously. Your app development team's invested resources of time and effort will be proportional to the number of screens you'll request from them.  In short: be 100% certain that each and every feature that you wish to have implemented in your app is relevant and it adds value. No need to overcrowd your app with lots of screens crammed with non-essential features.   8. Native or Hybrid Mobile App? What Will It Be? And each type of mobile app comes with its own advantages and disadvantages:   native mobile apps stand out in terms of performance and come bundled with a wide range of functionalities; yet, do expect a high mobile app development cost (and a longer development cycle, as well) hybrid mobile apps get developed and running in no time, across multiple platforms, so they're much more cost-effective; yet, they do not “rock” in terms of performance, nor do they live up to the same UX standards as the native ones   The choice depends entirely on your own priorities: outstanding performance & a full range of functionalities vs versatility & lower costs... Note: needless to add that there are other aspects related to your app-specific type — basic functionality app, app depending on the device's hardware, data-driven app — that will influence its development cost.   9. The Security Features to Be Implemented And you need to give this aspect its due consideration. With payment gateways integrated into your future app and loads of confidential user data being handled there, you can't afford to underrate the security aspect. It goes without saying that the mobile app development cost will get influenced by the specific security features that you'll integrate.   Final Word  Identify your needs before even attempting to estimate the mobile app development cost. And, most importantly: set them apart from your... wishes. It's only after you've put together your own list of requirements, project-specific constraints, and preferences that you can arrive at an accurate estimate. Image by krzysztof-m from Pixabay ... Read more
Adriana Cacoveanu / Apr 10'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
What Are Some Compelling Use Cases for WebAssembly? Top 6
Isn't it ironic? On one hand, you've kept hearing/reading have all this talk about WebAssembly and what a game changer for the web it is. Yet, on the other hand, few developers are actually leveraging it in their projects? There's all this hype around the new way of assembling code in any language and running it right in the web browser, yet everyone's still a bit hesitant about using it. Are there any truly compelling use cases for WebAssembly? Why would you use it? What are its primary use cases? For now, what you do know are its “selling points”, that everyone's blowing the trumpet about:   it enables you to build reliable, dynamic, faster websites it's now shipping in all major browsers it enables you to write your piece of software once and then have it run on... every platform with a browser it's a “revival” of the smart client software development On the other hand: it's still a “steamy fresh” technology and people are half-hearted about using it.  And where do you add that it requires a huge shift in mentality, as well: using the browser for tasks that developers are used to performing in the back-end.  Now, let's shed some light here and bring forward the most compelling use cases for WebAssembly:   1. Writing Faster Code               And writing “almost fast as native code for web browsers” has been one of developers' ever-present goal.  Well, yes: WebAssembly does enable you to write faster code. And yes, it is faster than JavaScript, “showing off” its performance-oriented side particularly when it comes to performing highly computational tasks. Those kinds of operations where lots of numbers and memory strain are involved. Notes:   Do keep in mind that being able to write faster code to be run with ES6 doesn't mean that WebAssembly will replace JavaScript. It's designed to cohabit with it, not to be the “cause of its death”. benchmarks have shown WebAssembly to be 10% slower than C code. Still, many consider it as a too little compromise for all the flexibility and portability they get in return.   2. Client-Side Compression: One of the Primary Use Cases for WebAssembly Just think of the tones of convenience that such a use case comes bundled with. Let's take this hypothetical user who takes a photo on his/her phone and then uploads it on a website. In that case, it's the server that normally handles the compression part: the user uploads the image at a default maximum resolution, then the server compresses it. When using WebAssembly all this compression happens in the... browser. The result: fewer server resources and data/bandwidth used... You get to run your web apps using the client's CPU instead. Compared to the “old way”, where you would access the server first, then send the result to the client.   3. Writing Code for the Web in Other Languages than JavaScript By far one of WebAssembly's biggest “selling points” is the flexibility that it provides. You get to write your code for the web in a... non-JavaScript language. And that's huge! Just think that till recently you were constrained to write your code for the web browsers in JavaScript. There was no alternative... Again, that doesn't mean that we'll witness a migration of developers from JavaScript to other specialized languages. Instead, scenarios where you'd use JS for the app's logic and UI alongside WebAssembly, used for the core functionality, are more likely to happen. As well as those scenarios where performance bottlenecks in your existing JS apps will get rewritten in a more... specialized language. One that's more fitted to tackle those specific issues...   4. Compiling Existing Applications for the Browser Another one of the compelling use cases for WebAssembly is this: compiling your current apps so that they run on the browser. A possible way to do this is by writing your existing apps in a managed language that has a large runtime. Take for instance a scenario where you'd compile Photoshop for the web browser. That, of course, if you don't have anything against sending an oversized file over each user's network.   5. Compiling & Accessing C/C++ Libraries … and compiling Rust, I must add. “What is WebAssembly good for?” To access C/C++ libraries for a wide range of operations:   digital media processing graphics compression physics simulation   And, of course, to compile C/C++ and Rust (or other statically typed languages) to a new format, to be easily run in the web browser. All that with a low runtime, so that you can reap the benefits of predictable performance.   6. Moving from Desktop-Only to Browser-Based Applications WebAssembly marks the “extinction” of the last desktop-only apps.  From VR/AR apps to apps with heavy data usage, to photo and video editors, to games with complex system requirements, they can all be run in the web browser now.   Final Word  Just imagine all the possibilities that WebAsembly unlocks: it enables you to take code from any language and run it in the web browser. Moreover, since it's a compile target, it “plays nicely” with other languages on the web: C++, Rust, C... And this leads us to the required shift in mentality mentioned at the beginning of this post: using technology for operations that would normally be performed in the back-end, but which, in this case, involve the web browser... Image by Rani Suarni from Pixabay ... Read more
Silviu Serdaru / Apr 02'2019
Mobile App Launch Checklist: 10 Critical Issues To Fix and Metrics to Measure When Gearing Up for Launch
How does a (truly) effective mobile app launch checklist look like?  What key areas to look into does it include? What critical issues to be fixed before launch day? What metrics to measure and features to test should there be on this well-constructed “to-do” list? Here, we've trimmed down all the steps to take before launching a mobile app to... a shortlist of 10. 10 aspects you must absolutely check and optimize before... going public.   1. Identify all Redirects and Broken Links Make sure you address these issues before launch day. For, if overlooked, they'll keep slowing down your app and affect the user experience.   Broken Links Two of the most popular free tools for detecting and fixing broken links are:   Xenu Broken Link Center   Once spotted, decide whether they should be removed or just updated.   Redirects Rely on Screaming Frog to scan your website for redirects or, on HSTS to get rid of the SSL redirect.   2. Minify Your JS, CSS and HTML Files A step to be found on any mobile app launch checklist. How does this size reducing process work? By removing unnecessary code:   unused spaces in your CSS superfluous JavaScript code redundant line breaks in your HTML   Plugins like Autoptimize and Fast Velocity Minify (if it's a WordPress-based app that you're launching) are just a few examples of plugins you could use to streamline the process. 3. Measure and Optimize the Time to First Byte To what extent does the handled data affect your app's performance when traveling across the network? Does it use too much network bandwidth? Keep a close track on the time to first byte and, if you detect any alarming signs, here are some of the solutions at hand:   apply flush techniques to prevent your backend from getting “overweight” closely monitor your database configuration and schema compress all data sent over the network modify your server configuration   In short, remember to include tracking this specific metric on your mobile app launch checklist...   4. Trim Down the Content to Its Essential Elements and Features Consider the smaller screen that your content will be accessed. Next, empathize with those users and try to anticipate the experience they'll get if:   your content's “stuffed” with lots and lots of footers, headers, sidebars, menus … graphs, tables   Would you be able to easily swift through this heavy load of distracting elements, to identify the main message and... stay focused on it? So, you get my point: trim down the clutter and keep it concise. Enable your content to easily shine through, instead of “burying“ it under a load of bulky elements. Note: you might want to consider going for video content where possible and removing the hover-effects if there are any; not all mobile devices support this functionality.   5. Text Compression: A Bullet Point on Any Mobile App Launch Checklist Another one of those fixes that you must absolutely do before launching your mobile app is compressing your text files. It's one of the bulletproof techniques for boosting your app's performance. How to do it? There are multiple ways:   enable default compression using Gzip, since it's highly likely that your CDN supports compressed files if compression is not already enabled (assuming that you don't host your own website), just opt for any of the available plugins to set it up yourself: WP Super Cache, W3 Total Cache, WP Rocket...   6. Streamline Your Checkout Process  A step from your mobile app launch checklist that you shouldn't overlook.  Since confusing and/or too long checkout process is one of the main factors affecting UX after all... What can you do to optimize it?   test your mobile app on various devices, with different screen sizes and try to detect the “bottlenecks” in the process address any too small touch points issues simplify the discouragingly complex form navigation integrate your app with payment gateways; this way you'll automate the tedious “enter your checkout information” process enable users to set up profiles that would allow them to save and to automatically re-use all the needed information whenever they need to re-fill the form   7. Measure and Boost Your Mobile App's Speed Another critical metric to measure before you launch your app is speed.  How fast does your mobile app load? Are there too many requests overburdening your back-end servers that drag your app down? Or, even worse: that cause it to crash? And these requests overstaining your server range from:   API requests to DNS lookups to network bandwidth to data size to HTTP calls   8. Simplify Your Website's Structure: Keep It Highly Intuitive Apply the “extreme simplicity and maximum efficiency” principle to your website's structure. Keep it conveniently easy to navigate and review all content hierarchies before launching your application. Make sure they're not confusingly... bulky. Now, here's an example of a well-constructed website structure for mobile:   homepage categories/sections subcategories single posts and individual pages   Again, turn empathy into your most powerful tool: try to anticipate users' standard “routes” on your website. Then, see if all the categories in the hierarchy make instant sense.   9. Optimize Your Images By far one of the most effective and handiest “To Do's” on your mobile app launch checklist... Resizing your images and optimizing them for specific uses will speed up your app dramatically.  And speaking of “handy solutions”, you surely do not run out of options when it comes to image optimization tools:   Cloudinary, Fastly, Akamai, for hosting and optimization XNConvert, ImageOptim for on-off optimization Imagemin, Thumbor, Imageflow for automated optimization    10. Split Your Code: Break Down Large JavaScript Bundles into... Smaller Chunks Heavy bundles of JavaScript to be processed will just... slow down your mobile app.  This is why code splitting should be one of your top 10 issues to fix before launching a mobile app:   it will break those “beefy” JS bundles down into smaller pieces and deliver them way quicker ... only upon users' requests   Note: you can split your code either at a component or at a route level using tools like WebPack, Parcel, React... The END! These are the 10 essential To Do's to include in your mobile app launch checklist. Why? Because:   they address critical issues which, if left unsolved, will have the biggest impact on the user experience there are multiple handy solutions for them all (and most of them are free), that you only need to... apply Image by Fedorussie from Pixabay. ... Read more
Adriana Cacoveanu / Mar 26'2019