SXSW 2012: The Page is Dead

Jacob Surber
Adobe, Project Manager (HTML Design)

Presentation Description

Responsive web design is changing the definition of a “page,” as it aims to address the growing variety of device form factors and locations where content is consumed. Additionally, as the web evolves, rules and limitations must be better understood in order to create truly unique content. This session will focus on design philosophy and development techniques to create and adapt your content for maximum impact, regardless of where and how it is consumed. Topics will include: • Proper elements for the proper content • Design for context • Adapt your UI and adapt your content • Design with ratios vs. design with pixels • Know the limitations • Designing with limitations • Let the limitations set you free.

Presentation Notes

With the advancement of technology there are so many new/different devices all of which have different screen sizes. So, what are your options when creating a website?

  • Create a mobile website: m.mywebsite.com. But where do we stop? ipad.website.com? ipad.landscape.website.com? iphone.4s.website.com? (Don’t do this)
  • Build a responsive site!

Get your content down first: “Content precedes design. Design in the absence of content is not design, it’s decoration.” – Jeffery Zeidman

Responsive design is more of philosophy than a technique. It is something that defines control differently, and it is a team effort. It’s about knowing your center and how people are going to approach you. You need to have a soft center and have the ability to let go and have a certain level of control.

The New York Times has a poor design as it is not responsive, however The Boston Globe is. Ethan Marcotte worked with The Boston Globe to make this possible. See: Blog post and Book. The design company who worked with The Boston Globe just recently released a blog post about this.

There are three types of grids: fixed, fluid, golden.

  • Fixed isn’t really flexible, but can be good some times. Pelicanfly does a good job with a grid system. They use the method 960 Grid System.
  • Fluid grids are calculated with math: target/context = result. The idea is to take an individual column and measure it out. For instance, if a column on a 960px screen is 60px, then we divide it and get a percentage for just that particular column. Don’t round when you do the math, even if they are crazy long. The List Apart has an example website called The Baker Street Inquirer. In chrome you can view the Developer Tools > Elements, and hover over the elements to see what CSS properties are applied at any given time.
  • Golden Grid is the concept of the Golden Rectangle. Anderson-Wise is an example of this.

Layout is an enhancement. Do all website experiences need to be the same on every single browser? No. Create an experience targeting those you want to target (such as not IE6).

When using Media Query Specs you should care mainly about: width, orientation, -webkit-device-pixel-ratio (iPhone advantage)

  • @media screen (min-width: 1024px) and (max-width: 1220px)

But wait! Break free from pixels, as that just wont scale. “We can get rid of half of the images on the web, because they’re used for styling.” – Hakon Wium Lie, Opera.

Best Practices

  • Start with low res graphics first.
  • Be resolution independent: CSS, SVG, @font-face

Hierarchy

  • How you can convey importance
  • How you structure your DOM
  • It’s important!

The New York Time has over 11 different fonts and faces, and 7 different size column widths. As a consumer this is highly confusing and hard to look over.

As you’re laying out information that you’ve defined, it will start to logically group together in modules. At The Boston Globe they have breaking news, main titles and a body of content, These things still exist on smaller views, they’re just shifted around.

DOM Order

Spark-Box does a good job with structuring the order in which things flow with different sizes. Illy Coffee moves their DOM around based on what device they’re using, and what that device’s user is more likely to want to do.

  • Be task oriented
  • What do you hope your use to do?
  • How long will users be using it?

Flexible Images and Content

The easiest way, but least scalable: img { max-width: 100%; }

A better scalable solution: https://github.com/filamentgroup/Responsive-Images

What W3 is proposing: http://www.w3.org/community/respimg/

Additional Resource

SXSW 2012: How to Remember Anything: A Teach Yourself Guide

Mark Channon
How to Remember Anything, Author
marhchannon.com

Presentation Description

“How to Remember Anything” shows how a radically improved memory can add real value in life and in business and can help build your career. Mark Channon, Actor, Hypnotherapist, Product Manager and author of Teach Yourself How to Remember Anything, will take you on a whirlwind tour of the memory techniques inside How to Remember Anything. Guiding you through a set of key examples on how to remember names, books, presentations and more. Mark was one of the first Grand Masters of Memory in the world and creator of BBC’s Monkhouses Memory Masters.

Presentation Notes

Relaxing makes you concentrate better, so whenever it is you’re in need to remember something make sure you are just that.
Break down words into pictures, as pictures are easier to remember.

  1. Chain Method: you can remember words by chaining them into a story with images, even if the words do not correlate with a logical story. Mark gave an example of this method to everyone, and had someone regurgitate the main points precisely.
  2. Names: This is a multi step method consisting of 4 parts:
    • Prime Yourself: What’s interesting about the person you’re going to talk to? It’s easy to look around you and figure out what is all brown, but if you are only concentrating on what’s brown it’ll be hard to then reiterate what was blue.
    • Listen to their name
    • Create an image and imagine a short story about their name
    • Repeat their name back as you think of the story
  3. Memory Networks: System to correlate items to body parts. For instance, correlate each item from your toes to your head: feet, knees, thighs, butt, stomach, chest, head. This same method can be used to correlate numbers to objects around you. A television could be #1, a speaker could be #36, etc. This same method can also be used to remember passwords.

