Test the hell out of everything

Testing on web applications is usually a pain and testing for our typographical work is no exception. We’ll discuss how to build a cross-platform arsenal with a single laptop, Open box and 2 virtual machines and how to use that arsenal to test our content, do screen shots and even start adding ebook apps on all of them. Here we go:

What do we need to test with?

I’m a Mac user so that’s my primary platform for testing and development. In my Mac I have the following browsers and applications:

Desktop

  • Chrome release and Canary The Canary channel has the latest and greatest additions to Chrome and it will not overwrite your standard Chrome installation
  • Firefox release and developer edition
  • Safari comes installed with OS X
  • I used to include Opera as an option but since they moved to WebKit and then to Blink, they are too close to an existing browser to merit download. If you still want it, you can download it directly from Opera

Open box Virtual Machines

I’d rather not have to get a brand new computer to download the browsers

  • Download Virtual Box from its website
  • Microsoft makes virtual machines available for all the versions of IE and Edge in different versions of Windows
  • If you’re planning on working with MS Edge and IE 11 in a windows 10 environment you can join the Windows Insider program and get an ISO image that you can install as a Virtual Machine
  • You can download an ISO of your favorite Linux Distribution (I favor Ubuntu LTS) and install it as a virtual machine. There are also alternative installation methods you can use if the default doesn’t work for you

The Windows virtual machines you get from Microsoft have one version of IE and one version only. I’d always stay with IE 10 on Windows 8.1 in one machine and IE 9 on Windows 7. To the default IE browser you can then add the same browsers as listed under Desktop (if supported by your Linux distribution)

Mobile devices

Most browsers available for mobile devices come bundled with phones and tables which make testing in the actual devices a little more complex. We need the following:

  • Table and/or Phone running Android to run WebView, Chrome, Firefox and, optionally, Opera Mini
  • iPhone/iPod Touch running different versions of iOS (7, 8 and 9) using Safari Mobile. Even though there are

Optional e-readers

Since proofing ebooks usually entails building epub and multiple versions of Kindle format packages they will take a second rung in our testing but you can download apps for the following ebook vendors. Note that the apps do not replace testing the books in the devices themselves because the experience in the apps can be radically different than reading the same book in the devices themselves.

If you can, get at least one iPad (retina would work best), one iPhone, one Android phone and one Android tablet. If you can’t then get the following applications:

  • iBooks is a Mac only application that comes installed in later versions of Yosemite and El Capitan or can be downloaded from the App Store
  • Kindlegen is both a previewer and a generator for Kindle files. It requires Java 6 so it may or may not work on your system
  • Kindle Previewer let’s you preview your content using simulations of multiple Kindle devices
  • Nook
  • Kobo

Actually testing your content

If we’re working with mostly static content then all you need to do is make sure that it looks close to the design brief in all browsers you test with. We are not talking about unit test or Test Driven Development (TDD)

External (paid) services

If you don’t want to bother with installing virtual machines and operating systems that take gigs out of your hard drive you have alternatives. Paid alternatives but alternatives none the less.

Browserstack provides testing support in a comprehensive list of supported browsers and platforms. It is paid but the prices are reasonable for the services it gives you.

Quirktools Screenfly provides a simpler way to test your design on multiple browsers. The price is better (free) but the support doesn’t seem to be as complete as Browserstack’s

Explorations and Experiments

Jen makes a great point on her presentation. Where are the awesome layouts that we see in print reflected on the web? We are not tied into the “rectangular boxes” wisdom of the web anymore. We have technologies like shapes, clip paths, masks and many other technologies that make square boxes almost obsolete.

Don’t get me wrong… rectangles have their place and we shouldn’t make all out content replicas of printed material but, Rather than taking the challenges and opportunities of print as a source of ideas and inspirations we became stuck in the Holy Grail layout (and we’ll leave aside, for the moment, the fact that the Holy Grail Layout only became practical with the advent of CSS Flexbox as explained by Philip Walton.)

So what happens when you stop thinking about rectangular, Holy Grail style, layouts? You can start thinking of layouts like those on magazines and start really pushing the envelope with technologies like WebGL, D3, CSS Blends, transitions and animations and all the technologies that we have available on the web stack.

We can also avoid pitfalls likes the ones in the Noise versus Noise Flickr set where the creator has attempted to identify the actual content of websites in the midst of ads and other irrelevant content.

Lea Verou‘s CSS Secrets is another good source of inspiration for CSS and how far to push the technologies. The book is based on two of her presentations: CSS3 secrets: 10 things you might not know about CSS3 and More CSS Secrets: Another 10 things you may not know about CSS and it provides crazy ways to use what we’re already familiar in CSS.

Why can’t it look like print? Why should it look like print?

