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

Slides:



Advertisements
Similar presentations
Coding a Responsive HTML
Advertisements

15 LAYOUT Controlling the position of elements Creating site layouts Designing for different sized screens.
Responsive Web Design (RWD) Building a single web site for the desktop, tablet and smartphone An Infopeople Webinar November 13, 2013 Jason Clark Head.
CONCEPTS FOR FLUID LAYOUT Web Page Layout. Website Layouts Most websites have organized their content in multiple columns (formatted like a magazine or.
RESPONSIVE WEB DESIGN NYU Webmaster Meetup, October 3 rd, 2014.
Responsive Web Design Sheri German, Instructor Montgomery College.
Being Responsibly Responsive Jason
Chapter 8 More on Links, Layout, and Mobile Key Concepts Copyright © 2013 Terry Ann Morris, Ed.D 1.
Developing Content for Mobile Devices Larry D. Lee Web Developer for K4Health.
Responsive Web Design Design websites so that they can adapt to different devices seamlessly. Image by Muhammed RafizeldiMuhammed Rafizeldi.
RESPONSIVE DESIGN Sources: Kadlec, T. (2012). Implementing responsive design. Berkeley, California: New Riders Publishing. MarcotteMarcotte, E. (2010).
RESPONSIVE DESIGN Sources: Kadlec, T. (2012). Implementing responsive design. Berkeley, California: New Riders Publishing. MarcotteMarcotte, E. (2010).
1 Responsive Web Design for Universal Access Image: Kate Walser CX Insights
CISC 474: Advanced Web Technologies HTML5 & CSS3, & Responsive Design.
LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE HTML and CSS 8th Edition Chapter 12: Building Responsive Webpages.
TUTORIAL 8: Enhancing a Web Site with Advanced CSS
CIT 256 Mobile Web Development Dr. Beryl Hoffman.
Intro to RESPONSIVE DESIGN. Why? What?
CSS Box Model. What is the CSS Box Model? The “Box Model” is a tool we use to lay out our web pages in a number of individual "boxes" or "containers".
Lesson 15: Mobile Design and Layout Introduction to Adobe Dreamweaver CS6 Adobe Certified Associate: Web Communication using Adobe Dreamweaver CS6.
Chapter 8 More on Links, Layout, and Mobile Copyright © 2013 Terry Ann Morris, Ed.D revised by Bill Pegram, 9/24/
WDV 331 Dreamweaver Applications Designing Websites for Mobile Devices Dreamweaver CS6 Chapter 11.
Layouts with CSS Web Design – Section 4-12 Part or all of this lesson was adapted from the University of Washington’s “Web Design & Development I” Course.
Principles of Web Design 6 th Edition Chapter 7 – Page Layouts.
COMP 135 Web Site Design Intermediate Week 8. Responsive Web Design Responsive Design Adaptive Design.
| imodules.com Making Your Site Mobile-Ready Presented by Chris Smith and Mark Werner.
Basic Responsive Design Techniques. Let’s take a look at this basic layout. It has a header and two columns of text, in a box that is centered on the.
CONCEPTS FOR FLUID LAYOUT Web Page Layout. Website Layouts Most websites have organized their content in multiple columns (formatted like a magazine or.
Week 8 – Part 3 More on Links, Layout, and Mobile Key Concepts 1.
Responsive design - Bedrock to our site Responsive site templates included.
Copyright 2012 Adobe Systems Incorporated. All rights reserved. ® Copyright 2010 Adobe Systems Incorporated. All rights reserved. ® Copyright 2012 Adobe.
Responsive Web Design Minjuan What is Responsive Web Design?  A site's ability to resize dynamically based on the device being used.  The.
Mr. Justin “JET” Turner CSCI 3000 – Fall 2015 CRN Section A – TR 9:30-10:45 CRN – Section B – TR 5:30-6:45.
PRESENTED BY Content Authoring for Responsive Design Mike Hamilton V.P. Product Evangelism at MadCap Software
Tutorial 8 Enhancing a Web Site with Advanced CSS
Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 7 TH EDITION Chapter 7 Key Concepts 1 Copyright © Terry Felke-Morris.
HTML, CSS, and XML Tutorial 8 Enhancing a Web Site with Advanced CSS.
Adaptable web sites Joni Korpi 01/20. Definition A page, whose layout – and possibly content – changes according to the devices size. 02/20.
CSS3 Media Queries. There are several media types all braille embossed handheld print projection screen speech tty tv.
Web Design: Responsive Layouts Sarah Murto 09/29/ W - Graduate Workshop.
RWD: Responsive Web Design. Terms Media queries SVG Responsive Adaptive/RESS Dedicated mobile.
Responsive Design Design that Adapts to Different Devices SoftUni Team Technical Trainers Software University
Heuristics of Responsive Web Design Aronya Waller & Nate Mudd IDIA 612.
INFO1300 LAB7 OCT.11TH RESPONSIVE DESIGN. WHAT IS RESPONSIVE WEB DESIGN A mix of flexible grids and layouts, images and an intelligent use of CSS media.
Responsive vs. Adaptive Web Design A responsive web design will "fluidly change and respond to fit any screen or device size" An adaptive design will "change.
Responsive (Mobile) Design What is this? Why Should You Care?
 An HTML, CSS, Javascript framework you can use as a basis for creating web sites  Uses CSS settings, fundamental HTML elements styled and enhanced.
Responsive Web Design (RWD) MIS 3502, Spring 2016 Jeremy Shafer Department of MIS Fox School of Business Temple University 2/11/2016.
Navigation grid – Wide desktop 1 Main navigation bar maximum width 890 px (= 4 content columns) 3 text columns, each 256 px wide 51 px margins in between.
Basic Elements of Responsive Web Design Jason Bengtson, MLIS, AHIP Emerging Technologies/R&D Librarian UNM Health Sciences Library and Informatics Center.
CS 120: Introduction to Web Programming Lecture 10: Extra Features and Website Design Part 1 Tarik Booker CS 120 California State University, Los Angeles.
Mobile and SharePoint Eric Overfield SharePoint Advocate and Enthusiast PixelMill SharePoint Fest Denver – March 18 th - 20 th 2013 The Design Dilemma.
Less – Design That is More… BY SPEC INDIA. Less – Design  Adaptive Cross Platform CSS grid system  Responsive & Mobile First Projects  Uses Standards-based.
Copyright © 2015 rosixtechnology.in To be a world renowned company for providing Software Solutions & Product based IT infrastructure.
CONCEPTS FOR FLUID LAYOUT Web Page Layout. Essential Questions What challenges do mobile devices present to Web designers? What are the basic concepts.
A better approach to mobile
Responsive Design and Twitter Bootstrap
Responsive Web Pages.
Concepts for fluid layout
CS1220 Web Programming Saloni Chacha.
Responsive Design Optimizing the browsing experience
RESPONSIVE WEB DESIGN.
CS3220 Web and Internet Programming Introduction to Bootstrap
Responsive Design in WordPress
Responsive Design.
Making Your Site Mobile-Ready
Responsive Web Design (RWD)
CS3220 Web and Internet Programming Introduction to Bootstrap
Concepts for fluid layout
17 RESPONSIVE WEB DESIGN.
Presentation transcript:

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

+ 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

+ Mobile: Tasking Los 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 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

+ Desktop and tablet display Los Alamos National Laboratory /* iPads (landscape) 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: ; 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 Laboratory /* WIDE DESKTOP LAYOUT 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: ; 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 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 Laboratory Resource web-design by Ethan Marcotte Ask a question at #interlab

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