tech support 8

  • Subscribe to our RSS feed.
  • Twitter
  • StumbleUpon
  • Reddit
  • Facebook
  • Digg

Friday, 8 November 2013

Tables as Responsive Image Containers

Posted on 13:09 by Unknown



If you've been following the latest chaos in the responsive image debate, you may know that there is a battle afoot between supporters of src-n, srcset and picture. If you don't believe me, I refer you to this WHATWG post, a polite round-up of today's bar fight. Key is that it links to multiple discussions in its round up:




[1] http://tabatkins.github.io/specs/respimg/Overview.html

[2] https://groups.google.com/a/chromium.org/d/msg/blink-dev/tV3T1wHuXqE/SvWKxIyG6IIJ

[3] https://lists.webkit.org/pipermail/webkit-dev/2013-October/025763.html

[4] https://lists.webkit.org/pipermail/webkit-dev/2013-November/025809.html

[5] https://bugzilla.mozilla.org/show_bug.cgi?id=870021



Granted, picture has been mostly abandoned by the Responsive Images Community Group (RICG), but after today's fight it looks like it might have legs again.




All of these, however, neglect a responsive image solution that we've had since 2005: tables.




Consider the RICG logo:




RICG logo.



And consider this version encoded as a table, with none of those troublesome pixels:


















































































......................................................................................................................................
......................................................................................................................................
......................................................................................................................................
......................................................................................................................................
......................................................................................................................................
......................................................................................................................................
......................................................................................................................................
......................................................................................................................................
......................................................................................................................................
......................................................................................................................................
......................................................................................................................................
......................................................................................................................................
......................................................................................................................................
......................................................................................................................................
......................................................................................................................................
......................................................................................................................................
......................................................................................................................................
......................................................................................................................................
......................................................................................................................................
......................................................................................................................................
......................................................................................................................................
......................................................................................................................................
......................................................................................................................................
......................................................................................................................................
......................................................................................................................................
......................................................................................................................................
......................................................................................................................................
......................................................................................................................................
......................................................................................................................................
......................................................................................................................................
......................................................................................................................................
......................................................................................................................................
......................................................................................................................................
......................................................................................................................................
......................................................................................................................................
......................................................................................................................................
......................................................................................................................................

Look, I even added transparency!







If you look through the Use Cases and Requirements for Standardizing Responsive Images, you'll see this approach satisfies none of the requirements and is made of incredibly complex code. This, in effect, guarantees employment for responsive web developers for years to come. You can make your own tabled images, though you'll want to tweak the code a bit.




I tried to make this clear earlier today:



