The future of style

The Future of Style aggregates posts from various blogs that talk about the development of Cascading Style Sheets (CSS) [not development with Cascading Style Sheets]. While it is hosted by the W3C CSS Working Group, the content of the individual entries represent only the opinion of their respective authors and does not reflect the position of the CSS Working Group or the W3C.

Latest articles

Responsive Design for Motion

Source: Surfin' SafariJames Craig • 25 May 2017

WebKit now supports the prefers-reduced-motion media feature, part of CSS Media Queries Level 5, User Preferences. The feature can be used in a CSS @media block or through the window.matchMedia() interface in JavaScript. Web designers and developers can use this feature to serve alternate animations that avoid motion sickness triggers experienced by some site visitors.

To explain who this media feature is for, and how it’s intended to work, we’ll cover some background. Skip directly to the code samples or prefers-reduced-motion demo if you wish.

Motion as a Usability Tool

CSS transforms and animations were proposed by WebKit engineers nearly a decade ago as an abstraction of Core Animation concepts wrapped in a familiar CSS syntax. The standardization of CSS Transforms/CSS Animations and adoption by other browsers helped pave the way for web developers of all skill levels. Richly creative animations were finally within reach, without incurring the security risk and battery cost associated with plug-ins.

The perceptual utility of appropriate, functional motion can increase the understandability and —yes— accessibility of a user interface. There are numerous articles on the benefits of animation to increase user engagement:

In 2013, Apple released iOS 7, which included heavy use of animated parallax, dimensionality, motion offsets, and zoom effects. Animation was used as tool to minimize visual user interface elements while reinforcing a user’s understanding of their immediate and responsive interactions with the device. New capabilities in web and native platforms like iOS acted as a catalyst, leading the larger design community to a greater awareness of the benefits of user interface animation.

Since 2013, use of animation in web and native apps has increased by an order of magnitude.

Motion is Wonderful, Except When it’s Not

Included in the iOS accessibility settings is a switch titled “Reduce Motion.” It was added in iOS 7 to allow users the ability to disable parallax and app launching animations. In 2014, iOS included public API for native app developers to detect Reduce Motion (iOS, tvOS) and be notified when the iOS setting changed. In 2016, macOS added a similar user feature and API so developers could both detect Reduce Motion (macOS) and be notified when the macOS pref changed. The prefers-reduced-motion media feature was first proposed to the CSS Working Group in 2014, alongside the release of the iOS API.

Wait a minute! If we’ve established that animation can be a useful tool for increasing usability and attention, why should it ever be disabled or reduced?

The simplest answer is, “We’re not all the same.” Preference is subjective, and many power users like to reduce UI overhead even further once they’ve learned how the interface works.

The more important, objective answer is, “It’s a medical necessity for some.” In particular, this change is required for a portion of the population with conditions commonly referred to as vestibular disorders.

Vestibular Spectrum Disorder

Vestibular disorders are caused by problems affecting the inner ear and parts of the brain that control balance and spatial orientation. Symptoms can include loss of balance, nausea, and other physical discomfort. Vestibular disorders are more common than you might guess: affecting as many as 69 million people in the United States alone.

Most people experience motion sickness at some point in their lives, usually while traveling in a vehicle. Consider the last time you were car-sick, sea-sick, or air-sick. Nausea can be a symptom of situations where balance input from your inner ear seems to conflict with the visual orientation from your eyes. If your senses are sending conflicting signals to your brain, it doesn’t know which one to trust. Conflicting sensory input can also be caused by neurotoxins in spoiled food, hallucinogens, or other ingested poisons, so a common hypothesis is that these conflicting sensory inputs due to motion or vestibular responses lead your brain to infer its being poisoned, and seek to expel the poison through vomiting.

Whatever the underlying cause, people with vestibular disorders have an acute sensitivity to certain motion triggers. In extreme cases, the symptoms can be debilitating.

Vestibular Triggers

The following sections include examples of common vestibular motion triggers, and variants. If your site or web application includes similar animations, consider disabling or using variants when the prefers-reduced-motion media feature matches.

Trigger: Scaling and Zooming

Visual scaling or zooming animations give the illusion that the viewer is moving forward or backward in physical space. Some animated blurring effects give a similar illusion.

Note: It’s okay to keep many real-time, user-controlled direct manipulation effects such as pinch-to-zoom. As long as the interaction is predictable and understandable, a user can choose to manipulate the interface in a style or speed that works for their needs.

Example 1: Mouse-Triggered Scaling

How to Shoot on iPhone incorporates a number of video and motion effects, including a slowly scaling poster when the user’s mouse hovers over the video playback buttons.

The Apple.com team implemented prefers-reduced-motion to disable the scaling effect and background video motion.

Example 2: 3D Zoom + Blur

The macOS web site simulates flying away from Lone Pine Peak in the Sierra Nevada mountain range. A three-dimensional dolly zoom and animated blur give the viewer a sense that physical position and focal depth-of-field is changing.

In mobile devices, or in browsers that can’t support the more complicated animation, the effect is reduced to a simpler scroll view. By incorporating similar visual treatment, the simpler variant retains the original design intention while removing the effect. The same variant could be used with prefers-reduced-motion to avoid vestibular triggers.

Update May 25, 2017: The macOS web site has been modified to support reduced motion when preferred.

Trigger: Spinning and Vortex Effects

Effects that use spiraling or spinning movements can cause some people with vestibular disorders to lose their balance or vertical orientation.

Example 3: Spinning Parallax Starfield

Viljami Salminen Design features a spinning, background star field by default.

It has incorporated prefers-reduced-motion to stop the spinning effect for users with vestibular needs. (Note: The following video is entirely motionless.)

Trigger: Multi-Speed or Multi-Directional Movement

Parallax effects are widely known, but other variants of multi-speed or multi-directional movement can also trigger vestibular responses.

Example 4: iOS 10 Site Scrolling

The iOS 10 site features images moving vertically at varying speeds.

A similar variant without the scroll-triggered image offsets could be used with prefers-reduced-motion to avoid vestibular triggers.

Update May 25, 2017: The iOS 10 site has been modified to support reduced motion when preferred.

Trigger: Dimensionality or Plane Shifting

These animations give the illusion of moving two-dimensional (2D) planes in three-dimensional (3D) space. The technique is sometimes referred to as two-and-a-half-dimensional (2.5D).

Example 5: Plane-Shifted Scrolling

Apple’s Environment site features a animated solar array that tilts as the page scrolls.

The site supports a reduced motion variant where the 2.5D effect remains a still image.

Trigger: Peripheral Motion

Horizontal movement in the peripheral field of vision can cause disorientation or queasiness. Think back to the last time you read a book while in a moving vehicle. The center of your vision was focused on the text, but there was constant movement in the periphery. This type of motion is fine for some, and too much to stomach for others.

Example 6: Subtle, Constant Animation Near a Block of Text

After scrolling to the second section on Apple’s Environment site, a group of 10-12 leaves slowly floats near a paragraph about renewable energy.

In the reduced motion variant, these leaves are stationary to prevent peripheral movement while the viewer focuses on the nearby text content.

Take note that only the animations known to be problematic have be modified or removed from the site. More on that later.

Using Reduce Motion on the Web

