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

More Decks by Stephen Hay

Other Decks in Design


  1. Sculpting Text Stephen Hay, Responsive Day Out 2014

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

  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
  4. None
  5. None
  6. Structured text. Text that has been structured with HTML. HTML

    is arguably the single most portable and universally readable format.
  7. Good responsive design starts with structured content.

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

  9. None
  10. 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.
  11. “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
  12. Unstyled HTML has benefits.

  13. Because of the focus on content and structure, 

    or inappropriate content is easy to spot.
  14. The linear form of structured content prepares us for 

    the smallest screens with the least capabilities.
  15. When you create a plain HTML-document, 
 you have created

    a web page that is “mobile-ready”.
  16. Focusing on content and purpose (as opposed to containers) helps

    designers design more effectively.
  17. That doesn’t sound very exciting.

  18. 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.
  19. This does not mean you should skip sketching, whether on

    paper, in Photoshop, or otherwise.
  20. The Design Funnel http://changethis.com/manifesto/show/48.04.DesignFunnel

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

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

  23. Get some representative content into the browser and start playing

    with type. Choose a base typeface. ! See what I did there?
  24. 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.
  25. Start thinking about type size.

  26. Consider margins & padding.

  27. Add some color where needed.

  28. Maybe even background color.

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

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

  31. None
  32. When sculpting text: ! Do it methodically. Only add CSS

    where needed. Avoid complex CSS (for now). Avoid complex layout. Keep checking on real devices.
  33. When you’re done: ! Expand the browser window (yes) until

    your layout breaks or no longer works well. ! That’s your next breakpoint.
  34. hey wait you’re asking me to do css but i’m

    a designer not a developer wtf
  35. Stop your whining. 
 We’re using the most basic CSS.

  36. We’re “helping” content, 
 and content will help us later

 in return.
  37. Thank you! @stephenhay