Web Development Advent Calendars for 2014

For a few years now web developers around the world have celebrated Saturnalia Christmas with advent calendars covering topics related to the web. Some come and go, but you'll probably recognize a few regulars on this list.

I may have missed some, so please pass them along if you know of any. As I learned in prior years where I have tracked them, I don't know them all on December 1, and update accordingly. Some of this is because the sites don't promote the new calendar on the home page.

1. 24 Ways

24 Ways, the one that most of this think about for web development calendars, is back again. It's been going strong since 2005 and based on its history this year should have some good articles.

2. Perl Advent Calendar

Perl Advent Calendar goes all the way back to 2000 (and back then looked a bit more like a traditional advent calendar, too) and has been dispensing tips for Perl developers ever since.

3. 24 Jours de Web

24 Jours de Web is starting its second year as an advent calendar for web folk. Written in French, it is clearly primarily targeted at French speakers, but a round of Google Translate will open it up to far more readers (like me).

4. UXmas

UXmas is an advent calendar aimed at the user experience community. Coming from Australia, American readers may be thrown just a bit by the schedule. The calendar promises everything from sketches, to articles, to tools, to videos.

5. Webkrauts

Webkrauts has an all German advent calendar, and it also dates back to 2005. It covers general web topics, but being in all-German readers like me will benefit from a Google Translate version of the page.

6. Web Accessibility Advent Calendar 2014

Web Accessibility Advent Calendar 2014 is in Japanese, and thanks to the wonderful powers of Google Translate, I can tell you that it is a calendar to make the talk about Web accessibility (based on this statement: Webアクセシビリティに関する話題でつくるカレンダーです。). If you know Japanese, I welcome any corrections. The site Adventar.org appears to host other advent calendars, some about web technologies, some about ramen.

7. 24 Pull Requests

24 Pull Requests is less an advent calendar than it is an effort to mobilize developers. The goal is to get developers to send a pull request every day in December (up to Christmas), thereby supporting your favorite open source projects. There are even Coderwall badges for those who collect those sorts of things.

8. SysAdvent

SysAdvent is targeted to systems administrators, but there is a some cross-over to web developers. It has posts dating back to 2008, so there is plenty of good material there if you're too impatient to wait for each day to be revealed.

9. Lean/Agile Advent Calendar

Håkan Forss's lean/agile calendar was recommended to me by Martin Burns, to whom I generally listen on this topic. Håkan is an Accredited Kanban Trainer (AKT) and a Kanban Coaching Professional (KCP), and his first post seems pretty good, so I've added it. Also, LEGOs.

10. Performance Calendar

Performance Calendar hails this as the speed geek's favorite time of the year, ostensibly because of the tips it has been offering each December since 2009. It isn't just server optimizations you'll find here, so don't shy away because you're not a system admin. While I had it last year, it hadn't launched when I posted this, so I've rectified that.

11. Free Font Calendar

The Free Font Advent is providing information on and links to, you guessed it, a free font every day. The site is in German, but Google Translate will be more than enough to get the narrative written for each typeface. I picked this one up from Deborah Edwards-Onoro's advent calendar post.

12. Amazon Web Services Calendar

AWS Advent is dedicated to sharing information on features and services available from AWS. If you are an AWS user and have something to offer, as of this writing there are still five slots open for contributions. I also picked this one up from Deborah Edwards-Onoro's advent calendar post.

Not Web Related

The Royal Institution has something called Things to Do with Stuff that might be like an advent calendar, given this statement: Throughout December inspired by the 2014 CHRISTMAS LECTURES, we're releasing little nuggets that'll encourage you to interact with and understand the tech that surrounds us. The very first item is how to make a movie projector with a smartphone, a magnifying class, and a box.

Linear Gradient Problems in Chrome

Detail of the effect I wanted to re-create with a linear gradient — a gray column, a white narrow gutter, a black vertical line, and the rest as white.

I'm going to tell you up front that I don't have a fix for the issue I am raising, though there are bugs filed against it.

I wanted to create equal-height columns that don't use tables, piles of JavaScript, background images, or many of the other code-heavy techniques out there today. I just wanted a CSS-only option. I have played around with CSS gradients to define columns before, something it turns out was covered in 2010 at CSS Tricks, and I decided browser support had come along enough that I could make a prefix-free solution.

In the image above I show an example where I want a vertical line between two columns, along with a narrow gutter. This is pretty straightforward, though you're better off doing it by hand than using any of the gradient generators out there right now. Ultimately I needed a step that is one pixel wide (yes, I am using pixels for this example) that is also a solid color. Easy enough.

It turns out that Chrome, Firefox and Internet Explorer 11 just don't seem to dig making a one pixel gradient step. That's ok. I can work with that. What I wasn't prepared for was how Chrome (38 as of this writing, though this appeared in prior versions) opted to handle it.

