Upgrade to Pro — share decks privately, control downloads, hide ads and more …

RWD IRL

RWD IRL

My talk for Artifact Conference 2014 — Austin

Trent Walton

May 06, 2014
Tweet

More Decks by Trent Walton

Other Decks in Design

Transcript

  1. ! —John Allsopp, A Dao of Web Design, 2000 It

    is the nature of the web to be flexible, and it should be our role as designers and developers to embrace this flexibility, and produce pages which, by being flexible, are accessible to all.
  2. 1. Hostile browsers 2. Tiny screens 3. Slow connection speeds

    4. Touch inputs (no uni-taskers) DEVICE-AGNOSTIC
  3. WEBFONTS “Mini uses the fonts present on the device it

    runs on.” ! “Opera Mini will only use one family of font per page, and setting font-family will have no effect.”
  4. ! —Google, The New Multi-screen World 90% [of users] use

    multiple screens sequentially to accomplish a task over time.
  5. ! —Karen McGrane, Your Content, Now Mobile, 2012 It is

    your mission to get your content out, on whichever platform, in whichever format your audience wants to consume it. Your users get to decide how, when, and where they want to read your content. It is your challenge and your responsibility to deliver a good experience to them.
  6. If a piece of content doesn’t fit into a mobile

    experience, what qualifies it for the desktop? ! —Anyone from Paravel in a room full of pissed off people
  7. ! —Tim Kadlec, Fast Enough, 2014 With anything added to

    a page, you need to be able to answer the question of “What value does this provide?” and in turn be able to determine if the value outweighs the pain.
  8. 1. Organization structure 2. Content 3. Process / deliverables 4.

    Tools 5. Measures of success CHANGE IS HARD
  9. It’s not browsers, devices, or a lack of tools that

    keeps a site from launching successfully.
  10. It’s not browsers, devices, or a lack of tools that

    keeps a site from launching successfully. It’s us.
  11. 1. Reorganize 2. Improve our relationships 3. Learn new things

    4. Focus on the browser WHAT CAN WE DO?
  12. • Team not fully utilized • Iteration is slow •

    Morale drops (tension rises) • Final product diminished
  13. ! Stephen Caver, Why Developers Need to Learn Design, 2014

    Nothing is more toxic to a project than developers and designers seeing each other as rivals. —
  14. ! —Mark Otto, Fatten up those T's Being T-shaped means

    you can shift yourself and provide value at just about any stage or type of project—like sketching, wireframing, visual design, and code.
  15. 1. Reorganize 2. Improve our relationships 3. Learn new things

    4. Focus on the browser WHAT CAN WE DO?
  16. ! —Dave Rupert, Responsive Deliverables, 2013 These living code samples

    are self- documenting style guides that extend to accommodate a client’s needs as well as the needs of the ever-evolving multi-device web.
  17. 1. Explore via sketching & photoshop 2. Prototype in code

    3. Test, discuss, iterate INCORPORATION
  18. 1. Explore via sketching & photoshop 2. Prototype in code

    3. Test, discuss, iterate 4. Incorporate into Pattern Lab INCORPORATION
  19. 1. Explore via sketching & photoshop 2. Prototype in code

    3. Test, discuss, iterate 4. Incorporate into Pattern Lab 5. Deploy to site INCORPORATION
  20. ! —Jeff Veen, I Don’t Care About Accessibility, 2004 …I

    end up delivering solutions to my clients that are far less complex to implement, are much easier to maintain, cost exponentially less to serve, work on multiple browsers and devices, do way better in the search engine lottery, and — of course — are accessible to everyone … everyone … using the Web today. And try to argue with the business value of that.
  21. MOBILE FIRST RESOLUTION INDEPENDENCE DESIGN IN THE BROWSER STYLE PROTOTYPE

    AUTOMATION PROJECT HUBS STYLE TILES ELEMENT COLLAGE LESS DEVICE AGNOSTIC ATOMIC DESIGN CONTENT PARITY SASS PHOTOSHOP CONTENT CHOREOGRAPHY WIREFRAME
  22. EDUCATION CAMARADERIE HANDOFF DOCUMENTATION BUSINESS GOALS ACCOUNTABILITY TIMELINES SIGN-OFF BUDGET

    MORALE RESPECT COMMUNICATION HAPPINESS ORGANIZATIONAL POLITICS RESEARCH APPROVAL