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.

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
Headless CMS vs Traditional CMS: Which One Is the Best Fit for Your Needs?
“Should I stay or should I go?” Should you stick to an all-too-familiar traditional CMS and “reap” the benefit of getting loads of much-needed functionality out-of-the-box? Or should you bid on flexibility, top speed, and versatility instead? In a headless CMS vs traditional CMS “debate”, which system best suits your specific needs? Now, let me try and “guess” some of the CMS requirements on your wishlist:   to have all the needed functionality “under the same hood” (a predefined theme, robust database, a user-friendly admin dashboard...) to be developer friendly to integrate easily and seamlessly with any modern JS front-end of your choice to “fuel” your website/app with high speed   Needless to add that: You can't have them all in one CMS, either traditional or headless. What you can actually do is:   set up a hierarchy with all your feature needs and requirements set it against each of these two types of CMSs' advantages and limitations    Just see which one of them “checks off” the most requirements on your list. Then, you'd have yourself a “winner”. So, let's do precisely that: A headless CMS vs traditional CMS comparison to help you determine which one's... a better fit for you.   1. Traditional CMS: Benefits and Challenges Everything in one place... That would be a concise, yet fully comprehensive definition for the traditional CMS. Just imagine a content management system that provides you with all the critical features and functionality, all the needed elements straight from the box:   a generic theme a dashboard for easily managing your own content a predefined database PHP code for retrieving the requested content from your database and serving it to the theme layout   The back-end and front-end, meaning the code, database, and the layout/design, are “under the same hood”, strongly coupled.  It's all there, pre-built, at hand... “Convenience” must be another word for “traditional CMS”.   Security & Performance: A Few Challenges to Consider  Getting all that critical functionality out-of-the-box does translate into... code. Lots and lots of code, lots and lots of files. Which also means lots and lots of potential vulnerabilities to be exploited. There could be an error in any of the files in that heavy load of files that you get. Or a query string parameter that could be turned into “free access” into your database... Therefore, the convenience of built-in functionality does come with its own security risks.  Also, whenever you make a “headless CMS vs traditional CMS” comparison, always be mindful of the maintenance aspect: Of the upgrading that you'll need to perform with every new security patch that gets released. Now, as regards the performance “pumped” into your traditional CMS-based website/application, just think: compiling files. That's right! Consider all those custom files, in addition to the pre-defined ones that you'll be provided with, that you'll pile up for... customizing your website.  All these files, all the new libraries that you'll want to integrate, will need to get compiled. Which can only mean:   more stress put on your server memory  copying code of functionalities that you might not even use a poor page loading time, with an impact on the user experience provided on your website   2. A Traditional CMS Is the Best Choice for You If... Now, you must be asking yourself: “How do I know if a traditional CMS is the best fit for my own use case?” My answer is: You go through the here listed “scenarios” and see if any of them matches your own.   you already have a team of PHP experts with hands-on experience working with a particular CMS (Drupal, WordPress...) it's a stand-alone website that you need; no other applications and tech stack that might depend on a CMS's provided functionality you're not opinionated on the technology that your website will get built on   3. Headless CMS: What Is an API-Based Website, More Precisely? “It's a CMS that gives you the flexibility and freedom to build your own front-end — Angular, Rails, Node.js-based, you name it — and integrate it with content management tools via an API." In short: your headless CMS can then serve raw content —  images, text values —  via an API, to a whole “ecosystem” of internet-connected devices: wearables, websites, mobile apps.  And it'll be those content-consuming devices' responsibility to provide the layout and design of the content delivered to the end-users. What's in it for you?   it dramatically streamlines the development cycle of your API-based website; you can get a new project up and running in no time there's no need to pile up lots and lots of files and the code of out-of-the-box functionalities that you might not even need if there's a particular service that you need — store form submissions or a weather forecast —  there's always a specific service with an API that you could integrate to have that particular content served on your website   A headless approach gives you the freedom to integrate exclusively the functionalities that you need into your website. Moreover, you still get a dashboard for easily managing your content. Your headless CMS will have got you covered on this. With no code being “forced” into your website/mobile app or need to perform a performance “routine” for this. You get it by default.   Security and Performance: Main Considerations In terms of security, a short sentence could sum all the advantages that you can “reap” from having an API-based website: There's no database... Therefore, there are no database vulnerabilities, no unknown gateway that a hacker could exploit.  Furthermore, in a “headless CMS vs traditional CMS” debate, it's important to outline that the first one doesn't call for an administration service.  Meaning that you get to configure all those components delivering content to your website as you're building it. Except for that, the rest of the dynamic content gets safely stored and managed in your headless CMS. “But can't anyone just query the service endpoints delivering content on my API-based website?” True. And yet, there are ways that you can secure those channels:   use double-authentication for sensitive content  be extra cautious when handling sensitive data; be mindful of the fact that anyone can query the JS implementation    Now, when it comes to performance, keep in mind that: It's just assets that your web server will provide. As for the content coming from all those third-party services that your headless CMS is connected with, it will get delivered... asynchronously. Now, considering that:   most of those endpoints are hosted in the cloud and highly flexible  the first response — the first static HTML file that gets served  — is instant you could go with a headless CMS that leverages a CDN for delivery in a traditional CMS scenario the website visitor has to wait until the server has finished ALL the transactions (so, there is a bit of waiting involved in there)   … you can't but conclude that in a “headless CMS vs traditional CMS” debate, the first one's way faster.   4. Use a Headless Approach If...   you already have your existing website built on a specific modern tech stack (Django, React, Node.js, Ruby on Rails) and you need to integrate it with a content management system, quick and easy you don't want your team to spend too much time “force-fitting” your existing tech stack into the traditional CMS's technology (React with... WordPress, for instance) you need your content to load quickly, but you don't want a heavy codebase, specific to traditional CMSs, as well you want full control over where and how your content gets displayed across the whole ecosystem of devices (tablets, phones, any device connected to the IoT...) you don't want to deal with all the hassle that traditional CMS-based websites involve: scaling, hosting, continuous maintenance    5. Headless CMS vs Traditional CMS: Final Countdown Now, if we are to sum it up, the two types of CMSs' pros and cons, here's what we'd get:   Traditional CMS It comes with a repository for your content, as well as a UI for editing it and a theme/app for displaying it to your website visitors. While being more resource-demanding than a headless CMS, it provides you with more built-in functionality.   Headless CMS It, too, provides you with a way to store content and an admin dashboard for managing it, but no front-end. No presentation layer for displaying it to the end user. Its main “luring” points?   it's faster it's more secure more cost-effective (no hosting costs) it helps you deliver a better user experience (you get to choose whatever modern JS framework you want for your website's/app's “storefront”)   It's true, though, that you don't get all that functionality, right out-of-the-box, as you do when you opt for a traditional CMS and that you still need to invest in building your front-end. In the end, in a “headless CMS vs traditional CMS” debate, it's:   your own functionality/feature needs your versatility requirements  the level of control that you wish to have over your CMS your development's team familiarity with a particular technology   … that will influence your final choice. Photo from Unsplash ... Read more
Silviu Serdaru / Mar 06'2019
3 Types of Content Management Systems to Consider in 2019: Traditional CMS vs Headless CMS vs Static Site Generators
Kind of stuck here? One one hand, you have all those software development technologies that are gaining momentum these days —  API, serverless computing, microservices — while on the other hand, you have a bulky "wishlist" of functionalities and expectations from your future CMS.  So, what are those types of content management systems that will be relevant many years to come and that cover all your feature requirements? And your list of expectations from this "ideal" enterprise-ready content infrastructure sure isn't a short one:   to enable you to build content-centric apps quick and easy multi-languages support user role management a whole ecosystem of plugins inline content editing to be both user and developer friendly personalization based on visitors' search history to support business agility search functions in site   ... and so on. Now, we've done our research. We've weighed their pros and cons, their loads of pre-built features and plugins ecosystems, we've set them against their “rivaling” technologies and selected the 3 content management systems worth your attention in 2019:   But What Is a Content Management System (CMS)? A Brief Overview To put it simply: Everything that goes into your website's content —  from text to graphics — gets stored in a single system. This way, you get to manage your content — both written and graphical — from a single source. With no need for you to write code or to create new pages. Convenience at its best.   1. Traditional CMS, One of the Popular Types of Content Management Systems Take it as a... monolith. One containing and connecting the front-end and back-end of your website: both the database needed for your content and your website's presentation layer. Now, just turn back the hands of time and try to remember the before-the-CMS “era”. Then, you would update your HTML pages manually, upload them on the website via FTP and so on... Those were the “dark ages” of web development for any developer... By comparison, the very reason why content management systems — like Drupal, WordPress, Joomla — have grown so popular so quickly is precisely this empowerment that they've “tempted” us with: To have both the CMS and the website's design in one place; easy to manage, quick to update.   Main benefits:   your whole website database and front-end is served from a single storage system they provide you with whole collections of themes and templates to craft your own presentation layer quick and easy to manage all your content there are large, active communities backing you up   Main drawbacks:   they do call for developers with hands-on experienced working with that a specific CMS except for Drupal, with its heavy ecosystem of modules, content management systems generally don't scale well they require more resources —  both time and budget — for further maintenance and enhancement   A traditional CMS solution would fit:   a small business' website a website that you build... for yourself an enterprise-level website   … if and only if you do not need it to share content with other digital devices and platforms. You get to set up your website and have it running in no time, then manage every aspect of it from a single storage system. Note: although more often than not a traditional CMS is used to power a single website, many of these content infrastructures come with their own plugins that fit into multi-site scenarios or API access for sharing content with external apps.   2. Headless CMS (or API-First Pattern) The headless CMS “movement” has empowered non-developers to create and edit content without having to get tangled up in the build's complexities, as well. Or worrying about the content presentation layer: how it's going to get displayed and what external system will be “consuming” it. A brief definition would be: A headless CMS has no presentation layer. It deals exclusively with the content, that it serves, as APIs, to external clients. And it's those clients that will be fully responsible with the presentation layer. Speaking of which, let me give you the most common examples of external clients using APIs content:   static page application (SPA) client-side UI frameworks, like Vue.js or React a Drupal website, a native mobile app, an IoT device static site generators like Gatsby, Jekyll or Hugo   A traditional CMS vs headless CMS comparison in a few words would be: The first one's a “monolith” solution for both the front-end and the back-end, whereas the second one deals with content only. When opting for a headless CMS, one of the increasingly popular types of content management systems, you create/edit your website content and... that's it. It has no impact on the content presentation layer whatsoever. And this can only translate as “unmatched flexibility”: You can have your content displayed in as many ways and “consumed” by as many devices as possible.   Main benefits:   front-end developers will get to focus on the presentation layer only and worry less about how the content gets created/managed content's served, as APIs, to any device as a publisher, you get to focus on content only it's front-end agnostic: you're free to use the framework/tools of choice for displaying it/serving it to the end-user   Main drawbacks:   no content preview  you'd still need to develop your output: the CMS's “head”, the one “in charge” with displaying your content (whether it's a mobile app, a website, and so on) additional upfront overhead: you'd need to integrate the front-end “head” with your CMS   In short: the headless CMS fits any scenario where you'd need to publish content on multiple platforms, all at once.   3. Static Site Generators (Or Static Builders) Why are SSGs some of the future-proofed content management systems?  Because they're the ideal intermediary between:   a modular CMS solution a hand-coded HTML site   Now, if we are to briefly define it: A static site generator will enable you to decouple the build phase of your website from its hosting via an JAMstack architectural pattern. It takes in raw content and configures it (as JSON files, Markdown, YAML data structures), stores it in a “posts” or “content” folder and, templating an SSG engine (Hugo, Jekyll, Gatsby etc.), it generates a static HTML website with no need of a CMS. How? By transpiling content into JSON blobs for the front-end system to use. A front-end system that can be any modern front-end workflow. And that's the beauty and the main reason why static site generators still are, even after all these years, one of the most commonly used types of content management systems: They easily integrate with React, for instance, and enable you to work with modern front-end development paradigms such as componentization and code splitting.  They might be called “static”, yet since they're designed to integrate seamlessly with various front-end systems, they turn out to be surprisingly flexible and customizable.   Main benefits:   they're not specialized on a specific theme or database, so they can be easily adapted to a project's needs Jamstack sites generally rely on a content delivery network for managing requests, which removes all performance, scaling and security limitations  content and templates get version controlled with right out of the box (as opposed to the CMS-powered workflows) since it uses templates, an SSG-based website is a modular one   And, in addition to their current strengths, SSGs seem to be securing their position among the most popular types of content management systems of the future with their 2 emerging new features:   the improvement of their interface for non-developers (joining the “empower the non-technical user” movement that the headless CMS has embraced); a user-friendly GUI is sure to future-proof their popularity the integrated serverless functions; by connecting your JAMstack website with third-party services and APIs, you get to go beyond its static limitation and turbocharge it with dynamic functionality    To sum up: since they enable you to get your website up and running in no time and to easily integrate it with modern front-end frameworks like Vue and React, static site generators are those types of content management systems of the future. The END! What do you think now? Which one of these CMS solutions manages to check off most of the feature and functionality requirements on your wishlist? ... Read more
RADU SIMILEANU / Feb 26'2019
Ensuring a Website Accessibility Is the Editor Responsibility, as Well: 6 Best Practices for Creating Accessible Content
For it's not just the developer's job to code it or the designer's task to design it. It's your responsibility as well, as a content editor, to... write a website's accessibility. Creating accessible content is how you can contribute, directly, to ensuring its accessibility. Since it's a shared responsibility: a website's accessibility is not just coded and designed, it's written, as well. Your own accessibility checklist, as a content editor, would include tasks like:   adding alternative texts to every non-text element of the content writing relevant, descriptive text links putting together an easily scannable headings structure writing clear copy   In one word: your self-assigned “mission” when it comes to making a website accessible for everyone is to create/further optimize every aspect of the website's content with accessibility in mind. With empathy...   But What Is Accessible Content? First of all, we should make one thing clear: “Web content that's accessible to everyone” doesn't mean just “web content that's also accessible to people with various disabilities". It also refers to content that can be easily accessed and understood by:   smartphone users elderly users with no broadband users with low literacy users with English as their second language   Now, a website's content is accessible if it follows the WCAG 2.0 standards from the W3C. Or the POUR checklist if you wish:   perceivable: content should be presented so that the website users can perceive it effortlessly and instantly operable: the way it's structured should be easily operable understandable: a content's understandable once it's simple and concise and its structural elements meaningful  robust: content should be easily scanned through and correctly interpreted by assistive technologies   #1 Tip: Add Alternative Text to Non-Text Content Elements Here's a quick empathy test for you: Imagine that you're a visually impaired user. You access a website displaying lots of visually-striking imagery that you cannot or can hardly see.  Or maybe there's a button there, on the homepage, that you need to click in order to listen to a podcast, but you just can't spot it. See my point? Creating accessible content means adding alternative text to every non-text content element — image, design element, chart/table, button — on the website. Screen readers can read text only: they cannot interpret images for their assisted users...   A few best practices for using ALT text:   keep your text under 125 characters there's no need to start your alternative text with “image for...” when possible, restrain yourself from using images with text (e.g. diagrams or graphs)   # 2 Tip: Write Clear Copy For clear copy is... accessible copy. Keep your writing simple, your core ideas clear and always use plain language. This way, you'll make the message on the website accessible to everyone:   visitors with cognitive disabilities non-native English speakers users accessing the website from their mobile devices   Best practices for writing clear copy:   use active voice put the key ideas up front always “bet on” short sentences stay away from jargon avoid idioms   # 3 Tip: Writing Accessible Headings Means Creating Accessible Content  Writing for accessibility means, among other things: Structuring and styling your content so it's scannable. And relevant, properly formatted headlines will allow assistive technologies (and their assisted users, implicitly) to scan through your content, jumping from heading to heading. This way, they can easily find what they're particularly interested in, instead of forcing them to go through the entire chunk of content.   A few best practices for writing accessible headings:   go for clear and relevant headlines rather than “cute” or “smart” ones don't just bold your headlines, but use the proper hierarchy (H1, H2, H3...) and formatting —  <h> tag — instead   Note: if you overlook to format your headlines using the <h> tag, the assistive technologies won't recognize them as... headlines.   # 4 Tip: Accompany Links with Good, Descriptive Link Texts And creating accessible content does mean tackling "the links issue”: Whenever you're creating a link, make sure to add a descriptive link text, too. This way, it will be crystal clear, to all users, what kind of page that link would take them to, once/if clicked...   Some best practices for writing link texts:   make sure to signal if the link leads to a download; just insert the word “Download” in the link text or “PDF” in parentheses or “new window” keep it concise, so that the screen reader can read it fast enough avoid using “ALL CAPS” in your link text, they're harder to read avoid relying on color, only, to indicate linked text, as that's not at all writing for accessibility if you consider the color blind visitors on the website   #5 Tip: Use The Right HTML Tags to Create Bulleted Lists Can't have a clean, scannable text without some bulleted or numbered lists strategically “sprinkled” here and there, right? Just remember to format them properly:   use the <ul>  tag for bulleted lists … and the <ol> tag for numbered lists   # 6 Tip: Add Captions & Transcripts to Your Audio/Video Content Now, just try to step into the shoes of a non-native English speaker, of a hard of hearing/deaf visitor or of a user unfamiliar with the speaker's accent. How accurately would you be able to understand a video or audio piece of content? Creating accessible content means, also, adding text versions — captions — to the videos and the audio content displayed on the website.    Best practices for creating captions:   write your own captions, don't rely on automated ones (or rely on a service that transcribes the audio content for you, like Rev) make sure your captions are synchronized … exhaustive: remember to caption sound effects and background music/noise, as well and equivalent: avoid paraphrasing   Note: also, keep in mind to add a static transcript, too, useful for any user who won't/can't access your video or audio content and depends on the equivalent text   Wrap Up: Make Accessibility Part of Your Content Creation Process Making your content (more) accessible should be an integral part of your editorial workflow, not a last-minute checklist to handle. Therefore, grow a habit of:   adding alt text while you're editing your copy adding a caption as you're editing that new video that you're about to upload structuring and formatting your headings as you're working on your new blog post and so on...   In short: adopt an accessibility-first approach to your content! ... Read more
Adriana Cacoveanu / Feb 20'2019
How Do I Optimize My Website for Voice Search in 2019? 4 Web Design and Content Planning Tips
Is your website adapted to... lure in and greet voice searchers? It should, considering that there are a ton of stats showing that by 2020 30% of online searches won't even... involve a screen anymore. Voice searches are (already) taking over text-based searches. So, the question “haunting” you right now must be: “How do I optimize my website for voice search in 2019?" For, what grew as a mega-trend in 2018 — no less than 1 billion voice searches performed in January alone — will turn into reality this year. And there's no surprise here. It's just... convenience at its best:   no hands, not even a screen are required spoken language over a lot more formal, rigid written language   Now, getting back to your legitimate concern — how to get your website voice search-friendly — here are the web design and content creation/planning best practices for voice search optimization. The 2019 guide version...   1. Put the Most Sought After Information at the Very Top OK, here's the situation: User “X” has opted to use his/her search voice gadget or voice assistant to make an online query. This can only mean 2 things:   that he/she wants to skip all the steps that a text-based search would require — all that clicking and scrolling — and take the shortest path to find the needed information that he/she looks for a specific piece of information or wants to perform a specific action   And I don't mean just making a call. For instance, here's the next most sought after information or “want to perform" actions where users would use voice search instead of text:   to make an appointment to get information about any current sales, promotions and special offers (e.g. free shipping offers) to find out what are the opening hours of a given brick-and-mortar store... to get information about upcoming events   How do you prepare your website for voice search from this standpoint?  You put the most commonly sought after information in the header! So potential customers can... “grab” it as soon as they've uttered their voice queries. For instance, you could display snippets of information in the navigation bar...   2. Use Conversational Phrases and Long Tail Voice-Oriented Keywords “How do I optimize my website for voice search in 2019?” A short answer would be: By “sprinkling” conversational, long-tail keywords on your web content. By focusing your SEO efforts on phrases, even whole sentences. For, let's face it: The spoken language is clearly different from the written language. Voice queries have nothing to do with the “stiff”, standard keywords that we'd use for performing a text-based search.  In this respect, use voice-oriented keywords and phrases/sentences in your featured snippets, in your metadata... 3. “How to Optimize My Website for Voice Search in 2019?” Localize Content In other words: optimize for local voice search. And it's no “mystery” here: 46% of voice searchers look for information on businesses in their geographic area. Just put yourself in their shoes: It's far more likely that you utter “Where can I eat the best pasta in New York” compared to “Where can I eat the... in USA?” So, make sure you localize the content on your website. Meaning that you:   use verbiage and colors that resonate with those locals use visuals specific to that region include the name of that city/region (don't forget about your metadata) tag your images and video content with the name of that city/region put together location-specific pages on your website   In short, local voice search optimization is made of all those efforts geared at helping your website rank high in the voice search results. Where the voice searches are based on “... near me” or “... in [name of location]” type of queries. A piece of advice: optimizing your website for local voice search also means keeping critical information about your business —  opening hours, location, updated contact number(s) — up to date and most visible in your profile. Also, do consider creating content around business profile-relevant keywords, like “best Italian restaurant” or more specific ones: “the best carbonara pasta”.    4. Anticipate The Most Frequently Asked Questions and Create Content Around Them Another top answer to your “How to optimize my website for voice search in 2019” type of question would be: Creating content answering those specific voice queries that your potential customers are most likely to perform. And how do you anticipate those most frequently asked questions?  You rely on powerful tools like Answer the Public and, if your website's old enough, you dive into your Google Analytics data. There, under Acquisition > Search Console > Queries you'll find plenty of valuable information to explore and “exploit”. Once you know what the most common queries are, start creating your targeted content:   write quality blog posts around the answers to those “popular” questions  remember to insert those highly relevant long-tail keywords in your metadata put together a detailed FAQ page on your website place the answers to those frequently asked questions in featured boxes; this way, they'll just “stand out”, so users won't need to scan your entire website to get them … also, once/if marked properly, users don't even need to access your website: the featured snippet, including the answers to their queries, will already show up in the voice search results   Final Word  “How do I optimize my website for voice search in 2019?” By adapting the navigation & search on your website to this new reality: users... using their voices to search online. And that doesn't mean getting your website to “talk back” to its visitors. There are voice assistants and conversational UIs for that. Instead, focus your efforts on: Localizing and, overall, creating voice-search friendly content that should provide quick, accurate, specific answers to users' anticipated voice queries. ... Read more
Adriana Cacoveanu / Feb 15'2019
Easy Page Speed Audit: How to Improve the Perceived Performance of Your Drupal Site
How do you run a page speed audit from a user experience standpoint? For, let's face it: website performance is user experience!  What are the easiest and most effective ways to measure your Drupal website's performance? What auditing tools should you be using? How do you identify the critical metrics to focus your audit on? And, once identified, how do you turn the collected data into speed optimization decisions? Into targeted performance improvement solutions... Also, how fast is “ideally fast”, in the context of your competition's highest scores and of your users' expectations? Here are the easiest steps of an effective page performance audit, with a focus on the prompt actions you could take for improving it.   1. Front-End vs Back-End Performance They both have their share of impact on the overall user experience: Long response times will discourage, frustrate and eventually get your website visitors to switch over to your competition.   Front-End Performance  It's made of all those elements included in the page loading process, as being executed by the browser: images, HTML, CSS and JavaScript files, third-party scrips... The whole process boils down to: Downloading all these elements and putting them together to render the web page that the user will interact with.   Back-End Performance  It covers all those operations performed by your server to build page content. And here, the key metrics to measure is TTFB (Time To First Byte). It's made of 3 main elements:   connection latency connection speed the time needed for the server to render and serve the content   2. What Should You Measure More Precisely? 5 Most Important Metrics What metrics should you focus your page speed audit on? Here's a list of the 5 most relevant ones:   a. Speed index The essential indicator that will help you determine the perceived performance on your Drupal website: How long does it take for the content within the viewport to become fully visible? When it comes to optimization techniques targeting the speed index, “battle-tested” techniques, like lazyloading and Critical CSS, are still the most effective ones.   b. Time to first byte As previously mentioned, the back-end performance: Measures the time passed from the user's HTTP request to the first byte of the page being received by the browser.   c. Start render The time requested for rendering the first non-white content on the client's browser. Note: the subsequent requests are “the usual suspects” here, so you'd better ask yourself how you can reduce, defer or relocate them. Maybe you'd consider a service worker?   d. Load time How long does it take for the browser to trigger the window load event? For the content on the requested page to get loaded? Note: consider enabling HTTP/2, with a dramatic impact on individual page requests.   e. Fully loaded It measures the time of... zero network activity. When even the JavaScript files have all been already fired. Note: make sure your third-party scripts are “tamed” enough. They're the main “responsible” factors for high fully loaded times.   3. How to Perform a Page Speed Audit: 5 Useful Tools Now that you know what precisely to analyze and evaluate, the next question is: “How do I measure these key metrics?” And here are some of the easiest to use and most effective tools to rely on when running your page performance audit:   WebPageTest PageSpeed Insights Lighthouse SpeedCurve Chrome DevTools   Use them to:   collect your valuable data on all the above-mentioned metrics get an insight into the page rendering process performed by the browser identify the “sore spots” to work on automate repeated page speed tests keep monitoring your website (SpeedCurve) across multiple devices and in relation to your competition's performance  get a peek into your web page's structure and into the process of downloading resources over the network (Chrome DevTools) 4. 3 Key Benchmarks to Evaluate Your Website's Performance So, now that you've got your “target metrics” and your toolbox ready, you wonder:  “What should I measure those metrics against?” And here, there are 3 major benchmark-setting processes to include in your page speed audit:   determine your competition: your current production site before its rebuild, your direct and indirect “rivaling” websites determine the key pages on your Drupal website: homepage, product listing page, product detail page etc. measure your competition's web page performance   5. Most Common Performance Bottlenecks & Handiest Solutions Here are the most “predictable” culprits that you'll identify during your page speed audit, along with the targeted performance-boosting measures to take:   Factors Impacting the Front-End Performance & Solutions a. Too many embedded resources Too many embedded stylesheets, JavaScript and images are an extra challenge for your page loading time. They'll just block the rendering of the page. Each connection setup, DNS lookup and queuing translates into... overhead, with an impact on your site's perceived performance. The solution: consider caching, minification, aggregation, compression...   b. Oversized files And images (stylesheets and JavaScript) sure are the main “culprits” for long response times on any Drupal website.  The solution: consider aggregating/compressing them, turning on caching, lazyloading, resizing etc.   c. Wrongly configured cache Is your website properly cached? Have you optimized your cache settings? Or is it possible that your Drupal cache could be broken?  If so, then it will have no power to reduce latency, to eliminate unnecessary rendering. The solution: look into your response headers, URL/pattern configuration, expiration and fix the problem cache settings.   d. Non-optimized fonts Your heavy fonts, too, might play their part in dragging down your website. The solution: consider caching, delivery, compression, and character sets.   In conclusion: do re-evaluate all your modal windows, third-party scripts and image carousels. Is their positive impact on the user experience worth the price you pay: a negative impact on your page loading time?         Word of caution on caching: Mind you don't overuse caching as a performance boosting technique. If there are serious back-end performance issues on your website, address them; using caching as the solution to mask them is not the answer. It works as a performance improvement technique on already working systems only.   Factors Impacting the Back-End Performance & Solutions And there are some handy, straightforward measures that you could take for addressing back-end performance issues, as well:   Consider optimizing the page rendering process directly in the CMS.   Upgrade your server's hardware infrastructure (e.g. load balancing, RAM, disk space, MySQL tuning, moving to PHP7).   Keep the number of redirects to a minimum (since each one of them would only add another round trip, which bubbles up to the TTFB).   Reconfigure those software components that are lower in the server stack (caching back-end, application container).   Consider using a CDN; it won't serve everything, plus it will lower the distance of a round trip.   Consider using Redis, Varnish.   6. Final Word(s) of Advice Here are some... extra tips, if you wish, to perform a page speed audit easily and effectively:   remember to run your audit both before and after you will have applied your targeted performance improving techniques grow a habit of tracking weekly results define the goal of your Drupal website performance test: what precisely should it test and measure and under which circumstances? … for instance, you could be analyzing your site's back-end performance only: the time requested for generating the most popular web pages, under a load of 700 concurrent visitors, let's say (so, you won't be testing connection speed or the browser rendering process) pay great attention to the way you configure your page speed audit system if you aim for accurate and representative results   The END! This is the easy, yet effective way of performing a website speed and optimization audit. What other tools and techniques have you been using so far? Photo by Veri Ivanova on Unsplash.  ... Read more
RADU SIMILEANU / Feb 14'2019
What Are the Best WordPress Cache Plugins for 2019? Top 5 Most Effective Ones for Speeding Up Your Website
Have you just launched your website and it got hit by an unexpected... “tsunami wave of traffic? Or maybe it's that crappy web host that couldn't back it up? Or is your WordPress website a few years old already? And has it grown by now into this heavy block of content and ecosystem of plugins dragging it down? Or you're considering switching your website to WordPress and you're concerned about the fluctuations in the page loading speed? No matter which one of these scenarios fits your own, now you must be wondering: “What are the best WordPress cache plugins for 2019?” For, there sure are many, both paid and free. And almost every one of them has its own “fan club” of developers and WordPress website owners. But does “the most popular” also mean the most effective for your own theme and setup? Now, to free you of the burden of evaluating dozens of highly-recommended caching plugins for WordPress, we've done it for you. The result? A shortlist of 5 WP cache plugins with the highest scores at successive speed tests.   But First: What Is a Caching Plugin? And Why Do You Need It? Here's a “non-WP cache plugin for WordPress” scenario: A user accesses a page on your WordPress website. Then a whole “madness” of PHP code executions and database queries for retrieving data goes on “behind the curtains”. And this process — to generate web page content dynamically — is being performed at the cost of page loading speed. Now, if the same user accesses your website after you've integrated it with one of the best WordPress cache plugins for 2019, here's what happens: The caching plugin will have turned that page from a dynamic into a static HTML page. Its content (written text, plus other page elements that don't need to be re-loaded every single time) is already saved and copied on the server, in a cache folder. And so, it gets served in an instant. No more time-consuming database queries to retrieve the required data. No more code executions in the background for displaying that page. A bit more clear now why you need a WordPress caching plugin? Why it becomes both the handiest and the most critical tool in your “performance tuning” emergency kit? Summing up: It's enough for a page on your website to be accessed just once. Then, your cache plugin will instantly create a static version for it. From then on, each time a visitor accesses that web page, he/she will be served its static version. It will no longer be dynamically generated. With a huge impact on your web page's loading time.   1. W3 Total Cache A plugin that starts caching right out of the box.  Just install it and... that's it. No need to work your way through pages of settings to turn on its core functionality. It comes full-featured by default:   minification and GZIP compression support object/browser/page cache (and so on) AMP and SSL support CDN support support for importing attachments straight into the media library   Still, to be 100% sure that it works at full capacity right from the start:   access the General page turn on the “Toggle all caching types” option   Does it help to know that high performing websites like Web Designer Depot, Mashable and Smashing Magazine have this caching tool plugged in? Or that it boasts over 1 million active installs?   Main drawbacks Things get a bit... overwhelming (especially for newbies) when it comes to custom-tuning its functionality to suit specific caching needs. Let's say that you want to update the default life of the cached data. And I'm taking here about no less than 16 settings pages, with tons of customization options for you to scan through. There's one for every type of caching (page, database, browser etc.)    2. Comet Cache, One of the Best WordPress Cache Plugins for 2019 Another one of those “install and run” type of caching plugins. Simple set up and ease of use. Some of its specific features, compared to other plugins, are:   the use of snapshots for speeding up the reading serving cached content only to non-logged in visitors and to those who haven't submitted a comment recently accompanying each one of its configuration settings by detailed explanations   Note: do keep in mind that its free version will provide you with basic features only; for more advanced ones you'll need to upgrade to the premium version.   Main drawbacks Having to pay for its pro features and its whole “network” of configuration options might discourage some of the users.   3. WP Super Cache Free, “notorious”, highly vetted, with a simple set up, and overloaded with customization options.  This is the recipe behind the best WordPress cache plugins for 2019 and WP Super Cache is one holding all the “ingredients”. And when I say “simple set up”, I think of its Options page with no more than 7 tabs. Being basically pre-configured already, you'll only need to:   go to "Easy" tab and enable caching keep monitoring your cached pages in the “Contents” tab   It's built a reputation of serving static content to 99% of your site's visitors. And it relies on PHP and mod_rewrite for that. “What does WP super cache do?” Its built-in features range from:   cache pre-loading to content delivery networks support REST API endpoints enabling you to access the settings GZIP compression dynamic caching caching for mobile users to scheduler for clearing the cached pages    In case you want to tune its performance, you can always go to “Advanced Settings” and enable more caching features like:   compressing files “Don't cache pages for known users”   Main drawbacks The fact that it doesn't deliver static files to logged in users and that it's not fully compatible with some WP themes might restrain some from using it.   4. WP Rocket Not just one of the best WordPress cache plugins for 2019, but one of the most beginner-friendly, as well. And one of the plugins that come with a price tag on... All it takes for you is to activate it and... you're all set. Its crawler will instantly start fetching your web pages to set up the cached files. It will also turn on all the default caching features such as:   page cache cache-preloading GZIP compression   No need for you to manually enable them. As for its optional features, I would mention:   lazy loading images DNS pre-fetching minification CDN support   As already mentioned, the plugin triggers lazy images loading, meaning that images on your WordPress website get downloaded as they're being scrolled down. Not in advance. And this particular feature alone is already powerful enough to speed up your page loading times dramatically. Especially if you have lots of images on your web pages. Its Settings tab is a 7-section area that's not even close as intimidating as W3 Total Cache's one.  In fact, there's only one reason for using the Advanced Options tab: To select the files and the pages that the plugin shouldn't minify and cache.   Main Drawbacks The obvious one: it doesn't have a free version.   5. WP Fastest Cache  If you're looking for a... minimalist, yet efficient caching plugins, this might just be the one. Fewer customization options might translate as fewer risks to get tangled up in configuration settings. You get to grips with it within minutes. To give you an idea: There's only one settings page, divided into 3 tabs: display settings, delete cache and minified files and set up the rate for deleting the cached files. “And how does it work?” It uses mod_rewrite to set up static files on your WordPress website. Now, don't think that less tweaking options means less critical core features. On the contrary. Out of the box, the plugin provides you with:   compression browser caching minification options for pairing CSS with JavaScript files SSL and CDN support cache timeout for certain pages   Simplicity and efficiency at its best! Just click the corresponding checkbox and enable the feature you need.   Main drawbacks It doesn't support WordPress Multisite. The END!  These are, according to the speed tests performed on them and the no. of active installs, the best WordPress cache plugins for 2019. Is the one you've been using on this list?   ... Read more
RADU SIMILEANU / Feb 08'2019
How to Send Richly Formatted HTML Emails in Drupal 8: Deliver the Experiences that Your Customers Expect in 2019
API first, responsive Bartik, headless and decoupled Drupal, Layout Builder, React admin UI... Drupal's evolved tremendously over these 18 years! Yet: the emails that we send out via its otherwise robust email sending system aren't different from those we used to send a... decade ago. And customers expect rich experiences outside your Drupal website or app. While website administrators expect to be enabled to easily manage, via the admin UI, their email content templates. So: how do you send HTML emails in Drupal 8? Without relying on external services, of course... And who could blame customers for expecting 2019-specific user experiences? Experiences that HTML-enabled emails deliver through their great features. Features that support Drupal editors' marketing efforts, as well:   traffic-driving hyperlinks; you get to link to your landing page right from the email visually attractive custom design; emails that look just like some... microsites all sorts of design details that reinforce your brand: buttons over cryptic links, responsive design, templated footers and headers web fonts QR codes  hierarchical display of content, that enhances readability and draws attention to key pieces of content and links in your email images and attachments tracking for monitoring opens   And speaking of admin and/or editors, the questions they ask themselves are: “How can I easily theme the emails to be sent out?” “How can I change their content templates right from the admin UI?” And these are the questions that I'll be answering to in this post. Here are your current options at hand — 3 useful Drupal 8 modules — for easily crafting and sending out HTML emails that appeal and engage.   1. The HTML Mail Module  It does exactly what you'd expect: It enables you to configure HTML emails from Drupal 8. It's the Drupal 7 go-to option whenever you want to go from plain text emails to HTML-formatted ones. A module available for Drupal 8 in alpha version. Furthermore, it integrates superbly with the Echo and the Mail MIME modules.   2. The Swift Mailer Module, The Best Way to Send HTML Emails in Drupal 8 Swift Mailer is the highly recommended method for configuring Drupal 8 to send out visually-arresting, HTML emails. Since you can't (yet) send them right out of the box with Drupal... The module stands out as the best option at hand with some heavy-weighing features:   it supports file attachments it supports inline images, as well it enables admins to send HTML (MIME) emails … to send them out via an SMTP server, the PHP-provided mail sending functionality or via a locally installed MTA agent   Note: you even get to use this module in tandem with Commerce to send out your HTML-enabled emails. There's even an initiative underway for replacing Drupal's deprecated core mail system with the Swift Mailer library. And now, here are the major configuration steps to take to... unleash and explore this module's capabilities:   first, set up the Swift Mailer message (/admin/config/swiftmailer/messages) settings to use HTML next, configure the Swift Mailer transport settings (/admin/config/swiftmailer/transport) to your transport method of choice  and finally, configure the core mail system settings to use this module for the formatter and the sender plugins   And if you're not yet 100% convinced that the Swift Mailer module is significantly superior to Drupal's default mail system, here are some more arguments:   it enables you to send... mixed emails: both plain text and HTML-enabled it provides HTML content types it supports various transport methods: Sendmail, PHP, SMTP (the current mail system supports but one method) it enables you to integrate key services with Drupal —  like Mandrill, SendGrid —  right out of the box it incorporates a pluggable system, allowing you to further extend its functionality   How about now? Are these strong enough arguments that Swit Mailer's the way to send HTML emails in Drupal 8?   3. The PHPMailer Module Another option for configuring Drupal 8 to send out HTML emails is the PHPMailer module. How does it perform compared to Swift Mailer?   It's not pluggable it's not as easily customizable as Swift Mailer  it's already embedded in the SMTP module (in fact, in Drupal 8 the default mail interface class is named “PHPMail” instead of DefaultMailSystem)   What features does it share with Swift Mailer?   it enables you to send out HTML-enabled emails with Drupal it enables you to add attachments to your emails it, too, enables you to send out mixed emails it, too, supports external SMTP servers   Moreover, you can extend its core functionality by integrating it with the Mime Mail component module (currently in alpha 2 version for Drupal 8).   4. The Mime Mail Component Module Briefly, just a few words about Mime Mail:   as already mentioned, it's a “component module”, that can be used for boosting other modules' functionality it enables you to send out HTML emails with Drupal: your mail would then incorporate a mime-encoded HTML message body it enables you to set up custom email templates: just go to your mimemail/theme directory, copy the mimemail-message.tpl.php file and paste it into your default theme's folder; this way, your email will take over your website's design style  any embedded graphics gets Mime-encoded, as well, and added as an attachment to your HTML email do some of your recipients prefer plain text over richly formatted HTML emails? Mime Mail enables you to switch your email content over to plain text to meet their specific preferences   The END! Now that you know your options, it's time to step out from the (too) long era of rudimentary, plain emails sent out with Drupal. ... and into the era of richly formatted HTML emails, that will:   enrich your customers' experiences enhance Drupal 8 site admins' experience ... Read more
Adriana Cacoveanu / Feb 06'2019