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 Are the Best Solutions for Creating a Slider in Drupal? 4 Drupal 8 Slideshow Modules
Do you need to set up a custom image carousel? Or maybe one slider with a teaser, displaying content from your website? What are the best Drupal 8 slideshow modules to consider for implementing and maintaining your slideshow? And out of the box options are... out of question, right? Your requirements are too specific for that. Maybe you need:   a certain number of slider items different arrow designs to display the image slideshow on other pages, too, not just on your homepage   With such flexibility and customization requirements in mind, we started digging into the “pile” of Drupal 8 image slider modules. And here are the 4 ones that we've selected, those with the best reviews in the Drupal community:   1. Views Slideshow     If it's a fully customized slideshow that you want to implement, Views Slideshow's the module you need. It'll “spoil” you with tons of add-ons to select from and give your unmatched flexibility. From:   titles to images to teasers of the last X blog posts on your website   … you get to include any type of items in your carousel. Furthermore, it's jQuery-powered and it allows you to configure different settings for each one of the views that you'll create. Note: oh, yes, you'll need to be pretty comfortable using Views in order to leverage this module at its full capacity. Some of its key features:   your slider can include and display the latest products added to your eCommerce website  you can set up a news item slideshow (the latest X news articles published on your Drupal 8 website) from the latest X blog entries to the latest videos, testimonials, forum posts etc., you're free to include any type of content in your slider...   Now, here's a very brief step-by-step on how you can set it up and use it to create your slideshow:   1.1. Install and enable the module Once you've downloaded it from Drupal.org, installed and enabled it, make sure to download its corresponding ZIP folder on Github, as well. Give your folder a new name  — /jquery.cycle/ — then start uploading all its files to the  /libraries/ folder in the root of your Drupal website.   1.2. Set up your view Time to create your slideshow now. For this, just go to Structure> Views>Add new view    1.3. Publish your slideshow block For this, go to Structure>Block layout and select the region on your website that you want your slider to get displayed on.   1.4. Create a new image style As you can see, the images included in your slideshow are currently of different sizes. Therefore, they're not perfectly adjusted to fit the block region that you've chosen for your slider. To solve this inconvenience, just go to Configuration>Image styles>Add Image style.  There, you can create a new style, that will be shared by all the images included in your slideshow.   2. Slick Slider, One of the Most Popular Drupal 8 Slideshow Modules Another one of Drupal's modules for creating custom image slideshows, that ships with a heavy load of options. Powerful and flexible... what more could you ask for from your slider solution? Capitalizing on Ken Wheeler's Slick carousel, working perfectly with Views and fields, the Slick Slider module:   enables you to set up a slider including multiple views, value fields and paragraph types comes with image, audio and video support supports complex layouts, as well   Some of its key features:   you're free to enable/disable the swipe functionality it's responsive (scales along with its container) some of its layouts are CSS-built it's designed to work with Field collection, Media, Views, Image (and also to work perfectly fine with none of these modules)| it allows you to configure your own “slide selecting” dots, the arrow keys and your slider's navigation, as well it provides modular and extensible skins you get to choose how you want your slideshow to be scrolled: swipe, desktop mouse dragging, auto scroll, mouse wheel scroll...   3. Owl Carousel Another one of those Drupal 8 slideshow modules that gets the best reviews. Here's why:   it leverages the Owl Carousel slider built by OwlFonk.    it, too, empowers you to customize your image slideshow; in this respect, it ships with a myriad of customization settings it's responsive it capitalizes on a small ecosystem of submodules: Administration UI, Views Style, Field Formatter   Some of its key features:   from customizing your events to styling your controls, it allows you to tailor your image slider to suit all your needs it supports multiple sliders touch events   4. jCarousel A simple module to consider each time you need to display a group of images in a compact way on your website. It even allows you to set the number of items to be included in your carousel... Speaking of which, you should know that jCarousel, as its name says it, allows you to leverage the jCarousel jQuery plugin. For this, it ships with a developer API for other modules to access. Furthermore, it integrates with Views, so you can easily turn any list of images (or other type of content) into a slideshow... Some of its key features:   jCarousel field formater out-of-the-box Views support API for using jCarousel without Views a collection of modern skins to choose from Carousel pager that enable users to jump between multiple sliders   The END! These are the first Drupal 8 slideshow modules to consider when looking for the best method for setting up your custom image/content slider. Packed with tons of customization options, feature-rich and powerful, these 4 solutions for creating image carousels in Drupal 8 should be on your short list when you start looking beyond the out-of-the-box options for putting together a slider... Photo by Samuel Zeller on Unsplash ... Read more
Silviu Serdaru / Apr 25'2019
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 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 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
Resizing Images for the Web Without Compromising Quality: Some Dead Simple Techniques
The earth is round and images are “the usual suspects” of too long page loading times... Along with video content. So, what do you do? You comprise, of course. And then you face a major challenge: resizing images for the web without impacting their quality. What file format should you select when saving your images for the web? And what type of compression should you choose?  How do you strike a balance between an image file's ideal size and that quality standard that you've set for your website? On one hand, you strive to optimize your images for the web — to reduce their sizes — and thus to improve your website's overall speed and the user experience delivered there. But, on the other hand, you risk affecting precisely the user experience if you over-comprise your images and compromise their quality. Now, time to shed some light on this “size vs quality” dilemma here:   1. What Does It Mean to Optimize Images for the Web? In short: what does Google expect you to do when it suggests you to optimize the images on your website for improving your page loading times? To reduce your image file sizes... This way, you'd lift some of the weight and give your load time a speed boost! You can do that either manually, using a script/plugin or... both. And, when it comes to compressing images for the web, you have 2 common methods to choose from:   lossy compression lossless compression   And we'll be delving into details in a bit... What I want to stress out now is a bad practice that too many website owners stubbornly stick to: Even though image optimization is one of the easiest ways that one can improve his website's performance, it's too often the most underrated one, as well. Resizing images for the web means no more than:   saving your images in the correct format  using the context-appropriate image compression method   2. Choosing the Best Image File Format for Web: JPG vs PNG vs SVG vs GIF What does it mean to save your images for the web “correctly”? What file type should you use, more specifically? Here are the most commonly used ones along with helpful suggestions on their best use cases:   2.1. The JPG Image Format  Opt for a JPG (or JPEG) file format when you optimize your images for the web if it's screen shorts and general photos that you're saving.  Images that include many colors... Now, what you do need to keep in mind is that: The JPG format helps you reduce the files' sizes for the web, but with a loss in the quality of your images. And here we get to the compression technique specific to this file format: the lossy compression. It's a filter that, for the sake of decreasing the image's size, removes some of the data from the original file. This can only affect the quality of the image who's size you're trying to reduce. Do keep in mind that this “degradation” process is irreversible... In short: your web page will load faster, yet at the cost of your image's quality. The more you'll try to compress it, the... uglier it'll get. The solution?  When you're faced with a scenario that requires this type of image format (e.g. saving images with lots of colors, complex still images), strike a balance between its quality and its size. Just mind you don't over-reduce its size in the name of page loading speed...   2.2. The PNG Image Format  Choose the PNG format when resizing your images for the web if you do need high resolutions and high detail. If it's simple images that you're saving (instead of fine-art photos with lots of colors). Wondering what's the compression technique specific to this file format? The lossless compression: A technique where the image's size gets reduced with no compromise on its quality.   2.3. The GIF Image Format  There's no point adding that it's a file format specific to animations.  When compressing your animated GIFs, it's the lossless technique that's being used. In other words, no need to worry about the loss of quality.   2.4. The SVG Image Format  Is it a logo, text, icon, or simple image that you're planning to optimize for the web? And are you looking for an image format that supports animation and interactivity? Opt for the SVG format then. Here are some more reasons why it might be the most suitable one for your use case:   Google indexes SVGs, JPGs, and JPGs the same way; there would be no impact on your website's SEO SVG image files are scalable, by default, in both photo editing tools and browsers in most cases, SVG files are lighter than JPG and PNG image files          3. Resizing Images for the Web: Lowest File Size vs Acceptable Quality What's that reasonable file size that you should target, that would preserve an acceptable quality of your images?  How do you strike a balance between compression rate and “decent” quality?    you choose the appropriate file format for the type of image that you're trying to optimize  and, implicitly, the suitable compression method, for that image format, as well   Yet, nothing beats “the golden rule of moderation” when looking for the balance between size and quality: Opt for a medium compression rate. Don't get “greedy”, don't reduce your images' sizes to the point of affecting their quality. Even if it's top page load speed that you'd be gaining (and speed is UX, right?), the poor quality images resulting will still have a negative impact on the user experience.   4. Web Images Best Practices  Here's some sort of “guide”, including all the essential must-dos when resizing images for the web and optimizing them for an improved page loading time:   save them in the correct file format save them at the appropriate size choose lossy compression, whenever possible lazy load images, when possible, for better page load times use pixels instead of inches when sizing images for the web; DPI — dots per inch — is not fit for the layout on the web automate the process, as much as possible go with a plugin that would compress and optimize your images externally, on their servers; this way, you'd be offloading your own website use web fonts instead of text within your images; they take less space and scale better when creating Retina images, make sure they're two times larger and, therefore, clear enough once displayed on the Retina device; the quality of the images should be the highest possible on your Retina Display-driven website   The END! These are our tips and tricks on resizing images for the web and optimizing them without risking to affect their quality. What other best practices would you have included? Photo by Markus Spiske on Unsplash ... Read more
Adriana Cacoveanu / Mar 13'2019
How Do I Optimize My Website for Voice Search in 2019? 4 Web Design and Content Planning Tips
Is your website adapted to... lure in and greet voice searchers? It should, considering that there are a ton of stats showing that by 2020 30% of online searches won't even... involve a screen anymore. Voice searches are (already) taking over text-based searches. So, the question “haunting” you right now must be: “How do I optimize my website for voice search in 2019?" For, what grew as a mega-trend in 2018 — no less than 1 billion voice searches performed in January alone — will turn into reality this year. And there's no surprise here. It's just... convenience at its best:   no hands, not even a screen are required spoken language over a lot more formal, rigid written language   Now, getting back to your legitimate concern — how to get your website voice search-friendly — here are the web design and content creation/planning best practices for voice search optimization. The 2019 guide version...   1. Put the Most Sought After Information at the Very Top OK, here's the situation: User “X” has opted to use his/her search voice gadget or voice assistant to make an online query. This can only mean 2 things:   that he/she wants to skip all the steps that a text-based search would require — all that clicking and scrolling — and take the shortest path to find the needed information that he/she looks for a specific piece of information or wants to perform a specific action   And I don't mean just making a call. For instance, here's the next most sought after information or “want to perform" actions where users would use voice search instead of text:   to make an appointment to get information about any current sales, promotions and special offers (e.g. free shipping offers) to find out what are the opening hours of a given brick-and-mortar store... to get information about upcoming events   How do you prepare your website for voice search from this standpoint?  You put the most commonly sought after information in the header! So potential customers can... “grab” it as soon as they've uttered their voice queries. For instance, you could display snippets of information in the navigation bar...   2. Use Conversational Phrases and Long Tail Voice-Oriented Keywords “How do I optimize my website for voice search in 2019?” A short answer would be: By “sprinkling” conversational, long-tail keywords on your web content. By focusing your SEO efforts on phrases, even whole sentences. For, let's face it: The spoken language is clearly different from the written language. Voice queries have nothing to do with the “stiff”, standard keywords that we'd use for performing a text-based search.  In this respect, use voice-oriented keywords and phrases/sentences in your featured snippets, in your metadata... 3. “How to Optimize My Website for Voice Search in 2019?” Localize Content In other words: optimize for local voice search. And it's no “mystery” here: 46% of voice searchers look for information on businesses in their geographic area. Just put yourself in their shoes: It's far more likely that you utter “Where can I eat the best pasta in New York” compared to “Where can I eat the... in USA?” So, make sure you localize the content on your website. Meaning that you:   use verbiage and colors that resonate with those locals use visuals specific to that region include the name of that city/region (don't forget about your metadata) tag your images and video content with the name of that city/region put together location-specific pages on your website   In short, local voice search optimization is made of all those efforts geared at helping your website rank high in the voice search results. Where the voice searches are based on “... near me” or “... in [name of location]” type of queries. A piece of advice: optimizing your website for local voice search also means keeping critical information about your business —  opening hours, location, updated contact number(s) — up to date and most visible in your profile. Also, do consider creating content around business profile-relevant keywords, like “best Italian restaurant” or more specific ones: “the best carbonara pasta”.    4. Anticipate The Most Frequently Asked Questions and Create Content Around Them Another top answer to your “How to optimize my website for voice search in 2019” type of question would be: Creating content answering those specific voice queries that your potential customers are most likely to perform. And how do you anticipate those most frequently asked questions?  You rely on powerful tools like Answer the Public and, if your website's old enough, you dive into your Google Analytics data. There, under Acquisition > Search Console > Queries you'll find plenty of valuable information to explore and “exploit”. Once you know what the most common queries are, start creating your targeted content:   write quality blog posts around the answers to those “popular” questions  remember to insert those highly relevant long-tail keywords in your metadata put together a detailed FAQ page on your website place the answers to those frequently asked questions in featured boxes; this way, they'll just “stand out”, so users won't need to scan your entire website to get them … also, once/if marked properly, users don't even need to access your website: the featured snippet, including the answers to their queries, will already show up in the voice search results   Final Word  “How do I optimize my website for voice search in 2019?” By adapting the navigation & search on your website to this new reality: users... using their voices to search online. And that doesn't mean getting your website to “talk back” to its visitors. There are voice assistants and conversational UIs for that. Instead, focus your efforts on: Localizing and, overall, creating voice-search friendly content that should provide quick, accurate, specific answers to users' anticipated voice queries. ... Read more
Adriana Cacoveanu / Feb 15'2019
What Will Be the Most Influential Mobile UI Design Trends in 2019? Top 4
A few more weeks and... “Chin-Chin: Happy New Year!”. Meanwhile, while you were making your final edits to your wish list for Santa and adding a few more lines to your New Year's resolutions list, we've been doing our homework, too. We've run our investigations and come up with our own list: one including the most influential mobile UI design trends in 2019. Both those trends:   that have timidly stepped on the mobile app design scene this year and will just grow more powerful next year and those that will emerge in 2019 and quickly take over the “scene”   So, here they are: the 4 major trends to look into and rush to capitalize on next year.   1. Buttonless Screens: From Niche to Norm Mobile UI designs without buttons have been around for some time, but we somehow didn't consider this would become... mainstream, right? Just think:   Instagram and its buttonless design that kind of forces you to rely on gestures for swiping through different stories on the page, for moving backward and/or forward Apple, Samsung, and Google, that are advocating for edgeless, clean screens; they implicitly “force us”, mobile app designers, to drastically trim down our in-app button collections. To remove buttons completely... all those e-commerce apps that have simplified their checkout processes by... removing the cart button; customers can just drag and drop items into their shopping carts.   Conveniently intuitive, right? The “buttonless UI” will be one of most prominent mobile UX trends in 2019: After the “power button & volume button & homepage single button" trio, we'll be witnessing the growth of the “buttonless screen” trend in 2019. In other words: it's time to rethink your mobile UI/UX designs; to make them more gestures-focused. Which might be as simple as... adding animations to show the gestures that end users need to perform for carrying out specific tasks.   2. Visual and Voice Interfaces Will Work Together “Will graphical user interfaces ever be taken over by voice user interfaces?” “ is a question on Quora. On the contrary: Not only that voice-assisted interfaces (VUI) won't “annihilate” the visual ones, but the 2 of them will... happily coexist starting next year.  Get ready to witness a seamless integration of the two types of UI in 2019's mobile apps! Or, even better:  Instead of being one of the passive witnesses, how about leveraging this trend, one of the most influential mobile UI design trends in 2019? How would these apps, supporting a cohabitation of voice and visual interfaces, look like from a user's perspective?   the mic button will become... optional; mobile app users can just utter their questions/commands and the apps will interpret them. he/she (the user) will be able to speak commands like “Show me the cheapest option and book me...” or “Pick it up!” or “Narrate these 3 chapters to me!” and have the app read a book, book a flight or answer a call    3. Bottom Navigation: One of the Dominant Mobile UI Design Trends in 2019 Which side are you on? Are you a top navigation or a bottom navigation “fan”? Well, you can call yourself a “visionary” if the bottom navigation has been your top choice for some time now. It looks like it's going to be one of the prominent mobile app UX design trends in 2019. Why? Because:   devices will have even larger screens the single homepage button “rocks supreme” and app users got so used to the swiping gesture “extreme” convenience is key: all the major buttons should be displayed within reach on the app's screen   And this type of navigation comes down to:   bottom sheets swipe-up gestures    3.1. Bottom Sheets Why will bottom sheets become app developers' top choice when it comes to displaying sub-flows? Because they're highly flexible! Users get to scroll both vertically, for unlocking more content, and horizontally (carousel), for swiping through similar content with no need to skip screens. Pop-up dialogues, overflow drop-downs, hamburger side-drawers will start to fade compared to bottom sheets' “all within a swipe's reach” type of convenience.   3.2. Swipe Up Gestures  You'd swipe up to open an app drawer, then swipe up again to go back or to close the app... It's been a while since in-app swipe up gestures have started to “outshine” buttons/bottom tabs. And they're perfectly fit for bottom navigation. They enable you, the mobile app developer, to... keep everything“minimalistic” in your app:   the top area (content) the bottom area (navigation)   Simple, intuitive, convenient. No wonder that this will be one of the most influential mobile UI design trends in 2019.   4. Mobile App Design for Larger Screens You'll need to swiftly adapt your mobile UI designs to devices with increasingly large screens. They'll be the ones “dictating” how you'll design your mobile apps' interfaces in 2019. And there are few challenges to expect, consider, and properly prepare yourself for before this trend becomes... a norm:   How will you seamlessly integrate in-app gestures into your mobile apps? “Fully” integrate them, I mean... Losing buttons/bottom tabs will automatically enlarge the screens and leave you with more screen real estate; how will you fully leverage those enlarged screens? How will you optimize your apps' UX and UI so that the user can rely on his/her thumb and thumb only to navigate through and perform actions within the app?   The END! Let's recap, now! Here's your New Year's resolutions list:   "I'll design buttonless user interfaces in all my mobile apps in 2019" "I'll somehow make voice and visual interfaces work together" "I'll design “bottom navigation” and swipe-up gestures navigation in my next year's apps" "I'll adjust and properly adapt my mobile app designs to fit devices with larger screens" Photo by Gilles Lambert on Unsplash  ... Read more
Adriana Cacoveanu / Dec 13'2018
The Drupal 8 Layout Builder Module: How It Revolutionizes Content Layout Creation in Drupal
What's your favorite tool for creating content layouts in Drupal? Paragraphs, Display Suite, Panelizer or maybe Panels? Or CKEditor styles & templates? How about the much talked about and yet still experimental Drupal 8 Layout Builder module? Have you "played” with it yet? As Drupal site builders, we all agree that a good page layout builder should be:   flexible; it should empower you to easily and fully customize every single node/content item on your website (not just blocks) intuitive, super easy to use (unlike "Paragraphs", for instance, where building a complex "layout", then attempting to move something within it, turns into a major challenge)   And it's precisely these 2 features that stand for the key goals of the Layout Initiative for Drupal:  To turn the resulting module into that user-friendly, powerful and empowering page builder that all Drupal site builders had been expecting. Now, let's see how the module manages to “check” these must-have strengths off the list. And why it revolutionizes the way we put together pages, how we create, customize and further edit layouts. How we build websites in Drupal...   1. The Context: A Good Page Builder Was (Desperately) Needed in Drupal It had been a shared opinion in the open source community: A good page builder was needed in Drupal. For, even if we had a toolbox full of content layout creation tools, none of them was “the One”. That flexible, easy to use, “all-features-in-one” website builder that would enable us to:   build complex pages, carrying a lot of mixed content, quick and easy (with no coding expertise) fully customize every little content item on our websites and not just entire blocks of content site-wide easily edit each content layout by dragging and dropping images, video content, multiple columns of text and so on, the way we want to   Therefore, the Drupal 8 Layout Builder module was launched! And it's been moved to core upon the release of Drupal 8.6. Although it still wears its “experimental, do no use on production sites!” type of “warning tag”, the module has already leveled up from an “alpha” to a more “beta” phase. With a more stable architecture now, in Drupal 8.6, significant improvements and a highly intuitive UI (combined with Drupal's well-known content management features) it stands all the chances to turn into a powerful website builder. That great page builder that the whole Drupal community had been “craving” for.   2. The Drupal 8 Layout Builder Module: Quick Overview First of all, we should get one thing straight: The Drupal 8.6. Layout Builder module is Panelizer in core! What does it do? It enables you, the Drupal site builder, to configure layouts on different sections on your website. From selecting a predefined layout to adding new blocks, managing the display, swapping the content elements and so on, creating content layouts in Drupal is as (fun and) intuitive as putting Lego pieces together. Also, the “content hierarchy” is more than logical:   you have multiple content sections you get to choose a predefined layout or a custom-design one for each section you can place your blocks of choice (field blocks, custom blocks) within that selected layout   Note: moving blocks from one section to another is unexpectedly easy when using Layout Builder!   3. Configuring the Layout of a Content Type on Your Website Now, let's imagine the Drupal 8 Layout Module “in action”. But first, I should point out that there are 2 ways that you could use it:   to create and edit a layout for every content type on your Drupal website to create and edit a layout for specific, individual nodes/ pieces of content   It's the first use case of the module that we'll focus on for the moment. So, first things first: in order to use it, there are some modules that you should enable — Layout Builder and Layout Discovery. Also, remember to install the Layout Library, as well! Next, let's delve into the steps required for configuring your content type's (“Article”, let's say) display:   go to Admin > Structure > Content types > Article > Manage Display hit the “Manage layout” button   … and you'll instantly access the layout page for the content type in question (in our case, “Article”). It's there that you can configure your content type's layout, which is made of:   sections of content (display in 1,2, 3... columns and other content elements) display blocks: tabs, page title... fields: tags, body, title   While you're on that screen... get as creative as you want:   choose a predefined layout for your section —  “Add section” —  from the Settings tab opening up on the right side of the screen add some blocks —  “Add block”; you'll then notice the “Configure” and “Remove” options “neighboring” each block drag and drop the layout elements, arranging them to your liking; then you can click on either “Save Layout” or “Cancel Layout” to save or cancel your layout configuration   And since we're highly visual creatures, here, you may want to have a look at this Drupal 8 Layout Builder tutorial made by Lee Rowlands, one of the core contributors. In short: this page builder tool enables you to customize the layout of your content to your liking. Put together multiple sections — each one with its own different layout —  and build website pages, carrying mixed content and multiple layouts, that fit your design requirements exactly.   4. Configuring and Fully Customizing the Layout of a Specific Node... This second use case of the Drupal 8 Layout Builder module makes it perfect for building landing pages. Now, here's how you use it for customizing a single content type:   go to Structure>Content types (choose a specific content type) click “Manage display” on the drop-down menu  then click the “Allow each content item to have its layout customized” checkbox and hit “Save”   Next, just:   click the “Content” tab in your admin panel choose that particular article that you'd like to customize click the “Layout” tab   … and you'll then access the very same layout builder UI. The only difference is that now you're about to customize the display of one particular article only. Note: basically, each piece of content has its own “Layout” tab that allows you to add sections, to choose layouts.  Each content item becomes fully customizable when using Drupal 8 Layout Builder.   5. The Drupal 8.6. Layout Builder vs Paragraphs “Why not do everything in Paragraphs?" has been the shared opinion in the Drupal community for a long time. And yet, since the Layout Builder tool was launched, the Paragraphs “supremacy” has started to lose ground. Here's why:   the Layout builder enables you to customize every fieldable entity's layout it makes combining multiple sections of content on a page and moving blocks around as easy as... moving around Lego pieces    By comparison, just try to move... anything within a complex layout using Paragraphs:   you'll either need to keep your fingers crossed so that everything lands in the right place once you've dragged and dropped your blocks or... rebuild the whole page layout from scratch   The END! What do you think:   Does Drupal 8 Layout Builder stand the chance to compete with WordPress' popular page builders? To “dethrone” Paragraphs and become THAT page layout builder that we've all been expected for? Or do you think there's still plenty of work ahead to turn it into that content layout builder we've all been looking forward to? ... Read more
RADU SIMILEANU / Nov 02'2018
How to Use Bootstrap with Angular 4? Here Are 3 Ways to Add It To Your Project 
Here you are now: your Angular 4 front-end app ready to... wow its users! “Almost ready” actually! For it still needs styling... And what better HTML and CSS framework to go for than Bootstrap, right? But how to use Bootstrap with Angular 4 more precisely? How do you properly integrate it into your Angular 4 CLI project? Great news: you have not just one, but 3 options at hand for adding it! Let me get into details:   On Using Bootstrap in Your Front-End Development Process Is there any need to list here the reasons why it's precisely Bootstrap that you're planning to implement into your Angular CLI project? Angular 4, to be more specific. After all, it's the most popular framework for styling websites built in HTML, CSS and modern web & mobile JavaScript frameworks (like Angular here): It's an open source, feature-rich framework that turns front-end development into a such a “breeze”. Basically, it empowers you to build responsive layouts without the need to be a CSS “expert”. And now, let's break down further with the step-by-step “tutorial” on how to use Bootstrap with Angular 4:   Step 1: Create a New Angular Project Using Angular CLI  The very first step to take is obviously setting up a brand new project. Use the Angular Command Line Interface to generate it. But first, install it to on your system: $ npm install -g @angular/cli It's only then, once you've installed its NPM package, that you can go ahead and... generate your new project.  For doing this, just type the following command in your CLI: $ ng new myproject Next, feel free to change into that specific directory and to turn on the web server: $ cd myproject $ ng serve “App works!” This is the message that you should be seeing in your browser right now.   Step 2: Install Bootstrap to Your Project Now that you've launched your new Angular project, it's time to add your Bootstrap library, as well. And you sure aren't nickel and dimed in options. There are 4 ways to add Bootstrap to Angular 4.   Step 3: How to Use Bootstrap with Angular 4 — 3 Different Ways to Integrate It Option 1: Install Bootstrap from CDN And there are 2 particular files that you'll need to install from CDN into your project:   the Bootstrap CCS file the Bootstrap JavaScript file    Note: keep in mind to add the jQuery JavaScript library file, as well! Next, open the src/index.html file and insert the following:   the <link> element to add the Bootstrap CSS file at the end of the head section a <script> element for adding jQuery at the bottom of the body section a <script> element for inserting the Bootstrap JS file at the bottom of the body section   Eager to see “Bootstrap in action” in one of your project's component templates? Then give it a try:   open the src/app/app.component.html enter the following code there:   <div class="container"> <div class="jumbotron"> <h1>Welcome</h1> <h2>Angular & Bootstrap Demo</h2> </div> <div class="panel panel-primary"> <div class="panel-heading">Status</div> <div class="panel-body"> <h3>{{title}}</h3> </div> </div> </div> And it's the following message that this HTML template code should trigger in your browser: “app works!” Note: go for a Bootstrap theme of your choice; once you've downloaded it (from Bootswatch.com for instance), its bootstrap.min.css file will get instantly opened up in your browser. Just copy the file's URL and use it to replace the string assigned to the href attribute of the <link> element, in the index.html file. And voila! It's precisely those colors, defined by your chosen theme, that get displayed in the browser now!   Option 2: Install Bootstrap using NPM And here's another valid answer to your “How to use Bootstrap with Angular 4” dilemma! Simply enter: $ npm install bootstrap@3 jquery –save It's this command that will integrate Bootstrap and jQuery into the node_modules folder of your Angular 4 project directory. Moreover, it will include these 2 dependencies in the package.json file, as well. Once properly installed, you can find both packages at:   node_modules/bootstrap/dist/css/bootstrap.min.css node_modules/bootstrap/dist/js/bootstrap.min.js node_modules/jquery/dist/jquery.min.js   Note! You have 2 options for integrating those files into your Angular 4 project:   add the file paths to the script array and to the file path of the angular-cli.json file add the corresponding <script> and <link> elements to your index.html file   Option 3: Add NG-Bootstrap to Your Project The great thing about this method is that you'll no longer need to add jQuery and Bootstrap dependencies. Ng-Bootstrap comes packed with a set of built-in native Angular directives which are already CSS and Bootstrap's markup-based. Now, getting back to our initial “How to use Bootstrap with Angular 4” question, let's see how we install this NPM package.  For this, just enter the following command in your Angular 4 project directory: npm install --save @ng-bootstrap/ng-bootstrap Next, make sure you also install Bootstrap 4 to your project: $ npm install bootstrap@4.0.0-alpha.6 And, the final step is to add the following files:   jquery.min.js bootstrap.min.js bootstrap.min.css   … to your .angular-cli.json file Now you still need to import the Ng-Bootstrap’s core module — NgbModule — from its @ng-bootstrap/ng-bootstrap package. To do this, just type the following import statement into app.module.ts: import {NgbModule} from '@ng-bootstrap/ng-bootstrap'; All there's left for you to do now is to add the NgbModule to the @NgModuledecorator's imports array.  And since we're here, you'll find some more than “enlightening” info (chunks of code here included!) on the 2 different options at hand for importing the NGBModule: either in your project's child modules  or in your the root module itself … in this article here on Using Bootstrap with Angular.   Using The NG-Bootstrap Components: Which Are They?  With the NgbModule installed into your Angular 4 project, you're now able to use the Ng-Bootstrap components. To leverage them in your app.component.html. Speaking of which, here are the components at hand:   Accordion Alert Rating Tabs Carousel Progressbar Collapse Datepicker Buttons Pagination Typeahead Popover Timepicker Dropdown Modal Tooltip   The END! Does this answer your “How to Use Bootstrap with Angular 4” question?  Which method of adding this front-end framework to your project is more suitable for you? ... Read more
Silviu Serdaru / Apr 30'2018