-
Notifications
You must be signed in to change notification settings - Fork 9
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
"Nice to have" image use case (closes #56) #57
base: gh-pages
Are you sure you want to change the base?
Changes from all commits
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -7,7 +7,7 @@ | |
Use Cases and Requirements for Standardizing Responsive Images | ||
</title> | ||
<style> | ||
.stretchy{width: 100%;} | ||
.stretchy{width: 100%;} | ||
@media all and (max-width: 960px){ | ||
html{ | ||
margin-left: -2.5em; | ||
|
@@ -23,11 +23,11 @@ | |
} | ||
} | ||
</style> | ||
<script src='http://www.w3.org/Tools/respec/respec-w3c-common' async="" | ||
class='remove'> | ||
</script> | ||
<script src='http://www.w3.org/Tools/respec/respec-w3c-common' async class= | ||
'remove'> | ||
</script> | ||
<script class='remove'> | ||
var respecConfig = { | ||
var respecConfig = { | ||
//additionalCopyrightHolders: "Copyright © the Contributors to this Specification, published by the <a href='http://www.w3.org/community/respimg/'>Responsive Images Community Group</a> under the <a href= 'https://www.w3.org/community/about/agreements/cla/'>W3C Community Contributor License Agreement (CLA)</a>. A human-readable <a href= 'http://www.w3.org/community/about/agreements/cla-deed/'>summary</a> is available.", | ||
|
||
//license: "cc-by", | ||
|
@@ -218,10 +218,10 @@ <h3> | |
</h3> | ||
<p> | ||
To date, three such specifications are currently under development, | ||
described below, one more has been abandoned. The three proposed, active solutions are not mutually | ||
exclusive: together they address the set of <cite><a href= | ||
"http://usecases.responsiveimages.org">Use Cases and Requirements for | ||
Responsive Images</a></cite>. | ||
described below, one more has been abandoned. The three proposed, | ||
active solutions are not mutually exclusive: together they address | ||
the set of <cite><a href="http://usecases.responsiveimages.org">Use | ||
Cases and Requirements for Responsive Images</a></cite>. | ||
</p> | ||
<dl> | ||
<dt> | ||
|
@@ -271,11 +271,14 @@ <h3> | |
</p> | ||
</dd> | ||
</dl> | ||
<h3>Abandoned Proposed Solutions:</h3> | ||
<h3> | ||
Abandoned Proposed Solutions: | ||
</h3> | ||
<dl> | ||
<dt> | ||
<cite><a href= | ||
"http://tabatkins.github.io/specs/respimg/Overview.html">The `src-N` approach</a></cite> | ||
"http://tabatkins.github.io/specs/respimg/Overview.html">The | ||
`src-N` approach</a></cite> | ||
</dt> | ||
<dd> | ||
<p> | ||
|
@@ -534,13 +537,13 @@ <h3> | |
<figure> | ||
<video controls="" poster="videos/screenrmx1.jpg" class="stretchy" | ||
style="max-width: 652px" onclick= | ||
"if(/Android/.test(navigator.userAgent))this.play();"> | ||
<source src="videos/screenrmx1.m4v" type="video/mp4"> | ||
<source src="videos/screenrmx1.webm" type="video/webm"> | ||
<source src="videos/screenrmx1.ogv" type="video/ogg"> | ||
<source src="videos/screenrmx1.mp4"><object type= | ||
"application/x-shockwave-flash" data="videos/flashfox.swf" width= | ||
"652" height="389" style="position:relative;"> | ||
"if(/Android/.test(navigator.userAgent))this.play();"><source src= | ||
"videos/screenrmx1.m4v" type="video/mp4"> <source src= | ||
"videos/screenrmx1.webm" type="video/webm"> <source src= | ||
"videos/screenrmx1.ogv" type="video/ogg"> <source src= | ||
"videos/screenrmx1.mp4"><object type="application/x-shockwave-flash" | ||
data="videos/flashfox.swf" width="652" height="389" style= | ||
"position:relative;"> | ||
<param name="movie" value="videos/flashfox.swf"> | ||
<param name="allowFullScreen" value="true"> | ||
<param name="flashVars" value= | ||
|
@@ -785,6 +788,51 @@ <h3> | |
"site preferences". | ||
</p> | ||
</section> | ||
<section> | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Is it possible to only send the stuff below in the PR? |
||
<h3> | ||
“Nice to have” images | ||
</h3> | ||
<p> | ||
Images are often content, but there are instances when an image is an | ||
enhancement to the document, but not a necessary part of the core | ||
content (a.k.a. “nice to have“). As such, Authors may choose to load | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Lowercase Authors ... should probably read be "developers". There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Closing quotation mark is backwards. Should be ” not “ |
||
an image only above a certain breakpoint in order to | ||
optimize the readbility of the core content at certain sizes by | ||
reducing the visual clutter. This is a similar use case to <a href="#art-direction">Art direction</a>, but distinct enough to warrant separation. | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I like the intent here, but I don't like that this talks about breakpoints. What is needs to talk about is that images that are not in view or important don't need to be loaded. This is really about lazy-loading images. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I was under the impression that this was about breakpoints, as Aaron has written — that at some breakpoints we may want to hide an image entirely. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. +1 to this being breakpoint-centric. Here's yoav saying “it's art direction” at the meeting: And in #56 Yoav specifically uses the word “breakpoints”. This use case is about authors art-directing down to no image at all, and art direction means breakpoints. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. To me, that seems extremely fragile. It would be super easy to screw up the breakpoints because developers making assumptions about what is "below the fold" or "outside the view", when on different screen sizes it might not apply. I'm probably missing something, so will let @yoavweiss chime in and tell me how wrong I am :) There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. It's not about lazy-loading, but about breakpoints. (the name "nice to have" might be confusing). The use-case is about having some images "disappear" at certain breakpoints without introducing an extra overhead on the network (like a simple "display: none" would do). Basically, what Aaron wants is a way to define that for a certain breakpoint the image will not load at all. That is a form of art-direction. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. On March 17, 2015 at 7:48:36 PM, Yoav Weiss ([email protected]) wrote:
Ok, thanks for the clarification. |
||
</p> | ||
<p> | ||
Consider the following example: | ||
</p> | ||
<figure> | ||
<img class="stretchy" style= | ||
"max-width:754px" src="images/optional-images.png" alt= | ||
"Two displays of the same content, a wider one with an image, a narrower one without."> | ||
<figcaption> | ||
<p> | ||
Two versions of the same teaser content. The image is "nice to | ||
have" but not required. That said, it is content, not design. | ||
</p> | ||
</figcaption> | ||
</figure> | ||
<p> | ||
In situations like this, it would be nice to have a declarative way | ||
of marking up this supplementary content and retricting its download | ||
and presentation to scenarios where it would be useful. This content | ||
does not belong in CSS as it is not presentational. | ||
</p> | ||
<p> | ||
Currently, many sites with this need are using <code>display: | ||
none</code> to hide supplementary content images from view when the | ||
viewport is below a particular size. This approach penalizes the user | ||
by downloading images that may never be shown. Other sites are | ||
relying on JavaScript to take instruction from the markup (usually in | ||
the form of <a href= | ||
"http://www.w3.org/TR/2011/WD-html5-20110525/elements.html#attr-data"> | ||
<code>data-*</code>code> attributes</a>) and load images in | ||
specified scenarios. When JavaScript fails, this functionality is | ||
lost. | ||
</p> | ||
</section> | ||
</section> | ||
<section> | ||
<h2> | ||
|
@@ -887,6 +935,11 @@ <h2> | |
techniques</a> are providing. | ||
</p> | ||
</li> | ||
<li> | ||
<p> | ||
The <a>solution</a> SHOULD allow developers to specify that no image be downloaded or shown at specified (or implied) breakpoints. | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Again, I would remove "breakpoints". Authors should say which images are not critical. Cancelling load at certain times might actually hurt performance, so this is best left to browsers (because they can turn on/off radio at the right time). |
||
</p> | ||
</li> | ||
</ol> | ||
</section> | ||
<section class="appendix"> | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Whoa? What version of tidy are you using? Please use this one: https://github.com/htacg/tidy-html5