Sculpting Text
Stephen Hay, Responsive Day Out 2014
Slide 2
Slide 2 text
Responsive Day Out!
It’s Brighton. Here’s a seagull.
Slide 3
Slide 3 text
!
“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
Slide 4
Slide 4 text
No content
Slide 5
Slide 5 text
No content
Slide 6
Slide 6 text
Structured text.
Text that has been structured with HTML.
HTML is arguably the single most portable and
universally readable format.
Slide 7
Slide 7 text
Good responsive design starts with structured content.
Slide 8
Slide 8 text
Designers need to know the “shape” of content.
Slide 9
Slide 9 text
No content
Slide 10
Slide 10 text
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.
Slide 11
Slide 11 text
“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
Slide 12
Slide 12 text
Unstyled HTML has benefits.
Slide 13
Slide 13 text
Because of the focus on content and structure,
irrelevant or inappropriate content is easy to spot.
Slide 14
Slide 14 text
The linear form of structured content prepares us for
the smallest screens with the least capabilities.
Slide 15
Slide 15 text
When you create a plain HTML-document,
you have created a web page that is “mobile-ready”.
Slide 16
Slide 16 text
Focusing on content and purpose (as opposed to
containers) helps designers design more effectively.
Slide 17
Slide 17 text
That doesn’t sound very exciting.
Slide 18
Slide 18 text
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.
Slide 19
Slide 19 text
This does not mean you should skip sketching, whether
on paper, in Photoshop, or otherwise.
Slide 20
Slide 20 text
The Design Funnel
http://changethis.com/manifesto/show/48.04.DesignFunnel
Slide 21
Slide 21 text
Design language for the web
Typography, color, imagery, layout, motion.
Slide 22
Slide 22 text
Design language for the web
Typography, color, imagery, layout, motion.
Slide 23
Slide 23 text
Get some representative content into the browser
and start playing with type. Choose a base typeface.
!
See what I did there?
Slide 24
Slide 24 text
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.
Slide 25
Slide 25 text
Start thinking about type size.
Slide 26
Slide 26 text
Consider margins & padding.
Slide 27
Slide 27 text
Add some color where needed.
Slide 28
Slide 28 text
Maybe even background color.
Slide 29
Slide 29 text
You can then add images.
(Hi, Bruce.)
Slide 30
Slide 30 text
You get the idea.
Let’s look at an example.
Slide 31
Slide 31 text
No content
Slide 32
Slide 32 text
When sculpting text:
!
Do it methodically.
Only add CSS where needed.
Avoid complex CSS (for now).
Avoid complex layout.
Keep checking on real devices.
Slide 33
Slide 33 text
When you’re done:
!
Expand the browser window (yes) until your
layout breaks or no longer works well.
!
That’s your next breakpoint.
Slide 34
Slide 34 text
hey wait you’re asking me to do
css but i’m a designer not a
developer wtf
Slide 35
Slide 35 text
Stop your whining.
We’re using the most basic CSS.
Slide 36
Slide 36 text
We’re “helping” content,
and content will help us later
in return.