Skip to content

Commit

Permalink
updated readme
Browse files Browse the repository at this point in the history
  • Loading branch information
scottjehl committed Apr 2, 2011
1 parent 5a41f21 commit edeeed0
Showing 1 changed file with 7 additions and 6 deletions.
13 changes: 7 additions & 6 deletions README.md
@@ -1,9 +1,15 @@
# Responsive Images
### Mobile-First Images that Scale Responsively & Responsibly

#### What is this?
### What is this?
The goal of this technique is to deliver optimized, contextual image sizes in [responsive web designs](http://www.alistapart.com/articles/responsive-web-design/) that utilize dramatically different image sizes at different resolutions. The approach enables developers to start with mobile-optimized image references in their HTML that automatically loads a full-size image on larger screen resolutions -- without requesting both image sizes, and without UA sniffing.

### What's new with this version?
There are two versions of Responsive Images; this version is currently in testing, while the [original version can be found here](https://github.com/filamentgroup/Responsive-Images). The original does not require cookies, but it also does not work in as many browsers as this cookie-based approach either, so we're evaluating which to use based on project needs & limitations.

The cookie approach that this version uses was conceived by [Keith Clark](http://twitter.com/#!/keithclarkcouk/status/53807492957880320). This approach allows us to cut several workarounds out of our initial technique.


### [Live demo](http://filamentgroup.com/examples/responsive-images-2/demo.html):
See demo.html for implementation, or [view it live](http://filamentgroup.com/examples/responsive-images-2/demo.html)

Expand All @@ -13,11 +19,6 @@ After viewing the demo, view the following links to see it working:
* Large image: [http://filamentgroup.com/examples/responsive-images-2/sample-content/running.large.jpg](http://filamentgroup.com/examples/responsive-images-2/sample-content/running.large.jpg)
* Responsive image (size depends on your screen width): [http://filamentgroup.com/examples/responsive-images-2/sample-content/running.r.jpg](http://filamentgroup.com/examples/responsive-images-2/sample-content/running.r.jpg)

### Notes on this version & a hat tip
There are two versions of Responsive Images; this version is currently in testing, while the [original version can be found here](https://github.com/filamentgroup/Responsive-Images). The original does not require cookies, but it also does not work in as many browsers as this cookie-based approach either, so we're evaluating which to use based on project needs & limitations.

The cookie approach that this version uses was conceived by [Keith Clark](http://twitter.com/#!/keithclarkcouk/status/53807492957880320). This approach allows us to cut several workarounds out of our initial technique.


### New Instructions
_Note: you'll need an apache web server for the redirect approach provided._
Expand Down

0 comments on commit edeeed0

Please sign in to comment.