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
Drupal Multisite Setup: Are There (Still) Any Valid Reasons to Use It? Should It Get Removed in Drupal 9.x?
Why would you still want to opt for a Drupal multisite setup? What strong reasons are there for using this Drupal 8 feature? I mean when there are so many other tempting options, as well:   you could use Git, for instance, and still have full control of all your different websites, via a single codebase you could go with a Composer workflow for managing your different websites   On one hand, everyone's talking about the savings you'd make — of both time and money — for keeping your “cluster” of websites properly updated. And yet, this convenience comes bundled with certain security risks that are far from negligible. Just think single point of failure... Now, to lend you a hand with solving your dilemma, let's go over the key Drupal multisite pros and cons. So that, depending on your:   developers' skill level current infrastructure  project budget hierarchy of priorities host capabilities multi-site infrastructure's specific needs   … you can decide for yourself whether a Drupal multisite setup does suit your situation or you'd better off with one of its valid alternatives. And whether you agree that it should eventually get removed from Drupal 9.x or not.   1. Drawbacks for Using the Multisite Feature/Arguments for Removing It Now, let us expose this built-in Drupal feature's main limitations. Those that might just make you think twice before using it:   there's no way to update the core of just one Drupal website from your setup; you're constrained to update them all at once, every single time   it becomes quite challenging to assign a team with working on one (or some) of your websites only   it's not as richly documented as other built-in features (especially if we consider its “age”)   it exposes your Drupal multisite setup to security vulnerabilities; it's enough for one website from the “cluster” to get corrupted (accidentally or intentionally) for all the other ones to get infected   reviewing code becomes a major challenge: you can't “get away with” writing code for one website only; instead, you'll need to rewrite code on all your websites included in the setup, to test it against all breakpoints and so on...   putting together test and state environments gets a bit more cumbersome   in order to efficiently manage such an infrastructure of websites strong technical skills are required; are there any command-line experts in your team?   having a single codebase for all your Drupal websites works fine if and only if they all use the same settings, same modules; if not, things get a bit... chaotic when, for instance, there's a security issue with one module, used on all your websites, that affects your entire ecosystem   also, since your shared database is made of a wide range of tables, when you need to migrate one site only, you'll have “the time of your life” trying to identify those tables that belong to some websites and those that they all share   2. Top 3 Reasons to Go With a Drupal Multisite Setup Now that we've taken stock of the main drawbacks for leveraging this Drupal feature, let's try to identify the main reasons for still using it:   A heavy-weighing reason is given by the time and money you'd save on updating your “cluster” of sites. With the right experience in using the command-line you can run the due updates in just one codebase and have them run across all your websites simultaneously   It's an approach that becomes particularly convenient if you need self-hosting for your setup (e.g. take the case of a university hosting all its different websites or a Drupal distribution provider...)   You'd be using less memory for OpCache and this benefit becomes particularly tempting if you're dealing with RAM constraints on your servers   3. In Conclusion... There still are solid reasons to opt for a Drupal multisite setup. Reasons that could easily turn into strong arguments for not having it removed in Drupal 9.x... But there are also equally strong reasons for getting discouraged by the idea of leveraging this age-old feature. And where do you add that from Docker to Composer and GIT, you're not running out of options for managing your “cluster” of websites. In the end, the decision depends on your situation, that's made of specific factors like budget, hosting capabilities, whether your websites are using the same modules, etc. The answer to your “Are there any valid reasons for using the Drupal multisite feature?” cannot be but:   “Yes there are, but counterbalanced by certain disadvantages to consider.”   Image by Arek Socha from Pixabay ... Read more
RADU SIMILEANU / Apr 03'2019
What Are Some Compelling Use Cases for WebAssembly? Top 6
Isn't it ironic? On one hand, you've kept hearing/reading have all this talk about WebAssembly and what a game changer for the web it is. Yet, on the other hand, few developers are actually leveraging it in their projects? There's all this hype around the new way of assembling code in any language and running it right in the web browser, yet everyone's still a bit hesitant about using it. Are there any truly compelling use cases for WebAssembly? Why would you use it? What are its primary use cases? For now, what you do know are its “selling points”, that everyone's blowing the trumpet about:   it enables you to build reliable, dynamic, faster websites it's now shipping in all major browsers it enables you to write your piece of software once and then have it run on... every platform with a browser it's a “revival” of the smart client software development On the other hand: it's still a “steamy fresh” technology and people are half-hearted about using it.  And where do you add that it requires a huge shift in mentality, as well: using the browser for tasks that developers are used to performing in the back-end.  Now, let's shed some light here and bring forward the most compelling use cases for WebAssembly:   1. Writing Faster Code               And writing “almost fast as native code for web browsers” has been one of developers' ever-present goal.  Well, yes: WebAssembly does enable you to write faster code. And yes, it is faster than JavaScript, “showing off” its performance-oriented side particularly when it comes to performing highly computational tasks. Those kinds of operations where lots of numbers and memory strain are involved. Notes:   Do keep in mind that being able to write faster code to be run with ES6 doesn't mean that WebAssembly will replace JavaScript. It's designed to cohabit with it, not to be the “cause of its death”. benchmarks have shown WebAssembly to be 10% slower than C code. Still, many consider it as a too little compromise for all the flexibility and portability they get in return.   2. Client-Side Compression: One of the Primary Use Cases for WebAssembly Just think of the tones of convenience that such a use case comes bundled with. Let's take this hypothetical user who takes a photo on his/her phone and then uploads it on a website. In that case, it's the server that normally handles the compression part: the user uploads the image at a default maximum resolution, then the server compresses it. When using WebAssembly all this compression happens in the... browser. The result: fewer server resources and data/bandwidth used... You get to run your web apps using the client's CPU instead. Compared to the “old way”, where you would access the server first, then send the result to the client.   3. Writing Code for the Web in Other Languages than JavaScript By far one of WebAssembly's biggest “selling points” is the flexibility that it provides. You get to write your code for the web in a... non-JavaScript language. And that's huge! Just think that till recently you were constrained to write your code for the web browsers in JavaScript. There was no alternative... Again, that doesn't mean that we'll witness a migration of developers from JavaScript to other specialized languages. Instead, scenarios where you'd use JS for the app's logic and UI alongside WebAssembly, used for the core functionality, are more likely to happen. As well as those scenarios where performance bottlenecks in your existing JS apps will get rewritten in a more... specialized language. One that's more fitted to tackle those specific issues...   4. Compiling Existing Applications for the Browser Another one of the compelling use cases for WebAssembly is this: compiling your current apps so that they run on the browser. A possible way to do this is by writing your existing apps in a managed language that has a large runtime. Take for instance a scenario where you'd compile Photoshop for the web browser. That, of course, if you don't have anything against sending an oversized file over each user's network.   5. Compiling & Accessing C/C++ Libraries … and compiling Rust, I must add. “What is WebAssembly good for?” To access C/C++ libraries for a wide range of operations:   digital media processing graphics compression physics simulation   And, of course, to compile C/C++ and Rust (or other statically typed languages) to a new format, to be easily run in the web browser. All that with a low runtime, so that you can reap the benefits of predictable performance.   6. Moving from Desktop-Only to Browser-Based Applications WebAssembly marks the “extinction” of the last desktop-only apps.  From VR/AR apps to apps with heavy data usage, to photo and video editors, to games with complex system requirements, they can all be run in the web browser now.   Final Word  Just imagine all the possibilities that WebAsembly unlocks: it enables you to take code from any language and run it in the web browser. Moreover, since it's a compile target, it “plays nicely” with other languages on the web: C++, Rust, C... And this leads us to the required shift in mentality mentioned at the beginning of this post: using technology for operations that would normally be performed in the back-end, but which, in this case, involve the web browser... Image by Rani Suarni from Pixabay ... Read more
Silviu Serdaru / Apr 02'2019
Mobile App Launch Checklist: 10 Critical Issues To Fix and Metrics to Measure When Gearing Up for Launch
How does a (truly) effective mobile app launch checklist look like?  What key areas to look into does it include? What critical issues to be fixed before launch day? What metrics to measure and features to test should there be on this well-constructed “to-do” list? Here, we've trimmed down all the steps to take before launching a mobile app to... a shortlist of 10. 10 aspects you must absolutely check and optimize before... going public.   1. Identify all Redirects and Broken Links Make sure you address these issues before launch day. For, if overlooked, they'll keep slowing down your app and affect the user experience.   Broken Links Two of the most popular free tools for detecting and fixing broken links are:   Xenu Broken Link Center   Once spotted, decide whether they should be removed or just updated.   Redirects Rely on Screaming Frog to scan your website for redirects or, on HSTS to get rid of the SSL redirect.   2. Minify Your JS, CSS and HTML Files A step to be found on any mobile app launch checklist. How does this size reducing process work? By removing unnecessary code:   unused spaces in your CSS superfluous JavaScript code redundant line breaks in your HTML   Plugins like Autoptimize and Fast Velocity Minify (if it's a WordPress-based app that you're launching) are just a few examples of plugins you could use to streamline the process. 3. Measure and Optimize the Time to First Byte To what extent does the handled data affect your app's performance when traveling across the network? Does it use too much network bandwidth? Keep a close track on the time to first byte and, if you detect any alarming signs, here are some of the solutions at hand:   apply flush techniques to prevent your backend from getting “overweight” closely monitor your database configuration and schema compress all data sent over the network modify your server configuration   In short, remember to include tracking this specific metric on your mobile app launch checklist...   4. Trim Down the Content to Its Essential Elements and Features Consider the smaller screen that your content will be accessed. Next, empathize with those users and try to anticipate the experience they'll get if:   your content's “stuffed” with lots and lots of footers, headers, sidebars, menus … graphs, tables   Would you be able to easily swift through this heavy load of distracting elements, to identify the main message and... stay focused on it? So, you get my point: trim down the clutter and keep it concise. Enable your content to easily shine through, instead of “burying“ it under a load of bulky elements. Note: you might want to consider going for video content where possible and removing the hover-effects if there are any; not all mobile devices support this functionality.   5. Text Compression: A Bullet Point on Any Mobile App Launch Checklist Another one of those fixes that you must absolutely do before launching your mobile app is compressing your text files. It's one of the bulletproof techniques for boosting your app's performance. How to do it? There are multiple ways:   enable default compression using Gzip, since it's highly likely that your CDN supports compressed files if compression is not already enabled (assuming that you don't host your own website), just opt for any of the available plugins to set it up yourself: WP Super Cache, W3 Total Cache, WP Rocket...   6. Streamline Your Checkout Process  A step from your mobile app launch checklist that you shouldn't overlook.  Since confusing and/or too long checkout process is one of the main factors affecting UX after all... What can you do to optimize it?   test your mobile app on various devices, with different screen sizes and try to detect the “bottlenecks” in the process address any too small touch points issues simplify the discouragingly complex form navigation integrate your app with payment gateways; this way you'll automate the tedious “enter your checkout information” process enable users to set up profiles that would allow them to save and to automatically re-use all the needed information whenever they need to re-fill the form   7. Measure and Boost Your Mobile App's Speed Another critical metric to measure before you launch your app is speed.  How fast does your mobile app load? Are there too many requests overburdening your back-end servers that drag your app down? Or, even worse: that cause it to crash? And these requests overstaining your server range from:   API requests to DNS lookups to network bandwidth to data size to HTTP calls   8. Simplify Your Website's Structure: Keep It Highly Intuitive Apply the “extreme simplicity and maximum efficiency” principle to your website's structure. Keep it conveniently easy to navigate and review all content hierarchies before launching your application. Make sure they're not confusingly... bulky. Now, here's an example of a well-constructed website structure for mobile:   homepage categories/sections subcategories single posts and individual pages   Again, turn empathy into your most powerful tool: try to anticipate users' standard “routes” on your website. Then, see if all the categories in the hierarchy make instant sense.   9. Optimize Your Images By far one of the most effective and handiest “To Do's” on your mobile app launch checklist... Resizing your images and optimizing them for specific uses will speed up your app dramatically.  And speaking of “handy solutions”, you surely do not run out of options when it comes to image optimization tools:   Cloudinary, Fastly, Akamai, for hosting and optimization XNConvert, ImageOptim for on-off optimization Imagemin, Thumbor, Imageflow for automated optimization    10. Split Your Code: Break Down Large JavaScript Bundles into... Smaller Chunks Heavy bundles of JavaScript to be processed will just... slow down your mobile app.  This is why code splitting should be one of your top 10 issues to fix before launching a mobile app:   it will break those “beefy” JS bundles down into smaller pieces and deliver them way quicker ... only upon users' requests   Note: you can split your code either at a component or at a route level using tools like WebPack, Parcel, React... The END! These are the 10 essential To Do's to include in your mobile app launch checklist. Why? Because:   they address critical issues which, if left unsolved, will have the biggest impact on the user experience there are multiple handy solutions for them all (and most of them are free), that you only need to... apply Image by Fedorussie from Pixabay. ... Read more
Adriana Cacoveanu / Mar 26'2019
Writing HTML Code for Screen Readers: 6 Best Practices 
And developing a website with accessibility in mind means precisely that: to write your HTML code for screen readers. For those website visitors who depend on assistive technologies to fully enjoy the user experience delivered there. Therefore, the way you'll configure your HTML elements will have a sure impact on your website's overall accessibility: good or bad. In this respect, here's a checklist of the most effective (and handiest) ways to make your HTML elements fully visible and comprehensible to screen readers:   1.  Provide Alternate Text for Every Image on Your Website By far the handiest way to write HTML code for screen readers: just grow a habit of adding a succinct, yet perfectly comprehensive “Alt text” description to every new and old image on your website. Make it descriptive enough, but do look out for overly specific (and long) descriptions. Keep in mind to provide context... You'd thus prevent awkward situations where the assistive technology would just let that website visitor know that... there's an image on that page.   2. Writing HTML Code for Screen Readers: Use ARIA Attributes One of the best HTML accessibility best practices is to add ARIA (Accessible Rich Internet Applications) to your HTML elements. Why bother? Because this way you're providing visually-impaired users with more information about specific elements on a web page Take this example: the “role” attribute gives more context; it makes it easier for the screen reader (and the assisted user implicitly) to see what that element's “role” is in the context of that specific web page. Just add the “navigation” value to that “role” attribute and the screen reader can then interpret the HTML element as being a... menu. And then present the user with all the options listed there. Something intuitive for a user, but not so much for a visually-impaired one. And this is but one of the many functions for ARIA attributes that you could add to your HTML code to enhance its accessibility.   3. Declare A Page's Language in HTML You can and should do that via HTML. This way, if your website's accessed: from a different country by a visitor with different language settings … the screen reader “detecting” its default language will be quick to translate it. Note: if you have snippets of text in a language different from the default one on your website, remember to add a new language tag to each snippet. This way, you'll be signaling to screen readers that those specific parts should be translated accordingly.   4. Keep Your Links Short, but Not Too Short Try to find that ideal balance between confusingly long and ineffectively short text for your links. It's one of the “trickiest” parts of writing HTML code for screen readers: if you use too many words, since the link will get read out loud by the screen reader, it might just confuse the visitor in question if you make it too short, those users who rely on screen readers but still use their mouses to navigate websites might just... miss it   5. Use Semantic Tags: Make Your Content Readable and Understandable What do you think of when you say “semantic tags”? Tags like <b>, for bold text (and, therefore important information) or <i> for italicized text (which might indicate a quote) might be the first the come to your mind, right? But still, these are indicators for how the text should be displayed. And that's irrelevant for visually-impaired users... By comparison, 100% semantic tags, like <strong> and <em> indicate to the screen readers how that text should be interpreted. They're valuable “stage directions” on how it should be read to enhance the users' understanding.   6. Structure Your Pages so They... Make Sense to Screen Reader Users Writing HTML code for screen readers means also structuring your web pages with accessibility in mind. So, ask yourself common questions like: when a visitors tells his/her screen reader to jump to the main context section on a page, are the links there short enough not to confuse him/her and long enough not to... miss them? does that main context make sense to someone who can't interpret visual details like color scheme, layout, route of navigation? Would he/she still be able to make sense of your web page's structure? The END! Needless to add that the list of ways that you could tweak your HTML code for screen readers, for enhancing accessibility, is a... never-ending one. Start by focusing on these 6 aspects that will help you develop the right mindset for accessibility then... keep adding on more techniques. ... Read more
Silviu Serdaru / Mar 23'2019
How to Build a Social Network with Drupal: The 5 Essential Modules You Will Need
Planning to build a social network with Drupal? A business community maybe? A team or department collaborating on an intranet or portal? Or a network grouping multiple registered users that should be able to create and edit their own content and share their knowledge? What are those key Drupal 8 modules that would help you get started? That would help you lay the groundwork... And there are lots of social networking apps in Drupal core and powerful third-party modules that you could leverage, but first, you need to set up your essential kit. To give you a hand with that, we've selected: 5 modules in Drupal 8, plus a Drupal distribution, that you'll need to start a perfectly functional social networking website, with all the must-have content management features and knowledge sharing tools.   Before You Get Started: A Few Things to Take Care Of First of all, let me guess the features on your must-have list:   articles groups photos user profiles groups forums   It should feature pages with dynamic content leveraging a fine-grained access system and social media hubs, right? Well, now that we've agreed on this, here are the preliminary steps to take before you get actually started, installing your key modules and so on:   configure your “Taxonomy” categories after you've installed the Forum module set up a custom content type for Blog posts  set up your thumbnail settings for the Article nodes create your key user roles (admin, content author, paid subscriptions) use the PathAuto module to define your URL path structure define your Article nodes' thumbnail settings and remember to upload an anchor image, as well   1. Panels   Panels and Views make a “power team” to rely on for setting up pages with dynamic content for your social networking site. What makes it a must-have module to add to your essential kit when you build a social network with Drupal?  It enables you to create custom layouts for multiple uses. You get to use it to set up your website's homepage, one featuring multiple Views blocks with dynamic content retrieved from forums, articles, blogs... Feel free to add a top slideshow image, to go for multiple-tiled stacked layout, including views from forum, blog and article posts... In short: the Panels module empowers you to get as creative as possible when setting up fine-tuned layouts for your landing pages displaying dynamic content.   2. Views Not only that it enables you to present content to your social network's registered users in pretty much any form you might think of — tables, lists, blocks, forum posts, galleries, reports, graphs — but it also:   enables you to display related content (e.g. display a list of the community members along with their pieces of content) enables you to use contextual filters   It'll turn out to be one of the handiest Drupal 8 modules in your toolbox when you need to create and display dynamic content from:   forums blocks blogs   Yet, maybe one of the most common use cases for the Views module on a social networking website is that of: Setting up a (Views) page listing all the article posts.   3. Blog Another module you'll most certainly want to add to your social networking website as it:   enables both single and multi-user blogs empowers authorized site members to maintain it   Speaking of which, blog entries can be either public or private for a specific user, depending on the role he/she's assigned with. And it's precisely that system of user roles and corresponding permissions set up on your website that will determine whether a member can:   access the “Create Content” link or not access a “My Blog” section or... not   You can further leverage this Blog module to add a “Recent blog posts” block to your webpages, in addition to the “Blogs” navigation link on your main navigation menu.   4. Profile, a Must-Have Module to Build a Social Network with Drupal You just can't imagine that you could build a social network with Drupal without a module enabling you to create registration page fields, now can you? Well, here it is: the Profile module. And here are its “superpowers”:   it enables configurable user profiles it enables expanded fields on the user registration page it provides social network members with two different links, one for their account settings, one for their user profiles it provides private profile fields (that only the admin and that specific user can access) it enables you to set up different profile types for different user roles with... different permissions granted    5. Group The sky is the limit in terms of what the Group module enables you to do when you build a social network with Drupal:   it powers pretty much any scenario you can think of, from subgroups to specific per-group behavior, to access permissions... it enables you to put together content collections on your website and grant access to it based on your user roles and permissions policy it enables you to easily add relevant metadata to define the group & content relationships on your site it enables you to control all your settings via a user-friendly admin UI; no need to write custom code to determine what each group is allowed and not allowed to do on your social network   Open Social I just couldn't help it... Even though this was supposed to be a roundup of those essential modules you'll need to build a social network with Drupal, I had to add this Drupal distribution, as well. Open Social is that out-of-the-box solution that you can leverage to get your online user community up and running in no time. An open source software with all the needed features and functionality already pre-built, so that you can enable members on your network to:   work together share knowledge organize events   Convenience at its best when you want to start a social networking website without worrying much about:   installing a whole collection of modules doing custom work in the “backstage”.    The END! This is the minimal kit you'll need to build your online community website with Drupal. Would you have added other essential modules to the list? ... Read more
RADU SIMILEANU / Mar 16'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
Why Use a CDN? How Would It Benefit You More Precisely (If at All)?
Why not stick to a traditional web hosting server? Why use a CDN, as well?  After all, you can run your website, upload your videos and images and deliver content to your website visitors without relying on a CDN, right? Why bother, then? Do the benefits outweigh the costs? And is faster content delivery the only major advantage for implementing it? Now, let's look for some straight answers:   1. What Is CDN? It's a network of nodes... Nodes that are, in turn, mini-networks of systems and servers. What all these clusters of servers do is store content as cache (graphics, media files, text, documents, live video streaming data, scripts etc.) and serve it to their nearest users. The main benefit of using a CDN is the reduced distance that the data request would need to travel from the browser to the central data location. And also the reduced distance of the retrieved content from the server back to the end user's web browser. In this case, there would always be a server closer to the website visitor to process his request in a shorter time. Just imagine this benefit in the context of a peak load, like a flash sale on your website, with users from all over the globe flooding in.   2. Why Use a CDN: 8 Powerful Benefits    2.1. It Reduces Your Web Page Load Times  The significant push that a CDN gives to content delivery is the top reason why website owners opt for a CDN. The process behind it, the main “culprit” for the reduced page load times, can get summed up to this: A CDN would always retrieve data from its nearest node. The shorter the distance for the content request to go through, the quicker the page receiving that data will load.  As simple as that...   2.2. It Secures Your Website Against DDoS Attacks But first: “What are DDoS attacks?” They're those types of attacks when a hacker holds the resources on your server by “overwhelming” it with a heavy load. One causing your website to crash down... Now, how would a CDN help you prevent these malicious attempts? What does a CDN do, more precisely? It enables you to implement WAFs (web application firewalls) and “origin shields”, that will mitigate any attempt of a DDoS attack. And, since we've tackled the “boosted security” aspect, here are some other ways that a CDN can tighten the shield around your website:   the CDN edge servers: they withhold the heaviest load on your website, keeping it up and running even at traffic peaks; any attack on your server will first have to go through these edge servers, which, due to the decentralization of the data, won't bail on you you get to opt for a proxy and thus hide the origin of your IP address you can implement an SSL; even if the attackers manage to take over your server's resources, their access will then automatically... self-expire.   2.3. Your CDN-Based Website Gets Robust Enough to Withstand Peak Traffic  Why use a CDN?  Because it doesn't fail on you/your website when heavy loads of traffic strike. Thanks to its evenly distributed network of nodes, it's equipped to withstand any traffic “tsunami”. If one node fails, there's always a neighboring server ready to back it up and take on the load.   2.4. You'd Cut Down On Your Bandwidth Costs How? Well, it's quite obvious:   with multiple edge servers installed in a CDN, you reduce the strain put on your hosting server (your origin server); the load will then get distributed among the CDN nodes therefore, you'd offload CPU and use less server resources which will automatically translate into a lighter bill from your web hosting provider   Just imagine the bandwidth you'd save at traffic spikes... And there's more!  Another benefit of using a CDN is that it provides hotlink protection. This way, you can prevent others from embedding your assets on their own websites (which would otherwise turn into a “surprise” cost on your bill)   2.5. It's More Cost-Effective in the Long Run When you hear of giants like Netflix implementing a CDN solution you inevitably tell yourself: “Yes, but they can afford it." Time to bust this myth that a CDN integration is highly expensive once and for all.  Just think about it: A CDN would handle +60% of the total load on your website. So, your origin server would be using less bandwith for bearing its share of the load. That can only lead to a “friendlier” bill from your hosting provider. In short: a CDN is less costly in the long run.   2.6. Higher Ranks in the SERPs & Enhanced User Experience  And high loading speed is user experience... Your website visitors will benefit from the speed that a CDN “injects” into your website, whereas Google will reward it with a push in the SERPs. Use a CDN for images, since it's geared at increasing the crawl rate of media content (e.g. images).  In a traditional web hosting scenario, you'd have to restrain yourself from uploading too many images, since they're the main “culprit” for low page loading speed. That's not the case when you have a CDN solution hosting them...   2.7. It Helps Your Website Overcome the Scalability Hurdle Why use a CDN? Because it's built with scalability in mind.  Scalability which goes hand in hand with... availability. If, at some point, you need to expand to new geographic locations, your CDN will have got your covered: The cached content on your website will be available across a whole network of POPs, located in different regions. Therefore, any high load of traffic will be dynamically routed from one server to another, if one happens to... succumb. No matter the scalability challenge that your website might be faced with, you can be sure it will manage to deliver its content at high speed.   2.8. Faster Streaming Video  And this is no negligible benefit of using a CDN since video content's been ruling supreme for a while now. By cutting down the time-frame, a CDN geared at delivering dynamic content will automatically reduce the video latency. The time elapsed from the instant that a request is submitted to the moment it gets a response from the server is drastically shorter. The END! Have you got your answer now to the “why use a CDN?” question? Photo by Ken Treloar on Unsplash.  ... Read more
RADU SIMILEANU / Mar 08'2019
OPTASY: A Canada Clutch Leader for 2019
We wanted to share this good news with you: OPTASY, the Canadian Drupal firm, has been ranked as a 2019 "Canada leader" in 3 categories of the Clutch annual list. Top Development Firms in Canada Canada Top Web Developers Best PHP Developers in Canada Thank you! For taking the time to answer the Clutch team's questions and give your honest feedback on working with us. For challenging us to be our best and turn our expertise into your results. We're looking forward to working with you on new projects. Sincerely, The OPTASY team... Read more
Adriana Cacoveanu / Mar 07'2019