Planning content for responsive layouts

Responsive DesignPlanning for layoutswith Pauly TingWednesday, 24 July 2013

Responsive DesignPlanning Contentwith Pauly Ting

I’m the Lead UX Designer at Tigerspike SF, founder of Feedia, and co-founder of TwoCents.t: @paulytinge: [email protected]

My name is Pauly Ting

My name is Pauly Ting

Today I’m talking about

planning content for responsive

layouts.


Webinar Agenda

Housekeeping

Introduction

Challenge #1

Challenge #2

Challenge #3

Q&A

What do we know about postcards?


Webinar Agenda

Housekeeping

Introduction

Challenge #1

Challenge #2

Challenge #3

Q&A

And TVs


Webinar Agenda

Housekeeping

Introduction

Challenge #1

Challenge #2

Challenge #3

Q&A

And the kitchen cupboards?


Things don’t always fit as intended.


Typesetting: Orphans and Widows

Resource - http://www.aisleone.net/2009/design/8-ways-to-improve-your-typography/

http://www.aisleone.net/2009/design/8-ways-to-improve-your-typography/



Typesetting: Rags

Resource - http://www.aisleone.net/2009/design/8-ways-to-improve-your-typography/




Available medium: Strict rules


We built all kinds of publishing tools


And then just applied that to the web


What we got: Fabric Land.



Chapters and Pages: Design or Dogma?

Resource - http://www.taming-openoffice-org.com/newsite/?page_id=90




Content Tools: Some differences.

StaticBoundFinished

DynamicPostedWIP



StaticBoundFinished

DynamicPostedWIP

Paper



StaticBoundFinished

DynamicPostedWIP

Not Paper


Content Consumption: Fixed dimensions

1280px

768px1024px

320px


Content Consumption: No more fixed dimensions


Planning for a new type of content.Responsive Content.


Responsive: 3 Fundamentals

Media Queries Fluid Grids Flexible Media

%


Responsive: Fluid Grids

PixelsFixed width

PercentagesFlexible width

Resource - http://coding.smashingmagazine.com/2009/06/02/fixed-vs-fluid-vs-elastic-layout-whats-the-right-one-for-you/




Responsive: Content in Grids

Header

A

B

C

Header

A

D

F

B

E

G

C

H

Header

A

I

B

J

E

Header

C

F

H

D

G

K

320px 1024px +768px


Responsive: The downside to fluid grids

Resource - http://www.lukew.com/ff/entry.asp?1514

Undesired content flowChanges in content structure




Example: Starbucks





Example: Starbucks


Buy!




Example: Starbucks


The original presentation had an embedded screencast.

This slide demonstrated that because the endless and often thoughtless stacking of DIVs typical in Responsive layouts, meant that this very important Buy Online button had been pushed to the bottom of the page after a lengthy scroll, thus making it unlikely people would check out.

It was literally found after 8+ page lengths of user reviews. *yawn*!




Lesson: It’s more than just re-flowing content

• Fluidity (although not pixel perfection) still needs a vigilant and thoughtful eye

• Mobile use-case doesn’t mean being deprived; rather being accessible

• Content priority and order is important


Important: Start with structuring content


Content: Types

FAQs

“I !"" #$%&r'# ()*' pr&%+,(/'#rv*,#” - Somebody

forms


Content: Elements

Typefaces

Images

VIDEO

www.url.com

Sound

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus massa nulla, posuere at auctor in, varius id justo. Integer nec lectus congue, euismod ligula eget, sodales quam. Duis et elit condimentum, porta urna eu, lacinia metus. Nulla pellentesque facilisis augue tempor vulputate. Nunc ut tellus vitae felis ornare suscipit sit amet ac diam. Aenean commodo sodales nisi ut egestas. Phasellus eleifend tempor sapien, ut semper massa faucibus vel. Cras imperdiet semper odio sit amet porttitor. In eget semper urna, id malesuada nibh. Donec auctor nulla sit amet lacus placerat, eu ullamcorper turpis pellentesque. Proin tincidunt dictum malesuada. Phasellus sed libero nec justo vestibulum fermentum.

HeaderSub Header

• Lists• More Lists• Even more Lists

07/24/201319:00:00

Captions for videos or images

Graphs

