Responsive Web Design – Fluid grids – MEDIA QUERIES

View Github Repository Open presentation in a new window

epam-front-end-school-lectures

See all presentation from epam-front-end-school-lectures

Responsive Web Design – Fluid grids – MEDIA QUERIES

0 0

responsive-web-design

Slides for Responsive Web Design lecture

On Github epam-front-end-school-lectures / responsive-web-design

Responsive Web Design

by Olena Svietlova

February 26, 2016

What is Responsive Web Design?

В двух-трех словах как бы вы описали, что такое РВД? It's a design and development approach

What problem does RWD solves?

Desktop computers -> (1024х768) fixed layout, pixel perfect design Monitors of different resolution -> centered fixed layouts, flexible, elastic layouts Mobiles -> separate mobile site, m dot Tablets & smartphones -> third site???
I HEARD YOU WANT TO BE A WEB DEVELOPER HERE ARE A FEW DEVICES TO TEST YOUR SITE ON
The web has always been fluid; we’ve just wasted a good number of years forcing fixed pixels onto an inherently responsive framework.

Elliot Jay Stocks,Creative Director of Adobe Typekit

Create a new HTML document, add some content, don’t add any CSS, and view that document in a browser. What do you see?
Block elements have 100% width by default.

God father of RWD

05/2010 A List Apart article One website with one URL and content that is resized and reorganized in response to different screen widths and/or other features.
Responsive design is not about ‘designing for mobile’. But it’s not about ‘designing for the desktop’, either. Rather, it’s about adopting a more flexible, device-agnostic approach to designing for the web.

Ethan Marcotte,author of Responsive Web Design (TL;DR A List Apart article)

Content is the king.

Responsive Web Design is:

a design approach for providing optimal viewing and interaction experience easy reading and navigation with minimum panning, zooming and scrolling across a wide range of devices (PC, laptop, tablet, smartphone etc.)

BASE PRINCIPLES OF RWD:

Fluid grids Flexible images Media queries

Fluid grids

  • Define block sizes in %
  • Convert font sizes from px to em (rem)

TARGET / CONTEXT = RESULT

Grid frameworks

HTML based frameworks require adding classes into markupFoundation, Bootstrap, Skeleton

Pure CSS based frameworks rely on pre-processorSusy, Neat, Zen Grids, Singularity

MEDIA QUERIES

Type of media

aural (deprecated in CSS2), braille, handheld, print, projection, screen, tty, tv, embossed (CSS2), speech (CSS2), all (CSS2)

Media features

width, height device-width, device-height orientation aspect-ratio, device-aspect-ratiomore css3-mediaqueries on w3c

Media query example

Start with the small screen first, then expand until it looks like shit. Time for a breakpoint!

Stephan Hay, author of Responsive Design Workflow book

Flexible images

  • max-width: 100%
  • Image replacement
  • HTML5 picture tag
  • Vector graphic

Meta viewport

<meta name="viewport" content="width=device-width, initial-scale=1.0,
                        maximum-scale=1.0, user-scalable=no">

Pixel

The physical pixel

The CSS pixel

The moon from earth is about 24.3px wide The Eiffel Tower from a mile away is about 550.5px tall

THINGS TO CONSIDER:

Screen size

  • Wearables (~280px)
  • Smartphones (320px – 640px)
  • Tablets (600px – 1280px)
  • Laptops, desktop screens (1200px +)
  • hi-res devices (@1.5x, @2x, @3x)
  • Media queries

Features

  • Touch screen
  • Orientation
  • Device API
  • Browser specifics

WHERE TO LEARN MORE?

THANK YOU!

Any other questions?mailto: olena_svietlova@epam.com

Responsive Web Design by Olena Svietlova February 26, 2016