JS.ResponsiveHow to make responsive design better...

Responsive design

What is it?

?

Responsive design

What is it?

● it is not a fixed image

● it is adjusting in some situations / conditions (or change totaly)

● different on various devices (optimized for target devices)

Media Queries

Advantages:

● no need of Javascript - but neglitible nowadays

Why we don’t use Media Queries in WEZEO:

● less options - we can detect and distinguish much more states and conditions

● no Javascript API - missing API to events when something change

JS.Responsive

Tool for supporting responsive design with Javascript API.

The main principle is that on HTML element are added classes (in order of device, borwsers, states and conditions), according to which you can provide conditional style for all content of your web.

Some of the features are automatically detected and the other needs to be initiated via Javascript API, e.g. Initialization of tracking of break-points width on web page.

Project website:

https://jsresponsive.wezeo.com/

JS.ResponsiveExample in SASS:

a { font-size: 16px;

html.touch & { font-size: 14px; text-decoration: none; border-radius: 1.5em; padding: 0.5em 1em; background-color: gray; }}

JS.ResponsiveExample in CSS:

a { font-size: 16px;}

html.touch a { font-size: 14px; text-decoration: none; border-radius: 1.5em; padding: 0.5em 1em; background-color: gray;}

Demo in your mobile device

Let’s show it in practice.Just open link below in your mobile browser:

http://responsive.at.wezeo.com

Horizontal break points

Initialization in JS.Responsive - alternative of Media Queries:

JS.Responsive

.addHorizontalBreakPoint( 'x-small', 320 )

.addHorizontalBreakPoint( 'small', 480 )

.addHorizontalBreakPoint( 'medium', 960 )

.addHorizontalBreakPoint( 'large', 1280 )

.addHorizontalBreakPoint( 'x-large', 1920 );

Mobile first

main { font-size: 13px;

html.small-more & { font-size: 14px; }

html.medium-more & { font-size: 15px; }

html.large-more & { font-size: 16px; }}

default

480px and more

960px and more

1280px and more

Desktop first

main { font-size: 16px;

html.large-less & { font-size: 15px; }

html.medium-less & { font-size: 14px; }

html.small-less & { font-size: 13px; }}

default

less than 1280px

less than 960px

less than 480px

Orientation vs. Device Orientation

Ratio of width and height of window

landscape / portrait

real device orientation

device-orientation-portrait / device-orientation-landscape

device-orientation-0 / device-orientation-90 / device-orientation-180 / device-orientation-270

Display density

Pixel density / retina - auto resampled screen:

normal-display / hires-display / display-pixel-ratio-{n}

.display-pixel-ratio-1-more / .display-pixel-ratio-3-less

Mouse device vs. Touch device

Pre zariadenia, ktoré podporujú myš aj touch zároveň, je možné prispôsobiť dizajn optimálny pre ten-ktorý spôsob ovládania a plynulo dizajn transformovať medzi týmito stavmi. Viď demo:

Document state

state-uninitialized / state-interactive / state-complete / state-loaded / state-unloading

parallel states: state-complete + state-loaded

Window focus

window-focused / window-blured

All active things - ARE ACTIVE

Everything you can click,drag, edit, close, have to react in some visual way.

Mouse: mouseover / click

Touch: tap

All active things - ARE ACTIVEa:link { … }“Allegedly” not visited link – that is not true, it is set default for all links.

a:visited { … }Visited link. Security issue: possibility to find out which sites were visited by user.

a:hover { … }Mouse pointer focus (onmouseover) – on touch devices as simulation (stays after touch).

a:focus { … }Focus for possible input from keyboard. iOS by default does not support this feature.

a:active { … }Currently pressed link/button, after click/touch release the state ends.

Custom pseudo classes

.hover { … }Mouseover on mouse-device, tap event on touch-device. For most of the cases this solution is sufficient.Class will be set also for all parent elements.

.active { … }Mousedown on mouse-device, tap event on touch-device.I suggest to use for submit buttons, when user wants to be sure, that click/touch happened.Class will be set also for all parent elements.

Different duration times: .active-short (10ms), .active (150ms), .active-long (500ms)

All active things - ARE ACTIVE

Flexible size

A more precise layout that increases / decreases proportionally.

It uses relative unitsem and rem.

It changes font size of root HTML element dynamically and everything scales by that.

Time for your questions....

Thanks for your attention!