There are plenty of new tools to speed up your work available now. From background patterns and icons to landing page templates and new fonts, we’ve got something for almost everyone here. And while some of these tools are premium options, almost everything is free and open-source.

Here’s what’s new for designers this month.

Pattern.css

Pattern.css is a CSS-only library that you can use to fill empty backgrounds. There are tons of pattern options available and you can search and sort by the type of pattern that appeals to you – grids, dots, lines, stripes, zigzags, and more.

Image Compare Viewer

Image Compare Viewer is a lightweight slider that lets you see changes to images in a before and after format. Use it for grading, CGU, and pretty much any other type of comparison. It uses vanilla JavaScript and has no dependencies. (There’s also a plugin for WordPress users.)

Scale Document

Scale Document is a secure platform for document processing. The coolest feature of this tool is that it can scan documents, “read” them, and turn them into digital data. It’s a paid tool with options for different use cases.

Screen Recorder

Screen Recorder is a minimal progressive web app that does exactly what you would expect. Allow access and record screens (and audio) with a click. It’s free and doesn’t include watermarks or ads.

Codespace

Codespace is an app to organize code snippets into folders. Then you can search, share, and access code anytime. It’s a paid app that works cross-platform.

GitKraken Timelines

GitKraken Timelines is a free tool to communicate milestones and deadlines. Create private or public shareable timelines. Plan product releases and provide visibility across your organization or just have fun.

Tara AI

Tara AI is a modern product development platform. As an alternative to Jira, it lets you run sprints and planned release cycles on time. (It’s still in beta and free to try.)

CSS Inspector

CSS Inspector lets you get the CSS code of any web element with the inspector. The premium tool is a quick and easy way to inspect and edit live webpages without coding.

BestTime

BestTime is a neat API that forecasts how busy a business will be at any given hour. It looks at week, peak, busy, quiet hours, and provides live busyness comparisons and dashboards.

Cakeurl

Cakeurl is a link shortener that adds “superpowers” to your links, such as calls to action, retargeting pixels, and analytics.

Brandfetch for Adobe XD

Brandfetch for Adobe XD lets you pull the brand assets into your software. Just enter the company name and add everything instantly. The tool is free for small companies and developers and has paid plans for power users.

Free HTML Landing Page Templates

This roundup of 40 Free HTML Landing Page Templates is a great collection to help jumpstart website design projects. The best part is every option is open source and the collection includes a variety of page types for different products and services.

Animockup

Animockup is a tool to create free, animated product mockups using your images and information. Use it to make animated videos to showcase new or upcoming projects.

Database Schema Templates

Database Schema Templates is a collection of real-world databases that you can use when developing the architecture of an app. Everything is open source.

Sitesauce

Sitesauce converts your dynamic website (such as a blog) into a static website in one click and keeps the site updated when content changes. This will help reduce server costs and page load times and increase scalability and security.

SQL PD

SQL Police Department is a game where you solve crimes using SQL, while learning more about the language.

LineIcons 2.0

LineIcons is a set of 2,000 line icons in 20 categories and two weights. Icons come in SVG, Web Font, AI, and React formats. This kit includes free and pro versions.

GitHub Writer

GitHub Writer is a browser extension that changes GitHub’s default editor to a WYSIWYG rich-text editor. You can use it when creating, editing, or commenting on GitHub issues, pull requests, and wikis.

Caddy 2

Caddy 2 is an open-source web server with automatic HTTPS written in Go. Plus, it renews certificates automatically.

Swiftify

Swiftify is a tool to convert a storyboard to SwiftUI in just three steps: Upload, output, apply fixes. That’s it.

Alejo

Alejo is a beautiful line typeface for display use. (It also includes a solid option.) With curved lines and a thick style, it is made to use large.

Good Boy

Good Boy is a novelty font for dog lovers. The character set includes letters and numbers but is somewhat limited after that.

Lovely Ampersand

Lovely Ampersand is a beautiful handwriting-style typeface that would be lovely for invitations. Take special note of the glyphs with long tails for a more elaborate feel.

Macklin Pro

Macklin Pro is a new superfamily that includes desktop, web, and variable fonts. It’s versatile, highly readable, and with serifs, sans serifs, slabs, and some beautiful italics, it might be the only font you need for projects. (And while this font is new, they are offering it at a stellar deal of less than $50.)

Source

Which mobile application development platform should I opt for?

What are the prominent advantages of choosing that platform?

Will it be the best choice for my app?

I am sure that there are so many questions that arise in the mind when it comes to choosing an enterprise mobile app development platform. Given the plenty of available options, one is bound to feel baffled. But selecting the most appropriate platform holds utmost importance.

To help you out, we have whittled a list of the top six enterprise mobile application development platforms that are leading the charts in 2020. You can learn about these in detail to choose the best one for your app. Let’s begin.

Appcelerator

Appcelerator makes use of a single JavaScript codebase to build strong native apps. It has an open and extensible environment that allows you to produce apps for Android, iOS, Blackberry, HTML5 and hybrid apps. Its open-source SDK supports over 5,000 devices.

Pros

• It offers rapid prototyping. The app development process is greatly accelerated and a prototype is built by investing minimum time and effort to evaluate the user interaction with UI.
• It comprises ArrowDB, a schema-less data store that seeks to deploy data models with almost no setup efforts.
• You can seamlessly integrate it to the existing delivery systems such as MDM and SCM solutions.
• It consists of pre-built connectors for MS SQL, MongoDB, Box, Salesforce, MS Azure and many more.

Cons

• It is quite buggy. Even though the newer versions are more stable, it is not very suitable for production use. The more complex your app gets, the more often you will have to face technical issues such as annoying bugs, random crashes, weird behaviour.
• There is poor support extended from the Appcelerator’s developer’s community.

PhoneGap

PhoneGap is an amazing cross-platform framework, allowing app developers to build apps that operate smoothly on multiple mobile platforms. It has a powerful backend system that greatly accelerates the development process. It is best suited for developing simple mobile apps that do not extensively use the mobile’s native features.

The PhoneGap community comprises latest modules and codes that are available for free, owing to its Open Source License. It offers tremendous flexibility and app developers having a basic knowledge of JavaScript, HTML5, and CSS3 can get started with development, without the need of learning any additional languages.

Pros

• A great level of uniformity is maintained as the apps developed can be used for multiple mobile platforms. The apps exhibit minimalistic differences when viewed on different platforms.
• PhoneGap works on JavaScript, HTML5 and CSS3, the most common and very popular web technologies.
• It allows you to use in-app integrated payment systems via Google Play Store for Android, App Store for iOS, etc.
• The app developers can make use of old JavaScript or some other libraries such as Prototype, jQuery, MooTools, Sencha Touch and more to manage the interaction.

Cons

• PhoneGap doesn’t support all functionalities
• It may prove to be ineffective at times, such as, while working with native apps
• The capacity of cross platform apps is somewhat low-key when compared to other apps built for independent platforms
• With PhoneGap, you can develop an app for once only. Thereafter, you will be charged some monthly fees.

Sencha

Sencha is believed to be an ideal framework for developing data-rich cross-platform applications powered by hardware acceleration methods. It is a warehouse of 115+ high-performing integrated UI components, including charts, grids, calendar, etc.

HTML5 utilization can be easily unleashed on all modern browsers by this platform. Also, developers can use Sencha Ext JS for developing ground-breaking apps that leverage the potential of Business Intelligence for Analytics and data visualization.

Pros

• Sencha comes with a plethora of built-in themes that work on all major platforms
• The platform is supported by a back-end data package that operates independently with different data sources
• Apps created with Sencha can be easily integrated with PhoneGap / Cordova for packaging and native API access
• Currently, Sencha is supported on WebKit browser, which includes the popular Google Android and iOS platforms
• Sencha mobile apps can be easily scaled to different resolutions for achieving maximum compatibility with different devices

Cons

• Some commercial versions of Sencha are braved with licensing complexity challenges
• Animated themes for many targeted platforms are limited

Xamarin

Xamarin helps to develop native apps that work on multiple platforms by using a shared C# code base. The platform enables the developers to use the same IDE, APIs and language everywhere. Also, the Git integration can be directly launched into the Xamarin Studio. Owing to the unprecedented benefits of this platform, it has been adopted by some renowned names like Microsoft, IBM, Foursquare, etc.

