Introduction to Computer Science Web Development

Transcription

1 Introduction to Computer Science Web Development Flavio Esposito Lecture 14

2 Lecture outline Discuss HW Intro to Responsive Design Media Queries Responsive Layout

3 Media Query are style sheet within style sheet Media feature (resolves to true or (max-width: 750px) { p { color:red; } } If (TRUE) then Styles within curly braces apply

4 Many Media Query are (max-width: 750px) { (min-width: 300px) { (orientation: portrait) { } Most common Most screen { } // used for computer print { } // used for printers

5 Media Query are combined with logical operators Device with width (min-width: 768px) and (max-width: 990px) { } Comma is equivalent to (min-width: 768px), (max-width: 990px) { }

6 Media Query Common Approach First specify the base styles p {color: red;} Then be specific (min-width: 1200px) { (min-width: (max-width: 990px) { } Remember not to overlap breakpoints (i.e. range boundaries)!

7 Media Query in action Download and follow along (open file with Chrome browser and text editor) media-queries/media-queries-before.html - Add media queries - Note also mobile version and the range of media query from inspector of Chrome

8 Summary Basic syntax of a media with logical operator

9 Summary Basic syntax of a media with logical operator Remember not to overlap breakpoints

10 Summary Basic syntax of a media with logical operator Remember not to overlap breakpoints Usually you provide basic styling then change or add to them in each media query

11 Practice Quiz Given the following media (min-width: 768px) and (max-width: 991px) {...} The styles within this media query will apply if the browser window is 991px wide. True or False?

12 Practice Quiz The usual approach to using media queries is to provide some base styling and then change and/or add to them within each media query. True or False?

13 Lecture outline Discuss HW Intro to Responsive Design Media Queries Responsive Layout

14 People browse from mobile!

15 What is a responsive Web site? Site designed to adapt its layout to the viewing environments by using fluid, proportion-based grid, flexible images and CSS media queries à Site s layout should adapt à Content verbosity or its visual delivery may change For example header text

16 Alternative to Responsive Web Design Have a server that detects device (user agent) based on the user agent in the HTTP request.

17 Alternative to Responsive Web Design Have a server that detects device (user agent) based on the user agent in the HTTP request. What is HTTP? High risks of using this feature: 1. develop one site for every device 2. Too much development (one site per version) 3. Risk of not covering all devices (new ones?)

18 Most common Responsive tool is a 12-column layout

19 Most common Responsive tool is a 12-column layout Why 12? Its has many factors: Divisible by 1,2,3,4,6, 12

20 12-column responsive layout Padding

21 A 12-column responsive layout can be split in many ways Padding

22 We need to use % to be responsive 100% 1 column = 100% / 12 = 8.33%

23 We need to use % to be responsive 100% 1 column = 100% / 12 = 8.33% 25% 25% 25% 25% 50% 50% 33% 33% 33%

24 We could also have nested grids, each grid is itself dividable into % 1 column = 100% / 12 = 8.33% (33%)

25 Let s see these notions in practice responsive/responsive-before.html

26 Most common Responsive tool is a 12-column layout Note the width: 90% plus the margins-right and margin-left set to auto will center the object

27 Most common Responsive tool is a 12-column layout /* Simple Responsive Framework. */.row { width: 100%; } The row class is trying to take 100% of that space

28 Now let s define some media queries /********** Large devices only (min-width: 1200px) {.col-lg-1,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9,.collg-10,.col-lg-11,.col-lg-12 { float: left; border: 1px solid green; }.col-lg-1 { width: 8.33%; }.col-lg-2 { width: 16.66%; }.col-lg-3 { width: 25%; }.col-lg-4 { width: 33.33%; } // defining columns and marking with lg for large

29 Now let s define some media queries /********** Large devices only (min-width: 1200px) {.col-lg-1,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9,.collg-10,.col-lg-11,.col-lg-12 { float: left; border: 1px solid green; }.col-lg-1 { width: 8.33%; }.col-lg-2 { width: 16.66%; }.col-lg-3 { width: 25%; }.col-lg-4 { width: 33.33%; }.col-lg-12 { width: 100%; } one column, should take 8.33% of space 3 columns, should take 25% of space 4 columns, should take 33.3% of space 12 columns should take 100% of space

30 Now let s define some media queries /********** Medium devices only (min-width: 950px) and (max-width: 1199px) {.col-md-1,.col-md-2,.col-md-3,.col-md-4,.col-md-12 { float: left; border: 1px solid green; }.col-md-1 { width: 8.33%; }.col-md-2 { width: 16.66%; }.col-md-3 { width: 25%; }.col-md-4 { width: 33.33%; }.col-md-12 { width: 100%; } one column, should take 8.33% of space 3 columns, should take 25% of space 12 columns should take 100% of space

31 I can assign the same element in 2 classes since my media query don t overlap /********** Medium devices only (min-width: 950px) and (max-width: 1199px) {.col-md-1 { width: 8.33%; } } /********** Large devices only (min-width: 1200px) {.col-lg-1 { width: 8.33%; } } Both classes.col-lg-1 and.col-md-1 will never exist at the same time!

32 Let s now look at the HTML code of the responsive layout <div class="row"> <div class="col-lg-3 col-md-6"><p>item 1</p></div> <div class="col-lg-3 col-md-6"><p>item 2 Wow this is cool</p></div> <div class="col-lg-3 col-md-6"><p>item 3</p></div> <div class="col-lg-3 col-md-6"><p>item 4</p></div> <div class="col-lg-3 col-md-6"><p>item 5 This is cool</p></div> <div class="col-lg-3 col-md-6"><p>item 6</p></div> <div class="col-lg-3 col-md-6"><p>item 7</p></div> <div class="col-lg-3 col-md-6"><p>item 8</p></div></div> When the device is large, the layout space will be occupied by column of size 3 (they spill over on the new line after 4 blocks since there are 12 columns total)

33 Let s now look at the HTML code of the responsive layout <div class="row"> <div class="col-lg-3 col-md-6"><p>item 1</p></div> <div class="col-lg-3 col-md-6"><p>item 2 Wow this is cool</p></div> <div class="col-lg-3 col-md-6"><p>item 3</p></div> <div class="col-lg-3 col-md-6"><p>item 4</p></div> <div class="col-lg-3 col-md-6"><p>item 5 This is cool</p></div> <div class="col-lg-3 col-md-6"><p>item 6</p></div> <div class="col-lg-3 col-md-6"><p>item 7</p></div> <div class="col-lg-3 col-md-6"><p>item 8</p></div></div> When the device is medium, as I squeeze the browser, the layout becomes a 6 and 6 column.

34 Let s now look at the HTML code of the responsive layout <div class="row"> <div class="col-lg-3 col-md-6"><p>item 1</p></div> <div class="col-lg-3 col-md-6"><p>item 2 Wow this is cool</p></div> <div class="col-lg-3 col-md-6"><p>item 3</p></div> <div class="col-lg-3 col-md-6"><p>item 4</p></div> <div class="col-lg-3 col-md-6"><p>item 5 This is cool</p></div> <div class="col-lg-3 col-md-6"><p>item 6</p></div> <div class="col-lg-3 col-md-6"><p>item 7</p></div> <div class="col-lg-3 col-md-6"><p>item 8</p></div></div> When I squeeze further outside the medium range, the floating property disappears and the elements are just stacked

35 Let s now look at how it looks on an iphone Why the layout does not work on a phone?

36 Let s now look at how it looks on an iphone If we look at the box model, we notice that The box width is 430 but the phone only has 375! Browser is trying to fit entire content into the viewboard of the phone because it does not find a mediaquery that is suitable How do we tell the browser: don t try to zoom-out, this is a responsive website

37 Don t try to zoom-out is specified with a special HTML meta tag <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>responsive Layout</title> Don t try to zoom out The default should be set without zoom!

38 Don t try to zoom-out is specified with a special HTML meta tag <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>responsive Layout</title> Verify that it is indeed visualize in one column by inspecting the phone view of this page with chrome: Don t try to zoom out responsive/responsive-after.html The default should be set without zoom!

39 Practice quiz Most responsive frameworks use a 12-grid layout True or False?

40 Practice quiz To have a 12-grid layout means that 1 cell in that grid has width: 8.33% (100 / 12) True or False?

41 Practice quiz The following meta tag: <meta name="viewport" content="width=device-width, initial-scale=1"> Tells the browser to consider the width of the device as the real width of the screen and set its zoom level to 1, i.e., 100%, so it's not zoomed in or zoomed out. True or False?

42 Introduction to Computer Science Web Development Flavio Esposito Lecture 14