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

New Web Features in Safari 10.1

Source: Surfin' SafariJon Davis • 27 April 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;
    }
}

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.

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

Source: W3C's Cascading Style Sheets home page26 April 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.

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.

Release Notes for Safari Technology Preview 28

Source: Surfin' Safari Jon Davis • 19 April 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

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.

Updated Working Draft: CSS Box Alignment Level 3.

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

7 Apr 2017 Updated Working Draft: CSS Box Alignment Level 3.

Updated Working Draft: CSS Box Alignment Module Level 3.

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

7 Apr 2017 Updated Working Draft: CSS Box Alignment Module Level 3.

CSS, HTML, SVG at Respond

Source: Web Directions BlogJohn • 06 April 2017

Respond started life as a “pop-up” single-day conference in Sydney, addressing the specific challenges associated with web design in the age of multi screens.

Initially, the focus was very practical and revolved a lot around CSS – and specific responsive patterns – to do with images, navigation on small screens, accessibility on mobile devices, and so on.

But front end design has come a long way in the relatively short time since we held that first event, and so Respond has evolved to more broadly address the challenges of designing great experiences.

But a central part of this continues to be the technologies we work with to build these experiences – CSS, HTML, SVG, and more.

At Respond this year, there’ll be more than a little focus on these, though if that’s not what you work with every day, there will still be considerable value in gaining a sense of what’s possible today in our browsers that you can incorporate into your designs or product roadmaps.
 
CSS, HTML, SVG at Respond 17
 
First up, Vitaly Friedman, one of the foremost experts in responsive design and development, will survey the current browser technology landscape, HTTP/2, Service Workers, Responsive Images, Flexbox, SVG and Font Loading APIs, and consider how we can use them to create great experiences. For the more technically inclined, this is a great how-to, while for those who don’t live in the code, it’s an eye-opener as to what’s possible. It’s leading edge today, but these will be baseline requirements not too far from now.

Rachel Nabors, who knows more about animation on the web than just about anyone, will look at the tools available to create engaging dynamic animated experiences. Again, motion design is already a key principle to master for the emerging web.

Mike Riethmuller will look at how type responds to the user’s screen size, orientation and resolution – a holy grail of responsive design – and the CSS we need to make it a reality.

In a related session, Mandy Michael will look at various features of CSS to help create eye-catching text effects.

Brett Snaidero will complement Rachel’s presentation by giving us a look at how SVG combined with CSS enables animation with little pain, and no need for complex code.

If your primary job is building the front end, and working with CSS, HTML and SVG, there’s more than enough here to considerably extend your skill set and inspire you, while if you’re focused more on UX, CX, IxD, and Product Design, come and see what tools are now available to create even more compelling experiences.

 
CSS, HTML, SVG at Respond 17

The post CSS, HTML, SVG at Respond appeared first on Web Directions.

Respond 17 Scroll Excerpt: Rachel Nabors

Source: Web Directions Blog John • 06 April 2017

If you went to one of our conferences in 2016, you will have seen Scroll. Some might think it unusual for a web / digital conference organiser to publish a print magazine. We think it fits. The thing is, we don’t see it as a binary option, either/or.

This year, we’re publishing one Scroll magazine to cover the Respond and Code conferences. Attendees will get a print copy, there will be a digital version, and there will be other ways to get your hands on a copy.

This is the first of a series of excerpts that aim to give you a bit of insight into our Respond speakers, and hopefully make you want to read the rest in Scroll.

Rachel Nabors

Respond 17: Rachel Nabors

At first glance, a word portrait of Rachel Nabors would be that of a web animation and motion design guru – a highly successful, accomplished web developer and designer with a range of high profile projects to her name, an international reputation as an expert of the highest standing in her field, and in demand for consulting, speaking, writing, courses and workshops.

But there is a back story to Rachel’s career that shows it hasn’t always been an easy path for her, one in which a personal crisis forced her to switch from one livelihood to another.

That’s not unique, of course – lots of people go through rocky times that change their lives. What makes Rachel’s story so interesting for us is the intersection of web tech and professional creativity.

