All posts tagged ‘responsive design’

File Under: Mobile, Visual Design

Dec

2011

How to Scale Embedded Media in Responsive Designs

By Scott Gilbertson

A responsive movie embed working on a Sony Ericsson (photo by Anders Andersen)

In order to make responsive designs successfully adapt to any screen size, you need to properly scale not just headlines and text elements, but images and other media. We’ve already covered a number of solutions for images, but what about other elements like video?

Scaling video when you can control the embed code is pretty easy, the same max-width tricks that work on images will work on video. The tricky problems with scaling video come when you start trying to embed movies from other websites.

YouTube and most other video hosting sites typically include a fixed width and height in pixels as part of the embed code. That’s fine for older designs, but it doesn’t scale in a responsive layout.

Swedish web developer Anders Andersen recently tackled the problem of responsive embeds and came up with a solution that works with both YouTube and Vimeo movies. Andersen’s solution is to wrap any embed code, whether it’s an actual embed tag or an iframe, with an extra div and then scale that div. Naturally you’ll need to strip any fixed dimensions out of the YouTube or other embed code for this to work.

For the full details and the CSS that makes it work, be sure to read Andersen’s whole post.

The core of Andersen’s method lies in the CSS, which uses this handy trick to preserve the intrinsic ratio of the video even as its container element scales down.

Andersen has tested this technique with YouTube, Vimeo and SlideShare embeds, though it may work with others as well.

Between stripping out any video dimensions and adding a wrapper div, Andersen’s responsive embed trick is a little bit of work. It’s probably not practical for a site with a lot of video, or a site where non-technical users will be posting video. However, if you’ve got a simple site that’s 99 percent responsive, but you’ve been looking for a way to handle video, this fits the bill.

Be sure to check out Andersen’s follow-up post where he does some device testing. The results are generally encouraging, with most modern phones handling the code just fine. The only real problem device seems to be the new Nokia Lumia 800 (running Windows Phone 7) which fails to play the YouTube embeds.

Tags: responsive design

File Under: CSS, Visual Design

Dec

2011

Using Sass to Help Internet Explorer Handle ‘Mobile-First’ Designs

By Scott Gilbertson

If you’ve embraced a mobile-first approach to responsive design, you’re probably building your CSS in layers. One common method is to start with a base layer of CSS that applies to all screen sizes — like font definitions, colors, etc — and then using CSS 3 @media queries to add in floats and the like for larger screens.

This approach works well with most browsers, except of course our old friend Internet Explorer, which, prior to IE 9, doesn’t know what to make of @media. Naturally there are solutions to the IE 6/7/8 problem. You could use a polyfill like Respond.js or css3-mediaqueries.js, both of which use JavaScript to make media queries work in older web browsers.

Sometimes though you don’t want the JavaScript dependency. What’s more, most of the time you don’t really even care if IE actually understands @media, you just want it to apply the CSS inside the @media block.

Developer Nicolas Gallagher recently outlined a different, JavaScript-free approach to making older versions of IE apply your @media rules. Gallagher’s technique builds on an idea developer Jeremy Keith uses to work around a bug in Windows mobile. If you’re looking for a simple, JavaScript-free means of serving up a mobile-first design without abandoning older versions of Internet Explorer, this is one of the best solutions I’ve seen (provided you’re already using Sass).

Here’s Gallagher’s description:

The basic idea is to produce two versions of your compiled CSS from the same core code. One version of your CSS includes CSS 3 @media queries and is downloaded by modern browsers. The other version is only downloaded by IE 6/7/8 in a desktop environment and contains no CSS 3 @media queries.

Be sure to read through Gallagher’s post for the full details on how and why it works. Obviously if you’re not a fan of Sass, then this approach isn’t for you (Less fans should check the comments on Gallagher’s post as developer Peter Wilson has a link to a Less version of the same idea).

Tags: responsive design

File Under: CSS, Mobile, Visual Design

Nov

2011

Make Your Most Important Images Stay that Way With Responsive Images

By Scott Gilbertson

Developer Dave Rupert helps you keep your cats properly scaled

If you’ve spent any time at all playing with responsive images (or adaptive images) you’ve probably noticed something about small screens — portrait-oriented images take on a much greater importance. The simple fact is that on the vertically-oriented small screen, taller images are larger and, thus, assume a greater importance.

