Responsive Design, CSS Transitions & CSS techniques

REsponsive WEB Design

  • Flexible Grid: fluid grid using percentages
  • Flexible Images: percentages
  • Media Queries: CSS rules for different widths

Formula for converting pixels to percentages

target /context=result

REsponsive WEB Design

Set the viewport

meta tag in the <head> that tells the browser to set the viewport  equal to the width of the screen

<meta name="viewport" content="width=device-width, initial-scale=1">

RESPONSIVE IMAGES

img {
    max-width: 100%;
}

MEDIA QUERIES

@media screen and (max-width: 800px) {

    body{
        background-color: green;
    }

    h1{
        font-size: 1em;
    }
}

CSS that allows you to apply different styles to different device widths

Choosing Breakpoints

A breakpoint should be inserted when things start to break apart on your website

Techniques

  • Start with the widest screen first
  • Start with the most narrow screen size first
  • Module-Based Breakpoints
  • Em-Based Breakpoints

Designing for Mobile

  • Understand what needs priority and create a clear hierarchy
  • Remove any unnecessary elements- SIMPLIFY!!
  • Tiny screen does not equal tiny type
  • White Space
  • Remember users scroll!

Mobile Navigational Patterns

https://baymard.com/mcommerce-usability/benchmark/mobile-page-types/navigation-menu

https://responsivenavigation.net/​

TESTING

ADDING ANIMATION WITH CSS

CSS Transitions

Transitions are used to create basic animation such as a fade in/out on rollover

3 properties are used to create CSS transitions.

  • transition-property (which property to change)
  • transition-duration (how long the animation should take)
  • transition-timing-function: how it accelerates
  • transition-delay: (If the animation should pause before starting)

CSS Transitions

transition properties are applied to the a tag 

.nav a{
       background-color:#ffffff;
       transition-property: background-color;
       transition-duration: .5s;
      }

Since we want to change the background color on hover,
we will use :hover to "trigger" the color change.

.nav a:hover{
     background-color:#666666
   }

The color will now fade from white to gray when .nav a is rolled over with the mouse.

CSS TRANSITIONS

  • transition-property: (property-name | all |none)
  • transition-duration: (time in seconds)
  • transition-timing-function: (ease, linear, ease-in, ease-out, ease-in-out, step-start, step-end, steps)
  • transition-delay: (time in seconds)
     

Shorthand:

transition: (transition-property, transition-duration, transition-timing-function, transition-delay)

CSS TRANSFORMs

  • transform: (transform functions)

Allows you to rotate, scale, relocate, resize, and skew HTML elements. It's similar to the "transform" tool in Photoshop

CSS TRANSFORMs

  • transform: rotate (valuedeg)
  • transform-origin: (%, length, left, center, right, top)
  • transform: translateX (#px)
  • transform: translateY (#px)
  • transform: translate (x value, y value)
  • transform: skewX(#deg)
  • transform: skewY(#deg)
  • transform: skew(x value, y value)

Applying multiple transforms
transform: scale, rotate, translate

KEYFRAME ANIMATION

CSS RESET

Made with Slides.com