At some window sizes, Chrome displays no step at all. At other window sizes, it's 5 pixels. Sometimes the widths of the other steps change as well. This means some Chrome users will see nothing, others will see something five times wider than I want. The animated GIF below shows what happens to the line (in red) as I scale the window width. I think you can agree that it can be a pretty jarring experience for users (part of me worries that this kind of rapid flashing on the whole page can also overwhelm some users).

Animated screen capture of the CodePen in Google Chrome 38 showing the stuttering width of the "columns" and the inability to handle a one pixel band/step.

The animated screen shot is from a Pen that I created to show the effect. I have embedded it below, though you can visit (and fork) the pen directly at CodePen.io.

There are also two open Chromium bugs and one Stack Overflow discussion that are related, though not just with single-pixel gradients.:

• Issue 233879: Bug with linear-gradient layout, Apr 20, 2013 (with a sample pen).
• Issue 281489: Linear Gradient color stops not calculated correctly, Aug 29, 2013 (sample pen missing).
• Webkit linear gradient stops render incorrectly, May 13, 2014 (with a different example pen).

Notes on the first bug offer an explanation of sorts:

skia discretizes the colors into 256 levels for (lots of) speed. hard-edged gradients like this (where there are two colors at the same color-stop) definitely show up this limitation. We can look at ways to increase precision, but there will be a real performance cost, so we have to decide how important this particular behavior is in practice.

Essentially the argument is that this is a performance trade-off. One that both Firefox and Internet Explorer seem more than capable of handling, which means I'm not buying this excuse a year and a half after it was offered. It just feels like a cop-out.

If you think that your work could benefit from having these bugs fixed, please go star them. Otherwise we may not use that awesome CSS feature, and by extension we're enabling the browser monoculture that is Chrome.

Update below the pen

See the Pen Testing Gradients as Column BG by Adrian Roselli (@aardrian) on CodePen.

Update: 10 minutes After Posting

I posted a link to my pen and this post to the bugs, and in both cases I later got email bounce notifications ("The email account that you tried to reach is disabled."). The address srsrid...@chromium.org, the only CC on 281489 and one of two on 233879, is gone which makes me think nobody is listening on at least one of the bugs.

NAGW Slides: Responsive Web Design Primer

I just finished a webinar for the National Association of Government Web Professionals where I provided an overview of responsive design. I always struggle when I cannot see the audience, but as always my ego carries me through to the end. The slides are embedded here for any and all to see.

Responsive Web Design Primer - NAGW 2014 from Adrian Roselli

There are links peppered throughout, but there are so many more I could add. Feel free to suggest more if helpful.

View from my side as I ooze with confidence right before the talk.

UX Singapore Slides: Selfish Accessibility

Photo of me speaking, fighting the sun, provided by Camilla Choo. Original photo on Twitter.

In a departure from the other times I have given this talk, I gutted all the slides with code samples as well as the slides on testing (although I did keep them handy and use them for the individual Q&A afterward). Instead, I added a section showing example selfish user stories, some persona bits, and other references. Overall I think it was a great fit. I met the time limit and didn't seem to overwhelm the crowd with technical bits. I hope everyone attending got something from the talk, but based on a few conversations afterward I think I struck a chord with at least a handful.

Anyway, my slides are below. If you want to see the slides I excised, then you should look at the my slides talk I gave a few days beforehand for Accessibility Camp Toronto (start at slide 46).

Selfish Accessibility: UXSG 2014 from Adrian Roselli

There was no video from this talk, so you have to take my word for it that it went well. I was warned in advance that the crowd would be tough — they wouldn't laugh at my awful jokes (nor the good ones), wouldn't ask questions, and in general might be hard to read. That was wrong. The room was great and was easy to engage. I think it helps everyone was hoping to learn something new on a topic that many hadn't considered before.

Tweets

Even if you can't integrate accessibility into your UX design now, you should be working towards it @aardrian #uxsg #accessibleux

— R Ho (@holeruch) October 3, 2014

Time to reconsider that credit card field on your form, is it dyscalculia friendly? Start addressing those accessibility woes! #uxsg

— Desiree Chua (@DezzyChua) October 3, 2014

Great chatting with @aardrian and learning of #a11y. We've got to get the #accessibleux ball rolling here in Singapore #SADeaf #uxsg

— R Ho (@holeruch) October 3, 2014

Event Photos

I've tagged all my UXSG photos on my tumblr, but I've included some of my favorites below.

Breakfast bits on the first day of #uxsg. Tasty breakfast and tea snacks continued throughout.

In Bryon Long’s #uxsg lean startup session, he identified being bald and dating as a type of problem.

#uxsg In “think like entrepreneur” session, @trentmankelow asked each of us to draw ourself.

We were also asked to add some fact unknown to the group. I mentioned my durian fascination.

