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

Posted in SXSW 2012.

Leave a Reply

Your email address will not be published. Required fields are marked *