Pros

• Xamarin apps are very neatly written and thus, they can be used for reference as well.
• The Xamarin Component Store contains cross-platform libraries, UI controls and third-party libraries.
• As much as 75% of the developed code can be shared across major mobile platforms, which reduce the time-to market as well as bring down the cost of development
• Xamarin offers quality assurance and functionality testing for various devices. This ensures fewer bugs and an efficient deliverable

Cons

• The free version of the software comprises limited features
• Developers cannot take full advantage of open-source libraries owing to some compatibility issues

Ionic

Ionic is a 100% free and open-source framework that is best suited for cross-platform mobile app development. The framework helps to create native functionality in apps that can seamlessly operate on multiple devices and operating systems. With native functionalities, exhaustive gestures and highly customizable tools, Ionic apps can help to augment user experience.

Pros

• The framework enables the developers to build apps for multiple app stores with a single code base, thus reducing development cost and timeline
• The use of AngularJS helps to create a powerful SDK for building feature-rich and robust applications
• The framework comes with many CSS and JavaScript components that account for minimal maintenance

Cons

• In-app performance is not as efficient and quick as that of native apps
• The use of AngularJS necessitates the developers to possess a specific skillset needed to build complex apps
• It is difficult to achieve smooth in-app navigation since the UI-route is very tricky

NativeScript

This is an open-source platform that facilitates cross-platform app development with a rich, native-like user interface. With this platform, the developers can easily access native APIs through JavaScript to build highly interactive apps. Native mobile apps for iOS and Android can be created using a single codebase.

Pros

• A large number of NativeScript plugins are available that facilitate the creation of native mobile apps
• Developers can reuse the accessible plugin NPM any number of times in all NativeScript projects
• NativeScipt offers complete support for AngularJS 2 and TypeScript
• The platform provides unrestrained access to native libraries, including CocoaPods and Gradle

Cons

• Multi-threading in NativeScript is a possible issue
• There is no adequate information available on the use of different features of NativeScript

Final WordsThese are the top 6 enterprise mobile application development platforms that are ruling the charts in 2020. You can get in touch with a reliable mobile application development agency to discover the most suitable platform for your precise needs. Choosing the right platform will ensure that you get a technically-sound deliverable as well as save on the time and effort involved in the process.

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.

Lite – A Lightweight Text Editor

The 50+ Best Free Resources for Learning Design

How to Use Git: A Beginner’s Guide

I Hate Photoshop

Pose Animator: A Web-Based SVG Animation Tool

10 Ultimate Tips for Designers to Create Effective Logo

10 Best Webflow Templates for your Next Portfolio

5 Exercises to Level up your Design Skills

Affinity Lockdown 2020 is the Online Festival We all Need

How a Simple UX Design Can Take your App to the Top

When Figma Isn’t Enough for Product Teams

Convincing-Looking 90s Fonts in Modern Browsers

Linux on the Desktop as a Web Developer

Write Libraries, not Frameworks

10 Tips to Build a Killer Website

Rebuilding Our Tech Stack for a New Facebook.com

Art Deco will Be the Visual Language of 2021

Useful Sections for a Design System Reference Site

How to Convince Others not to Use Dark Patterns

Neumorphism in Mobile Design Concepts

Design Sprints Complete Guide

5 Personality Quizzes to Uncover your Creative Potential

8 Ways your Design System Can Fail (and How to Avoid Them)

101 Cognitive Biases & Principles that Affect your UX

Resources to Help Remote Designers

Want more? No problem! Keep track of top design news from around the web with Webdesigner News.

Source

A surprisingly common response when asking people about things they’d fix about anything in CSS, is to improve the handling of viewport units.

One thing that comes up often is how they relate to scrollbars. For example, if an element is sized to 100vw and stretches edge-to-edge, that’s fine so long as the page doesn’t have a vertical scrollbar. If it does have a vertical scrollbar, then 100vw is too wide, and the presence of that vertical scrollbar triggers a horizontal scrollbar because viewport units don’t have an elegant/optional way of handling that. So you might be hiding overflow on the body when you otherwise wouldn’t need to, for example. (Demo)

Another scenario involves mobile browsers. You might use viewport units to help you position a fixed footer along the bottom of the screen. But then browser chrome might come up (e.g. navigation, keyboard, etc), and it may cover the footer, because the mobile browser doesn’t consider anything changed about the viewport size.

Matt Smith documents this problem:

And a solution of sorts:

body {
  min-height: 100vh;
  /* mobile viewport bug fix */
  min-height: -webkit-fill-available;
}

Does this really work? […] I’ve had no problems with any of the tests I’ve run and I’m using this method in production right now. But I did receive a number of responses to my tweet pointing to other possible problems with using this (the effects of rotating devices, Chrome not completely ignoring the property, etc.)

It would be better to get some real cross-browser solution for this someday, but I don’t see any issues using this as an improvement. It’s weird to use a vendor-prefixed property as a progressive enhancement, but hey, the world is weird.

Direct Link to Article — Permalink

The post CSS fix for 100vh in mobile WebKit appeared first on CSS-Tricks.

As a little experiment, I shared a development tip on three different social networks. I also tried to post it in a format that was most suitable for that particular social network:

• On Twitter, I made it a thread.
• On Instagram, I made it a series of images.
• On YouTube, I made it a video.

How did each of them “do”? Let’s take a look. But bear in mind… this ain’t scientific. This is just me having a glance at one isolated example to get a feel for things across different social media sites.

The Twitter Thread

Twitter is probably our largest social media outlet. Despite the fact that I’ve done absolutely nothing with it this year other than auto-tweeting posts from this site (via our Jetpack Integration), those tweets do just about as well as it ever did when I was writing each tweet. These numbers are bound to change, but at the time of writing:

Going off that engagements number, a little bit less than 1% of the followers had anything to do with it. I’d say this was a very average tweet for us, if not on the low side.

The Instagram Post

Instagram is by far the smallest of our social media outlets, being newer and not something I stay particularly active or consistent on. No auto-posting there just yet.

Using Reach, that’s 96% of the followers. That’s pretty incredible compared t 1% of followers on Twitter. Although, on Twitter. I can easily put URLs to tweets and send people places, where my only options on Instagram are “check out the link in my profile” or use a swipe-up thing in an Instagram Story. So, despite the high engagement of Instagram, I’m mostly just getting the satisfaction of teaching something as well as a little brand awareness. It’s much harder for me to get you to directly do something from Instagram.

The YouTube Video

