+

Responsive DesignCommunication Strategy for Mobile, Desktop

Los Alamos National Laboratory

Ask a question at #interlab

+

Desktop: Engagement

Los Alamos National LaboratoryLos Alamos National Laboratory

Interactive/usefulness Story-telling

• Images, images, images• Infographics• Video

Front-loaded headlines/links Related content Search Completing processes

Ask a question at #interlab

+

Mobile: Tasking

Los Alamos National LaboratoryLos Alamos National Laboratory

Top Ten Five Tasks Task-related pathing Links, links, links Searching

Ask a question at #interlab

+

Content Management System Enter once, distribute thrice

Los Alamos National LaboratoryLos Alamos National Laboratory

Enter content once Distribute to tablet, desktop through media queries,

liquid page layouts, flexible images, proportional CSS Distribute to mobile device through “templates” using

discreet content blocks

CMStablet

mobileweb

Ask a question at #interlab

+

Desktop and tablet display

Los Alamos National LaboratoryLos Alamos National Laboratory

/* iPads (landscape) ----*/ @media only screen and (max-width : 1024px)

{ body { background:url('/_assets/images/header-bg.jpg') repeat-x 0 -15px; }

#pagecontent { width:96%; max-width: 100%/*800px*/; min-width: 780px/*750px*/;

margin:0 auto 0 auto; padding: 0 0 0 0; height: auto; text-align:left; background:transparent; }

same content same CMS template, based upon fluid layout/grid media queries and CSS defined separately for each

venue

Ask a question at #interlab

+

Los Alamos National LaboratoryLos Alamos National Laboratory

/* WIDE DESKTOP LAYOUT -----*/ @media only screen and (min-width: 1024px)

{ body { background:url('/_assets/images/header-bg.jpg') repeat-x 0 0; }

#pagecontent { width:96%; max-width: 970px; margin:0 auto 0 auto; padding: 0 0 0 0; height:

auto; text-align:left; background:transparent; }

Desktop and tablet display same content same CMS template, based upon fluid layout/grid media queries and CSS defined separately for each

venue

Ask a question at #interlab

+

Los Alamos National LaboratoryLos Alamos National Laboratory

Mobile device display same content but subset of all

content for desktop/tablet different CMS template based

upon fluid layout/grid CSS defined specifically for

phones unique layout/grid for mobile

content (task-based)

Ask a question at #interlab

+

Los Alamos National LaboratoryLos Alamos National Laboratory

Resourcehttp://www.abookapart.com/products/responsive-web-design by Ethan Marcotte

Ask a question at #interlab

+

Los Alamos National LaboratoryLos Alamos National Laboratory

Coming Summer 2012!Ask a question at #interlab