1 / 9

Responsive Design

Responsive Design. Communication Strategy for Mobile, Desktop . Ask a question at # interlab. Los Alamos National Laboratory. Interactive/usefulness Story-telling Images, images, images Infographics Video Front-loaded headlines/links Related content Search Completing processes.

sauda
Download Presentation

Responsive Design

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

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

More Related