#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 v...
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 ul...
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 talk...
The temptation here is to adjust   the project workflow to go from                this:Wireframe       Comp           Webs...
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...
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 an...
Style Tiles
Style Tiles are a design deliverable consisting of fonts,  colors and interface elementsthat communicate the essence of   ...
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:           sta...
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 an...
Smartphone use by teenagers            has tripled in 2 years.             - Consumer Reports      In five years, most Afr...
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 pr...
Rule Number 6   Embrace unpredictability.#rwdrules
“The Responsive Web”    manning.com/carver37% off with this code: 13rw37     @Matthew_Carver     matthewcarver.com
New Rules of The Responsive Web
New Rules of The Responsive Web
New Rules of The Responsive Web
New Rules of The Responsive Web
New Rules of The Responsive Web
New Rules of The Responsive Web
New Rules of The Responsive Web
New Rules of The Responsive Web
New Rules of The Responsive Web
New Rules of The Responsive Web
New Rules of The Responsive Web
New Rules of The Responsive Web
New Rules of The Responsive Web
New Rules of The Responsive Web
Upcoming SlideShare
Loading in …5
×

New Rules of The Responsive Web

11,209 views

Published on

Published in: Technology
3 Comments
18 Likes
Statistics
Notes
No Downloads
Views
Total views
11,209
On SlideShare
0
From Embeds
0
Number of Embeds
713
Actions
Shares
0
Downloads
63
Comments
3
Likes
18
Embeds 0
No embeds

No notes for slide

New Rules of The Responsive Web

  1. #rwdrules
  2. About Me• Senior Technologist at Big Spaceship• Author of “The Responsive Web”• Spoke at HTML5.tx 2011
  3. The Responsive Web programming for the user
  4. 4 days - 1,547 Miles
  5. Hipster level: ~25
  6. Hipster level: 99
  7. A technology cancompletely change in a year and a half.
  8. 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.
  9. WorkWork Home Subway / Toilet
  10. CreatingCreating Consuming Consuming
  11. This is a revolutionary change.
  12. Every revolution evaporates andleaves behind only the slime of a new bureaucracy. ~ Franz Kafka
  13. Rule Number 1 Responsive Design Doesn’t End With Squishy#rwdrules
  14. Q: When somebody tells you to“check out this responsive site” what’s the first thing you do? A: Scale the browser
  15. In the infancy of responsive design, sites weren’t as“responsive” as much as they were “squishy”.
  16. Most sites strive to beresponsive by scaling down the layout only, resulting in site bloat.
  17. display:none only hides the content
  18. Variations to consider • Screen size and orientation • Browsers (inc. mobile) • Capabilities • Input types
  19. Variations to consider • Libraries / Frameworks used • Assets Served • Forms used • Button size and placement
  20. Devices released in one month in 2012
  21. Optimize based on capabilities rather than on linear scale.
  22. Linear scale is like Metroid.
  23. The responsive web should be like Skyrim
  24. 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.
  25. Mobile site.
  26. Desktop site.
  27. In Skyrim you can advance your character in a variety of ways and complete quests at will.
  28. Don’t build for this
  29. Start with a core, then ask:“Is anything available that I can use to improve the user’s experience on this site?”
  30. Feature Detection
  31. Rule Number 2 There is no responsive pixie dust.#rwdrules
  32. I eat at restaurants way too much.
  33. Most responses to rule number 1include adding new things to the project, like deliverables and designs.
  34. To avoid unnecessary over complication, we need astreamlined process with new, streamlined deliverables.
  35. Rapid prototypes
  36. 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
  37. The temptation here is to adjust the project workflow to go from this:Wireframe Comp Website
  38. To this:Wireframe Prototype Comp Website
  39. 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.
  40. Foundation
  41. Rule Number 3 Your workflow will change.#rwdrules
  42. Insanity: doing the same thing over and over again and expecting different results. ~ Albert Einstien
  43. Responsive web design requires meaningful deliverables.
  44. 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
  45. Style Tiles
  46. 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
  47. Iterate and communicate withthe client, using style tiles and rapid prototypes to articulate the end product.
  48. Rule Number 4 Your tools will change#rwdrules
  49. In my first apartment, I used one appliance to prepare 100% of my food.
  50. CSS Preprocessors SCSS, SASS, or LESS
  51. Preprocessors can be used tostreamline and organize CSS.
  52. SMACSSScalable and Modular Architecture for CSS
  53. Building scalable and efficientCSS is crucial to optimizing and maintaining responsive sites.
  54. Rule Number 5 The web is responsive by default.#rwdrules
  55. [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
  56. In the responsive web, what you say trumps how you say it.
  57. 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/
  58. 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/
  59. ExpensiveExpensive Affordable Affordable
  60. CreatingCreating Consuming Consuming
  61. LuxuryLuxury Entertainment Emergency
  62. Determine what you have to say, and the format will become obvious.
  63. 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
  64. Rule Number 6 Embrace unpredictability.#rwdrules
  65. “The Responsive Web” manning.com/carver37% off with this code: 13rw37 @Matthew_Carver matthewcarver.com

×