Now that we’ve covered the types of animation that can trigger adverse vestibular symptoms, let’s cover how to implement the new media feature into your projects.

CSS @Media Block

An @media block is the easiest way to incorporate motion reductions into your site. Use it to disable or change animation and transition values, or serve a different background-image.

@media (prefers-reduced-motion) {
  /* adjust motion of 'transition' or 'animation' properties */
}

Review the prefers-reduced-motion demo source for example uses.

MediaQueryList Interface

Animations and DOM changes are sometimes controlled with JavaScript, so you can leverage the prefers-reduced-motion media feature with window.matchMedia and register for an event listener whenever the user setting changes.

var motionQuery = matchMedia('(prefers-reduced-motion)');
function handleReduceMotionChanged() {
  if (motionQuery.matches) {
    /* adjust motion of 'transition' or 'animation' properties */
  } else { 
    /* standard motion */
  }
}
motionQuery.addListener(handleReduceMotionChanged);
handleReduceMotionChanged(); // trigger once on load if needed

Review the prefers-reduced-motion demo source for example uses.

Using the Accessibility Inspector

When refining your animations, you could toggle the iOS Setting or macOS Preference before returning to your app to view the result, but this indirect feedback loop is slow and tedious. Fortunately, there’s a better way.

The Xcode Accessibility Inspector makes it easier to debug your animations by quickly changing any visual accessibility setting on the host Mac or a tethered device such as an iPhone.

  1. Attach your iOS device via USB.
  2. Select the iOS device in Accessibility Inspector.
  3. Select the Settings Tab.

Alternate closed-captioned version of the Accessibility Inspector demo below.

Don’t Reduce Too Much

In some cases, usability can suffer when reducing motion. If your site uses a vestibular trigger animation to convey some essential meaning to the user, removing the animation entirely may make the interface confusing or unusable.

Even if your site uses motion in a purely decorative sense, only remove the animations you know to be vestibular triggers. Unless a specific animation is likely to cause a problem, removing it prematurely only succeeds in making your site unnecessarily boring.

Consider each animation in its context. If you determine a specific animation is likely to be a vestibular trigger, consider serving an alternate, simpler animation, or display another visual indicator to convey the intended meaning.

Takeaways

  1. Motion can be a great tool for increasing usability and engagement, but certain visual effects trigger physical discomfort in some viewers.
  2. Avoid vestibular trigger animations where possible, and use alternate animations when a user enables the “Reduce Motion” setting. Try out these settings, and use the new media feature when necessary. Review the prefers-reduced-motion demo source for example uses.
  3. Remember that the Web belongs to the user, not the author. Always adapt your site to fit their needs.

More Information

The 2017 edition of the CSS Day will take place on the 16th …

Source: W3C's Cascading Style Sheets home page21 May 2017

16 Jun 2017 The 2017 edition of the CSS Day will take place on the 16th of June (in Amsterdam). Speakers include Tab Atkins, Jen Simmons, Rachel Andrew, Håkon Wium Lie and Bert Bos.

Last Call for Comments on Media Queries Level 4

Source: CSS WG Blog Florian Rivoal • 19 May 2017

The CSS WG has published its hopefully last Working Draft of Media Queries Level 4.

Media Queries allow authors to test and query values or features of the user agent or display device, independent of the document being rendered. They are used in the CSS @media rule to conditionally apply styles to a document, and in various other contexts and languages, such as HTML and Javascript.

Level 4 extends and supersedes the features defined in Media Queries Level 3. It brings significant improvements on the syntax, and a shift from using media types to finer-grained media features.

This is the last call for comments, as we plan to request a transition to CR at the end of June unless issues are brought up or anyone specifically requests more time for review.

Significant changes since Media Queries 3 are listed in the Changes section.

Please send feedback by either filing an issue in GitHub (preferable) or sending mail to the (archived) public mailing list www-style@w3.org with the spec code ([mediaqueries-4]) and your comment topic in the subject line. (Alternatively, you can email one of the editors and ask them to forward your comment.)

Updated Working Draft: Media Queries Level 4.

Source: W3C's Cascading Style Sheets home page19 May 2017

19 May 2017 Updated Working Draft: Media Queries Level 4.

New Web Features in Safari 10.1

Source: Surfin' SafariJon Davis • 18 May 2017

A new version of Safari shipped with the release of iOS 10.3 and macOS Sierra 10.12.4. Safari on iOS 10.3 and Safari 10.1 on macOS adds many important web features and improvements from WebKit that we are incredibly excited about.

While this release makes the web platform more capable and powerful, it also makes web development easier, simplifying the ongoing maintenance of your code. We’re excited to see how web developers will translate these improvements into better experiences for users.

Read on for quick look at the features included in this release.

Fetch

Fetch is a modern replacement for XMLHttpRequest. It provides a simpler approach to request resources asynchronously over the network. It also makes use of Promises from ECMAScript 2015 (ES6) for convenient, chain-able response handling. Compared to XMLHttpRequest, the Fetch API allows for cleaner, more readable code that is easier to maintain.

let jsonURLEndpoint = "https://svn.webkit.org/repository/webkit/trunk/Source/WebCore/features.json";
fetch(jsonURLEndpoint, {
    method: "get"
}).then(function(response) {
    response.json().then(function(json) {
        console.log(json);
    });
}).catch(function(error) {
    console.error(error);
});

Find out more in the blog post, A Few Words On Fetching Bytes.

CSS Grid Layout

CSS Grid Layout gives web authors a powerful new layout system based on a grid of columns and rows in a container. It is a significant step forward in providing manageable page layout tools in CSS that enable complex graphic designs that respond to viewport changes. Authors can use CSS Grid Layout to more easily achieve designs normally seen in print, that before required the use of layout quirks in existing CSS tools like floats and Flexbox.

Read more in the blog post, CSS Grid Layout: A New Layout Module for the Web.

ECMAScript 2016 & ECMAScript 2017

WebKit added support in Safari 10.1 for both ECMAScript 2016 and ECMAScript 2017, the latest standards revisions for the JavaScript language. ECMAScript 2016 adds small incremental improvements, but the 2017 standard brings several substantial improvements to JavaScript.

ECMAScript 2016 includes the exponentiation operator (x ** y instead of Math.pow(x, y)) and Array.prototype.includes. Array.prototype.includes is similar to Array.prototype.indexOf, except it can find values including NaN.

ECMAScript 2017 brings async and await syntax, shared memory objects including Atomics and Shared Array Buffers, String.prototype.padStart, String.prototype.padEnd, Object.prototype.values, Object.prototype.entries, and allows trailing commas in function parameter lists and calls.

IndexedDB 2.0

WebKit’s IndexedDB implementation has significant improvements in this release. It’s now faster, standards compliant, and supports new IndexedDB 2.0 features. IndexedDB 2.0 adds support for binary data types as index keys, so you’ll no longer need to serialize them into strings or array objects. It also brings object store and index renaming, getKey() on IDBObjectStore, and getPrimaryKey() on IDBIndex.

Find out more in the Indexed Database API 2.0 specification.

Custom Elements

Custom Elements enables web authors to create reusable components defined by their own HTML elements without the dependency of a JavaScript framework. Like built-in elements, Custom Elements can communicate and receive new values in their attributes, and respond to changes in attribute values using reaction callbacks.

