Sculpting Text

Presentation for Responsive Day Out 2014.

Transcript

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
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.
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, 
 irrelevant 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.
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