Media queries
Upcoming SlideShare
Loading in...5
×
 

Media queries

on

  • 1,607 views

 

Statistics

Views

Total Views
1,607
Views on SlideShare
1,607
Embed Views
0

Actions

Likes
1
Downloads
68
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Media queries Media queries Presentation Transcript

  • USING MEDIA QUERIESto build Mobile Web Applications
  • @kevinderudder working foreGuidelines and a lecturer at theTechnical 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 CSS3to the rescue
  • = CONTENT= UI
  • 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
  • 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
  • CSS3 Rounded Colors Box Shadow Text Effects Corners HSL, HSLA Multi-column Box Model Web Fonts Borders layout Media Attribute Background Selectors Queries matching
  • CSS3 Rounded Colors Box Shadow Text Effects Corners HSL, HSLA Multi-column Box Model Web Fonts Borders layout Media Attribute Background Selectors Queries matching
  • 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”>... <div id=“main”> <div class=“content”><div id=“left”> <div class=“content”> <div id=“footer”>
  • <header> <nav> <section> <article><aside> <article> <footer>
  • <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 • 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 Queries exists out of 2 parts MEDIA QUERY Type Query or Expression @media all and (max-width: 640px) { }
  • 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 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
  • 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
  • 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 Value}
  • The FeaturesFeatures with min- and max- prefixes• Width • Aspect-ratio• Height • Device-aspect-ratio• Device-width • Color• Device-height • Color-index• Resolution • Monochrome
  • 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