1. Implementing
Responsive
Design
UNIT I

2. Why should your web site be adapted to be viewed on mobile devises?
As of July 2016, 74% of American adults own a smartphone.

5. Web pages can be viewed at a range of screen sizes.

6. Comparison of Desktop website to mobile website
Is the content the same?
How is the layout different?
www2.gccaz.edu
cnn.com
espn.go.com
Facebook

7. Unique Needs Viewability
small screen
variety of sizes
variety of resolutions
Navigation features that can be manipulated on a touchscreen
Minimal download size

8. Assess Responsive Design
Responsive design: allows a web developer to specify different CSS rules for some/all elements depending on width of screen.

9. How do we deal with the variety of device display sizes?

10. Assess Responsive Design
Sizing with percentages
Elements sized with percentages maintain their sizing relative to each other while preserving their layout
Example: two images side by side, each with width of 45%, with remaining 10% for margin, padding, and border
Start with layout for smallest or largest screen size you want to support
View layout at different widths

11. Identifying breakpoints
Breakpoint: width at which the layout no longer looks good, or at which you decide to move elements, or add or remove content.

12. Construct a Multipart Media Query
Implementing responsive design:
1. Create a default layout for smallest or largest browser width to support
2. Identify the first breakpoint
3. Create a multipart media query

13. Creating multipart media queries
Using first breakpoint, keyword to create media query
Media features: conditions media must satisfy for rules in query to be applied
Media query includes the screen media type followed by one or more media features
min-width and max-width media features most common in responsive design

14. Creating multipart media queries Example:
@media screen and (min-width: 800px) { style rules }

15. Conditional statements that you can include in an @media rule.
Enable browser feature checks.
Apply style rules based on set requirements.

16. Figure I-1: Web page displayed on different devices using different media queries

17. Figure I-1: Web page displayed on different devices using different media queries

18. Test Layouts with an Emulator
Important to test website on devices that your audience will be using
While developing, you don't need to use actual devices
Emulator: an application that runs on a computer and approximates the dimensions and behavior of a wide range of devices
Built into Chrome browser - Developer Tools

19. Add a column with a media query
It can be helpful to vary the number of columns in which content is displayed
Small screens = single column
Larger screens = multiple columns (sidebar, or placing elements side by side)
Create columns in a media query using properties like float, width, and position

20. Create Responsive Navigation
Can be useful to hide elements on smaller screens and let users show them
Hamburger menu: a button showing 3 horizontal lines that is often used to replace the nav bar
Click/touch button to show nav bar
Click/touch button again to hide nav bar
Uses JavaScript

21. Implement Adaptive Content
All content available on larger devices should also be available on smaller ones.
Adaptive content: limiting amount of content shown by default and making related information available only if user requests it
Methods of implementing adaptive content
Change display of elements in media queries using class names
Use a structural pseudo-class

22. Table I-2: Structural pseudo-classes

23. It is a matter of direction.
Two sides to a coin
Graceful
degradation
Progressive
enhancement
It is a matter of direction.

24. Graceful degradation: ensuring that when site is viewed in browsers that don’t support advanced features, Web page elements should still be displayed in a usable way.

25. Graceful degradation: ”The practice of building your web functionality so that it provides a certain level of user experience in more modern browsers, but it will also degrade gracefully to a lower level of user experience in older browsers. This lower level is not as nice to use for your site visitors, but it does still provide them with the basic functionality that they came to your site to use; things do not break for them.”
ww3.org

26. Graceful degradation Appearance and usability of Web site don’t depend on advanced features Example: specifying alternative text for an image, in case the image cannot be displayed

27. Progressive enhancement: additional features are used as enhancements only for browsers that can render them
Main content and capabilities available for least-featured browser
Advanced features not crucial to the layout of the Web site

28. Progressive enhancement enables us to establish a solid baseline of cross-browser support and then enhance the design with advanced CSS features for supportive browsers.

29. Graceful degradation starts from the status quo of complexity and tries to fix for the lesser experience whereas progressive enhancement starts from a very basic, working example and allows for constant extension for future environments.
Degrading gracefully means looking back whereas enhancing progressively means looking forward whilst keeping your feet on firm ground.

30. Use Progressive Enhancement
Older browsers usually don't support newer CSS properties
Shim: recreates a newer feature for older browsers using JavaScript
Progressive enhancement: using newer features without affecting the meaning/functionality of content
Example: specifying background color as fallback for background image