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

Sculpting Text

Stephen Hay
June 27, 2014

Sculpting Text

Presentation for Responsive Day Out 2014.

Stephen Hay

June 27, 2014
Tweet

More Decks by Stephen Hay

Other Decks in Design

Transcript

  1. Sculpting Text
    Stephen Hay, Responsive Day Out 2014

    View full-size slide

  2. Responsive Day Out!
    It’s Brighton. Here’s a seagull.

    View full-size slide

  3. !
    “Plain text is the underlying content stream to
    which formatting can be applied. [...]

    Plain text is public,standardized, and universally
    readable.”

    — The Unicode Standard, Version 6.1

    View full-size slide

  4. Structured text.
    Text that has been structured with HTML.
    HTML is arguably the single most portable and
    universally readable format.

    View full-size slide

  5. Good responsive design starts with structured content.

    View full-size slide

  6. Designers need to know the “shape” of content.

    View full-size slide

  7. Design the content first, then build upon it.

    This is the way of progressive enhancement.

    !
    Sites designed this way have the potential to be more
    accessible and more usable out of the box.

    View full-size slide

  8. “One technique I’ve used for years is to ‘design in text’...
    not necessarily describing everything in textual form [...]
    essentially what is the message that needs to be
    communicated if I was only able to provide the user with
    unstyled HTML?”

    — Bryan Rieger

    View full-size slide

  9. Unstyled HTML has benefits.

    View full-size slide

  10. Because of the focus on content and structure, 

    irrelevant or inappropriate content is easy to spot.

    View full-size slide

  11. The linear form of structured content prepares us for 

    the smallest screens with the least capabilities.

    View full-size slide

  12. When you create a plain HTML-document, 

    you have created a web page that is “mobile-ready”.

    View full-size slide

  13. Focusing on content and purpose (as opposed to
    containers) helps designers design more effectively.

    View full-size slide

  14. That doesn’t sound very exciting.

    View full-size slide

  15. I recommend a process that takes us incrementally and
    cumulatively from the smallest and simplest aspect of
    our design to the largest and most complex.

    View full-size slide

  16. This does not mean you should skip sketching, whether
    on paper, in Photoshop, or otherwise.

    View full-size slide

  17. The Design Funnel
    http://changethis.com/manifesto/show/48.04.DesignFunnel

    View full-size slide

  18. Design language for the web
    Typography, color, imagery, layout, motion.

    View full-size slide

  19. Design language for the web
    Typography, color, imagery, layout, motion.

    View full-size slide

  20. Get some representative content into the browser
    and start playing with type. Choose a base typeface.
    !
    See what I did there?

    View full-size slide

  21. You’ll be applying styles incrementally, such that
    their cumulative effect will be to visualize the
    design(s) you’ve sketched.
    !
    You’ll do this by sculpting the content 

    using simple CSS.
    !
    Most of these styles will be used (or in some cases,
    overridden) in the larger screen layouts.

    View full-size slide

  22. Start thinking about type size.

    View full-size slide

  23. Consider margins & padding.

    View full-size slide

  24. Add some color where needed.

    View full-size slide

  25. Maybe even background color.

    View full-size slide

  26. You can then add images.
    (Hi, Bruce.)

    View full-size slide

  27. You get the idea.
    Let’s look at an example.

    View full-size slide

  28. When sculpting text:
    !
    Do it methodically.
    Only add CSS where needed.
    Avoid complex CSS (for now).
    Avoid complex layout.
    Keep checking on real devices.

    View full-size slide

  29. When you’re done:
    !
    Expand the browser window (yes) until your
    layout breaks or no longer works well.
    !
    That’s your next breakpoint.

    View full-size slide

  30. hey wait you’re asking me to do
    css but i’m a designer not a
    developer wtf

    View full-size slide

  31. Stop your whining. 

    We’re using the most basic CSS.

    View full-size slide

  32. We’re “helping” content, 

    and content will help us later 

    in return.

    View full-size slide

  33. Thank you!
    @stephenhay

    View full-size slide