All posts tagged ‘Media Queries’

File Under: Web Standards

W3C Looks to Improve Responsive Design With New Media Queries

A handful of the many screens your site needs to handle. Photo: Ariel Zambelich/Wired.com

The W3C, the group charged with overseeing the creation of web standards like HTML and CSS, recently gave its official blessing to one of the cornerstones of responsive web design — CSS Media Queries.

CSS Media Queries are the basic building block of responsive design, which, at its simplest, just means building websites that work on any device. That way, when a dozen new tablets suddenly appear on the scene you can relax knowing your site will look and perform as intended, no matter which device your audience is using.

Now that the Media Queries Level 3 spec has been finalized, work has started on CSS 4 Media Queries, or more formally, Media Queries Level 4.

The W3C’s draft spec of Media Queries Level 4 adds three new features you can query in your stylesheets, including:

  • script — Query to check if JavaScript is enabled.
  • pointer — Query to see what sort of input device is being used (mouse, finger, stylus etc).
  • hover — Query to see if the :hover pseudo-class will work on the current device.

Perhaps the most interesting is the middle option, pointer, for which the user agent (your browser) is expected to return the value “none,” “coarse” or “fine.” According to the current draft of the spec, “typical examples of a ‘fine’ pointing system are a mouse, a track-pad or a stylus-based touch screen. Finger-based touch screens would qualify as ‘coarse.’”

Using the pointer query would make it possible to enlarge, for example, form controls on screens where a larger radio buttons might make things easier to select, or perhaps to change how paint flow is handled in a drawing app.

Of course, while potentially handy, none of these queries are yet supported in any web browser, so don’t go using them just yet. That said, the more progressive browsers like Opera, Chrome and Firefox will likely add preliminary support as the spec progresses. It’s also likely that some enterprising web developer will create a polyfill for older browsers before too long.

File Under: CSS, Web Standards

It’s Official, CSS Media Queries Are a Web Standard

A handful of the many screens your site needs to handle. Photo: Ariel Zambelich/Wired.com

The W3C, the group charged with overseeing the creation of web standards like HTML and CSS, has given its official blessing to one of the cornerstones of responsive web design — CSS Media Queries.

Media queries allow web developers to change the layout of a page based on the media that’s displaying it — whether that means adapting it to fit a smaller screen or just stripping it down to the essentials before it heads to a printer.

Chances are you’ve been using at least the print media query on websites for ages, but now media queries have gone legit, becoming an official W3C recommendation (and yes, that is as strongly-worded as the W3C ever gets).

That may not mean much for developers who long ago embraced media queries to serve print stylesheets, but making media queries a recommendation means web browsers need to support it. The backing of the W3C is also often a requirement before large corporate or government organizations will even consider “new” ideas like responsive web design.

Media queries are the cornerstone of responsive design, which, at its simplest, just means building websites that work on any device. That way, when a dozen new tablets suddenly appear on the scene — Microsoft Surface anyone? — you can relax knowing your site will look and perform as intended, no matter which devices your audience is using.

Indeed while Microsoft’s new tablet isn’t yet storming the web, if you’ve been using media queries and following the best practices of future-friendly design then you don’t need to worry when the Surface finally does start showing up in your server logs.

File Under: CSS

Build Responsive Websites Like Bruce Lee

A handful of the many screens your site needs to handle. Photo: Ariel Zambelich/Wired.com

Responsive design means making your website readable no matter what screen it might be on. In the words of karate master Bruce Lee, “Don’t get set into one form, adapt it and build your own, and let it grow, be like water.” Lee may have been talking about your mind, but his words apply just as well to your website. To paraphrase the rest of that quote, you put water into a cup, it becomes the cup; so, you put your content on a tablet, it becomes the tablet; you put it on a TV, it becomes the TV.”

On a more practical level, achieving a Bruce Lee-like command of the fluid web means ditching the pixels and points for flexible units like ems or percentages. There’s a lot more to responsive design than just fluid layouts, but it’s definitely a key part of the process.

Curiously, when it comes time to use the other universal element of responsive design — the @media query that applies the actual responsive design — most of us revert right back to pixels with something like @media all and (min-width: 500px) {}. It seems logical; after all, you’re trying to fit your content into a window with specific dimensions, so why not use pixels?

Certainly you can, and most sites we’ve seen up to this point use pixels for the actual media query breakpoints, but it’s worth noting that you can use ems here as well.

Lyza Gardner over at Cloud Four recently posted a look at why Cloud Four’s new responsive design uses ems in its media queries. Here’s her reasoning for Cloud Four’s em-based approach:

Folks who design for traditional reading media — where the content really is king — don’t center design decisions around the absolute width of content-holding elements so much as around the optimal line lengths for the content they’re flowing. There are some tried-and-true numbers one can shoot for that make for the “right” number of letters (and thus words) per line for comfortable human reading.

Thus actual column width is a function of font size and ems-per-line.

The rest of the post walks through how Cloud Four used em-based media queries to create a better navigation experience on their site. Some of the advantages may not apply to every responsive design, but there is one additional benefit that works nearly everywhere — em-based media queries mean that your site will handle user zooming much better, applying media queries instead of allowing content to overflow its container.

But perhaps the best part of an em-based approach is that it seems to work in nearly every web browser. Cloud Four’s post doesn’t get into the specifics of their browser testing so I fired up a couple of virtual machines and tested their site and my own simplified demo page in every major browser.

According to my testing, em-based media queries work properly in all OS X browsers. (I tested the latest versions of Safari, Firefox, Chrome and Opera.) Only Firefox and Opera apply media queries on zoom, though. (Chrome and Safari need a page refresh before the query is applied.)

