SLIDE 1
JS.Responsive
How to make responsive design better...
JS.Responsive How to make responsive design better... Responsive - - PowerPoint PPT Presentation
JS.Responsive How to make responsive design better... Responsive - - PowerPoint PPT Presentation
JS.Responsive How 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
SLIDE 2
SLIDE 3
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)
SLIDE 4
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
SLIDE 5
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/
SLIDE 6
JS.Responsive
Example 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; } }
SLIDE 7
JS.Responsive
Example 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; }
SLIDE 8
Demo in your mobile device Let’s show it in practice. Just open link below in your mobile browser:
http://responsive.at.wezeo.com
SLIDE 9
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 );
SLIDE 10
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
SLIDE 11
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
SLIDE 12
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
SLIDE 13
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
SLIDE 14
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
- vládania a plynulo dizajn
transformovať medzi týmito
- stavmi. Viď demo:
SLIDE 15
Document state
state-uninitialized / state-interactive / state-complete / state-loaded / state-unloading
parallel states:
state-complete + state-loaded
SLIDE 16
Window focus
window-focused / window-blured
SLIDE 17
All active things - ARE ACTIVE
Everything you can click, drag, edit, close, have to react in some visual way. Mouse: mouseover / click Touch: tap
SLIDE 18
All active things - ARE ACTIVE
a: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.
SLIDE 19
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
SLIDE 20
Flexible size
A more precise layout that increases / decreases proportionally. It uses relative units
em and rem.
It changes font size
- f root HTML element
dynamically and everything scales by that.
SLIDE 21