The View of the World Depends on the Glasses I Wear

Download this episode

Download Video

Description

There is no mobile Web, there is no desktop Web, and there is no tablet Web. We view the same Web just in different ways. So how do we do it? Sitting next to HTML5 is its friend CSS3 with its support for Media Queries. Media Queries let you customize your web experience based on parameters of display, device, properties and more. If you are a designer or front-end developer, come to this session to explore the sheer brutality of CSS3 Media Queries.
For more information, check out this course on Microsoft Virtual Academy:

Day:

2

Level:

300

Code:

HTM09

Embed

Format

Available formats for this video:

Actual format may change based on video formats available and browser capability.

    The Discussion

    • User profile image
      Michael Palermo

      This looks like it is going to be a fantastic presentation. Looking forward to seeing it in person!

    • User profile image
      palermo4

      Doh!  I wasn't logged in on my previous comment.  Anyway, I think this is a "must-see" for any serious web developer/designer.

    • User profile image
      Joey

      "There is no mobile Web, there is no desktop Web, and there is no tablet Web. We view the same Web just in different ways. So how do we do it? Sitting next to HTML5 is its friend CSS3 with its support for Media Queries."

      This is one of the worst ideas spreading these days.
      I agree for desktop/ipad (no, not for 7" tablets), but mobile ?
      Look at the one example URL http://sasquatchfestival.com/ (which, by the way, is much too big on a 24" full HD monitor) : wow, it can be resized for mobile, so great ! Yay ! Impressive !

      But it uses the same images than the big desktop version and plenty of hidden HTML tags. So ok, if you want a slow responsiveness and make the users phones download 3 f*cking Mo of data to show a single page, go for it. I made a little test : over wifi on a mobile iPhone 3G, it took 30s before i had something else than a black screen, 45s before i see the navigation and 1mn to finish the loading of the page.
      Maybe you want to give a try over 3G, i don't. I dont have enough patience.

      People concerned with performance will use two different HTML templates, load what's necessary, have a clean DOM, AND develop faster. No crazy tricks, just two clean models.
      That said, they will use media queries but for screen adjustment, but not to get an absolutely different layout, different menu and so...

    • User profile image
      kit mancini

      i would like to know where I can find information about behaviours in CSS without using Java ,I would also like to know if you can convert a wow slider to HTML5 and use media queries to resize and

    Comments closed

    Comments have been closed since this content was published more than 30 days ago, but if you'd like to send us feedback you can Contact Us.