All posts tagged ‘future friendly’

File Under: Browsers

Retailer ‘Taxes’ Customers Still Using Internet Explorer 7

Kogan's new Internet Explorer tax. Image: Kogan.

Kogan, an Australian online electronics dealer, has started imposing a “tax” on customers visiting its site using Internet Explorer 7 (and presumably below, though the announcement doesn’t mention IE6). Yes, that’s right, IE7 users visiting Kogan will pay more than those using a modern web browser. Or, more likely, they’ll just shop elsewhere.

Here’s how the tax will work according the Kogan’s blog: “From today, anyone buying from the site who uses IE7 will be lumped with a 6.8% surcharge — that’s 0.1% for each month IE7 has been on the market.” The post goes on to claim that the move will help Kogan “keep prices for all smart shoppers down.” Sure it’s a cheap, attention-getting gimmick, but who hasn’t wanted to ban IE?

Even Microsoft is frustrated with older versions of Internet Explorer that still hang around. The company already has a site dedicated to tracking the demise of IE6, and it’s not a stretch to imagine that it will soon be extending that death wish to IE7.

That said, browsing through Kogan’s site it’s hard to see what about it is causing IE7 headaches for Kogan. We’re no fans of IE 7, but building websites following best practices like progressive enhancement means your site will work even in older browsers. It may not always look exactly the same as more capable browsers, but it will at least function. In my brief testing it appears that Kogan’s site does indeed work in IE7, though the company might need a few lines of IE7-only CSS to clean things up.

Contrary to what Kogan says, starting with the foundations layering on extras as you go means supporting IE7 isn’t a cost of doing business, it’s just a nice by-product of the process of building successful websites — like supporting older mobile browsers, feature phones, televisions, gaming consoles and dozens of other web-connected devices that aren’t always going to function as well as a desktop browser.

File Under: Browsers

Microsoft Urges Developers to Embrace Touch-Friendly Web Design

Windows 8. Photo: Microsoft

Windows 8 is just around the corner and Microsoft wants web developers to get ready for it. We’ve yet to see any tablets running Microsoft’s next-gen Metro interface, but the company is already hard at work telling web developers how to optimize their websites for touchscreens.

The IEBlog recently posted some guidelines for building touch-friendly sites and wants developers to know what makes a successful touchscreen website.

Since Microsoft is late to the touchscreen party there isn’t too much here that savvy developers aren’t already doing for iOS and Android devices. Recommendations include touchscreen basics like using the proper HTML input types such as “tel” or “email” to trigger tailored keyboard layouts, and making sure that touch targets are large and easy to hit. Microsoft also suggests avoiding hover events since touchscreen users never trigger them (unfortunately, content hidden from touchscreens by hover events is still an all too common problem).

If you’re building responsive websites or at least tailoring your designs for touchscreens, most of these suggestions are probably already part of your workflow.

One thing that may be new to some developers is the non-standard -ms-touch-action CSS property. The -ms-touch-action property allows developers to override IE 10′s default touch behavior.

Like most touchscreen browsers, IE 10 assumes that touch events are related to browser actions — double-tapping to zoom for instance. Most of the time this is what you want, but occasionally developers may want to take over some actions, for example, drag events in a drawing app, while leaving others alone. If you have canvas element as part of your drawing app you could set the -ms-touch-action like this:

canvas {
    -ms-touch-action: double-tap-zoom;
}

As the IEBlog explains, “with this configuration the user can double-tap to zoom in to the canvas element, but sliding a finger on the canvas element will send events to it rather than pan the page.”

For more details on -ms-touch-action, head over to the Microsoft Developer Network website. As far as I’ve been able to determine, Microsoft has not yet submitted -ms-touch-action to the W3C. It looks like a very handy property, so hopefully it will be submitted at some point.

As the IEBlog notes there’s much more to developing for touchscreens than just a few quick tricks. While most sites will work just fine in tablet versions of IE 10 (or any other touch screen browser) with no modifications at all there’s a rather wide gap between “work” and “amazing.” If you’d like your sites to land toward the later end of the spectrum, be sure to check out our earlier post on building a responsive, future-friendly web for some pointers.

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.

