object(WP_Query)#584 (51) { ["query"]=> array(1) { ["tag"]=> string(7) "respond" } ["query_vars"]=> array(64) { ["tag"]=> string(7) "respond" ["error"]=> string(0) "" ["m"]=> string(0) "" ["p"]=> int(0) ["post_parent"]=> string(0) "" ["subpost"]=> string(0) "" ["subpost_id"]=> string(0) "" ["attachment"]=> string(0) "" ["attachment_id"]=> int(0) ["name"]=> string(0) "" ["static"]=> string(0) "" ["pagename"]=> string(0) "" ["page_id"]=> int(0) ["second"]=> string(0) "" ["minute"]=> string(0) "" ["hour"]=> string(0) "" ["day"]=> int(0) ["monthnum"]=> int(0) ["year"]=> int(0) ["w"]=> int(0) ["category_name"]=> string(0) "" ["cat"]=> string(0) "" ["tag_id"]=> int(266) ["author"]=> string(0) "" ["author_name"]=> string(0) "" ["feed"]=> string(0) "" ["tb"]=> string(0) "" ["paged"]=> int(0) ["meta_key"]=> string(0) "" ["meta_value"]=> string(0) "" ["preview"]=> string(0) "" ["s"]=> string(0) "" ["sentence"]=> string(0) "" ["title"]=> string(0) "" ["fields"]=> string(0) "" ["menu_order"]=> string(0) "" ["embed"]=> string(0) "" ["category__in"]=> array(0) { } ["category__not_in"]=> array(0) { } ["category__and"]=> array(0) { } ["post__in"]=> array(0) { } ["post__not_in"]=> array(0) { } ["post_name__in"]=> array(0) { } ["tag__in"]=> array(0) { } ["tag__not_in"]=> array(0) { } ["tag__and"]=> array(0) { } ["tag_slug__in"]=> array(1) { [0]=> string(7) "respond" } ["tag_slug__and"]=> array(0) { } ["post_parent__in"]=> array(0) { } ["post_parent__not_in"]=> array(0) { } ["author__in"]=> array(0) { } ["author__not_in"]=> array(0) { } ["ignore_sticky_posts"]=> bool(false) ["suppress_filters"]=> bool(false) ["cache_results"]=> bool(true) ["update_post_term_cache"]=> bool(true) ["lazy_load_term_meta"]=> bool(true) ["update_post_meta_cache"]=> bool(true) ["post_type"]=> string(0) "" ["posts_per_page"]=> int(15) ["nopaging"]=> bool(false) ["comments_per_page"]=> string(2) "50" ["no_found_rows"]=> bool(false) ["order"]=> string(4) "DESC" } ["tax_query"]=> object(WP_Tax_Query)#945 (6) { ["queries"]=> array(1) { [0]=> array(5) { ["taxonomy"]=> string(8) "post_tag" ["terms"]=> array(1) { [0]=> string(7) "respond" } ["field"]=> string(4) "slug" ["operator"]=> string(2) "IN" ["include_children"]=> bool(true) } } ["relation"]=> string(3) "AND" ["table_aliases":protected]=> array(1) { [0]=> string(21) "wp_term_relationships" } ["queried_terms"]=> array(1) { ["post_tag"]=> array(2) { ["terms"]=> array(1) { [0]=> string(7) "respond" } ["field"]=> string(4) "slug" } } ["primary_table"]=> string(8) "wp_posts" ["primary_id_column"]=> string(2) "ID" } ["meta_query"]=> object(WP_Meta_Query)#944 (9) { ["queries"]=> array(0) { } ["relation"]=> NULL ["meta_table"]=> NULL ["meta_id_column"]=> NULL ["primary_table"]=> NULL ["primary_id_column"]=> NULL ["table_aliases":protected]=> array(0) { } ["clauses":protected]=> array(0) { } ["has_or_relation":protected]=> bool(false) } ["date_query"]=> bool(false) ["queried_object"]=> object(WP_Term)#1300 (11) { ["term_id"]=> int(266) ["name"]=> string(7) "respond" ["slug"]=> string(7) "respond" ["term_group"]=> int(0) ["term_taxonomy_id"]=> int(266) ["taxonomy"]=> string(8) "post_tag" ["description"]=> string(0) "" ["parent"]=> int(0) ["count"]=> int(18) ["filter"]=> string(3) "raw" ["term_order"]=> string(1) "0" } ["queried_object_id"]=> int(266) ["request"]=> string(344) "SELECT SQL_CALC_FOUND_ROWS wp_posts.ID FROM wp_posts LEFT JOIN wp_term_relationships ON (wp_posts.ID = wp_term_relationships.object_id) WHERE 1=1 AND ( wp_term_relationships.term_taxonomy_id IN (266) ) AND wp_posts.post_type = 'post' AND (wp_posts.post_status = 'publish') GROUP BY wp_posts.ID ORDER BY wp_posts.post_date DESC LIMIT 0, 15" ["posts"]=> &array(15) { [0]=> object(WP_Post)#947 (25) { ["ID"]=> int(7363) ["post_author"]=> string(1) "3" ["post_date"]=> string(19) "2017-04-28 09:18:59" ["post_date_gmt"]=> string(19) "2017-04-27 22:18:59" ["post_content"]=> string(3346) "Ethan MarcotteJust days away from the start of the 3-city week-long festival of design that is Respond 17 (you're booked in for Sydney, Melbourne or Brisbane, right?) seems an opportune moment to review the presentation delivered at Respond just a year ago by Ethan Marcotte. While this engaging and inspiring talk focuses - naturally - on responsive web design, the principle of what Ethan calls "laziness" can be applied to a whole range of activities. It's all about achieving more by doing less, what is sometimes referred to as "boxing clever". And with that, I'll hand you over to the father of RWD for an hour or so.    

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.
" ["post_title"]=> string(77) "Video of the Week: Laziness in the Time of Responsive Design - Ethan Marcotte" ["post_excerpt"]=> string(0) "" ["post_status"]=> string(7) "publish" ["comment_status"]=> string(4) "open" ["ping_status"]=> string(6) "closed" ["post_password"]=> string(0) "" ["post_name"]=> string(57) "video-week-laziness-time-responsive-design-ethan-marcotte" ["to_ping"]=> string(0) "" ["pinged"]=> string(0) "" ["post_modified"]=> string(19) "2017-04-28 10:23:01" ["post_modified_gmt"]=> string(19) "2017-04-27 23:23:01" ["post_content_filtered"]=> string(0) "" ["post_parent"]=> int(0) ["guid"]=> string(37) "https://www.webdirections.org/?p=7363" ["menu_order"]=> int(0) ["post_type"]=> string(4) "post" ["post_mime_type"]=> string(0) "" ["comment_count"]=> string(1) "0" ["filter"]=> string(3) "raw" ["post_category"]=> string(1) "0" } [1]=> object(WP_Post)#948 (25) { ["ID"]=> int(7328) ["post_author"]=> string(1) "3" ["post_date"]=> string(19) "2017-04-24 17:43:27" ["post_date_gmt"]=> string(19) "2017-04-24 06:43:27" ["post_content"]=> string(5065) "As is often the case, our next major event - Respond 17 - is not only a two-day conference, but also has a third day devoted to a Masterclass workshop with Vitaly Friedman (in Brisbane, we'll present only the workshop). Our roster of past Masterclass workshop leaders reads like an album of who's who in web design over the last decade, and Vitaly represents another great page in that album. Given that his session is on packing all these great responsive design tools and techniques into a cohesive and comprehensive toolkit, you should give serious thought to coming along. For perspective, here's our Wrap account of the Respond 16 Masterclass led by Ethan Marcotte and Karen McGrane. This was written by Simon Vrachliotis, a first time web conference attendee who decided to join the Masterclass at the last minute.