On Windows 7 Firefox, Opera and Chrome behave the same way they do on OS X. IE 9 also worked fine and, like Firefox and Opera, applies media queries when zooming without needing a page refresh. Judging by the comments on the Cloud Four blog, Chrome on Linux may have some issues, but in my testing Firefox and Chrome on Fedora worked as expected.

All the mobile browsers I tested on Android worked as well (Firefox, Chrome, Opera Mini and the default Android browser). On iOS Mobile Safari applies em-based queries as you would expect.

In the end you certainly don’t need to use em-based media queries. As many sites out there demonstrate, pixel-based queries work. At least for now. However, as a wider range of screen sizes begin to access the web switching to em-based queries may put you ahead of the game. Em-based queries mean addressing the content-width rather than just the screen width and that feels like a more future-friendly approach.

The Boston Globe Embraces Responsive Design

The BostonGlobe.com on mobile, tablet and laptop screens

Responsive design is no longer something confined to the portfolio websites of the designers and developers who pioneered the idea. Using CSS media queries to adapt a website’s layout to varying screen sizes is fast becoming a standard part of web development.

Today’s case in point is the newly launched BostonGlobe.com, which uses the adaptive layouts, font resizing and image scaling of responsive design to deliver an elegant, readable website no matter what screen size you’re using.

The Globe’s new website is attracting more attention for the fact that it will soon be behind a paywall (it’s free until the end of September), but for web developers the much bigger news is that one of the larger news sites on the web is embracing responsive design.

It’s not an iOS app; it’s not in the Chrome Web Store. No, the new BostonGlobe.com is just a good old fashioned website, but one that looks good no matter what you’re viewing it on thanks to its use of responsive design. Depending on the size of your screen — whether you happen to be browsing from a phone, a tablet or a desktop monitor — BostonGlobe.com will adjust its content to fit the pixels available. It will reflow its text columns according to screen size and also scale its masthead logo, the section menus, images, videos and even the weather graphic in the masthead.

Of course it makes sense that the BostonGlobe.com is a flagship example of what’s possible with responsive design given that developer Ethan Marcotte, who coined the term responsive design, was one of the architects behind the new Globe website. If you’d like to know a bit more about how the site was created, including some of the challenges any responsive site faces, head over to Marcotte’s blog and read his write up on the new site.

Also part of the team that helped build the site are the design firm Upstatement and the Filament Group, which helped pioneer the concept of “responsive” or “adaptive” images. That is, serving smaller images to mobile browsers and then using JavaScript to serve larger images to desktop browsers. Be sure to check out our earlier coverage of adaptive images.

While the Globe may have had the cash and cachet to hire big names in the field, that doesn’t mean you need an extensive team to create a responsive website. We won’t lie to you, building a good responsive website is more difficult than just slapping up a fixed width design. But, provided it fits with the goals of your site, it’s much easier than many of the alternatives, which often require building and maintaining two entirely separate websites.

If you’d like to know more about how the Globe team built the site there’s a video on the Globe’s other website, Boston.com, which gives a behind the scenes look at how the responsive design works. At around 1:22 you’ll see a shot of the design being tested on multiple devices simultaneously. The tool that makes that possible is Shim, a node.js app that enables simultaneous, synced web surfing across devices and browsers. You can check it out over at GitHub.

See Also:

File Under: Browsers, CSS, Mobile

Make a Big Splash on Tiny Screens With Media Queries

MorotolaDroid2

Go out for a chai latte with your local technology soothsayer (or just study your Google Analytics reports) and it’s pretty clear that the mobile web is the future.

But let’s not call it the mobile web, let’s call it the smaller web. And by smaller, I mean a web with less available screen real estate than the desktop.

While the iPhone may have a fully-capable web browser, it still has a relatively small screen. Serving the desktop version of the your website is hardly the best way to deliver your content to iPhone owners.

And don’t forget that the iPhone people are the lucky ones. The latest devices — iPhones, iPads, Android phones — have relatively large screens by mobile standards, but these devices are in the hands of a very slim percentage of worldwide mobile users. There are some 3 billion users out there with older phones, or devices with crappy browsers and very small screens.

The point here is that you need something far better than the desktop-optimized version of your website to offer to mobile visitors.

Mobile Solutions

There are three popular ways to approach mobile sites:

  • Write good code, but do nothing special for mobile. This works fine if your audience is made up of iPhone, iPad and Android users with nice, high-speed 3G connections. That’s about 1 percent of the mobile market, but some sites with an abnormally large number of iPhone users (like an iPhone news site) can get away with it.
  • Detect the device in use and serve a separate mobile site. Something like m.flickr.com. While this approach works, it means maintaining a second website, plus constantly updating your device detection scripts as new gadgets come on the scene.
  • Build an adaptive site using CSS 3 media queries. Thanks to CSS 3 and the new media query syntax, you can build a site that automatically adapts its layout to fit the screen size of your visitors.

The later approach has received the most attention lately, with many designers moving to fluid grids that reflow content, resize images and nicely smoosh themselves down to fit any screen. Check out Simon Collison’s personal site, or designer Jon Hick’s website for examples of media queries in action.

Be sure to resize your browser window so you can see the content reflow as the browser width shrinks. That’s the gift of media queries — by precisely labeling your CSS, the presentation can be altered dynamically depending on the device’s screen width and height. Your content never changes, and neither does your CSS. The page simply adapts.

However, as nice as media queries are, before we dive into the syntax and how it can help, it’s important to realize that this approach is not going to magically solve all your mobile design problems.

Continue Reading “Make a Big Splash on Tiny Screens With Media Queries” »