Comparing Various Ways to Hide Things in CSS

You would think that hiding content with CSS is a straightforward and solved problem, but there are multiple solutions, each one being unique.

Developers most commonly use display: none to hide the content on the page. Unfortunately, this way of hiding content isn’t bulletproof because now that content is now “inaccessible” to screen readers. It’s tempting to use it, but especially in cases where something is only meant to be visually hidden, don’t reach for it.

The fact is that there are many ways to “hide” things in CSS, each with their pros and cons which greatly depend on how it’s being used. We’re going to review each technique here and cap things off with a summary that helps us decide which to use and when.

How to spot differences between the techniques

To see a difference between different ways of hiding content, we must introduce some metrics. Metrics that we’ll use to compare the methods. I decided to break that down by asking questions focused on four particular areas that affect layout, performance and accessibility:

Accessibility: Is the hidden content read by a screen reader?
Document flow: Will the hidden element affect the document layout?
Rendering: Will the hidden element’s box model be rendered?
Event triggers: Does the element detect clicks or focus?

Now that we have our criteria out of the way, let’s compare the methods. Again, we’ll put everything together at the end in a way that we can use it as a reference for making decisions when hiding things in CSS.

Method 1: The `display` property

We kicked off this post with a caution about using display to hide content. And as we established, using it to hide an element means that the element is not generated at all. It’s in the DOM, but never actually rendered.

The element will still show in the markup, if you inspect the page you will be able to see the element. The box model will not generate nor appear on the page, which also applies …

accessiBe: Optimize for Accessibility Using AI Technology

Improving a website for accessibility is no longer a luxury—it’s a necessity. It’s not only required by law but also, as a web designer, it’s your job to make sure websites are accessible to everyone, including for people with disabilities.

For many years most designers and agencies avoided the topic of website accessibility for believing that it costs way too much to make a website accessible. The truth is it’s an effortless process that you can now entirely automate using AI-based software at a very affordable cost.

accessiBe is a tool to do just that. It uses Artificial Intelligence (AI) to optimize websites for accessibility. In this review, we take a closer look at how useful this software really is.

We’ve even installed accessiBe on our own site to see how it works. Keep reading to see it in action!

Website Accessibility and the Law

Before we get to all the details about this software, it’s important to understand how accessibility affects your users and your business.

In many cases, and for many businesses, having an accessible website is a legal requirement. Between 2017 and 2018, website accessibility-related lawsuits sky-rocketed by 181%WCAG) and Americans with Disabilities Act (ADA). The law was established to ensure that websites are optimized for any person with a disability.

Accessible website design, importantly, is also about offering a better UX to all audiences, attracting more customers, and serving every potential visitor with the best possible experience.

What Is accessiBe?

accessiBe is a platform that provides a fully-automated solution for optimizing websites for accessibility. The software solution seamlessly integrates with your website to provide all the necessary tools to make your site compliant with accessibility laws and regulations.

What makes this software most amazing is how it uses AI technology to scan your website for accessibility issues and adjust them based on different types of vision disabilities.

Normally, agencies charge up to $50,000 per year to provide website accessibility services. accessiBe provides the same, if not an even more convenient, solution for …

8 Horizontal Rules and Dividers Enhanced with CSS

Some design elements are so common that they almost become afterthoughts. The horizontal rule is one of them. It’s easy to simply place them within our content without any attention to detail.

But this venerable HTML tag is capable of doing so much more – thanks to some clever CSS. Horizontal rules can be quite decorative, whether you prefer a bold or subtle design. They can also be used as an enhanced branding mechanism, complete with color and logo elements in tow.

If you’re looking to take your HR’s up to the next level, you’ll want to check out this collection of fanciful dividers that go beyond the default. Let’s dig in!

The Web Designer Toolbox

Unlimited Downloads: 1,000,000+ Web Templates, Themes, Plugins, Design Assets, and much more!

Start Downloading Now!

The Measure of an HR

This example is incredibly clever, if a bit on the extreme side. It features a large conglomerate of <hr> tags (100 in all) that are styled to simulate the look of a ruler. Practical? Maybe not. But it’s certainly creative.

See the Pen
A Horizontal rule-er by John W

