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 Web programming for the user

4 days - 1,547 Miles

Hipster level: ~25

Hipster level: 99

A technology cancompletely 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.

WorkWork Home Subway / Toilet

CreatingCreating Consuming Consuming

This is a revolutionary change.

Every revolution evaporates andleaves behind only the slime of a new bureaucracy. ~ Franz Kafka

Rule Number 1 Responsive Design Doesn’t End With Squishy#rwdrules

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 beresponsive by scaling down the layout only, resulting in site bloat.

display:none only hides the content

Variations to consider • Screen size and orientation • Browsers (inc. mobile) • 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 thegame, 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

Rule Number 2 There is no responsive pixie dust.#rwdrules

I eat at restaurants way too much.

Most responses to rule number 1include adding new things to the project, like deliverables and designs.

To avoid unnecessary over complication, we need astreamlined process with new, streamlined deliverables.

Rapid prototypes

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. ~ Jonathan Smiley “Dive Into Responsive Prototyping With Foundation”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 Prototype Comp Website

This is just adding a layer ofcomplication to the process. It does little to solve our root problem, which is the need to articulate fluid layout.

Foundation

Rule Number 3 Your workflow will change.#rwdrules

Insanity: doing the same thing over and over again and expecting different results. ~ Albert Einstien

Responsive web design requires meaningful deliverables.

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 ~ Mark Boultonhttp://www.markboulton.co.uk/journal/responsive- summit-workflow

Style Tiles

Style Tiles are a design deliverable consisting of fonts, colors and interface elementsthat communicate the essence of a visual brand for the web. ~ Samantha Warren styletil.es

Iterate and communicate withthe client, using style tiles and rapid prototypes to articulate the end product.

Rule Number 4 Your tools will change#rwdrules

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

CSS Preprocessors SCSS, SASS, or LESS

Preprocessors can be used tostreamline and organize CSS.

SMACSSScalable and Modular Architecture for CSS

Building scalable and efficientCSS is crucial to optimizing and maintaining responsive sites.

Rule Number 5 The web is responsive by default.#rwdrules

[The web] should be accessible from any kind of hardware that can connect to the internet: stationary or mobile, small screen or large. ~ Sir Tim Berners-Leehttp://www.scientificamerican.com/article.cfm?id=long- live-the-web

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

Having an API has allowed us at NPR.org to be highly efficient atbuilding new platforms such as iPhone,Android, iPad and Chrome app becausewe only have to build the presentationlogic – the ‘data’ is already ready to go. ~ Zach Brand, Sr. Director of Technology at NPRhttp://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 ~ TechCrunchhttp://news.consumerreports.org/electronics/2011/07/ teenage-smart-phone-use-triples-in-two-years.htmlhttp://techcrunch.com/2012/06/09/feature-phones-are- not-the-future/

ExpensiveExpensive Affordable Affordable

CreatingCreating Consuming Consuming

LuxuryLuxury Entertainment Emergency

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

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. ~ Paul Robert Lloydhttp://alistapart.com/article/the-web-aesthetic

Rule Number 6 Embrace unpredictability.#rwdrules

“The Responsive Web” manning.com/carver37% off with this code: 13rw37 @Matthew_Carver matthewcarver.com

http://teamsiems.com	231
http://tintook.tk	68
https://twitter.com	40
http://eventifier.co	34
http://lanyrd.com	21
http://light.mindtalk.com	16
http://inglouriousrasters.wordpress.com	16
http://norahlovesmakeup.wordpress.com	3
http://www.mindtalk.com	3
http://www.twylah.com	1
http://tobe.us	1
https://www.rebelmouse.com	1
http://www.tintook.5gbfree.com	1
http://feeds.feedburner.com	1

New Rules of The Responsive Web

by Matt Carver on Feb 02, 2013

Accessibility

Categories

Upload Details

Usage Rights

14 Embeds 437

Statistics

New Rules of The Responsive Web Presentation Transcript