For more information, read the Introducing Custom Elements blog post.

Gamepad

The Gamepad API makes it possible to use game controllers in your web apps. Any gamepad that works on macOS without additional drivers will work on a Mac. All MFi gamepads are supported on iOS.

Read more about the API in the Gamepad specifications.

Pointer Lock

In Safari on macOS, requesting Pointer Lock on an element gives developers the ability to hide the mouse pointer and access the raw mouse movement data. This is particularly helpful for authors creating games on the web. It extends the MouseEvents interface with movementX and movementY properties to provide a stream of information even when the movements are beyond the boundaries of the visible range. In Safari, when the pointer is locked on an element, a banner is displayed notifying the user that the mouse cursor is hidden. Pressing the Escape key once dismisses the banner, and pressing the Escape key again will release the pointer lock on the element.

You can get more information from the Pointer Lock specifications.

Keyboard Input in Fullscreen

WebKit used to restrict keyboard input in HTML5 fullscreen mode. With Safari 10.1 on macOS, when using HTML5 fullscreen mode, WebKit removes the keyboard input restrictions.

Interactive Form Validation

With support for HTML Interactive Form Validation, authors can create forms with data validation contraints that are checked automatically by the browser when the form is submitted, all without the need for JavaScript. It greatly simplifies the complexity of ensuring good data entry from users on the client-side and minimizes the need for complex JavaScript.

Read more about HTML Interactive Form Validation in WebKit.

Input Events

Input Events simplifies implementing rich text editing experiences on the web in contenteditable regions. The Input Events API adds a new beforeinput event to monitor and intercept default editing behaviors and enhances the input event with new attributes.

You can read more about Enhanced Editing with Input Events.

HTML5 Download Attribute

The download attribute for anchor elements is now available in Safari 10.1 on macOS. It indicates the link target is a download link that should download a file instead of navigating to the linked resource. It also enables developers to create a link that downloads blob data as files entirely from JavaScript. Clicking a link with a download attribute causes the target resource to be downloaded as a file. The optional value of the download attribute can be used to provide a suggested name for the file.

<a href="https://webkit.org/favicon.ico" download="webkit-favicon.ico">Download Favicon</a>

Find out more from the Downloading resources section in the HTML specification.

HTML Media Capture

In Safari on iOS, HTML Media Capture extends file input controls in forms to allow users to use the camera or microphone on the device to capture data.

File inputs can be used to capture an image, video, or audio:

<input name="imageCapture" type="file" accept="image/*" capture>
<input name="videoCapture" type="file" accept="video/*" capture>
<input name="audioCapture" type="file" accept="audio/*" capture>

More details are available in the HTML Media Capture specification.

Improved Fixed and Sticky Element Positioning

When using pinch-to-zoom, fixed and sticky element positioning has improved behavior using a “visual viewports” approach. Using the visual viewports model, focusing an input field that triggers the on-screen keyboard no longer disables fixed and sticky positioning in Safari on iOS.

Improved Web Inspector Debugging

The WebKit team added support for debugging Web Worker JavaScript threads in Web Inspector’s Debugger tab. There are also improvements to debugger stepping with highlights for the currently-executing and about-to-execute statements. The highlights make it much clearer what code is going to execute during debugging, especially for JavaScript with complex control flow or many expressions on a single line.

Learn more about JavaScript Debugging Improvements in Web Inspector.

CSS Wide-Gamut Colors

Modern devices support a broader range of colors. Now, web authors can use CSS colors in wide-gamut color spaces, including the Display P3 color space. A new color-gamut media query can be used to test if the display is capable of displaying a given color space. Then, using the new CSS color() function, developers can define a color in a specific color space.

@media (color-gamut:p3) {
    .brightred {
        color: color(display-p3 1.0 0 0);
    }
}

For more information, see the CSS Color Module Level 4 standards specification.

Reduced Motion Media Query

The new prefers-reduced-motion media query allows developers using animation to make accommodations for users with conditions where large areas of motion or drastic movements can trigger physical discomfort. With prefers-reduced-motion, authors can create styles that avoid motion for users that set the reduced motion preference in system settings.

@keyframes decorativeMotion {
    /* Keyframes for a decorative animation */
}

.background {
    animation: decorativeMotion 10s infinite alternate;
}

@media (prefers-reduced-motion) {
    .background {
        animation: none;
    }
}

Read more about Responsive Design for Motion.

Feedback

We’re looking forward to what developers will do with these features to make better experiences for users. These improvements are available to users running iOS 10.3 and macOS Sierra 10.12.4, as well as Safari 10.1 for OS X Yosemite and OS X El Capitan.

Most of these features were also previewed in Safari Technology Preview over the last few months. The changes included in this release of Safari span Safari Technology Preview releases 14, 15, 16, 17, 18, 19, and 20. You can download the latest Safari Technology Preview release to stay on the forefront of future web features.

Finally, we’d love to hear from you! Send a tweet to @webkit or @jonathandavis and let us know which of these features will have the most impact on your design or development work on the web.

Minutes Telecon 2017-05-17

Source: CSS WG Blog Dael Jackson • 18 May 2017

Full Minutes

New Working Draft: CSS Logical Properties and Values Level 1…

Source: W3C's Cascading Style Sheets home page18 May 2017

18 May 2017 New Working Draft: CSS Logical Properties and Values Level 1.

Release Notes for Safari Technology Preview 30

Source: Surfin' Safari Jon Davis • 17 May 2017

Safari Technology Preview Release 30 is now available for download for macOS Sierra. If you already have Safari Technology Preview installed, you can update from the Mac App Store’s Updates tab. This release covers WebKit revisions 215859-216643.

Web API

JavaScript

CSS

Accessibility

Web Inspector

WebDriver

Media

Rendering

Video Ristretto: CSS: Code Smell Sanitation – Fiona Chan

Source: Web Directions Blog John • 17 May 2017

Fiona ChanAs we look forward to Web Directions Code 17 in Melbourne this August, our Video Ristretto this week harks back to last year’s conference, where Fiona Chan delivered her presentation CSS: Code Smell Sanitation.

Fiona has long been a stalwart supporter of Web Directions – she’s one of our regular and indispensable production volunteers – and has also been a strong supporter of the community, as her involvement with SydCSS and CSSConf testifies.

Less than 20 minutes long, her talk at Code 16 not only drew much admiration on the day, but has also been one of the most watched Web Directions videos ever since.

My guess is that we all have concerns about how to clean up our own and others’ code, but we’re not always sure how to go about it – which is exactly what Fiona covers so well.
 

 

Want more?

Like to see and read more like this? Be the first to score invitations to our events? Then jump on our once-a-week mailing list to keep up with everything happening at Web Directions. And you’ll get a complimentary digital copy of Scroll magazine.


The post Video Ristretto: CSS: Code Smell Sanitation – Fiona Chan appeared first on Web Directions.

Registrations Open for Code 17, First Speakers Announced

Source: Web Directions Blog John • 16 May 2017

We have just opened registrations for Web Directions Code 17!

For those new to it, and to remind those who know it well, Code has evolved to be the premier conference in Australia focusing on JavaScript, front end HTML/CSS, devops, engineering, web-facing programming, security, performance … in short, code.

