Sculpting Text

Presentation for Responsive Day Out 2014.

Transcript

1. Sculpting Text
   Stephen Hay, Responsive Day Out 2014
   

   View Slide

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

   View 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 Slide

4. View Slide

5. View Slide

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

   View Slide

7. Good responsive design starts with structured content.
   

   View Slide

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

   View Slide

9. View Slide

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.
    

    View Slide

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
    
    

    View Slide

12. Unstyled HTML has benefits.
    
    

    View Slide

13. Because of the focus on content and structure, 

    irrelevant or inappropriate content is easy to spot.
    

    View Slide

14. The linear form of structured content prepares us for 

    the smallest screens with the least capabilities.
    

    View Slide

15. When you create a plain HTML-document, 

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

    View Slide

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

    View Slide

17. That doesn’t sound very exciting.
    

    View Slide

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.
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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.
    

    View Slide

25. Start thinking about type size.
    

    View Slide

26. Consider margins & padding.
    

    View Slide

27. Add some color where needed.
    

    View Slide

28. Maybe even background color.
    

    View Slide

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

    View Slide

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

    View Slide

31. View Slide

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.
    

    View Slide

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

    View Slide

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

    View Slide

35. Stop your whining. 

    We’re using the most basic CSS.
    

    View Slide

36. We’re “helping” content, 

    and content will help us later 

    in return.
    

    View Slide

37. Thank you!
    @stephenhay
    

    View Slide