How to create an application that looks good on multiple devices using HTML & CSS Slide deck from wdc.il session at Microsoft Raanana

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

7. Why?
Maintainability

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

11. Demo
Getting started

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

13. Demo
Adding Viewport

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

15. Demo
Adding media queries

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

18. Demo
Relative fonts

19. LESS
CSS pre-processor
Extends CSS
Variables
Mixings

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

24. Demo
Using bootstrap

25. Bootstrap grid system
Proportionally scaled grids
Up to 12 columns

26. Demo
Bootstrap grid system

27. Fluid image
Image width / height with percentage
Use auto to gain some performance

28. Demo
Fluid images

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

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