Webvisions Portland 2013: RWD Prototyping, Advanced CSS, & Makers

| July 10, 2013

This year’s WebVisions Portland was absolutely fantastic! Often, one may hope for one or two gems in a sea of average or sales oriented presentations at a conference. WebVision 2013 was stacked full of informative, on point, and totally relevant presentations. There were three primary themes being covered throughout the program: Responsive Prototyping, Advanced CSS, & the ‘Maker Culture.’

Responsive Prototyping

Responsive Prototyping is a hot topic in the world of designing and developing websites today. The big question being, where do static (typically PSD) designs have a place in a responsive & flexible world? This is a new and continuing debate that has been the topic of many articles. There were several speakers at WebVisions who brought their valuable insights into this topic.

Modern Style Guides for a Better Tomorrow

by Shay Howe

Shay Howe provided a clear, direct and concise overview on the use of style guides in a responsive design workflow. Style guides can be an alternative or an addition to static designs as deliverables in a web project. They provide designers the ability to focus on design components rather than static ‘screen views.’ Styleguides can then be used in the client approval process and enhances collaboration and freedom in the development process.

Links:

Quotes:

  • “Style guides – provide what’s needed, not what’s wanted.”
  • “If you’re not designing responsively, you’re not designing responsibly.”

Death to Pixel Perfect Design! Prototyping for the Real World

by Jason Cranford Teague

Jason Cranford Teague also suggests that PSD’s and static designs will become increasingly less utilized. He makes a great case as to why ‘pixel’ perfect design lacks relevance in today’s design process and offers some workflow alternatives that involve dynamic prototyping. These tools include many of the familiar frameworks available today (i.e. Twitter Bootstrap). That being said, Jason explains we will soon see a variety of new tools to assist with this process including Adobe’s Edge Reflow and Proty.

Links:

Quotes:

  • “Static prototypes don’t utilize real world technologies & user experiences.”
  • “UX designer’s job doesn’t stop after the page loads… It’s really only just begun.”
  • “Dynamic Prototyping will be the UX skill of the future.”
  • “Multiple comps for multiple screens is messy.”
  • “Start with responsive wireframes.”
  • “Clients understand better if they can see a responsive design working.”
  • “Challenge with a lot of prototyping tools: included styles/options *can* limit the creative process.”
  • “Edge Animate and Edge Reflow by Adobe might be good prototyping options.”

One Web to Rule Them All! The Real Responsive Process

by Steve Fisher

Steve Fisher gave a peek into the strategy, process and implementation of designing and developing high quality and successful responsive websites. He stressed the critical importance of strategy (and how it is often overlooked) when designing for the web. Steve also focused on the importance of utilizing dynamic design tools and deliverables. In his presentation, he discussed the benefits of designing in the browser as well as producing responsive style tiles as client and developer deliverables. His outstanding presentation not only provided wisdom and insights, it included links to some killer tools and resources accompanied by explanations.

Links:

Quotes:

  • “Put the user first.”
  • “Research, analyze, determine trends, develop personas – develop a content strategy.”
  • “Develop a Content Strategy: A plan for how you will create, deliver, maintain, and govern your content.”
  • “Essential to RWD is content strategy, considering relationships and priority. Content modeling.”
  • “Don’t pre-plan breakpoints. Breakpoints are where the design actually ‘breaks.'”
  • “Create a page table. Establish priority. Chunked content, not giant blobs.”
  • “IxD – all wirefames – Pencil sketch > directly to the browser.
  • “Visual Design: Not art. About creating a response.”
  • “Use Responsive StyleTiles. Paint and fabric swatches of the internet.”
  • “Develop responsive StyleGuides.”
  • “HTML build: Make prototype code useable in production.”
  • “You can not possibly test in all devices.”
  • “Seems so simple, yet oft overlooked: Ask ‘Why?’ in your decision making processes.”

Mobile Web Design Anti-Patterns

by Dave Shea

