the art of responsive design -...

Logi Analytics Confidential & Proprietary

Trevor Denning

The Art of Responsive Design


About Me

2

Trevor DenningWeb Developer

[email protected]


What We Are Going to Learn Today

• Fundamentals of Responsive Design

• Design Challenges & Opportunities

• Responsive Approach

3


FUNDAMENTALS OF RESPONSIVE DESIGNStart Thinking in the Responsive Age


History of Responsive Design

5

Logi Analytics Confidential & ProprietaryLogi Analytics Confidential & Proprietary6

“Fluid grids, flexible images, and media queries are the three technical ingredients for responsive web design, but it also requires a different way of

thinking.”

Ethan Marcotte


A Different Way of Thinking

7

1) Works on everything

2) Clean design

3) Design from content out

4) Design is how it works

5) Less graphic files

6) Keep learning


Think Static FLUID

8

EM unit is equal to the inherited computed font-size for the element.

REM: to the computed value of font-size on the root element.html { font-size: 14px; } .example { height: 2rem; }

.example { font-size: 14px; height: 2em; }


Fluid Containers

9

Boxed Layout

Fluid Layout


Responsive breakpoints

10


Grid System

11


Logi’s Responsive Elements


Design Challenges & Opportunities


Dealing with the Past

14

+ html5 shiv + ie.css

“It’s not often that we encourage you to stop using our products, but for #IE6, we’ll make an exception.

https://developer.microsoft.com/en-us/microsoft-edge/ie6countdown/

JavaScript Library that detects HTML5 and CSS3


5 Column Grid

15


Responsive Dashboard

16


Sticky Position

17


Demo


Responsive Approach


Mobile First

20

Why?

• Number of Mobile users is growing.

• Mobile finally passed desktopusage

Why is it great?

• It’s in the data

• Quicker implementation

• Numbers are growing

• Content first

• Focus on what is most important

Why it sucks?

• More canvas = More freedom

• Making the transition


Take Inventory

21


Prioritize Content for Each View

22

0. Always Hidden

1. Above the fold

2. Just below or bottom of the fold

3. Below the fold

4. Bottom of page

5. Hidden in view


Yesterday’s Design Workflow

23

Sketch

WireframeMockup

Prototype

Logi Analytics Confidential & ProprietaryLogi Analytics Confidential & Proprietary

New Design Workflow

24


Advice

25

• Know the trends

• Design for touch

• Make interactions clear

• Do not forget about navigation

• Cut down on content


Thank You

Source can be downloaded at: https://content.logianalytics.com/logi_public/681fca

https://content.logianalytics.com/logi_public/681fca

the art of responsive design -...

Documents