Responsive Design: Content, Code, Collaboration

presented by Ethan Marcotte and Karen McGrane

Ethan Marcotte and Karen McGrane

Described by Simon Vrachliotis

I'm at Darling Harbour, on a glorious autumn Sydney Wednesday morning, and the anticipation is high. I'm about to step into a responsive web design workshop hosted by none other than Karen McGrane and Ethan Marcotte. Respond 16 is my first major conference, and the idea of even being in a room with these people feels almost surreal. My co-worker Matt is also attending. We got our tickets at the last minute, and the prospect of spending an entire day sponging knowledge from two iconic industry leaders has us pretty excited. Ethan Marcotte kicks thing off with the first presentation. This guy doesn't just give a talk, he gives a performance. Each word, spoken with a slow-paced, calm voice, seems carefully designed. The long pauses allow my mind to process it all, the spikes of humour perfectly break up the intensity. The room is lapping it up and soaking it in. Ethan is a master at the art of public speaking, and has clearly put a lot of effort into putting together top quality content.
"The only thing we can reliably know is the size of the browser window."
Karen McGrane is up next. Her style is very different. Ethan's philosophical, almost poetic performance gives way to some sharp, provocative, cold hard facts about the wide gap that sits between responsive web design and the corporate/enterprise world. Slide after slide, Karen brings us infographics that carry undeniable business value, the sort of stuff you can print and show a CEO to give you instant leverage when suggesting a responsive web design strategy. Karen does a great job at calling out situations with which most of us have been familiar throughout our careers. She gives us ammunition for the next time such situations occur.
"Mobile first is about designing for focus."
We then undertook a group exercise where content hierarchy had to be structured on a stream of post-it notes stacking on top of each other. This had the participants talking to each other, and some interesting discussions were sparked among the teams. It felt like the workshop had kicked in and there would be more of this. However, after the groups regained their sitting spots, the day went back to listening to Karen and Ethan and there were no more workshop activities. Between them, the two presenters made convincing cases for using fluid layout and adaptive design, demonstrated relevant techniques, showed how to build a business case for responsive design - and did this with clarity, insight and humour. If I could have improved anything, it would have been having more hands-on exercises and do-it-yourself activities throughout the day. We were told we could bring our laptops, but never really needed to use them. The quality of the information delivered was extremely high. We all came away with a much better understanding of designing to suit content delivered on an unpredictable range of devices. Karen and Ethan clearly have extensive experience and skill in both responsive web design and public speaking. Attending their workshop was a privilege. Respond 16: Ethan Marcotte and Karen McGrane

Resources

@RWD website

Tweets

Respond 16: Ethan Marcotte and Karen McGrane Respond 16: Ethan Marcotte and Karen McGrane " ["post_title"]=> string(58) "Respond 16: Masterclass - Ethan Marcotte and Karen McGrane" ["post_excerpt"]=> string(0) "" ["post_status"]=> string(7) "publish" ["comment_status"]=> string(4) "open" ["ping_status"]=> string(6) "closed" ["post_password"]=> string(0) "" ["post_name"]=> string(51) "respond-16-masterclass-ethan-marcotte-karen-mcgrane" ["to_ping"]=> string(0) "" ["pinged"]=> string(0) "" ["post_modified"]=> string(19) "2017-04-24 17:43:27" ["post_modified_gmt"]=> string(19) "2017-04-24 06:43:27" ["post_content_filtered"]=> string(0) "" ["post_parent"]=> int(0) ["guid"]=> string(37) "https://www.webdirections.org/?p=7328" ["menu_order"]=> int(0) ["post_type"]=> string(4) "post" ["post_mime_type"]=> string(0) "" ["comment_count"]=> string(1) "0" ["filter"]=> string(3) "raw" ["post_category"]=> string(1) "0" } [2]=> object(WP_Post)#949 (25) { ["ID"]=> int(7259) ["post_author"]=> string(1) "3" ["post_date"]=> string(19) "2017-04-18 10:20:26" ["post_date_gmt"]=> string(19) "2017-04-17 23:20:26" ["post_content"]=> string(5665) "Our next extract from the Respond 17 Scroll magazine gives some background to keynote speaker and masterclass workshop leader Vitaly Friedman. As a regular speaker at web conferences, the Smashing Magazine head honcho is obviously a very familiar figure in our industry, but we wanted to find out how he got started and what inspired him to build his Smashing empire. Here's some of what we came up with for Scroll.

Vitaly Friedman