The last time we held Code solely in Melbourne in 2015 at the same venue, we sold out quite some way in advance. We’ve kept the prices at 2015’s, so make sure you don’t miss out, register your ticket today.

Whether you call yourself a coder, a programmer, a developer or an engineer – if your job is to deliver robust, fast, secure, engaging web experiences, Web Directions Code in Melbourne from 3-4 August is for you.

Here’s why.

Code

The Speakers

We have an extraordinary line-up of speakers planned for Code: people who can lift your professional expertise to new levels, familiarising you now with techniques and tools that will become commonplace in the near future.

Right now, we can confirm two of our leading speakers, and they are, indeed, world leaders in their fields.

Brian Terlson & Val Head

Brian Terlson is the editor of the JavaScript specification, and a long standing member of TC39, the committee standardising JavaScript. He’s also a key developer of the JavaScript engine in the Edge browser. Who better to help us see where JavaScript is today, and where the next few years will take us?

Val Head is one of the foremost experts in animation and the web anywhere. She’s written extensively on the subject, advised companies like Shopify and Automattic (creators of WordPress) and spoken all over the world. Val will survey the full spectrum of animation options from CSS to React Motion and show which are best suited for implementing state transitions, showing data, animating illustrations, or making animations responsive.

The Presentations

These are just two of about 20 amazing speakers from around the world covering everything from core JavaScript features to complex modern CSS and best practice performance. Everything you need to stay up to date in our fast changing field.

What is this Code of which you speak?

Skip it – just let me register!

We Want You to Present

Our Call For Proposals to present at Code is now open. Yes, we curate the conference, but we like to leave room for outstanding, relevant talks from local speakers, experienced or not.

Sessions are 20 minutes long, and open to Australian residents. If you’re successful, we’ll fly you to Melbourne, put you up, and treat you like any other speaker.

The Code CFP is open until 31 May.

OK, I’m interested in presenting

Code Leaders

We’re also really excited to take the wraps off a brand new event, Code Leaders, a special day-long conference preceding Code.

Code Leaders highlights the challenges being faced by a new generation of code-focused team leaders, project managers, CTOs and senior engineering professionals.

Code Leaders

The full-day conference draws on the skills and experience of some of our Code headliners as well as local expertise to explore issues of management and leadership in a code setting.

You’ll focus on technology, practice, leadership and cultural challenges in a collegial atmosphere with others facing challenges similar to your own.

Take me to your Leaders

Key Dates

31 May 
Code 17 Call for Presentations ends.

30 June 
End of Financial Year; Code and Code Leaders Early Bird ends.

2 August 
Code Leaders Conference.

3-4 August
Code Conference.

Pricing

We always keep our prices as low as we can, and we have complete confidence in the quality and relevance of our speakers and their presentations, but we also know that a little incentive can sometimes make it easier to find room in a limited budget, especially if you have to convince someone else.

So, how about $200 off?  Register during the Early Bird period up to 30 June and get a massive $200 off the regular registration cost.

Hot Tip: if you need to apply your registration to the new financial year but you still want to get the Early Bird discount and the alumnus bonus, register before 30 June but pay after 1 July

Tell me more about Code 17

Embedded as a deeply Melbourne conference (and watch out soon for details of related Melbourne events), I feel this year’s Web Directions Code offers an unmissable program, one of the real highlights of the Australian developer calendar.

I look forward to telling you more in coming weeks, and I really hope to see you there.

john
john allsopp

The post Registrations Open for Code 17, First Speakers Announced appeared first on Web Directions.

The web-platform-tests Project

Source: W3C Blog Philippe le Hegaret • 16 May 2017

Back in 2013, Tobie Langel wrote about testing the Open Web Platform. The vision was simple: W3C was launching an unprecedented effort to scale up its test offering and the journey was 1% finished. Many things have been happening since then and this week is a great opportunity to look at the project again.

In 2014, the project moved to become a consensus-driven open-source project, using the web-platform-tests (aka WPT) as its central repository on GitHub. James Graham spent significant time on bringing the infrastructure together (see his GTAC 2014: Automation for a Better Web talk), as well as improving the level of reliability for the tests, with the help of Ms2ger. The wptrunner was introduced, originally designed to allow fully automated running of the tests in various Mozilla products.

In 2015, multiple improvements were added. Reftests were made more flexible to align with the CSS testing. A lint tool was introduced to facilitate the work of reviewers; The server got new features, such as storing cross-request state.

In 2016, to help improve the stability of the tests, a stability checker was brought in. It automatically runs new test 10 times on Firefox and Chrome to avoid problems when imported into the browser CI infrastructures. The Pointer Events Working Group adopted a test-driven approach, where changes to the specification are generally expected to have a corresponding pull request in WPT.

In 2017, the convergence of all browser engines around WPT increased. The Chromium project adopted WPT as their primary shared test suite. WebKit is actively looking at doing the same. The WHATWG started to use a WPT test-driven approach. The WebDriver specification reached Candidate Recommendation status. Geoffrey Sneddon migrated the CSS tests to WPT. Earlier this month, the Web Performance Working Group adopted the WPT test-driven approach as well.

This week, Bob Holt extended the stability checks to include Edge and Safari (see also Diving Into the Web Platform Tests). This brings the project closer to producing and storing test results.

As Tobie wrote 4 years ago, there’s plenty more we’d like to tackle in the future and the community is welcome to help. I’m looking forward to leverage the progress of the testing project for the various W3C specifications in development (over 200 nowadays!).

Updated Working Draft: CSS Box Alignment Level 3.

Source: W3C's Cascading Style Sheets home page15 May 2017

15 May 2017 Updated Working Draft: CSS Box Alignment Level 3.

Release Notes for Safari Technology Preview 28

Source: Surfin' Safari Jon Davis • 12 May 2017

Safari Technology Preview Release 28 is now available for download for macOS Sierra. If you already have Safari Technology Preview installed, you can update from the Mac App Store’s Updates tab. This release covers WebKit revisions 214535-215271.

Power and Performance

CSS

JavaScript

Web API

Web Inspector

WebDriver

Accessibility

Media

Rendering

WebCrypto

Security

AppleScript

Release Notes for Safari Technology Preview 29

Source: Surfin' Safari Jon Davis • 12 May 2017

Safari Technology Preview Release 29 is now available for download for macOS Sierra. If you already have Safari Technology Preview installed, you can update from the Mac App Store’s Updates tab. This release covers WebKit revisions 215271-215859.

JavaScript

CSS

Rendering

Web Inspector

WebCrypto

Accessibility

Media

Bug Fixes

What’s new in Chromium 58 and Opera 45

Source: Dev.OperaKarl Anders Øygard • 10 May 2017

Opera 45 (based on Chromium 58) for Mac, Windows, Linux is out! To find out what’s new for users, see our Desktop blog. Here’s what it means for web developers.

IndexedDB 2.0

IndexedDB 2.0 is now supported in Opera, making it simpler to work with large data sets in the browser. IDB 2.0 features new schema management, bulk action methods, and more standardized handling of failures.

The structure of a site’s database has large performance impacts and can be difficult to change. To simplify updates, object stores and indexes can now be renamed in-place after a refactoring. Sites can also use more natural keys without worrying about a performance penalty thanks to binary keys, which allow compact representations for custom keys.

