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

8. WHY THIS TOPIC

9. Photo by http://neuroticworkaholic.blogspot.com

12. As a web developer you should target
multiple (all) devices

13. HOW??
Native vs WEB

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

80. Combine multiple queries

81. Combine multiple queries

82. NOT

83. DEMO

84. RESOURCES

88. Thank you
kevin@e-guidelines.be