COMP 1537

CSS II (animation, layouts, media queries)

Copyright Ⓒ 2022, Arron Ferguson 1

 TRANSFORMS (1/2)
 CSS can apply the following:
 transform (move)
 rotate, rotateX, rotateY
 scale, scaleX, scaleY
 skew, skewX, skewY
 Matrix (all-in-one), matrix(a, b, c, d, e, f) where:
a - scale x
d - scale y
b - skew x
c - skew y
e - translate x
f - translate y

Copyright Ⓒ 2022, Arron Ferguson 2

TRANSFORMS (2/2)

 Also:
 Perspective
 Large values = less perspective (e.g., 1600px)
 Small values = huge distortion (e.g., 60px)
 Can use in conjunction with other CSS functions (e.g., rotateY)

 Links (libraries that use JavaScript + CSS + HTML):

 https://github.com/tobiasahlin/SpinKit
 https://github.com/juliangarnier/anime/#demos-and-examples
 And general talk about it:
 https://css-tricks.com/almanac/properties/t/transform/
 This is all more than we have time for unfortunately – so try these on your own ☺
Copyright Ⓒ 2022, Arron Ferguson 3
ANIMATIONS IN CSS 3 (1/2)

 Quite useful feature set for creating animations:

 Key frame, color/transparency changes, size/position changes, delays, timing

 You declare an animation specifying key frames:

@keyframes anim1 { from {background: red;} to {background: yellow;} }

 Then you bind the animation using selectors and the animation property:

div { animation: anim1 5s; }

Copyright Ⓒ 2022, Arron Ferguson 4

ANIMATIONS IN CSS 3 (2/2)

 Properties:
 @keyframes: specifies the animation
 animation: short hand for specifying all animation properties
 animation-delay: delay in seconds before animation starts
 animation-direction: normal, reverse, alternate, alternate-reverse
 animation-duration: how many seconds the animation takes to complete
 animation-fill-mode: styles the animation has when not playing
 animation-name: the name of the animation
 animation-iteration-count: times the animation should play
 animation-play-state: running, paused

Copyright Ⓒ 2022, Arron Ferguson 5

HISTORY OF WEB LAYOUTS (1/3)

 HTML on its own is technically responsive

 The content fills the browser content window
 And flows down with scrolling when needed

 But this was … boring – only one column of content

 Tables were used for creating layouts
 Why? Because when HTML first came out there was no CSS
 CSS 1 didn't arrive until late 1996
 So tables helped create:
 Headers, footers, non-standard layouts, multi-column content

Copyright Ⓒ 2022, Arron Ferguson 6

HISTORY OF WEB LAYOUTS (2/3)

 People in the print industry were used to a specific/fixed size

 HTML changed that notion of a fixed size
 Again, HTML without CSS offers a fluid layout

 Fixed size is easier on the designer – one size fits all

 Easier and greater amount of control for designers
 However this is horribly impractical today because
 We have many different sized devices
 With many different supported resolutions

Copyright Ⓒ 2022, Arron Ferguson 7

CAN YOU READ THIS?

Copyright Ⓒ 2022, Arron Ferguson 8

RESPONSIVE – MULTIPLE LAYOUT DESIGNS

 Much better!
 But more work 

Copyright Ⓒ 2022, Arron Ferguson 9

CURRENT WEB LAYOUT STRATEGIES (1/4)

 Fixed layout
 Uses absolute values (e.g., pixels) to set the size of containers
 E.g., footers/header width/height, column width, logo dimensions
 Are specific to a particular resolution (usually width)
 Good:
 Sometimes requirements for content have to be a specific size
 E.g., ads, banners, images, icons
 Content easier to manage
 Bad:
 Can cause horizontal scrolling, which is bad
 Layout doesn't resize to browsers

Copyright Ⓒ 2022, Arron Ferguson 10

CURRENT WEB LAYOUT STRATEGIES (2/4)

 Liquid layout
 Using percentages for all containers
 Including headers, footers, multi-columns
 Stretches and shrinks accordingly
 Although in some cases, content can overlap if too big for the container width
 Good:
 Resize with the browser, don't cause horizontal scrolling
 Bad:
 Don't solve all layout problems, can cause content to overlap

