Sunday, April 27, 2014

We Need to Raise a Stink about Net Neutrality

Image showing the base price of a fake company's DSL connection, with add-on pricing for access to groups of web sites, such as streaming sites, news sites, shopping sites, etc.
Found this on the Twitters in @CypherTheDane's tweet. Read a full-text version of this graphic.

In January I wrote about the latest risk to net neutrality here in the U.S (Net Neutrality News). Unsurprisingly, the only change since then is that net neutrality is more at risk, despite some brief outcry and even a million-signature petition.

You should care. We should all care. Remember, it's just a matter of time before that thing you like to do on the Internet is throttled down to painfully slow in favor of that other thing you don't like on the Internet.

Want to play a video game with your friends? Maybe Microsoft is paying to prioritize its XBox traffic over your Sony Playstation. Want to watch Netflix? Good thing Netflix is already paying for priority access and probably passing that cost on soon enough. Want to found an internet business and compete with the likes of Twitter? Ask your funding source to compete with Twitter's pocketbook just to get access.

The thing is, as consumers (which include those of us on our couches and those of us running a business) we cannot afford to stand by and hope this sorts itself out in favor of anyone but the telecommunications industry.

Why We Cannot Hope for the Best

I am loathe to dive directly into politics here. Few people want to hear me rant about my plan for outlawing Crocs and regulating the chocolate industry to require that white chocolate is made with real cocoa butter. However, this is important.

We can look to our president and hope that he is going to stand up for net neutrality. We can even feel good about a promise he made in 2007 when running for office (as reported by Cnet):

I am a strong supporter of Net neutrality. What you've been seeing is some lobbying that says that the servers and the various portals through which you're getting information over the Internet should be able to be gatekeepers and to charge different rates to different Web sites…so you could get much better quality from the Fox News site and you'd be getting rotten service from the mom and pop sites. And that I think destroys one of the best things about the Internet—which is that there is this incredible equality there.

He seemed to get it. He referenced Fox News, arguably his biggest mass media critic then and now, as someone who could pay for more access. I thought we could count on this guy.

Except President Obama has made other promises that haven't panned out (like every other modern president, of course), including ones that have led to the situation we're in now. Relevant here is his campaign promise to not put lobbyists in his administration, which Politifact rated as broken as early as 2009.

The FCC's current chairman, Tom Wheeler, is an example of that broken promise. Tom Wheeler's FCC bio lists his books and some of his jobs. It fails to note, however, his roles as President of the National Cable Television Association (NCTA) and CEO of the Cellular Telecommunications & Internet Association (CTIA) (1992-2004), both lobbying organizations.

It's easy to make the case that his nomination to the FCC post is a function of his campaign donations. For Obama's first run at the presidency, Wheeler raised between $200,000 and $500,000 and personally gave $28,500 to the Obama Victory Fund. For Obama's re-election campaign he hosted a $5,000 to $20,000 per plate fundraising lunch.

To recap, the guy in charge of making the decision over net neutrality is a former lobbyist for the very industry that wants to prevent net neutrality. He likely got this job as a function of his financial support for getting his future boss elected. It seems unlikely net neutrality will find a friend in either Tom Wheeler or President Obama.

Realizing that this is the kind decision that the FCC and White House might be motivated to make quietly, someone took the time to start a petition on WhiteHouse.gov (the ideal armchair activist site). The idea here is that once (if) it hits 100,000 signatures, the White House (President Obama, but likely his proxy) will have to respond.

