Media queries
- 1. USING MEDIA QUERIES to build Mobile Web Applications
- 2. @kevinderudder working for eGuidelines and a lecturer at the Technical University of West Flanders. Contact me on kevin@e-guidelines.be
- 4. Website on a desktop Website on a mobile phone
- 7. Agenda • Why this topic • Native vs Web apps • Responsive Design • HTML5 and CSS3 to the rescue • Usefull HTML5 Tags • Media Queries
- 12. As a web developer you should target multiple (all) devices
- 14. Native Development • Windows Metro Applications • XAML with C#, VB.NET or C++ • HTML with JavaScript • iOS apps • Objective C • Android • Java
- 15. HTML5 and CSS3 to the rescue
- 16. = CONTENT = UI
- 18. HTML5 Structure Indexed DB File APIs Forms Audio and History Web Workers XHR2 Video Navigation ... Drag and Canvas WebSockets Messaging Drop Server-Sent Web Storage Offline Geolocation Events
- 19. HTML5 Structure Indexed DB File APIs Forms Audio and History Web Workers XHR2 Video Navigation ... Drag and Canvas WebSockets Messaging Drop Server-Sent Web Storage Offline Geolocation Events
- 20. CSS3 Rounded Colors Box Shadow Text Effects Corners HSL, HSLA Multi-column Box Model Web Fonts Borders layout Media Attribute Background Selectors Queries matching
- 21. CSS3 Rounded Colors Box Shadow Text Effects Corners HSL, HSLA Multi-column Box Model Web Fonts Borders layout Media Attribute Background Selectors Queries matching
- 26. Let’s get started and change that MVC site into a cross platform/device web application
- 27. Before you even think about designing CONTENT IS KING
- 30. How do you point to the specific content??
- 31. <div id=“header”> <div id=“top” />... <div id=“navigation”> <div id=“menu”>... <div id=“main”> <div class=“content”> <div id=“left”> <div class=“content”> <div id=“footer”>
- 32. <header> <nav> <section> <article> <aside> <article> <footer>
- 34. <header /> <nav /> <article /> <section /> <aside /> <footer />
- 35. <header /> <nav /> <section /> <aside /> <article />
- 36. DEMO
- 37. <header /> <nav /> <article /> <section /> <aside /> <footer />
- 38. Make it MOBILE
- 39. How are you gonna serve the page to the device 1. Redirect 2. Responsive design via Media Queries
- 40. How are you gonna serve the page to the device 1. Redirect 2. Responsive design via Media Queries
- 41. <script type="text/javascript"> if (screen.width <= 320) { document.location = "m.microsoft.com"; } </script>
- 45. This is good, if you want to deliver different content
- 48. But, do you create a custom experience for each (new) browser or device
- 49. How are you gonna serve the page to the device 1. Redirect 2. Responsive design via Media Queries
- 50. What does it mean: RESPONSIVE
- 51. Pictures of M. vatia
- 52. Pictures of M. vatia
- 57. If you want to make your web app responsive, you should implement 3 ingredients • A flexible, grid-based layout • Flexible images and media • Media Queries
- 59. We will only focus on Media Queries
- 63. Media Queries allow you write design code based on the characteristics of a device
- 64. Media Queries exists out of 2 parts MEDIA QUERY Type Query or Expression @media all and (max-width: 640px) { }
- 65. Media Queries exists out of 2 parts 1. Media Type 2. Expression
- 66. Media Types
- 68. Global.css
- 69. The media types Taken from the W3C site All Suitable for all devices Braille Intended for braille tactile feedback devices Embossed Intended for paged braille printers Handheld Intended for handheld devices Print Intended for paged material Projection Intended for projected presentations Screen Intended primarily for color computer screens Speech Inteded for speech synthesizers Tty Media using a fixed character grid Tv Intended for television-type devices
- 70. AHA, there is something like handheld
- 71. @media screen { body { background-color: Red; } } @media handheld { body { background-color: Yellow; } } This is not yellow
- 72. Old devices didn’t have capable browsers
- 73. Modern mobile devices use screen as media type
- 74. Media Queries exists out of 2 parts 1. Media Type 2. Expression
- 75. MEDIA QUERY Type Query or Expression @media all and (max-width: 640px) { Feature Value }
- 76. The Features Features with min- and max- prefixes • Width • Aspect-ratio • Height • Device-aspect-ratio • Device-width • Color • Device-height • Color-index • Resolution • Monochrome
- 77. The Features Features without min- and max- prefixes • Orientation • Scan • Grid
- 78. 3 Ways to implement Media Queries 1. 2. 3.
- 79. A Media Query
- 82. NOT
- 83. DEMO
- 84. RESOURCES