Inline Lines

While this snippet doesn’t use an actual horizontal rule, it simulates the effect with CSS. Text or other design elements can be placed inline with the divider, making for an attention-grabbing effect. It’s also delightfully simple in terms of code.

See the Pen
Inline horizontal rule by Ohad

Iconic Shapes

Here’s proof that subtlety can still stand out. A standard horizontal rule is enhanced with shapes (circle, diamond, star, etc.) and provides for an attractive visual. Combined with the rule’s short width and bright color, it helps readers delineate one section of content from another.

See the Pen
Fancy Horizontal Rules by szpakoli

Accordion Rules

Accordions have become one of the more popular UI elements due to their penchant for being space savers. This pure CSS take on …

Core Web Vital Tooling

I still think the Google-devised Core Web Vitals are smart. When I first got into caring about performance, it was all: reduce requests! cache things! Make stuff smaller! And while those are all very related to web performance, they are abstractly related. Actual web performance to users are things like how long did I have to wait to see the content on the page? How long until I can actually interact with the page, like type in a form or click a link? Did things obnoxiously jump around while I was trying to do something? That’s why Core Web Vitals are smart: they measure those things.

The Lighthouse Tab in Chrome DevTools has them now:

They are nice to keep an eye on, because remember, aside those numbers having a direct benefit for your users once they get to your site, they might affect users getting to your site at all. Web Core Vitals are factoring into SEO and for the new carousel requirements that were previously reserved only for AMP pages.

Tracking these numbers on one-off audits is useful, but more useful is watching them over time to protect yourself from slipping. Performance tooling like Calibre covers them. New Relic has got it. SpeedCurve tracks them.

Cumulative Layout Shift (CLS) is a tricky one. That’s the one where, say, the site has an advertisement at the top of an article. The request for that ad is asynchronous, so there is a good chance the ad comes in late and pushes the content of the article down. That’s not just annoying, but a real ding to performance metrics and, ultimately, SEO.

Nic Jansma’s “Cumulative Layout Shift in Practice” offers deep dive.