Respond 17: Vitaly Friedman Vitaly Friedman is a very high profile writer, speaker and workshop leader on a range of topics associated with emerging web technology. As co-founder and Editor-in-Chief, Vitaly is very strongly identified with Smashing Magazine, one of the best known online magazines focusing on web design and development. In 10 years, Smashing has grown from a small blog to one of the world’s major publishers of articles by industry experts on a just about any topic associated with web technology. Smashing has evolved in that time to also become a publisher and vendor of books (print and digital), a presenter of conferences and workshops (face-to-face and online) and maintains a list of design / programming job vacancies around the world. There’s no question that Smashing Magazine is now one of the leading avenues of professional development for people in the web industry anywhere in the world. So how did it all come about? In February this year while in Croatia, Vitaly gave a rare and lengthy video interview to local tech events organiser DaFED, in which he opened up about this.
“For me it all started 18 years ago - it makes me feel so old saying that - in 1998 or 99 when I was just trying to figure out what to do with my life. Somebody showed me the internet and that was a big new thing for me. It was really powerful for me to have that feeling that I'm able to publish content for free and make it available to everybody. I was born [in 1985] in Belarus - I grew up in Minsk - and I bought a CD which had Photoshop and Illustrator and other programs for one dollar! Everybody was talking about Photoshop but I started using Image Styler, an application that probably nobody knows because there was only ever one release, and I started using it to create images and then websites. I stuck with that until 2006 - nobody around there was using it but I mastered it, and because it was a really constrained environment it helped me master this medium and understand how to build and create websites. So, that was my start way back in 1998.”
Respond 17: Vitaly Friedman It wasn’t long before young Vitaly fell into publishing.
“I had a football blog which was all about getting scores from different ... not many people know this, but I published 28 or 29 issues, which were designed in Word Art (if that tells anybody anything). It was horribly designed and I had maybe 300-400 people subscribing to it by email, and then eventually I also got a website for it. From that point on I went from focusing on content into web design, then towards freelancing later. I don't know whether that site is still live, I don't think so because it was on free hosting - with lots of ads. It was virtualace.net if anybody wants to look it up.”
In 2000, Vitaly’s family moved to Germany and naturally he came with them.
“This was a really tough time for me because I didn't understand the language. I didn't speak German and I had no money, no friends, no social circle. I literally had to fight - like most kids brought in to a new, different environment. I felt that it was important for me to be independent so I wanted to find a way to earn my own money and not depend on my parents or my brother. I tried very hard to learn the language fast, and after a year I found myself understanding German – not being able to speak it properly, but understanding it – and I was trying to find a way to earn money and so I kind of referred back to the thing I could do and that was building websites. I wasn't a master, I was an amateur at best, but many people were experimenting and playing so I just started trying to do something in this area. I became a freelancer for web design and development.”
Respond 17: Vitaly Friedman   That's the end of this excerpt from Scroll magazine. Come and see Vitaly and the rest of the amazing line-up at Respond 17 in May. " ["post_title"]=> string(42) "Respond 17 Scroll Excerpt: Vitaly Friedman" ["post_excerpt"]=> string(0) "" ["post_status"]=> string(7) "publish" ["comment_status"]=> string(4) "open" ["ping_status"]=> string(6) "closed" ["post_password"]=> string(0) "" ["post_name"]=> string(41) "respond-17-scroll-excerpt-vitaly-friedman" ["to_ping"]=> string(0) "" ["pinged"]=> string(0) "" ["post_modified"]=> string(19) "2017-04-18 11:17:03" ["post_modified_gmt"]=> string(19) "2017-04-18 00:17:03" ["post_content_filtered"]=> string(0) "" ["post_parent"]=> int(0) ["guid"]=> string(37) "https://www.webdirections.org/?p=7259" ["menu_order"]=> int(0) ["post_type"]=> string(4) "post" ["post_mime_type"]=> string(0) "" ["comment_count"]=> string(1) "0" ["filter"]=> string(3) "raw" ["post_category"]=> string(1) "0" } [3]=> object(WP_Post)#950 (25) { ["ID"]=> int(7216) ["post_author"]=> string(1) "3" ["post_date"]=> string(19) "2017-04-13 11:35:57" ["post_date_gmt"]=> string(19) "2017-04-13 00:35:57" ["post_content"]=> string(5357) "Our Scroll magazine Scroll magazine contains considerably more than just profiles of the Respond 17 speakers. We look for different ways to add perspective, context and - ultimately - value to your conference experience. Sketchnotes are a terrific way of summarising conference presentations, using evocative illustrations to emphasise key points and capture some of the flavour of a talk. For Respond 17, we asked one of the best sketchnoters we know to come along and record his impressions. We feel very lucky that Matt Magain said yes. The result of that will be in our post-conference Wrap magazine, but we wanted to introduce you to Matt and his work, so we obtained permission to reproduce a summarised version of an article he wrote for UX Mastery in which he delivered 20 tips for budding sketchnoters. We've extracted a few of Matt's tips here for your reading pleasure. You'll find the rest in Scroll.

Matthew Magain

Sketchnoting 101: How to Create Awesome Visual Notes

Matt Magain will be at Respond 17 in Sydney to sketchnote the conference. In this abridged version of his UX Mastery article, he lists 20 tips for honing your sketchnoting skills.

1. Tool up

While it’s not essential to use an expensive art pen and a trendy moleskine notebook to create beautiful sketchnotes, you don’t want to start off on the back foot. Spend a few bucks on the minimum amount of stationery that gives you the best chance at creating something you’re proud of, but doesn’t weigh you down.

3. Master sketching common objects

It’s useful to have a cache of objects in your repertoire, ready to pull out as needed. In particular, if you attend tech conferences, there are certain words that will crop up time and again (think “ship”, “cloud”, “user”, “link”). Practice visual representations of these words in advance, so you don’t get flustered trying to draw them for the first time in the middle of a talk. Respond 17: Matt Magain

7. Latch onto quotes

Quotes—whether they be key phrases you hear the presenter say, or quotes by other people that the presenter uses in his talk—are often poignant summaries of a topic, and you should listen carefully for them. When you hear one that resonates or beautifully summarises the point being made, jot it down and wrap it in some fancy talking marks or a speech balloon. Respond 17: Matt Magain

10. Curate

It can be tempting to try and capture everything about the presentation. Instead, think of yourself as an art curator whose job it is to sort through the noise, and select a few standout masterpieces to include in your exhibition. Your sketchnote should not serve as a comprehensive reference—it’s a moment in time that reflects the takeaways that you found important.

15. Draw beautiful ampersands

The ampersand is a much-loved character by graphic designers. Depending on the typeface, it can be a simple, understated connector or an elaborate, eccentric statement all of its own. Being able to whip one of these out instead of your usual handwriting can really make a heading stand out. Respond17: Matt Magain

16. Use creative containers

