O slideshow foi denunciado.
Seu SlideShare está sendo baixado. ×
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Próximos SlideShares
The value of structured data
The value of structured data
Carregando em…3
×

Confira estes a seguir

1 de 88 Anúncio
Anúncio

Mais Conteúdo rRelacionado

Quem viu também gostou (20)

Semelhante a Media queries (20)

Anúncio

Mais recentes (20)

Anúncio

Media queries

  1. 1. USING MEDIA QUERIES to build Mobile Web Applications
  2. 2. @kevinderudder working for eGuidelines and a lecturer at the Technical University of West Flanders. Contact me on kevin@e-guidelines.be
  3. 3. Website on a desktop Website on a mobile phone
  4. 4. Agenda • Why this topic • Native vs Web apps • Responsive Design • HTML5 and CSS3 to the rescue • Usefull HTML5 Tags • Media Queries
  5. 5. WHY THIS TOPIC
  6. 6. Photo by http://neuroticworkaholic.blogspot.com
  7. 7. As a web developer you should target multiple (all) devices
  8. 8. HOW?? Native vs WEB
  9. 9. Native Development • Windows Metro Applications • XAML with C#, VB.NET or C++ • HTML with JavaScript • iOS apps • Objective C • Android • Java
  10. 10. HTML5 and CSS3 to the rescue
  11. 11. = CONTENT = UI
  12. 12. 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
  13. 13. 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
  14. 14. CSS3 Rounded Colors Box Shadow Text Effects Corners HSL, HSLA Multi-column Box Model Web Fonts Borders layout Media Attribute Background Selectors Queries matching
  15. 15. CSS3 Rounded Colors Box Shadow Text Effects Corners HSL, HSLA Multi-column Box Model Web Fonts Borders layout Media Attribute Background Selectors Queries matching
  16. 16. Let’s get started and change that MVC site into a cross platform/device web application
  17. 17. Before you even think about designing CONTENT IS KING
  18. 18. How do you point to the specific content??
  19. 19. <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”>
  20. 20. <header> <nav> <section> <article> <aside> <article> <footer>
  21. 21. <header /> <nav /> <article /> <section /> <aside /> <footer />
  22. 22. <header /> <nav /> <section /> <aside /> <article />
  23. 23. DEMO
  24. 24. <header /> <nav /> <article /> <section /> <aside /> <footer />
  25. 25. Make it MOBILE
  26. 26. How are you gonna serve the page to the device 1. Redirect 2. Responsive design via Media Queries
  27. 27. How are you gonna serve the page to the device 1. Redirect 2. Responsive design via Media Queries
  28. 28. <script type="text/javascript"> if (screen.width <= 320) { document.location = "m.microsoft.com"; } </script>
  29. 29. This is good, if you want to deliver different content
  30. 30. But, do you create a custom experience for each (new) browser or device
  31. 31. How are you gonna serve the page to the device 1. Redirect 2. Responsive design via Media Queries
  32. 32. What does it mean: RESPONSIVE
  33. 33. Pictures of M. vatia
  34. 34. Pictures of M. vatia
  35. 35. 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
  36. 36. We will only focus on Media Queries
  37. 37. Media Queries allow you write design code based on the characteristics of a device
  38. 38. Media Queries exists out of 2 parts MEDIA QUERY Type Query or Expression @media all and (max-width: 640px) { }
  39. 39. Media Queries exists out of 2 parts 1. Media Type 2. Expression
  40. 40. Media Types
  41. 41. Global.css
  42. 42. 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
  43. 43. AHA, there is something like handheld
  44. 44. @media screen { body { background-color: Red; } } @media handheld { body { background-color: Yellow; } } This is not yellow
  45. 45. Old devices didn’t have capable browsers
  46. 46. Modern mobile devices use screen as media type
  47. 47. Media Queries exists out of 2 parts 1. Media Type 2. Expression
  48. 48. MEDIA QUERY Type Query or Expression @media all and (max-width: 640px) { Feature Value }
  49. 49. The Features Features with min- and max- prefixes • Width • Aspect-ratio • Height • Device-aspect-ratio • Device-width • Color • Device-height • Color-index • Resolution • Monochrome
  50. 50. The Features Features without min- and max- prefixes • Orientation • Scan • Grid
  51. 51. 3 Ways to implement Media Queries 1. 2. 3.
  52. 52. A Media Query
  53. 53. Combine multiple queries
  54. 54. Combine multiple queries
  55. 55. NOT
  56. 56. DEMO
  57. 57. RESOURCES
  58. 58. Thank you kevin@e-guidelines.be

×