Dave Shea’s presentation provided an exceptional array of examples of what not to do in mobile and responsive web design patterns. Additionally, Dave discussed why these patterns are ineffective and offered examples of what works. Clearly, this topic is relevant and important as the anti-patterns are found all over the web.

Links:

Quotes:

  • “Credit to WTFMobileWeb – Examples of what not to do.”
  • “The existing stack problem creates barrier b/n ‘now’ and mobile / responsive for some companies.”
  • “Why should you build a great mobile experience? User Engagement!”
  • “Mobile sales typically jump at lest 2x when an optimized mobile experience is first deployed.”
  • “Door Slam – Site advertises their app upon landing – espeically with a modal or full page – DO NOT USE.”
  • “Secondary urls + redirects = bad for SEO, redirect delays, sharing.”
  • “Option: have components live in separate urls + conditionally load.”
  • “Same content should live on ONE URL.
  • “Simulators only test rendering. Use actual devices when possible.”
  • “The design process needs to move out of photoshop A LOT earlier + get into code as early as possible.”
  • “Tweak your designs in the web inspector – not in photoshop.”
  • “Don’t design in the browser. Decide in the browser. ~ Dan Mall.”
  • “Use discretion when providing @2x assets.”
  • “Yes. The fold does matter in mobile > *subtle* and important conversion items.”
  • “There are a ton anachronous icons, but they work because they are identifiable and serve their purpose.”
  • “Mouse interactions (:hover) often not applicable. Not only on mobile.”
  • “Stay away from html <select> elements for navigation.”
  • “High density images and JS are main culprits for bulk in page size.”
  • “ALWAYS optimize images.”
  • “Combine your assets and limit HTTP requests.”

Your Responsive Tool Box

By Jacob Surber

Jacob Surber, Sr. Project Manager for Edge Reflow at Adobe, gave an outstanding presentation on dynamic prototyping and design tools with a focus on Adobe’s Edge Reflow. Ordinarily, when a conference speaker represents a product of which he or she is discussing, you can count on a sub-par, sales pitch oriented presentation. Not in this case. Jacob did an exceptional job describing and defining today’s web design workflows, the particular challenges associated with static designs and the need for dynamic and responsive prototyping tools. He stressed the importance of embracing the designer and their particular skill sets. Additionally, he clarified designers often are not developers who have the ability do design within the browser or other code editing tools. Therefore, Jacob concludes there needs to be tools that create a bridge between the designer and the developer. These tools will allow the designer to produce dynamic and responsive prototypes without requiring them to learn an entirely new process (i.e. html + css). One of these tools is Adobe’s new Edge Reflow. He didn’t spend much time on the product itself as there is a currently a free trial.

Links:

 

Quotes:

  • “RWD tenants > Content Focused + Clean Design – Hierarchical Information – (mobile first).”
  • “RWD is Web Design.”
  • Repurposing Photoshop for the Web by Dan Rose. “
  • “Chrome’s responsive inspector is great in combination with ish from Brad Frost. “
  • “Layout is design. What happen when the screen changes? The design should change too.”
  • Content Choreography by Trent Walton.”
  • “Just say NO to WYSIWYG.”
  • “Overwhelming % of designers are not willing to work in the browser … today.”
  • “Uhm. Yeah. SVG creation kind of critical.”
  • “With new tools > There should be honesty in design > Viable and usable deliverables.”
  • “Style guides are the new deliverables.”
  • Style guide examples.”
  • “Tools: Divshot, Easel, Froont, Webvlow, Typecast, Adobe Reflow.”
  • “Edge Reflow: We took a browser, and built an application on top of it.”
  • “HTML design surface + flexible grid system + intelligent web layout + design & typography = Adobe Reflow.”
  • “Edge Reflow has a Media Query Manager built in.”
  • “Edge Reflow is not a production HTML tool, it is a RWD HTML comp tool.”
  • TopCoat.”
  • “You can not write code in Edge Reflow.”
  • “There is a live connection b/n Photoshop and Edge Reflow.”
  • “Edge Reflow will be used to express intent > not the final dev product.”
  • “Day one was a day of workshops highlighted by advanced CSS seminars.”

Advanced CSS

Although there were fewer technical presentations than expected at WebVisions Portland 2013, those focused on Advanced CSS were world class.

CSS3 User Interface Design

by Dave McFarland

Dave McFarland’s presentation was one of the workshops held the first day of the conference. He covered the basics of CSS3, provided all attendees with a comprehensive CSS3 toolbox with live demonstrations and sandboxes. He continued with a demonstration and instruction on the benefits of using CSS preprocessors – in particular SASS. Additionally, he included in-depth demonstrations on transitions and animations. Great stuff!

Links:

Implementing Layouts with CSS3

by Chris David Mills

Chris David Mills, Developer Relations Manager at Opera and bonafide rocker, took us on a css journey in another day-one workshop. He began with a comprehensive overview of CSS as it pertains to responsive design, layouts, and images. He provided working examples of varying options and techniques. Chris followed this up with a super deep dive into flexbox, multi-column layouts, css regions, new viewport units, and exclusions. Although many of these CSS features are yet to be fully supported, Chris provided an exceptional explanations, demonstrations and take-home files. Amazing!

Links:

Creating Animated Music Videos with CSS3 and HTML5

by Rachel Nabors

Absolutely, without question, one of the highlights of WebVisions 2013 Portland was Rachel Nabors’ presentation. Wow! Using CSS3 and HTML5, Rachel walked us through the steps on how to make an animated music video. The techniques and processes she used weren’t unfamiliar. How she used them was mind blowing. It wasn’t about creating some logo or slider effect. This was an experience. Please take the time to look at her slides and the finished product below. You will be glad you did!

Links:

Your CSS is a Mess

by Jonathan Snook

Jonathan, author of SMACSS, provided a clear and well defined baseline for writing clean, lean & well organized CSS. He focused on three pillars of SMACSS – Categorization, Naming Convention, and Decoupling HTML & CSS.  Of course, he also provided a great explanation and examples on the use of modules, sub-modules, and sub-components in CSS.

Links:

Quotes:

  • “Have your HTML and CSS do one thing, and one thing only.”
  • “Naming convention in CSS clarifies intent.”
  • “Use classes over ID’s – don’t use a grenade to dig a hole when a shovel will do.”
  • “AVOID !important in your CSS.”
  • “Use class prefix to definie javascript dependencies – .js-btn-active.”
  • “Pick a CSS naming convention that works for you and stick with it.”
  • “Use child selectors when pertinent, please.”
  • “Apply a class when the HTML won’t be predictable, or make the HTML predictable.”
  • “Don’t code CSS for the page, code it for the system.”
  • Responsive Deliverables by Dave Rupert.”

The ‘Maker Culture’

Making Makers: New Tools and Ideas that are Fueling a Movement

by Mark Frauenfelder

Although there were several presentations involving ‘makers ‘and the ‘maker culture,’ the clear highlight was the keynote by maker aficionado Mark Frauenfelder. Mark walked us through the history of the maker culture and discussed the makers of today and tomorrow. He showed us how technology has had an impact and an influence on the maker culture. Additionally, he explained how the maker culture is growing and potentially coming to your home soon (if it isn’t already) with things like Arduino, and 3d printers.

Links:

Quotes:

Conclusion

WebVisions Portland 2013 was a hit! Although all presentations were not discussed in this article, it is clear the conference delivered pertinent, valuable, useable, and inspiring content. As these topics and themes indicate, we are clearly in a thriving, evolving and exciting industry. That being said, it should be noted this article can in no way replace the experience and information received from the conference itself. It will be interesting to watch how RWD Prototyping, Advanced CSS and the ‘Maker Culture’ evolve over the coming months. Will these still be hot topics next year, or will it be something else? Whatever it is, it will no doubt be exciting!

Tags: , , , , ,

Category: Marketing Events, Portland Marketing Events, tmmBosley, tmmCharlie, tmmJill, tmmKelly, TMMPDX Tech Trends, tmmSabrina

Comments are closed.

http://www.tmmpdx.com/wp-content/uploads/2013/07/punchy-150x150.gif Joe Snell Marketing EventsPortland Marketing EventstmmBosleytmmCharlietmmJilltmmKellyTMMPDX Tech TrendstmmSabrina ,,,,,

This year’s WebVisions Portland was absolutely fantastic! Often, one may hope for one or two gems in a sea of average or sales oriented presentations at a conference. WebVision 2013 was stacked full of informative, on point, and totally relevant presentations. There were three primary themes being covered throughout the program: Responsive Prototyping, Advanced CSS, & the ‘Maker Culture.’

Responsive Prototyping

Responsive Prototyping is a hot topic in the world of designing and developing websites today. The big question being, where do static (typically PSD) designs have a place in a responsive & flexible world? This is a new and continuing debate that has been the topic of many articles. There were several speakers at WebVisions who brought their valuable insights into this topic.

Modern Style Guides for a Better Tomorrow

by Shay Howe

Shay Howe provided a clear, direct and concise overview on the use of style guides in a responsive design workflow. Style guides can be an alternative or an addition to static designs as deliverables in a web project. They provide designers the ability to focus on design components rather than static ‘screen views.’ Styleguides can then be used in the client approval process and enhances collaboration and freedom in the development process.

Links:

Quotes:

  • “Style guides – provide what’s needed, not what’s wanted.”
  • “If you’re not designing responsively, you’re not designing responsibly.”

Death to Pixel Perfect Design! Prototyping for the Real World

by Jason Cranford Teague

Jason Cranford Teague also suggests that PSD’s and static designs will become increasingly less utilized. He makes a great case as to why ‘pixel’ perfect design lacks relevance in today’s design process and offers some workflow alternatives that involve dynamic prototyping. These tools include many of the familiar frameworks available today (i.e. Twitter Bootstrap). That being said, Jason explains we will soon see a variety of new tools to assist with this process including Adobe’s Edge Reflow and Proty.

Links:

Quotes:

  • “Static prototypes don’t utilize real world technologies & user experiences.”
  • “UX designer’s job doesn’t stop after the page loads… It’s really only just begun.”
  • “Dynamic Prototyping will be the UX skill of the future.”
  • “Multiple comps for multiple screens is messy.”
  • “Start with responsive wireframes.”
  • “Clients understand better if they can see a responsive design working.”
  • “Challenge with a lot of prototyping tools: included styles/options *can* limit the creative process.”
  • “Edge Animate and Edge Reflow by Adobe might be good prototyping options.”

One Web to Rule Them All! The Real Responsive Process

by Steve Fisher

Steve Fisher gave a peek into the strategy, process and implementation of designing and developing high quality and successful responsive websites. He stressed the critical importance of strategy (and how it is often overlooked) when designing for the web. Steve also focused on the importance of utilizing dynamic design tools and deliverables. In his presentation, he discussed the benefits of designing in the browser as well as producing responsive style tiles as client and developer deliverables. His outstanding presentation not only provided wisdom and insights, it included links to some killer tools and resources accompanied by explanations.

Links:

Quotes:

  • “Put the user first.”
  • “Research, analyze, determine trends, develop personas – develop a content strategy.”
  • “Develop a Content Strategy: A plan for how you will create, deliver, maintain, and govern your content.”
  • “Essential to RWD is content strategy, considering relationships and priority. Content modeling.”
  • “Don’t pre-plan breakpoints. Breakpoints are where the design actually ‘breaks.'”
  • “Create a page table. Establish priority. Chunked content, not giant blobs.”
  • “IxD – all wirefames – Pencil sketch > directly to the browser.
  • “Visual Design: Not art. About creating a response.”
  • “Use Responsive StyleTiles. Paint and fabric swatches of the internet.”
  • “Develop responsive StyleGuides.”
  • “HTML build: Make prototype code useable in production.”
  • “You can not possibly test in all devices.”
  • “Seems so simple, yet oft overlooked: Ask ‘Why?’ in your decision making processes.”

Mobile Web Design Anti-Patterns

by Dave Shea

Dave Shea’s presentation provided an exceptional array of examples of what not to do in mobile and responsive web design patterns. Additionally, Dave discussed why these patterns are ineffective and offered examples of what works. Clearly, this topic is relevant and important as the anti-patterns are found all over the web.

Links:

Quotes:

  • “Credit to WTFMobileWeb – Examples of what not to do.”
  • “The existing stack problem creates barrier b/n ‘now’ and mobile / responsive for some companies.”
  • “Why should you build a great mobile experience? User Engagement!”
  • “Mobile sales typically jump at lest 2x when an optimized mobile experience is first deployed.”
  • “Door Slam – Site advertises their app upon landing – espeically with a modal or full page – DO NOT USE.”
  • “Secondary urls + redirects = bad for SEO, redirect delays, sharing.”
  • “Option: have components live in separate urls + conditionally load.”
  • “Same content should live on ONE URL.
  • “Simulators only test rendering. Use actual devices when possible.”
  • “The design process needs to move out of photoshop A LOT earlier + get into code as early as possible.”
  • “Tweak your designs in the web inspector – not in photoshop.”
  • “Don’t design in the browser. Decide in the browser. ~ Dan Mall.”
  • “Use discretion when providing @2x assets.”
  • “Yes. The fold does matter in mobile > *subtle* and important conversion items.”
  • “There are a ton anachronous icons, but they work because they are identifiable and serve their purpose.”
  • “Mouse interactions (:hover) often not applicable. Not only on mobile.”
  • “Stay away from html <select> elements for navigation.”
  • “High density images and JS are main culprits for bulk in page size.”
  • “ALWAYS optimize images.”
  • “Combine your assets and limit HTTP requests.”

Your Responsive Tool Box

By Jacob Surber

Jacob Surber, Sr. Project Manager for Edge Reflow at Adobe, gave an outstanding presentation on dynamic prototyping and design tools with a focus on Adobe’s Edge Reflow. Ordinarily, when a conference speaker represents a product of which he or she is discussing, you can count on a sub-par, sales pitch oriented presentation. Not in this case. Jacob did an exceptional job describing and defining today’s web design workflows, the particular challenges associated with static designs and the need for dynamic and responsive prototyping tools. He stressed the importance of embracing the designer and their particular skill sets. Additionally, he clarified designers often are not developers who have the ability do design within the browser or other code editing tools. Therefore, Jacob concludes there needs to be tools that create a bridge between the designer and the developer. These tools will allow the designer to produce dynamic and responsive prototypes without requiring them to learn an entirely new process (i.e. html + css). One of these tools is Adobe’s new Edge Reflow. He didn’t spend much time on the product itself as there is a currently a free trial.

Links:

 

Quotes:

  • “RWD tenants > Content Focused + Clean Design – Hierarchical Information – (mobile first).”
  • “RWD is Web Design.”
  • Repurposing Photoshop for the Web by Dan Rose. “
  • “Chrome’s responsive inspector is great in combination with ish from Brad Frost. “
  • “Layout is design. What happen when the screen changes? The design should change too.”
  • Content Choreography by Trent Walton.”
  • “Just say NO to WYSIWYG.”
  • “Overwhelming % of designers are not willing to work in the browser … today.”
  • “Uhm. Yeah. SVG creation kind of critical.”
  • “With new tools > There should be honesty in design > Viable and usable deliverables.”
  • “Style guides are the new deliverables.”
  • Style guide examples.”
  • “Tools: Divshot, Easel, Froont, Webvlow, Typecast, Adobe Reflow.”
  • “Edge Reflow: We took a browser, and built an application on top of it.”
  • “HTML design surface + flexible grid system + intelligent web layout + design & typography = Adobe Reflow.”
  • “Edge Reflow has a Media Query Manager built in.”
  • “Edge Reflow is not a production HTML tool, it is a RWD HTML comp tool.”
  • TopCoat.”
  • “You can not write code in Edge Reflow.”
  • “There is a live connection b/n Photoshop and Edge Reflow.”
  • “Edge Reflow will be used to express intent > not the final dev product.”
  • “Day one was a day of workshops highlighted by advanced CSS seminars.”

