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 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.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; } }

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; }

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 default main { font-size: 13px; 480px and more html.small-more & { font-size: 14px; } 960px and more html.medium-more & { font-size: 15px; } 1280px and more html.large-more & { font-size: 16px; } }

Desktop first default main { font-size: 16px; less than 1280px html.large-less & { font-size: 15px; } less than 960px html.medium-less & { font-size: 14px; } less than 480px html.small-less & { font-size: 13px; } }

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 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.

All active things - ARE ACTIVE 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)

Flexible size A more precise layout that increases / decreases proportionally. It uses relative units em and rem . It changes font size of root HTML element dynamically and everything scales by that.

Time for your questions.... Thanks for your attention!