• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
New Rules of The Responsive Web

New Rules of The Responsive Web






Total Views
Views on SlideShare
Embed Views



14 Embeds 666

http://teamsiems.com 420
http://tintook.tk 68
https://twitter.com 45
http://lanyrd.com 35
http://eventifier.co 34
http://inglouriousrasters.wordpress.com 26
http://light.mindtalk.com 16
http://www.mindtalk.com 14
http://norahlovesmakeup.wordpress.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



Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.


13 of 3 previous next Post a comment

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

    New Rules of The Responsive Web New Rules of The Responsive Web Presentation Transcript

    • #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