One example of pushing the web: non-linear narratives

But it’s not just whether we move the words around the box or the the boxes around the screen. It’s also the way we incorporate web technologies (typography, new web APIs, new semantic HTML5 tags) into our written content to create more engaging user experiences and the way in which we interact with the content on screen across a variety of devices and form factors.

For the longest time we’ve been told that ‘the web is not print’ and we grew into holy grail layouts. A fair question would be to ask what’s next. How can we push the boundaries of the web even further without loosing sight of accessibility and universal access?

Some examples that show how much and how far we can use web technologies are:

How tos and tutorials

Getting Fancy: Blend Modes

Compositing and Blending Level 1 candidate recommendation provides a way to composite elements in HTML and SVG using CSS. Think of the way you can create non destructive clips and masks in Photoshop; the idea is the same but rather than use Photoshop we can use CSS in the browser. We’ll look at the basics of CSS Blend Modes and some examples of their applications to text.

The specification is supported in Firefox, Chrome and Opera with partial support in Safari and, as far as I can tell, without prefixes (according to caniuse.com)

Getting started

One of the first examples I found interesting is how to create masks in CSS. This pen, from Dudley Storey, illustrates the idea. The text, and only the text, will show the underlying image. The rest of the screen. See the accompanying article for more detail of the process and how to incorporate this into your own work.

[codepen_embed height=”266″ theme_id=”2039″ slug_hash=”pJPyRq” default_tab=”result” user=”caraya”]See the Pen Text Clipping Masks with CSS Blend Modes by Carlos Araya (@caraya) on CodePen Original Pen by Dudley Storey.[/codepen_embed]

When you highlight the word Chicago you can see other parts of the image that were not used as part of the mask. The image itself has not been edited. THis is similar to how you can move the image when you do layer blending in Photoshop. The underlying image will move but the text will remain the same.

Deep Dive

By necessity this post does not cover all the possibilities for blending in CSS/HTML. The specification is very technical and uses a lot of formulas and equations to explain what it does and how it does it.

Instead I’ll reference blog posts mostly from Dudley Storey who, in my opinion, has done an excellent job of explaining what blending is and how to use it, along with some effects that are accomplished with the technique.

Where the compositing spec comes from

Surprisingly, compositing comes from Photoshop the changes are made at the layer level. According to Photoshop blend modes explained, in Photoshop:

The Opacity slider in the Layers Panel allows you to blend the active layer with the layers below by making the active layer translucent, which in turn allow the layers below to show through. The blend modes found in Photoshop allow the same process to take place, but by using different mathematical calculations for each blend mode. As of Photoshop CS5, there are 27 blend modes—2 new blend modes, Subtract and Divide, where recently added. Any changes made using blend modes are parametric, i.e., the changes are non-destructive, and you can always revisit your blend mode settings and readjust them as needed without damaging the pixels in your original image.

This becomes slightly less surprising when you note that one of the original specification authors is from Adobe and that Adobe has been an active participant in the CSS Working Group.

CSS works slightly different by using rules and attributes to accomplish the same goal of non-destructive image manipulation.

Different types of blends

The Compositing and Blending specification lists the following blend modes for user agents:

  • Normal (the default blend mode meaning no blending is applied)
  • Multiply
  • Screen
  • Overlay
  • Darken
  • Lighten
  • Color-dodge

  • Color-burn
  • Hard-light
  • Soft-light
  • Difference
  • Exclusion
  • Hue
  • Saturation
  • Color
  • Luminosity.

I’ll refer you to the specicification for more specific details about each blend mode.

Basic blending

The two most basic blend modes are light and darken that lighten and darken the blended colors or image as shown in the Codepen below (originally by Dudley Storey.) And their ‘next of kin’ are screen and overlay that have a similar purpose using different mathematical formulas

To better understand what blending does, let’s look at some basic color examples. The basis for the examples below is three colors in squares: one black, one grey and one white as show in the pen below

See the Pen Base For Blending Examples by Carlos Araya (@caraya) on CodePen.

Now that we have that base setup (equivalent to using mix-blend-mode normal), we can play with different blend modes and test whether they meet the requirements for our project.

Lighten

Lighten removes blacks and lighten the image altogether. Notice in the pen below how the black square disappeared and the center square lightened in color to become closer to the background. The white color remains unchanged.

[codepen_embed height=”306″ theme_id=”2039″ slug_hash=”oXJeOp” default_tab=”result” user=”caraya”]See the Pen Lighten Blending Example by Carlos Araya (@caraya) on CodePen.[/codepen_embed]

Darken

Darken is the opposite of lighten. It removes white and darkens the overall image. The hue of the gray center square darkens compared to the background. The black square remains unaffected.