For more information about what IndexedDB 2.0 brings, check out Bevis Tseng’s summary.

An improvement to iframe navigation

Third-party content, such as advertising, that automatically redirects the page can annoy users and create security issues. Because of this, developers are able to put third-party content inside sandboxed iframes to prevent this behavior. However, in some cases this type of content needs to navigate the top-level page when clicked, like a standard advertisement.

To address this, Opera 45 now supports the new iframe sandbox keyword allow-top-navigation-by-user-activation. This keyword gives sandboxed iframes the ability to navigate the top-level page when triggered by user interaction, while still blocking auto-redirects.

Selection API changes

Other features in this release

Deprecated and removed features

What’s next?

If you’re interested in experimenting with features that are in the pipeline for future versions of Opera, we recommend following our Opera Developer stream.

Updated Candidate Recommendation: CSS Grid Layout Level 1.

Source: W3C's Cascading Style Sheets home page09 May 2017

9 May 2017 Updated Candidate Recommendation: CSS Grid Layout Level 1.

Minutes Telecon 2017-05-03

Source: CSS WG Blog Dael Jackson • 03 May 2017

Full Minutes

Respond 16: vw + vh === vnice – Craig Sharkie

Source: Web Directions Blog John • 01 May 2017

A pretty strong theme emerged at our Respond 16 conference of reassessing what parts of CSS might be usable now that they have browser support (or don’t) and then how they might best be used (or not).

Craig Sharkie gave a short, sharp presentation on the state of play with regard to viewport units. In fact, a couple of other speakers referred to viewport units at Respond 16 and at subsequent events as well, but Craig gave us a detailed rundown.

Here’s our Wrap magazine summary.

vw + vh === vnice

Craig Sharkie, author & raconteur

Craig Sharkie

Key points

As legacy browsers are replaced by more modern versions, viewport units provide a way to manage the proportional scaling of web typography.

Viewport units are length units representing viewport width (vw), height (vh), the smaller of the two (vmin), or the larger of the two (vmax).

We know these units are “new” because we have had articles telling us about them just this year. And last year. And the year before … in fact, back to 2012. We have just under-utilised them.

vw equals 1/100th of the width of the viewport.

vh equals 1/100th of the height of the viewport.

vmin equals whichever of 1vw or 1vh is smaller.

vmax equals whichever of 1vw or 1vh is larger.

Browser support for viewport units is generally good but not all units are supported in all browsers. If you just
use vw and vh, support is 100%.

Takeaways

A digression: contextomy is the word for taking something out of context, and thereby changing its meaning. An example is saying “Great minds think alike” (when two people think of the same clever thing) but leaving off “And fools rarely differ” (which implies maybe it’s not because the two people were particularly clever). We do the same with browsers. We say “it doesn’t have full browser support” but we neglect to add that that doesn’t stop us from using techniques where there is support. Maybe this is why we fail to make use of the many measurement units we
have at our disposal.

Relative units can be used to smoothly increase font size, eg font-size: calc(1em + .25vw). This gives a smoothly scaling display ideal for responsive web design.

Viewport units can be used in the same way as em, rem and px to manage various page elements. Font resizing presents the strongest case for using viewport units, but experiment with cases such as having a child element react to viewport resizing while a parent element remains unaffected.

Viewport units can be used to ensure websites fit in the browser, eg making a square design element look right in a rectangular viewport.

Viewport units can be used create a thumbnail of a site by embedding the page as an iframe.

Caveats

In theory, viewport units will eventually render nothing when the screen reaches zero width or height. In reality things just get too big or small to be useful.

Of the browsers in current common use, the IE group has the least support for viewport units. IE8 has no support at all, while IE9 supports “vm” rather than “vmin”. IE10, IE11 and Edge do not support “vmax”.

Opera Mini does not support viewport units at all, and neither does Android 4.3, but viewport resizing on mobile devices is not very common, anyway.

vnice is not actually a real viewport unit – chalk that one up to poetic licence.

Resources

@twalve
slides

The post Respond 16: vw + vh === vnice – Craig Sharkie appeared first on Web Directions.

Video Ristretto: Components Without Screen-based Media Queries – Chris Wright

Source: Web Directions Blog John • 25 April 2017

Chris WrightA hallmark of the relatively short history of web design and development has been the often very creative use of CSS elements meant to do one thing but made to serve some other purpose entirely.

Some might find that surprising, given that this has all been invented fairly recently for specifically to design and build websites, but the reality is that CSS was always going to need to evolve as we go along.

Back at Respond 16, Chris Wright addressed one of these situations, namely using media queries to adapt components to the available space – necessary for a responsive site. Chris’ talk focused on the prospect of using element queries instead: very interesting stuff and worth 25 minutes of your time.

 

 

Got your ticket for 2017 yet?

For Respond 17, we’ve put together a truly remarkable two-day program of international and local speakers digging into front end design and development, that we’re taking in full to Sydney (4-5 May) and Melbourne (8-9 May), with a special trip to Brisbane as well (11 May). Come and join us!

 

Want more?

Like to see and read more like this? Be the first to score invitations to our events? Then jump on our once-a-week mailing list to keep up with everything happening at Web Directions. And you’ll get a complimentary digital copy of Scroll magazine.


The post Video Ristretto: Components Without Screen-based Media Queries – Chris Wright appeared first on Web Directions.

Video of the Week: Building Accessible Web Components Without Tears – Russ Weakley

Source: Web Directions Blog John • 20 April 2017

Russ WeakleyOne of the things we really like about staging conferences like Respond is that we can bring to Australia experts from around the world.

Perhaps even better than that is when we can feature locals who are themselves world class in their fields. When it comes to CSS, we’re fortunate to have a thinker, practitioner and educator at that level in Russ Weakley.

Add to that Russ’s understanding and ability to use CSS to build truly accessible web experiences, and his capacity and willingness to share his skill with as many web practitioners as possible, and we’re talking not just world class, but world leading.

And it doesn’t hurt that he can be seriously funny. Here’s a tadge under an hour of Russ at Respond 16. Well worth your time.
 

 

Got your ticket for 2017 yet?

For Respond 17, we’ve put together a truly remarkable two-day program of international and local speakers digging into front end design and development, that we’re taking in full to Sydney (4-5 May) and Melbourne (8-9 May), with a special trip to Brisbane as well (11 May). Come and join us!

 

Want more?

Like to see and read more like this? Be the first to score invitations to our events? Then jump on our once-a-week mailing list to keep up with everything happening at Web Directions. And you’ll get a complimentary digital copy of Scroll magazine.


The post Video of the Week: Building Accessible Web Components Without Tears – Russ Weakley appeared first on Web Directions.

Give Yourself Over to CSS Grid – Mike Riethmuller

Source: Web Directions Blog John • 20 April 2017

Mike RiethmullerWe invited some of our Respond 17 speakers to contribute an article on a topic not necessarily directly related to their presentation theme, but that would fit in with the general themes of the conference.

Mike Riethmuller, who is presenting on Responsive, Progressive Fluid Typography at Respond, came up with this excellent piece about CSS Grid and its impact on our work.

 

Give Yourself Over to CSS Grid

By Mike Riethmuller

