Responsive and Adaptive Design 2016University of Greenwich 1 Responsive and Adaptive Web Design Kevin McManus Largely stolen from Tanya Williams

Responsive and Adaptive Design 2016University of Greenwich 2 Rationale  Responsive design and adaptive design are commonly confused  Provide an overview of responsive and adaptive web design  Demonstrate examples of responsive and adaptive web pages

Responsive and Adaptive Design 2016University of Greenwich 3 Responsive Design  Responsive design is fluid  according to WCAG 1 and 2 all web page design should be elastic  Uses CSS3 media queries to adapt the page layout to different screen sizes

Responsive and Adaptive Design 2016University of Greenwich 4 Adaptive Design  Adaptive design provides a series of static layouts  e.g. three different sizes  960 for desktop browsers  760 pixels for tablets  320 for mobile phones,  Unlike responsive design adaptive files don’t respond on the client  apart from normal elastic re-sizing  The user agent is detected server side and the appropriate page returned to the client  with all the associated problems of browser sniffing

Responsive and Adaptive Design 2016University of Greenwich 5 Questions  Is there a clear difference between responsive and adaptive?  Is Wikipedia responsive or adaptive?Wikipedia

Responsive and Adaptive Design 2016University of Greenwich 6 Responsive Example

Responsive and Adaptive Design 2016University of Greenwich 7 How big is the screen?

Responsive and Adaptive Design 2016University of Greenwich 8 Reporting screen size document.documentElement.clientWidth = window.innerWidth = <!-- function showViewportSize(){ document.getElementById("clientWidth").innerHTML = document.documentElement.clientWidth; document.getElementById("innerWidth").innerHTML = window.innerWidth; setTimeout("showViewportSize()", 1250); } showViewportSize() //-->

Responsive and Adaptive Design 2016University of Greenwich 9 How big is the screen?

Responsive and Adaptive Design 2016University of Greenwich 10 Firefox Responsive Design View Note how document.documentElement.clientWidth is equivalent to window.InnerWidth when in responsive design view

Responsive and Adaptive Design 2016University of Greenwich > default CSS min width commented out experiments max width

Responsive and Adaptive Design 2016University of Greenwich 12 indexLarge.css body { width:800px; margin:4px auto 0px auto; } For screens over 830px wide (min-width: 830px) The main table is fixed at 800px to prevent it from expanding too much on cinemascope screens Allows the main table to start shrinking at 830px

Responsive and Adaptive Design 2016University of Greenwich 13 indexSmall.css #campaigns { position:relative; top:-60ex; text-align:right; z-index:4; } #mainMenu { background: #BBEEFF; width:80%; margin-left:10%; padding:0px; position:relative; top:0px; z-index:2; } #menuColA { width:100%; float:none; padding:4px 0px 0px 4px; } #menuColB { width:100%; padding:0px 0px 4px 4px; } For screens under 710px (max-width:710px) Switches to a single column main table at 710px

Responsive and Adaptive Design 2016University of Greenwich 14 indexTiny.css #conformance { display:none; } For screens under 610px (max-width:610px) Removes the W3C conformance badges

Responsive and Adaptive Design 2016University of Greenwich 15 indexMobile.css h1 { font-size:1.4em; } img.button { display:none; } #mainMenu { width:90%; margin:0px 5% 0px 5%; padding:0px; background:blue; } div.menuPanel { background:#C6E6F0; margin:0px; padding:0px; border:solid 2px #0033BB; } #menuColA { padding:0px; border-bottom:none; margin:0px; } #menuColB { padding:0px; border-top:none; margin:0px; } div.menuItem { padding:1ex; margin:0px; border:solid 2px #0033BB; } #copy { display:none; } #sig { display:none; } #campaigns { display:none; } For screens under 570px (max-width:570px) Removes the buttons and campaigns (leaves social media icons) and changes to a single column menu

Responsive and Adaptive Design 2016University of Greenwich 16 Chapter and Verse  Media queries are standard compliant   CSS Object Model (CSSOM)  defines APIs for Media Queries, Selectors, and of course CSS itself  work in progress, 20 th Feb 2015   CSSOM View Module 

Responsive and Adaptive Design 2016University of Greenwich 17 Interaction  Managing content on screen real-estate is the first step  Most Web pages are in some way interactive  need device independent event handlers  mouse, keyboard, touch  HTML5 can help if used with care  can make things worse  Browser add-ons are of little use here  need access to devices for adequate testing  which devices?

Responsive and Adaptive Design 2016University of Greenwich 18 Any Questions?