Speech bubbles, thought clouds, sound effect containers, dotted-line rules, double-border rectangles: there are a ton of simple containers that you can add to your sketch to chunk text in a way that is visually interesting. Respond 17: Matt Magain That's the end of this excerpt from Scroll magazine. Come and say hello to Matt and the amazing line-up at Respond 17 in May. Originally published (in considerably more detail) on UX Mastery: http://uxmastery.com/sketchnoting-101-how-to-create-awesome-visual-notes/. Matthew Magain is an author, illustrator, animator, public speaker, small business owner and dad. He is Chief Doodler at Sketch Videos, co-founder of UX Mastery and UXmas, and creator of the children’s book Charlie Weatherburn and the Flying Machine. " ["post_title"]=> string(38) "Respond 17 Scroll Excerpt: Matt Magain" ["post_excerpt"]=> string(0) "" ["post_status"]=> string(7) "publish" ["comment_status"]=> string(4) "open" ["ping_status"]=> string(6) "closed" ["post_password"]=> string(0) "" ["post_name"]=> string(37) "respond-17-scroll-excerpt-matt-magain" ["to_ping"]=> string(0) "" ["pinged"]=> string(0) "" ["post_modified"]=> string(19) "2017-04-13 11:35:57" ["post_modified_gmt"]=> string(19) "2017-04-13 00:35:57" ["post_content_filtered"]=> string(0) "" ["post_parent"]=> int(0) ["guid"]=> string(37) "https://www.webdirections.org/?p=7216" ["menu_order"]=> int(0) ["post_type"]=> string(4) "post" ["post_mime_type"]=> string(0) "" ["comment_count"]=> string(1) "0" ["filter"]=> string(3) "raw" ["post_category"]=> string(1) "0" } [4]=> object(WP_Post)#951 (25) { ["ID"]=> int(7210) ["post_author"]=> string(1) "3" ["post_date"]=> string(19) "2017-04-12 10:00:03" ["post_date_gmt"]=> string(19) "2017-04-11 23:00:03" ["post_content"]=> string(3062) "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.
" ["post_title"]=> string(47) "Video Ristretto: CSS Variables - Michael Mifsud" ["post_excerpt"]=> string(0) "" ["post_status"]=> string(7) "publish" ["comment_status"]=> string(4) "open" ["ping_status"]=> string(6) "closed" ["post_password"]=> string(0) "" ["post_name"]=> string(44) "video-ristretto-css-variables-michael-mifsud" ["to_ping"]=> string(0) "" ["pinged"]=> string(0) "" ["post_modified"]=> string(19) "2017-04-11 21:27:55" ["post_modified_gmt"]=> string(19) "2017-04-11 10:27:55" ["post_content_filtered"]=> string(0) "" ["post_parent"]=> int(0) ["guid"]=> string(37) "https://www.webdirections.org/?p=7210" ["menu_order"]=> int(0) ["post_type"]=> string(4) "post" ["post_mime_type"]=> string(0) "" ["comment_count"]=> string(1) "0" ["filter"]=> string(3) "raw" ["post_category"]=> string(1) "0" } [5]=> object(WP_Post)#952 (25) { ["ID"]=> int(7198) ["post_author"]=> string(1) "3" ["post_date"]=> string(19) "2017-04-11 10:00:07" ["post_date_gmt"]=> string(19) "2017-04-10 23:00:07" ["post_content"]=> string(6847) "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" ["post_title"]=> string(39) "Respond 17 Scroll Excerpt: Mina Markham" ["post_excerpt"]=> string(0) "" ["post_status"]=> string(7) "publish" ["comment_status"]=> string(4) "open" ["ping_status"]=> string(6) "closed" ["post_password"]=> string(0) "" ["post_name"]=> string(38) "respond-17-scroll-excerpt-mina-markham" ["to_ping"]=> string(0) "" ["pinged"]=> string(0) "" ["post_modified"]=> string(19) "2017-04-10 22:23:07" ["post_modified_gmt"]=> string(19) "2017-04-10 11:23:07" ["post_content_filtered"]=> string(0) "" ["post_parent"]=> int(0) ["guid"]=> string(37) "https://www.webdirections.org/?p=7198" ["menu_order"]=> int(0) ["post_type"]=> string(4) "post" ["post_mime_type"]=> string(0) "" ["comment_count"]=> string(1) "0" ["filter"]=> string(3) "raw" ["post_category"]=> string(1) "0" } [6]=> object(WP_Post)#953 (25) { ["ID"]=> int(7164) ["post_author"]=> string(1) "3" ["post_date"]=> string(19) "2017-04-07 12:16:48" ["post_date_gmt"]=> string(19) "2017-04-07 01:16:48" ["post_content"]=> string(2310) "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.
" ["post_title"]=> string(57) "Video of the Week: Art directing web design - Andy Clarke" ["post_excerpt"]=> string(0) "" ["post_status"]=> string(7) "publish" ["comment_status"]=> string(4) "open" ["ping_status"]=> string(6) "closed" ["post_password"]=> string(0) "" ["post_name"]=> string(47) "video-week-art-directing-web-design-andy-clarke" ["to_ping"]=> string(0) "" ["pinged"]=> string(0) "" ["post_modified"]=> string(19) "2017-04-07 12:16:48" ["post_modified_gmt"]=> string(19) "2017-04-07 01:16:48" ["post_content_filtered"]=> string(0) "" ["post_parent"]=> int(0) ["guid"]=> string(37) "https://www.webdirections.org/?p=7164" ["menu_order"]=> int(0) ["post_type"]=> string(4) "post" ["post_mime_type"]=> string(0) "" ["comment_count"]=> string(1) "0" ["filter"]=> string(3) "raw" ["post_category"]=> string(1) "0" } [7]=> object(WP_Post)#954 (25) { ["ID"]=> int(7141) ["post_author"]=> string(1) "3" ["post_date"]=> string(19) "2017-04-07 10:00:22" ["post_date_gmt"]=> string(19) "2017-04-06 23:00:22" ["post_content"]=> string(4219) "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" ["post_title"]=> string(25) "CSS, HTML, SVG at Respond" ["post_excerpt"]=> string(0) "" ["post_status"]=> string(7) "publish" ["comment_status"]=> string(4) "open" ["ping_status"]=> string(6) "closed" ["post_password"]=> string(0) "" ["post_name"]=> string(20) "css-html-svg-respond" ["to_ping"]=> string(0) "" ["pinged"]=> string(0) "" ["post_modified"]=> string(19) "2017-04-06 14:23:38" ["post_modified_gmt"]=> string(19) "2017-04-06 03:23:38" ["post_content_filtered"]=> string(0) "" ["post_parent"]=> int(0) ["guid"]=> string(37) "https://www.webdirections.org/?p=7141" ["menu_order"]=> int(0) ["post_type"]=> string(4) "post" ["post_mime_type"]=> string(0) "" ["comment_count"]=> string(1) "0" ["filter"]=> string(3) "raw" ["post_category"]=> string(1) "0" } [8]=> object(WP_Post)#955 (25) { ["ID"]=> int(7147) ["post_author"]=> string(1) "3" ["post_date"]=> string(19) "2017-04-06 13:26:02" ["post_date_gmt"]=> string(19) "2017-04-06 02:26:02" ["post_content"]=> string(5208) "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." ["post_title"]=> string(40) "Respond 17 Scroll Excerpt: Rachel Nabors" ["post_excerpt"]=> string(0) "" ["post_status"]=> string(7) "publish" ["comment_status"]=> string(4) "open" ["ping_status"]=> string(6) "closed" ["post_password"]=> string(0) "" ["post_name"]=> string(39) "respond-17-scroll-excerpt-rachel-nabors" ["to_ping"]=> string(0) "" ["pinged"]=> string(0) "" ["post_modified"]=> string(19) "2017-04-06 13:26:02" ["post_modified_gmt"]=> string(19) "2017-04-06 02:26:02" ["post_content_filtered"]=> string(0) "" ["post_parent"]=> int(0) ["guid"]=> string(37) "https://www.webdirections.org/?p=7147" ["menu_order"]=> int(0) ["post_type"]=> string(4) "post" ["post_mime_type"]=> string(0) "" ["comment_count"]=> string(1) "0" ["filter"]=> string(3) "raw" ["post_category"]=> string(1) "0" } [9]=> object(WP_Post)#956 (25) { ["ID"]=> int(7142) ["post_author"]=> string(1) "3" ["post_date"]=> string(19) "2017-04-05 12:56:13" ["post_date_gmt"]=> string(19) "2017-04-05 01:56:13" ["post_content"]=> string(3312) "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.
" ["post_title"]=> string(71) "Video Ristretto: Advanced CSS Image Techniques - Jessica Claire Edwards" ["post_excerpt"]=> string(0) "" ["post_status"]=> string(7) "publish" ["comment_status"]=> string(4) "open" ["ping_status"]=> string(6) "closed" ["post_password"]=> string(0) "" ["post_name"]=> string(68) "video-ristretto-advanced-css-image-techniques-jessica-claire-edwards" ["to_ping"]=> string(0) "" ["pinged"]=> string(0) "" ["post_modified"]=> string(19) "2017-04-05 12:56:13" ["post_modified_gmt"]=> string(19) "2017-04-05 01:56:13" ["post_content_filtered"]=> string(0) "" ["post_parent"]=> int(0) ["guid"]=> string(37) "https://www.webdirections.org/?p=7142" ["menu_order"]=> int(0) ["post_type"]=> string(4) "post" ["post_mime_type"]=> string(0) "" ["comment_count"]=> string(1) "0" ["filter"]=> string(3) "raw" ["post_category"]=> string(1) "0" } [10]=> object(WP_Post)#957 (25) { ["ID"]=> int(7134) ["post_author"]=> string(1) "3" ["post_date"]=> string(19) "2017-04-04 14:23:35" ["post_date_gmt"]=> string(19) "2017-04-04 03:23:35" ["post_content"]=> string(8881) "

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/" ["post_title"]=> string(22) "A Word About Workshops" ["post_excerpt"]=> string(0) "" ["post_status"]=> string(7) "publish" ["comment_status"]=> string(4) "open" ["ping_status"]=> string(6) "closed" ["post_password"]=> string(0) "" ["post_name"]=> string(11) "workshops-2" ["to_ping"]=> string(0) "" ["pinged"]=> string(0) "" ["post_modified"]=> string(19) "2017-04-04 14:23:35" ["post_modified_gmt"]=> string(19) "2017-04-04 03:23:35" ["post_content_filtered"]=> string(0) "" ["post_parent"]=> int(0) ["guid"]=> string(37) "https://www.webdirections.org/?p=7134" ["menu_order"]=> int(0) ["post_type"]=> string(4) "post" ["post_mime_type"]=> string(0) "" ["comment_count"]=> string(1) "0" ["filter"]=> string(3) "raw" ["post_category"]=> string(1) "0" } [11]=> object(WP_Post)#958 (25) { ["ID"]=> int(7124) ["post_author"]=> string(1) "3" ["post_date"]=> string(19) "2017-03-29 11:01:42" ["post_date_gmt"]=> string(19) "2017-03-29 00:01:42" ["post_content"]=> string(2647) "Our best Respond 17 Early Bird deals end this Friday. Something that often gets overlooked is how Early Bird prices can add great value to the upper end of ticket prices. For example, a Classic Pass to Respond at regular prices costs $1,199. A Gold Pass bought before 31 March (this Friday), costs $1,299. For that extra $100, you get to attend the Speaker Dinner (the chance to chat informally over a classy meal) AND access to videos of every single conference presentation (only available to other folks by subscription). Think about that while you consider which pricing deal works best for you. Note that there is a second Early Bird - a slightly lesser discount - that holds until Friday 14 April. But to get the absolute best deal for attending Respond 17, register before this Friday 31 March. Respond is an event you won't find anywhere else, bringing together the whole front end team to address the challenge of delivering engaging customer experiences. This year, Respond comes to Sydney (4-5 May), Melbourne (8-9 May) and - for the first time - Brisbane (12 May).   Who's speaking? Mina Markham (Senior UI Engineer, Hillary for America) on design systems Rachel Nabors (Program Manager, Microsoft Edge; W3C) on web animation Vitaly Friedman (Founder, Smashing Magazine) on responsive design Elizabeth Allen (UX Researcher, Spotify) on conversational interactions Cordelia McGee-Tubb (Accessibility Specialist, Dropbox) on accessible web development Plus Rebecca Hendry (Westpac), Michael Taranto (Seek), Adem Cifcioglu (Intopia), Mike Riethmuller, Mandy Michael (Seven West Media), Brett Snaidero (Internetrix), Wayne Thompson (Australian Type Foundry), Mike Sharp, Shefik Bey (Loop11), Laura Summer, Warwick Cox (Crowd Delivery). Respond happens every year, but THIS line-up of speakers on THESE topics is only going to come along this year. We hope we see you and your team at Respond 17. " ["post_title"]=> string(42) "Respond 17 Early Bird Discount Ends Friday" ["post_excerpt"]=> string(0) "" ["post_status"]=> string(7) "publish" ["comment_status"]=> string(4) "open" ["ping_status"]=> string(6) "closed" ["post_password"]=> string(0) "" ["post_name"]=> string(42) "respond-17-early-bird-discount-ends-friday" ["to_ping"]=> string(0) "" ["pinged"]=> string(0) "" ["post_modified"]=> string(19) "2017-03-29 11:01:42" ["post_modified_gmt"]=> string(19) "2017-03-29 00:01:42" ["post_content_filtered"]=> string(0) "" ["post_parent"]=> int(0) ["guid"]=> string(37) "https://www.webdirections.org/?p=7124" ["menu_order"]=> int(0) ["post_type"]=> string(4) "post" ["post_mime_type"]=> string(0) "" ["comment_count"]=> string(1) "0" ["filter"]=> string(3) "raw" ["post_category"]=> string(1) "0" } [12]=> object(WP_Post)#959 (25) { ["ID"]=> int(7033) ["post_author"]=> string(1) "3" ["post_date"]=> string(19) "2017-03-24 12:00:00" ["post_date_gmt"]=> string(19) "2017-03-24 01:00:00" ["post_content"]=> string(5707) "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" ["post_title"]=> string(43) "Plan Your Professional Development for 2017" ["post_excerpt"]=> string(0) "" ["post_status"]=> string(7) "publish" ["comment_status"]=> string(4) "open" ["ping_status"]=> string(6) "closed" ["post_password"]=> string(0) "" ["post_name"]=> string(43) "plan-your-professional-development-for-2017" ["to_ping"]=> string(0) "" ["pinged"]=> string(0) "" ["post_modified"]=> string(19) "2017-03-24 12:16:29" ["post_modified_gmt"]=> string(19) "2017-03-24 01:16:29" ["post_content_filtered"]=> string(0) "" ["post_parent"]=> int(0) ["guid"]=> string(37) "https://www.webdirections.org/?p=7033" ["menu_order"]=> int(0) ["post_type"]=> string(4) "post" ["post_mime_type"]=> string(0) "" ["comment_count"]=> string(1) "0" ["filter"]=> string(3) "raw" ["post_category"]=> string(1) "0" } [13]=> object(WP_Post)#960 (25) { ["ID"]=> int(7094) ["post_author"]=> string(1) "3" ["post_date"]=> string(19) "2017-03-22 13:00:03" ["post_date_gmt"]=> string(19) "2017-03-22 02:00:03" ["post_content"]=> string(5456) "Respond is an event you won't find anywhere else, bringing together as it does the whole front end team to address the challenge of delivering engaging customer experiences. This year, Respond 17 visits Sydney (4-5 May), Melbourne (8-9 May) and for the first time Brisbane (12 May), saving time and travel costs. We've extended Early Bird pricing by a week to 31 March and, as you'll see below, that means some significant discounts. But what is it that makes Respond a must-attend event for you?