SXSW 2012: Shit Code: When Good Code Is Betrayed

Rob Tarr
Sparkbox, Software Engineer

Scott Lenger
Beaconfire Consulting, Functional Analyst

#SXshit

Presentation Description

We’ve all been there. You work meticulously to craft lean, efficient, elegant code. Beaming proudly, you hand your little sweetie off to a client, a contractor, a colleague, or even a CMS, but the next time you check in, everything has gone to hell. Or worse – you’re on the receiving end of a long line of shitty code, trying to make sense of deprecated tags, naming collisions, arbitrary plugins, and other code soup.

So what happened? Where did all this cruft come from? And short of hunting down the abusers and beating them with Eric Meyer’s 2lb “CSS: The Definitive Guide”, what can you really do about it?

In this brutally honest session, front-end & back-end coders will unite with project managers to play the role of shrink, surveyor, and sensai. Using real-life examples, we will break down how bad code happens to good people, why it matters, and specific steps you can take to prevent it. Come learn why it’s important to code like the next person to use it is a homicidal maniac who knows where you live.

Presentation Notes

How does this happen?

  • Different standards or conventions
  • Spanning multiple CMS’s/CRM’s
  • Competing libraries
  • Plugins
  • Failure to separate design/data/behavior/content
  • Laziness

Why it matters?

  • Self-satisfaction
  • Delivery
  • Maintenance

What to do about it?

  • Flag Issues in Process
  • Collaborate Across Disciplines
  • Build Rapport
  • Know When to Compromise, and make sure to check yourself

“Most of the evil done in the world is done by people who think they are doing the right thing.” – Richard Beck

There are many failure points when coding between teams: HTML, CSS, front ends, back ends, etc.

External Links

SXSW 2012: Simplify CSS Development with Sass & Compass

Alex Lemanski
Bitfyre, Founder

Presentation Description

Simplify and speed up your CSS development with Sass. Overcome browser differences – particularly with CSS3 – and build grids the right way with Compass. Sass is a CSS meta language that brings more functional programming to the css language and complies to standard browser supported CSS. It adds tools like variables, functions, and mixins, as well as compilation tools for debugging and optimization. Compass builds an additional framework of tools on top of Sass. It adds mixins for almost all the new CSS3 modules to abstract away syntax inconsistencies and browser prefixes. It also enables the development of CSS frameworks *the right way*, using semantic classes instead of presentation oriented classes. Compass has ports Frameworks like Blueprint, YUI, 960.gs, as well as even some Compass only ones like Susy. On top of that, there are also loads of extensions to Compass for everything from CSS3 button generators to more complex sprite and image generators.

Presentation Notes

Slides: http://bit.ly/teamSass

The Basics

  • Variables (font-colors, font-family, etc.). You can set a default variable, but then have an opportunity to change it with the “!default” operator similar to “!important”
  • Nesting selectors: .nav { li { … } … }
  • Parent references with the nesting selectors
  • Nesting statements: background: { color: …; image: …; }
  • Comments (Sass specific) that are stripped out when compiled: // instead of /* … */
  • Loops: @for, @each, @while
  • Mathematical operations

Desktop GUI’s

Command Line

  • Sass itself
  • Sass-convert
  • Vast number of static generators (Middleman, which can also minify your code)
  • Compass

Debugging Tools

  • Generated Line Comments
  • FireSass for Firebug, allows you to see what Sass file a particular element definition is in

Good Practices for CSS

  • Don’t nest more than 4 selectors deep
  • Break things down as much as possible
  • Work from the main area …

Put all of your partial sass files in a “lib” (library) sub directory

Output Configurations

  • :line_comments
  • :debug_info
  • :compressed, :nested, and a couple others

CMS Plugins

What is Compass?

  • Gives you helper functions on top of what Sass already has. For instance, it can auto convert between hsl and rgb.
  • Mixins for CSS3. Generates all of the browser implementations of new tags (-webkit-…, -moz-…, etc).
  • Framework for Building Frameworks.
  • Plugin Architecture for creating Mixins for buttons where you can publish for Ruby and then others can take them and re-use them.

Additional Resources

SXSW 2012: Mad CSS3 Skillz

Estelle Weyl
Standardista.com, UI Engineer

Presentation Description

In this one hour tutorial workshop, you will become skilled in CSS3 selectors, transforms, transitions and animations. We will work through an animation examples, creating different paths, timing and effects, exploring linear gradients opacity, alpha transparency, border-radius, text-shadows, transforms, transitions and mostly animations. The code example will be provided participants can play with the code, going from novice to skilled without heavy note taking.

Presentation Notes

Slides: http://estelle.github.com/sxsw