Award-winning comic artist

 
Rachel grew up in the Blue Ridge Mountains of Pennsylvania, USA. After seeing the movie Chasing Amy (a quirky 1997 romantic comedy with young comic artists as the main characters) when she was 14, Rachel started creating her own comics.

By the age of 17, Rachel was focusing seriously on comics. She was getting freelance work with gURL.com, and then a weekly contract. When she was 19, she self-published her first graphic novel, 18 Revolutions, and comics were helping her out of rural poverty. Another graphic novel and mini comics followed, and Rachel won several awards for her work.

An interview she gave to Silver Bullet Comics in 2006 is still available via the Wayback Machine:

“I spent a lot of time learning [Adobe] Photoshop and Illustrator before putting together 18 Revolutions. One of the handy things about being home schooled was that my curriculum was very flexible. During my last few years of education, I was able to focus on practicing with software.

I did not anticipate how difficult it would be to get my books to stores. I remember securing an order for 18 Revolutions from a chain bookstore only to learn that I had to locate an approved distributor who would not only carry graphic novels but who also would work with a self-publisher. It was utter madness, so I decided to stick to a strictly online sales model.”

If you’d like to explore Rachel’s comics work, she maintains an archive at her Rachel the Great website.

Respond 17: Rachel Nabors

In working on comics – not just drawing and writing them, but also marketing them and distributing them online, Rachel was acquiring a skill set that would become useful in other ways. In a 2016 interview for Origin (“an interview series on how awesome women in tech got their start”), Rachel said,

“What I didn’t realize was that the web was actively replacing print publishing, and that the skills I was using to share my comics were about to become the new lingua franca.”

And a little further along,

“I’d always loved Flash animations, and I secretly hoped that one day I’d be able to make my comic a cartoon. So when Flash died, I was a bit sad that that was the end of that. But I was learning and using JavaScript, and when one day I found myself reading the CSS Animations spec, I realized I could make animations with the tools I already knew so well!”

But.

Then.

 

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

The post Respond 17 Scroll Excerpt: Rachel Nabors appeared first on Web Directions.

Minutes Telecon 2017-04-05

Source: CSS WG Blog Dael Jackson • 05 April 2017

Full Minutes

Release Notes for Safari Technology Preview 27

Source: Surfin' Safari Jon Davis • 05 April 2017

Safari Technology Preview Release 27 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 213822-214535.

Browser Changes

JavaScript

Web API

Rendering

CSS

Media

Web Inspector

Accessibility

WebCrypto

Video Ristretto: Advanced CSS Image Techniques – Jessica Claire Edwards

Source: Web Directions Blog John • 05 April 2017

Jessica Claire EdwardsThis week’s Video Ristretto has the full title of Farewell Photoshop: Advanced CSS Image Techniques, which sums up presenter Jessica Claire Edwards’ contention at Respond 16 that it’s possible to do with CSS what could previously be achieved only with a sophisticated image editing program. Whether that means you can get rid of Photoshop altogether is probably another question.

