CSS Dev Conf: A Review

CSS Dev Conference in New Orleans was motivating, sparking excitement for not only using new tools in our workflow but also for new ways of thinking.

Much of what can be done to better a project and make it more efficient happens at the beginning — well before a single line of code is written.

So what did we learn? Here are my notes from a few of the presentations I attended:

Opening Keynote by Rebecca Murphey

• Learn to be permanently new.
• What are your responsibilities in this thing you do?
1. Study
2. Ask
3. Do
• Make sure you have all the information you need before continuing forward.
• Learn as much as you can while minimizing the risk to the project
• Check your assumptions
• When conditions change, have tactics to reorient yourself and prevent a wreck
• Narrow down the simplest test case. Simplify your code to where it still fails, then ask questions
• The four 'Cs'
1. Climb: Get a better view of the situation and asses
2. Confess: Ditch the ego and be humble. Ask for help.
3. Communicate: When you're vulnerable, accept the burden of your failure and get assistance.
4. Comply: Circle back. Even when you get to the end, know when to start over if there is an issue and the goals aren't being met. You can't land a plane with an elephant in the runway.
• The fourth 'C' may require you to have more experience in the field or industry.

"Design the Code, Not Pixel-Perfect Comps" by Katie Kovalcin

• Bill Bernbach was an 1940s adman and founder of Doyle Dane and Bernbach who challenged the traditional silo process of the time where individuals would do their part for an ad, then pass it off.
• Invented the idea of "creative teams" – aka collaborative workflow. Used this process for campaigns such as "Think Small" for Volkswagon.
• Static comps do not equal coded page templates
• Why do we make the same site three times (wireframes, mock ups, coded site)?
• Everyone (from designers to developers) need to expand their skillets.
• More realistic expectations can be designed in the browser. Enter "Responsive Deliverables" by Dave Rupert (April 2, 2013).
• Everyone needs to be included from Day One. Create goals with your designer, developer, project manager, front-end man — whoever is going to be assigned to the project.
• Set deliverables with the client from the start as well for budgeting. 
• Deliverables include functionality and customizations based on goals of the project.
• Educate the client by explaining what to expect from the project and when. Also define vocabulary and terms that will be used throughout the process to ensure everyone is on the same page.
• Define what you would like the client do give feedback on. Design? Code? Interactions?
• Establish a design direction (this is usually static) to develop an understanding of the UI elements the client is responding to.
• Code a module style guide. Create a system.
• When designing a full back (this will also be static), creative a homepage in desktop view and an interior page in a tablet or smartphone view to understand how UI elements will translate.
• Provide static deliverables to the client in the browser. Mix some CSS with your comp to set expectations.
• Respond to the client's design feedback with code. Build out the visuals for small interactions, like drop-down menus.
• Designers should perfect their design alongside developers.
• Design iterations are not bugs! However, you can catch them early in a collaborative process.
• Build and docent module code.
• You don't necessarily design in the browser. You decide in the browser.

"Modern Layouts: Getting Out of Our Ruts" by Jen Simmons

• For a long time, designers have been told that the web is not print. Now, it's time to pull back on that thinking.
• Graphic design has centuries of history. Use that to influence web design layout.
• Translate to the web. Do not transfer to the web.
• Unlike print design, the web works best as a vertical scroll, not in columns.
• The sidebar is the best place to hide content. We've been trained to never look at the sidebar.
• A subtle difference can make a huge impact.
• Opera Mini is a legit mobile browser used on cheap phones worldwide.

"CSS, Accessibility, and You" by Derek Featherstone

• The principle of proximity is perhaps the most important component to good design.
• Multi-column layouts make usability extremely challenging for people with low vision impairments.
• Accessibility is not just a problem solved by code. A lot about accessibility has to do with design.
• Don't tailor accessibility just for the blind or visually impaired.
• How affording is your design to someone who can't read (or even doesn't speak English)?
• Accessibility covers hearing, mobile and dexterity, and cognitive disabilities.
• Animations and funky parallax effects can actually cause someone with vestibular issues literal, physical harm. Liken someone with vestibular issues to having a camera with the image stabilization turned off.
• More about that here: http://simplyaccessible.com/article/balance-awareness
• Three types of relationships in a web page design — all are needed for accessibly:
1. Explicit (a label for an input field)
2. Implicit (associations based on proximity)
3. Content-based (related words and alt text for image replacement)
• Screen reader compatible does not equal accessible!
• CSS background images are overused.
• What affordances in your design are reliant on background images?
• You may design for :hover but don't forget about :focus! Sighted keyboard users need what's known as a "high visibility focus indicator" which you likely already have for :hover effects.
• Just because something isn't visible doesn't mean it's not there. User display: none and aria-hidden="true" to prevent page elements from truly being actionable.
• Consider allowing users to turn animation and motion effects on or off, like a play/pause button for carousel image sliders.

"Animation Story Telling with HTML5 and CSS3" by Rachel Nabors

• Sites cannot work on everything. Not everyone cares. Target your audience.
• Use JPEGmini to reduce your image file size without loss of quality.
• Use ImageAlpha for PNG 24 images to reduce file size.
• Need a loading screen for image-heavy or animation-laden pages? With JavaScript, use $(window).load(); to delay your page from being displayed until only after all images have loaded.
• You can prevent extra HTTP requests if you use a background image for an element and use display: none on that element's parent.
• Parallax looks cool, but it makes the browser work really hard to render the effect. Killer for performance.
• Designers want to use animations to make the web more interactive, but parallax is not the answer.
• Try using jQuery Waypoints instead, a plugin that allows you to execute a function when a user scrolls to a page element.
• There is a difference between "click and scroll" and "tap and swipe".
• Don't be afraid to share what you're doing online, and don't be afraid of looking like an idiot. People will help you make you're project better.
• Remember that people tell stories. Every story has many authors.
• You're not alone when working on a project. Even if you're solo, someone built the tools you're using to help you.