Web Design News | The Current State of Responsive Images

Step 1

Enter your contact information.

Step 2

Enter your project information.

Step 3

Choose the PHP programmers you want to hire.

Compare Free PHP Quotes

The Current State of Responsive Images

Attention PHP Programmers - Add A Free Listing! Get more clients.

The BostonGlobe.com on mobile, tablet and laptop screens

We’ve looked at several different ways to handle images in responsive web design, but new techniques keep popping up, many of them well worth exploring. Part of the reason there is no one answer, no go-download-this-code sort of solution, is that everything about responsive design is still very experimental, responsive images doubly so.

Even some of the best examples of responsive design — like the recently launched BostonGlobe.com — don’t handle responsive images properly (the team behind the Globe site is reportedly working on a fix).

One thing is clear though, serving full size images to mobile users is a bad idea. Using max-width on your images means that they will scale yes, but, by itself, it doesn’t address the bandwidth issue. In fact, loading big images and forcing mobile browsers to scale them is the worst of both worlds — large image downloads and processor-intensive downscaling. And, not only are large images a waste of bandwidth for mobile users, with mobile data caps becoming more common, you may well be costing your visitors money.

The question is, which of the myriad options is the right way to serve responsive images?

Jason Grigsby over at the Cloud Four blog has started a series of articles tackling that question, and the answer is, it depends. “When I started working on this project two months ago,” writes Grigsby, “I thought I would get to the end and be able to say, ‘Here are the three approaches that work best. Go download them… but what I’ve found is that there is no comprehensive solution.”

Grigsby then dives into the most comprehensive rundown of responsive image techniques that we’ve ever seen. For some more background on what responsive images are, why you want them and how you can go about creating future-friendly” images, check out Responsive IMGs Part 1. Then, when you’re ready to dive into the various possibilities, read Responsive Images Part 2, which covers everything from JavaScript solutions to server side detection techniques.

See Also:

Source http://www.webmonkey.com/?p=51840
Fri, 30 Sep 2011 16:43:27 GMT
Tags: Mobile, responsive design,

Attention PHP Programmers - Add A Free Listing! Get more clients.

Mobile

Firefox Storms the Small Screen With New Firefox 4 for Android

Mozilla has released Firefox Mobile for Android and Maemo, bringing the company’s mobile browser up to par with the new desktop version of Firefox 4. Mozilla claims Mobile Firefox 4 is up to three times faster than Android’s default web browse

Adobe Takes On Mobile World With Creative Suite 5.5

Adobe has updated several of its Creative Suite applications to version 5.5, adding some new tools designed to target tablets and mobile devices. The primary interest for web developers is the improved HTML5 and CSS3 support in Dreamweaver 5.5, Adobe̵

Tips, Tricks and Best Practices for Responsive Design

Unless you’ve been too busy wake boarding the Alps to notice, there’s a movement afoot amongst web designers — Responsive Design. Ethan Marcotte coined the term responsive design to describe the process of using liquid layouts and media

responsive design

Take Responsive Design Beyond the (Fluid) Grid

We’ve given you a look at some best practices for responsive design, but beyond the nuts and bolts of @media queries and flexible grids, there is something more subtle, and more important, at work behind the moniker responsive design. Good design ha

Screenfly: The Easy Way to Test Responsive Web Designs

If you’ve embraced responsive web design — and we sincerely hope you have — you know that fluid layouts, helpful as they are, can be tricky. Combine them with @media queries to re-size and re-position elements on the fly and you’ll

Members:

Franklin

Spectrum Nashville

Spectrum Nashville is committed to providing reasonable, excellent business technology solutions that simply work.

Franklin, Tennessee US

Las Vegas

NetDynamic - PHP/MySQL - Experienced Dev

PHP/MySQL Web Developer 15+ years experience. We are a team of developers and designers. Address: 3513 E Russell Road, Las Vegas, NV Call us: 877-704-0005 or 702-509-5050

Las Vegas, Nevada US

Chennai

Anis technologies

website creator chennai, web development firm chennai, product development in chennai, software developer in chennai, website designer in chennai, portal developing firm chennai SEO and SEM solutions

Chennai, Tamil Nadu IN

Mesa