[PPT] - La Layou out an and Gr Grids No screens Prof. Lydia Chilton PowerPoint Presentation

SLIDE 1

La Layou

ut an

and Gr Grids

Prof. Lydia Chilton

COMS 4170 24 January 2018 No screens

SLIDE 2

COMS 4170 Goal 1

Build websites that suit the needs and abilities of users

The main goal of many websites is to display information users need.

SLIDE 3

SLIDE 4

SLIDE 5

SLIDE 6

Layout in HTML

How to construct the layout of information in HTML and CSS

SLIDE 7

Today’s goal:

Remake this in informatio ion la layout in HTML and CSS

SLIDE 8

“I finished coding up my website…” “It just doesn’t work yet!”

SLIDE 9

It Iter erativ tive Style of Programming

<html> <body> Hello world! </body> </html>

What’s the most basic thing I can do to make necessary progress towards my goal?

Does it look ok?

Goal Iteration

SLIDE 10

Step 0. Make a html page, connect some CSS

SLIDE 11

List 20 things we could we do first.

SLIDE 12

Make a container div

SLIDE 13

What next?

SLIDE 14

Container div has realistic width.

SLIDE 15

What next?

SLIDE 16

Blue facebook header

SLIDE 17

What next?

SLIDE 18

Blue facebook header

SLIDE 19

What next?

SLIDE 20

Add the first post

SLIDE 21

What next?

SLIDE 22

Add internal structure to the first post

SLIDE 23

By default, DIV elements will flow down the page. display: block To get them to flow across the page, you must set display: inline-block

SLIDE 24

What next?

SLIDE 25

Add padding on the top post

SLIDE 26

What next?

SLIDE 27

Replies

SLIDE 28

What next?

SLIDE 29

Reply substructure: image and text

SLIDE 30

What next?

SLIDE 31

Reply Container positioning

SLIDE 32

What next?

SLIDE 33

Reply Class background-color

SLIDE 34

Reduce Reply Text Width

SLIDE 35

What next? Am I done?

SLIDE 36

Reply Text is longer

SLIDE 37

Reply Text height fixed

SLIDE 38

Remove borders

SLIDE 39

NA NAIL ILED D IT IT!

SLIDE 40

After layout… what next?

SLIDE 41

It Iter erativ tive Style of Programming

<html> <body> Hello world! </body> </html>

What’s the most basic thing I can do to make substantial progress towards my goal?

Does it look ok?

SLIDE 42

Iterative Style of Programming helped me recover from errors one at a time (as I created them)

Error 1: display inline-block Error 3: Reply div height Error 2: reply div padding

SLIDE 43

Grids

Currently the dominant way to layout information

SLIDE 44

Many sites use grids to layout the major sections of information.

SLIDE 45

SLIDE 46

SLIDE 47

SLIDE 48

Before: Symmetric Layout Now: Grids Asymmetric Layout

SLIDE 49

The Bauhaus School of Design

SLIDE 50

Jan Tschichold: inspired by clean designs of the Bauhaus school

SLIDE 51

SLIDE 52

SLIDE 53

SLIDE 54

Basic Architecture of a grid: * The grid has columns

SLIDE 55

Basic Architecture of a grid: * The grid has columns * Rows lay out information vertically. * Within each row, divs can span multiple columns

SLIDE 56

Basic Architecture of a grid:

The grid has columns
Rows lay out information

vertically.

Within each row, divs can

span multiple columns

Next grids of 12 columns

within a grid.

SLIDE 57

Implementing Grids on the Web: Twitter Bootstrap

SLIDE 58

Add Bootstrap to your HTML

CSS & JS in <head> tag, before your own CSS

SLIDE 59

Bo Bootstrap gri

rid. How many columns?

SLIDE 60

Example

SLIDE 61

SLIDE 62

Note: you can omit the number for even distribution.

SLIDE 63

Example 2

SLIDE 64

SLIDE 65

How would you create this?

SLIDE 66

A nested row

<div class="row"> <div class="col-md-4"> <img src="./hci-square.png" class="img img-responsive"> </div> <div class="col-md-4"> <div class="row"> <div class="row"> <div class="col <div class="col-md md-3"> 3"> <p>Hamlet</p> <p>Hamlet</p> </div> </div> <div class="col <div class="col-md md-9"> 9"> <p>Tomorrow and tomorrow...</p> <p>Tomorrow and tomorrow...</p> </div> </div> </div> </div> <div class="row"> <div class="col-md-3"> <p>Hamlet</p> </div> ...

SLIDE 67

Responsive Design

SLIDE 68

4 Device sizes

/* Extra small devices Extra small devices (less than 768px) */ @media (max-width: 768px) { #logo { color: yellow; } } /* Small devices Small devices (768px and up) */ @media (min-width: 768px) { #logo { color: red; } } /* Medium devices Medium devices (992px and up) */ @media (min-width: 992px) { #logo { color: blue; } } /* Large devices Large devices (1200px and up) */ @media (min-width: 1200px) { #logo { color: green; } } Phones Tablets Laptops Large desktops

SLIDE 69

What will this do?

SLIDE 70

What will this do on a phone?

SLIDE 71

class=“col-md-3”

Two examples at xs-screen width

class=“col-md-3 col-xs-6”

SLIDE 72

In summary…

SLIDE 73

It Iter erativ tive Style of Programming

<html> <body> Hello world! </body> </html>

What’s the most basic thing I can do to make substantial progress towards my goal?

Does it look ok?

Goal Iteration

SLIDE 74

Gr Grid ids are a modern layout architecture that help in indic icate im importan ance ce through: grouping, size, and location

SLIDE 75

Announcements

Assignment 1 due tonight @ 11:59
If you are on the waitlist, email me your UNI now (by 5:45) and I will add you

to Courseworks as a non-registered students

chilton@cs.columbia.edu
Check that I have added you by 6pm.
People who do not turn in Assignment 1 will be dropped
People who turn in Assignment 1 will be added based on priority