USING         MEDIA QUERIESto build Mobile Web Applications
@kevinderudder working foreGuidelines and a lecturer at theTechnical University of West Flanders.Contact me on kevin@e-gui...
Website on a desktop   Website on a mobile phone
Agenda•   Why this topic•   Native vs Web apps•   Responsive Design•   HTML5 and CSS3 to the rescue•   Usefull HTML5 Tags•...
WHY THIS TOPIC
Photo by http://neuroticworkaholic.blogspot.com
As a web developer you should target        multiple (all) devices
HOW??Native vs WEB
Native Development• Windows Metro Applications  • XAML with C#, VB.NET or C++  • HTML with JavaScript• iOS apps  • Objecti...
HTML5 and CSS3to the rescue
=   CONTENT=   UI
HTML5   Structure    Indexed DB     File APIs     Forms   Audio and                   History                Web Workers  ...
HTML5   Structure    Indexed DB     File APIs     Forms   Audio and                   History                Web Workers  ...
CSS3       Rounded                    Colors                   Box Shadow                  Text Effects       Corners     ...
CSS3       Rounded                    Colors                   Box Shadow                  Text Effects       Corners     ...
Let’s get started and change that MVC siteinto a cross platform/device web application
Before you even think about designingCONTENT IS KING
How do you point to the specific content??
<div id=“header”> <div id=“top” />...          <div id=“navigation”> <div id=“menu”>...                                 <d...
<header>           <nav>                     <section>                     <article><aside>                     <article> ...
<header />         <nav />                  <article />             <section /> <aside /><footer />
<header />               <nav /><section />              <aside />              <article />
DEMO
<header />         <nav />                  <article />             <section /> <aside /><footer />
Make it MOBILE
How are you gonna serve the page to the device     1. Redirect     2. Responsive design via Media Queries
How are you gonna serve the page to the device     1. Redirect     2. Responsive design via Media Queries
<script type="text/javascript">   if (screen.width <= 320) {       document.location = "m.microsoft.com";   }</script>
This is good, if you want to deliver different                   content
But, do you create a custom experience for       each (new) browser or device
How are you gonna serve the page to the device     1. Redirect     2. Responsive design via Media Queries
What does it mean: RESPONSIVE
Pictures of M. vatia
Pictures of M. vatia
If you want to make your web app responsive, youshould implement 3 ingredients     • A flexible, grid-based layout     • F...
We will only focus on Media Queries
Media Queries allow you write design code based on the characteristics of a device
Media Queries exists out of 2 parts                     MEDIA QUERY          Type               Query or Expression  @medi...
Media Queries exists out of 2 parts 1. Media Type 2. Expression
Media Types
Global.css
The media types                                                             Taken from the W3C siteAll          Suitable f...
AHA, there is something like handheld
@media screen{    body    {         background-color: Red;    }}@media handheld{    body    {         background-color: Ye...
Old devices didn’t have capable browsers
Modern mobile devices use screen as media type
Media Queries exists out of 2 parts 1. Media Type 2. Expression
MEDIA QUERY     Type            Query or Expression@media all and (max-width: 640px) {                   Feature          ...
The FeaturesFeatures with min- and max- prefixes•   Width                     •   Aspect-ratio•   Height                  ...
The FeaturesFeatures without min- and max- prefixes• Orientation• Scan• Grid
3 Ways to implement Media Queries1.2.3.
A Media Query
Combine multiple queries
Combine multiple queries
NOT
DEMO
RESOURCES
Thank youkevin@e-guidelines.be
Media queries
Media queries
Media queries
Media queries
Media queries
Media queries
Media queries
Media queries
Media queries
Media queries
Media queries
Media queries
Media queries
Media queries
Media queries
Media queries
Media queries
Media queries
Media queries
Media queries
Media queries
Media queries
Media queries
Media queries
Media queries
Media queries
Media queries
Media queries
Media queries
Media queries
Upcoming SlideShare
Loading in …5
×

Media queries

1,622 views
1,559 views

Published on

Published in: Design, Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,622
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
71
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Media queries

  1. 1. USING MEDIA QUERIESto build Mobile Web Applications
  2. 2. @kevinderudder working foreGuidelines and a lecturer at theTechnical 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 CSS3to 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 siteinto a cross platform/device web application
  17. 17. Before you even think about designingCONTENT 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, youshould 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 siteAll Suitable for all devicesBraille Intended for braille tactile feedback devicesEmbossed Intended for paged braille printersHandheld Intended for handheld devicesPrint Intended for paged materialProjection Intended for projected presentationsScreen Intended primarily for color computer screensSpeech Inteded for speech synthesizersTty Media using a fixed character gridTv 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 FeaturesFeatures with min- and max- prefixes• Width • Aspect-ratio• Height • Device-aspect-ratio• Device-width • Color• Device-height • Color-index• Resolution • Monochrome
  50. 50. The FeaturesFeatures without min- and max- prefixes• Orientation• Scan• Grid
  51. 51. 3 Ways to implement Media Queries1.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 youkevin@e-guidelines.be

×