Cutting my #uxsg slides down to 75 after chats today. On a rooftop bar with various animal satay and a Generously Scarlet.

The Donnie-Darko-style #uxsg Super Garang looking on after the end of the conference.

Related Links

• Eventifier tracked all the tweets from the event, including photos.
• Making the Web More Human from Nurgul Karadeniz.

Event Photos

Keep the Focus Outline

This animated GIF is a screen capture of cycling through every interactive element (mostly links) on the page using just the tab key. You'll note that in all but one case, the only indication of any change is in the lower left in the browser's status bar where it shows the URL of the destination link. The URLs ending in a "#" are the booking options.

Today's rant is inspired by all the gushing over Virgin America's new web site — just because it's responsive.

To be fair to Virgin America, making its site responsive is a huge win for users whose primary method of booking is via a smartphone or tablet (or, god forbid, phablet or tablone). Its new site, however, is a huge step backward for users who rely on the keyboard as their primary method of interaction.

Virgin America's CSS has a style to identify anchors with focus (yes, there are other elements that should get focus, but I am looking at just the most basic support): a:focus {outline: thin dotted;}

What's so frustrating is that the useful style is then overridden with this harmful declaration: a:focus {outline: none;} This override greatly decreases the usability and accessibility of the site. Unfortunately, this practice is still common on many more sites across the web.

As a web developer, one of the simplest accessibility tests you can do is unplug your mouse. Two quick things to review as part of that: Can you interact with all controls with only the keyboard? Can you tell which item has focus?

Even if you aren't motivated to run that simple test from an overriding sense of being nice to your users, there's a legal concern here. As I wrote last week, the U.S. Department of Justice held H&R block accountable to Web Content Accessibility Guidelines 2.0 Level A and AA Success Criteria. That means there is case law for making your consumer-facing site comply or face penalties.

By excluding focus styles, Virgin America is running afoul of one of the AA Requirement 2.4.7:

2.4.7 Focus Visible: Any keyboard operable user interface has a mode of operation where the keyboard focus indicator is visible. (Level AA)

In short, if your site doesn't make interaction elements obvious when accessed via keyboard, not only are you hurting users, you're opening yourself up to litigation.

Further Reading

Again, this isn't a new issue. It even has its own mini-site at OutlineNone.com, which offers these handy links:

• http://www.456bereastreet.com/archive/200905/do_not_remove_the_outline_from_links_and_form_controls/
• http://webaim.org/blog/plague-of-outline-0/
• Web Content Accessibility Guidelines (WCAG) 2.0 (2.4.7)
• Failure of Success Criterion 2.4.7 due to styling element outlines and borders in a way that removes or renders non-visible the visual focus indicator

To add another, this article, When Do Elements Take the Focus?, might be handy to understand just when you can expect to see :focus styles get applied by a browser.

Related

In March I wrote about how Google removed underlines from search result links. My concern there was that web developers might follow suit. Between removing keyboard focus indicators and underlines from links, I am amazed that developers do so much to make the core interaction element of the web essentially hidden to so many users. I am reproducing the list of related links here as they are relevant to the overall issue of keeping links usable:

• NoCoffee – Vision Simulator for Chrome (added March 25, 2014).
• WebAIM Color Contrast Checker.
• Juicy Studio Luminosity Colour Contrast Ratio Analyser.
• Contrast Ratio by Lea Verou.
• Color Contrast Analyzer Chrome plug-in.
• Use Adobe Photoshop proofing features to simulate color blindness.
• G183: Using a contrast ratio of 3:1 with surrounding text and providing additional visual cues on focus for links or controls where color alone is used to identify them
  • Links with a 3:1 contrast ratio with surrounding text, which also shows 26 web safe colors to use with black or white text.
• F73: Failure of Success Criterion 1.4.1 due to creating links that are not visually evident without color vision
• Making Accessible Links: 15 Golden Rules For Developers at SitePoint (note rule 11), February 20, 2014.
• To Underline or Not Underline Links, March 9, 2012.
• Keep the Underline at WebAxe, April 14, 2013.
• Do Links Need Underlines? by Jared Spool, July 5, 2006.

My Efforts to Reach Virgin America (so far)

I may have contacted Virgin America on Twitter once. Or Twice. Or three times. Perhaps even a fourth time. And filed a bug with WebCompat.com. And left a comment at Wired's article. I've embedded the tweets below so you an retweet if you are as whiny as I.

Hey @VirginAmerica, to help you fix your lack of keyboard access, I left a bug report for you at @webcompat: webcompat/web-bugs/issues/141

— Adrian Roselli (@aardrian) June 18, 2014

Hey @VirginAmerica, I left a comment about your lack of keyboard access at that Wired gush-piece: http://t.co/9RAjaLcAdS Just trying to help

— Adrian Roselli (@aardrian) June 17, 2014