“P+"" Q+&(#'”

tags, tags, tags

$Price

ICONs

SummaryLorem ipsum dolor sit a m e t , c o n s e c t e t u r adipiscing elit. Phasellus massa nulla, posuere at auctor in, varius id jlectus congue, euismigula eget, sodales quam.

BUTTONS

http://www.url.com

http://www.url.com


Content: Make rules and relationships

Add to cart

$DescriptionLorem ipsum dolor sit a m e t , c o n s e c t e t u r adipiscing elit. Phasellus massa nulla, posuere at auctor in, varius id jlectus congue, euismigula eget, sodales quam.

Images

FAQs• Lists• More Lists• Even more Lists


Content: Prioritize content

Add to cart

$PRICE

DescriptionLorem ipsum dolor sit a m e t , c o n s e c t e t u r adipiscing elit. Phasellus massa nulla, posuere at auctor in, varius id jlectus congue, euismigula eget, sodales quam.

Images

FAQS

• Lists• More Lists• Even more Lists

=

1

2

3

5

4

7

6


How to prioritize

MeaningWhat is gained/lost by keeping/losing this?

PriorityDoes it have context or exist for a key task?

RelationshipWhat is affected if this disappears?


Technicalities: Some light reading

Conditional LoadingAjax-include patternshttp://filamentgroup.com/lab/ajax_includes_modular_content

Lazy Loadinghttp://coding.smashingmagazine.com/2010/01/06/page-performance-what-to-know-and-what-you-can-do/

Show/Hide with media querieshttp://www.frankieroberto.com/responsive_text

Flexboxhttp://www.w3.org/TR/css3-flexbox/http://www.jordanm.co.uk/contentchoreographydemo

CSS3 Grid Layouthttp://dev.w3.org/csswg/css-grid/

Relocate.jshttps://github.com/edenspiekermann/minwidth-relocate

http://filamentgroup.com/lab/ajax_includes_modular_content/


http://coding.smashingmagazine.com/2010/01/06/page-performance-what-to-know-and-what-you-can-do/




http://www.frankieroberto.com/responsive_text

http://www.frankieroberto.com/responsive_text

http://www.w3.org/TR/css3-flexbox/

http://www.w3.org/TR/css3-flexbox/

http://www.jordanm.co.uk/contentchoreographydemo

http://www.jordanm.co.uk/contentchoreographydemo

http://dev.w3.org/csswg/css-grid/





Responsive: Flexible Media

320px 1024px +768px

Aa Bb CcAa Bb CcAa Bb Cc

76kb

200kb

1.4MB


Flexible Media: Max-width: 100%?


Flexible Media: Multi-screen use case


Flexible Media: Use touch events


Flexible Media: Offer alternatives


Flexible Media: Check this stuff out

Responsive Imageshttp://filamentgroup.com/lab/ajax_includes_modular_content

<picture> elementhttp://picture.responsiveimages.orghttps://github.com/scottjehl/picturefill

srcsethttp://www.w3.org/html/wg/drafts/srcset/w3c-srcset/

Videohttp://fitvidsjs.com



https://github.com/scottjehl/picturefill

https://github.com/scottjehl/picturefill

http://fitvidsjs.com

http://fitvidsjs.com


#1: We’re not designing pages anymore

#2: Think in percentages, not pixels

#3: Fluid layouts need strategic planning

#4: Assess about your content semantically

#5: Create content rules based on use cases

#6: Flexible media also means offering an alternative

Summary: 6 quick take-aways

Responsive Design Contact met: @paulytinge: [email protected]

mailto:[email protected]

mailto:[email protected]


Massimo Vignelli

Responsive Design3 key challengeswith Pauly Ting


Flexible Grids aren’t new

Responsive Design3 key challengeswith Pauly Ting

Resource - http://www.cdf.org/issue_journal/a_lasting_impression-2.html

Invented by Massimo Vignelli for the NPS.

Vince Gleason of the NPS turned to Vignelli for help in finding a way to allow designers to focus more on content, not reinvent the wheel with each piece.

The result was Unigrid.

At the heart of the Unigrid program's longevity is the fact that it is an open framework, not a fixed formula. There is room for creativity on the part of the many designers, both in-house and contract, who work with it.



Planning content for responsive layouts

Technology

Transcript of Planning content for responsive layouts