$30 off During Our Annual Pro Sale. View Details »

Responsive Principles (WebExpo)

Paul Robert Lloyd
September 19, 2015

Responsive Principles (WebExpo)

Responsive web design has engendered a wider conversation about how we build products that accommodate an increasing breadth of connected devices. This talk will suggest a framework within which we can model this continuing discussion, and outline the principles needed for our work to better respond to a rapidly changing world.

Paul Robert Lloyd

September 19, 2015
Tweet

More Decks by Paul Robert Lloyd

Other Decks in Design

Transcript

  1. r Software, like all technologies, is inherently political… code inevitably

    reflects the choices, biases, and desires of its creators. “ Jamais Cascio wfs.org/node/840
  2. r Technology is neither good nor bad;
 nor is it

    neutral. “ Kranzberg’s First Law of Technology en.wikipedia.org/wiki/Melvin_Kranzberg
  3. r A framework not about
 execution, but about
 philosophy and

    quality. “ Ethan Marcotte: Laziness in the Time of Responsive Design vimeo.com/channels/cssday/106869929
  4. r Design principles are short, insightful phrases that act as

    guiding lights and support the development of great product experiences. Design principles enable you to be true to your users and true to your strategy over the long term. “ Kate Rutter: Making Design Principles Stick adaptivepath.org/ideas/essays/archives/001123.php
  5. r The primary design principle underlying the Web’s usefulness and

    growth is universality… it should be accessible from any kind of hardware that can connect
 to the Internet: stationary or
 mobile, small screen or large. “ Tim Berners-Lee: Long Live the Web scientificamerican.com/article/long-live-the-web/
  6. Three principles that address the nature of the medium, the

    needs of its users and the desires of those that build for it, us.
  7. Users r The web is accessed by a broad spectrum

    of individuals, expressed by the devices they use.
  8. r The Verge, as experienced over an average 3G connection

    webpagetest.org/result/150915_C3_1D4N/
  9. Universal Design ncsu.edu/ncsu/design/cud/about_ud/udprinciplestext.htm 1. Equitable Use 2. Flexibility in Use

    3. Simple and Intuitive Use 4. Perceptible Information 5. Tolerance for Error 6. Low Physical Effort 7. Size and Space for Approach and Use
  10. r When all users’ needs are taken into consideration in

    the initial design process, the result is a product that can be used by the broadest spectrum of users. “ OXO: Universal Design oxo.com/UniversalDesign.aspx
  11. <img src="charles-bridge.jpg" alt="Charles Bridge in Prague"/> Equivalent textual alternative for

    an image resource: Fallback content for browsers that don’t support <video>: <video controls poster=“prague-placeholder.jpg"> <source src="/videos/prague.ogv" type="video/ogg"/> <source src="/videos/prague.mp4" type="video/mp4"/> <a href=“/videos/prague.mp4">Download this video</a> </video>
  12. r In case of conflict, consider users over authors over

    implementors over specifiers over theoretical purity. “ HTML Design Principles: Priority of Constituencies w3.org/TR/html-design-principles/
  13. r Rather than a faceless person typing away on a

    keyboard, users become people with names who want to use what you are helping to create. “ Susan Robertson: Developing Empathy alistapart.com/blog/post/developing-empathy
  14. Example Universal Personas t Olivia • 33 years old •

    Lives in a her newly–purchased one–bedroom apartment in Woolwich • Works in finance on a comfortable salary (70k) in Canary Wharf • In a relationship but not currently cohabiting • Technology: Proudly Apple. Owns a Macbook Air and an iPhone 6 that she purchased for personal use.
  15. flickr.com/photos/mikelo/3139837006 Peter …recently had a skiing accident, and broke his

    wrist Reduced motor ability Olivia …often uses her phone when walking to work Poor eyesight flickr.com/photos/ktoine/6263683606 Sanjita …has two children who play musical instruments Hearing loss actiononhearingloss.org.uk
  16. r The best way to understand the audiences we design

    for is to know those audiences. And the best way to know people is to have them, with all their differences of perspective and background – and, yes, age and gender and race and language, too – right alongside us. “ Sara Wachter-Boettcher: Universal Design IRL alistapart.com/article/universal-design-irl
  17. Reflect the diversity of users in our practice r By

    building inclusive teams that listen to – and even work alongside – users, we can achieve wider reach. 1
  18. r Losing 80% of your screen space forces you to

    focus. There simply isn’t room for any interface debris or content of questionable value. You need to know what matters most. “ Luke Wroblewski: Mobile First Helps with Big Issues lukew.com/ff/entry.asp?1117
  19. r In order to embrace designing native layouts for the

    web – whatever the device – we need to shed the notion that we create layouts from a canvas in. We need to flip it on its head, and create layouts from the content out. “ Mark Boulton: A Richer Canvas markboulton.co.uk/journal/a-richer-canvas
  20. r You can create good experiences without knowing the content.

    What you can’t do is create good experiences without knowing your content structure. “ Mark Boulton: Structure First. Content Always. markboulton.co.uk/journal/structure-first-content-always
  21. r The Core Model: Designing Inside Out for Better Results

    alistapart.com/article/the-core-model-designing-inside-out-for-better-results
  22. r There’s only one type of content that can be

    viewed on virtually any web-enabled device, and that is plain text, or rather, plain text that’s been structured with HTML. “ Stephen Hay Responsive Design Workflow
  23. Example Starting with text t Far From The Madding Crowd

    film review: Carey Mulligan’s Bathsheba would fit in better i The Hunger Games Thomas Vinterberg’s take on Thomas Hardy’s novel vivid when Mulligan is onscreen REVIEW ̣̣̣̤̤ Far From The Madding Crowd may be set in late 1860s “Wes one of the fascinations of Thomas Vinterberg’s new adaptatio Thomas Hardy novel is the light it casts on our own preoccup The publicity hasn’t been slow to remind us that the story’s p Bathsheba Everdene (Carey Mulligan), inspired the Hunger G author Suzanne Collins to make her heroine Katniss into an ‘
  24. <div class="rating"> <img src="star_whole.png" alt="Star number 1"/> <img src="star_whole.png" alt="Star

    number 2"/> <img src="star_whole.png" alt="Star number 3”/> <img src="star_empty.png" alt="Star number 4"/> <img src="star_empty.png" alt="Star number 5"/> </div>
  25. <div class="rating"> <p>This movie is rated 3 out of 5

    stars.<p> </div> “How is this movie rated?”
  26. <div class="rating rating--3"> <p>This movie is rated 3 out of

    5 stars.<p> <span class="rating__star-whole" aria-hidden="true"/> <span class="rating__star-whole" aria-hidden="true"/> <span class="rating__star-whole" aria-hidden="true"/> <span class="rating__star-empty" aria-hidden="true"/> <span class="rating__star-empty" aria-hidden="true"/> </div> “How is this movie rated?”
  27. Start from a point of greatest adaptability r By making

    fewer assumptions about context and interface, focusing more on users’ tasks and goals, we can create more adaptable products. 2
  28. .element { @include fs-header(1); } SCSS input Compiled output: .element

    { font-size: 16px; line-height: 20px; font-family: "Guardian Egyptian Headline", Georgia, serif; font-weight: 900; } github.com/guardian/guss
  29. .block
 Encapsulates a standalone entity that’s meaningful on its own.


    .block__element
 Parts of a block and have no standalone meaning. 
 .block--modifier
 Flags on blocks or elements, used to change appearance, behaviour or state. getbem.com/naming/
  30. r Harry Roberts: More Transparent UI Code with Namespaces csswizardry.com/2015/03/more-transparent-ui-code-with-namespaces/

    o- Object Reusable object that provides a structural repeated aspect of UI c- Component A concrete, implementation- specific piece of UI u- Utility Class that has a very specific role, and often a single responsibility s- Scope Component containing HTML styled using elements selectors
  31. /* Utility: Clear floats */ .u-clearfix { … } .u-hidden

    { … } /* Object: OCSS ‘Media’ */ .o-media { … } .o-media__image { … } /* Component: Navigation */ .c-nav { … } /* Component: Navigation list */ .c-nav-list { … } .c-nav-list__item { … } .c-nav-list__label { … } /* Scope: HTML within prose */ .s-prose h1 { … } .s-prose h2 { … } .s-prose p + h2 { … } .s-prose ul > li { … }
  32. make install Install project dependencies
 make build Run build steps

    make test Run unit tests, linting and other tests make run Run the application locally make deploy Deploy the application to environment financial-times.github.io/next/docs/developer-guide/#make → Project 1 (Ruby): bundle install → Project 2 (Node): npm install
  33. Build systems that humans understand r Choose tools that are

    approachable, simple to use and open to change so as to elicit greater collaboration. 3
  34. 3 Build systems that humans understand 2 Start from a

    point of greatest adaptability 1 Reflect the diversity of users in our practice