New Rules of The Responsive Web

#rwdrules

About Me

• Senior Technologist at Big Spaceship

• Author of “The Responsive Web”

• Spoke at HTML5.tx 2011

The Responsive Webprogramming for the user

4 days - 1,547 Miles

Hipster level: ~25

Hipster level: 99

A technology can completely change in a

year and a half.

Since then:

• 2 iPhones have been released

• Smart phones have become the norm

• Tablets have grown in both reach and variety

• Responsive web design has become a near ubiquitous buzzword.

Work

Work

Home

Subway / Toilet

Creating

Creating

Consuming

Consuming

This is a revolutionary change.

~ F!anz Kafk"

Every revolution evaporates and leaves behind only the slime of a

new bureaucracy.

~ F!anz Kafk"

#rwdrules

Responsive Design Doesn’t End With Squishy

Rul# Numbe$ 1

Q: When somebody tells you to “check out this responsive site” what’s the first thing you do?

A: Scale the browser

In the infancy of responsive design, sites weren’t as

“responsive” as much as they were “squishy”.

Most sites strive to be responsive by scaling down the

layout only, resulting in site bloat.

display:none only hides the content

Variations to consider

• Browsers (inc. mobile)

• Screen size and orientation

• Capabilities

• Input types

Variations to consider

• Libraries / Frameworks used

• Assets Served

• Forms used

• Button size and placement

Devices released in one month in 2012

Optimize based on capabilities rather than on linear scale.

Linear scale is like Metroid.

The responsive web should be like Skyrim

In Metroid you start with a simple gun and add new weapons, tools, and

abilities as you progress through the game, but ultimately the game follows

a linear path.

Mobile site.

Desktop site.

In Skyrim you can advance your character in a variety of ways and complete quests at will.

Don’t build for this

Start with a core, then ask:“Is anything available that I can

use to improve the user’s experience on this site?”

Feature Detection

#rwdrules

There is no responsive pixie dust.

Rul# Numbe$ 2

I eat at restaurants way too much.

Most responses to rule number 1 include adding new things to the

project, like deliverables and designs.

To avoid unnecessary over complication, we need a

streamlined process with new, streamlined deliverables.

Rapid prototypes

~ Jonathan Smile% “Dive Into Responsive Prototyping With Foundation”

In the next five years, devices will be the name of the game and that’s not just screen

size or browser we’re talking about. Interfaces will change, input will change, the way we use the web will change. We

need to start gearing up for that right now.

http://alistapart.com/article/dive-into-responsive-prototyping-with-foundation

The temptation here is to adjust the project workflow to go from

this:

Wireframe Comp Website

To this:

Wireframe

Comp Website

Prototype

This is just adding a layer of complication to the process. It

does little to solve our root problem, which is the need to

articulate fluid layout.

Foundation

#rwdrules

Your workflow will change.

Rul# Numbe$ 3

~ Albert Einstien

Insanity: doing the same thing over and over again and

expecting different results.

Responsive web design requires meaningful deliverables.

~ Mar& Boulton

The aim is to remove The Big Reveal: [...] the thing designers do where they squirrel away for a few days and then come back and go ‘ta da, look what I made!’.

That’s just so risky

http://www.markboulton.co.uk/journal/responsive-summit-workflow

Style Tiles

~ Samanth" Warren'tyletil.es

Style Tiles are a design deliverable consisting of fonts, colors and interface elements

that communicate the essence of a visual brand for the web.

Iterate and communicate with the client, using style tiles and rapid prototypes to articulate

the end product.

#rwdrules

Your tools will change

Rul# Numbe$ 4

In my first apartment, I used one appliance to prepare 100% of my

food.

CSS Preprocessors SCSS, SASS, or LESS

Preprocessors can be used to streamline and organize CSS.

SMACSSScalable and Modular Architecture for CSS

Building scalable and efficient CSS is crucial to optimizing and maintaining responsive sites.

#rwdrules

The web is responsive by default.

Rul# Numbe$ 5

~ Si$ Tim Berners-Le#

[The web] should be accessible from any kind of hardware that

can connect to the internet: stationary or mobile, small

screen or large.

http://www.scientificamerican.com/article.cfm?id=long-live-the-web

In the responsive web, what you say trumps how you say it.

~ Zach B!and, S!. Directo$ of Technolog% at NPR

Having an API has allowed us at NPR.org to be highly efficient at

building new platforms such as iPhone, Android, iPad and Chrome app because we only have to build the presentation logic – the ‘data’ is already ready to go.

http://blog.programmableweb.com/2011/04/18/what-we-did-wrong-npr-improves-its-api-architecture/

Smartphone use by teenagers has tripled in 2 years.- Consumer Reports

In five years, most Africans will have smartphones

~ TechCrunch

http://news.consumerreports.org/electronics/2011/07/teenage-smart-phone-use-triples-in-two-years.html

http://techcrunch.com/2012/06/09/feature-phones-are-not-the-future/

Expensive

Expensive

Affordable

Affordable

Creating

Creating

Consuming

Consuming

Luxury

Luxury

Entertainment

Emergency

Determine what you have to say, and the format will become

obvious.

~ Paul Robert Lloyd

As the web matures, we should acknowledge and embrace its constraints—and the aesthetic those constraints can produce. When we do, we might discover that the true web aesthetic is

hardly visual at all.

http://alistapart.com/article/the-web-aesthetic

#rwdrules

Embrace unpredictability.

Rul# Numbe$ 6

@Matthew_Carver

“The Responsive Web”manning.com/carver

37% off with this code: 13rw37

matthewcarver.com