If the White House truly complied with its own rules about honoring 100,000 signatures with a response, then we might have gotten a non-answer (though I hoped for a deportation) on the Justin Bieber petition. Ok, that one is clearly a tongue-in-cheek (not really) petition, but others have been ignored altogether, resulting in a petition to get petitions answered (a similar one from 2011 didn't get a response even after it met the then-25,000 signature limit).

Sadly, the FCC is making its own decision on or shortly after May 15. The petition closes 9 days later, so there is no way the White House will be issuing a response before the FCC is already off to the races.

Maybe you can find help via Congress, although you'll probably not get it from the likes of people like Lamar Smith or others who demonstrated a fundamental misunderstanding of the internet with regard to SOPA and PIPA (or demonstrated that they were easily bought by special interest).

What To Do?

Sign the petition. Ideally it will hit 100,000 signatures before its close date and before the FCC's May 15 date. Just maybe the FCC will listen before it goes and breaks the internet for Americans.

The FCC has set up an email address, openinternet@fcc.gov, to solicit comments from the general public. Use it.

Maybe write a blog post, or a news article, or something visible to the general public to help add to the public discontent.

Then express your displeasure, repeatedly, by tweeting, calling, emailing, and so on, the White House, the President, your representatives, the FCC, and for good measure perhaps the first lady, the press, and the (sadly, now deceased) emperor of San Francisco.

Here, I've started a couple tweets for you:

.@BarackObama Honor your campaign promise to maintain net neutrality. (Tweet it)

.@TomWheelerFCC @FCC Guarantee all Americans have access to the internet and our own government by maintaining and codifying net neutrality. (Tweet it)

Related

Update: May 2, 2014

Bill Stewart has written an excellent post that attempts to explain to those who are less technical than the average developer why net neutrality is important. Go read it and share it: Explaining Why Net Neutrality is Important

Update: May 13, 2014

If you're still a bit confused on net neutrality and have 11 minutes to spare for a primer, take this one for a spin:

Update: June 7, 2014

On Last Week Tonight with John Oliver, he takes just over 13 minutes to explain, justify, and then instruct how to defend net neutrality. I have embedded the video below, but for those who just want to act, he points out that the FCC has decided to take comments from the public, which you can do at: fcc.gov/comments, or specifically proceeding 14-28.

As of this writing, there are 49,206 comments, only the most recent 10,000 of which (for reasons unknown) can be viewed (oddly, with addresses) in PDF format (which I cannot explain) at http://apps.fcc.gov/ecfs/comment_search/execute?proceeding=14-28

If you still aren't sure why you should take the time to do this, I present John Oliver's argument:

Update: August 30, 2014

I stumbled across this piece that, while a little late to the party, lists examples of where phone and cable companies have already been violating any prior agreements or statements to honor any kind of unofficial net neutrality: Net Blocking: A Problem in Need of a Solution

Update: November 10, 2014

President Obama appears to have finally remembered the promise he made while running in 2007. Having waited until the last minute, ignored petitions, ignored general calls from industry, he has finally outlined some high-level guidelines and asked the FCC to maybe consider them (I left the tt elements in place in the citation below, though I don't know they are there):

  • No blocking. If a consumer requests access to a website or service, and the content is legal, your ISP should not be permitted to block it. That way, every player — not just those commercially affiliated with an ISP — gets a fair shot at your business.
  • No throttling. Nor should ISPs be able to intentionally slow down some content or speed up others — through a process often called “throttling” — based on the type of service or your ISP’s preferences.
  • Increased transparency. The connection between consumers and ISPs — the so-called “last mile” — is not the only place some sites might get special treatment. So, I am also asking the FCC to make full use of the transparency authorities the court recently upheld, and if necessary to apply net neutrality rules to points of interconnection between the ISP and the rest of the Internet.
  • No paid prioritization. Simply put: No service should be stuck in a “slow lane” because it does not pay a fee. That kind of gatekeeping would undermine the level playing field essential to the Internet’s growth. So, as I have before, I am asking for an explicit ban on paid prioritization and any other restriction that has a similar effect.

Despite this positive statement, I think this quote is more telling (subject-verb agreement issues notwithstanding): The FCC is an independent agency, and ultimately this decision is theirs alone.

In short, he's doing nothing.

Wednesday, April 16, 2014

Patents versus Accessibility

Just one example of the many gesture patents rolling around in the USPTO database, this one for denoting something important by making a heart shape over it.

I haven't ranted about patents for a while, which doesn't mean there hasn't been any activity. In fact, there has been activity in precisely the space where I think patents can disproportionately hurt users — in accessibility technologies.

A couple weeks back Don Norman put together an overview of gestures as user interface behaviors in Gestural Control: The Good, the Bad, and the Ugly. His opening salvo sums up the concern with patent encumbrance:

I await the day when gestures become standardized. When systems combine the best of all worlds: gestures, voice, and menus, keyboards, and pointing devices. But before we can do this, we have a simple task to do: reform the patent system.

He rightly notes that while gestures can be powerful, they are not universal. Cultural differences alone can make gestures difficult to translate across users. Implementation of gestures is also inconsistent, even across devices from one manufacturer (looking at you, Apple, Microsoft, and everyone else). He does identify a scenario where gestures can be consistent:

Yes, some groups of people such as athletes and referees, military squads and others learn standard gestures to let them work efficiently where other means of communication are not possible, either because of the need to be silent or because of a high noise level.

I argue that this statement also applies to users with disabilities. For example, sign language is a common set of gestures that allows its users to communicate regardless of the ability to hear (whether by audio impairment or, as in the case of some of my friends, stealthily complaining about the server).

Patents on gestures is nothing new. The opening example of a heart-shaped gesture to allow Google Glass users to "like" things they see in real life dates back to 2011. That is from a very quick search in the US Patent & Trademark Office (USPTO) database for "gesture." If had a budget to search, I suspect I could find older.

The problem here is that gestures are already obtuse and complex enough in many cases, but patent-encumbered gestures will result in even more unintuitive and bizarre contortions to perform the same function across devices. This will also make it that much harder for users to switch platforms, let alone learn a first platform.

Think about this in the scope of accessibility. As I mused on Twitter, wouldn't it be nice if a user could enable and use accessibility features on any device with the same gesture (or set of gestures)? Just as I can pick up any device and read words on the screen in a generally consistent way, or just as I can expect a ramp to work that same way no matter the building to which it's attached, I think consistency removes a barrier to entry that is otherwise being built up more and more.

Example of a GUI with accessibility features in an Apple patent.

If you think accessibility features will be somehow immune to the patent process, consider Apple's patent for a graphical user interface for the visually impaired (there's a PDF of the entire application as well).

That Apple patent likely means if Samsung wants to use an interface that has even a passing resemblance to the one Apple has patented, you can expect Apple to sue. The same goes for a gesture. The same will go for gestures that are tied to accessibility features.

We've already got a patent system that's out of control, with even the most basic ideas receiving patents. It seems the same patent process is also building barriers to accessibility using the very ideals that should be using to tear barriers down. Ideally with enough people raising a stink we can slow or even stop the process.

Previous Patent Rants

Tuesday, April 8, 2014

Burying Windows XP with IE11 Enterprise Mode

Chart showing the IE8 is the browser common to Windows XP and Windows 7.
Screen shot from Microsoft's presentation on IE11 Enterprise Mode, showing what browsers are available on what versions of Windows. Note that the Venn-ish diagram has no IE11 intersection for Windows 8.

As of today, Windows XP has effectively reached its end of life. What I mean by that is that Microsoft will no longer be releasing security patches for Windows XP. Those of you waiting to deploy those XP exploits can run at the platform unopposed.

While this may be a nuisance for the home user (and the family who acts as his/her tech support), this has larger implications in the business world. For example, if you work in the healthcare world you may very well be in violation of HIPAA / HITECH laws if you're still running Windows XP tomorrow.

What's really annoying about this is that so many web-based applications were built to support the dominant browser(s) at the time — Internet Explorer 6 through 8. What that means is users on Internet Explorer 11 are being locked out of these online tools, making the transition away from Windows XP (which cannot have a version of IE greater than 8) a tough proposition for organizations.

Simply put, poor web development practices have created an environment where upgrading to the latest version of IE is directly at odds with keeping your productivity up (if it requires you to stay on an old version of IE). Complicate that by now making that old version of IE a vector for security breaches and compliance penalties/lawsuits.

But fear not! As long you have the hardware and licenses to run Windows 7 or Windows 8.1 (notice, not Windows 8), you can still use those Internet Explorer 8 web sites without being locked out (you're SOL if you need IE6).

With a week before Windows XP turns into a zombie, Microsoft released Enterprise Mode for Internet Explorer 11. After all, you only needed a week to get all that hardware in place and configured, right?

Enterprise Mode doesn't just emulate IE8, it masquerades as it. Some of the benefits of Enterprise Mode:

  • Enterprise Mode sends the IE8 user agent string to defeat misguided browser sniffers;
  • it mimics the responses IE8 sends to ActiveX controls, ideally allowing them to keep working;
  • it supports features removed from later versions of IE (CSS Expressions, woo hoo!);
  • pre-caching and pre-rendering are disabled to keep from confusing older applications;
  • IE8's Compatibility View is supported, so odds are many applications designed for IE7 will work.

Some web developers have panicked that now they'll have to support another browser or browser mode, but so far the evidence doesn't bear that out.

Enterprise Mode will be controlled by a central source, most likely corporate IT departments, and will only be enabled for sites that have been manually identified. Intranets and custom-built un-maintained web-based applications are an easy fit here. If an IT department deems it appropriate, it can also allows end users to decide to enable Enterprise Mode on a site-by-site basis.

Microsoft has been testing this in many industries and countries (though not China, the biggest culprit for old, and illegal, versions of Windows). Hopefully this will help speed users to upgrade to IE11, even if it doesn't provide motivation for organizations to upgrade their legacy IE8 applications.

In addition to the links above, you can get more information from the video of Microsoft's Enterprise Mode presentation, or you can just view the presentation slides alone.

In short, this is a great band-aid for organizations that already have Windows 7 or 8.1, but won't be helping to push IE8 out of the way (despite the best efforts of some). In short, as web developers, we can expect to support IE8 for a while still.

Related

With the demise of Windows XP (even though we know it's not suddenly gone today), Internet Explorer 6 is also at its end of life (because no supported platform can run it). We know that it won't go away completely, but it's still being celebrated at sites like IE6death.com.

Update: April 11, 2014

I mentioned HIPAA above and linked to a post that argues for the presence of Windows XP as an automatic HIPAA violation. A more balanced and, and well-cited, post is over at the Algonquin Studios blog: So You’re Stuck with Windows XP but Still Need to be HIPAA Compliant

Sunday, March 16, 2014

Make Getty Embeds Responsive

In my post What to Consider before Using Free Getty Images one of the many caveats I outlined was the lack of responsive support in Getty's iframe code. Of all the issues I raised, this one is actually pretty easy to get around.

Background

While the other points still preclude me from readily using Getty image embeds, I recognize its value to clients and want to be able to allow them to use these images without fear of breaking the responsive sites we've coded. I also wanted a solution that won't require my clients to do any extra work, such as embedding HTML wrappers, adding classes or IDs, inline script, or generally mucking about in code.

If you've read at least a few of my last 15 years of writing, you might know I have a general aversion to scripted solutions and generally start trying with a CSS solution. At first glance, there is an example dating back five years at A List Apart that I thought might work, Creating Intrinsic Ratios for Video.

Another post tackled other embeds (Vimeo, Slideshare) in 2011 using the same technique expanded just a bit. Five years on and a new article popped up (just a couple weeks ago, Making Embedded Content Work In Responsive Design) that is targeting more third-party embeds (calendars, Google Maps), but leans on the A List Apart technique — and by leans on I mean just uses it outright but for more services.

The A List Apart solution and its variations don't work for two reasons: 1) they violate my requirement of not making my authors create HTML and 2) they rely on knowing the ratios. Every Getty image can have its own aspect ratio that I can't expect my authors to calculate.

The Getty embed has another factor not accounted for in these other solutions — regardless of the image aspect ratio, there is always a credit box below the image at a seemingly fixed height. This bar will always occupy that height, so scaling the image's height based directly on its width ends up leaving an ugly vertical white bar on the right of the image. This precludes any simple ratio as a solution.

My Solution

I made a demo to show my solution (does not open in a new window).

I decided the best approach was to write a JavaScript function that accounted for the height of the image credit as it calculated the image ratio. Then it would apply width and height styles that would scale the embed without leaving the ugly white gap on the right (barring rounding errors, which are evident in the portrait images).

I opted for JavaScript instead of a block of jQuery because I knew this would be maybe a dozen lines of code in total, and requiring an additional 29-82KB (depending on your minification and zippage) for the jQuery library is, well, absurd. Also, I am not a fan of dependencies, particularly when most developers rely on hosted libraries.

I did some screen captures of Getty image embeds and identified the image credit bar is 69 pixels tall. That number may (will) change in the future. You may want to populate that variable from your chosen CMS so you don't have to do a full testing and deployment pass just to update one variable in your JavaScript functions file or page template (across all your sites) when Getty inevitably changes it.

The Getty iframe has no unique ID or class to make it easy to identify on the page, nor any other unique attributes, with the exception of the src attribute. So I loop through all iframes on the page and only grab those with the Getty URL.

I then get the iframe's width and height attributes, subtracting 69 from the latter, and calculate the ratio. From there I scale the iframe to 100% width and then get its new pixel width to feed to the ratio to calculate what its new height should be, finally adding 69 to it.

In my example page, I call the function at the bottom of the page and also in an onload in the body. There are better ways to do this, but given all the variations that are already out there (and that you may already employ), I leave it to you to figure out the best approach to handle for users who resize windows or rotate their phone/tablet.

What is compelling to me about this solution is that my clients (site authors) don't need to worry about adding or modifying any HTML on the page (most don't know HTML anyway), let alone CSS or script. When they paste the embed code, it should just work.

The Code


function responsiveGetty() {

  try {
    // Get all the iframes on the page.
    var iframes = document.getElementsByTagName('iframe');

    // Height in pixels of the Getty credits/share bar at the time of this writing.
    var crHeight = 69;

    for(var i = 0; i < iframes.length; ++i) {

      // Check to see if it's a Getty embed using the only attribute that's unique, the src.
      if(iframes[i].src.indexOf("//embed.gettyimages.com") != -1) {

        eachIframe = iframes[i];

        // Get the current ratio after excluding the credit bar.
        picHeight = eachIframe.height - crHeight;
        picRatio =  picHeight / eachIframe.width;

        // Set the iframe to fill the container width.
        eachIframe.style.width = "100%";

        // Set the iframe height to correspond to the ratio, adding back the credit bar height.
        eachIframe.style.height = ((picRatio * eachIframe.offsetWidth) + crHeight) + "px";
      }
    }
  } catch(e) {}
}

responsiveGetty();

Feedback

There are probably ways to optimize my code or factors I did not consider. If you see something wrong or that could be improved, leave a comment.

Friday, March 14, 2014

I Don't Care What Google Did, Just Keep Underlining Links

Screen shots of Google results page with two kins of color-blindness simulated.
Screen shots of Google search results showing protanopia (middle) and deuteranopia (right) forms of color-blindness. Click/tap/select the image for a full-size view.

I figured I'd lead with my argument right in the title. Even if you read no further, you know where I stand. I'm just going to fill up the rest of this space explaining why anyway.

Background

The Verge posted an article (Google removes underlined links, says goodbye to 1996) telling us Google is removing underlines on hyperlinks in search results, and also suggesting that underlines are oh-so-18-years-ago.

It's that sentiment (echoed in the article with the '90s-style underlined links are being removed from Google search results) that makes me worry The Verge is being snide about a usability feature it doesn't understand. The original heads-up from a Googler wasn't quite so focused on the underlines.

Why Google's Almost Plan Works

Google's search results are almost completely hyperlinks. Google retains a classic indicator of the hyperlink and keeps them all blue (a color contrast ratio of 11.2:1 to the white background and 1.5:1 with the body text) so that users don't have to learn a color scheme unique to Google. In this context, when users know the page is full of links and the colors are consistent, coupled with Google's position as a top site on the web, users aren't likely to get confused about what to click/tap/follow.

Similarly, The Verge has no underlines on its hyperlinks, whether in the navigation or in the content, until the link gets focus or the mouse hovers. This likely isn't an issue for most users as the in-content links are orangey-red within otherwise black text (a 3.7:1 color contrast ratio to the body text and 3.5:1 contrast ratio to the background). The non-inline links are pretty much all navigation anyway, and removing underlines from navigation links is a de facto standard. In this case, the links can be anywhere in the page content — they don't benefit from consistent positioning on the page as Google's links do.

How It Won't Work for You

My concern is that the average web developer may see Google dropping underlines as an excuse to do it on their own projects, without the context. For example, an article or blog post may be littered with links throughout the content. This doesn't correspond to the same type of content or organization that you see on the Google search results page. That same article or blog post may also not have a color scheme that makes it appropriate to remove the underlines.

Google misses the mark in that the blue hyperlinks don't have sufficient contrast with the rest of the text on the page. The layout Google uses, and has used for years, mitigates this as users will quickly (re)discover how links are organized on the page regardless of color or underline.

I mention The Verge's color contrast ratio above because its orangey-red links will fail Web Content Accessibility Guidelines 2.0 (WCAG) level AA compliance. I am not trying to pick on The Verge here — I can find many sites that will fail that check, including some of my own. But it is worth understanding that removing underlines, to meet even basic accessibility compliance, will require you to step up your game on understanding color contrast.

Screen shots showing links on The Verge with different forms of color-blindness.
Screen shots of hyperlinks on The Verge showing deuteranopia (top) and protanopia (bottom) forms of color-blindness. Click/tap/select the image for a full-size view.

What You'll Need to Do

To make it easy, I'll link to the WCAG notes with a quick description of what you have to do.

Guideline 1.4.1 states that you cannot rely on color alone to convey information (such as when text is a hyperlink).

If you do rely on color, contrast is imperative. Use only colors that would provide 3:1 contrast with black words and 4.5:1 contrast with a white background. I've included links to contrast checkers below.

You can read more about how to meet WCAG item 1.4.1, including sample scenarios and yet more links, in the Understanding SC 1.4.1 document.

My Recommendation

Unless you plan to run the necessary color contrast tests, just keep the underlines on your hyperlinks.

Related

Update: 4:50pm

I think this point is worth considering:

Update: March 17, 2014

On the WebAIM mailing list Elizabeth J. Pyatt points out that the Google's link underlines don't work for keyboard users. The underlines appear when you hover over a link, but if you tab through the links no underlines appear. I'm a twit for missing this, but Google is committing a grave accessibility mistake by not including a :focus selector in its CSS.

Again, please don't follow Google's lead.

Wednesday, March 12, 2014

Web Turns 25, Seems Popular

Logo for The Web at 25

The world wide web has officially lasted 25 consecutive years, which means it's catching up to its parent, the Internet, which itself is bearing down on 45. That's an important distinction. The Internet is not the web, it is the foundation on which the web was born.

In honor of the web's quarter century bringing us all manner of useful and useless information via the lowly hyperlink, the World Wide Web Consortium (the standards body behind HTML and CSS, among other standards) and the World Wide Web Foundation have teamed up to create the site webat25.org.

The site includes a link to Tim Berners-Lee's 1989 proposal for the web, news on upcoming events, and plenty of factoids. In addition, there is a Twitter account (@Web25) that has been collecting peoples' memories of the early days of the web with the hashtag #web25. There is even a Storify collecting many of the tweets (which I have embedded below).

Some other sites talking about the web's anniversary:

For good measure, I've included Tim Berners'Lee's video talking a bit about where the web will continue to go:

If you want to pretend that you are enjoying the early days of the web again, head on over to the evolt.org browser archive, which I started building in 1994 (two years after my first foray onto the web), to download the earliest releases of Netscape Navigator or browsers you've never heard of. You can also wander over to the W3C Web History Community Group, where some folks have started to gather early documents.

You can also head over to CERN's World Wide Web project site, dating back to 1993 and the first time HTML documentation was made generally available.

Some other historical bits I have covered on my blog:

And now that embedded Storify I threatened earlier:

Bonus

Somebody posed the following question to Tim Berners-Lee in the AMA:

What was one of the things you never thought the internet would be used for, but has actually become one of the main reasons people use the internet?

Tim Berners-Lee's answer:

Kittens.

It's taken 25 years, but the reign of cats on the web is complete.

Saturday, March 8, 2014

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

Screen shot of the embed dialog.
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.

The Duomo in Firenze, Italy as seen from the Campanile.
Example of my own photo that scales, is high-DPI, and contains basic accessibility features.

Related

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.