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

  • Social Media Day 2011 in Buffalo #smdayBUF
    Last night marked the second Mashable-sponsored Social Media Day here in Buffalo. With 154 RSVPs for the event, the venue, The Eights Bist...
  • Web Accessibility Sorta-Infographic
    WebAIM is a non-profit organization within the Center for Persons with Disabilities at Utah State University. It has a reputation (perhaps o...
  • 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...
  • The Science of Trust in Social Media
    I am one of those people who always needs to see proof of some assertion, evidence to back up a claim. While I can accept anecdotal evidence...
  • Current CSS3, HTML5 Support
    The Tool Last week saw the launch of FindMeByIp.com , a very handy web site that displays a user's current IP address (along with a geog...
  • 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...
  • 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...
  • Speaking at Mom 2.0 in Houston, TX
    I will be in Houston this week to speak at the Mom 2.0 Summit (Feb. 18-20, 2010, Houston, TX). To make it a little easier to describe, here...
  • Now the Mobile Web Is Dead?
    It was barely two years ago that I scoffed when Wired declared the web dead ( Enough about the Death of the Web ). Fast forward to today and...

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