Whenever a new feature is added to browsers, I see developers trying to repeat familiar patterns. I’m not the first to say it, but I think very soon we’re about to see a lot of developers try to recreate familiar 12 column grid systems with native CSS Grid Layout. Which, by the way, has now landed in the current version of every major browser.

Grid is going to allow us to go way beyond what we can do with existing layout options. Unfortunately, before we get there we’re going to have to suffer a whole lot of conversations about why Flexbox is a better alternative, and Medium articles with titles like: “How I switched from Bootstrap’s grid to CSS Grid”.

We might all know CSS Grid is a unique tool with characteristics that provide for new possibilities, but we’re going to make these mistakes anyway. Some of us are even going to get scared and angry about it. You don’t need to look back very far to see how this might happen.

Although it’s more widely appreciated today, there were a lot of discussions early on about the merits of Flexbox. Many were quick to suggest that it had performance issues and if you Google “Is Flexbox slow?”, you can still see the remnants of these discussions.

With the exception of a few edge-cases and bugs, I don’t think Flexbox was ever slow. At least not in any meaningful way. Any minor bugs were quickly resolved, and browsers continue to optimise their algorithms in favour of modern features.

Once we realised it wasn’t slow, all we had left to complain about was its complexity. People said things like:

“I do wish it wasn’t quite so terrifyingly complex”

— John Allsopp, 2015.

But let’s be kind to John because he put it more mildly than most, and he was not alone in being terrified of Flexbox.

Flexbox introduced a wide range of new CSS properties and new terms to our vocabulary, including basis, shrink, grow, flex containers, flex items, align-items and justify-content. All of this at once was daunting and it was a new mindset too. Some of us had trust issues giving up control over the exact height or width of elements, but it turned out this was OK.

Grid is also about to introduce a whole lot of new terminology and new ideas such as lines, tracks, fr units, grid areas and grid cells. Luckily, it also builds on some concepts we’ve become familiar with through Flexbox. The idea of grid containers and grid items should make sense, as will the reason for properties like align-items and justify-content.

The hardest part will be letting go of ideas about how CSS Grid Layout should work. CSS Grid Layout is not the same as traditional CSS grid systems you might have used and you might be surprised at how much it differs.

For example, grid areas can easily span multiple columns and rows.

Respond 17: Mike Riethmuller

This can be done by defining the start and end positions of a grid item.

.grid-item {
    grid-column-start: 2;
    grid-column-end: 5;
    grid-row-start: 1;
    grid-row-end: 3;
}

CSS Grid layout also offers a number of other ways this could be achieved. One of the most interesting is the grid-template-area property.  This enables us to use template strings to define grid areas on the container.

.grid-container {
    display: grid;
    grid-template-areas: "aside   main   main   aside"
    "aside   main   main   aside"
    "footer  footer  footer  footer";
}

On the grid item we can now assign a template area:

.grid-item {
    grid-area: main;
}

Neither of these examples is similar to traditional grid systems found in libraries like Bootstrap or Susy. To achieve spanning of columns and rows usually requires altering the mark-up, or using complicated positioning hacks.

When encountering something new like this it’s easy to get confused and then anxious, and to attribute that to complexity. They may seem complex when you’re try to solve the wrong problems, but when used for their own unique potential, Flexbox or Grid Layout are far simpler than alternatives.

I’m not saying that learning Grid Layout will be simple. In general, layout on the web is complicated, but once you’re past the initial learning curve, I think you’ll find that, like Flexbox, CSS Grid is no more complex than the layout methods we cobbled together using floats, containers and clearfix hacks.

Those methods we used for so long were not even meant for layout. It’s really exciting that now, for the first time in the 20 year history of CSS, we have options that are deliberately designed to help us solve complicated layout problems.

This should make things easier, but learning new stuff is hard. It takes time and can be frustrating. Not only that, when something doesn’t fit within the boundaries of our experience, it’s easy to be disappointed, confused and fall back to solving the same old problems.

This process isn’t new or surprising. If you watch some of the first TV news broadcasts it’s easy to see the influence of radio in the slow, clear pronunciation of words, or the often redundantly detailed descriptions of locations. This pattern has repeated with the influence of live theatre in early film, and film in animation. In each case, it has taken time and experimentation to fully discover the unique potential of the new media.

This holds true for the web as well. It’s easy to see influence of print design embedded not only in our typography and visual design practices but also in the technical architecture and meta language of the web.

This is something we do on small scales as well as large. It’s common to carry over perceived limitations from our past experience by falsely assuming that new technologies will work in a similar way, will solve similar problems and will have similar constraints to those we currently experience.

I’ve seen this happen with the slow uptake of viewport units, people’s initial attitudes towards calc() and in treating SVG like any standard image format. I’m hopeful that with these experiences we won’t do the same again with Grid Layout.

Grid, or any new feature, probably won’t solve your current problems better – it’s the answer to problems you haven’t found yet.

I’m not yet sure what unique potential CSS Grid might offer us, but I can’t wait to find out.

The post Give Yourself Over to CSS Grid – Mike Riethmuller appeared first on Web Directions.

Updated Working Draft: CSS Containment Level 1.

Source: W3C's Cascading Style Sheets home page19 April 2017

19 Apr 2017 Updated Working Draft: CSS Containment Level 1.

How W3C checks its specifications for accessibility support: APA review

Source: W3C Blog Michael Cooper • 18 April 2017

The Accessible Platform Architectures (APA) Working Group works to ensure W3C specifications provide support for accessibility to people with disabilities. The group seeks new accessibility and technology experts to help influence a broad set of W3C specifications.

What we do

A primary APA responsibility is the review of W3C Technical Reports for potential benefits or concerns for web accessibility. W3C’s wide review process provides opportunity for groups like APA to submit comments to Working Groups developing these documents and work together on ways to better meet accessibility opportunities and mitigate accessibility risks in these technologies.

Many of the specifications that need comments impact the user interface (such as HTML, CSS, and SVG) and may require additional features to ensure content or interaction can be made available to users in alternate forms. While this is the layer where accessibility issues are most often predicted, the APA WG has found a need to review other types of technologies as well. For instance, transmission protocols and interchange APIs need to ensure accessibility-specific information is not omitted from content. Review of requirements and best practices helps to identify ways a technology can benefit accessibility in unexpected ways or to determine the need to perform early engineering of accessibility solutions. Therefore APA looks at every Technical Report that is published.

How we work

About half of the documents we review are quickly determined not to need in-depth review, and about a third of the remainder are found upon review not to need accessibility considerations addressed. The remaining documents go into a more intensive review process which may require developing comments or returning to the specification after the content matures. Sometimes this leads to more extensive projects, which in the past has included creation of joint task forces for media accessibility, web payments accessibility and CSS accessibility which help engineer solutions and have produced documents like Media Accessibility User Requirements. Usually, though, reviews become comments to the developers of specifications. Over the years, APA and other groups have submitted accessibility-related comments on scores of W3C specifications and notes.

Who we need

All of these paths require considerable expertise within the APA WG. Even the half of documents that are only reviewed lightly require people with sufficient understanding of the base technology and of potential accessibility issues to make a determination. The more in-depth reviews can require considerable knowledge of the base technology as well as understanding of potential barriers to people with various types of disabilities, and the ability to work with other groups to engineer solutions. No one person can provide this expertise for the wide range of technologies now under development at W3C, so a quorum of engaged experts is critical to the success of the APA mission.