As developer Dave Rupert puts it: Image Height == Image Importance.

The problem with that equation is that it often means that on mobile screens less important images suddenly steal the spotlight. Take an image with thumbnails below it for example. As Rupert recently found, when scaling down your designs, sometimes the image importance equation means the emphasis is wrong on small screens:

Our design employed a ~3:1 hero image with three ~4:3 thumbs below it. At full width it possessed the proper hierarchy: Biggest == Most Important. However, when resized and folded into a single column, the 3:1 image appears to be about half the height of the 4:3 images below it.

The solution for Rupert is what he calls, “Uncle Dave’s Squeeze n’ Crop Method,” which consists of a wrapper div and some very clever CSS combined with @media rules. Head on over to Rupert’s blog for the full solution and a little explanation of why it works. It’s not exactly cut-and-paste code you can just drop in your own projects since image dimensions and ratios will vary, but it’s definitely worth bookmarking should the problem arise in your own work.

Tags: responsive design, responsive images

File Under: Mobile, UI/UX, Web Basics

Nov

2011

‘WTF Mobile Web’ Tracks Terrible Mobile Web Design

By Scott Gilbertson

Sometimes the best way to figure out what works is to see what doesn’t. That’s the thinking behind WTF Mobile Web, a new site that tracks examples of terrible mobile web design and user experience. Whether it’s a “native look” that inevitably looks wrong on all but one platform or simply treating the iPad as a mobile browser, WTF Mobile has plenty of examples of what not to do when developing a mobile site.

WTF Mobile Web is the brainchild of developers Jen Simmons and Brad Frost who are careful to note that the point isn’t to be mean or pick on specific sites. In fact, perhaps the best part about the site is that, as people were quick to point out, it’s guilty of some of the very same things it’s calling out in other sites. Hypocrisy? Sure, but it also illustrates just how hard it is to get mobile right.

As Simmons and Frost write:

The problem is that we’ve all been doing this thing called Making a Website for a long time in a particular way. And now everything is changing. Sure some developers are resistant to learning new things, but most developers are interested, excited and willing. But this isn’t a problem that you can fix by just switching out which bit of code to use. It’s bigger than that. Content strategy, design, business all have to change. The fundamental way in which people work together to plan and coordinate the creation of a website has to change.

Perhaps the most important thing to keep in mind is that, to paraphrase developer Steven Hay, there is no mobile web, no desktop web, no tablet web. There is just The Web, which we view in different ways. Design for The Web, avoid assumptions about devices (like assuming the iPad is a mobile device) and please, stop with the “native” designs.

If you run across an example of bad mobile design you can submit it to WTF Mobile Web.

So how do you build better mobile sites? Well, WTF Mobile Web has a few links to get you started, including one to Frost’s Building a Future Friendly Web slideshow, which we’ve covered before. Webmonkey has also been covering mobile and responsive design for some time so be sure to read through our archives.

WTF? photo by Daniel Lobo/Flickr/CC

See Also:

Tags: Mobile, responsive design

File Under: Mobile, UI/UX

Oct

2011

Slide Show Time: Building a Future-Friendly Web

By Scott Gilbertson

Embedded above is an excellent presentation by Brad Frost. Below you can find a video that goes along with the slides.

Frost’s slides and talk revolve around the idea that the web is changing too rapidly to claim we can create future-proof websites or webapps. Instead we need to think in terms of future-friendly sites. In other words, forget perfection and start embracing what elements you can today. For Frost that means tools like responsive design, but also creating content that is “like water.”

“Think of your core content as a fluid thing that gets poured into a huge number of containers,” writes Frost. “Get your content ready to go anywhere because it’s going to go everywhere.”

Of particular note in the slides is Frost’s breakdown of Forbes.com into content and, ahem, not content. As Frost says, “people’s capacity for bullshit is rapidly diminishing… we need to respect people’s time and give them relevant, purposeful content without the extra cruft.” In other words, don’t be Forbes.

Be sure to check out the various helpful websites and books Frost lists toward the end for more on how to make your own sites future-friendly. [Update: Here's a link to Frost's collection of helpful links and resources for future-friendly sites.]