Responsive and Adaptive Web Design. Responsive & Adaptive websites-respond to the user s device by showing an optimized view.

Transcription

1 Responsive and Adaptive Web Design Responsive & Adaptive websites-respond to the user s device by showing an optimized view.

2 Web Design Assumptions Are Changing Rapidly Making a desktop layout small is no longer a best practice. We must design for the small screen so that user experience and client goals are achieved. How do we adapt to the constantly changing mobile landscape? - Device viewport size, device resolution..other? How will you design for Goggle Glass or Apple iwatch? - It s a very challenging and changing landscape.

3 How Mobile Are We? The latest data indicates that 30-40% of web traffic is from mobile devices. (phones and tablets) Mobile Usage May Tablet sales have surpassed desktop sales. -Smartphone sales grew by 78% in 2013 and continue at that pace. The current strategy to meet this challenge is with responsive and adaptive designs.

4 Responsive vs Adaptive Design Same goal slightly different approach and we commonly blend both techniques to fit needs Responsive Design Changes fluidly as the viewing device display changes size. Design one site that scales to all devices. Adaptive Design Detects viewing device and modifies the content at breakpoints to adapt the content to the display. Breakpoints trigger different style sheets.

5 Adaptive vs Responsive Both strategies work but the decision depends on how you want your content viewed on those mobile devices. Do you want all your web page to be accessed on a phone or is a limited version better suited for the small screen? How will your viewer be using your content? Designing one site that scales to all devices is appealing. Selectively delivering the key information may be more user friendly with less clutter on smaller screens.

6 Mobile First One strategy is to design for the mobile device first based on its anticipated use of site information

7 Mobile Design Strategies Here are some techniques we ll use in adaptive and responsive design. Fluid Grids Percentages and EM s Media Queries

8 Responsive Web Design Fluid Grids Use Percentages - percentages are relative widths based on window size - use these units and properties for smooth/fluid resizing

9 Percentages and Em s An em is equal to the computed value of the 'fontsize' property of the parent element. In its most basic form the em is the size of the default font for your browser. When the display changes, em spacing follows. Em s help give us proportional spacing so the layout looks good. - use em s for font-size and spacing

10 Image Scaling Option: use same image and scale down with percentages - percentages <img src=airplane.jpg width=100%> -consider using max-width containers article{max-width: 800px} to control size of image within it - for very large images, you may want to serve a smaller version for tablet or phone (use media queries)

11 Media Queries Media queries are a CSS3 feature that allows page content to be styled to adapt to different devices based on display size or resolution. A different set of styles or a different stylesheet is triggered, on the fly, to modify content. Our page layout adapts to different devices. When a display dimension is detected, a specific style sheet is served.

12 Media Queries When a display dimension is detected a specific style sheet is served. We ll use these dimensions for our exercises Desktop Monitors= min-width 1224px Tablet (ipad)=max-width 768px min-width 480px Generic Phone=min-width 480px The desktop style sheet <link rel=stylesheet media="screen and (min-width:780px)" href=large.css> The tablet style sheet <link rel=stylesheet media="screen and (min-width:480px) and (max-width:780px)" href=medium.css> The phone style sheet <link rel=stylesheet media="screen and (max-width:480px)" href=small.css

13 CSS Media Querries Testing: The good news is that you can rescale your browser to get a feel for how the media queries are working. Once uploaded on your server, you can test for various mobile devices on responsinator. responsinator.com

14 Responsive Web Design We have two exercises to complete: Responsive Exercise (Air Museum) Adaptive Exercise w/media queries (Napa Style)