[codepen_embed height=”324″ theme_id=”2039″ slug_hash=”LVMzEQ” default_tab=”result” user=”caraya”]See the Pen Darken Blending Example by Carlos Araya (@caraya) on CodePen.[/codepen_embed]

Screen

Screen is very similar to lighten discussed above but the effect is slightly different. Imagine two projectors splashing images onto the same screen, the image can’t be “more dark” and the lighter hues will look washed out. Screening any color with white produces white; screening with black leaves the original color unchanged.

Compare the results of using screen to the colors you get when using lighten.

[codepen_embed height=”304″ theme_id=”2039″ slug_hash=”VLqMYd” default_tab=”result” user=”caraya”]See the Pen Screen Blending Example by Carlos Araya (@caraya) on CodePen.[/codepen_embed]

Multiply

The opposite of screen and similar to darken: it ignores white and makes things darker. Light moves easily through overlapped areas that are clear or bright, but darktones reinforce each other. Multiplying any color with black results in black. Multiplying any color with white preserves the original color.

Compare the results of using multiply with those from darken.

[codepen_embed height=”306″ theme_id=”2039″ slug_hash=”yNGzNO” default_tab=”result” user=”caraya”]See the Pen Multiply Blending Example by Carlos Araya (@caraya) on CodePen.[/codepen_embed]

Overlay

Overlay is a compromise between screen and multiply. It ignores midtones and increases contrast everywhere.

[codepen_embed height=”315″ theme_id=”2039″ slug_hash=”rVoGVj” default_tab=”result” user=”caraya”]See the Pen Overlay Blending Example by Carlos Araya (@caraya) on CodePen.[/codepen_embed]

Note that the order of the layers does matter when blending and that different orders will require a different belnding effect. As with many other things on the web: Test, test and then test again to make sure the blending work as intended in your target devices.

Color-dodge

Brightens the backdrop color to reflect the source color. Painting with black produces no changes.

Color-burn

Darkens the backdrop color to reflect the source color. Painting with white produces no change.

Hard-light

Multiplies or screens the colors, depending on the source color value. The effect is similar to shining a harsh spotlight on the backdrop.

Soft-light

Darkens or lightens the colors, depending on the source color value. The effect is similar to shining a diffused spotlight on the backdrop.

Difference

Subtracts the darker of the two constituent colors from the lighter color. Painting with white inverts the backdrop color; painting with black produces no change.

Exclusion

Produces an effect similar to that of the Difference mode but lower in contrast. Painting with white inverts the backdrop color; painting with black produces no change.

Hue

Creates a color with the hue of the source color and the saturation and luminosity of the backdrop color.

Saturation

Creates a color with the saturation of the source color and the hue and luminosity of the backdrop color. Painting with this mode in an area of the backdrop that is a pure gray (no saturation) produces no change.

Color

Creates a color with the hue and saturation of the source color and the luminosity of the backdrop color. This preserves the gray levels of the backdrop and is useful for coloring monochrome images or tinting color images.

Luminosity.

Creates a color with the luminosity of the source color and the hue and saturation of the backdrop color. This produces an inverse effect to that of the Color mode. This mode is the one you can use to create monchrome “tinted” image effects like the ones you can see in different website headers.

Blending the background

Working with images

So far we’ve only worked with discrete colors but the effect works with images too. Look at this pen to see how we can mergfe two images:

[codepen_embed height=”292″ theme_id=”2039″ slug_hash=”mJaBbz” default_tab=”result” user=”caraya”]See the Pen Books and circuit boards by Carlos Araya (@caraya) on CodePen.[/codepen_embed]

One final note

The cool thing about working with CSS is that you can combine different specs to create really stunning work. In this particular case I’m thinking about filters. They are partially supported in Chrome/Opera, Firefox and Safari (prior to the Blink split).

A combination of blend and filters may look like this, where the image in the foreground was made sepia and then blended with the circuit boards.

[codepen_embed height=”299″ theme_id=”2039″ slug_hash=”waRrKV” default_tab=”result” user=”caraya”]See the Pen Books and circuit boards with filters by Carlos Araya (@caraya) on CodePen.[/codepen_embed]

Fully realized example

See a more elaborate example below. This was forked from a pen from Dudley Storey

[codepen_embed height=”718″ theme_id=”2039″ slug_hash=”rVoWqJ” default_tab=”result” user=”caraya”]See the Pen CSS Blend Visualisation: Lighten & Darken Modes by Carlos Araya (@caraya) on CodePen Original code by Dudley Storey.[/codepen_embed]

Tutorials and Links

Specification

Background

Examples

Getting fancy: Shapes and masks