Seriously, @VirginAmerica, just go into main.css (https://t.co/E1Jh0qSu74) and *at least* delete this: a:focus{outline:none} 2 minutes.

— Adrian Roselli (@aardrian) June 16, 2014

Useless for keyboard users. RT @RWD: […], so I missed that the new responsive @VirginAmerica site went live! http://t.co/RM1tikjo14

— Adrian Roselli (@aardrian) June 16, 2014

Update: June 27, 2014

On December 12, 2013 a rule became effective from the U.S. Department of Transportation (DOT) titled Nondiscrimination on the Basis of Disability in Air Travel: Accessibility of Web Sites and Automated Kiosks at U.S. Airports. That links points to the following section on accessibility:

Finally, we proposed a tiered implementation approach in which the WCAG 2.0 standard at Level A and AA would apply to (1) a new or completely redesigned primary Web site brought online 180 or more days after the effective date of the final rule; […]

As keyboard accessibility is one of the requirements of WCAG AA compliance, Virgin America's new site does not honor this rule. However, if the Virgin site officially launched before June 10, 2014, then it squeaks by on a date technicality.

More information on the implications of the law are in the post New accessibility rules coming to airline websites. Are you ready?

Update: July 21

It took just over a month, but Virgin America responded to me:

@aardrian Thanks for your feedback on the #VXnewlook Please follow + DM if you'd like to share more.

— Virgin America (@VirginAmerica) July 21, 2014

I don't see any reason to follow and/or direct message to share more information. I have this blog post, which I've linked repeatedly. I think that's plenty. I responded and asked if or when the issue would be fixed, but I've been met with silence. Perhaps in another month I'll hear more.

In the meantime, given the amount of action the below tweet of mine has gotten, I know I am not alone in thinking that disabling the focus outline is generally a bad idea:

Use this ONE WEIRD TRICK to make your sites keyboard friendly: Delete this: :focus {outline: none}

— Adrian Roselli (@aardrian) July 17, 2014

Update: October 15, 2014 — Screen Reader Walk-Through

Marcy Sutton, at the JSConf, provided a walk-through of the Virgin America web site experience using a screen reader. It does a great job of showing what a terrible experience this site has created. I've embedded it below, bracketed to the relevant part of her talk, or you can view it directly on YouTube (starting at 0:20).

Update: October 23, 2014

Here is a video of the screen reader walk-through, pulled from the latest version of Marcy Sutton's slides on Angular Accessibility:

What to Consider before Using Free Getty Images

There was quite a lot of chatter this week over Getty's move to make its image library (ok, only 40 million of its images) free for non-commercial use on the web. Some might think they can now just start taking images from the Getty site, but not quite. Getty requires you use its embed tool.

Caveats

If you're reading this blog, odds are that you are comfortable with HTML. While I cannot deny the value of being able to drop quality images into your site with hardly any effort, there are things as site builders that you need to know so you can best deploy them — or decide if it's even worth using the Getty images.

Accessibility

Because the image is embedded via an iframe, there is no opportunity for you to insert a text alternative, short of using ARIA (such as an aria-describedby attribute). In addition, the img element within the iframe has no alt attribute.

This feels like a miss to me because Getty has the image description — it's part of how search results are generated. For example, on this image page within Getty there is a caption: View from Giotto's Bell Tower (Campanile di Giotto) on the dome of Florence.

For some reason Getty doesn't make this available as a text alternative. I'm not expecting a longdesc here, but the text alternative seems like low-hanging fruit to me.

All of this ignores any possible issues AT might have with embedded iframes. In that case, I'll have to defer to an AT user who has some experience with navigating into and out of an iframe within a page of content. My guess is that it isn't much different from other embedding techniques, such as YouTube or SlideShare.

Web Beacons

In the example at the start of this post you can see there is a Twitter icon and a Tumblr icon. The Twitter button is loaded via (yet another) iframe. Calls are made to both Twitter's and Tumblr's servers.

Every time you embed an image, not only are your users making a call for the image itself, but also calls to Twitter and Tumblr. Getty is probably more than happy to have these tracking beacons in place. While there are only two today, it is not unreasonable to expect to see more social platform buttons and additional beacons appear.

Conveniently, running a blocker like Ghostery won't block the image just because you block the share buttons.

Keep in mind, though, that Getty has full control over what appears in that iframe. While two share buttons may be innocuous today, it is possible (however unlikely) that Getty could choose to start serving advertisements in those iframes.

Depending on our paranoia level for your own content presentation or the paranoia level you presume from your users, this may be an issue. It may also not matter in the slightest.

Link Rot

Once you embed the image and walk away, you have no control. If Getty changes its licensing, if the photo owner rescinds his/her licensing to Getty, if Getty decides to throttle its service in the case of great demand, and so on, your site may end up with a big blank hole. Or perhaps an ugly 404.

I have blog posts that go back to 1999. Services I might have used then to embed content would likely be gone now. Services I have used in just the last few years have gone away. A List Apart has had to make some efforts to combat the risk of link rot when deciding to use embeds on its site. You may want to consider if you or your clients/authors are technically savvy enough or have the time to account for that eventuality.

If you embed YouTube videos, you are already taking a risk with link rot. YouTube, I would argue, has more staying power than Getty's service. I could be wrong, but Getty is just getting its feet wet and finding its way with this service.

Getty's Embed Tool

The Getty image embed dialog just gives you the HTML, no features to adjust the size for those who don't know HTML.

Today there is a simple tool to provide the code for embedding on your site. At the time of this writing, there is no option to generate a shortcode for WordPress or similar sites. This may not be an issue, but it's worth noting in case you have an editor configuration that requires one.

If you manage to find the perfect photo after navigating screen-fuls of images, make sure you either control-click or right-click-new-window the learn more or terms links, otherwise you'll lose your place when the page reloads. That happened to me once for each before I learned my lesson.

Resizing

You'll note in the dialog box that there is no way to control the size of the image unless you know HTML and can do some quick math to maintain the aspect ratio. Even then, the addition of the photo credit and share buttons throws off just a quick resize since the bar doesn't scale at the same ratio as the image.

The image at the start of this post uses the default embed code, which relies on an iframe to get the job done. Here is the code used above so you can see it for yourself:

<iframe src="//embed.gettyimages.com/embed/169806314?et=b9XcPxZV00uZxQocw6IV8w&sig=7jthMs-wOcnmL6ur84uWjsbWmN59YtnymYNNfZNIclw=" width="478" height="428" frameborder="0" scrolling="no"></iframe>

If I want to make the image fill the width of this column (540px), then I need to scale it up a bit, which gets me extra space below the bar that I don't need:

Scaling it down to 200 pixels in width and maintaining the aspect ratio gets me a minimum iframe height despite my code in order to preserve the now truncated credit bar:

No matter what size you embed the image, the file will always be the same dimensions. Embedding the file smaller doesn't result in a smaller payload delivered to the browser. The image dimensions don't change, so scaling the image up also doesn't give you a higher quality image, just a potentially blurry image.

This is important to consider if you want to make the iframe responsive. You don't get a larger image or a higher quality image as the iframe scales. The image itself isn't high resolution, so scaling up at all will get muddy on high PPI devices.

Alternatives

You can continue to use no images. You could steal images from the web (which is wrong, so don't do that). You can, of course, always find free stock imagery. It typically sucks. However, there is a list of resources over at Medium of stock photography that doesn't suck. You can also look at the CC-BY licensing terms at Flickr and pull images from there (with no troublesome embed).

Alternatively, you can go take the photo you need. Granted, if Getty is appealing to you it may very well be because you don't have the time, skill, or inclination to shoot, edit and embed your own images. There is nothing wrong with that.

However, using your own images gives you many benefits. The image below is mine. I think it looks better than the Getty image I use at the start of this post (which is rarely the case). It is responsive. It is high resolution. It utilizes accessibility features. It has no web beacons. It's a smaller file (42.1KB at 1,000 × 664 versus the Getty image at 91.9KB at 478 × 359).

It also required far more effort to optimize and embed.

Example of my own photo that scales, is high-DPI, and contains basic accessibility features.

Related

• Getty makes 40 million stock photos available for free
• The world's largest photo service just made its pictures free to use
• Photographers warn of 'cynical' move by Getty to provide free pictures

Update: March 13, 2014

Electronic Frontier Foundation has weighed in: Getty Images Allows Free Embedding, but at What Cost to Privacy? It goes deeper into my concerns about privacy and tracking and notes that by not serving the images via HTTPS users may be exposing their surfing behavior even when using a site over HTTPS.

Update: March 16, 2014

I addressed one of my caveats above, the only one over which I have any control and by no means the most important one. I wrote a script to Make Getty Embeds Responsive. Maybe it will help you, maybe you come up with a better variation. Either way, at least you won't have to worry about clients embedding fixed-width Getty iframes that blow up your responsive layouts.

Network Solutions Is Most Likely Not Phishing

You may have read my rant earlier this week about Network Solutions trying to trick me into allowing them to send me spam. As part of that dark pattern, Network Solutions asks me to verify my contact information, and then tries to up-sell me, and then suggests that I need to verify my contact information (but which is really a spam opt-in).

You can imagine I am primed against being asked to confirm my information by Network Solutions.

For a little extra context, since I receive a few emails a week from Network Solutions (such as this one to auto-renew, or this one for SEO, or this one to obfuscate my WHOIS info), which jumps to daily after I partake in any activity on the Network Solutions site, I typically filter them into dev/null/i-mean-it.

So I was wary when I received the following email once yesterday (the day after I renewed my domain) and once again today:

I block Outlook from downloading embedded images to prevent spammers tracking when I have opened their emails, hence the missing images.

The message within:

Dear Customer,

New Regulations now require that domain account holders confirm their email information otherwise their domain will be deactivated. If your domain is deactivated you will still own the domain but you will not be able to have a live website until you verify your contact information.

To ensure your domain(s) remain active, please click the CONFIRM button below to confirm the email address we have for you is accurate.

Note the explicit threat. Note the lack of a link to the new regulations, let alone the source of those regulations. Note the shiny red all-caps CONFIRM.

I think we've all spent enough time as family tech support to know that you aren't supposed to click links in emails. My bank tells me this, the government tells me this, it's on general support sites, and even Network Solutions has had to tell people not to click links in emails (not to mention recent news of a GoDaddy hack). Heck, robots know this — f you type don't click into the Google search box, it will auto-complete with on links in email:

I know this is anecdotal, but it's a great image to make my point.

Because I am a child of the internet age, and because the support phone number in the email could point to anyone, I contacted Network Solutions on Twitter to see if this was for real:

@aardrian From us. ^rr

— Network Solutions (@netsolcares) January 30, 2014

@aardrian Please click the link to verify the information to eliminate additional notices. ^rr

— Network Solutions (@netsolcares) January 30, 2014

@aardrian If u continue to get the notices after u click please call the number at the bottom of the notice so our support team can check.

— Network Solutions (@netsolcares) January 30, 2014

@aardrian It is possible. Please call the number in the communication and they can explain the entire confirmation process. ^rr

— Network Solutions (@netsolcares) January 30, 2014

It's like I'm texting with a 13-year-old.

Reassured the phone number in the email is a true Network Solutions number, I called and navigated the menu system. After I explained the situation and why I don't want to click the link, the representative explained that my domain will be shut down if I don't do it. He could not offer a time frame (but he hadn't seen anyone shut down because no one has waited more than two weeks). He also said he cannot do this over the phone and that I must click the link.

When I pressed for the regulation, he said it's an ICANN regulation but could not tell me where to find it. He explained that if I don't respond, eventually my domain will point to a parked page (my word), though he didn't know if it's an advertisement-laden Network Solutions page or an ICANN page.

When I got off the phone, I looked around for an ICANN regulation. The closest thing I found was in a PDF dated June 27, 2013 (page 43, under WHOIS Accuracy Program Specification):

Registrar shall implement and comply with the requirements set forth in this Specification […]

1. […] within fifteen (15) days of (1) the registration of a Registered Name sponsored by Registrar, (2) the transfer of the sponsorship of a Registered Name to Registrar, or (3) any change in the Registered Name Holder […]
   6. Verify:
      1. the email address of the Registered Name Holder (and, if different, the Account Holder) by sending an email requiring an affirmative response through a tool-based authentication method such as providing a unique code that must be returned in a manner designated by the Registrar, or
      2. the telephone number of the Registered Name Holder […]
      In either case, if Registrar does not receive an affirmative response from the Registered Name Holder, Registrar shall either verify the applicable contact information manually or suspend the registration, until such time as Registrar has verified the applicable contact information.

Having registered and renewed domains since July, and given that this was a renewal, the fact that I just got this for the first time does seem like the implementation has been delayed.

So by that language, yes, Network Solutions can do exactly what it is doing. Given Network Solutions' constant spam, constant final notice of deactivation messages that are not, in fact, final, and folded in with its dark patterns on the web site, I don't trust anything I get from Network Solutions as far as I can spit it. It doesn't help that I saw no notifications of this (unlinked) nameless regulation when I was in my account two days ago, so I also wasn't primed for it after I had just verified my contact information.

So what's the takeaway here? Don't do what Network Solutions does and you will have taken a big step to avoid being viewed as a spammer or phisher by your own customers.

Related

• Network Solutions and Dark Patterns
• Network Solutions and Yet More Dark Patterns

Update: February 7, 2014

The day after I posted this, Network Solutions offered some explanation on its blog: "Domain Verification Emails from Network Solutions Related to New ICANN Security Regulations." I found out about it today when Network Solutions responded to my latest related tweet:

@aardrian Thanks for your feedback, Adrian. We have posted info regarding this process to our blog: http://t.co/hxlyD0PG9Y ^kh

— Network Solutions (@netsolcares) February 7, 2014

@aardrian There's always a chance! We'll definitely share your input so that it can be considered for future updates or process changes. ^kh

— Network Solutions (@netsolcares) February 7, 2014

Update: February 19, 2014

As you can see in the comments below, one user commented on the Network Solutions blog post, was acknowledged, and then Network Solutions removed the commenting feature altogether. He was able to provide me with a screen capture of the comments (and reply) from Disqus:

Screen shot of the Disqus discussion. Transcript now available.

Update: April 10, 2014

Meanwhile, after telling me to click the link in the email (see above), NetSol is telling other users not to click links in email, "to be safe." This certainly doesn't help reduce confusion.

@deepsoul13 Just don't click on links to be safe! You should always keep your WP updated. ab

— Network Solutions (@netsolcares) April 9, 2014

Network Solutions and Yet More Dark Patterns

In late 2012 I related my extreme displeasure of trying to register a domain through the intentionally confusing Network Solutions ecommerce flow. In my post, Network Solutions and Dark Patterns, I used a whole lot of screen captures to show the convoluted flow that I believe Network Solutions uses to trick its customers into agreeing to add-on services (and cost).

I noticed a fresh one today as I had to go in and renew a personal domain and quickly recognized that it behooves you as the customer to read every piece of text Network Solutions puts on the screen, else you'll agree to things you did not intend. I walk through the process below (in far fewer screens than last time).

Upon Signing In

The screen immediately after logging in, with a form asking for contact verification.

As soon as I sign in, Network Solutions wants me to verify my contact information. This makes sense to me. After all, it's hard to notify someone that his/her domain name is about to expire when he/she has changed email addresses and not updated it here.

The text is straightforward:

To ensure that you receive essential information about your account and services, please confirm the contact information that we have on record for you.

Now the First Pitch

This screen is trying to get me to add the Private Registration service. Note the red italic style in the graphic for the word exposed.

Unsurprisingly, I am asked to buy into Network Solutions' obfuscation service. Using scary language, this is the first pitch to try to get me to add some services:

Your name, phone number, and address are listed in the public WHOIS database for your domain(s).

Apply Private Registration to your domain(s) to safeguard your personal information.

The phone book, among many other public databases, has had my information on file for years. I can skip this and its undisclosed costs.

Check Your Contact Information

This is where it goes all wrong.

This screen is ostensibly asking me to verify my email and phone number, but a careful read shows that's not the case.

Now I am presented with a screen asking me to Check [My] Contact Information. On my first visit to this page I was just about to click the submit button when I remembered that I had already confirmed my contact information when I logged into the site. So I opted to read the opening sentence:

Please confirm the contact information for Adrian Roselli to ensure that you receive important communications about your account.

Yep, this sounds like what I already did. Time to read the small print at the bottom:

* By submitting the contact information above, you expressly consent to Web.com and its affiliates contacting you regarding your services and offering new services via the contact information you provide (including your mobile number), via an automatic telephone dialing system or pre-recorded call. You are not required to give consent in order to make a purchase with us or our affiliates and you can find additional information in our Privacy Policy. Click here to remove your consent.

I emphasized the hyperlinks above. Affiliates. Privacy Policy. Click here. That last one is key. You have to click here to remove your consent. It's carefully hidden (note the red arrow in the screen shot above) behind the awful link text click here and suggests that I am already opted in.

I reproduce the small text on this screen below.

As I dutifully click there, the content expands to show me the following checkbox — which is unchecked:

I do not consent to Web.com and its affiliates contacting me through automated telephone dialing systems, pre-recorded calls or text messages on my mobile phone, or through pre-recorded calls on my residential line.

As I read that text I realize I am giving Network Solutions, and anyone it and Web.com deem worthy, the right to send me text messages. I note that because many people have to pay for their text messages. The robo-calls are just as annoying, of course, but I personally take umbrage with the text message approach.

Apparently I cannot not submit information.

I check the box and, just to be on the safe side, clear my phone number before I submit the form. I get this seemingly offshore-call-center-poorly-localized error message:

Please, fill the empty fields.

Once I enter a number again I am allowed to continue and am thanked with this absurd message:

Processing…

To be fair, that's not a dark pattern. However, waiting an additional 5-6 seconds after wasting a few minutes with this stupid process of trickery just to see an animated GIF imply that whatever is happening in the background must be so important to also affect my ability to spend my money warrants some mocking. Deep breath.

Conclusion

Network Solutions may be less evil than some other registrars (sideways glance at the despicable GoDaddy), but by all means read every piece of text and every button before you sign away your text message limits or, as in my previous post, end up paying for services you cannot cancel.

By the way, if I do accidentally give my permission, I challenge you to find where in the interface I can revoke that permission.

“Tracking Printed Pages (or How to Validate Assumptions)” at Web Standards Sherpa

Today my second article at Web Standards Sherpa has been posted, Tracking Printed Pages (or How to Validate Assumptions). I fit a lot in there, but the gist is that I show you how to track when and what pages from a site are printed so you can make a better decision about where to invest your effort.

I also draw a comparison to the time we all spend on building carousels for sites, but may not be tracking. After all, if no one uses the carousel and people do print pages from your site, you might just want to change where you are spending your development time.

The article also has the nifty ReadSpeaker feature which means that the page can read the article aloud to you in a voice that is entirely unlike mine (at least it's a male voice by default).

What guides your project decisions? Data or assumptions? Adrian discusses the importance of tracking site features, like print styles, to inform how and where you invest effort. Read it…

Web Development Advent Calendars for 2013

Ganesha may or may not be stealing chocolate from the advent calendar.

For a few years now web developers around the world have celebrated Saturnalia Christmas with advent calendars covering topics related to the web. Some come and go, but you'll probably recognize a few regulars on this list.

I may have missed some, so please pass them along if you know of any. For those I know are not returning, I have listed them at the end.

1. 24 Ways

24 Ways, the one that most of this think about for web development calendars, is back again. It's been going strong since 2005 and based on its history this year should have some good articles.

2. Perl Advent Calendar

Perl Advent Calendar goes all the way back to 2000 (and back then looked a bit more like a traditional advent calendar, too) and has been dispensing tips for Perl developers ever since.

3. 24 Jours de Web

24 Jours de Web is starting its second year as an advent calendar for web folk. Written in French, it is clearly primarily targeted at French speakers, but a round of Google Translate will open it up to far more readers (like me).

4. UXmas

UXmas is an advent calendar aimed at the user experience community. Coming from Australia, American readers may be thrown just a bit by the schedule. The calendar promises everything from sketches, to articles, to tools, to videos.

5. Webkrauts

Webkrauts has an all German advent calendar, and it also dates back to 2005. It covers general web topics, but being in all-German readers like me will benefit from a Google Translate version of the page.

6. 12 Devs of Xmas

12 Devs of Xmas will also start the day after Christmas and go for 12 days from then. When all the other calendars have wrapped up, you'll still have one to read. The site is silent on its return, but this tweet suggests it's gotten writers and has a plan.

7. Freelancember

Freelancember 2013 is targeted squarely at freelancers. Its daily entries will consist of downloadable gifts in the form of PDF worksheets. Think of this as less about web-tech and more about MadLibs for projects. It has last year's calendar there as well, and so far (as of December 1) I cannot tell the calendar will just be a repeat of last year.

8. Mozilla Developer Network Holidays calendar

Mozilla Developer Network Holidays calendar includes brief links to resources or demos and suggests that you can edit them (if they are MDN resources). It doesn't link to previous years, but you can just hack the URL.

9. SysAdvent

SysAdvent is targeted to systems administrators, but there is a some cross-over to web developers. It has posts dating back to 2008 (and yet I missed it in last year's collection), so there is plenty of good material there if you're too impatient to wait for each day to be revealed.

10. Performance Calendar

Performance Calendar hails this as the speed geek's favorite time of the year, ostensibly because of the tips it has been offering each December since 2009. It isn't just server optimizations you'll find here, so don't shy away because you're not a system admin.

11. Web Accessibility Advent Calendar 2013

Web Accessibility Advent Calendar 2013 is in Japanese, and thanks to the wonderful powers of Google Translate, I can tell you that it is a calendar to make the talk about Web accessibility (based on this statement: Webアクセシビリティに関する話題でつくるカレンダーです。). If you know Japanese, I welcome any corrections. The site Adventar.org appears to host other advent calendars, some about web technologies, some about ramen.

12. Creative Bloq Advent Giveaway

Creative Bloq Advent Giveaway posts aren't collected in one place, so you'll have to find them on the site yourself (I linked the first one). Creative Bloq is the parent of .net Magazine, but you can expect most of its freebies will be targeted toward designers. Also, not all the gifts will be free, some will be discounts.

13. 24 Pull Requests

24 Pull Requests is less an advent calendar than it is an effort to mobilize developers. The goal is to get developers to send a pull request every day in December (up to Christmas), thereby supporting your favorite open source projects. There are even Coderwall badges for those who collect those sorts of things. This entry via Creative Bloq.

Not Returning

A handful of calendars aren't returning this year (so far), but in most cases content from previous years is still available. These include Font Deck's Adfont Calendar (which also skipped 2012), the Fronteers advent calendar (in Dutch, and also skipped 2012), Web Advent (it's taking a year off), HTML & CSS Advent (this is the 2012 calendar), She Said It (no access to old calendar), 12 Days of Podcasts (or at least there is no indication on its site or Twitter).

Not Web Related

ScienceGeek Advent Calendar Extravaganza is not web-related at all, and frankly it isn't promoted nor is it tagged (although I linked to “special” since that tag had the first day and nothing else). It is, however, probably going to be neat stuff given the first day is a giant image of the Christmas Tree Cluster.

Tables as Responsive Image Containers

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:

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.

Update: January 2, 2013

Other responsive image options:

• From Bruce Lawson.
• Over at Medium.