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 kevin@e-guidelines.be

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

http://phonegap.com/start

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

http://www.mediaqueri.es/

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 kevin@e-guidelines.be