Building a Responsive, Future-Friendly Web for Everyone

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

This week’s Consumer Electronics Show in Las Vegas has seen the arrival of dozens of new devices from tablets to televisions. Some of these newfangled gadgets will soon be in the hands of consumers who will use them to access your website. Will your site work? Or will it end up mangled by a subpar web browser, odd screen size or slow network connection?

No one wants to rewrite their website every time a new device or browser hits the web. That’s why approaches like responsive design, and the even broader efforts of the future-friendly group, are trying to develop tools and techniques for building adaptable websites. 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 devices your audience is using.

Even if you aren’t a gadget lover, CES should help drive home the fundamental truth of today’s web — devices, they are a comin’. Webmonkey has compiled helpful resources for creating responsive design in the past, but the field is new and evolving rapidly so here’s an updated list of links to help you get started responsive, future-friendly sites that serve your audience’s needs whether they’re browsing with a tiny phone, a huge television or the web-enabled toaster of tomorrow.

Basics:

  • Use @media to scale your layout for any screen, but remember that this alone isn’t really responsive design.
  • Use liquid layouts that can accommodate any screen size. Don’t simply design one look for 4-inch screens, one for 7-inch, one for 10-inch and one for desktop. Keep it liquid, otherwise what happens when the 11.4-inch screen suddenly becomes popular?
  • Roll your own grids based on the specifics of your site’s content. Canned grid systems will rarely fit the bill. The problem with canned grids is that they don’t fit your unique content. Create layouts from the content out, rather than the canvas (or grid) in.
  • Start small. Start with the smallest size screen and work your way up, adding @media rules to float elements into the larger windows of tablet and desktop browsers. Start with a narrow, single-column layout to handle mobile browsers and then scale up from there rather than the other way around. Starting with the smallest screen and working your way up means it’s the desktop browsers that need to handle @media, make sure older browsers work by using polyfills like Respond.
  • Forget Photoshop, build your comps in the browser. It’s virtually impossible to mock up liquid layouts in Photoshop, start in the browser instead.
  • Scale images using img { max-width: 100%; }. For very large images, consider using something like Responsive Images to offer the very smallest screens smaller image downloads and then use JavaScript to swap in larger images for larger screens. Similar techniques can be used to scale video.
  • Forget about perfect. If you haven’t already, abandon the notion of pixel perfect designs across devices. An iPad isn’t a laptop isn’t a television. Build the perfect site for each.

Further Reading:

  • Future Friendly — An overview of how some of the smartest people in web design are thinking about the ever-broadening reach of the web: “We can’t be all things on all devices. To manage in a world of ever-increasing device complexity, we need to focus on what matters most to our customers and businesses. Not by building lowest common-denominator solutions but by creating meaningful content and services. People are also increasingly tired of excessive noise and finding ways to simplify things for themselves. Focus your service before your customers and increasing diversity do it for you.”
  • Building a Future-Friendly Web — Brad Frost’s excellent advice: “Think of your core content as a fluid thing that gets poured into a huge number of containers.”
  • There is no mobile web — “There is no mobile web, nor desktop web. It is just the web. Start with the content and meet people halfway.”
  • Responsive by default — Andy Hume on why the web has always been responsive, but was temporarily sidetracked by the fad of fixed-width sites.
  • COPE: Create Once, Publish Everywhere — NPR’s Director of Application Development, Daniel Jacobson, walks through how NPR separates content from display and uses a single data source for all its apps, sites, APIs and feeds. A great example of what Frost talks about regarding content as a fluid thing.
  • Support Versus Optimization — It can seem daunting to support dozens of mobile browsers, but if you aren’t up to the challenge of a few mobile browsers now what are you going to do when you need to support car dashboards, refrigerators, televisions and toasters, all with dozens of varying browsers?
  • The Coming Zombie Apocalypse — Not satisfied thinking a few years ahead? Scott Jenson explores further into the future and tries to imagine what the web might look like when devices all but invisible.

Techniques: