www.webdeveloper.com
Results 1 to 9 of 9

Thread: Deployment of media queries

  1. #1
    Join Date
    Aug 2006
    Posts
    1,904

    Deployment of media queries

    I'm curious to know if anyone has stats on how well the media query technology is penetrating the market. Are you using them successfully as the sole solution for your mobile apps, or are you still using some other technology to determine browser size or "mobility" of your client?

    I'm not looking for pros and cons of using mq, just trying to understand whether they are ready for prime time usage.

    Thanks
    Dave

  2. #2
    Join Date
    Mar 2012
    Posts
    1,405
    I am using fluid design techniques, i.e. just percentages, min-width, max-width, float and clear to enable a page to automatically adjust to screen widths down to 320 pixels. I investigated using media types "screen" and "handheld" but found them unreliable.

  3. #3
    Join Date
    Aug 2006
    Posts
    1,904
    Thanks for the input...
    Dave

  4. #4
    Join Date
    Jul 2012
    Location
    Australia
    Posts
    3
    hi there,
    I have been developing for just over 12 months now, and started to tinker with CSS media queries in the last few months. My opinion is that close to all my websites should be designed using a fluid layout. Even though Responsive Web Design is still in its early stages of implementation by developers, I believe that we should be developing for the future starting now, this way we'd be ahead of the game. If we build our portfolio now using these techniques then when the time comes then we'll be at the forefront of it.

    Cheers
    Dale

  5. #5
    Join Date
    Mar 2012
    Posts
    1,405
    All my web sites have been converted to fluid designs. Also, in my experience media queries can be used, even in HTML4/CSS2, provided that you are aware of the pitfalls, namely: IE8. IE8 does not understand media queries at all, so it is ok if you just want to suppress large graphics etc. on handheld devices, they do not run IE8. E.g. Assuming you have set up classes "screen" and "handheld" such that class "screen" displays on media type "screen" and class "handheld" displays on media type "handheld", code such as:

    <p class="screen">This will appear on media type screen but not handheld</p>

    Works fine, because IE8 is only found on devices with media type "screen". But if you want different text or graphics to appear on different devices, you are scuppered because with code such as:

    <p class="screen">This device is media type screen.</p>
    <p class="handheld">This device is media type handheld.</p>

    Both will appear on IE8:

    This device is media type screen.
    This device is media type handheld.

    So what? Can't we just ignore IE8? Well, global usage stats show that 16.4&#37; of web browsing in June 2012 was on IE8 (or earlier). That's the same as Firefox, and three times as much as Safari (5.47%).

    I would suggest that IE8 (and earlier) usage needs to falls below 1% before we can safely ignore it.
    Last edited by jedaisoul; 07-04-2012 at 05:54 AM.

  6. #6
    Join Date
    Aug 2006
    Posts
    1,904
    Thanks jedaisoul. I've been fiddling with a site (www.ncracing.org) that would be very nice to be able to correctly view on a multitude of devices, as I have many young folks that use it from mobiles. I've been running into some pitfalls with media queries, some of this is just my own learning curve I'm sure. I don't own a smartphone or any "handheld" device, so testing has been down to the online simulators and periodically asking a friend with an iPhone to view the site. For example...
    - I was surprised to find my media query code not working on iphones, and after some research I figured out I needed to add:
    Code:
    <meta name="viewport" content="width=device-width">
    to my pages. None of the iphone simulators correctly caught this - all were showing me a mobile view of my site that was not what was rendered on the actual phone.
    - Reducing image sizes or display:none to eliminate them via media queries works ok as long as you aren't worried about the bandwidth of the full size versions being downloaded anyway even though they aren't displayed. Do you have a solution for this?
    - Perhaps the "screen" and "handheld" style sheets is something I need to focus on, but it was my understanding that they are very loosely implemented among mobile clients, some of which respond to being "screen" even though they have a small size. So I've avoided that route, thinking of it as a legacy implementation. Am I wrong?
    - You describe using "screen" and "handheld" classes above, can you tell me how they get set per browser, I'm not clear? Is it within a stylesheet reference like:
    Code:
    <link rel="stylesheet" type="text/css" href="handheld.css" media="handheld">
    ...in which case, see my above bullet - I've been thinking of that technique as legacy, less and less functional as new mobile devices come out.

    Dave

  7. #7
    Join Date
    Mar 2012
    Posts
    1,405
    Quote Originally Posted by tracknut View Post
    I don't own a smartphone or any "handheld" device, so testing has been down to the online simulators and periodically asking a friend with an iPhone to view the site.
    I was in a similar position a few months ago. The nearest thing to a smart phone I had access to was the experimental browser on a Kindle. That has 600x800 screen, which is too big to represent the smaller screens still in use on the web. I really need a device with a 320x480 screen, and ideally a 320x240 screen, as I'd decided that was the smallest I was going to design for. So over a couple of months I've bought a cheap clone (looks like a BlackBerry but is actually a Symbian device with a 320x240 screen) for &#163;60 or so, and a second-hand A5000 Android clone (with a 320x480 screen) for &#163;50 - new ones are available for &#163;80 or so. So you don't have to pay mega bucks. Both can surf the web via Wifi without a sim card. So they are ideal for testing purposes, with no nasty bills!!!

    Having been able to see my sites on actual devices, I think that at least having a 320x480 Android phone is essential, if you want to learn what works and what doesn't. Not just technically, but visually as well. By the way, I still think emulators, like my EW Emulator, can be useful for routine testing, but they are no substitute for the real thing.

    Quote Originally Posted by tracknut View Post
    - Reducing image sizes or display:none to eliminate them via media queries works ok as long as you aren't worried about the bandwidth of the full size versions being downloaded anyway even though they aren't displayed. Do you have a solution for this?
    Scaling larger images for use on low-bandwidth devices is a no-no. Ideally you need to use separate images and select which to download according to the media/screen. However, I've not found a solution yet for IE8 (and earlier) which will try to display BOTH, making a right mess of the page. That's work in progress. However, I'd have thought that if display is set to none, the images would not be downloaded? Hmm, have to think of a way to test that. If it is a problem, I'll look to use PHP to avoid the images being downloaded. Indeed PHP might be the solution to the IE8 issue as well!!!

    Quote Originally Posted by tracknut View Post
    - Perhaps the "screen" and "handheld" style sheets is something I need to focus on, but it was my understanding that they are very loosely implemented among mobile clients, some of which respond to being "screen" even though they have a small size. So I've avoided that route, thinking of it as a legacy implementation. Am I wrong?
    - You describe using "screen" and "handheld" classes above, can you tell me how they get set per browser
    Quite right. The Symbian phone is media type "handheld" but the Android one is "screen". So that alone is little help. But it can be used with a test for the screen size. See below...

    Quote Originally Posted by tracknut View Post
    , I'm not clear? Is it within a stylesheet reference like:
    Code:
    <link rel="stylesheet" type="text/css" href="handheld.css" media="handheld">
    ...in which case, see my above bullet - I've been thinking of that technique as legacy, less and less functional as new mobile devices come out.
    I set up 4 css files:
    1. style.css - the traditional style sheet for all devices.
    2. screen.css - for screens.
    3. handheld.css - for handheld devices.
    4. print.css - for printers (in case users want to "print" a web page (preferably to a PDF file rather than paper).

    screen.css contains only:

    .noscreen,
    .handheld,
    .print {
    display: none;
    }

    handheld.css contains only:

    .screen,
    .nohandheld,
    .print {
    display: none;
    }

    print.css contains only:

    .screen,
    .handheld,
    .noprint {
    display: none;
    }

    The link to call the different css files goes in the <head> section of the HTML:

    <html>

    <head>

    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="style.css" rel="stylesheet" media="all" title="styles" type="text/css">
    <link href="print.css" rel="stylesheet" media="print" title="styles" type="text/css">
    <link href="handheld.css" rel="stylesheet" media="handheld" title="styles" type="text/css">
    <link href="handheld.css" rel="stylesheet" media="screen and (max-width:639px)" title="styles" type="text/css">
    <link href="screen.css" rel="stylesheet" media="screen and (min-width:640px)" title="styles" type="text/css">

    </head>

    Note the "and (max-width:639px)" and "and (min-width:640px)". These allow "screen" devices with low res displays to be treated as "handheld". So you can, in principle, direct output to:
    - all devices (default).
    - screen only (class="screen").
    - screen and handheld (class="noprint").
    - screen and printer (class="nohandheld").
    - handheld only (class="handheld").
    - handheld and printer (class="noscreen").
    - printer only (class="print").

    This works in HTML4 / CSS2. I have not tried HTML5 / CSS3. The problem, as I've said, is that IE8 (and earlier) blithely ignores all this. So, at present I'm only using this to suppress specific output to handheld (and low res screens), and printers, not to put different output to these devices.
    Last edited by jedaisoul; 07-05-2012 at 07:32 AM.

  8. #8
    Join Date
    Aug 2006
    Posts
    1,904
    Thanks for the suggestions, I'll have to give that a go. Still seems like a bridge between where we were and what we wish it would be

    Dave

  9. #9
    Join Date
    Mar 2012
    Posts
    1,405
    Quote Originally Posted by tracknut View Post
    Thanks for the suggestions, I'll have to give that a go. Still seems like a bridge between where we were and what we wish it would be

    Dave
    Well, you can implement the same functionality in CSS, but it will achieve absolutely nothing more. The problem is IE8 and IE7. If you wish to ensure that the behaviour degrades gracefully on those browsers, there is much of media queries that you cannot use. The day will come, but as Microsoft has chosen to offer no upgrade path for XP systems, that is unlikely to happen any time soon.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles