Environments for Humans brings together some of the Web's most notable experts in CSS and Sass for an all-new, three-day online conference, the CSS Summit 2015! Bring the experts to your desktop July 7-9, 2015 from 9AM to 5PM (CT).
Don't miss this great event and purchase your tickets now!
SVG Track \\ July 7, 2015 \\ 9AM to 6PM CT
(Schedule subject to change)
Designing with Progressive Enhancement 9am CT
by Jason Garber, Co-author of Foundation HTML5 with CSS3
Twelve years ago, Steve Champeon coined the term "progressive enhancement," giving a name to the idea that we should build websites with a base level of functionality and apply layers of enhancement depending on a browser's capabilities.
Today, we use and access the Web more frequently from a variety of devices on wildly variable connections.
What impact has this had on a development process like progressive enhancement? What's changed? What's stayed the same?
In this presentation, Jason will give a brief history of progressive enhancement, discuss its relevance in 2015, and offer a framework for applying the principles of progressive enhancement to the entire design process.
About Jason Garber
Jason Garber is a web developer, author, musician, community organizer, and photographer living in Washington, DC. When not building accessible, progressively enhanced websites, he organizes Refresh DC, plays guitar in The Orchid, and collects vinyl records. He?s the co-author of Foundation HTML5 with CSS3, published by Friends of ED in 2012 and writes regularly at sixtwothree.org.×
SVG for Everyday Use 10am CT
by Wendee Fiorillo, Front-end Engineer
If you are not using SVGs, what are you waiting for? They are small, crisp, sassy bits of fun for your next project. This talk will take the mysteries out is creating and working with SVGs and provide practical uses.
- Creating SVGs: Software or Code?
- How to use
- Manipulating SVGs
- Optimizing your SVG files
- SVG and accessibility
- Implementation examples: practical and kickass
About Wendee Fiorillo
Wendee is a seasoned front-end engineer who works in the design spectrum of front-end development and has a passion for accessibility. With an illustration and screen-printing background, Wendee enjoys the challenges of translating a design for the web, is a typographic nerd, and can bend a bezier with panache. She is also an artist who grew up on the Mississippi River and loves tomatoes but not ketchup.×
HTML Tables to SVG Pie Charts 11am CT
by Chris Scott, Founder of Factmint
Chris Scott walks though his company, Factmint's, approach to building data visualizations through progressive enhancement to HTML tables. By example, creating an interactive pie chart using SVG and CSS.
About Chris Scott
Creating SVG Polygons 12pm CT
by Dennis Gaebel, Design Technologist at Gray Ghost Visuals
In this session, Dennis discusses how to create polygon SVG effects and look at some additional examples of this type of animation in the wild.
In this session, Dennis answers the following questions:
- What is GSAP and the best way to get started with the tool.
- How to make Polygon art.
- How SVG animations work.
- What a tween is and how it works.
- How varying eases can alter the feel of a sequence.
- What compositing failures still linger for SVG.
About Dennis Gaebel
Design Technologist, Writer and Open Source maker at Gray Ghost Visuals. Generally I'm an explorer of the web and write on topics such as Animation, Interface and Interaction Design, SVG and Development Workflow. By night I build out pattern based components for clients using the principles of atomic design. A graduate of Columbia College Chicago with a B.A. in Photography. Previously an aerial photographer now turned web developer who made his first site with WordPress. Currently a freelance writer at Tuts+, SitePoint and Web Design Weekly.×
Fun with the Animation API 2pm CT
by Dan Wilson, Web and mobile developer
We've loved CSS animations for a few years now, with their broad support and ability to latch onto hardware acceleration. Now the Web Animations API is coming--and already polyfilled!--so how does it improve on what came before it?
- What is the Web Animations API and why was it even proposed?
- How does it compare to CSS keyframe animations?
- How does it add more flexibility?
- Player controls
- Dynamic nature
- We'll close by looking at code and exploring fancy examples
About Dan Wilson
Dan is a web and mobile developer from Austin, TX. While he has experience with the full web stack, front end work is what he enjoys most and where he spends most of his time.
He has worked with major media companies, credit unions, travel agencies, health providers, and more to provide new services across devices. From small, progressively enhanced websites to enterprise-scale responsive web apps, Dan loves seeing a web that can truly be enjoyed by anyone regardless of how he or she accesses it.×
SVG Sprites for Animation 3pm CT
by Sarah Drasner, Senior UX Engineer at Trulia
In the age of multiple screen resolutions, Scalable Vector Graphics are a powerful thing. An SVG sprite, with the reduction of HTTP requests, becomes more powerful still.
What does this mean in terms of animation? In this session, you’ll learn a few different ways that SVG sprites can cater to your users as well as your performance budget, such as:
- Creating a complex animation that adjust based on the context of the viewport
- Standing on the shoulders of animation giants of days past by using an SVG sprite like a traditional hand-drawn animation
- Options for automating sprite creation for animation
- Good fallbacks for mobile and progressive enhancement
- Creating seamless parallax backgrounds with an SVG sprite
About Sarah Drasner
Sarah Drasner a Senior UX Engineer at Trulia (Zillow Group). Formerly she was Senior Interaction Designer at Fauna, Inc., a company founded by former Lead Engineers from Twitter. She is also the former Head of Design and Front-End Development at Basho, creators of Riak. At Basho, she increased lead generation by 75% through design improvements and managed all branding and visual communication.×
Content-out Layout with Flexbox 4pm CT
by Chris Sauve, Front-end Developer at Shopify
This talk will focus on how Flexbox can be used to create layouts that do not require arbitrary widths or breakpoints to reflow or reorganize their content, but instead, that manage changes to the layout based exclusively on the size of the content and the space available to the component. Using some simple Flexbox properties and patterns, we’ll learn how to create structure for components that depends, not on the size of the viewport, but on the space available to the component itself.
Here’s some of the knowledge I’d love for attendees to take away from this talk:
- The basics of the Flexbox layout model, including how Flexbox resizes and arranges content vertically and horizontally.
- When Flexbox is appropriate to use, and when it’s not.
- Some patterns, such as flexible children with a min-width and a parent that allows wrapping, that allow layouts to work regardless of what context they are in.
About Chris Sauve
With some of his free time, Chris also loves contributing back to the community. He’s built a number of popular open-source tools, including bigfoot, a tool for automatically creating responsive footnote popovers, and a soon-to-be-released (and very cool) automated pattern library generator.×
Interactive CSS in Email 5pm CT
by Mark Robbins, Email Developer at RebelMail
Email is often overlooked as lacking in support for modern CSS techniques. Although that is true for some email clients, over half of marketing email sent are opened on modern webkit based email clients.
- CSS animation
- Click events
- Interactive image galleries
- Interactive games
- Multi page layout
About Mark Robbins
Mark is at the forefront of modern email development, finding many hacks and fixes for the ever changing email clients including, responsive email in Gmail, CSS triangles, SVG fallback, Yahoo alignment and CSS targeting for over 50 different email clients. He also created the concepts of “SLIFF email design” and “Punched Card Coding”.×
Sass Track \\ July 8, 2015 \\ 9AM to 5PM CT
(Schedule subject to change)
The Next Steps in RWD 9am CT
by Justin Avery, Curator of RWD Weekly List
Responsive design sounds simple enough, but in practice it can have you banging your head against the wall. I conducted a poll with the readers on RWD Weekly to find out what was causing the biggest headaches.
We will look through the 6 most common issues and techniques on how you can get started or flip to expert mode.
- Responsive Images
- Improving Performance
- Responsive Typography
- Progressive Enhancement
About Justin Avery
Web developer, technical consultant, wireframer and recently spend lots of time researching responsive design.×
Gulping Your Broccoli 10am CT
by Alex Jegtnes, Web Developer
In a short period of time, websites have boomed in complexity and scope, and many developers turn to build tools to manage some of the complexity involved.
However, there's a lot more to build tools than minifying your CSS--learn how to easily take advantage of advanced optimisations--whether you run a five-page marketing site or a complex back-end powered web application!
During this sesion, Alex covers the following:
- Sync the state of your site across 20 different devices for seamless browser testing
- Automatically generate responsive images
- Cut the compilation time of your massive Sass project by 75%
- Inject CSS into your site every time it changes without a browser refresh
- Extract, inline, and serve your critical path CSS in the head for a noticeable performance increase
About Alex Jegtnes
Alex is a web developer who pined from the Norwegian fjords to settle down in Bristol, UK.
When building websites, he loves to make sure they're scalable, accessible, performant, and doesn't want to make the next person maintaining his code brutally murder him with an axe. When not building websites, you can find him at the nearest pub with the most cats in it.×
Classifying Class Names 11am CT
by Ethan Muller, Web Developer at Sparkbox
Naming stuff is arguably the hardest part of writing HTML & CSS. Let’s talk about what we can do to tame the unpredictability of the future and make our code more resilient. We’ll cover:
- Eliminating analysis paralysis
- Formulating maintainable class names
- Categorization of class names
- Class name semantics
About Ethan Muller
Being a developer with a design background, Ethan has a fondness for both beautiful code and smart design.
Ethan spends most of his days writing maintainable frontend code to delight users, clients, and fellow developers alike. He spends his other days making music, playing video games, and doodling.×
Writing Modular CSS with Sass 12pm CT
by Guil Hernandez, Development teacher at Treehouse
CSS needs be reusable, scalable and adaptable to different use cases.
When writing modular CSS, our goal should be to get to a point where modifying or re-arranging anything about the structure will not break the front-end.
In this session, Guil will go over how to use many of the best practices and principles of modular CSS architecture with Sass. You’ll learn how a modular approach with Sass can boost your front-end workflow and cut down on maintenance, including:
- How to write code that scales, no matter how big the project
- Writing code others can easily read and maintain
- Overview of the patterns of BEM (Block Element Modifier) and SMACSS (Scalable and Modular Architecture for CSS)
- Creating CSS components that do not rely on context
- Learn mixins and functions for writing modular code
About Guil Hernandez
Guil is a front-end design and development teacher at Treehouse. He's also co-organizer of @sflsass and writes for sassbreak.com, a simple blog about Sass.×
Sass Map Magic 2pm CT
by Eric Suzanne, Developer at OddBird
Maps are a powerful data type in Sass -- perfect for managing color and icon palettes, framework configuration, data storage, and more. We’ll find ways to integrate maps into any project before we push them to their limits.
- Basics: create, read, manage, and merge maps
- Organization: name-spacing your variables with maps
- Tooling: creating your own site config and toolkit with functions & maps
- Potential problems: handling self-reference within a map
- Mania: creating your own "natural language" syntax
About Eric Suzanne
Eric M Suzanne creates web software with OddBird, soundscapes with Teacup Gorilla, wordscapes with [WriteyWrite], and performance art with Vicious Trap or the Denver Poets? Theatre. Formerly Artistic Director of New World Arts & Technical Director of The LIDA Project, Eric is the author of Riding SideSaddle*, and The Post-Obsolete Book. She?s an avid open-source contributor ? organizer of SassHack Denver, core developer on Compass, and creator of Susy and True.×
Designing Web Systems (Not Pages) 3pm CT
by Sam Richard, UI Architect at IBM Watson
The old PSD to HTML workflow doesn't stand up to the complexities of responsive web design and the multi device web. Pictures aren't able to articulate all of the variables and variances that we need to design for.
Instead, we should get into browser early, patterns to support our content instead of pages, from a semantic and accessible baseline for everyone, enhancing up to our ideal user experience.
These are the systems of design that we should be aiming for and will make what we design more valuable for longer.
About Sam Richard
Sam Richard is the Senior Front End Developer for NBCUniversal’s Publisher team where he waxes philosophical about Sass+Compass, Responsive Web Design, Drupal, Photography, and, on occasion, bacon. He also makes all of the above, occasionally dipped in chocolate He organizes the New York Responsive Web Design meetup and co-organizes the New York Sass meetup and has spoken at a number of local, national, and international camps and conferences. He also maintains a number of open source projects to make designing in browser and build responsive sites easier.×
The (Far) Future of CSS 4pm CT
by Tab Atkins, Web Standards Hacker at GoogleSession information forthcoming.
About Tab Atkins
Tab Atkins Jr. wears many hats. Working for Google on the Chrome browser as a Web Standards Hacker, he also is a member of the CSS Working Group and several others, and contributes to even more working groups in the W3C.×
Adv Track \\ July 9, 2015 \\ 9AM to 5PM CT
(Schedule subject to change)
Sass for Fun 9am CT
by Una Kravets, Front-end Designer at IBM Design
By this point, you probably realize that Sass is an extremely powerful tool for writing DRY, modular code. I'm not going to be talking about the nuances of Sass optimizations and structure. Instead, I'm going to be talking about what got me into using Sass in the first place--it's just a lot of fun.
About Una Kravets
I'm a front end designer, creating software prototypes at IBM Design, Austin. My goal is to make people smile through interactive experiences. I'm an avid Tweeter @una, founded the Sassy DC and ATX Sass Meetups, draw sometimes, and play with code a lot. I'm a DC girl at heart and have previously interned at some amazing places like Viget, nclud, and nvite, but look forward to my next adventure in Texas!×
CSS & Sass Color 10am CT
by Clarissa Peterson, Author of Learning Responsive Web Design
Color is one of the first things we learn how to do in CSS -- and yet many of us don't ever go further than typing hex numbers handed to us by a designer. But getting colors to appear on a screen is just the beginning.
Discover the secrets behind hex color values, and how to use simple math to adjust color attributes like saturation and brightness. Find out why colors look different on different devices, and what you can do about it. Learn how to adjust colors with media queries to make sure your colors look their best on any screen size. Find out how user context may affect the appropriate colors for a website.
And finally, learn how you can make this whole color thing a lot less complicated by using a CSS preprocessor like Sass to manage your color choices and create color variations automatically.
About Clarissa Peterson
Clarissa Peterson is a UX designer and developer, specializing in building responsive websites and training organizations in responsive design workflow. She frequently speaks on responsive design and mobile content strategy.×
CSS Workflows from the Ground Up 11am CT
by Jonathan Snook, Web Design and Development Specialist
Between frameworks, preprocessors, and package managers, getting a web project off the ground seems to require a lot of tools. Have the days of opening up a single CSS file in a text editor disappeared?
This session will look at workflows that can help us work quickly and easily to build a performant and scalable site.
About Jonathan Snook
Styleguide-driven Development 12pm CT
by Chris Coleman, Sr. Web Developer at Science Magazine
As a previously print-focused publication, our web sites were historically implemented by contractors and vendors, without consistent design stewardship. A large, content-driven site with decades of articles spread across multiple platforms presents maintainability challenges for a small team.
In this session, attendees will learn:
- How we avoid “design drift” by using canonical styles directly in our applications.
- How we save time and money by removing Sass and CSS from projects and using Pattern Lab as a project dependency.
- How this approach keeps internal and external developers happy
- How this approach powers an expanding network of websites spread across several platforms.
- Pattern Lab
- Continuous integration Jenkins
- CMS integration with Wordpress and Drupal
About Chris Coleman
Chris has been building for the web since the Geocities days, and he liked it so much that he never stopped doing it.
Chris is a senior web developer at the American Association for the Advancement of Science, the world’s largest general scientific society and publisher the Science family of peer-reviewed journals. He is currently leading the development of a major responsive redesign project. Chris brings modern tooling and workflows to his projects, focusing on maintainability, reusability and performance.
Chris has also done front-end development at LivingSocial, Advance Internet, and EightShapes, and naturally he’s done plenty of freelance projects. Chris doesn’t have any free time, but if he did, he’d probably just spend it building more web sites.×
Making Template Site Systems 2pm CT
by Jess Lissy, Front-End Developer at Adobe
How to expedite and scale development using Sass; build multiple websites using a set of base styles and variable sheets.
In this session, Lissy covers:
- What is a CCN?
- How do we build a CCN?
- Working with APIs
- Foundation of base styles and using a core library
- Using a Variables Sheet
- Leveraging partials, mixins, variables, and functions
About Jess LissyInformation coming soon. ×
A Designers Guide to AngularJS 3pm CT
by Kevin Lamping, Front-end Engineer at Four Kitchens
How can designers take best advantage of Angular without having to learn everything there is to know about directives, controllers, views and this thing called transclusion?
In this talk, we’ll cover everything a designer needs to know in order to control the HTML/CSS side of an Angular app, including:
- How do views work?
- How is server data accessed?
- What are directives?
- What is “transclusion”?
- What are filters?
About Kevin Lamping
Kevin Lamping is a Front-end Engineer at Four Kitchens. He also helps organize Hill Country JS, a front-end meetup in San Antonio. In his free-time, when he's not playing with his kids, Kevin dabbles in scale model building, tabletop gaming, piano and gardening.×
Using AngularJS for Data Visualisations 4pm CT
by Nick Moreton, Web designer and WordPress developer
Often we jump straight to a 3rd party library to visualise our data, but often these come with a learning curve, or opinionated style. It always struck me that with its data-binding, and the ability to use variables directly in our markup, that Angular could be a great fit for visualising data - with the added bonus that we have full control of the style and appearance.
In this session, Nick looks at:
- Angular as a data store
- Filters for data design
- Using variables in styles
- Using variables in SVG
- Stats dashboard with Angular
About Nick Moreton
New Media lecturer at Birmingham City University. Web consultant. Front end developer. Angular explorer. WordPress butcher.×
About the CSS Summit 2015
Whether it's the implementation of the new techniques available in CSS3, mobile concerns, pre-processor workflows or the ever-growing list of available fonts and how to use them, Web designers and developers will get up-to-speed with the help of these internationally recognized speakers and educators.
Why attend the online conference?
- Attending a conference online means no travel hassle!
- Bring the experts live to your desktop!
- Time spent on the road is better spent instead in the office or with family, friends!
- Sessions are developed to dive deeper into the material!
- Ask questions directly to the speakers!
- Can't make it the day of the conference? Watch the recordings whenever you want!
Can't make it the day of the conference? Recordings are part of registration, so you can watch the recordings whenever you want!
Within five business days after the event, we will send you information on how to view recorded sessions.
This conference was a load of fun. I loved the instant feedback from the speakers and the atmosphere.
I love these online conferences. It's convenient and you can still learn a lot from the comfort of your home or at work.
An absolutely fantastic event. Well done—will definitely be back for more!
I can honestly say I've learned more attending E4H's virtual summits than I've learned attending real life conferences.
Next Event →
After this event, join us for our Accessibility Summit 2015, the 6th annual online, live accessibility conference.
HOW IT WORKS
Once you are registered, you will receive a follow-up email to confirm your reservation. Later on, as the event draws near, you will receive a more detailed message, with the full schedule and other helpful information to help you take full advantage of your conference-going experience and plan your day.
On the day of the conference, you will receive an email invitation about 45 minutes before everything starts. Click on the enclosed link to sign in and enter the virtual meeting space. Once you are signed in, you'll be able to see and hear the presentations as they happen, ask questions as needed and chat with the other attendees if you like!
Technical Specifications: to attend The Summit, you will need a modern web browser and a recent version of the Adobe Flash Player. Follow this link to run our system diagnostic (opens in a new window). It will let you know right away which plug-ins, if any, you will need to update before the event.