LATEST FROM OUR BLOG

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

What Makes the End-User Experience in Drupal 8 Stand Out?
What makes Drupal a great choice from a UX standpoint? What features are responsible for the enhanced end-user experience in Drupal 8? Those features that enable you to easily create an intuitive and enjoyable visitor experience on your own Drupal-based website/application. And to constantly improve it... Is it all those performance enhancements that it ships with? Or maybe its “responsive out-of-the-box” nature? Or rather its multilingual capabilities?   1. But First: 7 Evergreen Ways to Improve Your Website's UX It goes without saying that, in order to create an enjoyable, rich user experience on your Drupal 8 website, you'll need to:   put together a solid UX strategy run extensive user research and map the user's journey come up with an effective, well-planned UX design, paying attention to all the latest design trends (and now decoupled Drupal empowers you to tap into a whole range of new possibilities...)   And while carrying out all these phases of the UX design process, make sure to apply the following evergreen techniques for enhancing the visitor's experience.   1.1. Optimize the page loading time For speed will always be the factor with the biggest influence on the user's experience on your Drupal site. In this respect, there are tons of performance enhancements that you can implement, ranging from aggregating your JS and CSS files to properly configuring your cache to opting for a CDN, to...   1.2. Use bullets to structure your text Bulleted lists are the “holy grail” of neatly structured, easy to read content. For, in vain you invest time and effort in providing content that delivers real value to your website's visitors if you display it as an... “impenetrable” block of text. In this respect, bullets help you break down the information. The result: users will see the key product or service benefits/will go through all of the presented features a lot quicker.   1.3. Use white space strategically Speaking of easy to read content: there's no better way to enhance readability and to draw attention to specific elements on a page than... by using the white space itself. It will automatically direct their attention to the text/image emphasized by all the white space surrounding it.   1.4. UX design is consistent design From color palette to button styles, from the size of the headings in your text to the chosen font, from the used photos to various design elements... keep consistency across all the pages on your Drupal website. Otherwise, you risk to confuse and to eventually... tire its visitors.   1.5. Go for visible, attractive CTAs Always use action words for your calls to action and make sure they're easily recognizable. CTAs play a crucial role in setting up an intuitive, efficient navigation structure on your website...   1.6. Use images wisely As images are always well-deserved “breaks” for the eye, especially when it's a long text that it's challenged to go through. And yet, if you fail in using the relevant images, those that perfectly team up with your text... the user experience that you'll deliver will be anything but compelling...   1.7. Make your headings a high priority  Remember to write your headings around some of the main keywords. Also, strategically design them so that they're highly visible and help users to quickly scan through the content.   2. 4 Features Responsible for the Superior End-User Experience in Drupal 8 Gluing together all the design best practices that make a great user experience does call for a flexible and dynamic web platform. Drupal 8 is that platform. It comes packed with powerful features that make it easy for you to create the best visitor experience on your website. Here are the ones with a huge influence on your website's UX:   2.1. Drupal 8 is responsive right out-of-the-box And responsiveness, along with top page loading speed, still is one of those factors with a great influence on visitors' experience with your Drupal website. With:   all the available base themes now being responsive the convenience of adapting your images to various screen sizes right from their display properties   … creating a compelling end-user experience in Drupal 8 is dead-simple. 2.2. Enhanced performance From a performance standpoint, Dries Buytaert's post on Drupal 8's performance optimizations is still one of the most relevant sources. If Drupal was already built to “inject” enterprise-level performance into static pages, Drupal 8, with all its caching enhancements, is designed to speed up dynamic web pages, as well... 2.3. Multilingual capabilities Remember the user experience's main facets, ranging from useful to findable, to valuable, to credible to... accessible? Well, Drupal 8 provides you with multilingual capabilities right out of the box. You get to translate your website's UI, content, configuration, etc. Meaning that, with this multilingual system at hand, you can easily create an accessible user experience on your website. 2.4. Content personalization (by segment, login time, device, language...) In this respect, the Aqua Lift Connector module is your most reliable tool. What it does is bring together customer data and content, so that you can deliver targeted content experiences across multiple channels and devices.   The END! And these are those robust features that stand behind the superior end-user experience in Drupal 8. The very reasons why this platform, and particularly this version of Drupal, makes your best ally in creating the most compelling UX on your website. Photo by Lucian Novosel on Unsplash ... Read more
Adriana Cacoveanu / Apr 17'2019
What Are the Key Factors Influencing the Mobile App Development Cost? Top 9
What's the rough cost of an application? What goes into its price more precisely? What are those heavy weight factors that influence and end up determining the mobile app development cost? Is it the (custom) features and app-specific functionality that you need to get implemented into your app? Or maybe the app development company itself? The chosen platform, the post updates, the number of screens or maybe the API development and integration? Or rather all of these elements, plus a few more? Here's a breakdown of the key aspects which, all put together, will decide your mobile app's price tag:   1. The Mobile App Development Platform Itself As it “dictates” the operating system that your app will run on: Windows OS, Android OS, iOS OS, Blackberry OS. And, therefore, it heavily influences the cost of the mobile app development process itself. What type of mobile application do you have in mind? Who's going to be its target audience? These are but 2 of the crucial questions whose answers will determine your choice of app platform.  Note: do keep in mind that it's your mobile app development platform of choice that will determine the version of the OS system, as well. With Android, your available options go from Jelly Bean to Nougat, from KitKat to Marshmallow and Lollipop. Whereas with iOS you'll get to choose between version 9, 10 and 11.   2. The Features You Need Will Strongly Influence the Mobile App Development Cost How does your list of “must-have” features look like? And what about your... “nice to have” one? Do your expectations in terms of app functionality go from:   push notifications to geolocation to in-app purchases to streaming to user login to offline mode to media content (smileys, emoticons, editing functionality here included) to Google maps integration to instant messaging?   Well then, do keep in mind that every feature on your wishlist is going to get reflected on the bill. You might want to trim it down a bit. But if you've decided to stick to your feature requirements, make sure they're perfectly:   adapted to your target audience's expectations suited for your specific type of mobile app   3. The Contracted Team of Mobile App Developers Itself And it's not just the proven expertise and experience of the team members that will influence the mobile app development cost, but their... number, as well. A “standard” app development team would include:   UX or/and UI designer(s) QA engineer project manager in-house mobile app developer(s)   Plus a back-end developer, depending on your specific requirements (whether you'll need an API developed, as well, or not). An extended team could include also 1 system administrator, plus more people for each one of the above-mentioned roles.  A larger team translates into higher costs, right? Yet, a too small team might also reflect in the longer time spent working on your app project. And time is... money. In short, when evaluating the potential candidates, try to balance your budget and those teams' level of proficiency. Your specific feature requirements and their provable experience in implementing them. For, a badly integrated functionality could be cheaper now, yet get quite expensive on a long term...   4. Your Specific Back-End & API Development Needs Do you need an API? A scalable and powerful back-end for your app's content and data? And would a basic cloud-based server suit your needs or do you need a middleware layer developed, as well?  Start analyzing all these variables and knowingly make your choices: all back-end and API requirements will finally bubble up to the mobile app development cost estimate...   5. Your Post-Development Updates & Maintenance Requirements Just think of every user as of a new potential “risk”. One that could unknowingly inject all types of bugs and threats into your future app. How will you get these risks under control? By:   implementing a continuous maintenance process running regular updates on your mobile app   And having a dedicated team at your service to keep your application “sanitized” and properly updated does come with a price tag on... One that will influence your mobile app development cost.   6. The Copyright and App Licensing Options Just imagine: you've waited from 3 up to 6 months for your app to be ready, with all the “valuable” features and custom functionalities “baked in”. Then, after another few months, key elements from it get copied. To avoid such a scenario, there's another aspect (and cost) to consider: applying for copyright.  You'll need to invest in an app license, that will protect your mobile application from getting copied.    7. The Number of Screens to Be Incorporated into Your App How many screens have you planned for your future mobile app? The answer to this question is highly influenced by the “palette” of features that you want to get incorporated into your app. The more of them, the more screens will need to be implemented... And the higher the price will be, obviously. Your app development team's invested resources of time and effort will be proportional to the number of screens you'll request from them.  In short: be 100% certain that each and every feature that you wish to have implemented in your app is relevant and it adds value. No need to overcrowd your app with lots of screens crammed with non-essential features.   8. Native or Hybrid Mobile App? What Will It Be? And each type of mobile app comes with its own advantages and disadvantages:   native mobile apps stand out in terms of performance and come bundled with a wide range of functionalities; yet, do expect a high mobile app development cost (and a longer development cycle, as well) hybrid mobile apps get developed and running in no time, across multiple platforms, so they're much more cost-effective; yet, they do not “rock” in terms of performance, nor do they live up to the same UX standards as the native ones   The choice depends entirely on your own priorities: outstanding performance & a full range of functionalities vs versatility & lower costs... Note: needless to add that there are other aspects related to your app-specific type — basic functionality app, app depending on the device's hardware, data-driven app — that will influence its development cost.   9. The Security Features to Be Implemented And you need to give this aspect its due consideration. With payment gateways integrated into your future app and loads of confidential user data being handled there, you can't afford to underrate the security aspect. It goes without saying that the mobile app development cost will get influenced by the specific security features that you'll integrate.   Final Word  Identify your needs before even attempting to estimate the mobile app development cost. And, most importantly: set them apart from your... wishes. It's only after you've put together your own list of requirements, project-specific constraints, and preferences that you can arrive at an accurate estimate. Image by krzysztof-m from Pixabay ... Read more
Adriana Cacoveanu / Apr 10'2019
How to Make Your Mobile Call to Action Buttons Intuitively Usable: 10 Best Practices
Simple, yet visible enough, actively persuasive, yet not invasive, powerful, yet intuitive. How do you make your mobile call to action buttons intuitively... usable? What are those techniques which, once applied, enhance their intuitiveness? And thus boost their effectiveness, as well... How do you know whether your current mobile CTAs aren't optimally designed for mobile devices and adapted to mobile users' specific UX needs?    users spend too much time on the action screen; it's not obvious enough for them which are the highest priority actions to take, there are too many options crammed in there, too much text, etc. your click-through rate could be... better, to say the least   Now, here are 10 straightforward, yet highly effective tips to make your mobile call to action buttons more effective:   1. Bold Your Text Labels Differently to Indicate Priority Level A simple, yet powerful technique, that's often underrated: varying the boldness of mobile CTAs based on priority. This way, you'd put different emphasis on the various actions referred to.  For instance, is the action of “checking out” more important than that of “viewing the cart”? Indicate this hierarchy of priorities using varied intensity when you bold your text labels: go from the least bold to... the boldest.   2. Go for Button Shapes Instead of... Text-Only “Buttons” Stick to the safe beaten road of UX when designing your mobile call to action buttons: don't trade straightforwardly shaped buttons for text-only ones. You'd only end up confusing your users: “Is that a button or a piece of information?” And you'd risk having them miss/skip your most important CTA because... they won't notice it or just take it for... copy. In other words: place your text labels into “familiar” button shapes.   3. Consider Those Screen Areas of "High Thumb Activity" Always take heed of “the thumb zone”! It's made of all those key spots on a phone's screen that are the easiest for users' thumbs to reach and to... click on.  Once identified, strategically place your mobile CTAs there...   4. Consider Users' Natural Scanning Pattern when Placing Your CTAs Do you want your mobile call to action buttons to be (just) visible or effective? In this respect, placing the highest priority CTA first, will make it visible, but not necessarily effective, as well. Why? Because users are then forced to scan the screen bottom-up. And this is not their natural flow: first the “Checkout” button, then the “View Cart”, then the “Continue Shopping” buttons... Any deviation from this familiar flow will affect the “intuitiveness” of your CTAs.   5. Stick to the Best Practices for Mobile Call to Action Placement Left or right? Top or bottom? Where is it most effective to place your mobile CTAs on the screen? You'll get the best answer to your question only once you've studied your target audience:   what triggers them to... action? what catches their attention first on a screen?   Run some tests to identify those best practices on call to action placement that are most effective for your own scenario.   6. Keep It Straightforward: One CTA Per Page Challenging users with too many options is another “self-sabotaging” technique. So, make sure you don't fall into the trap of overcrowding your screens with multiple CTAs. Instead, make the most of that limited real estate on a mobile device's screen and place just one CTA per given space.  Otherwise, you only risk discouraging users with a too complicated decision-making process...   7. Use Color Wisely to Signal Progressive Actions & Priority Levels Let's take 3 of the most common actions that mobile users are presented with: “Continue shopping”, “View cart” and “Checkout”.  Now, how would you indicate a given user the lowest, the medium and highest priority action to take? How would you signal progressive actions (as opposed to regressive actions, like “view cart”)? You use the same color, but with different levels of saturation and brightness. Note: using equally saturated color on all your mobile call to action buttons wouldn't make the hierarchy of priorities very intuitive, while using different colors would only place the same emphasis on all those progressive actions. Tip: to indicate the highest priority, you could also opt for light text label set against a dark background; as opposed to the dark text on a lighter background, that you'd use for lower priority CTAs.   8. Use White Space to Make Your Mobile CTAs Stand Out And this best practice goes hand in hand with the “one CTA per given space” technique: let the white space work for you/your call to action button.  Make sure to wrap it in enough white space to help it... stand out and catch users' attention.  You'd then:   make the most of the limited real estate that you're constrained to work with avoid unwanted scenarios where, due to screens crammed with text and CTAs, users accidentally click the “wrong” links   9. Keep Your Copy Concise, Yet Persuasive Your mobile call to action buttons should feature text that's:   short, yet descriptive enough concise, yet actively persuasive action-oriented   10. Use an Icon to Indicate the Highest Priority Action What about color blind users? How can you make your mobile call to action buttons visible and intuitively easy to use for them, as well? For using color wisely and varying the boldness of your text labels to indicate different priority levels sure isn't helpful for them. Well, you go with an... icon. Just place it inside your checkout button and you'll make it stand out even more. It will be that visual element that they'll spot and cling to once they lend on a screen.  The END! These are our 10 easy to implement techniques that will help you boost the “intuitiveness” of your mobile call to action buttons. Would you have added other ones, as well? Image by LeoNeoBoy from Pixabay. ... Read more
Silviu Serdaru / Apr 05'2019
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