How to contribute

This is where we say, we need your help. It is a big responsibility to be the first point of contact for accessibility of such a wide-ranging set of specifications that have great impact on so many lives today. Getting involved in this work is a unique opportunity to learn about a wide variety of technologies and to bring your accessibility expertise to bear in creative ways. The APA Working Group brings together a global set of professionals who complement each others’ experience to make meaningful impact on the universality of the Web. Participation is open to representatives of W3C Member organizations, and we can invite experts who do not work for those types of organizations. Please consider if you might have a role in ensuring Accessible Platform Architectures for the World Wide Web. See the participation page or contact Janina Sajka for information on how you can get involved, and please come help make the Web accessible!

Minutes Telecon 2017-04-12

Source: CSS WG Blog Dael Jackson • 13 April 2017

Full Minutes

New Working Draft: CSS Fill and Stroke Level 3. Updated Work…

Source: W3C's Cascading Style Sheets home page13 April 2017

13 Apr 2017 New Working Draft: CSS Fill and Stroke Level 3. Updated Working Draft: CSS Image Values and Replaced Content Level 4.

RealObjects released PDFreactor version 9, an XML-to-PDF for…

Source: W3C's Cascading Style Sheets home page12 April 2017

12 Apr 2017 RealObjects released PDFreactor version 9, an XML-to-PDF formatter that runs either as a Web service or as a command line tool. It has support for, among other things, CSS Transforms, CSS Regions, Web Fonts, and running elements. Other features include support for HTML5, MathML, SVG, XSLT, JavaScript, and accessible PDF. This version adds, among other things, CSS opacity, box-shadow, new REST APIs, improved JavaScript and support for Linux systemd. (Java. Free personal version)

Video Ristretto: CSS Variables – Michael Mifsud

Source: Web Directions Blog John • 11 April 2017

Michael MifsudMichael Mifsud is a Performance Engineer at 99designs, a core contributor to LibSass, and the Node-Sass project lead.

He started the MelbCSS Meetup and is an organizer of CSSConf AU.

All of which amply qualifies him to tell us how CSS Variables won’t kill off Sass, but can lighten your workload. Which is exactly what Michael did at Respond 16, and that’s our short video this week.

 

 

Got your ticket for 2017 yet?

For Respond 17, we’ve put together a truly remarkable two-day program of international and local speakers digging into front end design and development, that we’re taking in full to Sydney (4-5 May) and Melbourne (8-9 May), with a special trip to Brisbane as well (11 May). Come and join us!

 

Want more?

Like to see and read more like this? Be the first to score invitations to our events? Then jump on our once-a-week mailing list to keep up with everything happening at Web Directions. And you’ll get a complimentary digital copy of Scroll magazine.


The post Video Ristretto: CSS Variables – Michael Mifsud appeared first on Web Directions.

Respond 17 Scroll Excerpt: Mina Markham

Source: Web Directions Blog John • 10 April 2017

This week’s extract from the Scroll magazine published with our Respond 17 conference focuses on keynote speaker Mina Markham.

During the 2016 US presidential campaign, Mina spent most of her time building and refining Pantsuit, the design system that powered many of the applications hosted on hillaryclinton.com.

In her Respond 17 talk, Styling Hillary: A Design System for all Americans , Mina will share successes and failures from nearly two years at Hillary for America, including creating CSS architecture and implementing a redesign of the main website. Here’s part of her profile in Scroll.

Mina Markham

Coding a Pantsuit

Interview for Communication Arts, 2016.

Respond 17: Mina Markham

How did you first get started in front-end development and interactive design?

My interest can be traced back to my high school journalism class. I was on the newspaper staff, and part of my role, in addition to writing, was to design the layout for articles. I realized that I enjoyed laying out articles more than writing them.

I loved discovering new ways to visually represent the stories I had written. That was pretty telling for me. Once I got into print design, it was a natural evolution to interactive design, and from there, into front-end development.

How did you learn the necessary skills?

I have a formal design education from the S.I. Newhouse School of Public Communications at Syracuse University. My time there helped me develop an aesthetic and understanding of what makes good design. I worked in print design and advertising for about five years before I made the switch. During that time, I was also working on interactive projects for freelance clients, teaching myself what I needed to know for each project.

I did this by reading blogs, tutorials and books, attending conferences, and studying other people’s work. Viewing the source code of my favorite websites was, and still is, a big part of my learning process. It was a lot of trial and error—but mostly errors.

I used the online technology schools Treehouse and Code School to do interactive code challenges. The CSS resource website CSS-Tricks is a godsend. CodePen is great for seeing examples of various front-end techniques. Chris Coyier is my unofficial professor of the Internet.

I also love reading the blogs of front-end web developers Sara Soueidan and Una Kravets. The book collection A Book Apart is great for deep dives on single topics. And some favorite conferences are the Front Porch Conference, the Front-End Design Conference and the CSS Dev Conf.

Respond 17: Mina Markham

What led you to join Hillary Clinton’s 2016 presidential campaign as a senior software engineer?

A friend of mine worked for Obama in 2012, and when the time came to build a technology team for Secretary Clinton’s campaign, my friend suggested me. I hadn’t worked in politics before, so this was not something that would have occurred to me.

Once I realized the potential impact I could have, it was too good to pass up. Not many people get handed an opportunity to be a part of history.

What were the greatest challenges of creating Pantsuit, Hillary for America’s internal design system?

Ideally, when creating a design system, you build it in tandem with the product it powers so they can both grow and adapt as needed. Initially, the biggest challenge was that I was locked into an existing design. The first version of Pantsuit was written as a one-to-one interface parity with the donation platform at the time.

So I had to figure out a way to rewrite all the underlying code powering the design, without making any visual changes. This type of code refactor isn’t unusual, but doing so at the scale and speed required—and creating a design system in the process—was a unique challenge.

One of the requirements of a system like Pantsuit is modularity. To achieve this, I had to take the existing patterns I saw and anticipate how they might be used in a different context. Each design was broken down into smaller pieces that could be rearranged into a new pattern. As I was building the pieces of Pantsuit, I was using those pieces to create a new, yet identical, version of the donations platform. Sometimes, I would find that I was too broad in my definition of a pattern or module and would have to rethink my approach.

For both versions of Pantsuit, I created an interface inventory of each design. I printed copies of each user flow and cut out pieces of the design. I tried to get as granular with the interface as possible: buttons, form inputs, typographic treatments, navigational elements, etc.

Afterwards, I grouped similar pieces together to see if they could be consolidated. For example, narrowing down buttons to two sizes or simplifying the color palette. This process made the code more consistent and easier to mix and match into new patterns.

Respond 17: Mina Markham
That’s the end of this excerpt from Scroll magazine. Come and see Mina and the rest of the amazing line-up at Respond 17 in May.

Interview originally published at http://www.commarts.com/column/coding-pantsuit

The post Respond 17 Scroll Excerpt: Mina Markham appeared first on Web Directions.

Direction 16: Art Directing Web Design – Andy Clarke

Source: Web Directions Blog John • 09 April 2017

Following on from our Video of the Week on Friday, a couple of people have asked whether we published a Wrap magazine summary of Andy Clarke‘s keynote presentation at Direction 16. We sure did!