YouTube is in the middle for us, much bigger than Instagram but not as big as Twitter. YouTube is a little unique in that there can be (and are) advertising directly on the videos and that get’s a “revenue share” from YouTube. That’s very much not driving motivation for using YouTube (I make 50 cents a day, but it is unique compared to the others.

Facebook?

We do have a Facebook page but it’s the most neglected of all of them. We auto-post new articles to it, but this experiment didn’t really have a blog post. I published the video to our site, but that doesn’t get auto-posted to Facebook, so the tip never made it there.

I used to feel a little guilty about not taking as much advantage of Facebook as I could, but whenever I look at overall analytics, I’m reminded that all of social media accounts combine for ~2% of traffic to this site. Spending any more time on this stuff is foolish for me, when that time could be spent on content for this site and information architecture for what we already have. And for Facebook specifically, whatever time we have spent there has never seemed to pan out. Just not a hive for developers.

CodePen?

I probably should have factored CodePen into this more, since it’s something of a social network itself with similar metrics. I worked on the examples in CodePen and the whole video was done in CodePen. But in this case, it was more about the journey than the destination. I did ultimately link to a demo at the end of the Twitter thread, but Instagram can’t link to it and I wasn’t as compelled to link to it on YouTube as the video itself to me was the important information.

If I was trying to compare CodePen stats here, I would have created the Pen in a step-by-step educational format so I could deliver the same idea. That actually sounds fun and I should probably still do that!

Winner?

Eh.

The problem is that there isn’t anything particularly useful to measure. What would have been way more interesting is if I had some really important call to action in each one where I’m like trying to sell you something or get you to sign up for something or whatever. I feel like that’s the real world of developer marketing. You gotta do 100 things for someone for free if you want them to do something for you on that 101st time. And on the 101st time, you should probably measure it somehow to see if the effort is worth it.

Here’s the very basic data together though…

One interesting thing is that I find the effort was about equal for all of them. You’d think a video would be hardest, but at least that’s just hit-record-hit-stop and minor editing. The other formats take longer to craft with custom text and graphics.

These would be my takeaways from this limited experiment:

• You need big numbers on Twitter to do much. That’s because the engagement is pretty low. Still, it’s probably our best outlet for getting people to click a link and do something.
• Instagram has amazing engagement, but it’s hard to send anyone anywhere. It’s still no wonder why people use it. You really do reach your audience there. If you had a strong call to action, I bet you could still get people do to it even with the absence of links (since people know how to search for stuff on the web).
• While I mentioned that for this example the effort level was fairly even, in general, YouTube is going to require much higher effort. Video production just isn’t the same as farting out a couple of words or a screenshot. With that, and knowing that you’d need absolutely massive numbers to earn anything directly from YouTube, it’s pretty similar to other social networks in that you need to derive value from it abstractly.
• This was not an idea that “went viral” in any sense. This is just standard-grade engagement, which was good for this experiment. I’m always super surprised at the type of developer tips that go viral. It’s always something I don’t expect, and often something I’m like awwwww we have an article about that too! I’d never bet on or expect anything going viral. Making stuff that your normal audience likes is the ticket.
• Being active is pretty important. Any chart I’ve seen has big peaks when posts go out regularly and valleys when they don’t. Post regularly = riding the peaks.
• None of this compares anywhere close to the real jewel of making things: blogging. Blogging is where you have full control and full benefit. The most important thing social media can do is get people over to your own site.

The post Comparing Social Media Outlets for Developer Tips appeared first on CSS-Tricks.

In CSS, line-height is probably one of the most misunderstood, yet commonly-used attributes. As designers and developers, when we think about line-height, we might think about the concept of leading from print design — a term, interestingly enough, that comes from literally putting pieces of lead between lines of type.

Leading and line-height, however similar, have some important differences. To understand those differences, we first have to understand a bit more about typography.

An overview of typography terms

In traditional Western type design, a line of text is comprised of several parts:

• Baseline: This is the imaginary line on which the type sits. When you write in a ruled notebook, the baseline is the line on which you write.
• Descender: This line sits just below the baseline. It is the line that some characters — like lowercase g, j, q, y and p — touch below the baseline.
• X-height: This is (unsurprisingly) the height of a normal, lowercase x in a line of text. Generally, this is the height of other lowercase letters, although some may have parts of their characters that will exceed the x-height. For all intents and purposes, it servers as the perceived height of lowercase letters.
• Cap-height: This is the height of most capital letters on a given line of text.
• Ascender: A line that oftentimes appears just above the cap height where some characters like a lowercase h or b might exceed the normal cap height.

Each of the parts of text described above are intrinsic to the font itself. A font is designed with each of these parts in mind; however, there are some parts of typography that are left up to the type setter (like you and me!) rather than the designer. One of these is leading.

Leading is defined as the distance between two baselines in a set of type.

A CSS developer might think, “OK, leading is the line-height, let’s move on.” While the two are related, they are also different in some very important ways.

Let’s take a blank document and add a classic “CSS reset” to it:

* {
  margin: 0;
  padding: 0;
}

This removes the margin and padding from every single element.

We’ll also use Lato from Google Fonts as our font-family.

We will need some content, so let’s an create an

tag with some text and set the line-height to something obnoxiously huge, like 300px. The result is a single line of text with a surprising amount of space both above and below the single line of text.

CodePen Embed Fallback

When a browser encounters the line-height property, what it actually does is take the line of text and place it in the middle of a “line box” which has a height matching the element’s line-height. Instead of setting the leading on a font, we get something akin to padding one either side of the line box.

As illustrated above, the line box wraps around a line of text where leading is created by using space below one line of text and above the next. This means that for every text element on a page there will be half of the leading above the first line of text and after the last line of text in a particular text block.

What might be more surprising is that explicitly setting the line-height and font-size on an element with the same value will leave extra room above and below the text. We can see this by adding a background color to our elements.

CodePen Embed Fallback

This is because even though the font-size is set to 32px, the actual text size is something less than that value because of the generated spacing.

Getting CSS to treat line-height like leading

If we want CSS to use a more traditional type setting style instead of the line box, we’ll want a single line of text to have no space either above or below it — but allow for multi-line elements to maintain their entire line-height value.

It is possible to teach CSS about leading with a little bit of effort. Michael Taranto released a tool called Basekick that solves this very issue. It does so by applying a negative top margin to the ::before pseudo-elementand a translateY to the element itself. The end result is a line of text without any extra space around it.

The most up-to-date version of Basekick’s formula can be found in the source code for the Braid Design System from SEEK. In the example below, we are writing a Sass mixin to do the heavy lifting for us, but the same formula can be used with JavaScript, Less, PostCSS mixins, or anything else that provides these kinds of math features.

@function calculateTypeOffset($lh, $fontSize, $descenderHeightScale) {
  $lineHeightScale: $lh / $fontSize;
  @return ($lineHeightScale - 1) / 2 + $descenderHeightScale;
}


@mixin basekick($typeSizeModifier, $baseFontSize, $descenderHeightScale, $typeRowSpan, $gridRowHeight, $capHeight) {
  $fontSize: $typeSizeModifier * $baseFontSize;
  $lineHeight: $typeRowSpan * $gridRowHeight;
  $typeOffset: calculateTypeOffset($lineHeight, $fontSize, $descenderHeightScale);
  $topSpace: $lineHeight - $capHeight * $fontSize;
  $heightCorrection: 0;
  
  @if $topSpace > $gridRowHeight {
    $heightCorrection: $topSpace - ($topSpace % $gridRowHeight);
  }
  
  $preventCollapse: 1;
  
  font-size: #{$fontSize}px;
  line-height: #{$lineHeight}px;
  transform: translateY(#{$typeOffset}em);
  padding-top: $preventCollapse;


  &::before {
    content: "";
    margin-top: #{-($heightCorrection + $preventCollapse)}px;
    display: block;
    height: 0;
  }
}

At first glance, this code definitely looks like a lot of magic numbers cobbled together. But it can be broken down considerably by thinking of it in the context of a particular system. Let’s take a look at what we need to know:

• $baseFontSize:This is the normal font-size for our system around which everything else will be managed. We’ll use 16px as the default value.
• $typeSizeModifier: This is a multiplier that is used in conjunction with the base font size to determine the font-size rule. For example, a value of 2 coupled with our base font size of 16px will give us font-size: 32px.
• $descenderHeightScale: This is the height of the font’s descender expressed as a ratio. For Lato, this seems to be around 0.11.
• $capHeight: This is the font’s specific cap height expressed as a ratio. For Lato, this is around 0.75.
• $gridRowHeight: Layouts generally rely on default a vertical rhythm to make a nice and consistently spaced reading experience. For example, all elements on a page might be spaced apart in multiples of four or five pixels. We’ll be using 4 as the value because it divides easily into our $baseFontSize of 16px.
• $typeRowSpan: Like $typeSizeModifier, this variable serves as a multiplier to be used with the grid row height to determine the rule’s line-height value. If our default grid row height is 4 and our type row span is 8, that would leave us with line-height: 32px.

Now we can then plug those numbers into the Basekick formula above (with the help of SCSS functions and mixins) and that will give us the result below.

That’s just what we’re looking for. For any set of text block elements without margins, the two elements should bump against each other. This way, any margins set between the two elements will be pixel perfect because they won’t be fighting with the line box spacing.

Refining our code

Instead of dumping all of our code into a single SCSS mixin, let’s organize it a bit better. If we’re thinking in terms of systems, will notice that there are three types of variables we are working with:

Thinking in these terms will help us scale our system much easier. Let’s take each group in turn.

First off, the system level variables can be set globally as those are unlikely to change during the course of our project. That reduces the number of variables in our main mixin to four:

$baseFontSize: 16;
$gridRowHeight: 4;

@mixin basekick($typeSizeModifier, $typeRowSpan, $descenderHeightScale, $capHeight) {
  /* Same as above */
}

We also know that the font level variables are specific to their given font family. That means it would be easy enough to create a higher-order mixin that sets those as constants:

@mixin Lato($typeSizeModifier, $typeRowSpan) {
  $latoDescenderHeightScale: 0.11;
  $latoCapHeight: 0.75;
  
  @include basekick($typeSizeModifier, $typeRowSpan, $latoDescenderHeightScale, $latoCapHeight);
  font-family: Lato;
}

Now, on a rule basis, we can call the Lato mixin with little fuss:

.heading--medium {
  @include Lato(2, 10);
}

That output gives us a rule that uses the Lato font with a font-size of 32px and a line-height of 40px with all of the relevant translates and margins. This allows us to write simple style rules and utilize the grid consistency that designers are accustomed to when using tools like Sketch and Figma.

As a result, we can easily create pixel-perfect designs with little fuss. See how well the example aligns to our base 4px grid below. (You’ll likely have to zoom in to see the grid.)

Doing this gives us a unique superpower when it comes to creating layouts on our websites: We can, for the first time in history, actually create pixel-perfect pages. Couple this technique with some basic layout components and we can begin creating pages in the same way we would in a design tool.

Moving toward a standard

While teaching CSS to behave more like our design tools does take a little effort, there is potentially good news on the horizon. An addition to the CSS specification has been proposed to toggle this behavior natively. The proposal, as it stands now, would add an additional property to text elements similar to line-height-trim or leading-trim.

One of the amazing things about web languages is that we all have an ability to participate. If this seems like a feature you would like to see as part of CSS, you have the ability to drop in and add a comment to that thread to let your voice be heard.

The post How to Tame Line Height in CSS appeared first on CSS-Tricks.

Just like there is a movement to make more websites (and more of websites) from pre-rendered static files (Jamstack), so to might we consider moving content-based APIs to be static. Sean C Davis:

A static API is simply a collection of flat JSON files that live on a content delivery network (CDN). It doesn’t perform any action other than delivering content (static JSON files) to the requesting user.

But that doesn’t mean a static API is simple. And every file doesn’t have to be manually generated or updated. A static API can still use a database and it can still pull data from external services. In other words, it can be dynamically generated, but it is statically delivered.

The use cases are probably somewhat limited, but I still like it. In a sense, all RSS feeds (or, more directly, JSON feeds) could be done this way, and many are.

Direct Link to Article — Permalink

The post WTF is a Static API appeared first on CSS-Tricks.

Learning Resources In Challenging Times: Online Workshops, Meetups And Events

Iris Lješnjanin

2020-05-15T14:30:00+00:002020-05-15T23:37:48+00:00

In these current strange times of isolation and social distancing (with almost all events and conferences being cancelled), it can be quite difficult to feel connected to family, friends and colleagues. Here at Smashing, we believe that is is now more important than ever to stay in touch and support each other. Behind the scenes, the team is working tirelessly on ways to keep the community connected, and oh boy do we have a lot of things in store for you! You didn’t really think we’d give up that easily, did you?

We’ve been busy over the last few weeks, and we’re not stopping yet! We have online workshops, SmashingConf Live, Smashing Meets and last but not least, Smashing TV coming right at your fingertips! But first, let’s see what else we’ve been up to…

Look What’s Cookin’!

Exciting times! Click!, our latest Smashing book, is available for pre-order with a friendly discount — you can already start reading the eBook until your printed copy arrives at your doorstep. Written by Paul Boag and beautifully designed by Veerle Pieters, the book is split into 11 chapters: from exploring the psychology of decision making and how to measure conversion to exploring ways of how to encourage users to act without alienating them.

Of course, if you’re feeling smashing today, we’d like to invite you join the Smashing family and get the eBook for free (among with many other eBooks and a few fancy cats!).

Learning And Networking, The Smashing Way

Despite the current circumstances, we’re keen to find ways in which we can offer Smashing experiences to anyone interested in learning from experts in our industry — without needing to leave your desk! We’ve been asking what type of resources you’d like to have, and so all of the following online events is what has landed in our Smashing wishing well. Thank you to everyone who has shared their thoughts and feedback — we’ve been all ears!

1. Online Workshops (May–July)

Our friendly online front-end/UX workshops are bound to boost your skills and help you gain practical, actionable insights from experts in the industry — live. There will be plenty of insightful takeaways, exercises, slides, recordings and friendly Q&A time. Of course, we’re happy to provide discounts for large groups and students.

We already have you covered for the next three months — make sure to save your spot as soon as you can:

When?	What?	Who?
May 7–22	Advanced CSS/Sass	Miriam Suzanne
May 12–26	Smart Interface Design Patterns	Vitaly Friedman
May 28 – June 12	Web Performance Masterclass	Harry Roberts
June 11–12	The CSS Layout Masterclass	Rachel Andrew
June 16–30	Front-End Accessibility Masterclass	Marcy Sutton
June 18–26	Building Modern HTML Emails	Rémi Parmentier
July 2–17	Buy! The eCommerce UX Workshop	Vitaly Friedman
July 7–21	Design Systems	Brad Frost

Note: If you’re also interested in how you too can run online workshops, listen to Smashing Podcast episode 14 with Rachel Andrew in which she talks about running online workshops and how a traditional event can adapt when participants can’t attend in person.

2. SmashingConf Live (June 9–10)

Meet SmashingConf Live (June 9–10), a truly smashing, friendly online conference on front-end & UX. With interactive live sessions, practical insights, accessible speakers, collaborative notes and fireplace chats with like-minded folks. Jump to first confirmed speakers. Check schedule ?

Both days start at 8 AM PDT (check your time), with interactive sessions, followed up with a time for Q&As and discussion zones.

Ah, and the best bit: a conference in which you play an active role — taking part in live sessions, Q&As, discussion zones and challenges. To the schedule. But of course that’s not all! Be prepared for design & coding challenges, scavenger hunt and fireplace sessions with mystery guests. And to keep in style, of course we’ll throw a Smashing Party.

Do you like what you see, but are worried about getting some time off from work? Well, you surely didn’t think we would leave your hanging? We know how difficult it can sometimes be, and so we’ve prepared a neat lil’ Convince-Your-Boss template to help you out. Good luck!

3. Smashing Meets (Free)

We’re super excited to run our very first Smashing meetup next week! We will focus on front-end and UX, but also cover all sorts of topics from performance to accessibility. Smashing Meets wouldn’t be possible without some amazing communities from around the world, so another Thank You to everyone involved!

4. Smashing TV (Free Webinar on May 19th)

Looking for ways to help you expand your accessibility test coverage beyond automation? With very little resources, you can make a meaningful difference. Join us with Carie Fisher and Harris Schneiderman at 7:00 PM CET/1:00 PM EDT who will demonstrate the basics of automated testing and share key lessons on on maximizing your accessibility impact.

Sharing Personal Experiences And Stories

We’re moving onto our 16^th episode of the Smashing Podcast next week! The Smashing Podcast is the perfect way to take a little bit of Smashing along with you on your morning walks, while washing the dishes, or anytime you like really. You can subscribe in your favorite app to get new episodes as soon as they’re ready.

• Previous Smashing Podcast episodes (including transcripts)
• Follow @SmashingPod on Twitter

Your Design Work Deserves Attention

Do you have artwork you’d love to share with the design community? If so, please do! We are always looking for creative talent, so if you have an idea for a wallpaper design, please don’t hesitate to submit it. Join in! ?

Trending Topics On Smashing Magazine

We publish a new article every day on various topics that are current in the web industry. Here are some that our readers seemed to enjoy the most and have recommended further:

• “Setting TypeScript For Modern React Projects Using Webpack And Babel”
  by Blessing Krofegha
  This article introduces Typescript, a superscript of JavaScript that presents the static type feature for spotting common errors as developers codes, which enhances performance, hence results in robust enterprise applications. You’ll also learn how to efficiently set up TypeScript in a React Project as we build a Money Heist Episode Picker App, exploring TypeScript, React hooks such as useReducer, useContext and Reach Router.
• “A Complete Guide To Mechanical Keyboards”
  by Ben Frain
  How much thought have you put into your primary input device? Ever considered how much better your interface with your computer might be? In this article, we dive into the possibilities of mechanical keyboards. The different layouts, switch types and even keycap material. Strap yourself in — this will be a deep dive!
• “Micro-Typography: How To Space And Kern Punctuation Marks And Other Symbols”
  by Thomas Bohm
  For hundreds of years, we have been using white space in typography. Today, in 2020, how do we add spacing to punctuation marks and other symbols, and how do we adjust the space on the left and right side in an easy and consistent way? It is actually not as easy and quick as it should be.
• “How To Pass Data Between Components In Vue.js”
  by Matt Maribojoc
  With so many different ways to share data across components, you should know which technique is best for your situation. Let’s analyze three of the most common ways to pass data in VueJS.
• “Reducing Design Risk”
  by Eric Olive
  The pressure to rush market and usability research carries risk. We’ll offer four practical techniques to mitigate this risk and create designs that better serve customers and the company: context over convenience, compromise, better design decisions, design reduction.

Best Picks From Our Newsletter

We’ll be honest: Every second week, we struggle with keeping the Smashing Newsletter issues at a moderate length — there are just so many talented folks out there working on brilliant projects! Kudos to everyone involved!

Interested in sponsoring? Feel free to check out our partnership options and get in touch with the team anytime — they’ll be sure to get back to you right away.

P.S. A huge thank you to Cosima Mielke for writing and preparing these posts!

Creating Accessible Color Palettes

Finding the perfect tint or shade of a color is not only a matter of taste but also accessibility. After all, if color contrast is lacking, a product could, in the worst case, even become unusable for people with vision impairments. A very detailed contrast checker to help you detect potential pitfalls ahead of time comes from Gianluca Gini: Geenes.

The tool lets you tinker with hue ranges and saturation and apply the color palettes to one of three selectable UI mockups. Once applied, you can trigger different kinds of vision impairments to see how affected people see the colors and, finally, make an informed decision on the best tones for your palette. To use the colors right away, just copy and paste their code or export them to Sketch.

Command Line Love

It’s not uncommon for technical documentation to be dry and feel intimidating, especially for people who are just getting started with a new tool. That can get quite frustrating especially when a manual is difficult to read or follow, or the explanations are verbose and lack examples.

Dash Dash takes the Unix (Linux, BSD, macOS) open source manual pages and sets the content in a beautiful type and layout. It provides not only explanations of all commands, but also search, examples and TL;DR sections. Also, The Art of Command Line takes you on a journey to Command Line from basics to system debugging.

And if you are up for advanced command line techniques, cmdchallenge prompts you to solve tasks with a single line of bash. (vf)

Accessible Component Libraries

While many of the component libraries we create are trying to cover all the usual suspects (the accordions, the tables, the carousels, the drop-downs, along with typography, colors and box shadows), No Style Design System by Adam Silver is focused primarily around accessibility and web forms.

As a system created for and used in his book on Form Design Patterns, Adam’s library provides a set of accessible components for everything from autocomplete, checkboxes and password reveal to radios, select boxes and steppers. Most of them have a minimal CSS styling with clean, accessible markup. And if you need slightly more advanced components, Heydon Pickering’s Inclusive Components has got your back: with comprehensive tutorials on accessible cards, data tables, notifications, sliders, tabbed inerfaces, tooltips, menus and toggles. (vf)

Custom CSS Cascades

Miriam Suzanne built a demo to illustrate a very clever way to define a cascade of custom properties. One that allows you to determine which intent should take priority, without worrying about the specificity of how the value is defined.

See the Pen [Custom Cascades](https://codepen.io/smashingmag/pen/JjYawPP) by Miriam Suzanne.

Miriam shows how it works at the example of a button. Due to how the cascade is arranged, the default button is always falling back to --btn-bg--default. Adding the disabled attribute, always overrides any other button colors, no matter where they are defined, and, when new button types are created, --btn-bg--type ensures that only the defaults are overridden but not the state. The approach also lets you set these values contextually. A smart solution to avoid the usual dangers that highly-specified inline styles usually bring along.

Front-End Bookmarks

Some of us save all the useful articles and talks they come across in one ever-growing bookmark folder (which can make finding what you’re looking for quite a challenge at times), others have a more organized approach. Like Manuel Matuzovi?.

Manuel collects articles and talks about HTML, CSS, and JavaScript on his site Front-End Bookmarks, grouped alphabetically by elements, attributes, properties, selectors, methods, and expressions. No matter if you’re looking for information on how to correctly use aria-labelledby or what the ::marker pseudo-element is all about, chances are good that Manuel already compiled helpful resources on the topic. By the way, if you feel that a resource is missing in the collection, don’t hesitate to contribute to it on GitHub.

GitHub Tips And Tricks

Do you know how to automatically squash commits on GitHub when merging pull requests? Or how to open a repo in the browser using GitHub CLI? If not, Joe Previte’s collection of GitHub tips and tricks might be for you.

In bite-sized videos, Joe shares small but powerful tips to take your GitHub workflow to the next level. And for those of you who prefer to learn by reading, most tips are also available as short blog posts. Handy little timesavers.

The Sound Of Colleagues

Working from home can have some real advantages over working from an office, but let’s be honest, it can be a rather lonely experience, too, when there are no colleagues around. If you feel your home office is getting too quiet and you need some bustle in the background to stay focused, The Sound of Colleagues has got your back.

The Sound of Colleagues lets you mix office noises to create your custom office ambient noise. People typing and talking, phones ringing, the coffee machine, the printer — all of these little things add up to bring a bit of office feeling to your home. Maybe it’ll even help you boost your productivity, who knows?

A Minimalist And Modern Media Player Library

If you want to embed a media player on your site, Vime might be worth taking a closer look at. Built around the idea that you control the player, not the other way around, the open-source library provides an alternative to Videojs and Plyr and supports HTML5, HLS, Dash, YouTube, Vimeo, and Dailymotion.

Vime does not only shine with a minimalist, sleek look, but it is responsive, accessible, modular, and lightweight, too. It gets by without any external dependencies and comes in different packages tailored to different needs so that you can pick just what’s required for your use case. And since minimalist doesn’t mean bland, Vime is backed up by a plugin system that offers a lot of room for customization — think custom controls, settings, tooltips, and more. The last two versions of all modern browsers as well as IE11 are supported.

Smashing Newsletter

Every second Tuesday, we send a newsletter with useful techniques on front-end and UX. Subscribe and get Smart Interface Design Checklists PDF in your inbox.

Your (smashing) email



Subscribe ?

Front-end, design and UX. Sent 2× a month.
You can always unsubscribe with just one click.

(cm, vf, ra)

Wearable devices are some of the hottest tech on the market today. We’re living in a world where people want access to endless information as quickly as possible. Glancing at your watch and being able to check everything from your heart rate, to your text messages can be incredibly convenient.

As of 2019, the latest numbers revealed that around 1 quarter of adults used a wearable device at least once a month in the US. What’s more, the number of options available for wearable devices is increasing. It’s not just smart watches anymore, but wristbands, glasses, earphones, and smart rings.

Wearable devices present a unique set of challenges when it comes to development and design. If the chances are that you’ll need to start branching into wearable apps one day soon, the following tips will help to keep you on the right path.

Design for Glanceability

Glanceability is a strange term to consider when you’re a digital designer.

Most of the time, you want people to do a lot more than just glance at your content. If you’re designing a website, for instance, then you want people to keep looking at what you have to offer for at least a few minutes.

However, when you’re designing for a smartwatch, you’re appealing to a selection of people who want to spend as little time interacting with tech as possible. Making your UI glanceable means reducing the interface to its most basic visual level, so that people can consume information as fast as possible.

For instance, the Bring Grocery Shopping app for smartwatches converts items on your shopping list to visual icons so that you can instantly see what you need to buy. Once you’ve picked up an item, you tap it on your watch to turn it from red to green.

Focus on making sure that your audience can consume any of the content on their smartwatch within a period of five seconds or less. If it takes more than 10 seconds for someone to interact with your smartwatch app, you might need to go back to the drawing board.

Keep it Simple

The principle of KISS (Keep it Simple, Stupid), is pretty common in web design.

No matter what kind of interface you might be designing for, it’s crucial to ensure that you’re not cluttering any visual space with information that your users don’t want or need. However, if you’re designing for smartwatch apps, then it’s even more important to keep things simple.

The KISS Principle means making sure that you don’t add more actions or information to your wearables than your user needs. Think about how you can keep the interactions between the user and the device as brief as possible.

For instance, if users need to reply to a message on their smartwatch, then they’re going to want to avoid wasting time typing on a tiny screen. That’s why apps like Telegram for the Android watch allow you to send canned responses and emojis instead.

Design for singular, focused tasks that allow your users to get things done fast.

Reduce User Interactions

Web designers are often focused on making websites and mobile apps that make users want to click, interact and engage as frequently as possible. However, you need to take a very different approach when you’re designing for wearable apps.

The most effective apps on wearable devices require as little action as possible for users. This means that you need to think about how people are going to use your app with as little effort as possible. The less time users have to fiddle around with an app, the more time they spend using it.

When designing for wearable UX, utilize not only touch, but vibration and sound to get things done. You can also consider using things like voice input to schedule activities and compose messages too. In the Dark Sky Weather app for the iWatch, all you need to do is swipe from one page to another to see more information about your forecast.

Notably, when keeping your wearable apps as interaction-free as possible, you’ll also need to think about the kind of wearables that you’re creating for. Different devices provide very different capabilities and experiences.

Follow the Rules of Minimalism

Users interacting with a wearable display love minimalism.

That’s because minimalist designs mean that there isn’t a lot of clutter on a tiny screen for your user to contend with. If you’re minimalist in your choices, you can ensure that everything from the colors on the app, to the typography you choose, is selected for its clarity and impact.

Contrast is particularly important on smaller screens, as it helps to make various elements easier to read at a glance. Make sure that you take your UI out and test it in real-world environments to examine how easy it is to read. Other points to think about include:

• Straightforward typography: When it comes to the typeface on your wearables, a simple sans-serif selection is usually the best option. For instance, check out the kind of fonts you get on the Apple Watch app for Evernote.
• Space between elements: White space can make or break your design strategies for small screens. If you put too much space between elements, there’s not going to be enough room for any other content. However, if you put too little space between elements, they’ll be hard to read.
• Easy access: Any buttons, links, or other tappable functions need to be very easy to use with a wearable app. Don’t make people struggle to use your content.

Follow Platform Design Guidelines

In order to be successful with app development, you need to consider a handful of requirements. Remember, there are dozens of different companies experimenting with wearable development these days. What’s more, various tools work in very unique ways. Just because the app you build works for the iWatch, doesn’t mean that it’s going to work for a watch from Samsung, and so on.

Thinking about which tools you want your app to work for ahead of schedule will help you to design apps that target your users’ specific desires. Remember that the end goal is always to produce a well-functioning, easy-to-use application that’s perfect for your intended audience.

Remember though, while you do need to focus on a specific platform, you shouldn’t be designing your applications in isolation. It might be worth thinking about interactions with other devices too. For instance, do you want people to be able to use their smartwatch to control functions on their phone? Should your consumers be able to upload data from their phone straight to their computers?

The Lifesum app works as a diet and meal planner for your Android watch, but it can also provide useful tips on how to reach your nutritional goals on your phone based on the information it takes from your watch.

Reduce Interruptions

Let’s face it, even on smartphones and tablets; constant incoming notifications can be annoying and disruptive. While we do rely on our devices to keep us informed, too many interruptions can sometimes make us abandon our tech. It’s one thing to have a mobile device buzzing in your pocket, and another entirely to have a vibration constantly pulsing against your wrist or finger.

Keep the number of notifications that you send to your users as low as possible. The frequency of notifications need to be kept minimal, so the device doesn’t constantly irritate the person wearing it. When you do need to notify a user, make sure that the notification is as valuable as possible. Pointlessly pushing irrelevant information to your customers will cause them to uninstall your app.

If you’re not sure exactly what your customers need, you can always consider letting them configure the timing and kinds of notifications that they receive with a helpful user interface. You could even let your users choose whether they want a notification to come with a vibration, a tone, or just a screen glow.

Some tools, like iTranslate, avoid notifying their users at all. That means that customers only get alerts when they choose to interact with the app.

Concentrate on Convenience

Finally, think about how you can make your wearable apps as convenient and useful as possible for your target customer. The more comfortable your users feel using your app, the more it will become a natural part of their routine.

For instance, it’s rarely a good idea to design an app that’s going to eat up all of the battery life on your user’s wearable the moment that they start using it. Think about how much power your app really needs to use to remain valuable.

Additionally, consider how the features on your app can genuinely solve problems for customers. It’s not just about translating messages from a smartphone to a smartwatch, so people don’t have to fumble with their phone. If you’re offering a messaging app, help people send information to friends faster with pre-configured responses, and voice recognition; If you’re giving your customers a maps app, let them instantly swipe to the right route when they’re walking, driving, or getting public transport, you could even offer handy tips on things to see as they continue on their journey.

Get Ready to Design for Wearables

Preparing for the new age of web design isn’t just about getting yourself ready for things like AI and 5G. You also need to consider how today’s users are going to be interacting with applications and interfaces on a host of different platforms.

Learning the basics of designing for wearables will help you to earn more jobs, impress more clients and expand your portfolio in the years ahead.

Featured image via Unsplash.

Source

Accessible Images For When They Matter Most

Carie Fisher

2020-05-15T09:30:00+00:002020-05-15T23:37:48+00:00

When it comes to informing the public about critical health issues, timing is everything. The information you consume today could save your life tomorrow. And with more than 65% of the population being visual learners — meaning they learn and remember best through visual communication — the job of creating and sharing accessible images has never been more important. This is especially true for public service announcements (PSAs) aimed at providing crucial and urgent information to the public.

But what happens when your users have visual impairments? Or dyslexia? Or cognitive disorders? How do they receive and understand this visual information? What elements make an image accessible or inaccessible?

Image Types And Alts

Before we dissect an image and examine each element that can make or break its accessibility, we first need to take a step back and think about the purpose of the image. Is it to inform a user? Elicit an emotion? Is the image acting as a link? Or is it purely eye-candy?

There are a number of questions that can help you determine how best to convey the image information to a person using an assistive technology (AT) device, like a screen reader.

“What type of message is the image trying to convey?”

“Is the message simple, complex, emotional, or actionable?”

Using a tool such as an online image decision tree or the simplified chart shown below can help you decide which category your image belongs to. Or just imagine your image has — poof! — vanished. Then ask yourself:

“Do I understand the content that remains?”

If the answer is yes, it is decorative. If not, the image is informative and contextually necessary. Once you determine what kind of image you are working with, there are some basic accessibility guidelines to consider.

Decorative Images

If you decide your image is decorative, then programmatically the image needs to be hidden. One way to do this is to use an empty/null alternative text attribute. This sends a signal to the AT devices to ignore this image as it is not needed to understand the content or action on the page. There are many ways to hide alternative text including using an empty/null alt (e.g. ), using ARIA (e.g. , , or ), or by implementing the image as a CSS background.

Note: An empty/null alternative text attribute is not the same as a missing alternative text attribute. If the alternative text attribute is missing, the AT device might read out the file name or surrounding content in an attempt to give the user more information about the image. While aria-hidden="true" is an option to hide images, be cautious where you apply it as it will remove the entire element from the accessibility API.

In the example below, we see a giant letter “S” and a drawing of a black cat with green eyes used to make the drop cap look a bit more fun on a Smashing Magazine article.

When we remove the drop cap illustration, what changes? Certainly, there are visual differences, but no information is lost.

<div class="drop-caps" aria-hidden="true">
    <img src=".../images/drop-caps/s.svg" alt="">
    <img src=".../images/drop-caps/character-12.svg" alt="">
</div>

In this drop cap example, both aria-hidden="true" and an empty/null alt were used to hide the images from assistive technology devices. While this kind of redundancy is not necessary to make it accessible — it is also not harmful in this particular situation since the drop caps

does not contain any additional information we would need to expose to an AT user. Just remember: when it comes to accessible code, more is not always better.

Beyond programmatically hiding your image — there is not much more you need to consider when it comes to decorative images. If you are saying “But wait, what about X?” or “How about Y?” then you might need to go back to the image decision tree tools and re-evaluate your image — it might not be 100% decorative after all. One of the most difficult types of images to categorize tends to be the “emotional/mood” based images since this subtype is a bit subjective. What one person considers decorative another person might consider informative, so use your best judgment.

Informative Images

If you decide your image is informative, there are a lot more things to consider. For AT devices to understand the message or intent of an image, informative images must have programmatically-discernible alternative text. Typically, this is accomplished using the alt="[some description]" method, but there are many alternative ways to add image information depending on its subtype, type of image, and context (e.g. complex vs simple, SVG vs img). But having alternate text is not enough — it must also be meaningful. For example, if your image is about feeling safe at home, but your alternative information says “house” — does that convey the full message?

An example of an informative image is the following Smashing Magazine logo. If we ask the same question as before (does the context or content change if this image is missing?), then the answer is “yes.” In this example, the logo is both informative and actionable since it is both an image and a link. We can see from the code snippet that is the link title and the image alternative text is . When we fire up an AT device — like a screen reader — we should hear both pieces of information conveyed.

<div class="logo">
    <a href="/" title="Back to the homepage">
        <picture>
        <source media="(min-width: 1350px)" srcset=".../images/logo-full.svg">
        <img src=".../images/logo/logo.svg" alt="Smashing Magazine">
        </picture>
    </a>
</div>

Hearing both the phrase “back to the homepage” and “Smashing Magazine” in one feature is OK since each phrase is unique and connected to a different purpose.

For more complex alternative text phrases, conduct the telephone test. For example, if you called up a friend and said “purple slug” and hung up the phone your friend would probably be confused, but also might think of a purple slug — but in what context? If you called a friend and said “the purple slug is eating my hydrangeas,” that would paint a more vivid picture — without adding a lot of additional characters or effort.

Of course, an AT user will have to listen to your alternative text, so don’t go overboard. That is why it is suggested to cap your text at 150 characters. If you need to add more context to the image (e.g. complex image), there are other, more descriptive patterns or methods you can use to add more detail.

World Beyond Image Alts

Now that we covered image types and alternative text attribute basics, let’s look beyond and consider some additional image elements:

• Color and Contrast
• Typography and Layout
• Copy and Icons

In each real-world PSA example, we will look at the image through the lens of a different type of disability — keeping in mind that simulators are tools and may not represent an individual’s true experience. Yet, by using such tools, we can begin to build empathy into our designs and really consider the different ways our images are being consumed.

Note: To be clear, the following examples are for illustrative and educational purposes only and not meant to call-out or otherwise pass judgment about the designs in question. Also, there may be multiple issues in one PSA, but we will just focus on one issue type per example. There will be a lot of opportunities for improvement in the area of digital communications when the dust settles on COVID-19 and accessibility is just one more area to consider reviewing.

Color And Contrast

The beating heart of design arguably is color, and if color is the heart of design, then contrast is the muscle. Without good color contrast levels in place elements like words, icons, and other graphical shapes are hard to discern and the design can quickly become inaccessible. But what happens when you perceive color and contrast differently than others — does the same message and intent come through? How can we reach people with color-sensing issues? Color blindness — is a real concern for accessibility-focused designers.

Who Color And Contrast Can Affect

• It is estimated that 300 million people worldwide are color blind, and approximately 95% of those inflicted are male (1 in 12 men vs 1 in 200 women are color blind). There are many different variants of color blindness, with red/green color blindness being the most common, followed by blue/yellow, and total color blindness being the most rare.
• Globally there are 246 million people with low vision. People with visual impairments such as glaucoma, cataracts, macular degeneration, diabetic retinopathy, corneal clouding, etc, may have issues with text contrast. People with partial sight and older adults also often experience limited color vision.
• People using monochrome displays or in certain situations (e.g. low lighting in a room) might have trouble with contrast. People using text-only, limited-color stylesheets, or in certain situations (e.g. too much glare on a screen) might have trouble discerning colors, too.

PSA Color Review

In the first example, we are reviewing PSAs from the non-profit group called the Ad Council — one of the oldest and most prolific producers of such material in the US. The aim of these “higher risk assets” is to reach populations considered more susceptible to contracting and becoming seriously ill by the novel coronavirus (one of the groups that need this information the most).

First, we see the unedited version of the PSAs:

Next, we can see two types of color blindness simulated using the ChromeLens extension. ChromeLens is a Google Chrome extension that provides a suite of tools to help with web accessibility development and includes the Lens Vision Simulator, which transforms the colors on a website simulating what a colorblind person might see.

Simulated PSA with Deuteranopia (red/green-blindness):

Simulated PSAs with Protanomaly (red-weak):

Below is a breakdown of some color contrast ratios found on the PSAs between the different color blindness simulators.

Original PSA — color contrast ratio of 1.26:1 with the text “Have” against the background:

Deuteranopia simulation filter applied — color contrast ratio of 1.07:1 with the text “Have” against the background:

Protanomaly simulation filter applied — color contrast ratio of 1:15:1 with the text “Have” against the background:

While these PSAs incorporate a variety of striking color choices and are visually appealing (when testing the text against the background in these images), many of the combinations do not pass the Web Content Accessibility Guidelines (WCAG) color contrast ratios. This is true even for the unedited versions of these designs, but when we apply the ChromeLens color blindness simulator for Deuteranopia (red/green-blindness) Protanomaly (red-weak), the color contrast ratios get even worse (1.26:1 vs 1.07:1 and 1:15:1). To make these PSAs more accessible, we would want to bump up the contrast so people with color-related vision disorders could read the text.

PSA Contrast Review

Going back to the “higher-risk assets” from the Ad Council, we can see how the PSAs look like to people in two different low vision situations.

First, we see the unedited version of the PSAs:

Next, using the NoCoffee Vision Simulator tool, we can see how the PSAs might look to someone with low vision and cataracts.

PSAs with simulated low vision filter applied:

PSAs with simulated cataract filter applied:

Below is a breakdown of some color contrast ratios found on the PSAs between the different low vision simulators.

Original PSA — color contrast ratio of 1.33:1 with the word “Undergoing” against the background:

PSA with low vision simulation filter applied — color contrast ratio of 1.25:1 with the word “Undergoing” against the background:

PSA with cataract simulation filter applied — color contrast ratio of 1.06:1 with the word “Undergoing” against the background:

A lot of people blame color for their design accessibility issues, but these examples show that contrast plays a key role as well. Without changing the colors on these PSAs, but by changing the user perspective and blurring or obfuscating the text, we can see that the text on the images is more difficult to read — even though the contrast ratios didn’t change by much (1.33:1 vs 1.25:1 and 1.06:1). Similar to the color examples (to make these PSAs more accessible), we need to increase the contrast on these images so people with low vision and eye disorders could read the text.

Next Steps For Accessible Color And Contrast

Review the WCAG color contrast ratio guidelines and use tools like the Colour Contrast Analyser to check your designs. Your images with copy need a color contrast ratio of at least 4.5:1 for regular-sized text, and at least 3:1 for large-sized text (18pt and larger). The color contrast ratio of 3:1 also applies to essential icons. Try a tool like the A11y Color Palette where you can quickly review all the possible accessible color combinations and create a palette with accessibility in mind. Or use the accessibility features built-in into the palette generator Coolors.

Next, utilize solid color backgrounds (reading text on busy backgrounds, overlays, textures, or gradients is difficult in general), but especially when the text does not have enough contrast. By picking colors on the opposite ends of the color spectrum and avoiding red/green and blue/yellow combinations, you will increase the likelihood that your color and contrast ratios are robust. Use a tool like the ChromeLens extension to double-check the color contrast with color blindness in mind. Also, be careful with light shades of color — especially grays — they are difficult to see for people with low vision. Use tools like NoCoffee Vision Simulator to simulate low vision issues and see how your design holds up in these situations.

Going beyond color contrast ratios, it is also important to not use color alone to convey information. For example, “contact information can be seen in red” or “click the blue button to learn more.” The same is true for sensory characteristics such as shape, color, size, visual location, orientation, or sound — they cannot be used on their own. For example, if you said “Please click the link to the left of the image for more information,” an AT user could have difficulty finding the correct link.

Typography and Layout

In a perfect world, we would keep our text and images separated. This would allow users to manipulate the typography and layout in any way they would want: font size, letter spacing/kerning, justification, margins/padding, and more. But unfortunately, there are a lot of formats that this kind of separation is difficult or impossible, such as social media posts, emails, PDFs, and other fixed form media.

Who Typography And Layout Can Affect

• Typography is especially important to the estimated 15–20% of the world’s population with dyslexia — a learning disorder in which certain letters, numbers, or combinations of letters can be confusing or seem to flip/move around.
• People with low vision can have issues with tight letter spacing/kerning, morphing words like “barn” into “bam” or “modern” into “modem” while reading.
• For people with attention-deficit disorders and reading or vision-based disabilities, a complex layout is a real barrier. These users have trouble keeping their place and following the flow of the content due to the lack of whitespace and clear linear pathways.

PSA Typography And Layout Review

Let’s first take a look at a PSA from California’s Long Beach Health and Human Services.

If we are looking at this PSA from an accessibility point of view, what typography and layout issues do you see? In what ways could we improve this image?

Original PSA:

Unedited PSA with mark-up and notes:

If we focus on the typography and layout the following elements stand out:

Red hand-drawn lines	Illustrating the multiple “rivers of space” created by the justified alignment.
Blue dotted boxes	Outlining six different layout changes.
Pink numbers	Highlighting the 14 different typography treatments discovered (ignoring the logo). Some changes are more obvious like font family or color changes, some are more subtle like alignment, size, or weight changes in the typography.
Green question marks	What does this equation even mean? Cognitively this is a difficult thing to ascertain given the odd layout.
Black lines and dots	Expected 12 points of visual interest in an UX eye-tracking test based on the order of the content blocks (top to bottom, left to right) and typical equation flow (X + Y = Z).

Let’s look at another PSA and again evaluate the typography and layout from an accessibility point of view. This time, the image was created by the Health Department of Prince George County in Maryland.

Original PSA:

Unedited PSA with mark-up and notes:

If we focus on the typography and layout the following elements stand out:

Blue dotted boxes	Outlining nine different layout changes.
Green numbers	Highlighting the 11 different typography treatments discovered (ignoring the logos). Some changes are more obvious like font family or color changes, some are more subtle like alignment, size, or weight changes in the typography.
Black lines and dots	Expected 10 points of visual interest in an UX eye-tracking test based on the order of the content blocks (top to bottom, left to right) and numbering order (1 to 6) forming a zig-zag type eye movement.

So far we’ve seen some examples where there are a lot of typography changes and the layouts are complex. Now, let’s review a cleaner PSA. This one is from the Prevention Action Alliance out of Columbus, Ohio.

Original PSA:

Unedited PSA with mark-up and notes:

Blue dotted boxes	Outlining three different layout changes.
Pink numbers	Highlighting the four different typography treatments discovered (ignoring the logos). In this case, only one font family was used, with variations only on size, color, and weight.
Black lines and dots	Expected eight points of visual interest in an UX eye-tracking test based on the order of the content blocks (top to bottom).

The third PSA example is more consistent when it comes to typography and layout, and has more overall whitespace and a linear visual pathway compared to the first two examples.

Next Steps For Accessible Typography And Layout

Less is more when it comes to accessible typography, so limit the number of different font families and variations such as italic, bold, ALL CAPS, or other styling methods that may make the content difficult to read. The research is not conclusive about whether serif or sans-serif typefaces are easier to read, but if you choose font families that have clearly defined letter shapes it is more likely that the font will be accessible. Some common offenders to look out for when choosing an inclusive font include the “I” (ex. India), “l” (ex. lettuce), and “1” (ex. one). Likewise, characters like “b” and “d” and “q” and “p” can sometimes be mirrored (either left-right or up-down), and the letter “B” and the number “8” oftentimes look too similar.

In regards to layout, less is also more. Try and repeat patterns whenever possible and limit the width of any blocked section to 80 characters (or 40 characters for logograms). Likewise, avoid paragraph alignment which creates whitespace or “rivers of space” within the content (e.g. justified alignment). Line spacing (leading) is at least space-and-a-half within paragraphs, and paragraph spacing is at least 1.5 times larger than the line spacing. Incorporating all of these layout guidelines will help people with attention-deficit disorders, reading and vision-based disabilities focus more on the content.

Copy And Icons

Last but not least, let’s focus on the actual PSA message. Arguably, copy is the key element in informing the public on the latest COVID-19 updates and providing information about preventing the spread of the virus. But icons in this situation serve up more than just decoration; these elements visually repeat the same message as the copy. No pressure, but both copy and icons need to be spot-on to reach the widest array of people.

Who Copy and Icons Can Affect

• People with attention-deficit disorders — estimated at 129 million people worldwide — can have issues focusing on copy that is too long, does not break items into lists, and lacks whitespace (think: line height, paragraph margins, etc).
• For people with certain cognitive disabilities, it is difficult to understand figurative language or specialized usage like the phrases “it’s raining cats and dogs” or “that test was a piece of cake.”
• People with cognitive, language, and learning disabilities may need visual icons, graphics, and symbols to understand the accompanying copy.

PSA Copy Review

For this example, let’s test the copy of two PSAs from the Centers for Disease Control and Prevention (CDC) for readability. Readability is the ease with which a reader can understand a written text. Readability of copy depends on both the content and presentation.

CDC created PSA — What you should know about COVID-19 to protect yourself and others:

If we evaluate the main body copy using readability indicator tools like Readable and The Readability Test, we see that the “What you should know about COVID-19 to protect yourself and others” PSA has 388 words at an average reading grade level of 9 and a Flesch Kincaid Reading Ease¹ of 64.6. In addition to those metrics (for accessible copy), we also want to look at the number of complex words and their frequency — in this case, 35 and 9.02% respectively.

¹ The Flesch Kincaid Reading Ease level is out of 100. The lower the number, the more difficult the copy is to read. For reference, a reading ease score of 60-70 is considered acceptable for basic web copy.

?

While the copy in the first image was adequate and falls in the suggested readability ranges for web-based copy, let’s compare it to another PSA created by the CDC on the same subject.

CDC created PSA — Stop the Spread of Germs:

This PSA has a lot more imagery and a lot less text. If we again evaluate the main copy, we see that our copy now has a total of 90 words with an average grade of 6 and a Flesch Kincaid Reading Ease of 83.6. The number of complex words is now down to 4 with a frequency of 4.44%.

Compared to the first PSA, the “Stop the Spread of Germs” PSA one has 298 fewer words and is easier to read by 3rd-grade levels. It has a reading ease level increase of 19 points, and is less complex. Based on these numbers, we can extrapolate that the second PSA is more inclusive than the first when looking at copy alone.

PSA Icon Review

But testing the readability of copy isn’t the only way to measure the effectiveness of a PSA when it comes to message accessibility. Another element we need to look at are the icons accompanying the copy. If we are presented only the icons, will the same message be received?

Let’s now look at a couple of examples. Based on the icons alone, what is the message that the image is trying to convey about riding your bicycle safely during COVID-19?

Edited PSA from the European Cyclists’ Federation:

Original PSA:

This is the unedited PSA. Were you able to figure out the full message? While you might have been able to guess correctly for a couple of icons, were there parts of the message you missed not having the copy?

OK, let’s take a look at another example. This next PSA comes from the Pennsylvania Department of Health. Let’s do the same exercise as before: can you understand the message in this PSA (without the icon copy)?

Edited PSA:

Original PSA:

Now we can see the PSA with copy. Were you able to figure out the full message? While there may have been an icon or two that tripped you up, was it easier to decipher the icons on the second PSA versus the first? Hopefully, this quick exercise helped you understand the critical role icons play in the message.

Next Steps for Accessible Copy and Icons

Be clear and concise. The unofficial rule of thumb is to write for a 9th-grade reading level. This level is based on the assumption that most people reach the 12th-grade reading level, but in times of peak stress, they might not be reading at their highest level. Try and use plain language and avoid technical jargon, fancy words, colloquialisms, and expressions. Likewise, make sure any acronyms, abbreviations, or unusual words are explained in more detail or linked out to additional resources. Tools like Readable and The Readability Test can help you determine the reading level of your copy, while tools like Hemingway Editor or Grammarly can suggest edits to make your copy more inclusive.

Use icons, graphics, and symbols to supplement copy whenever possible. Adding imagery allows you to break down some language and cognitive barriers and not rely on your typography to carry all the weight. Just be sure to choose icons that are common or don’t require a lot of thought.

Wrapping Up

Creating accessible images involves a lot more than just adding alt text. It is important to consider how all image elements — color, contrast, typography, layout, copy, and icons — affect your users as well. By taking a bit more time and building these accessibility principles into your images you will undoubtedly reach more people — on their terms. In uncertain times like these, we need to be sure we are addressing all the ways we can improve our images to be more inclusive in our messaging.

(ra, yk, il)