What’s not in doubt is that in just 18 minutes, Jessica demonstrates a remarkable array of CSS options for image management. Used in combination, they certainly give designers and developers an unprecedented level of control from within the stylesheet.

 

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 (12 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: Advanced CSS Image Techniques – Jessica Claire Edwards appeared first on Web Directions.

Release Notes for Safari Technology Preview 25

Source: Surfin' Safari Jon Davis • 05 April 2017

Safari Technology Preview Release 25 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 212356-213542.

Resource Timing

User Timing

WebCrypto

Web API

Web Inspector

CSS

Rendering

Media

Bug Fixes

A Word About Workshops

Source: Web Directions BlogJohn • 04 April 2017

You might have noticed a (significant) uptick in content from us in recent months – video, interviews, profiles, articles. Hopefully you’ve noticed Scroll and Wrap, our pre and post event publications. All of which are essentially due to Ricky Onsman. Ricky has been coming to our events, pretty much every one, since we started. Last year we started talking about where we wanted to take Web Directions, and one of the answers to how we were going to get there was right in front of us all this time.

This piece Ricky wrote for his own blog, but we really wanted to publish it here!

By Ricky Onsman

Vitaly Friedman workshops

I am genuinely – perhaps unreasonably – excited that I will be attending Vitaly Friedman’s Masterclass workshop at the Respond conference next month.

In the last 20 years, I have attended a lot of workshops.

Many of those focused on web technologies and skills and they’ve included sessions led by people like Vitaly (in 2015), Andrew Clarke (several times), Elliot Jay Stocks, Ethan Marcotte & Karen McGrane, Mark Boulton, Jared Spool & Dana Chisnell, and at least a dozen more.

I’ve also done a lot of other workshops focused on tangentially related subjects including business planning, book-keeping, freelancing, writing, specific software, editing, speaking, home networks and PC maintenance. Each of those has been a real boon to my work and my business, and their lessons have stayed with me, all from a day or a half-day each.

I’ve written previously that workshops are one of the three main arms of my ongoing professional development, the other two being books and conferences. Since then, it’s fair to say that video has increased its role in my ongoing self-directed training, especially in series covering topics like new developments in CSS.

What those four options have in common is easy, direct and relatively inexpensive access to the thoughts, skills and experience of people who do what I do but are a lot better at it, in one way or another.

With books and video, of course, you don’t get direct contact. Even in conferences, your contact with the expert is likely to be limited to a quick question at afternoon tea or in the pub later.

Workshops are different.

You’re in a room about the size of a classroom with 20 or so other people. The workshop leader usually doesn’t need amplification and can, if they wish, walk among you. They will typically use visual aids and may have physical props. They are, largely, accessible to you, and you can interact with them.

However.

In my experience, there are three distinct types of workshop, and the differences relate primarily to the level of interactivity with the workshop leader, and how much (or how little) the participants are expected (or allowed) to do.

The Lecture

The first kind isn’t really a workshop at all, despite what it says in the advertising material. There’s no interactivity with the participants, except for maybe a question-and-answer session at the end. The workshop leader basically give attendees a series of lectures, about one hour in length, with breaks in between. You’ll get two lectures in a half-day workshop and four in a full day.

Let me be clear – sometimes, this is the perfect format. It’s a bit like watching a live action video, but sometimes that’s just what you want. The workshop on book-keeping I went to was like that, and it worked. Mr Parker used PowerPoint slides to illustrate his talks and we received a printed “manual” at the end. Two sessions of one hour plus 10 minutes Q&A for each session was a morning very well spent.

The Seminar

The second kind of workshop is more like a group seminar. These tend to be full-day workshops where the leader is perhaps not completely confident they have a full day’s worth of material, so they’ve built in an element of “But enough about me – what’s your story?”

The workshop leader makes it clear at the start that they can be interrupted at any time with questions, the more questions the better. They also insist that they are not experts, just working practitioners like you who hope to learn as much from you as you learn from them.

There is a loose structure of sessions and breaks, but we don’t have to be too strict about that, let’s see how it goes.

The leaders know their stuff incredibly well, of course, and they show you lots of examples of their work and others’, and they take you through how they came to know what they know, and what they do with it, and what you can do with that knowledge.

The workshop leaders do their best to involve every participant – verbally – during the course of the day.

They tend to leave you not with any physical takeaways but a lot of links. You will have been advised that laptops are welcome at the workshop but not compulsory. The most use your device will actually get will be pointing your browser to a suggested useful resource.

Again, let me emphasise that I do not object to this approach. I have had some lovely, friendly and genuinely productive days that follow this format.

My third kind of workshop is what I would call a workshop.

The Workshop

In this kind, the room has desks or table space of some kind for participants, with access to a sufficient number of convenient electrical outlets. Laptops are mandatory and suggestions may be offered as to preferred browser or other software.

The workshop leader has supplied pencils, paper, post-it notes, highlighters – not just props, but tools for the participants. Tools at a workshop – who’d have thought?

The screen that displays the workshop leader’s laptop is high enough, large enough and crisp enough that it is both visible and legible. The equipment works. The wifi works. The air conditioning works.

The workshop leader explains the structure of the day, that the breaks will be quite short and the sessions long, “because we have a lot to get through”, and adds that it’s possible we might run over time.

Each session features the workshop leader explaining some aspect of their topic and then involving the workshop participants in an activity that illustrates or highlights the point. If it’s a piece of code, you have to write the code and render it in your browser for that satisfying “aha” moment.

You might be asked to show the result of your activity to your neighbour – no hiding, here. You might be asked to form into a group with your nearest neighbours and come up with a way of doing something. Tip: the quiet one will be the one that cracks it.

The workshop leader might ask a general question and when you offer your answer they say come up here and show me what you mean and you have to use their laptop so it goes on the big screen.

And the leader says, “I’ll have to think about that. Thank you.”

And the workshop leader might say, “I need three volunteers – you, you and you. Saves time that way.” And you all laugh, and the workshop leader says, “Oh, you’ll all be up here before the day is out”.

And you are.

The day is long and yet passes by in a flash.

You reach the scheduled finish time, and no-one leaves.

You reach half an hour past the scheduled finish time, and one person really does have to leave, they really don’t want to, and they’re sorry.

An hour past the scheduled finish time, the workshop leader says we need to wrap it up.  And you’re disappointed.

That is a workshop.

That was Vitaly’s workshop on state of the art responsive design in 2015.

I can hardly wait for this next one.

Originally published at: http://www.onsman.com/workshops/

The post A Word About Workshops appeared first on Web Directions.

Video of the Week: Flexing your layout muscles – a pragmatic look at Flexbox – Stephanie Rewis

Source: Web Directions Blog John • 31 March 2017

Stephanie RewisRecent browser support for CSS Grid Layout has attracted much attention for offering new web layout options, and this has also put the spotlight on another modern and complementary way to control layout: Flexbox.

As it happens, the same Code 16 conference which saw Rachel Andrew explain CSS Grid to us also featured Stephanie Rewis, Lead Developer on Design Systems at Salesforce UX, deliver an equally rivetting, mind-spinning and mouth-watering talk on what can be achieved with Flexbox.

That’s our Video of the Week this week, and I heartily recommend you find 50 minutes or so to give it a look. Actually, leave a little bit more time, because you WILL find yourself stopping to make notes and follow links. Hope you enjoy it.

 

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: Flexing your layout muscles – a pragmatic look at Flexbox – Stephanie Rewis appeared first on Web Directions.

Minutes Telecon 2017-03-29

Source: CSS WG Blog Dael Jackson • 30 March 2017

Full Minutes

W3C runs three Web development contests at the Festival of t…

Source: W3C's Cascading Style Sheets home page30 March 2017

30 Mar 2017 W3C runs three Web development contests at the Festival of the Web (part of the WWW 2017 conference in Perth, Australia).

Plan Your Professional Development for 2017

Source: Web Directions Blog John • 24 March 2017

Those of us who work in Web and the digital arena don’t have to be reminded that our fields are constantly updating. Whether it’s underlying technologies, or broad strategic practices, what was cutting edge last year is often common practice this year, and out of date the next.

Both in terms of our own professional development and the impact our work has on our company, organisation or clients, we all strive to keep up to date. But it’s no shortcoming to say that’s a lot of work.

For many years, our primary focus at Web Directions has been to help our audience of professional practitioners in the Web and digital fields keep up to date. We spend our lives keeping track of the technologies, practices, and ideas that are shaping our fields, and we bring them to you via articles, newsletters, podcasts, and of course our conferences and workshops. All with the aim of helping you do your job as best as you can.

But with the expansion of our conferences over the last couple of years, it’s not as easy as simply coming to our big end of year conference anymore. By breaking out that one, multi-track behemoth into a number of more focused events, our aim is to deliver the best possible event for various groups of professionals within the industry. Here’s a breakdown of each event, who it’s for, and how you and your team will benefit from attending.

Respond: for the front end design team

Increasingly great customer experiences are delivered by multi-disciplinary teams. Respond is designed to reflect that reality, with in-depth content for Interaction Designers, UX and CX professionals, UI Engineers – along with high-level, strategic thinking relevant to the whole front end design team.

Where else can you see people of the calibre of Mina Markham, the lead of the front end design efforts at the Hillary for America Campaign, world leader in web animation Rachel Nabors, or Elizabeth Allen, working at the forefront of conversation interfaces wth Shopify?

All curated by John Allsopp, cited by Ethan Marcotte, inventor of Responsive Web Design, as a key inspiration for the ideas that became RWD.

Our promise

Respond delivers actionable insights on current best practice in front end design in the broadest sense, in two super condensed days, in three cities. Cut down on travel time and expense, and invest a small fraction of your working year getting out in front of current trends.

Code: the JavaScript and front end engineering conference

Progressive Web Apps were first publicly talked about by their inventor Alex Russell at Code. Object Oriented CSS (OOCSS) was launched on the world at another of our events. We’ve been tracking trends in the technologies of the Web since the early 1990s, and then bringing these ideas to our community at events and elsewhere since the early days of the Web.

Code focuses on the fundamental building blocks of great Web experiences: JavaScript, CSS, Browser APIs – alongside best practices in performance, security, and software engineering for the Web. We believe it’s a unique event, not just within Australia, but globally. And like Respond, Code is visiting Sydney, Melbourne and Brisbane this year, in late July and early August.

Our promise

Code helps front end engineers deliver faster, more secure, more maintainable code that taps into the latest capabilities of the Web platform, which all adds up to the best possible customer experience. Cut down on travel time and expense, and invest a small fraction of your working year getting out in front of current trends.

Direction: the intersection of design, technology and big picture thinking

Last year we re-launched our Web Directions conference as Direction, to reflect the changes in our overall approach to delivering the best possible events to help you develop professionally. But, if Respond focuses on front end design, and Code on front end engineering, what does Direction focus on?

Direction is about the bigger picture (just as it always was as Web Directions). Two days of keynote-style presentations that help you chart a way forward, think about medium term trends in technology, in user experience, in interaction design. Direction helps you think about where your the work you do, and your career will go over the next few years.

The Web will always be at the heart of our events – including Direction – since the Web, we believe, will continue to be the medium for delivering the best possible user experiences in the great majority of cases.

But as machine learning, AI and conversational interfaces impact on the sorts of experiences we deliver to our users, as computing power disseminates into almost every object, and as these and other developments affect business and society profoundly, we believe it’s important to give deep consideration to these challenges and opportunities, not with breathless hype, but as we’ve always done, through the insights of people who spend their lives thinking about these things.

Our promise

We’ll separate the hype of emerging trends in technology, design, and strategic thinking from actionable reality. We’ll bring you deep thinkers who are working with these ideas and technologies, not simply taking about them.

And we’ll help you make the right decisions in harnessing the opportunities of a world that seems to be in a constant state of flux.

Direction 16

The post Plan Your Professional Development for 2017 appeared first on Web Directions.

Video of the Week – Rachel Andrew: CSS Grid Layout

Source: Web Directions Blog John • 23 March 2017

Now that it has support in browsers like Chrome and Firefox, CSS Grid is being recognised as the gamechanger it is for front end designers and developers.

That support has only come this month, but those who attended our Code 16 conference in July/August last year have been preparing for its advent ever since, thanks in large part to the detailed, pragmatic and quite inspiring talk given on the topic by Rachel Andrew, who can reasonably lay claim to knowing more about CSS Grid than anyone on the planet.

The video of that talk, CSS Grid Layout, is our Video of the Week, and I heartily recommend you set aside 50 minutes or so to find out what all the fuss is about and get to grips with how you can use CSS Grid to your best advantage.

 

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 – Rachel Andrew: CSS Grid Layout appeared first on Web Directions.

Minutes Telecon 2017-03-22

Source: CSS WG Blog Dael Jackson • 23 March 2017

Full Minutes

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