1. The Speakers

We bring you the experts who are defining and redefining how we work. This year, Respond features:
  • Mina Markham (Senior UI Engineer, Hillary for America) on design systems
  • Rachel Nabors (Program Manager, Microsoft Edge; W3C) on web animation
  • Vitaly Friedman (Founder, Smashing Magazine) on responsive design
  • Elizabeth Allen (UX Researcher, Spotify) on conversational interactions
  • Cordelia McGee-Tubb (Accessibility Specialist, Dropbox) on accessible web development
  • Plus Rebecca Hendry (Westpac), Michael Taranto (Seek), Adem Cifcioglu (Intopia), Mike Riethmuller, Mandy Michael (Seven West Media), Brett Snaidero (Internetrix), Wayne Thompson (Australian Type Foundry), Mike Sharp, Shefik Bey (Loop11), Laura Summer, Warwick Cox (Crowd Delivery).
show me the Speakers

2. The Presentations

< strong>Respond is the pre-eminent Australian conference for front end design and development. Every year, Web Directions scours the globe to find expert practitioners exploring the areas that are most likely to inform and influence industry developments in the immediate and more distant future.
  • At Respond 15, UK design legend Andy Clarke talked about design creativity in a templated, frameworked world, US RWD pioneer Scott Jehl addressed accessibility in responsive design, and Yesenia Perez-Cruz talked about balancing performance and design issues – all topics that are top of mind for designers in 2017.
  • At Respond 16, we had Ethan Marcotte doing more with less code, Sara Soueidan on SVG and CSS, Jen Simmons on Flexbox and Grid, Karen McGrane on adaptive content and Rachel Ilan Simpson on security – all topics that are preoccupying designers here and now.
  • At Respond 17, the key topics are design systems and languages, UI animation and motion design, layout, conversational UIs, designing bots, accessibility, web components, text and typography, working with data and user experience. Get ready for tomorrow, today.