Copyright Ⓒ 2022, Arron Ferguson 11

 CURRENT WEB LAYOUT STRATEGIES (3/4)
 Responsive Web Design (RWD)
 Uses media queries – more on this later
 Flexible images, fluid compartments are sized based on percentages
 Info/content for every device is included
 All assets are downloaded regardless of whether they are used (or not)
 Single template for all devices
 Good:
 One site, one set of downloads, unified design
 Bad:
 Low bandwidth devices still download all content
 E.g., large 1 MB images

Copyright Ⓒ 2022, Arron Ferguson 12

 CURRENT WEB LAYOUT STRATEGIES (4/4)
 Adaptive Web Design (AWD)
 Uses client-side (browser) or server side code
 To detect device (e.g., tablet, desktop, mobile phone)
 Serves separate HTML depending on device
 Several templates are created for standard sizes
 Good:
 Each type of device gets its own content
 E.g., low bandwidth content for mobile phones
 Bad:
 Each device has its own site – design/development is costly, time consuming

Copyright Ⓒ 2022, Arron Ferguson 13

LAYOUT META DATA

 Remember the meta element?

 Use the:
 name attribute with the viewport value and the
 content attribute (e.g., width=device-width, initial-scale=1)
 width/height: width/height of the virtual viewport of the device
 device-width/height: physical width/height of the device's screen
 minimum-scale: minimum amount the visitor can zoom on the page (1.0 = no zoom)
 maximum-scale: maximum amount the visitor can zoom on the page (1.0 = no zoom)
 user-scalable: allows device to zoom in/out, values = 'yes' or 'no'
 This is used when doing responsive designs
 Don't use if you're not using media queries!

Copyright Ⓒ 2022, Arron Ferguson 14

DISPLAY PROPERTY VALUES (1/2)

 Remember the CSS display property?

 It allows us to override element display characteristics
 Block level elements take up the whole line
 E.g., div, h1 – h6, p, form, header, footer, section
 Inline level elements only take up as much space as necessary
 E.g., span, a, img
 You can change the default value of any elements' display property

Copyright Ⓒ 2022, Arron Ferguson 15

DISPLAY PROPERTY VALUES (2/2)

 Display value properties:

 hidden: make element invisible (i.e., not displayed in browser)
 inline: only as big as the content
 block: take up entire line
 list-item: list items for lists
 inline-table: table but inline instead of block
 table: table (i.e., whole line)

Copyright Ⓒ 2022, Arron Ferguson 16

 FLOAT AND CLEAR
 float can be set to left or right
float: right;
float: left;
 When we float, we change the behavior of the floated element
 If we do this to an inline element (such as span)
 It removes it from the inline text and places it in a block of its own
 Similar to moving a drawn component from a page and onto a transparency sheet

 clear can be set to left, right, none or both

 This specifies which sides (of an element) allow for other floating elements to be placed against it
 kind of like a detracting field
 Nothing is allowed to 'touch' the side specified (e.g. left)

Copyright Ⓒ 2022, Arron Ferguson 17

CSS GRID (1/2)

 The Grid (not the English electronic dance group from the 1990s) in CSS:
 Allows a container (e.g., body, div, section, etc.) to be divided into rows & columns
 Much like a spreadsheet
 Has many different ways to specify the rows and columns such as:
 Gap between rows & columns
 Repeating attributes
 Absolute vs relative units of measure (e.g., percentages/viewport w/h vs fractional units)
 Labeled areas (e.g., header, footer, main, menu)

Copyright Ⓒ 2022, Arron Ferguson 18

CSS GRID (2/2)

 For this course, we’ll focus on using the following CSS properties:
 grid-template-columns, grid-template-rows – for the container
 grid-column, grid-row – for the elements in the container
 Using the format:
 index / span number_of_spanned columns/rows
 E.g., 3 / span 2, which means: start at column/row 2 and span 2 rows – starting at row 2

 Please read through the following web sites for documentation/tutorials:

 Mozilla Developer Network:
 https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout
 CSS Tricks:
 https://css-tricks.com/snippets/css/complete-guide-grid/

Copyright Ⓒ 2022, Arron Ferguson 19

MEDIA QUERIES (1/2)

 New to CSS 3
 Allow conditions to be made on rendering
 Use the @media annotation and specify:
 min-width, max-width, min-height, max-height
 device-aspect-ratio, min-device-aspect-ratio, max-device-aspect-ratio
 only, not, all, and

 Use the @media to specify:

 print, screen, speech, all
 tv, tty, projection, handheld, braille, embossed are deprecated since CSS 2.1

