New Rules of The Responsive WebPresentation Transcript
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.
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?”
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.
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.
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 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