show me the Schedule

3. What You Get at the Event

  • Comfortable seats with clear sightlines and great acoustics
  • Scroll magazine, in print and digital
  • Delicious, healthy buffet choices for lunch
  • Excellent snacks for morning and afternoon tea
  • The best coffee youll have at any conference, anywhere
  • Free wifi
  • Device charging facilities
  • Connections – with colleagues, peers and speakers (Gold ticket holders even join us for dinner with the speakers)
  • Opening night reception
  • Closing night party
show me Scroll magazine

4. What You Get After the Event

  • Wrap magazine, a digital summary of every single session
  • Access to speaker slides, links and resources
  • Access to presentation videos (for Silver and Gold attendees)
  • Discounts to future Web Directions events
  • Advance invitations to special events
show me Wrap magazine

5. Early Bird Value

With an event like Respond - a two-day or one-day conference with different ways to upgrade the experience by adding workshop attendance, access to post-conference videos and/or the speaker dinner, PLUS a series of possible discounts and season tickets - it’s hard to explain all the permutations in just a paragraph or two. We can say that the most basic ticket for the two-day conference in Sydney or Melbourne with most of the above packed into it can cost you less than $1,000 if you register before 24 March. As an investment in focused, professional development, that's hard to top. We've laid things out on our pricing page so you can decide which combination of options offers you the best value. Respond happens every year, but THIS line-up of speakers on THESE topics is only going to come along this year. We hope we see you and your team at Respond 17. show me the Pricing " ["post_title"]=> string(50) "5 Great Reasons You Should Register for Respond 17" ["post_excerpt"]=> string(0) "" ["post_status"]=> string(7) "publish" ["comment_status"]=> string(4) "open" ["ping_status"]=> string(6) "closed" ["post_password"]=> string(0) "" ["post_name"]=> string(35) "5-great-reasons-register-respond-17" ["to_ping"]=> string(0) "" ["pinged"]=> string(0) "" ["post_modified"]=> string(19) "2017-04-03 12:54:21" ["post_modified_gmt"]=> string(19) "2017-04-03 01:54:21" ["post_content_filtered"]=> string(0) "" ["post_parent"]=> int(0) ["guid"]=> string(37) "https://www.webdirections.org/?p=7094" ["menu_order"]=> int(0) ["post_type"]=> string(4) "post" ["post_mime_type"]=> string(0) "" ["comment_count"]=> string(1) "0" ["filter"]=> string(3) "raw" ["post_category"]=> string(1) "0" } [14]=> object(WP_Post)#1294 (25) { ["ID"]=> int(7041) ["post_author"]=> string(1) "3" ["post_date"]=> string(19) "2017-03-16 10:00:17" ["post_date_gmt"]=> string(19) "2017-03-15 23:00:17" ["post_content"]=> string(7106) "As the excitement builds for our Respond 17 conference (Early Bird closes 24 March), we have another Wrap magazine summary of a presentation from Respond 16. And not just any presentation. Russ Weakley is one of those Australians who has built an enviable global reputation as someone who not only has a comprehensive and detailed understanding of CSS and its role in delivering superior web experiences, he can also convey that understanding to others - which he's done in books, articles and video courses accessed by thousands of people. A particular focus of Russ's work is accessibility, a topic that strikes fear into the hearts of many but which Russ insists can be achieved without tears. This Wrap summary gives you a good idea of the clarity and directness with which Russ approaches the topic.

