Download
responsive design n.
Skip this Video
Loading SlideShow in 5 Seconds..
Responsive Design PowerPoint Presentation
Download Presentation
Responsive Design

Responsive Design

100 Vues Download Presentation
Télécharger la présentation

Responsive Design

- - - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript

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

  2. Interactive/usefulness • Story-telling • Images, images, images • Infographics • Video • Front-loaded headlines/links • Related content • Search • Completing processes Desktop: Engagement Ask a question at #interlab Los Alamos National Laboratory Los Alamos National Laboratory

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

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

  5. same content • sameCMS template, based upon fluid layout/grid • media queries and CSS defined separately for each venue Desktop and tablet display /* 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; } Ask a question at #interlab Los Alamos National Laboratory Los Alamos National Laboratory

  6. Desktop and tablet display • same content • same CMS template, based upon fluid layout/grid • media queries and CSS defined separately for each venue /* 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; } Ask a question at #interlab Los Alamos National Laboratory Los Alamos National Laboratory

  7. same content but subset of all content for desktop/tablet • differentCMS template based upon fluid layout/grid • CSS defined specifically for phones • unique layout/grid for mobile content (task-based) Mobile device display Ask a question at #interlab Los Alamos National Laboratory Los Alamos National Laboratory

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

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