DYNAMIC USER INTERFACESfor Desktop and MobileIliyan PeychevLiferay Core Developer
Agenda●    Responsive design using JavaScript - AlloyUI Viewport●    Responsive design using CSS - Media Queries●    Dynam...
Responsive design using JavaScript    AlloyUI Viewport allows you to adapt your layout based    on the following size grou...
Overwriting the magic numbersThese are in "defaults.viewport" namespace so you can                    overwrite them.     ...
Supports greater than or less than the              specified widths.●    It is also possible to target widths, greater th...
How to use itJust add "aui-viewport" module to the list of modules on                      your page:                     ...
How does it work It adds a few classes to the HTML element depending on                  the width of the window:         ...
AUI Viewport example      Order the navigation items in a row for tablets...                                              ...
AUI Viewport example            ...or in column mode for smart phones                                                    C...
Target specific browsers                                              CSS/* Browsers on smartphones */.touch.aui-view-lt72...
Pros and cons                              Pros●    Simple and powerful●    Will work on browsers which dont support Media...
Supported browsers                     6+
Responsive Design using Media Queries
Responsive Design using Media QueriesMedia Queries allow adapting the same content to a specific                 range of ...
Responsive Design using Media QueriesMedia Queries allow adapting the same content to a specific                 range of ...
Loading CSS file only if needed                                                          HTML<link media="(min-width: 40.5...
Example        Apply a style sheet only in portrait orientation:                                                          ...
A CSS pixel is not always a device pixel  Web developers traditionally assumed a CSS pixel as a                      devic...
Resolving the situation                                                             CSS @media only screen and ( -webkit-m...
Supported browsers                     9+
Retrieving data
Retrieving data Pjax Utility
Pjax UtilityProgressively enhance normal links on a page.
Pjax Utility       Progressively enhance normal links on a page.In this way clicks result in the linked content being load...
How to use it                  Plug the module to the content:                                                    JavaScri...
Make the links Pjax-ableBy default Pjax module will handle links which have ".yui3-                       pjax" class. It ...
How does it work●    By default the Pjax instance listens to clicks on any link on    the page that has a “yui3-pjax” clas...
A.Plugin.ScrollInfo                   Useful when you want to:●    Implement infinite scrolling●    Lazy-load content●    ...
How to use it       Plug the module to a node (may be the page body):var body = A.one(body);                              ...
Provides useful informationFires multiple events depending on the direction user scrolled the content:●    scrollToBottom ...
The future
The futureCSS Flexible Box Layout Module
CSS Flexible Box Layout Module●    CSS box model optimized for user interface design.●    Similar to block layout.●    Des...
The “Holy Grail Layout”                       <header>     <nav>             <article>                <aside>●   Topic 1  ...
The “Holy Grail Layout” source code<!DOCTYPE html>                                  HTML<header>Example Header</header><di...
The “Holy Grail Layout”                           <header>     <nav>                 <article>               <aside>●   To...
What about mobile?    Just restore document order and set the width to auto@media screen and (max-width: 600px) {         ...
The “Holy Grail Layout” mobile view                <header>                 <article>           Dynamic User Interfaces   ...
Creating a header  Use “margin-left: auto” to separate flex items in “groups”. .header {                                  ...
Switching from row to column is                 easy●   The contents of a flex container can be laid out in any    directi...
Center content vertically.container {                                     CSS    align-items: center;    justify-content: ...
Reverse the order (row-reverse)                                                CSS.container {    flex-direction: row-reve...
Reverse the order (column-reverse)                                      CSS.container {    flex-direction: column-reverse;...
Multi-line flex containerBreaks its flex items across multiple lines. The cross size of each line is   the minimum size ne...
Multi-line auto flex containerSetting "flex: auto;" to the items will force them to absorb any free space                 ...
Supported browsers                                                      10+Notes:Firefox Nightly (18.0a1, from 05.10.2012)...
Summary    Adapting the layout to the device the user is currently    using:●    AlloyUI Viewport (JavaScript) and Media Q...
Summary    Adapting the layout to the device the user is currently    using:●    AlloyUI Viewport (JavaScript) and Media Q...
Summary    Adapting the layout to the device the user is currently    using:●    AlloyUI Viewport (JavaScript) and Media Q...
Questions?Twitter   ipeychevGoogle+ https://plus.google.com/101163834202763493709email     iliyan.peychev@liferay.com
Upcoming SlideShare
Loading in …5
×

Dynamic User Interfaces for Desktop and Mobile

2,130 views
1,931 views

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
2,130
On SlideShare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
29
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Dynamic User Interfaces for Desktop and Mobile

  1. 1. DYNAMIC USER INTERFACESfor Desktop and MobileIliyan PeychevLiferay Core Developer
  2. 2. Agenda● Responsive design using JavaScript - AlloyUI Viewport● Responsive design using CSS - Media Queries● Dynamically retrieving data – Pjax and A.Plugin.ScrollInfo● The future - CSS Flexible Box Layout Module
  3. 3. Responsive design using JavaScript AlloyUI Viewport allows you to adapt your layout based on the following size groups:● 320px - smart phones in portrait mode● 480px - smart phones in landscape mode● 720px - for tablets in portrait mode● 960px - for Desktop browsers
  4. 4. Overwriting the magic numbersThese are in "defaults.viewport" namespace so you can overwrite them. JavaScript var viewport = YUI.AUI.namespace(defaults.viewport); viewport.columns = { ... };
  5. 5. Supports greater than or less than the specified widths.● It is also possible to target widths, greater than or less than the specified.● If you have a device with 600x800px screen resolution, you can still target that device with the CSS classes.
  6. 6. How to use itJust add "aui-viewport" module to the list of modules on your page: JavaScriptAUI().use(aui-viewport, ...);
  7. 7. How does it work It adds a few classes to the HTML element depending on the width of the window: HTML <html class="aui-view-gt320 aui-view-gt480 aui-view-gt720 aui- view-gt960 aui-view-960">Based on these classes, you may create selectors which match some devices only.
  8. 8. AUI Viewport example Order the navigation items in a row for tablets... CSS#navigation li { display: inline; float: left;}
  9. 9. AUI Viewport example ...or in column mode for smart phones CSS.aui-view-lt720 #navigation li { display: block; float: none;}
  10. 10. Target specific browsers CSS/* Browsers on smartphones */.touch.aui-view-lt720 {}/* Webkit based tablets and smartphones */.webkit.aui-view-lt960 {}/* Smaller browser views on just Windows */.win.aui-view-720 {}
  11. 11. Pros and cons Pros● Simple and powerful● Will work on browsers which dont support Media Queries Cons● Will not work if JavaScript is disabled● JavaScript blocks rendering process
  12. 12. Supported browsers 6+
  13. 13. Responsive Design using Media Queries
  14. 14. Responsive Design using Media QueriesMedia Queries allow adapting the same content to a specific range of output devices.
  15. 15. Responsive Design using Media QueriesMedia Queries allow adapting the same content to a specific range of output devices. CSS3 Media Queries extend the media queries we had in HTML4 [HTML401] and CSS2 [CSS21]:‘aural’, ‘braille’, ‘handheld’, ‘print’, ‘projection’, ‘screen’, ‘tty’, ‘tv’
  16. 16. Loading CSS file only if needed HTML<link media="(min-width: 40.5em)" href="extensions.css"rel="stylesheet" /> HTML<link media="not screen and (color)" href="example.css"rel="stylesheet" />
  17. 17. Example Apply a style sheet only in portrait orientation: CSS@media all and (orientation: portrait) {….}
  18. 18. A CSS pixel is not always a device pixel Web developers traditionally assumed a CSS pixel as a device pixel. However, on high DPI devices (such as iPhone 4+) a CSS pixel may repsesent multiple pixels on screen.If we set zoom magnifcation of 2x, then 1 CSS pixel would actually be represented by a 2×2 square of device pixels.
  19. 19. Resolving the situation CSS @media only screen and ( -webkit-min-device-pixel-ratio: 2 ), only screen and ( min--moz-device-pixel-ratio: 2 ), only screen and ( -o-min-device-pixel-ratio: 2/1 ), only screen and ( min-device-pixel-ratio: 2 ), only screen and ( min-resolution: 192dpi ), only screen and ( min-resolution: 2dppx ) { /* Retina-specific stuff here */ }Opera requires fractions for the device-pixel-ratioParam. Firefox 16 supports "min-resolution"using the dppx unit.Credits to css-tricks.com
  20. 20. Supported browsers 9+
  21. 21. Retrieving data
  22. 22. Retrieving data Pjax Utility
  23. 23. Pjax UtilityProgressively enhance normal links on a page.
  24. 24. Pjax Utility Progressively enhance normal links on a page.In this way clicks result in the linked content being loaded via Ajax.
  25. 25. How to use it Plug the module to the content: JavaScriptAUI().use(pjax, function (A) { new A.Pjax({container: #content});});
  26. 26. Make the links Pjax-ableBy default Pjax module will handle links which have ".yui3- pjax" class. It is easy to customize this by overwriting "linkSelector" attribute of Pjax module.
  27. 27. How does it work● By default the Pjax instance listens to clicks on any link on the page that has a “yui3-pjax” class.● When a “yui3-pjax” link is clicked, its URL will be loaded via Ajax and the loaded content will be inserted into the “#content” div, replacing its existing contents.● When the Pjax Utility makes an Ajax request to the server, it adds a special X-PJAX HTTP header to the request.
  28. 28. A.Plugin.ScrollInfo Useful when you want to:● Implement infinite scrolling● Lazy-load content● Display data in the same way as native applications do it
  29. 29. How to use it Plug the module to a node (may be the page body):var body = A.one(body); JavaScriptbody.plug(A.Plugin.ScrollInfo);body.scrollInfo.on(scrollToBottom, function (event) { // Load more content when the user scrolls to the bottom of the page.});
  30. 30. Provides useful informationFires multiple events depending on the direction user scrolled the content:● scrollToBottom – probably the most useful event● scrollDown● scrollLeft● scrollRight● scrollToLeft● scrollToRight● scrollToTop● scrollUp
  31. 31. The future
  32. 32. The futureCSS Flexible Box Layout Module
  33. 33. CSS Flexible Box Layout Module● CSS box model optimized for user interface design.● Similar to block layout.● Designed for laying out more complex applications and webpages.● Contents can be laid out in any flow direction.● Display order can be reversed.● Can “flex” contents sizes to respond to the available space.
  34. 34. The “Holy Grail Layout” <header> <nav> <article> <aside>● Topic 1 Dynamic User Interfaces Speakers● Topic 2● Topic 3● Topic 4● Topic 5 <footer> Liferay Symposium 2012
  35. 35. The “Holy Grail Layout” source code<!DOCTYPE html> HTML<header>Example Header</header><div id="main"> <article>Dynamic User Interfaces</article> <nav>Topics</nav> <aside>Speakers</aside></div><footer>Liferay Symposium 2012</footer>
  36. 36. The “Holy Grail Layout” <header> <nav> <article> <aside>● Topic 1 Dynamic User Interfaces Speakers● Topic 2● Topic 3● Topic 4● Topic 5 <footer> Liferay Symposium 2012 CSS#main { display: flex; }nav { order: 1; width: 200px; }article { order: 2; flex: 1; }aside { order: 3; width: 200px; }
  37. 37. What about mobile? Just restore document order and set the width to auto@media screen and (max-width: 600px) { CSS #main { flex-direction: column; } article { flex: none; } article, nav, aside { order: 0; width: auto; }}
  38. 38. The “Holy Grail Layout” mobile view <header> <article> Dynamic User Interfaces <nav> Topic 1 <aside> Speakers <footer> Liferay Symposium 2012
  39. 39. Creating a header Use “margin-left: auto” to separate flex items in “groups”. .header { CSS display: flex; } .header .login { margin-left: auto; }The result: Products Services Partners Sign In
  40. 40. Switching from row to column is easy● The contents of a flex container can be laid out in any direction and in any order.● This functionality is exposed through the flex-direction, flex-wrap, and order properties.● Keep in mind this affects only the visual rendering and it will leave the speech order and navigation based on the source order.
  41. 41. Center content vertically.container { CSS align-items: center; justify-content: center; display: flex;} Item 1 Item 2 Item 3
  42. 42. Reverse the order (row-reverse) CSS.container { flex-direction: row-reverse; ...} Item 3 Item 2 Item 1
  43. 43. Reverse the order (column-reverse) CSS.container { flex-direction: column-reverse; ...} Item 3 Item 2 Item 1
  44. 44. Multi-line flex containerBreaks its flex items across multiple lines. The cross size of each line is the minimum size necessary to contain the flex items on the line. CSS.container { display: flex; width: 400px; }.multi-line .item { width: 100px;} Item 1 Item 2 Item 3 Item 4 Item 5
  45. 45. Multi-line auto flex containerSetting "flex: auto;" to the items will force them to absorb any free space remaining. CSS.multi-line .item { flex: auto; /* or flex: 1 1 auto; */ width: 100px;} Item 1 Item 2 Item 3 Item 4 Item 5
  46. 46. Supported browsers 10+Notes:Firefox Nightly (18.0a1, from 05.10.2012) requires to turn on“layout.css.flexbox.enabled” in about:configAccording to MSDN, IE10 will support the version from 22 March 2012
  47. 47. Summary Adapting the layout to the device the user is currently using:● AlloyUI Viewport (JavaScript) and Media Queries (CSS)
  48. 48. Summary Adapting the layout to the device the user is currently using:● AlloyUI Viewport (JavaScript) and Media Queries (CSS) Retrieving the data dynamically:● Pjax Utility and ScrollInfo plugin
  49. 49. Summary Adapting the layout to the device the user is currently using:● AlloyUI Viewport (JavaScript) and Media Queries (CSS) Retrieving the data dynamically:● Pjax Utility and ScrollInfo plugin Looking at the future:● Keep CSS Flexbox Layout in your radar and stay tuned :)
  50. 50. Questions?Twitter ipeychevGoogle+ https://plus.google.com/101163834202763493709email iliyan.peychev@liferay.com

×