Copyright Ⓒ 2022, Arron Ferguson 20

MEDIA QUERIES (2/2)

 Media queries can be placed in:

 CSS file, CSS style element, link element
 Examples:
 @media (min-width: 700px) { ... }
 @media (min-width: 700px) and (orientation: landscape) { ... }
 @media print and (min-width: 700px) and (orientation: landscape) { ... }
 @media screen and (min-aspect-ratio: 1/1) { ... }
 @media screen and (device-aspect-ratio: 16/9), screen and (device-aspect-ratio: 16/10) {
... }

Copyright Ⓒ 2022, Arron Ferguson 21

WEB LAYOUT /DESIGN STRATEGIES

 Fixed layout
 Poor choice which assumes one size fits all
 Liquid layout
 Nice start, lays out compartments on percentage
 Adaptive layout
 Chooses several templates for known dimensions
 Responsive layout
 One layout, media queries for ranges, liquid

Copyright Ⓒ 2022, Arron Ferguson 22

BEST PRACTICES

 Create multiple layout choices with media queries:

 Different font sizes (and possibly different fonts) based on resolution
 Collapsed menus for smaller devices
 Different numbers of columns based on the width of the screen
 Optional headers and footers if screen size is too small to support both
 Changes in the order of content displayed
 Use percentages for layouts as much as possible
 You may not have a choice on some things (e.g., images, ads, videos)
 Try to use as little bandwidth as possible
 So compress images/video/other content as much as possible

Copyright Ⓒ 2022, Arron Ferguson 23

EXAMPLE – VIDEO ELEMENT

 Use HTML5 video element

 Can add controls, loop, poster
 Use CSS to resize – not width and height attributes
 Tricks, set:
 display to 'block'
 margin to '0 auto' in order to center
 width to value, height to 'auto'
 Video element can even have:
 Multiple sources (to support multiple devices)
 Track elements, which can be used for captions, subtitles, etc.

Copyright Ⓒ 2022, Arron Ferguson 24

EXAMPLE – AUDIO ELEMENT

 Use HTML5 audio element

 Can add controls, loop
 Use CSS to resize – not width and height attributes
 Tricks, set:
 Create a div element, put img, audio elements inside
 Set margin: 0 auto
 Set div (the audio container) display to 'table'
 Set div's img display to 'block'
 Creates a player that has a still image
 This could be replaced by a canvas visualization

Copyright Ⓒ 2022, Arron Ferguson 25

EXAMPLE – LIQUID IMAGE GALLERY

 Image gallery thumbnails consist of:

 A div container that has
 div elements that have
 An anchor element which has an image inside of it
 A heading (e.g., h3)
 A paragraph for a description of the image

 Center div container with margin: 0 auto

 Float all div elements that contain the image, heading, paragraph
 Ensure that img element has it's display set to 'block'

Copyright Ⓒ 2022, Arron Ferguson 26

 EXAMPLE – RESPONSIVE IMAGE GALLERY
 Use media queries, set max width
 Like previous example, create div containers, where:
 A div box holds:
 Another div which holds
 An img, and another div – which holds the text

 Using media queries, use resolutions to choose widths of div boxes

 E.g.,
 > 1290, 20% for each box so 5 boxes on screen
 > 1050 < 1289, 25% for each box so 4 boxes per row
 > 650 < 1049, 33.3% for each box so 3 boxes per row
 > 480 < 649 , 33.3% for each box so 2 boxes per row
 < 479 100% for each box, so, one column

Copyright Ⓒ 2022, Arron Ferguson 27

EXAMPLE – CENTERED MENU

 Need for a centered menu/nav bar

 I.e., liquid layout for a menu bar with each menu label being equally spaced
 Use the nav element, which has
 An unordered list which has
 List items inside

 CSS:
 The nav element display set to 'table', width 100%
 The nav ul element display set to 'table-row'
 The nav ul li elements display set to 'table-cell', text-align 'center'

Copyright Ⓒ 2022, Arron Ferguson 28

CSS FRAMEWORKS

 CSS frameworks attempt to create a lot of classes that you would normally create
yourself
 Some examples:
 Twitter Bootstrap, Pure, Less
 Foundation, Skeleton
 Benefits
 Can reduce amount of time to create web site templates
 Disadvantages
 May not solve all your problems, may cause cascade conflicts that are hard to resolve

Copyright Ⓒ 2022, Arron Ferguson 29