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. ! “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
  2. Structured text. Text that has been structured with HTML. HTML

    is arguably the single most portable and universally readable format.
  3. 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.
  4. “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
  5. Because of the focus on content and structure, 

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

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

    a web page that is “mobile-ready”.
  8. 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.
  9. Get some representative content into the browser and start playing

    with type. Choose a base typeface. ! See what I did there?
  10. 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.
  11. When sculpting text: ! Do it methodically. Only add CSS

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

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

    a designer not a developer wtf