Responsive ui
0 likes767 views
The document discusses the importance of creating responsive applications that function well across all device types, emphasizing techniques such as media queries, viewport settings, and the use of frameworks like Bootstrap. It covers various methods to implement responsive design, including client-side and server-side strategies, and highlights the significance of maintaining a single codebase. The presentation also includes practical demos and resources for further learning about responsive design principles.
Responsive ui
- 1. © Copyright SELA software & Education Labs Ltd. | 14-18 Baruch Hirsch St Bnei Brak, 51202 Israel | www.selagroup.com Responsive UI Ran Wahle
- 2. How many applications do we need?
- 3. © Copyright SELA software & Education Labs Ltd. | 14-18 Baruch Hirsch St Bnei Brak, 51202 Israel | www.selagroup.com One confession before I begin… I am not a UI designer
- 4. Agenda Our Mission Viewports Media Query Font Size LESS (Or SASS) Bootstrap Fluid Images
- 5. Our Mission Create an application, The same app for all devices
- 6. Why Not? Redundant elements and code downloaded to the client Redundant data may be downloaded Sometimes mobile pages need to look entirely different
- 8. Ways to do it Screens for each device type The same screen, looks different for each device type
- 9. Ways to do it (contd.) Screen for each device Same screen, looks different On server side, parse user agent Change styling according to device properties Direct the user to another URL / Create another screen Relate only to device properties Client side only Pros Pros More organized Less screens to maintain Less elements to render No server side code
- 10. Tools
- 12. Viewport An HTML5 meta tag Define the dimensions of what is being viewed Define the initial scale We can set the width to the device screen
- 14. Media Queries Rules of styles depending on media types We can show / hide areas depending on screen width We can change styling depending on width
- 16. Relative font size em units rem units Viewport related
- 17. Viewport width related font-size: 1vw; //1% of viewport width font-size: 1vh; //1% of viewport height font-size: 1vmin; //1% of the smaller dimension font-size: 1vmax; //1% of the larger dimension
- 20. Demo LESS
- 21. Bootstrap CSS & Javascript library Mobile first design Built in media queries Declarative and programmatic use of plugins
- 22. Bootstrap terminology xs – Exrta small (Phones < 768px) sm – Small Medium (Tablets, from 768px to 992px) md – Medium (992px to 1200px) lg – Large ( > 1200px)
- 23. Bootstrap visibility classes (from getBootstrap.com) Extra small devicesPhones (<768px) Small devicesTablets (≥768px) Medium devicesDesktop s (≥992px) Large devicesDesktop s (≥1200px) .visible-xs-* Visible Hidden Hidden Hidden .visible-sm-* Hidden Visible Hidden Hidden .visible-md-* Hidden Hidden Visible Hidden .visible-lg-* Hidden Hidden Hidden Visible .hidden-xs Hidden Visible Visible Visible .hidden-sm Visible Hidden Visible Visible .hidden-md Visible Visible Hidden Visible .hidden-lg Visible Visible Visible Hidden
- 25. Bootstrap grid system Proportionally scaled grids Up to 12 columns
- 27. Fluid image Image width / height with percentage Use auto to gain some performance
- 29. Picture element HTML5 element Contains multiple image sources Each source can have its own media rules
- 30. <picture> <source srcset="../content/images/lastSupper/supper.jpg" media="(min-width: 720px)"> <source srcset="../content/images/lastSupper/supper_1.jpg" media="(min-width: 672px)"> <img src="../content/images/inconceivable.jpeg" alt="Inconceivable"> </picture> Picture element
- 32. Questions
- 33. We’ve started with an unresponsive app Gradually added styles made it more responsive Using HTML standards we can make our pages responsive The same HTML & CSS can serve multiple device types Our app still needs a designer’s touch Well… I am not a UI guy So…
- 34. HTML5 (MDN) https://developer.mozilla.org/en- US/docs/Web/Guide/HTML/HTML5 Media Queries (MDN): https://developer.mozilla.org/en- US/docs/Web/Guide/CSS/Media_queries LESS: http://lesscss.org/ bootstrap: http://getbootstrap.com/ CSS tricks: http://css-tricks.com/ Additional Reading
- 35. © Copyright SELA software & Education Labs Ltd. | 14-18 Baruch Hirsch St Bnei Brak, 51202 Israel | www.selagroup.com Thank you Ran Wahle http://blogs.Microsoft.co.il/ranw Twitter: @ranwahle ranw@sela.co.il