1. + Responsive Design Communication Strategy for Mobile, Desktop Los Alamos National Laboratory Ask a question at #interlab

2. + Desktop: Engagement Los 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

3. + Mobile: Tasking Los Alamos National Laboratory  Top Ten Five Tasks  Task-related pathing  Links, links, links  Searching Ask a question at #interlab

4. + Content Management System Enter once, distribute thrice Los 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 CMS tablet mobile web Ask a question at #interlab

5. + Desktop and tablet display Los 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

6. + Los 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

7. + Los 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

8. + Los Alamos National Laboratory Resource http://www.abookapart.com/products/responsive- web-design by Ethan Marcotte Ask a question at #interlab

9. + Los Alamos National Laboratory Coming Summer 2012! Ask a question at #interlab