js.responsive · js.responsive example in css: a { font-size: 16px;} html.touch a { font-size:...
TRANSCRIPT
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
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.