CSS Shapes allow designers and content creators to match some magazines layouts where the text wraps around images and other polygonal and irregular shapes.

Why do I include shapes in an essay about typography? As you can see in the examples below, shapes change the way the text relates to the surrounding images. Imagine what we can do with irregular shapes or letters (thinking of Dropcap applications).It can also be used to create shapes with text inside the shape (this is not part of the level 1 specification and deferred to level 2 which is currently a working draft.)

Example of CSS shape outside
Example of CSS shape outside

[codepen_embed height=”462″ theme_id=”2039″ slug_hash=”MwvvLE” default_tab=”result” user=”caraya”]See the Pen Shape Outside Example by Carlos Araya (@caraya) on CodePen.[/codepen_embed]

In the future we’ll be able to use shape inside and exclusions to create magazine equivalent layouts and where creativity will be the driving force, not browser constraints.

Unfortunately there doesn’t seem to be much traction with exclusions or full shapes support within the CSS working group (which means that browsers are far from giving us working implementations) so we have to resort to polyfills for shapes to account for incomplete spec support and older browsers that don’t support the feature altogether. I am not a fan of polyfills but, even with all the limitations inherent to polyfills, seems like a good compromise for this particular situation.

CSS exclusion example
Example Layout using Exclusions (taken from A List Apart’s article CSS Shapes 101 by Sara Soueidan.)

According to the CSS Masking specification abstract:

CSS Masking provides two means for partially or fully hidding portions of visual elements: masking and clipping.

Masking describes how to use another graphical element or image as a luminance or alpha mask. Typically, rendering an element via CSS or SVG can conceptually described as if the element, including its children, are drawn into a buffer and then that buffer is composited into the element’s parent. Luminance and alpha masks influence the transparency of this buffer before the compositing stage.

Clipping describes the visible region of visual elements. The region can be described by using certain SVG graphics elements or basic shapes. Anything outside of this region is not rendered.

It has long been a trivial exercise to create masks and clip path images in Photoshop or Illustrator (and Photoshop CC makes it a really simple exercise as shown in the Lynda.com course Design the Web: Clipping Masks.) But until clip paths and masks became available in CSS you had to use an external tool to create these effects.

In Getting Fancy: Blend Modes We’ll explore possibilities to do non-destructive masking using the CSS Blending draft specification directly in our web content.

Examples and References

Getting Fancy: Animating text

Depending on the context and the type of text you’re using animations can be useful. CSS Animation Level 1 provides a way to animate CSS properties over time. It uses key frames to create the animations.

We will work through an example similar to the Mozilla Developer Network basic animation example. The same or similar process can be used for other types of animations.

The first thing we do is work setting up the animations in the elements we want, in this case, h1. Also note that we have to set up each attribute twice and maybe 3 times: One with the Mozilla/Firefox prefix (-moz), one for Chrome, Opera and Safari (-webkit) and one without a prefix to prepare for when vendor prefixes are no longer needed.

The attributes we set up are:

  • Duration: How long will the animation last
  • Name: The name of the animation we will use. We’ll define the animation below
h1 {
  -moz-animation-duration: 3s;
  -webkit-animation-duration: 3s;
  animation-duration: 3s;
  -moz-animation-name: slidein;
  -webkit-animation-name: slidein;
  animation-name: slidein;
}
    

Once we set up the animation parameters we need to define the animation. We also have to do this three times, One for Firefox, one for Webkit-based browsers and one without a prefix to future proof our code. Each keyframes selector defines a beginning and ending state for the chosen object. In this case we move h1 heading from left to right and decrease its width at the same time. All these tasks will be done in 3 seconds (as specified by the *-animation-duration attribute of the h1 tag.)

@-moz-keyframes slidein {
  0% { margin-left:100%; width:300%; }
  100% { margin-left:0%; width:100%; }
}

@-webkit-keyframes slidein {
  0% { margin-left:100%; width:300%; }
  100% { margin-left:0%; width:100%; }
}

@keyframes slidein {
  0% { margin-left:100%; width:300%; }
  100% { margin-left:0%; width:100%; }
}

There is another syntax available online that uses keywords (from, to). They are equivalent but I recommend using percentages since they make more sense when inserting additional steps for an animation.

This is just the beginning. We can add additional frames to the key frames selector to make the animation smoother or to add additional steps and animation types to the process. We’re also able to animate color transitions, like transforming the background color of an element through a series of steps.

There is also a Web Animations API editor’s draft that allows developers to use JavaScript to create and control animations. I mention it here but wil not cover it as it’s a Javascript API I’m still in the process of learning.

Just like with transformation: Just because you can it doesn’t mean you should. As great as animations are they take time and may detract from your audience’s attention. Animations can also cause performance issues that you need to consider.

Links and resources