CLS isn’t just “does page do it or not?” There is a score, as that illustration above points out. I’d say 0 is a good goal as there is no version of CLS that is good for anybody. There is lots of nuance to this, like tracking it “synthetically” (e.g. in a headless browser, especially …

Zeit – A GUI Front-end To Crontab To Schedule Jobs In Linux

This brief tutorial explains about Zeit, a graphical front-end to Crontab and at command,…

The post Zeit – A GUI Front-end To Crontab To Schedule Jobs In Linux appeared first on OSTechNix.

from OSTechNix https://ostechnix.com/zeit-a-gui-front-end-to-crontab-to-schedule-jobs-in-linux/…

Zeit – A GUI Front-end To Crontab To Schedule Jobs In Linux

This brief tutorial explains about Zeit, a graphical front-end to Crontab and at command,…

The post Zeit – A GUI Front-end To Crontab To Schedule Jobs In Linux appeared first on OSTechNix.

from OSTechNix https://ostechnix.com/zeit-a-gui-front-end-to-crontab-to-schedule-jobs-in-linux/…

30+ Best Adobe Premiere Pro Intro Templates (Free & Premium)

Every video starts with an intro scene but not all video intros look great. However, you’ll never have to worry about it when using professional Premiere Pro intro templates to create your opening scenes.

The intro is arguably the most important part of a video. It’s what captivates the viewer and keeps them watching for the entire duration of the video. Whether you’re a videographer making professional films or making vlogs on YouTube, you should always pay careful attention to perfecting the intro scene. Especially if you want to grab the audience’s attention from the beginning.

In this post, we feature some of the best Premiere Pro intro templates you can use to create all kinds of intro scenes without an effort. There are templates for YouTube videos, promotional videos, sports videos, and much more. And all of them are made by professionals.

Grab a template and start customizing.

Urban Intro – Premiere Pro Template

urban intro - premiere pro intro template

Modern and trendy videos should have upbeat intros that match the look and feel of the video. That’s why this Premiere Pro intro template is perfect for urban style videos. This template is fully customizable and comes with color controls and 12 image placeholders for creating an attractive intro scene.

Rhythm Typography – Premiere Pro Intro Template

Typographic intros are quite popular among many YouTubers and Instagram users. They fit in well with trendy videos, especially with product promotion clips. If you’re making promotional videos for Instagram, Facebook, or YouTube, this intro template is perfect for you. The template features an energetic typographic animation you can easily customize to your preference.

YouTube Intro – Premiere Pro Template

Keeping your intros short is also important when making clips for YouTube and other social networking channels. This template is ideal for such videos as it comes with a quick and easy intro scene. The intro is only 9 seconds long and features a creative animation with brush strokes and customizable text. It includes 8 text placeholders and 3 different color presets.

Clean & Energy – Premiere Pro

…

20 Freshest Web Designs, October 2020

We have become so used to using web sites just to buy stuff that it is easy to forget that the web has more to offer. So this month we’ve included some because-it’s-interesting sites, some micro-sites and some just-for-the-sake-of-it projects.

Many of these are about selling or promoting products and services too, but in a more oblique way that is frequently more engaging than a straightforward sales site.

Micro sites can be a great way of including content that doesn’t fit in neatly with the rest of the main site, or is temporary, or to show a lighter, more fun side of a brand. And a well thought out micro site can act as a gateway to pull in even more visitors to its ‘parent’ site.

Your World Your Way

Your World Your Way is an interactive portal for the University of Auckland. An optional questionnaire customizes the experience, and clearly a lot of effort has gone into this in terms of the questions and possible answers, and the presentation. It is engaging and enjoyable to use, and the information provides links to the main University of Auckland website.

Blind Barber

This micro site is to celebrate 10 years of barber shop chain Blind Barber, which started as one shop with a bar in the back room, in New York’s East Village. An entirely black and white design provides a clean backdrop for color photos and videos, and some great scrolling animations give a pleasing flow to the content.

Brews & Grooves

Brews & Grooves pairs records with different beer. Although a ‘fun’ project, it is still a well designed piece of work with some vintage style typography and some pleasing rollover animation effects. It is an effective advert for those involved in creating it, as listed in on its ‘credits’ page.

Gucci Bloom

As part of a new campaign to promote it’s ‘Bloom’ perfumes, Gucci have created a Gucci Bloom game. The player has to pick up flowers and perfume bottles, but miss a flower and the vines …

How ‘Lazy’ Price Estimates Can Cost Freelancers

Pricing is one of the most challenging aspects of being a freelance web designer. More specifically, determining what a client will receive in exchange for a particular price.

The struggle is real. In my two-plus decades of running a business, this is still an area where I falter from time to time. The line between charging too much or too little can be difficult to figure out. For many of us, the trend seems to tilt towards the latter.

Ideally, you’d like to ensure that your clients are getting exactly what they pay for – and that you aren’t being taken for a ride, either. But how do you know when you’ve hit the mark? And what happens when the amount of work you put in exceeds the price you quoted?

In an effort to help freelancers (myself included), let’s explore how to more accurately estimate costs and fill clients in on the details.

The Web Designer Toolbox

Unlimited Downloads: 1,000,000+ Web Templates, Themes, Plugins, Design Assets, and much more!

Start Downloading Now!

Gain a Full Understanding of Project Requirements

The first step should be to know as much about the project requirements as possible. Perhaps that sounds easy enough. Yet, it can be very difficult to get the full picture of what needs done.

Sometimes the conversation is simply too broad. When discussing a project with a prospective client, they’ll often talk about the desired end result. While that’s good to know, it does leave out an awful lot of other key information.

Getting to that outstanding end result takes a lot of effort. The process requires web designers to work within certain parameters. Things like web hosting constraints, the capabilities of available third-party software and existing implementations come to mind.

Now, we can’t expect our clients to grasp all of this right away. It’s on us as web professionals to bring all of …

Popular Design News of the Week: October 19, 2020 – October 25, 2020

Every week users submit a lot of interesting stuff on our sister site Webdesigner News, highlighting great content from around the web that can be of interest to web designers.

The best way to keep track of all the great stories and news being posted is simply to check out the Webdesigner News site, however, in case you missed some here’s a quick and useful compilation of the most popular designer news that we curated from the past week.