Advanced CSS

Although there were fewer technical presentations than expected at WebVisions Portland 2013, those focused on Advanced CSS were world class.

CSS3 User Interface Design

by Dave McFarland

Dave McFarland’s presentation was one of the workshops held the first day of the conference. He covered the basics of CSS3, provided all attendees with a comprehensive CSS3 toolbox with live demonstrations and sandboxes. He continued with a demonstration and instruction on the benefits of using CSS preprocessors – in particular SASS. Additionally, he included in-depth demonstrations on transitions and animations. Great stuff!

Links:

Implementing Layouts with CSS3

by Chris David Mills

Chris David Mills, Developer Relations Manager at Opera and bonafide rocker, took us on a css journey in another day-one workshop. He began with a comprehensive overview of CSS as it pertains to responsive design, layouts, and images. He provided working examples of varying options and techniques. Chris followed this up with a super deep dive into flexbox, multi-column layouts, css regions, new viewport units, and exclusions. Although many of these CSS features are yet to be fully supported, Chris provided an exceptional explanations, demonstrations and take-home files. Amazing!

Links:

Creating Animated Music Videos with CSS3 and HTML5

by Rachel Nabors

Absolutely, without question, one of the highlights of WebVisions 2013 Portland was Rachel Nabors’ presentation. Wow! Using CSS3 and HTML5, Rachel walked us through the steps on how to make an animated music video. The techniques and processes she used weren’t unfamiliar. How she used them was mind blowing. It wasn’t about creating some logo or slider effect. This was an experience. Please take the time to look at her slides and the finished product below. You will be glad you did!

Links:

Your CSS is a Mess

by Jonathan Snook

Jonathan, author of SMACSS, provided a clear and well defined baseline for writing clean, lean & well organized CSS. He focused on three pillars of SMACSS – Categorization, Naming Convention, and Decoupling HTML & CSS.  Of course, he also provided a great explanation and examples on the use of modules, sub-modules, and sub-components in CSS.

Links:

Quotes:

  • “Have your HTML and CSS do one thing, and one thing only.”
  • “Naming convention in CSS clarifies intent.”
  • “Use classes over ID’s – don’t use a grenade to dig a hole when a shovel will do.”
  • “AVOID !important in your CSS.”
  • “Use class prefix to definie javascript dependencies – .js-btn-active.”
  • “Pick a CSS naming convention that works for you and stick with it.”
  • “Use child selectors when pertinent, please.”
  • “Apply a class when the HTML won’t be predictable, or make the HTML predictable.”
  • “Don’t code CSS for the page, code it for the system.”
  • Responsive Deliverables by Dave Rupert.”

The ‘Maker Culture’

Making Makers: New Tools and Ideas that are Fueling a Movement

by Mark Frauenfelder

Although there were several presentations involving ‘makers ‘and the ‘maker culture,’ the clear highlight was the keynote by maker aficionado Mark Frauenfelder. Mark walked us through the history of the maker culture and discussed the makers of today and tomorrow. He showed us how technology has had an impact and an influence on the maker culture. Additionally, he explained how the maker culture is growing and potentially coming to your home soon (if it isn’t already) with things like Arduino, and 3d printers.

Links:

Quotes:

Conclusion

WebVisions Portland 2013 was a hit! Although all presentations were not discussed in this article, it is clear the conference delivered pertinent, valuable, useable, and inspiring content. As these topics and themes indicate, we are clearly in a thriving, evolving and exciting industry. That being said, it should be noted this article can in no way replace the experience and information received from the conference itself. It will be interesting to watch how RWD Prototyping, Advanced CSS and the ‘Maker Culture’ evolve over the coming months. Will these still be hot topics next year, or will it be something else? Whatever it is, it will no doubt be exciting!