+ responsive design communication strategy for mobile, desktop los alamos national laboratory ask a...
TRANSCRIPT
+
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