LATEST FROM OUR BLOG

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

Drupal 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
How Does Using Component-Based Development in Drupal 8 Benefit Your Team More Precisely?
With the Twig templates replacing the old PHP templates, Drupal has been brought to a whole new “era”. We can now leverage the advantages of a component-based development in Drupal 8. But what does that mean, more precisely? How does this (not so) new approach in software development benefit you? Your own team of developers... And everyone's talking about tones of flexibility being unlocked and about the Twig templates' extensibility. About how front-end developers, even those with little knowledge of Drupal, specialized in various languages, can now... “come right on board”. Since they're already familiar with the Twig engine... Also, we can't ignore all the hype around the advantage of the streamlined development cycles in Drupal and of the consistent user experience across a whole portfolio of Drupal apps/websites. But let's take all these tempting advantages of component-based UI development in Drupal 8 and point out how they benefit your team precisely.   1. But First: What Is a Component? It's a standalone piece of software that can appear in multiple places across your Drupal website/application. One of the most relevant examples is that of a content hub. One displaying teasers of the latest blog posts, events... You could set up a component that would determine how each item in that content hub should look like. In short:   one single component can be used by several types of content any update to its template/style would automatically reflect on all those content types, as well   Accessible via an API, this independent piece of software explicitly defines all its application dependencies.| Your team could then easily architect a new interface by just scanning through and selecting from the library of components.   2. What Is Component-Driven Development? What Problems Does It Solve? A succinct definition of component-based software engineering would be: A software development technique where you'd select off-the-shelf, reusable components and put them together according to a pre-defined software architecture. “And what challenges does it address?” It streamlines and lowers the level of complexity of otherwise intricate, time-consuming development and design processes. As the author of given components, your role is to get them implemented. No need to worry about how they'll get “assembled”; this is what the well-defined external structure is there for. Word of caution: mind you don't get too... engrossed in putting together the right components, in architecting the best component-based structure, for you then risk investing too little time in... building them properly.   3. Component-Based Development in Drupal 8 Now, if we are to focus our attention on the component-based UI approach in relation to Drupal 8 software development, here are the key aspects worth outlining:   with the Twig engine in Drupal 8, you're free to “joggle with” extensible templates; once you've defined a Twig template in one place, we get to reuse it across the whole Drupal website/app   the Component Libraries module allows you to set up template files (storing all their needed JS and CS), assign a namespace for them and place them pretty much anywhere on your Drupal filespace (not just in your themes' “templates” directory)   you then get to use the KSS Node library and define a living style guide; it's where you'll store all the component templates built for your Drupal website (styles, markup, JS behaviors, etc.)   By filling in your toolboxes with all these tools — the results of a joint effort of the Drupal and the front-end communities  —  you're empowered to design themes that are more modular. And, therefore, more efficient... 4. The Top 6 Benefits of the Component-Based UI Approach   4.1. It Ensures UX Consistency Across All Your Drupal 8 Websites Take your library of components as the “headquarters” for all the teams involved in your Drupal project: QA, business, development, design teams... It's there that they can find the pre-defined standards they need to keep the consistency of the features they implement or of other tasks they carry out across multiple projects. A consistency that will bubble up to the user experience itself, across your whole portfolio of Drupal 8 websites/applications...   4.2. It Accelerates the Process of Turning Your Visual Design into a UI  Embracing the component-based development in Drupal 8 you'd avoid those unwanted, yet so frequent scenarios where the front-end developer gets tangled up in the wireframe he receives and:   he/she translates parts of it the... wrong way he digs up all types of “surprise” issues     By using a component-driven UI approach translating a visual design into a user interface gets much more... event-less.  With:   a pre-defined component architecture to rely on well-established standards to follow a whole library of component templates at hand   … there are fewer chances of discrepancies between the UX defined in the visual design and the one delivered via the resulting user interface. Not to mention the reduced delivery timelines...   4.3. It Streamlines the Whole Development Process  “Sustainability” is the best word to define this approach to Drupal software development. Just think about it:   whether it's a particular grid, navigation or layout that your front-end developer needs when working on a new project, he/she can pull it right from the component library at hand   … and “inject” it into the app/website that he's working on   in case that element needs further updating, the developer will already have the baseline to start with   … there's no need for new components to be designed, from the ground up, with every single project: the already existing ones can always get further extended   And that can only translate into significant savings of both time and money.   4.4. It Reduces the Time Spent on Setting Up the Functionality & Defining the UX And this is one of the key benefits of using component-based development in Drupal 8. Your various teams would no longer need to define the UX requirements and the functionality every single time during the design process. With an easily accessible library of components, they can always pull a component standing for a specific requirement (display of complex data, filtering, pagination in grids, etc.) and just define its extensions. And the business logic, as well.   4.5. It Enables You to Systematically Reuse Your Components And “reusability” goes hand in hand with “sustainability”. I would even say that it's a synonym for “future-proofing”, as well... Just think about it: by having a Drupal 8 website in a component-based format you can always rearrange components as technologies grow outdated and new ones emerge... In short, embracing a component-based development in Drupal 8 enables you to remove the need of rebuilding your website every time its underlying technologies “grow out of fashion”. With your component library at hand, you'll be able to swap your guidelines, design patterns and various content templates in and out, keeping your Drupal app or website up to date.   4.6. It Integrates Seamlessly into the Development Process  By leveraging a component-based development in Drupal 8, you'd also gain better control over the whole development cycle. The update process here included... Since you'd then build your components and manage your production quality user interface code in a repository like GitHub, every update that you'd make will be displayed in there. And be easily accessible to everyone in your team. In short, your developers get to pull pieces of code from the repository to further extend them, then re-submit them to GitHub (or to another source code repository) for review. With the ability to version your component library, your team can keep a close track of all your Drupal applications with their corresponding versions of the approved UX.   The END! This is how the component-based development in Drupal 8 would benefit you and your team. Have we left out other key advantages of using this approach? Image by Arek Socha from Pixabay ... Read more
Silviu Serdaru / Apr 11'2019
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
Drupal Multisite Setup: Are There (Still) Any Valid Reasons to Use It? Should It Get Removed in Drupal 9.x?
Why would you still want to opt for a Drupal multisite setup? What strong reasons are there for using this Drupal 8 feature? I mean when there are so many other tempting options, as well:   you could use Git, for instance, and still have full control of all your different websites, via a single codebase you could go with a Composer workflow for managing your different websites   On one hand, everyone's talking about the savings you'd make — of both time and money — for keeping your “cluster” of websites properly updated. And yet, this convenience comes bundled with certain security risks that are far from negligible. Just think single point of failure... Now, to lend you a hand with solving your dilemma, let's go over the key Drupal multisite pros and cons. So that, depending on your:   developers' skill level current infrastructure  project budget hierarchy of priorities host capabilities multi-site infrastructure's specific needs   … you can decide for yourself whether a Drupal multisite setup does suit your situation or you'd better off with one of its valid alternatives. And whether you agree that it should eventually get removed from Drupal 9.x or not.   1. Drawbacks for Using the Multisite Feature/Arguments for Removing It Now, let us expose this built-in Drupal feature's main limitations. Those that might just make you think twice before using it:   there's no way to update the core of just one Drupal website from your setup; you're constrained to update them all at once, every single time   it becomes quite challenging to assign a team with working on one (or some) of your websites only   it's not as richly documented as other built-in features (especially if we consider its “age”)   it exposes your Drupal multisite setup to security vulnerabilities; it's enough for one website from the “cluster” to get corrupted (accidentally or intentionally) for all the other ones to get infected   reviewing code becomes a major challenge: you can't “get away with” writing code for one website only; instead, you'll need to rewrite code on all your websites included in the setup, to test it against all breakpoints and so on...   putting together test and state environments gets a bit more cumbersome   in order to efficiently manage such an infrastructure of websites strong technical skills are required; are there any command-line experts in your team?   having a single codebase for all your Drupal websites works fine if and only if they all use the same settings, same modules; if not, things get a bit... chaotic when, for instance, there's a security issue with one module, used on all your websites, that affects your entire ecosystem   also, since your shared database is made of a wide range of tables, when you need to migrate one site only, you'll have “the time of your life” trying to identify those tables that belong to some websites and those that they all share   2. Top 3 Reasons to Go With a Drupal Multisite Setup Now that we've taken stock of the main drawbacks for leveraging this Drupal feature, let's try to identify the main reasons for still using it:   A heavy-weighing reason is given by the time and money you'd save on updating your “cluster” of sites. With the right experience in using the command-line you can run the due updates in just one codebase and have them run across all your websites simultaneously   It's an approach that becomes particularly convenient if you need self-hosting for your setup (e.g. take the case of a university hosting all its different websites or a Drupal distribution provider...)   You'd be using less memory for OpCache and this benefit becomes particularly tempting if you're dealing with RAM constraints on your servers   3. In Conclusion... There still are solid reasons to opt for a Drupal multisite setup. Reasons that could easily turn into strong arguments for not having it removed in Drupal 9.x... But there are also equally strong reasons for getting discouraged by the idea of leveraging this age-old feature. And where do you add that from Docker to Composer and GIT, you're not running out of options for managing your “cluster” of websites. In the end, the decision depends on your situation, that's made of specific factors like budget, hosting capabilities, whether your websites are using the same modules, etc. The answer to your “Are there any valid reasons for using the Drupal multisite feature?” cannot be but:   “Yes there are, but counterbalanced by certain disadvantages to consider.”   Image by Arek Socha from Pixabay ... Read more
RADU SIMILEANU / Apr 03'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