LATEST FROM OUR BLOG

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

How Do You Stay Productive When You Work Remotely from Home? 6 Advice from Team Members at OPTASY Who’ve Been Doing It for Years
The walls start to close in on you... You're overwhelmed. You just can't get as much done as when you were in the office. Then, you start to feel guilty and anxious... all the time. What can you do to stay productive when you work remotely from home? To give you an honest answer, I've run a small “investigation” inside the OPTASY team. I've asked some of my colleagues about the best advice they'd give to anyone who's now adapting to remote work. Most of us work from home, yet for these “interviews” I've selected those team members who've been doing it successfully for quite a few years now. So, here they are: 6 tried and tested tips for setting yourself up to perform when working from home.   1. Resist the Temptation to Work from Bed/Couch Our colleague Dinu Rodnichi, one of the web developers here at OPTASY, stressed out the importance of the “ass in chair time” for higher productivity. So, if you're wondering “How can I be productive working from home?” this is one of the right answers: Sitting at your desk (as you normally would in the office) tricks your mind into thinking that you're "at work". “For me, working from my desktop PC instead of my laptop is critical. It forces me to sit at my desk instead of laying in bed or lounging on the sofa. I've noticed that I always get things done faster by just sticking to this small habit.” Note! It would be unwise of me to advise you to buy yourself a desktop PC if you've been working from your laptop for some time now (at the office here included). But working at a desk, that's so doable (and budget-friendly).   2. Designate A “Work Zone” in Your Home  It could be your kitchen table when it's not used for... home cooking experiments.       Or your dining table, if squeezing in a new desk or turning an entire room into a home office sounds a bit too sci-fi to you. The idea that our delivery manager, Radu Camerzan, insisted on was: “Once you've turned a corner, half of a table or a room into your work space, use it for work and work only. At least during work hours. Don't get your mind all too confused by using the same designated work space to prep your dinner, sort out laundry or... watch Netflix, while still “at work”. Another reasonably realistic solution to implement when you work remotely from home, don't you think?   3. Set a Work Schedule (And Stick to It) The golden rule for staying productive (and keeping your work/life balance) is to force a work schedule on yourself.  And here is Radu's second answer to your legitimate question “Why working remotely doesn't work?”: “Set your work hours and get things done during that time interval. Setting a time limit for your daily tasks challenges you to be more efficient. To avoid the trap of working more, but doing less. It makes it easier for you to maintain the boundary between worktime and family or “You” time.”   4. Use a Good Pair of Headphones When You Work Remotely from Home “What do I need to work remotely from home?” You definitely don't want to be stingy with your headphones (another one of Radu's best advice for working from home novices):   they'll help you soundproof your work zone from domestic noise that might risk getting your out of the "zone" they'll upgrade your video calls (and there're going to be plenty of those these days) they'll do your favorite music justice (if you fall into the “Can't work without my music” category)   5. Hone and Adjust Your Communication Skills This is one of the "working from home" tips coming from Sandu Camerzan, our delivery manager (yes, we have 2 of them at OPTASY). If you have none... you'll need to start developing some.  Whereas if you think your communication skills are excellent, you still need to keep honing and adjusting them to the new context:   new communication channels (e.g. talking face to face, at the office, vs talking over the phone or engaging in video calls) planned communication (the new carefully scheduled scrum meetings and video calls replace the old “coffee breaks” and chats in the office about the projects you were working on) new environment (e.g. having phone calls while driving to the nearest the store, for more supplies, or as you fix yourself a quick lunch)   In short: you'll want to double your flexibility stocks in order to cope with these new types of communication challenges. Make it a goal to develop a new communication style. A more:   flexible: show a little empathy; those from the other side of the line/screen face the same communication challenges clear and concise sincere   … way of communicating with your team and clients.   6. Every Morning, Write Down Your 1-3 MIT (Most Important Tasks) My advice to you, from my own work from home experience (for I, too, work remotely from home... for +3 years now) is: In other words, be realistic: life happens and... even so more when you work from home. Unplanned homework needs to be checked, spills cleaned up, pets entertained. Or your better half has an emergency Skype video call to take. And maybe you two are sharing the same “work zone” these days... So, my best advice to you (which is not “mine”, actually, but learned from Leo Babauta, the one behind the “zen habits" method) is: Every morning (the earlier the better) write down your 1-3 most important tasks of the day. Those that you set yourself to get done that day, no matter what. Multi-tasking is so overrated, so mind you stick to those 3, 2 or just one “task of the day” and don't get your mind focused on anything else before you've carried it out. Better have even just one high priority task done by noon or by the end of your work day, than to juggle with multiple ones and... finish none.   The END! These are the OPTASY team's 6 advice for you on how to stay productive when you work remotely from home. What's your recently discovered hack for keeping yourself up to perform at home?  Let us know in the comments below. For we're constantly revising and adding new powerful habits to our personal routines, that could help us get even more productive while working in our slippers. Image by imperioame from Pixabay   ... Read more
Adriana Cacoveanu / May 12'2020
How to Speed Up a WordPress Website: 11 Universal Ways that You Can Make It Faster (With and Without a Plugin)- Part 1
“How do I make my WordPress site faster?” you ask yourself. And let me guess: you want to address this challenge – how to speed up a WordPress website – the easiest way possible... So, what you're looking for is some effective and universally applicable tweaks that you could make on your own website without much fuss, right? You're in the right place, then... For in this post (Part 1) I'll be listing and detailing 6 of the 11 simplest ways to make your WordPress site faster:   Use a CDN: Deliver Content from the Nearest Possible Server How to Speed Up a WordPress Website: Compress Your Images Minimize External Scripts Upgrade to PHP 7 (At Least): A Simple WordPress Optimization Step to Take Switch To a Better Hosting Provider (With a Dedicated Server) Remove the Plugins that You Don't Need   So, let's dive in:   1. Use a CDN: Deliver Content from the Nearest Possible Server Do you serve content to an international audience? Then using a content delivery network is a must for you. Here's precisely how it'll reduce the page load time on your WordPress site: It serves your static files (e.g. your images) to your visitors based on their geographic locations.  In other words: if a user's located too far from where your website's hosted, a CDN will deliver the static content on your website from the data center nearest to him. A CDN  helps you keep the site-loading speed to a minimum when your website's accessed from different corners of the world. All there's left for you to do is... a little digging. See which are the most popular CDN services out there (Cloudflare, MaxCDN, KeyCDN, etc.) and evaluate their offerings against your specific feature needs. And budget.   2. How to Speed Up a WordPress Website: Compress Your Images More often than not the (too) large, high-resolution images are the “usual suspects”. So, the no. 1 rule is to compress your images.  Or, better said: to optimize your image files – aka to reduce their size with no compromise on their quality. And here you have 2 options:   you either compress them manually, in Photoshop, Chrome PageSpeed, or by using any other tool of your choice or you just use a WordPress plugin: WP Smush, Optimole, EWWW Image Optimizer, etc.   3. Minimize External Scripts Keep your font loaders, ads, and other external scripts to a minimum. They're one of the main reasons why your WordPress website's loading so slowly. 4. Upgrade to PHP 7 (At Least): A Simple WordPress Optimization Step to Take Because PHP 7 is significantly faster than its predecessors (e.g. PHP 5.6). Here, again, you have 2 options:   you either upgrade the PHP version yourself or you ask your hosting provider to give you a hand   Note! Needless to add that it's critical that you opt for a host that supports this version of PHP.   5. Switch To a Better Hosting Provider (With a Dedicated Server) Hosting is the no.1 culprit for a WordPress website's poor performance. And that because:   a badly configured web hosting server has a huge impact on your page load time a shared hosting environment won't guarantee you decent loading times at high-traffic hours; your website's sharing the same server with many other sites...   So, if it's a shared hosting provider that your website's running on, consider this: Unlimited emails, domains, bandwith and the many other features that a sharing hosting plan might “seduce” you with can't compensate for the... slow loading times and the clogging of RAM and CPU. So, one of the best answers to your “How to speed up a WordPress website” dilemma is: 6. Remove the Plugins that You Don't Need Want to make your WordPress faster? Start by decluttering your plugin collection. Are there any plugins that you've... never used? Get rid of them! Why? Let me give you just one example of how a heavy load of plugins can slow down your WordPress site: The more plugins that you have there, the larger the size of your backup will get. And this will only put an unnecessary strain on your server with every backup file that's generated for these non-essential plugins. You might want to consider replacing them with third-party services that serve the same purpose.   END of Part 1! Has any of these 6 steps on how to speed up a WordPress website caught your attention? Do you consider switching to a new hosting provider and you need some expert advice on which one to go with? Or maybe you're having trouble identifying the plugins that are unnecessarily bogging down your site? We're here to help. Whether it's just a recommendation of what CDN to use or putting together and implementing an entire optimization strategy for your WordPress site, just drop us a line. And stay close for the second round of WordPress speed optimization tips in Part 2! To be continued... Image by PublicDomainPictures from Pixabay ... Read more
Silviu Serdaru / May 07'2020
How to Make Icons Accessible to the Widest Range of Users? 10 Best Practices
Material icons, flat icons, thin icons, ready-made or fully custom, on-brand icons... No matter what type of web icons you opt for, the same rule applies: the need to be visible to all users. So, you ask yourself: "How to make icons accessible to... everyone?". For, in vain you go with an eye-catching web icon design if its color contrast is so low that some users just don't see it. Or if it's interactive, but only when... mouse clicked. See my point? Therefore, in today's post I'll tackle aspects like:   what accessible icons are what goes into making icons accessible: most effective approaches and best practices what are the different types of web icons and the specific techniques for making them accessible    Let's dive in:   1. What Are Accessible Icons More Precisely? What makes an icon accessible to screen reader users? What requirements should it meet to be fully inclusive? Here are the 6 most important things to consider when you're designing accessible icons:   1.1. Make Them Noticeable For, it's pretty logical:  If an icon's not instantly perceivable to all visitors, it becomes inaccessible. And by "instantly perceivable", I mean that users shouldn't be constrained to perform some sort of action in order to make the icon... visible. 1.2. If It's Purely Decorative, It Shouldn't Be Read Out One of the best practices for designing accessible icons (decorative icons) is to skip the part where the ALT text gets read out to screen reader users. That's because, in the case of a decorative icon, informing the user about its existence on the page (e.g. "There is a key icon!") is just... superfluous. Which leads us to the next requirement that all "wannabe accessible" web icons should meet:   1.3. Always Add a Text Label The magnifying glass icon is universally recognized as a "search" tool. But that's the only universally recognizable icon... Therefore, it's best to play safe if you want your icons to be accessible to the widest range of visitors. Whether you have a hamburger menu icon or a house-shaped one, accompany it with a text label to prevent any ambiguity.   1.4. Keep in Mind the Color Contrast  This is one of the recommendations on top of any "How to make accessible icons" list that you might stumble upon: Make sure there's enough foreground-background color constrat in your icons, so that visitors with different levels of visual imparirment can easily notice them.   1.5. Make Sure They're Properly Sized And by "properly sized" I mean somewhere around 44x44 pixels. Pay particular attention to the size in the case of icon links: Any smaller than 44x44 pixels and they become inaccessible on smaller devices: some users won't be able to click on them.   1.6. Make Sure They're Mouse, Touchscreen, AND Keyboard Accessible Have you decided to "sprinkle" some interactive icons across your website?  Then make sure that users can easily click on them whether they use their mouses, they tap on their touchscreens or they depend on their keyboards for that. 2. How to Make Icons Accessible: 10 Approaches & Best Practices  Now that we've gone through "what" makes an icon accessible, let's get to the "how-to" part: How can you make your web icons more accessible for screen readers users? Here's a list of simple approaches and valuable tips to consider:   2.1. Consider Pixel Measurements and Square Dimensions  Most icons have square dimensions.  And if you're curious which are some of the most frequently used sizes for web icons, here are some popular examples:   128x128 16x16 512x512 64x64 256x256   2.2. The Easiest Way to Make Your Linked Icons Accessible Is to... ... add an ALT-text that lets the user know what the link does. What its destination is. For instance, you can add "Email us" as the ALT-text accompanying your "@" email icon. 2.3. When In Doubt, Choose an SVG or a PNG File Format  Even if some prefer the SVG icons systems, while others choose to go with PNGs (making icons accessible is easier with that file format), all web designers agree on this: Icon fonts should be the very last option to consider.   2.4. Make Sure Your Document and Your Icon Are The Same Size    2.5. See that There's Enough Icon-Background Color Contrast Will you be adding your web icon to a background?  If it's a yes, then check and adjust the color contrast.   2.6. Check Your Icon's Size Before Exporting It The 6th tip on our "How to make icons accessible" is pretty... predictable: All web icons should be properly sized prior to export, making sure they're not too large.   2.7. Hide the Text Accompanying the Icon, but Keep It Visible to Screen Readers Let's say that you've inserted an explanatory enough copy text within your link icon, but you don't want it to be visible to all users.  You want it to be visible to screen readers only. For this, you can use a visible-hidden class selector.   Word of caution! Going with this solution does call for 2 compromises:   the click/touch area is smaller screen reader users might not understand what that icon does (the VoiceOver will then read something like: "internal link, home"). 2.8. Accompany Your Semantic Icons with Visible Text to Avoid Ambiguity "What's a semantic icon?" you ask?  A standalone icon that has meaning.  Now, if you want to make sure you'll prevent all situations where users might just overlook it, just add a visible "Menu" text next to it. This way, its meaning will be 100% clear to anyone.   2.9. The Simplest Way to Make Icon Fonts Accessible Is... ... to add aria-hidden="true" to the element. Note: again, whenever possible, avoid icon fonts and opt for inline SVGs instead.   2.10. Skip Adding ALT-Text to Text-Based Icons Let's say that you have an "Email Us" linked icon.  Now, it would be quite superfluous to have an ALT text added to, saying the same thing to the screen reader user, wouldn't it? In this case, the icon is purely decorative, since the copy text around it already conveys the meaning on its own.   The END! Now you have at least 10 different answers to your "How to make icons accessible to the widest range of users" question. But maybe you need help choosing the best approach and implementing these best practices in order to make your brand icons more accessible.  We're here to help! Just drop us a line and let's find the most suitable solution for making your web icons available to everyone visiting your website. Image by Виктория Бородинова from Pixabay  ... Read more
Adriana Cacoveanu / May 06'2020
How Good of a Website Analysis Tool Is Google Lighthouse? 6 Reasons to Use it (plus, OPTASY.com Lighthouse score)
“What's the best audit tool that I can use to check my website's performance?” you ask yourself. Why would you consider Google Lighthouse? How reliable is its scoring system? And how accurate are the results that it provides? Now, let's get you some answers on:   what is how to use  why you'd want to use … the Google Lighthouse testing tool. 1. What Is Google Lighthouse? Before we get into the “Why”, let's see “What” the Google Lighthouse score is, actually: It generates separate scores for different aspects on a web page, like:   SEO rundown of best practices accessibility performance PWA   In other words: it evaluates precisely the factors with the strongest impact on the user experience (page load time, anyone?). What you get is a report on the measures to take in order to fix the identified issues. And to hopefully get a maximum Google Lighthouse score next time...   2. How Do You Use Google Lighthouse? And here we tackle one of this testing tool's biggest selling points: ease of use. Now, there are 3 ways that you can run a Google Lighthouse report:   2.1. Use it Right in Chrome DevTools  The simplest way to run this audit tool on your website is to:   Download Google Chrome for Desktop (if you haven't done that already) Enter the web page's URL in your browser Click F12 to open up your Chrome Developer Tools (or just click “Inspect” anywhere on the page) Hit the “Audits” Tab Click “Perform an audit” (you'll see there the aspects of your website that it's about to check: SEO, Accessibility, Performance...) Hit “Run Audit” to have Google Lighthouse generate your audit report directly through your browser   Easy peasy... 2.2. Install the Lighthouse Chrome Extension If you prefer to run this website analysis tool as a Chrome extension, just:   Download Google Chrome for Desktop Install the extension from the Chrome Webstore Go to the web page that you want to test Click the “Lighthouse” icon newly added to your Chrome address bar Hit the “Generate Report” button   Just wait for about 30-60 seconds for the tool to inspect the page and generate the results in a new tab. Source: developers.google.com   2.3. Run It Via the Node.js Command Line  If you're more of a CLI person, you'll find this workflow more suitable:   Again, if you haven't downloaded Google Chrome for Desktop already, now it's the time Install the latest version of Node.js   Install Lighthouse by typing npm install -g lighthouse into your command line Next, enter the lighthouse <url> to run an audit   Note: use the lighthouse –help command to get an overview of all the options. That's it! Note: it's an HTML version of the audit report that you'll get when you run Google Lighthouse via the command-line tool. Just so you know it. Tip! There's also a... forth way to use the Google Lighthouse audit tool, probably one of the quickest ways to run your report:   Just go to web.dev Click “TEST MY SITE” Enter your URL  Click “RUN AUDIT”   And voila: you'll have your Google Lighthouse score generated for that particular web page in no time! 3. 6 Reasons Why You'd Use Google Lighthouse (And Why We're Using It) Now that you know precisely what it is and the different ways that you can use it: Why would you choose this particular website auditing tool over... all the other testing tools out there? To give you an honest answer, let me share with you the key reasons why we, the OPTASY team, are using it on our clients' websites and even on our own site:   it's so easy to use: why compromise ease of use for accurate audit results, when... you can have both? it's Google-developed (not just a no-name third-party testing tool) it's open-source it's fully automated it tests how the scanned web pages look and perform on mobile devices, as well it's user-centric metrics that it provides: what's the point of optimizing a website merely for our own “fame and glory” and... risk losing sight of the user's own expectations?   Whether we're:   building a new website for one of our clients optimizing a client's existing website optimizing OPTASY.com itself   … and we want to check how well its web pages perform, we just run a Google Lighthouse audit. And speaking of using it on our own website, here's a sneak peek into the Lighthouse Score that it's got after we put it through some major optimization work: In short, the scoring system and suggestions of improvement that Google Lighthouse generates make the best "barometer" for us to:   assess the quality of the audited pages (in case of an existing website, so we know what we're dealing with) evaluate our work (after we've built/improved a website) identify existing issues and prepare our “To Do” lists to get them fixed   4. Final Word  Do you want to learn more about how to use Google Lighthouse to its full potential? About how you can boost your Google Lighthouse performance score, like we have for OPTASY.com? Or maybe you've already generated a report, you have the list of recommendations at hand and you need help to implement them on your website? Either way, we're here to help. Just drop us a line. ... Read more
Adriana Cacoveanu / May 01'2020
Why Is Accessibility Important? 7 Ways that Having an Accessible Company Website Benefits You
You already agree on this: web accessibility benefits users with permanent, temporary, and situational disabilities. But why is accessibility important for you? For your business... How does having an accessible website benefit you directly? And that's precisely what you'll find out in this post: 7 clear benefits that you can “reap” from making your website ADA-compliant. 1. Why Is Accessibility Important For Your Business? 7 Ways It Benefits You Directly   1.1. You Improve the Visitor Experience for... Everyone Source: disabled-world.com       “Who benefits from web accessibility?” All users. As you adopt all the good practices to improve your web pages' accessibility and you:   use a clear and simple language make sure that you have enough color contrast on your site add video captions   … you make your website easier to use for all users.   Tip 1: a video caption benefits both users with hearing loss and... any user who watches your video content in a loud environment. Tip 2: an adequate color contrast benefits not only users with low contrast sensitivity but pretty much anyone. It makes your content more visible and easier to understand for all users.   How does this translate into a clear benefit for you? Better user experience for all your website's visitors means:   a higher impact on your SEO rankings more traffic on your website better user engagement a higher conversion rate …   Should I carry on?   1.2. You Grow/Future-Proof Your Customer Base Source: canada.ca      North America is aging. By making your website accessible, you ensure that it accommodates the needs of both:   users born with a disability users acquiring certain levels of disabilities as they age; seniors who still want to able to access the web   In other words: you'll be simultaneously growing and future-proofing your customer base.    1.3. You Minimize the Risk of Facing Legal Action  “Why is accessibility important?” Because it's a legal requirement.  Ignore it and you face the risk an accessibility lawsuit... Is minimizing the risk of being prosecuted a strong enough benefit for you?   1.4. You Develop a Mindset for Innovation  “Why is accessibility important in web design?” Because it challenges you to solve all types of unanticipated problems and thus... to get creative. The constraint of adapting your design so that it incorporates a whole set of accessibility features challenges you to... come up with innovative solutions.  And to preserve that mindset for innovation in the long term.   1.5. You Boost Your SEO Efforts Just think about it: some of the best practices for improving a website's accessibility are to:   add ALT-text to images write clear and concise copy go for a clutter-free page layout  design with consistency in mind ...   But these are all good SEO practices, as well. “So, why is accessibility good for business?” Because, by making your website more accessible, you're also making it more... SEO-friendly.   1.6. You Improve Your Brand Reputation  Source: Acquia.com “Why is accessibility important for your business?”  Because it helps you grow your brand reputation. By making sure that all your website visitors are granted equal rights and easy access to your web content, you build a positive reputation around your brand. 1.7. You Improve Your Page Loading Time Studies have proven it: By improving a page's level of accessibility, you improve its speed score, as well. The main idea rests the same: As you implement features considered to be designed “exclusively” for users with disabilities, you're making your website a better place for all users. And “faster” does mean “better”. So this is definitely a key benefit to keep in mind.   2. What Are the Most Important Aspects of Web Accessibility? Now that you have multiple answers to your “Why” question  — “Why is accessibility important?” — let me try to answer your “What” question, as well: What makes a website accessible? But first, here's a list of goals to set for your company website's content and design to be accessible:   To be perceivable: are your design elements and text visible and easily identifiable by all users? To be robust: is your content robust enough to be easily parsed through and interpreted by various assistive technologies? To be operable: make sure that all users are able to carry out the actions that your website's UI requires them to perform To be understandable: is the information delivered on your website clear enough? How about the UI and the actions that it requires users to perform?   2.1. Color Contrast  An accessibility feature that benefits all your website visitors:   those that have a sight condition (elderly visitors here included) those accessing your website from their mobile devices those accessing it in a poorly lit environment anyone accessing your website Source: w3c.github.io Implementing a good color contrast between the background and the foreground makes your design elements more visible and the text more readable.  And everybody wins.   2.2. Text to Speech Why would you bother to implement this technology on your company website? In other words: Who benefit(s) from this accessibility feature? users with learning disabilities users with literacy difficulties or learning a new language users with low vision (seniors here included) all users who just love to... multitask (e.g. imagine yourself driving your car and listening to an e-book)   It makes your website content accessible to more people.   2.3. Clear and Constant Feedback Remember to provide feedback —  clear instructions and error/success messages  —  for every action that users need to complete or have already completed. Who'll benefit from it?   users with cognitive and learning disabilities users with lower computer skills anyone accessing your company website    Providing clear instructions and constant feedback helps all users complete their tasks (e.g. fill in forms) on your website quick and easy. It makes your website conveniently predictable to everyone accessing it. 2.4. Video Captions  Why is accessibility important? Because it turns your website into a “welcoming” place for everyone. In the case of captions (or “subtitles” if you wish), it makes your video content accessible to:   people with hearing loss people accessing your website from a loud or quiet environment Just imagine yourself having to go through a video, in a crowded place, when don't have your headphones with you. It's another one of those win-win accessible situations.   2.5. Clear, Clutter-Free Layout and Design And here, the main benefits are obvious. A simple design:   loads faster  bubbles up to the user experience  impacts your site's SEO rankings   Keep your website clutter-free by removing:   all the unnecessary design elements that make it a bit too clunky and more difficult to navigate all the non-relevant and non-useful content all the unnecessary code still lingering in there   Perform an audit of the menus, text sections, and links on your site and... start decluttering it. This way, you'll improve the experience of all the users, making your website:   faster easier to scan through  more usable 2.6. Voice Recognition  Imagine yourself driving (again) and having to search for a particular piece of information on a website. If that website has a voice recognition system incorporated, it should go smoothly. If not... you might consider switching to one of its direct competitors. See my point here? Implementing voice recognition on your website doesn't benefit just users with various physical disabilities. It benefits anyone who simply prefers uttering search phrases instead of entering them in the search bar.   2.7. Keyboard Navigation Make sure that users can easily navigate your website using their keyboards only.  Word of caution: are there any animated navigation buttons that unfold drop-down menus? If so, are they perfectly usable for visitors who depend on screen readers to navigate your site?   2.8. Use of ALT-Tags Go for useful, genuinely helpful descriptions over... the too generic, perfectly SEO-optimized ones. Accessibility is about making all users feel confident and comfortable. Therefore, impersonal image descriptions, centered around focus keywords, are anything but helpful to them.   2.9. Accessible Buttons and Controls  Making your clicking or tapping areas:   larger featuring enough color contrast featuring clear and actionable title text (“sign up”, “download”, “log out”)   .. will make your website more usable for:   visitors with a certain disability those with a limited digital dexterity those accessing it from their mobile devices   The END! Does this answer your questions and dilemmas on “Why is accessibility important for my business”? Now, we're quite curious to know: What accessibility feature has had the biggest impact on the user experience that your website provides? Image by athree23 from Pixabay   ... Read more
Adriana Cacoveanu / Apr 10'2020
What’s the Best Free SEO Plugin for WordPress (Apart from Yoast SEO)? Top 5
Let me guess: for you, the best free SEO plugin for WordPress is the one that   is feature-packed is quick to set up is super easy to use, featuring a straightforward UI automates common SEO optimization tasks such as setting the meta-information is regularly updated “plays well” with other plugins   “Am I asking too much from an optimization plugin?” you might ask yourself. Not at all.These are all legitimate expectations. Now, we've done some digging and put together a top 5 WordPress SEO plugins that meet your criteria. So, without further ado, here are the finalists:   1. The SEO Framework If you're looking for a lightweight optimization plugin tailored for smaller-sized websites, this might just be the one for you. Here's how it works: It displays color-coded guidelines that point out to the aspects on that page that you need to improve.  And that's not all: If you hover over with your mouse pointer, it'll trigger useful notes on how precisely you can optimize those specific elements on the page. In short: it provides you with both the WHAT and the HOW to optimize (on) your website. You'd want to go with The SEO Framework because:   it's lightweight it provides you with good documentation and enough filters to customize your SEO settings it's effectively simple (or “simply effective”): there are no extraneous features, it's one of those WordPress SEO plugins that does precisely what you expect it to do it's open-source it has clean, well-structured code it ships with a UI that integrates seamlessly into WordPress    Source: quicksprout.com   2. Rank Math, Probably the Best Free SEO Plugin for WordPress   Source: Ahrefs.com As Joshua Hardwick from Ahrefs admitted it, as well, Rank Math is the free SEO plugin for WordPress with the most intuitive UI. And if, to the convenience of an easy to use interface, you add a heavy load of SEO features, your quest for the best optimization plugin might just end there. But let's see precisely what its set of features and selling points include:   it's free it's easy to set up it comes with built-in redirection it integrates with Google Search Console it provides you with full Google Schema Markup (rich snippets... 14 different snippets, to be more specific) it enables you to keep track of your Google Keyword rankings it provides you with card previews for Facebook and Twitter it generates internal link suggestions it monitors 404 errors: it keeps track of the users landing on “dead” pages and provides you with useful data on the URL of those “problem” pages and on the no. of times they've been accessed   3. Redirection    This WordPress SEO plugins comparison had to include a reliable plugin for implementing 301 redirects, right? Well, here it is. And here are its strongest pros:   it's so very easy to use: just enter the source and the target URLs, click “add redirect” and you're good to go it's free it provides support for other 3xx redirects as well   Tip: if you're in the “advanced users” league, you can go even further and use regex matching for redirects (and ignore URL parameters, trailing slashes, etc.) Simplicity at its best...   4. All in One SEO Pack   If you're looking for a “swiss tool” to boost your SEO efforts with, this might just be the one. The All in One SEO Pack plugin comes packed with all the essential SEO features you need. And it makes a great option if you're not an SEO guru yourself. If you only want to help your blog (or startup website)... gain some traction in the search results.  Source: Quicksprout.com But let's see which are the specific features that make it a strong candidate for the title of “the best free SEO plugin for WordPress”:   it sets itself apart from Yoast (its more popular “twin plugin”, some say), with unique features such as canonical tag support, auto-generated description tags, a “bad bot” blocker it “spoils” you with a clean, intuitive dashboard its essential (free) features are robust enough to power your SEO strategy if it's a basic blog (or a small website) that you need to boost in the search engines   5. EWWW Image Optimizer   We couldn't have left out precisely an image compression tool from our list of top 5 WordPress SEO plugins now, could we? EWWW Image Optimizer comes as the most effective free alternative to the well-famed ShortPixel image optimizer. Its biggest selling point? It's very easy to use. You get to compress your images in bulk, on the go. And by “images” I do mean the previously uploaded ones, as well. Source: themeisle.com But let's see what are its most “tempting” features:   it provides you with options for lossless and lossy image compression it puts no limit on the number and the size of the image files that you upload  it provides you with JPG, PDF, PNG, and GIF optimization support its free version carries out the optimization tasks on your web server; no need for you to sign up in order to use this plugin   And that last feature becomes particularly important if it's a privacy-focused website that you need to optimize for speed. Word of caution: since EWWW uses your own server to perform the optimizations, it can put a strain on it if you go overboard with the no. of images that you use it for.   Honorable Mention: The Yoast SEO Plugin Why did we leave the “rockstar” plugin out from our list? Isn't Yoast the best free SEO plugin for WordPress, according to many users? Source: backlinko.com Yes and no... Yes, it's by far the most popular (and the most comprehensive) SEO plugin for WordPress. But there are certain aspects which have blurred its “rockstar aura”:   the annoying paid aids the reputation of slowing down the back-ends of the websites using it (its features aren't powerful enough to compensate for that) the fact that it trades looks for functionality: its UI is not one of the prettiest ones   The END! What's the best free SEO plugin for WordPress according to your own feature requirements and criteria? Is it included in this list? And why do you prefer it? Let us know in the comments below.  Image by tomekwalecki from Pixabay   ... Read more
Adriana Cacoveanu / Apr 08'2020
You Have Your List of Web Accessibility Issues: What Do You Fix First? 8 Simple Ways to Prioritize Accessibility Problems
You've run your audit, you've got your list of web accessibility issues: now what? Where do you start? Before you get to the point where you ask yourself “How do I fix web accessibility issues on my site?” you wonder: “Which issue to address first?” How do you prioritize accessibility problems? By noticeability, by severity or by tractability? What criteria do you use? And this is the question that this post will answer to. It's a list of 8 simple ways to prioritize the issues included in your accessibility audit report:   If Your Website's Image-Heavy, ALT Text Becomes a Priority If You Host Lots of Videos, Adding Captions Is Critical Let the Data on Your Target Audience Dictate Your Priorities If the Issue Is Repetitive for Screen Readers, Then It's High Priority Put on Your List of Web Accessibility Those that Impact the User Navigation  Prioritize the Issues that Prevent Users from Submitting Forms Prioritize The Accessibility Issues Detected on Key Pages of Your Site Prioritize Low Complexity, but High-Value Issues 1. If Your Website's Image-Heavy, ALT Text Becomes a Priority Do you have lots of images on your website? Then adding ALT text is a top priority, by default. 2. If You Host Lots of Videos, Adding Captions Is Critical Do you have lots of video content on your site? Then adding captions should be one of the first tasks to carry out after you've run your web accessibility audit.    3. Let the Data on Your Target Audience Dictate Your Priorities Customer analytics should be the main criteria to use when you put together a list of web accessibility issues. How many people in your customer base use screen magnifiers to zoom in specific sections on your website? Are there users depending on screen readers in order to interact with your website?  What does the analytics data tell you?  It's those stats that determine how you should prioritize your usability problems. And how you should design your website accessibility plan. Source: Medium.com In this case, categorizing (and therefore prioritizing) web accessibility issues by their WCAG level (A, AA, AAA) is a bit rudimentary. The data that you have on your user target group might reveal to you that complying with certain AA (or “nice to have”) standards is more important for your audience than complying with some A standards... In short: start with those issues that have a direct impact on your specific customer base. 4. If The Issue Is Repetitive for Screen Readers, Then It's High Priority Take an issue listed in the W3C accessibility checklist as common as... link names. It says there that the displayed text should be unique, meaningful and descriptive enough. Has your automated accessibility testing tool identified multiple instances of this issue? Do they seem to be so repetitive that the experience of any website visitor using a screen reader is just... terrible? Then you should address them ASAP.   5. Put on Your List of Web Accessibility Issues Those that Impact the User Navigation  You've run your web accessibility audit and now you need to prioritize the issues detected. An effective criterion to use for setting up a hierarchy of “errors” is the impact that those issues have on users' navigation experience. For, if those issues prevent users who depend on assistive technologies from navigating your website, they'll get discouraged/frustrated. And leave your site. For instance, your accessibility audit might detect a problematic heading structure. Which, by the way, falls into the AA category. If that heading structure:   skips certain levels or, even worse, there is no heading structure at all or it contains too much irrelevant information   … and is the main “culprit” for the poor navigation experience on your website, then you should make it a priority.   6. Prioritize the Issues that Prevent Users from Submitting Forms For there's nothing that says “I don't care about you” like web accessibility issues that stop users from filling in a form on your site. In short, make sure you tackle those first. I'm talking here about usability issues like:   unhelpful error text messages like “please enter correct information” unaccessible inline error messages   … that make it impossible for these website visitors to submit any form.   7. Prioritize the Web Accessibility Issues Identified on Key Pages  Build your web accessibility test plan around the most important pages on your website. Source: support.siteimprove.com For instance, optimizing a page with a Help article isn't a top priority.  But optimizing for accessibility your:   Product page Login page Checkout page User Registration page Contact Us page Feedback or Survey page   … should be listed among your top priorities. Tip: a common web accessibility mistake is to ask people with disabilities to enter information from their paper receipts on the survey page.  Make sure this problem is among the first ones that you address. So, before you go ahead and add problems to your top list of web accessibility issues, you might want to ask yourself some key questions:   “What's the scope of the page presenting accessibility issues?” “What's the traffic on the page that you're about to optimize?”   8. Prioritize Low Complexity, but High-Value Issues And now you have your answer to the question: “What if I have a high-value issue, but with low complexity like... defining page titles for dynamic pages on my website?” Final Word: Internal Prioritization Is Crucial  Putting together a list of web accessibility issues to tackle first depends on your website's:   audience content functionality   Sticking to an “A level vs AA level” technique for figuring out what problems to fix first is... a bit too simplistic. For even not all A-level accessibility standards are of equal importance and not all AA-level issues are just “nice to haves”: Source: www.w3.org Your turn now: What criteria do you use to prioritize the accesilbity issues that you identify on your website? Are there other prioritization techniques that I should add to this list? Let me know in the comments below. Image by Gerd Altmann from Pixabay   ... Read more
Adriana Cacoveanu / Mar 27'2020
What Are the 10 Rules of Good UI Design? What Is Good UI/UX Design?
In this post, I'll share with you the top 10 rules of good UI design. You will be learning:   What are the essential elements of a good UI design What are the most common UI/UX mistakes that designers make What are the UI best practices in 2020 Lots more UI design tips   Now, let's get started.   1. Aim at an Almost Invisible User Interface  What is a good UI design? A logical structure & necessary visual elements only. In other words, in order to design an almost invisible user interface you need to:   be “merciless” and keep the essential elements only base your UI on a well-thought-out structure use clear language in your text messages and on your labels   Source: Medium.com A poorly structured and cluttered UI would only make the user ask questions like: “Where's the main menu?”   2. Keep It Consistent And this is one of those good UI design principles that's overlooked or undermined most often. Consistency should span over the entire ecosystem of elements that make up a UI design: fonts, colors, menus, buttons, icons. Keeping a consistent UI throughout your website translates into creating patterns aimed at enhancing efficiency. At improving the user experience. And here I'm referring to layout, design, language patterns. Once the user gets familiar with a given pattern, it will be easier for him/her to interact with other parts of your website that present the same pattern.   3. Be Purposeful with Page Layout One of the fundamental rules of good UI design is to structure your pages based on importance. In this respect, here are the crucial principles of user interface design to guide your page layout creation:   take into account the spacial relationships between various elements on the page place your UI elements strategically: draw users' attention to the most important information on the page and make it easy for them to scan it through  keep in mind that “form follows function”: design each item in accordance to its function (no need to reinvent the wheel and to turn the hamburger menu into a... sandwich menu, for instance) stay away from clutter, at all cost: keep the visual elements on the page to a minimum make smart use of headings, group similar elements together, add numbered items, as well, all in the name of readability    IMAGE Image by 200 Degrees from Pixabay     4. Use Color and Texture Strategically Make smart use of color, texture, contrast, and light to direct the user's attention to key elements and important information on the screen.   5. Use Familiar UI Elements: One of the Key Rules of Good UI Design One of the UI best practices that's both:   the easiest to implement the most underestimated   And it all comes down to intuitive design. To sticking to common elements when creating your user interface.  Again, the hamburger menu makes the best example: once spotted, the user knows what it is and how to open it. Restrain yourself from showing off your creativity as a web designer. From being "discouragingly" innovative. Form should follow function, remember? Instead of impressing your users, you should help them get things done quickly and easily. That's what delivering a good user experience is all about, after all.   6. Put the User in Control of the UI Instilling a sense of control in the user is one of the most powerful UI design principles. Source: xd.adobe.com In this respect, here are some specific measures that you can implement:   6.1. Provide enough context  Ensure that the user knows, at each stage of his journey on your website, where he is, where he's been, and where he could go next. Tip: place visual cues to help the user develop a sense of mastery and control.   6.2. Be transparent about the system status Another one of those golden rules of good UI design: Let the user know, at all times, what's the status of the process that he's initiated. For instance, he/she might have started an action that requires some time for the computer to carry out. In this case, make sure you provide feedback, at regular intervals, about the system status, about what's going on.   6.3. Make actions reversible In other words, allow users to:   unselect undo their last actions restart whatever processes that they've engaged in   6.4. Design your UI with all user skill levels in mind And this is one of the most obvious characteristics of a good UI design. It's an easy to use interface for both casual and expert-level users.   6.5. Provide feedback on every user action It's more than a good UI best practice: it's a matter of... good manners to provide at least some sort of feedback at each point of action. Therefore, make sure your system delivers a meaningful reaction each time a user:   clicks on a menu hits a button clicks on a text message tab   Let the user know, using specific UI elements — animations, progress bars, pop-up windows, color change — whether he's successfully carried out the action or not.   7. Minimize Cognitive Load: Recognition over Recall “Task-relevant information only” should be one of your key rules of good UI design. And sticking to a limited number of elements within the display aligns with the very limits that the human attention, itself, imposes. In this respect, it's human nature that your users prefer to recognize information across a sequence of screens rather than to strive and recall it from their memory. For instance, our cognitive load is always lighter when we're challenged to answer multiple-choice questions compared to having to tackle short answer questions.   8. Stick to One Primary Action per Screen And here, we go back to the “visual declutter” principle again: Make sure that each screen supports just one single main action. Squeezing too much information on the same screen and requesting the user to carry out more than one primary action will just:   confuse him/her distract him lead to attention overload  9. Use Typography to Create Visual Hierarchy Most likely one of the easiest to follow rules of good UI design. Strategically use different font sizes and display text to enhance:   readability scanability legibility   Photo by Alice Donovan Rouse on Unsplash    10. Stick to a Small Number of Gestures Gesturing, swiping, tapping, pressing... no need to “squeeze” all these user actions into your app. Keep them to a minimum. Tip: Facebook and WhatsApp make some good UI design examples; their interfaces require a limited number of user gestures. Pro tip: make sure it's crystal clear to your users what gestures they need to perform in order to carry out certain actions on your interface. Source: Medium.com     The END! Now, I'm really curious to hear/read your thoughts:  How does your own list of must-follow rules of good UI design look like? Have I overlooked any key best practices? Let me know in the comments below. Image by FiveFlowersForFamilyFirst from Pixabay   ... Read more
Silviu Serdaru / Mar 17'2020
Why Use Siteimprove to Check Your Website for Accessibility? 8 Good Reasons
"How do I test my website for accessibility?" And right after you type in this question you discover that there are dozens of free website accessibility testing tools to choose from. So: why use Siteimprove? In this post, I'll answer your key questions about Siteimprove:   What does Siteimprove do? Why use precisely this accessibility evaluation tool? How to use the Siteimprove Accessibility Checker? Siteimprove vs Axe: what are the key differences? Monsido vs Siteimprove: which is the best web accessibility testing tool for you? Drupal 8 Siteimprove: what does it do? So, let's dive in:   1. How Does the Siteimprove Accessibility Checker Work?  "The Siteimprove Browser Extension is a Chrome/Firefox plugin that allows you to see page specific DCI scores and if a CMS deep link is set-up, it also allows you to fix content to improve the scores directly in your CMS during your browser session." (source: Siteimprove.com) Once added to your browser toolbar, you can use Siteimprove to identify accessibility issues on specific web pages. At any given time. It provides you with:   explanations on how they impact the user experience clear recommendations on how to address them Free, handy, effective. These are the best 3 words to describe the Siteimprove extension. Note: since all evaluation is performed in your browser, Siteimprove guarantees you a secure scanning of your non-public pages, multi-step forms, password-protected pages and pages with dynamic content.   2. Why Use Siteimprove over Other Website Accessibility Testing Tools? What powerful features make it stand out from the crowd of automated accessibility testing tools that you could use? I've selected the 8 most valuable ones:   2.1. Monitors all broken links and spelling mistakes on your web page Maybe you consider these issues to be mere... negligences to be put at the end of your priority list. But just imagine how much these "details" could affect a visually impaired user. This is where the Siteimprove Accessibility Checker comes in. It keeps your website under "surveillance". Ready to spot and to highlight any broken link, any little spelling mistakes that it detects. Or any other quality issues that it identifies. 2.2. Generates an accessibility report for you to analyze From ALT missing attributes to accessibility issues spotted in your tables and forms, the Siteimprove report lists all the problem areas to focus on. A handy overview that you can use to define all future tasks that need to be carried out in order to improve your website's accessibility.   2.3. Pinpoints accessibility issues  It'll highlight them all right on-page and in-code.  In other words, you don't need to do a research on all the latest accessibility guidelines first. The Siteimprove extension for browsers will outline all the key issues that you'll need to focus on to get started. 2.4. Integrates seamlessly with your CMS Whether it's Drupal or WordPress that you're using, Siteimprove enables you to fix the signaled issues on the spot. Right there, in your CMS, while you're browsing around your website. 2.5. Allows you to automate the accessibility checks And by automating the bulk of your testing process, you get to streamline all the tasks that it covers, such as:   testing various color combinations evaluating your PDF pages' accessibility testing your form fields 2.6. Provides specific recommendations Why use Siteimprove?  Because it doesn't stop at pointing out the accessibility issues on your website: it also gives you clear explanations on how to address them. 2.7. Enables you to monitor your progress in improving your website's accessibility   industry benchmarks historical graphs automated reports customizable dashboards All these Siteimprove features enable you to measure the progress that your team makes for turning your website WCAG 2.1 compliant. 2.8. Allows you to set up a hierarchy for the accessibility issues identified In short, the Siteimprove web accessibility checker enables you to categorize and to prioritize tasks by:   severity conformance level   And to assign them by job role (webmaster, editor, developer...) or responsibilities.   3. How to Use Siteimprove Accessibility Checker? Say you want to try the Siteimprove Google Chrome Extension. Here's how you use it:   install the Siteimprove Accessibility Checker Chrome extension from the Chrome Webshop from your Chrome browser add the extension to your browser: "Add to Chrome" look for the newly added icon in your browser window enter your target web page's URL in your browser click the Siteimprove Accessibility Checker icon and let it perform its audit take a look at the results displayed on the right side of the page   Note: Siteimprove Accessibility Checker uses the same checking engine as the Siteimprove Accessibility platform. 4. Siteimprove vs Axe Accessibility Tool Why use Siteimprove over Axe? How are they different anyway? Let's compare these 2 popular accessibility testing tools: 4.1. Axe browser extension It generates detailed results, but you might find its slideshow-style controls a bit challenging 4.2. Siteimprove Accessibility Checker   it stands out as an accessibility testing tool that allows you to filter tasks by "responsibility" (or job role) also, it displays the issues that it detects following the same structure of the WCAG guidelines it presents color-codes issues by conformance level (A, AA, AAA) it points out to the specific WCAG criteria that those issues relate to   5. Monsido vs Siteimprove Accessibility Checker And why would you choose Siteimprove over Monsido? Here's what sets them apart:   Monsido provides comprehensive crawls weekly, whereas with Siteimprove you get automated crawls every 5 days Monsido could discourage you with its less-friendly UI, whereas Siteimprove has a more intuitive dashboard   6. The Drupal 8 Siteimprove Module: What Does It Do? "The seamless integration between Siteimprove and Drupal streamlines workflow efficiencies for your web team. With the module, your team can fix errors and optimize content directly within the editing environment." (source: Siteimprove.com) In short, the module (or "Siteimprove plugin", if you wish):   scans your website for accessibility issues (broken links and misspellings, A, AA, AAA conformance level accessibility issues, readability levels, etc.) that you can then turn into manageable tasks and assign to your team members who can tackle them right in the editing environment that they're using   Tip: you can even use the Drupal 8 Siteimprove module to see what would be the impact if you unpublished a "problem" page before you apply this measure. The END! Have I managed to answer your "Why use Siteimprove?" question? Are you already using it as your website accessibility checker? If not, what other tool are you using and why have you chosen precisely that one? Let me know in the comments below.  Image by Sitanshu Kumar from Pixabay   ... Read more
Adriana Cacoveanu / Mar 12'2020