Stephen Hay: Sculpting Text

Stephen Hay (@stephenhay) was speaking about text content at Responsive Day Out, these are my notes from his talk.

It's Birghton. Here's a seagull.

As designers we don't tend to think of text outside typography.

Structured text with HTML, most portable content we have.  Good responsive design starts with structured content.  Design is putting form and content together, if you don't know how the content acts in certain situations you can't design for it.  IF we think of the interface before the data we can end up with something that doesn't work.

Design the content first.  Design in text - not necessarily describing everything in text  - what is the message if I had to use unstyled HTML?  Focus on what's appropriate and inapropriate.  The linear form is basically small screen - it's mobile ready and works anywhere.  Single column flexible grid.

Does desin happen in our heads or in our tools?  Use HTML and dev tools as well as photoshop.  Sculpting text in the browser you can adjust as you go along.  Still sketch in the browser and in photoshop.

Design funnel - we normally jump in at the bottom with creating a visual language, there's a lot that should happen before that.

Typography colour, imagery, layout.  Additive scultpture.  Apply styles incrementally, sculpt CSS.  Avoid complex CSS and complex layout to start with.  Whatever you do at mobile will probably be OK at larger screens.  Work on your typography and layout at narrow viewport.  It's a single column so don't need to worry too much about layout.  Helps you see the reality of the content.    This keeps you from worrying about small screens when you are working on large screens.  If you start with big screen you can end up with two websites, the large screen and a completely different small screen site.  With a large canvass you don't have to focus on what's important.   Test on real devices.

Expand the browser window until the layout breaks - that's your breakpoint, regardless of the actual size.

Designers: stop whining.  You're using the most basic CSS.  Developers will do the advanced stuff.