Building accessible web components without tears

Russ Weakley, Web Designer, Max Design

Russ Weakley

Key points

Many web applications these days are built on top of pre-existing frameworks or code bases and there is little thought to how well these components will work for different assistive devices. A range of common application components can be made accessible - quickly and easily - for all users, including forms, modal windows, drop-down menus, in-page tabs and other commonly used web components. A simple way for a web developer to understand accessibility is to try to navigate a site using only a keyboard. If they cannot perform all tasks without issues, tell which element is in focus at any time or tab around the page in a logical order, then that site has accessibility issues. Fluency or even dependence on libraries and frameworks can lead to developers forgetting core web principles: basic HTML, CSS, accessibility and progressive enhancement. If we want to make our sites available to the widest possible audience, we have to include people with various types of disability, many of whom use assistive devices for input (keyboards, trackpads, head wands, puffers, switches, touch screens, voice activated software) and output (text browsers, screen readers, magnifiers, Braille devices).
"The best time to focus on accessibility is right at the beginning of the development process, when creating the individual components in your pattern library."
Respond 16: Russ Weakley

Takeways

Screen readers often dominate discussion of assistive devices but in fact keyboard only users constitute a bigger group of users (because it includes screen readers), and all types of AT should be considered. WAI-ARIA defines a way to make websites more accessible, especially JavaScript components. We can use specific HTML attributes to define roles, state and properties for HTML elements, and thereby make those elements more meaningful for assistive technology. Dynamic content presents some specific accessibility issues. For example, content that tells a user something in response to a user action may not be conveyed by a screen reader because it has already buffered the page and can’t re-read it, or because it can only focus on one part of the screen and thus doesn’t pick up the added content. The aria-live attribute can be applied to any HTML element to tell screen readers about changed content, with different levels of urgency. Aria-relevant, with its values of additions, removals and text, gives an idea of the type of content that has changed, while role=alert can also help to define how and when the user is alerted. If a screen reader is in “forms” mode (as opposed to “read” mode), it may not announce content that is near but not directly atached to the form controls. Because of this, many users will switch between read and forms mode to make sure they get all the info they need to complete the form. Form validation can present problems for screen readers as error messages may appear after a form control has lost focus. The screen reader may have to go back over the form to find the error message. There are various ways to let assistive technology tell users about form errors. Familiarise yourself with them and use them. Modals can also present problems for AT. A user may find that they can tab outside the modal window while the modal is active, but a screen reader can’t always tell a blind user that a modal has been triggered, let alone whether the user is in or out of the modal window. We can programmatically tell the screen reader how to treat the modal and tell the user what’s going on. In-page tabs and panels also need some work to make sure a user of assistive technology understands what’s going on, what they can do, what they should do and what will happen as a result of their actions. ARIA gives us the programmatic language to do this. Note that the steps you take to achieve this will tend to be useful to all users.
"Web accessibility begins with semantic markup."
Respond 16: Russ Weakley

Caveats

As aria-live=”assertive” is not well supported by browsers, it may be preferable to stick with aria-live=”polite”. Whatever you do, make sure you test: using keyboard only yourself will tell you a lot, use accessibility checking tools, test with screen readers, and conduct formal accessibility audits when needed. It’s important to note that it may not be necessary to do all that is described here. Aim for quick wins that deliver the most accessibility to users of assistive technology. Solve the problems that prevent users from completing actions first and then aim for making things progressively easier. Respond 16: Russ Weakley

Resources

@russmaxdesign website slides

Tweets