In fact, we plan to continue publishing summaries of all of our future conference presentations in the digital-only Wrap magazine. They will also form part of a future venture we have in mind – but we can’t say too much about that yet. Note that you can subscribe to Wrap – for free – whether you attend an event or not.

So, here’s how Wrap summarised Andy’s talk.

Art Directing Web Design

Andrew Clarke, Stuff and Nonsense

Direction 16: Andy Clarke

Key points / Takeaways

Andy is a repeat visitor to Australia over many years for Web Directions conferences and workshops.

He’s been talking at conferences about his disappointment in the current state of design on the web, and its lack of originality and personality.

This is not about nostalgia for how the web used to be, but disappointment we haven’t made it what it could be.

Not everyone agrees with Andy’s suggestion that web has been stripped of its soul. Some feel it is only about speed, access and functionality.

Andy believes the web is not simply a platform for the digital products.

Direction 16: Andy Clarke

We’ve forgotten that the web is a medium for communication that’s outside applications.

What we do as web professionals should be so much more than just execution. The web should be both a creative melting pot and a proving ground for new ideas.

Our infatuation with processes like atomic design and tools like pattern libraries and style guides can mean that sometimes we lose sight of what we’re ultimately making.

Art direction can improve what we make for the web.

Developers might say art direction is about responsive images, alternative crops, using the picture element to manage image sizing and orientation, but there’s more to web design than tools.

Designers might think art direction is about adding images, managing how the page is laid out and which fonts are used, but images and layout and typography are only the result of art direction, not the meaning of it.

“Art direction is the art of distilling an essential, precise meaning or purpose from a piece of content.”

Art direction is well established for media like newspapers and magazines, but even they have trouble art directing their content for the web.

There are exceptions. Independent, non-profit New York newsroom ProPublica ran an article about a series of rapes and used page layout to establish the different voices of people involved in the story.

Another ProPublica article about Mexican drug lord El Chapo used specially commissioned illustrations to communicate violence with an intensity difficult to achieve with photography.

Direction 16: Andy Clarke

ProPublica’s article Busted focused on false drug arrests and used art direction to emphasise story points, manipulating the size of images and page layout for specific effect.

In all three cases, ProPublica’s house style is intact: they use the same fonts on the same grid, they’re visually consistent – but the art directions gives each one its own feel, related directly to the article content.

As web designers, we can go beyond the day-to-day of what a company does, and think about what it actually means for people.

Art direction is about understanding those messages and then deciding how best to communicate them through the organization and presentation of words and visuals.

That applies to the web as much as to magazines. In fact, the basic principles of art direction haven’t changed between print and digital.

Typography is absolutely key to a website’s visual identity, because it involves a collaboration between design and content to affect the reader, for example in the way pull quotes are presented to emphasise selected content.

Layout tools like Flexbox and CSS Grid enable us to place content like quotes visually, while maintaining appropriate source order.

Direction 16: Andy Clarke

Varying the size of type can emphasise and help to create focal points that enhance understanding of meaning.

Headlines demonstrate hierarchy and signal the importance of content but they can do so much more than just demand attention. Font, size, line height, spacing and positioning can help set content priorities.

Paragraphs can be manipulated to stand out. Drop caps can be used to great effect and the space they create can also be used to highlight content.

“The web can be a vibrant medium for creative expression, in just the same way as film, print and other media.”

To make inspired design decisions, we need to feel inspired and there’s no better place to start than by looking at designers we admire, especially those from outside the web.

Whitespace and columns bring more of an editorial feel to a design.

Grid systems allow us to place content on the page just as we want it, but a lack of imagination and knowledge about how to use grid systems creatively limits what we do with them.

Design decisions do not have to be based on guesswork. The Golden Ratio – and other ratios – offer mathematical bases for how content is aligned and placed on the page.

We can turn 12 into six more manageable columns, like the grid that was the foundation for our redesign of WWF UK’s Fundraising pages.

Whether we work mobile first or desktop down, we can make layouts creatively responsive.

Combining two grids to create a compound grid is an established design technique that’s rarely used on the web.

Irregular shapes can help to draw attention towards parts of the layout and, most importantly, towards calls to action.

Direction 16: Andy Clarke

We can use CSS shapes to extend a feature image into the content space and then overlay a caption using SVG to create an irregular background.

We can use CSS shapes with the ghost of type elements to literally sculpt unusually shaped columns of text.

We can use horizontal fields with grids, where the intersection of columns and fields create modular grids, another great way to create imaginative layouts.

Figure captions offer readers a meaningful explanation of an image – great for accessibility and SEO – but captions don’t always have to be below an image, nor do they have to be unstyled.

Art direction and design and editorial should be equal partners.

“Art direction is essential to creating cohesive experiences across multiple channels.”

Strong art direction means trusting the judgement of an individual art director, but we’ve become so risk-averse that our judgement now takes second place to testing.

Pattern libraries help designers improve efficiency, and living style guides help maintain better consistency in user experiences and visual identities across channels.

A cohesive experience needs more than a guide to a library of patterns, it needs a singular creative vision, and that can come from art direction.

Atomic design, pattern libraries and style guides are not incompatible with art direction – they need art direction to make them meaningful.

Art direction is the gravity that pulls atoms together.

Direction 16: Andy Clarke

Resources

@Malarkey
slides
website
ProPublica (An Unbelievable Story Rape)
ProPublica (Devils, Deals and the DEA)
ProPublica (Busted)
Gridset
WWF UK
Dalton Maag (typefaces)

Tweets

Direction 16: Andy Clarke

Direction 16: Andy Clarke

Direction 16: Andy Clarke

Direction 16: Andy Clarke

Direction 16: Andy Clarke

Direction 16: Andy Clarke

The post Direction 16: Art Directing Web Design – Andy Clarke appeared first on Web Directions.

Video of the Week: Art directing web design – Andy Clarke

Source: Web Directions Blog John • 07 April 2017

Andy ClarkeSeveral recent Videos of the Week focused on new capabilities in style and layout control, and how they open up opportunities for designers to extend their creative vision on the web.

Examples include talks by Stephanie Rewis, Rachel Andrew and Jen Simmons.

Well, this week is no different.

At Direction 16, Andy Clarke’s inspiring keynote Art Directing Web Design not only gave us another stepping stone toward understanding what can be achieved with new techniques, including some mesmerising layout techniques, but also laid a great foundation for our upcoming Respond conference, where this is all taken to yet another level.

So enjoy 47 video minutes or so with one of our favourite presenters – I think we worked out that he holds the record for talks and workshops at Web Directions events worldwide – and get warmed up for Respond 17.

 

Like to watch and read more like this? Be the first to score invitations to our events? Then jump on our once a week mailing list where we round up the week’s best reading and watching on all things Web. And you’ll get a complimentary digital copy of Scroll magazine.

The post Video of the Week: Art directing web design – Andy Clarke appeared first on Web Directions.

Feeds

The Future of Style features:

If you have a post you want to add to this feed, post a link (or the whole thing) on the CSS3 Soapbox. If you own a blog with frequent posts about the future of CSS, and want to be added to this aggregator, please get in touch with fantasai.

fantasai

Made with CSS! Valid CSS!Valid HTML 4.0! RSS feed Atom feed