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 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
4 Easy Peasy Ways to Duplicate a Page in WordPress (Or a Blog Post)
And there are so many strong reasons why you'd want to duplicate a page in WordPress. Or one of your blog posts:   you wish to enable your client to make certain changes to the content before it goes live, all while still keeping the original version intact, just to compare the two you need to clone the layout of a specific page and to further use it on a different page on your website; all this with no impact on the “source” page, needless to add you want to “revamp” one of your WordPress pages, to give it a new design, while still keeping the original version “untouched” for future use ... and opting for a “copy/paste and save in a draft” option would only mean losing your SEO optimization, custom images, and page templates etc.   “How do I create a duplicate page or post in WordPress?” you then ask yourself. Since WordPress doesn't “spoil” us with an out-of-the-box solution for this job. And writing custom WordPress code for triggering clones might not be on everyone's alley... Luckily, WordPress gives us the convenience of dedicated plugins. Lots and lots of them. And there are quite a few ones perfect for this job: duplicating pages and posts. Here are the 4 WordPress plugins that turn cloning content into a matter of... a few simple clicks:   But First: 3 Major Benefits to Being Able to Easily Duplicate a WordPress Page A. Consistency And this is definitely more than “a nice thing to have” on your WordPress website or blog. Keeping consistency sitewide gets even more challenging when you're cloning page settings or layouts and move them around. Luckily, having a reliable plugin at hand:   streamlines simplifies   … the whole cloning process. It enables you to keep your website's design consistent while making changes.   B. Shorten Development Cycle “High efficiency” is just another word for modern development. And, as a web developer, being able to create similar websites quick enough gets critical. Luckily, having a magic tool at hand to help you duplicate your page templates — those to be used as foundations for new websites — just gives your productivity a mega-boost. Simply clone that initial page's layout and settings and... use it sitewide. Efficiency at its best!   C. Editing Pages/Posts on Live Websites Now, you can just guess the benefits deriving from this... convenience:   you can choose a less “active” time of the day/day of the week and make all the needed changes right on the live site you get to use your Git repository to make critical changes, then just sync them to your website you get to duplicate a page in WordPress (or a custom blog post, let's say), edit it, then just replace the original version with this updated one   1. Use Duplicate Post Plugin to... (Bulk) Duplicate Pages or Posts Why did this WordPress plugin make it to the top of the list here? Well... let's see:   not only that it turns cloning into “a child's play”, but it enables you to bulk duplicate posts, as well and speaking of convenience: just select “Copy to a new draft”, an option placed underneath your “Publish” settings and... you'll have your clone   furthermore, it enables you to select the customization options that you'd like to add; you get to restrict “cloning” to a few user roles only and you can add your own prefix/suffix before/after the duplicated post's title   And now, here's how you leverage its functionality:   1. Just install and activate the WordPress plugin. 2. Go to the “Settings” page; for this, either click on the “Settings” tab in your WordPress Admin panel and select “Duplicate Post” from the drop-down menu or click on “Settings” right beneath your plugin's name (in your WordPress plugins list) 3. While there, choose the settings page that you'd like to clone (and further edit/customize). And you have 3 options here: "What to copy", that lists all sort of web page elements that you may want to add to your cloned page or post.  Note: feel free to customize the duplicate page title so you can set it apart from the original page/post. "Permissions", where you can grant permissions for cloning specific content types to certain user roles only  "Display", where you can choose the website section(s) where the link of your duplicate page should get displayed.            4. Next, go to Pages>All Pages (or to Posts>All Posts) and track down the page you wish to clone. 5. Once spotted, hove over; you should see 2 new options popping up (in addition to the standard ... ones: “Edit”, “Quick Edit”, “Trash”... ): “Clone” and “New Draft” 6. Choose “Clone” if you just want to create a duplicate of that page or post  Word of caution: if that original page/post is already published, the duplicate one will automatically go live, as well! 7. Or, choose “New Draft” if you want to make a copy and further edit it. Once you're done editing it, you can either publish it or save it and keep it as a draft. Note: if you need to bulk duplicate posts in WordPress, just select the pages to be cloned, unfold the “Bulk Actions” drop-down menu above the list and select the “Clone” option  Another note: let's say that you've just finished writing a new blog post and you want to duplicate it. Yet, you dread having to navigate all the way to “Posts” and going through all the needed steps. To streamline things a bit, just click on “Copy to a new draft” right under your blog post's Publish settings. Should I also add that, in order to create a duplicate page in WordPress using this plugin you could also just:   open a Preview of that post or page to be cloned look for “Copy to a new draft” in your admin bar?   And that's it: two easy-peasy steps for creating a duplicate page or post.   2. Use Post Duplicator to Create a Duplicate Post/Page in WordPress Here's another easy way to clone WordPress pages or blog posts. This plugin would enable you to: Create a duplicate of that given post or page; one having the same custom taxonomies and custom fields. Here's how you use it: You install and enable it (obviously!) You select the “target” page and just click on “Duplicate Page” (or “Duplicate Post”) to create the duplicate Easy!   3. Duplicate Page Plugin: One of the Easiest Ways to Clone a Page/Post    Don't let its name “trick” you: you can duplicate blog posts, as well, using this plugin! Once installed, you'll find a new option under each post or page called “Duplicate This”. Use it confidently...   4. Use Duplicator Plugin to Duplicate an... Entire WordPress Site   What if your requirements go beyond duplicating a page or blog post? What if you need to clone... an entire website? Let's say that you want to build a website similar to the one that you've recently delivered to one of your clients. Or to the very same client. For this, you trigger this plugin's “superpower” and just... accelerate the development process. Since you'll already have a structure to build on.   5. Or Use the Page and Post Clone Plugin   Ready for another handy option for you to duplicate a page in WordPress? The process is mostly the same:   once you've activated your plugin hove over to the blog entry or page that you need to clone choose the new “Clone” option showing up there   … and you'll have your duplicate page created as a draft. The END! These are the 4 easiest ways to create a duplicate page in WordPress. Have you already tried a different method/plugin? Sharing is caring... ... Read more
RADU SIMILEANU / Dec 14'2018
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
Designing for a Global Audience? 5 Things to Consider for Making Your Website Internationally Friendly
Designing for a global audience should be straightforward simple, right? You'd just translate the written content on your current website into all the different languages of your target audiences and you're good to go... Well, not even close. Closer maybe, but definitely not close.  For, as the Globalization & Localization Association (GALA) says it, far more accurately than I could: “The aim of localization is to give a product the look and feel of having been created specifically for a target market, no matter their language, culture, or location.” And proper localization (or contextualization, if you prefer) is precisely what you should aim for when trying to reach a global audience. Now, making your website internationally-friendly is subject to a lot of considerations; translating the written content into different languages is but one of the many steps to take. Let me point out to you just 5 of the essential ones to keep in mind:   1. Can Your Current Web Hosting Solution Handle That Amount of Traffic? Let's take this hypothetical (yet not impossible) scenario: You've been selling custom-designed stationary in Canada for a while now. Your eCommerce website's server is in Vancouver. Still, your Canadian customers just don't seem so “mesmerized” with your hand-crafted products as you expected them to be. So, what do you do? You go global! You start selling your stationary in... South Korea, as well, and online orders start to ramp up.  But your web hosting provider doesn't have servers in Asia, as well, to back you up with, and so the page loading speed on your website gets close to... lousy. There are scripts, files, images to be loaded and to all these all too common heavy-weighing factors, now you add the distance factor, as well...  Your server just can't handle it... In this hypothetical case here, you have 3 viable solutions at hand:   you supercharge your website with a CDN for high speed you replace your current provider with another one that can provide you web hosting globally you upgrade your current hosting plan, opting for one that can handle higher volumes of traffic   It's up to you how you'll equip your website to cope with the expected larger-than-normal amount of traffic.   2. Is the Used Imagery Culturally Relevant for Your International Audiences? And yes, when designing for a global audience you need to consider this aspect, as well: Will all the international audiences that you're targeting resonate with the images displayed on your website? Do these images convey the same message, irrespective of culture, location, spoken language...? Are there any culture-specific meanings or symbols that you might have overlooked? Make sure they're not “packed with” references that a global audience wouldn't understand. Or risk misinterpreting... And, above all: Take your research seriously when you're planning to reach global audience; ensure your site's imagery can't get interpreted as offensive in some of the cultures that you're targeting.   3. What Do Your Chosen Colors Symbolize in Different Cultures? Make sure that you base your color choice on an in-depth research on the color symbolism in different cultures. And not solely on aesthetic aspects. In this respect, the examples of colors having both positive and negative connotations, depending on the cultural area, are numerous: Take white, for instance, a color that means both cleanliness, innocence or/and... death (in China). Choose your color palette wisely and do not leave the selection up to your designers entirely. Designing for a global audience is no more than a compromise, after all: You trade visually-striking design for a globally-relevant one. One that's both... global and local.   4. Remember to Use Hreflang Tags when Designing for a Global Audience  Why bother?  Well, you could take the hreflang tags as some kind of “traffic signs” indicating to  the search engines:   that the content on your website has been translated into multiple languages precisely which version of that content they should deliver to your site's visitors, depending on their location   As for how you can add them to your site's content, the Moz team has a more than “enlightening” blog post on the topic of hreflang tags, so I'm not going to get into details here. Now, let's move on to the last point on my list of aspects to pay attention to when designing for a global audience:   5. Is Your Website Optimized for Globally Accepted Keywords? And “globally accepted” sure doesn't come down to: Showing the translated version of each one of your target keywords each time it shows up. Now, let's take this common example: What if you're optimizing one of your site's pages for the keyword “dinner recipes”, but in some parts of the USA the equivalent “supper” is more frequently used? Then, you'll need to:   do your own research on all the possible keyword variations  account for them when doing keyword optimization on your website's pages   Et voila: these are just 5 of the essential aspects to consider when designing for a global audience. As you can see, translating the words on your website is just the very base of the “pyramid” of techniques to apply for avoiding common gaffes when you go global. That if you want to do it the right, of course... Photo by Kyle Glenn on Unsplash. ... Read more
Adriana Cacoveanu / Sep 11'2018