Media queries
-
Upload
kevin-derudder -
Category
Design
-
view
1.353 -
download
2
Transcript of Media queries
USING MEDIA QUERIES
to build Mobile Web Applications
@kevinderudder working for eGuidelines and a lecturer at the Technical University of West Flanders. Contact me on [email protected]
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
• Media Queries
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 • Objective C
• Android • Java
HTML5 and CSS3 to the rescue
= CONTENT
= UI
HTML5
Structure
Audio and Video
Canvas
Web Storage
Indexed DB
Web Workers
WebSockets
Server-Sent Events
File APIs
History Navigation
Drag and Drop
Offline
Forms
XHR2
Messaging
Geolocation
...
HTML5
Structure
Audio and Video
Canvas
Web Storage
Indexed DB
Web Workers
WebSockets
Server-Sent Events
File APIs
History Navigation
Drag and Drop
Offline
XHR2
Messaging
Geolocation
...
Forms
CSS3
Rounded Corners
Box Shadow Colors
HSL, HSLA Text Effects
Attribute matching
Box Model Web Fonts
Selectors
Multi-column layout
Borders
Media Queries
Background
CSS3
Rounded Corners
Box Shadow Colors
HSL, HSLA Text Effects
Attribute matching
Box Model Web Fonts
Selectors
Multi-column layout
Borders
Media Queries
Background
Let’s get started and change that MVC site into a cross platform/device web application
Before you even think about designing
CONTENT IS KING
How do you point to the specific content??
<div id=“main”>
<div id=“header”> <div id=“top” />...
<div id=“left”>
<div class=“content”>
<div id=“footer”>
<div id=“navigation”> <div id=“menu”>...
<div class=“content”>
<section>
<header>
<aside>
<article>
<footer>
<nav>
<article>
<header /> <nav />
<footer />
<aside />
<article /> <section />
<header />
<nav />
<article />
<aside />
<section />
DEMO
<header /> <nav />
<section />
<footer />
<aside />
<article />
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, you should implement 3 ingredients
• A flexible, grid-based layout • Flexible images and media • Media Queries
We will only focus on Media Queries
Media Queries allow you write design code based on the characteristics of a device
@media all and (max-width: 640px) { }
MEDIA QUERY
Type Query or Expression
Media Queries exists out of 2 parts
1. Media Type 2. Expression
Media Queries exists out of 2 parts
Media Types
Global.css
The media types
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
Taken from the W3C site
AHA, there is something like handheld
@media screen { body { background-color: Red; } } @media handheld { body { background-color: Yellow; } }
This is not yellow
Old devices didn’t have capable browsers
Modern mobile devices use screen as media type
1. Media Type 2. Expression
Media Queries exists out of 2 parts
@media all and (max-width: 640px) { }
MEDIA QUERY
Feature Value
Type Query or Expression
• Width
• Height
• Device-width
• Device-height
• Resolution
• Aspect-ratio
• Device-aspect-ratio
• Color
• Color-index
• Monochrome
The Features
Features with min- and max- prefixes
• Orientation
• Scan
• Grid
The Features
Features without min- and max- prefixes
3 Ways to implement Media Queries
1.
2.
3.
A Media Query
Combine multiple queries
Combine multiple queries
NOT
DEMO
RESOURCES
Thank you [email protected]