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.

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
3 Essential Steps to Convert Your Website to a Progressive Web App
Thinking to convert your website to a progressive web app? And why shouldn't you? Since the benefits are obvious:   you “end up” with a website behaving like a native web app … one that works offline (and “offline” is the new black these days, right?), having its own home-screen icon  improved user experience: not only that your site goes mobile, but users don't even need to get your site-turned-into-an-app downloaded from an app store and then installed on their devices   Furthermore: Putting together a PWA out of a regular website (or blog) is unexpectedly easy! Basically, any site/blog can be turned into a progressive web app... No need to let yourself discouraged by terms such as:   service workers web app manifest (or “manifest.json)   … for the whole process is actually far less complex than it sounds. Here, see for yourself: go through the 3 essential steps it takes to convert your website to a progressive web app:   But First: All You Need to Know About PWAS— Benefits & Common Misconceptions A succinct and clear enough definition of progressive web apps would be: A PWA is a website that behaves like a native mobile app once visited on a mobile device. Whereas a more detailed and comprehensive one would go something like this: A PWA is a sum of modern web capabilities (and basic mobile capabilities) that enable users to save it on their own mobile devices (thus enjoying a native app-like experience) and access it offline, too. And now, without getting into the old “native mobile app vs PWAs” debate, let me point out to you some of progressive web apps' most “luring” benefits:   as compared to native apps, the setup process, on users' end, is significantly simplified: PWAs get instantly installed on their home screens, with no need to visit an app store for that they can get accessed offline, as well, via the home screen icon (a huge step forward from responsive web design) installation is conveniently lightweight: a few hundred KB essential files get cached locally (needless to say that this makes them faster than the standard web apps) they feature modern web capabilities: push notifications, cameras, GPS updates are run automatically, with no user interaction not only that they work offline, too, but once the network connection is restored, they synchronize the data    And now, before we virtually convert your website to a progressive web app, let's go, briefly, through some of the most common misconceptions about PWAs:   a. A progressive web app is literally an... “application”. Not necessarily: A progressive web app can be a blog, an online shop, a collection of... dog memes, you name it. Do not take the term “application” too literally when referring to PWAs. It's more of a concept, a code optimization technique which, once leveraged, "turbocharges” your app-like website or blog to deliver content faster.   b. Progressive Web Apps Are Developed Specifically for iOS or Android. On the contrary! Probably one of PWAs' “hardest to resist to” advantage is that: They're platform-independent. So, you don't need to:   develop separate codebases comply with platform-specific submission guidelines   c. Your Site Has to Be a JS-Based Single Page One So You Can Turn it Into a PWA. Nothing of that sort! If you're currently running... something on the web (be it a set of static HTML files), then you can easily make a PWA out of it!  And now, let's go straight to the 3-step set up process of a PWA out of your regular website:   Step 1: Go HTTPS to Convert Your Website to a Progressive Web App There's no way around it: the HTTPs protocol is the ONLY way to go when it comes to progressive web apps! All data exchanges need to be served on a secure domain: over an HTTPs connection! And how do you switch from HTTP to HTTPs? You get yourself an SSL certificate from a trusted authority. Now, there are 2 ways to get hold of it:   if your site runs on your own server (or at least you have root access to your server), consider setting up the LetsEncrypt certificate. if your website runs on a shared hosting, then both the process and the cost of your SSL certificate (for yes, there will be a monthly or an annual fee) depends greatly on your provider.   Step 2: Create a Web App Manifest  “But what is a web app manifest?”, you might ask yourself. A JSON text file that contains all the meta data of your PWA: description, scope, start_url, name, images, display, short_name... It's this information that will let browsers know how precisely they should display your app once saved as a home-screen icon. Now, before I go ahead and share a working example with you — one including the must-have entries of any web app manifest — I should also highlight that: A link to this JSON text file should be placed in the <head> of all your PWA's pages: <link rel="manifest" href="/manifest.json"> That, of course, after you've:   entered all the information about your PWA copied the manifest.json created a new “manifest.json” file in the root directory of your site and pasted it there  It should be served with:   Content-Type: application/json HTTP header or a Content-Type: application/manifest+json   And here's a “sample” piece of code: { "name": "My PWA Sample App", "short_name" : "PWA", "start_url": "index.html?utm_source=homescreen", "scope" : "./", "icons": [ { "src": "./android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" }, { "src": "./android-chrome-512x512.png", "sizes": "512x512", "type": "image/png" } ], "theme_color": "#ffee00", "background_color": "#ffee00", "display": "standalone" } Once the “Manifest” section of the Chrome's Development Tools Application tab has validated your JSON file, it will generate an “Add to home screen” link to be accessed on all desktop devices. Tip: as you convert your website to a progressive web app you don't necessarily need to configure the manifest.json file yourself — with all its different images sizes, meta tags etc. Instead, if you want to make it quick, you can just make a 500x500 sized image of your PWA and then rely on Real Favicon Generator to create all the needed icon sizes and a manifest file for you! And this is just one of the generators you could use!   Step 3: Set Up Your Service Worker This is where the “true power” of your PWA lies: A service worker is a JavaScript file, placed in your app's root, that plays the role of a “middleman” between the browser and the host. The one which, once installed in the supported browsers, intercepts and responds to the network request in different ways. Note: in most cases, it's for caching all the static files, so that our PWAs can function offline, too, that we use service workers. Now that we've seen what a service worker is, here's how you create one as you convert your website to a progressive web app:   a. You get it registered first things first. For this, just run this code in the JS file on your site: if ('serviceWorker' in navigator) { // register service worker navigator.serviceWorker.register('/service-worker.js'); } Practically, it will check whether the browser does support Service Workers and, if it does, it registers your Service Worker file. Note: NEVER call this file, inside your website, like this: <script src="./service-worker.js"></script> b. If you do not need your PWA to work offline, too, just set up an empty /service-worker.js file. Users will just be notified to install it on their devices!   c. Once you've registered your Service Worker, generate your Service Worker file, too. For this, just run this command in your terminal: $ npm install --global sw-precache Next, go ahead and run it on your website directory: $ sw-precache Et voila! You will have generated a service-worker.js including the service worker contents.   Test It Out! At this stage of the "convert your website to a progressive web app" process, you should:   check whether your service worker got properly registered and installed on Chrome run a performance audit on your PWA, using Chrome's Lighthouse Extension   For the first operation, go through these 3 basic steps here:   press F12 to open your Chrome Dev Tools click on the “Application” tab next, on the sidebar, select “Service Workers”    Then, check whether your service worker has been properly activated and is running normally: Just tick the “Offline” checkbox and try reloading. Does your PWA-site still display its content, even when there's no internet connection? Now let's run an audit using Chrome's dedicated testing tool, Lighthouse:   press F12 again to visualize the Chrome Dev Tools select the “Audits” tab then select “Perform an audit” check all the suggested checkboxes and finally, run the audit    And here's how the generated report would look like: The END! This is how you convert your website to a progressive web app in 3 steps:   enabling HTTPS configuring your web app manifest creating your service worker   See? Any website can be turned into a PWA and you don't need to be a senior developer to do it. ... Read more
Silviu Serdaru / Jul 24'2018
10 Essential Modules to Start Building Your Drupal Site from Scratch: Toolkit Must-Haves
So, you've installed your version of Drupal and you're now ready to actually start building your website. What essential tools should you keep close at hand, as a site builder? Which are those both flexible and powerful must-have modules to start building your Drupal site from scratch? The ones guaranteeing you a website that:   integrates easily with all the most popular third-party services and apps is interactive and visually-appealing, irrespective of the user's device is a safe place for users to hang on, interact with, shop on, network on... is conveniently easy for content managers and admins to handle   Luckily, there are plenty of modules, themes and plugins to overload your toolbox with: Long gone are the code-centric webmaster's “glory days”! Nowadays, as a Drupal site builder, you have a whole array of tools at your disposal to just start building and getting a Drupal site up and running in no time. Sometimes without the need to write a single line of code! But, let's not beat around the bush any longer and have a close look at these 10 essential modules that you'll need for your “Drupal 8 site building” project:   1. Password Policy Definitely a must-have module: Just consider that Drupal accepts ANY user password, be it a... one-letter password! So, in order to set up your own stricter and safer password policy, you need to install this module here. Then, you can easily define:   the minimal (and maximal) no. of characters that any user password on your Drupal site should include the no. of special characters that it has to include specific restrictions Like: "one can't use his/her email address as his/her password"   2. Comment Notify Why should this module, too, be in your essential toolkit of modules to start building your Drupal site with? Because it implements the functionality to get notified — you, the admin or content manager —  as soon as a user posts a comment on the website. Note: you can get “alerts” about both the logged in and the anonymous visitors' comments.   3. Breakpoints, One of the Must-Have Modules to Start Building Your Drupal Site  It goes without saying that one of the Drupal site building best practices is providing it with a responsive web design. And this is precisely what this module here facilitates: Setting the proper media queries, once you've defined your own breakpoints.   4. Simple Hierarchical Select             A module whose functionality bubbles up to the content manager's experience. Whenever he/she will have to make a selection involving both categories and subcategories, this hierarchical type of selection will prove to be more than useful: Practically, once you/they select the “main” option, a new drop-down menu/widget including the subcategories to select from, pops up, as well. Like in the image here below: 5. EU Cookie Compliance And complying with this EU notification is mandatory.  So, this is why EU Cookie Compliance is another one of the essential modules to start building your Drupal site with: It displays the given notification — providing visitors with the option to agree or/and to read more information about your cookie policy —  in the footer of your website.   6. Shield               Any Drupal site building guide would advise you to install a module that shields your website from anonymous users and search engines when running your test environments. And this is what Shield is built for: To screen your site from the rest of the world —  except for you and the logged in users — when you deploy it in a test environment. A more than convenient method, as compared to manually setting up a .htpasswd and then integrating it with .htaccess.   7. Beauty Tips     If you're not just another Drupal site builder, but a user experience-centric one, you must consider also those modules to build your Drupal site with that boost the level of user interactivity. Like Beauty Tips here. It displays balloon-help style tooltips whenever a user hovers over a certain text or page element on your website. Pretty much like Bootstrap tooltip does.   8. Secure Login           Another one of the Drupal site building best practices is to turn it into a safe place for your users to be.  In short: to protect their privacy. And if you're building a website that's available on both HTTP and HTTPS, the Secure Login module comes in handy as it makes sure that:   the user login form all the other fill-in forms that you'll configure for extra security   … get submitted via HTTPS. It locks them down, enforcing secure authenticated session cookies, so that user passwords and other critical user data don't get exposed all over the internet.   9. Menu Target   It's another one of those essential modules to start building your Drupal site with if you're determined to provide the best user experience there. What does it do? It enables particular visitors on your site — those granted permission to edit and to add new menu items — to choose whether they open menu items in new windows or in the current ones.   10. Persistent Login A module that makes up for the “Remember me” feature that's missing from the user login screen in Drupal: It comes to implement this missing option, one independent from the PHP session settings. So, we're not talking about the conventional, too long “PHP session time” here, but about a more secure and user-friendly “Remember me” feature added to the login form. Furthermore, the module enables you to define some extra security policies, too:   the no. of persistent sessions that a Drupal user can enjoy at the same time specific pages where users still have to log in again after how long the logged-in users will need to re-enter their credentials once again   And 2 “Extra” Modules to Consider When Building Your Drupal Site By “extra” I mean that they're not really essential modules to start building your Drupal site with. Yet, they're the first 2 ones to consider right after you've put together your “survival” toolkit as a site builder:   1. Site Settings & Labels     Take this common scenario: You need to display a social network URL on multiples pages on your Drupal site.  What do you do?   you hard coding this single setting in the source you start building a custom Drupal module for handling this variable you install the Site Settings & Labels module and thus display a checkbox to render page elements through a template conditional   The “c” variant's undoubtedly the winner here.  A win-win for you, in fact:   you save the time you'd otherwise have spent coding you improve the user experience on your Drupal site   2. Slick/Slick Views/Slick Media           It's actually a suite of modules to start building your Drupal site with. One “injecting” the needed functionality so that you can easily set up:   carousels slideshows   … on your freshly built website. Note! I won't lie to you: setting up the library dependencies is not exactly a child's play. Yet, once you've succeeded it, configuring the modules in this suite, right in your Drupal admin, is piece of cake. The END! These are the 10 must-have modules to start building your Drupal site from scratch with. Would you have added some more?  Or maybe you wouldn't have included some of the modules listed here, as you don't consider them “essential”? A penny for your thoughts! ... Read more
RADU SIMILEANU / Jul 20'2018