Guys! Stop fighting about resp image syntax (https://t.co/kE6T7Nv5ne)! I found a solution! http://t.co/yBkji15Yyk Backward compatible!

— Adrian Roselli (@aardrian) November 8, 2013




I can only hope this example sets us all on the right path.



Update: November 14, 2013




If you came here actually looking for something useful about the status of responsive images in general, check out Mat Marquis' responsive images standings cheat-sheet, which he plans to update regularly.

Email ThisBlogThis!Share to XShare to FacebookShare to Pinterest
Posted in browser, css, design, rant, W3C, whatwg | No comments
Newer Post Older Post Home

0 comments:

Post a Comment

Subscribe to: Post Comments (Atom)

Popular Posts

  • Copying Content Styled with Text-Transform
    Using the CSS property text-transform to automatically shift copy to uppercase has been popular for a while now, but a combination of a rec...
  • HTML5 Finally Gets... a Logo?
    Start Rant With all the debate about elements , attributes , semantic meaning and who really owns HTML5 , it's thrilling to see that t...
  • New Google Analytics Features
    In the article " Google Analytics Now More Powerful, Flexible and Intelligent " from last Tuesday (yes, I know I'm behind on t...
  • Speaking: Accessible Web Apps & Standards
    I will be speaking twice in September, both of them sponsored by Infotech Niagara. If you're in the Buffalo area, these are great opport...
  • Speaking at WordCamp Buffalo 2013
    This Saturday I will be speaking at Buffalo's second WordCamp . Last year was a great day-long event filled with many good speakers (not...
  • CSS-D Finds New Home at evolt.org
    The incredibly popular, active, and valuable mailing list devoted to Cascading Style Sheets, CSS-Discuss (css-d), has moved its hosting to ...
  • Google Chrome Pre-Installed on Sony PCs
    Google cut a deal with Sony's PC division to distribute Chrome as a pre-installed browser on their Vaio PCs. Google claims to be in talk...
  • Test in Lynx and Print, It's Your Job
    I have admittedly not taken the time to attend An Event Apart any of the times it's been held, but I do tend to follow the #aea hashtag...
  • Netscape Navigator 2.01 Celebrates 16th Anniversary
    As of March 18, 2011 Netscape Navigator version 2.01 has turned 16 years old . Back when it was released in 1996 it was the bees knees. It i...
  • Thanksgiving, Technology, and Just Picking a Fight
    My logs tell me that nobody took this 2011 plea seriously. I blame the typeface. Last year on Thanksgiving I made the case for ignoring soci...

Categories

  • accessibility
  • Adobe
  • analytics
  • Apple
  • apps
  • ARIA
  • Bing
  • Blink
  • Brightkite
  • browser
  • Buzz
  • Chrome
  • clients
  • css
  • design
  • Facebook
  • Firefox
  • Flash
  • fonts
  • food
  • Foursquare
  • g11n
  • geolocation
  • globalization
  • Google
  • Gowalla
  • html
  • i18n
  • ICANN
  • infographic
  • Instagram
  • internationalization
  • internet
  • Internet Explorer
  • JavaScript
  • JAWS
  • Klout
  • L10n
  • law
  • localization
  • Lynx
  • Mapquest
  • Microsoft
  • mobile
  • Netscape
  • ning
  • Opera
  • patents
  • picplz
  • Plus
  • print
  • privacy
  • project management
  • QR
  • rant
  • RSS
  • Safari
  • SCVNGR
  • search
  • SEM
  • SEO
  • social media
  • Sony
  • speaking
  • standards
  • SVG
  • touch
  • translation
  • Twitter
  • typefaces
  • usability
  • UX
  • Verizon
  • video
  • W3C
  • WAI
  • WCAG
  • WebKit
  • whatwg
  • Wired
  • WOFF
  • xhtml
  • Yahoo
  • YouTube

Blog Archive

  • ▼  2013 (39)
    • ►  December (1)
    • ▼  November (7)
      • Thanksgiving, Technology, and Just Picking a Fight
      • Image alt Exception Change Re-Re-Re-Requested
      • Print Styles Are Media Queries
      • Captions in Everyday Use
      • WayBack Machine Handler for Your 404 Pages
      • Tables as Responsive Image Containers
      • On-Demand WayBack URLs
    • ►  September (4)
    • ►  July (3)
    • ►  June (2)
    • ►  May (5)
    • ►  April (3)
    • ►  March (6)
    • ►  February (2)
    • ►  January (6)
  • ►  2012 (63)
    • ►  December (2)
    • ►  November (4)
    • ►  October (5)
    • ►  September (5)
    • ►  August (4)
    • ►  July (6)
    • ►  June (7)
    • ►  May (7)
    • ►  April (8)
    • ►  March (5)
    • ►  February (3)
    • ►  January (7)
  • ►  2011 (67)
    • ►  December (5)
    • ►  November (7)
    • ►  October (5)
    • ►  September (4)
    • ►  August (8)
    • ►  July (3)
    • ►  June (8)
    • ►  May (3)
    • ►  April (1)
    • ►  March (6)
    • ►  February (6)
    • ►  January (11)
  • ►  2010 (100)
    • ►  December (8)
    • ►  November (7)
    • ►  October (5)
    • ►  September (10)
    • ►  August (7)
    • ►  July (11)
    • ►  June (12)
    • ►  May (6)
    • ►  April (8)
    • ►  March (10)
    • ►  February (5)
    • ►  January (11)
  • ►  2009 (51)
    • ►  December (9)
    • ►  November (6)
    • ►  October (21)
    • ►  September (13)
    • ►  August (2)
  • ►  2003 (3)
    • ►  October (1)
    • ►  January (2)
  • ►  2002 (9)
    • ►  December (1)
    • ►  June (3)
    • ►  April (1)
    • ►  March (3)
    • ►  January (1)
  • ►  2001 (1)
    • ►  February (1)
  • ►  2000 (4)
    • ►  October (1)
    • ►  July (1)
    • ►  June (1)
    • ►  January (1)
  • ►  1999 (7)
    • ►  November (1)
    • ►  September (2)
    • ►  August (2)
    • ►  July (1)
    • ►  June (1)
Powered by Blogger.

About Me

Unknown
View my complete profile