Respond 16: Russ Weakley tweets Respond 16: Russ Weakley tweets " ["post_title"]=> string(75) "Respond 16: Building Accessible Web Components Without Tears - Russ Weakley" ["post_excerpt"]=> string(0) "" ["post_status"]=> string(7) "publish" ["comment_status"]=> string(4) "open" ["ping_status"]=> string(6) "closed" ["post_password"]=> string(0) "" ["post_name"]=> string(72) "respond-16-building-accessible-web-components-without-tears-russ-weakley" ["to_ping"]=> string(0) "" ["pinged"]=> string(0) "" ["post_modified"]=> string(19) "2017-03-17 13:48:03" ["post_modified_gmt"]=> string(19) "2017-03-17 02:48:03" ["post_content_filtered"]=> string(0) "" ["post_parent"]=> int(0) ["guid"]=> string(37) "https://www.webdirections.org/?p=7041" ["menu_order"]=> int(0) ["post_type"]=> string(4) "post" ["post_mime_type"]=> string(0) "" ["comment_count"]=> string(1) "0" ["filter"]=> string(3) "raw" ["post_category"]=> string(1) "0" } } ["post_count"]=> int(15) ["current_post"]=> int(-1) ["in_the_loop"]=> bool(false) ["post"]=> object(WP_Post)#947 (25) { ["ID"]=> int(7363) ["post_author"]=> string(1) "3" ["post_date"]=> string(19) "2017-04-28 09:18:59" ["post_date_gmt"]=> string(19) "2017-04-27 22:18:59" ["post_content"]=> string(3346) "Ethan MarcotteJust days away from the start of the 3-city week-long festival of design that is Respond 17 (you're booked in for Sydney, Melbourne or Brisbane, right?) seems an opportune moment to review the presentation delivered at Respond just a year ago by Ethan Marcotte. While this engaging and inspiring talk focuses - naturally - on responsive web design, the principle of what Ethan calls "laziness" can be applied to a whole range of activities. It's all about achieving more by doing less, what is sometimes referred to as "boxing clever". And with that, I'll hand you over to the father of RWD for an hour or so.    

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.
" ["post_title"]=> string(77) "Video of the Week: Laziness in the Time of Responsive Design - Ethan Marcotte" ["post_excerpt"]=> string(0) "" ["post_status"]=> string(7) "publish" ["comment_status"]=> string(4) "open" ["ping_status"]=> string(6) "closed" ["post_password"]=> string(0) "" ["post_name"]=> string(57) "video-week-laziness-time-responsive-design-ethan-marcotte" ["to_ping"]=> string(0) "" ["pinged"]=> string(0) "" ["post_modified"]=> string(19) "2017-04-28 10:23:01" ["post_modified_gmt"]=> string(19) "2017-04-27 23:23:01" ["post_content_filtered"]=> string(0) "" ["post_parent"]=> int(0) ["guid"]=> string(37) "https://www.webdirections.org/?p=7363" ["menu_order"]=> int(0) ["post_type"]=> string(4) "post" ["post_mime_type"]=> string(0) "" ["comment_count"]=> string(1) "0" ["filter"]=> string(3) "raw" ["post_category"]=> string(1) "0" } ["comment_count"]=> int(0) ["current_comment"]=> int(-1) ["found_posts"]=> string(2) "16" ["max_num_pages"]=> float(2) ["max_num_comment_pages"]=> int(0) ["is_single"]=> bool(false) ["is_preview"]=> bool(false) ["is_page"]=> bool(false) ["is_archive"]=> bool(true) ["is_date"]=> bool(false) ["is_year"]=> bool(false) ["is_month"]=> bool(false) ["is_day"]=> bool(false) ["is_time"]=> bool(false) ["is_author"]=> bool(false) ["is_category"]=> bool(false) ["is_tag"]=> bool(true) ["is_tax"]=> bool(false) ["is_search"]=> bool(false) ["is_feed"]=> bool(false) ["is_comment_feed"]=> bool(false) ["is_trackback"]=> bool(false) ["is_home"]=> bool(false) ["is_404"]=> bool(false) ["is_embed"]=> bool(false) ["is_paged"]=> bool(false) ["is_admin"]=> bool(false) ["is_attachment"]=> bool(false) ["is_singular"]=> bool(false) ["is_robots"]=> bool(false) ["is_posts_page"]=> bool(false) ["is_post_type_archive"]=> bool(false) ["query_vars_hash":"WP_Query":private]=> string(32) "78db242af159faea28ecd03c50e21247" ["query_vars_changed":"WP_Query":private]=> bool(false) ["thumbnails_cached"]=> bool(false) ["stopwords":"WP_Query":private]=> NULL ["compat_fields":"WP_Query":private]=> array(2) { [0]=> string(15) "query_vars_hash" [1]=> string(18) "query_vars_changed" } ["compat_methods":"WP_Query":private]=> array(2) { [0]=> string(16) "init_query_flags" [1]=> string(15) "parse_tax_query" } }

Presentations about respond

Podcasts, slides, videos and more

Video of the Week: Laziness in the Time of Responsive Design – Ethan Marcotte

Ethan MarcotteJust days away from the start of the 3-city week-long festival of design that is Respond 17 (you’re booked in for Sydney, Melbourne or Brisbane, right?) seems an opportune moment to review the presentation delivered at Respond just … Read more »

Respond 16: Masterclass – Ethan Marcotte and Karen McGrane

As is often the case, our next major event – Respond 17 – is not only a two-day conference, but also has a third day devoted to a Masterclass workshop with Vitaly Friedman (in Brisbane, we’ll present only the workshop).

Our roster of past Masterclass workshop leaders reads like an album … Read more »

Respond 17 Scroll Excerpt: Vitaly Friedman

Our next extract from the Respond 17 Scroll magazine gives some background to keynote speaker and masterclass workshop leader Vitaly Friedman.

As a regular speaker at web conferences, the Smashing Magazine head honcho is obviously a very familiar figure in our industry, but we wanted to … Read more »

Respond 17 Scroll Excerpt: Matt Magain

Our Scroll magazine Scroll magazine contains considerably more than just profiles of the Respond 17 speakers. We look for different ways to add perspective, context and – ultimately – value to your conference experience.

Sketchnotes are a terrific way of summarising conference presentations, using evocative illustrations to emphasise … Read more »

Video Ristretto: CSS Variables – Michael Mifsud

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 … Read more »

Respond 17 Scroll Excerpt: Mina Markham

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 … Read more »

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

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 … Read more »

CSS, HTML, SVG at Respond

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 … Read more »

Respond 17 Scroll Excerpt: Rachel Nabors

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 … Read more »

Video Ristretto: Advanced CSS Image Techniques – Jessica Claire Edwards

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 … Read more »

A Word About Workshops

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, … Read more »

Respond 17 Early Bird Discount Ends Friday

Our best Respond 17 Early Bird deals end this Friday. Something that often gets overlooked is how Early Bird prices can add great value to the upper end of ticket prices.

For example, a Classic Pass to Respond at regular prices costs $1,199. A Gold Pass bought before 31 March … Read more »

Plan Your Professional Development for 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 … Read more »

5 Great Reasons You Should Register for Respond 17

Respond is an event you won’t find anywhere else, bringing together as it does the whole front end team to address the challenge of delivering engaging customer experiences.

This year, Respond 17 visits Sydney (4-5 May), Melbourne (8-9 May) and for the first time Brisbane (12 May), saving time … Read more »

Respond 16: Building Accessible Web Components Without Tears – Russ Weakley

As the excitement builds for our Respond 17 conference (Early Bird closes 24 March), we have another Wrap magazine summary of a presentation from Respond 16.

And not just any presentation. Russ Weakley is one of those Australians who has built an enviable global reputation as someone who not … Read more »