Speaking at WordCamp Buffalo 2013

This Saturday I will be speaking at Buffalo's second WordCamp. Last year was a great day-long event filled with many good speakers (not just me!), so I am looking forward to being an attendee as well.

If you are new to WordCamp Buffalo, a quick overview:

WordCamp Buffalo is a one day conference held in Buffalo, NY focusing on WordPress. Our goal is to increase knowledge about WordPress for people who already are working with it, and show some benefits of using it for anyone who may be interested, but aren’t currently working with WordPress.

As a regular WordPress user with over 15 years experience in content management as a concept and more than a decade experience having built our own multi-lingual enterprise web content management system (QuantumCMS) at Algonquin Studios, my talk should give you skills you can take to any platform. An abstract of my talk, Making Your Site Printable, is on the WordCamp Buffalo site. I'll post slides here after the talk.

For the talk I'll be drawing on my 20 years of web development experience, extensive work with responsive design, articles I've written for .net Magazine and Web Standards Sherpa, previous talks, my PrintShame site, and Google Analytics. It's guaranteed to be awesome (guarantees not guaranteed).

Last year I spoke at WordCamp Buffalo on the topic Content Strategy. The slides and video of my talk are online for you to watch, in case you want to make sure I speak well enough to warrant buying a ticket to see me this year.

You can learn more about the other sessions and speakers at the WordCamp Buffalo site. Here's a handy map:

View Larger Map

Infographically Disinclined

I don't care for infographics. Their original purpose of visually conveying otherwise complex information has been superseded by their current use as marketing drek with "quirky" illustrations, blocks of prose, and the occasional useful factoid.

The love affair with inforgraphics is confounding to me as a web developer. They are often deployed on the web as a giant image that typically has text too small too read, that cannot be selected, and doesn't include any kind of accessibility affordance. In short, the likelihood I can get one them to display properly in anything other than a desktop web browser is slim.

Doing It Wrong

This example in particular seems to epitomize the poor planning and execution of the typical infographic.

Example of a poorly-done infographic about accessibility in HTML email.

It is intended to convey the challenges of designing and building HTML-formatted emails for users with disabilities. Got that? It's an infographic about accessibility best practices.

How many ways is this doing it wrong, just from an accessibility perspective?

1. All of the text is set as an image. There is no selectable text.
2. At default zoom settings, the text is too small.
3. The text and background colors don't provide enough contrast.
4. The numbered examples require extensive scrolling to see the accompanying text.
5. The blog post of this infographic has useless alt text ("Accessibility-Email-Design-1000px").
6. The title of the blog post is easily as useless (again, "Accessibility-Email-Design-1000px").
7. The blog post itself has no other content. No words, no explanation, no plain-text equivalent.
8. The option to embed the infographic on your site perpetuates the same inaccessible content.

Feel free to suggest more.

I'd also like to qualify that if your infographic is primarily text, you're doing it wrong. All text save for two useless pie charts and a fake screen capture do not make up for the volume of copy stuffed into this image.

Another example of doing it wrong: NASA's Falling UARS Satellite Explained

Doing It Right

Example of an infographic getting it right, from XKCD.

This simple and direct infographic isn't even meant to be an infographic, but it conveys quite a lot of information in very little space with very few words. In fact, this information is conveyed better visually, with no words, than as long blocks of prose.

At a quick glance you can see the height that the ice achieved relative to familiar landmarks and relative to each of three other cities. No long-winded explanations, no pointless pie charts, just familiar context and simple references to learn more. This is data visualization, simply put.

Another example of doing it right: Wind Map

Giving It a Go

I figured that, on a lark, I'd make my own infographic using HTML and CSS and code it so that it's accessible. Then I realized that I don't have a topic I think is best represented by a graphic. Nor am I a data visualization expert. So I cheated and made a Venn diagram (often labeled as an infographic, even though it's a diagram) about infographics:

Cannot copy text.

Large download.

Forgot its roots.

Cannot copy text + Large download = Flash

Large download + Forgot its roots = Animated GIF

Cannot copy text + Forgot its roots = Text as image

Cannot copy text + Large download + Forgot its roots = Infographic

I also made a version on CodePen if you want to hack it for your own use.

Related

• We've Reached Peak Infographic, and We're No Smarter for It
• 70 best infographics on the web (The number keeps changing as they add more and retweet it, also, I disagree with the assertion in the title.)
• Why your Brain Craves Infographics (I'll give them credit for building it in HTML, even if it's still a text-laden scroll-a-thon.)
• WTF Visualizations: Visualizations that make no sense (added September 12, 2013).
• Creating an Accessible Infographic (added September 23, 2013).
• Accessible Infographics (added February 6, 2014).

Update: November 11, 2013

SMBC put together a great infographic this weekend, The Top 6 Reasons This Infographic Is Just Wrong Enough to Sound Convincing. It struck a cord with some at Slate, because it got re-purposed over there with a lot of handy links to other infographical horrors: Why Infographics Are Terrible, in One Terrible Infographic.

Update: January 6, 2014

Derek Featherstone has found an infographic that is made up of text. Yep. Text. Check out "The Health Hazards of Sitting" at the Washington Post and maybe take a cue from it.

My Carousel Use Stats

I started this post way back in March after reading Brad Frosts' bit on carousels. Then I let it sit unfinished. With the buzz around ShouldIUseACarousel.com this week, I figured I'd finish it up. The data is old, although I offer updated numbers at the bottom.

The Process

I looked at all the visits to my home page between February 1 and March 3 to get 30 days of data. Of those visits to the home page, 83% of the time the home page was the landing page. I figured if a smaller percentage of initial visits to our site came via the home page then I would not read too much into the value of these numbers as the user might have already been through enough of the site to get what he or she wanted, but 83% is a pretty big number.

The home page has many content areas, but by far the most prominent is our carousel. During the time frame tested, there were 5 different carousel images with accompanying text. Each one has its own Google Analytics event tracker so I can tell which carousel item has been clicked.

For those playing at home, and using Google Analytics, it's as simple as adding an onclick to your anchor: a href="/Products" onclick="_gaq.push(['_trackEvent', 'Slider', 'Columns']);". In this case I am tracking a custom event named "Slider" with the value of "Columns" (so I know which specific image/slide was chosen).

The Results

In the 30 days I tested, the carousel links were clicked less than 1% of the time the home page was visited — 0.8% to be slightly more precise.

Every other element on the home page received at least twice as much activity, with the tabs getting used nearly 10% of the time. Site-wide, the skip navigation link got clicked (tapped, followed) half again as much as the carousel at 1.2%.

To qualify this a bit, the carousel wasn't intended to serve as our only call to action on the home page. It's more about presenting a message to help brand the company as part of our new marketing push. Adding this tracking feature has allowed us to track how the carousel gets used, if at all, and which images/messages are more compelling.

The Latest Results

For this updated version of my draft post I looked at the last 30 days again (June 11 to July 11, 2013) to see what activity we've had on the carousel. The last 30 days are a good fit since we haven't been showing off the features of the slider to clients (which results in activity that is a function of people playing, not truly discovering and naturally using).

For the last 30 days, the number of clicks on the carousel is much lower. 0.2% of unique visitors clicked a carousel slide. For every 500 unique visits to the site, someone clicks on the carousel. Interestingly, this is the same number of people who print pages from our site and lower than the "skip navigation" activity in the same time period.

About the Carousel

Our site is a great place for us to experiment with the carousel since we can quickly refactor it, tweak it, replace it, and so on. Since its launch 7 months ago I have made a number of tweaks to the technology and we have played around with the messages to see what sticks.

We're revisiting the design of the carousel now to see how its relative size and different images and messages can affect its use. At some point it may go away, but not until I've had a chance to gather lots of data.

The carousel itself is both swipe-friendly and keyboard-friendly, uses a linear flow with a clear start and end, has indicators to show where a user is in the overall collection (also allowing a user to jump to a specific slide), and pauses when there is any action taken on the carousel (hover, click, tap, etc.). I built it to also serve images at appropriate sizes for appropriate devices, something which I am regularly tweaking. The base for this is the Royal Slider.

Related

• ShouldIUseACarousel.com
• Accessibility expert warns: stop using carousels, July 11, 2013.
• Carousels, January 23, 2013.
• Carousel Interaction Stats, January 22, 2013.
• Auto-Forwarding Carousels and Accordions Annoy Users and Reduce Visibility, January 19, 2013.
• Don’t Use Automatic Image Sliders or Carousels, Ignore the Fad, September 27, 2012.
• That big sliding banner? Yeah, it’s rubbish, September 6, 2012.
• 5 Big Usability Mistakes Designers Make on Carousels, August 2, 2011.

Backing Up Your Social Media

Social media outlets are practically a dime a dozen. Excluding ones that are pretty stable right now (Twitter, Facebook, etc.), most of them will either fail or get bought. The problem is that your data, your content, typically dies when they do.

As an individual you might not care too much if one of the niche services fails. As a business who relies on social media, however, you should care.

Every post to Twitter or Facebook or Blogger or (insert whatever services you use here) represents effort spent to promote your brand. That effort is probably from paid staff (because nobody lets interns have the keys to their global brand, right?) and represents some cost as a result. Cultivated Facebook campaigns, Twitter conversations, Pinterest boards, all represent a combination of your effort and community participation.

When a service goes away, so does the money and effort you spent to cultivate it. So does the community feedback that demonstrates to others that yours is a good brand. So does any SEO benefit it may be giving you. So does the content you created.

I regularly ask social media practitioners how they back up all the data they post to these services and it almost always results in blank stares.

Most organizations make some effort to back up their marketing or sales materials, in addition to their intellectual property, but for some reason social media is left out in the cold.

I'll cover some examples of what I have done and do, along with some tips on how you can plan for your own back-up.

Twitter

Twitter allows you to produce an archive of all your tweets whenever you request it. What you will get is a link to download a ZIP archive which contains a completely stand-alone web site that allows you to see all your tweets. You can use this site right from your computer with no internet connection.

I suggest taking it one step further and creating a folder on your public web site so you and all your team (and even the general public if you want to share the address) can access all of your tweets at any time from any where. This method will also allow you to search all your tweets instead of being limited by Twitter's own date restrictions on searches. For example, I have my Twitter archive at AdrianRoselli.com/Tweets.

Tweets in the archive contain the full content of the original tweet, but do not contain any of the replies to, favorites of, or re-tweets of your tweets. They do, however, link you directly to the tweet at Twitter.com so you can get all that information.

As part of your job as a social media manager I recommend you set up a calendar reminder for the first of each month (or whenever works for you) to download and store your Twitter archive.

Facebook

Facebook also allows you to create an archive of everything you have posted, including photos, videos, wall posts, messages and chat conversations along with the names of your Facebook friends. It does not include comments you've left on the posts of others. An expanded archive option also provides historic information such as your IP addresses for when you have logged into Facebook.

As such, I recommend against posting your entire Facebook archive to your web site as it will probably contain information that you have opted to not share with the general public (especially since it can also contain other people's private information).

I should note that I am talking about a personal profile here, not a business profile. So far I have been unable to find information on how to archive a business/organization profile. Suggestions are welcome.

[Your Blog Here]

Quite a lot of social media involves maintaining a blog. This blog may exist on any one of many platforms, including one you've built yourself. For this example, I am talking about a blog that you host elsewhere, probably for free, such as an option from Wordpress or Blogger, among others.

In an ideal scenario you will have secured a blog sub-domain, such as blog.adrianroselli.com. This is the first step to having some portability and control should your blogging platform go away. It won't be so easy to get adrianroselli.blogger.com if Blogger goes away, mostly because I don't own (and likely would be unable to purchase) the domain blogger.com.

If your blog platform does go away and you have some advance notice, you have some options to get your content before it is lost. Some platforms will offer you a way to get all your content out and other platforms may offer you a way to import that content. If your failing platform doesn't offer an archive, you can always spider the content using a tool like HTTrack.

Ideally you'll want to recreate your content on your new blogging platform, so make sure you also recreate the same page addresses (most of the blogging tools allow you to create a custom page address, though it will be a manual process). In this scenario, any inbound links won't be broken. For those cases where you cannot replicate the page addresses, explore options to create custom redirections with your new blog provider or, if it's on your own server, through server-level mappings.

Pinterest, Tumblr, Instagram, and Other Services

I have used many services over the years, in particular services targeted at image sharing. I have used Brightkite, Plyce, Picplz, Posterous and am now on to Tumblr. With the exception of Tumblr (so far), they have all gone away. I haven't lost my images, however. In the case of Brightkite they made everything available for download for quite some time and in a structured format. Picplz offered the same, but not until many users raised a stink and followed its founder to his next gig to push their point. Posterous made its site available as a static HTML archive.

Had these sites not made the content available, however, I still had a plan to get everything out. I simply spidered my profile page for each site using a tool (HTTrack again) that converts it all to static HTML. In short, I captured every page and every image to a format that I could simply post on my own site or view on my local computer (as I did with Picplz and Posterous). While I cannot replicate the old addresses (similar to the case with a blog domain), I can at least make my content available should I want to reference it again.

When Pinterest or Instagram or Tumblr or insert-service-here announces it is going away, I will simply fire up the same tool and begin my archive process. Each service may very well offer a tool to do this, but I'd rather make sure I have it just in case they don't. In addition, sometimes it's more work to process a stack of JSON files than it is to simply spider the site and post it somewhere on your own site.

Related Bits

• Startups should bend over backwards to let users take their data after they shut down [Updated], June 3, 2012 at The Next Web.
• Proposed Standards for the Care and Feeding of User Generated Content, June 25, 2012 at Zeldman.com
• You Get What You Pay For, December 17, 2010 by me.

Too lazy to read Terms of Service. Just going to upload videos to Vine & Instagram at the same time and let them fight about who owns them.

— Adrian Roselli (@aardrian) June 20, 2013

Screen Shots of Win8/IE10 Media Query Values

There is a nifty tool at MQtest.io which gives you a breakdown of how your device reports features you might use for media queries. To use the tool's own explanation:

This test isn’t about what media que­ries your device can or cannot see (but it does show an 'unsupported' label if a device doesn‘t support something). In­stead it shows you which dimen­sions your de­vice will res­pond to when using ‘width=device-width,initial-scale=1.’

As one of the seemingly few owners of a Windows 8 tablet (specifically the Asus Vivo), I sometimes get asked to check sites to make sure that a developer's media queries work properly. It was testing my own site that led me to discover the prefixed styles that IE10 needs in Metro view (which lead to my surprisingly popular post, IE10, Metro, and Media Queries).

Armed with the features that MQtest.io can help identify along with a Win8 tablet, I figured perhaps others without a Win8 tablet could benefit from some screen shots showing the MQTest.io results in various configurations of Internet Explorer 10. Please bear in mind that the numbers are for my device, and probably will not match those you would get from a Microsoft Surface or another Win8 device. At the very least, however, these will show you what tests will run in Win8/IE10 and the types of values you can expect to see.

Screen shot of Internet Explorer 10 on Windows 8 in desktop mode, with the tablet turned horizontally (wider than it is tall).

Screen shot of Internet Explorer 10 on Windows 8 in desktop mode, with the tablet turned vertically (taller than it is wide).

Screen shot of Internet Explorer 10 on Windows 8 in Metro mode, with the tablet turned horizontally (wider than it is tall).

Screen shot of Internet Explorer 10 on Windows 8 in Metro mode, with the tablet turned vertically (taller than it is wide).

Screen shot of Internet Explorer 10 on Windows 8 in Snap Mode, with the browser in the narrow view.

Screen shot of Internet Explorer 10 on Windows 8 in Snap Mode, with the browser in the wide view.

Google Needs to Provide Android App Interstitial Alternative

Yesterday Matt Cutts from Google tweeted that Google search results for users on smartphones may be adjusted based on the kinds of errors a web site produces (of course I was excited):

Important: if your website has smartphone errors, we may change rankings for smartphone users: goo.gl/x8R4A #smx

— Matt Cutts (@mattcutts) June 11, 2013

Matt links to a page that outlines two examples of errors that might trigger this downgrade of a site's position in the Google search results and, right in the first paragraph, links to Google's own common mistakes page:

As part of our efforts to improve the mobile web, we published our recommendations and the most common configuration mistakes.

I think it's fair to assume that anything listed on the "Common mistakes in smartphone sites" page can negatively impact your site ranking. In particular this section on app download interstitials caught my eye:

Many webmasters promote their site's apps to their web visitors. There are many implementations to do this, some of which may cause indexing issues of smartphone-optimized content and others that may be too disruptive to the visitor's usage of the site.

Based on these various considerations, we recommend using a simple banner to promote your app inline with the page's content. This banner can be implemented using:

• The native browser and operating system support such as Smart App Banners for Safari on iOS6.
• An HTML image, similar to a typical small advert, that links to the correct app store for download.

I think it's good that Google links to the Apple article. I think it's unfortunate that Google does not link to Microsoft's own solution. If you read my blog regularly, or just follow me on Twitter, you may know that I covered both Apple's and Microsoft's app banner solution in January in the post "App Store Meta Tags."

You might also note that I stated that Google Play offers no such feature. Google, the force behind Android and the one now (or soon) penalizing sites in its search engine for app interstitials, provides no corresponding alternate solution of its own.

A great thing that Google could do for its Android users, for its search engine results, and for app developers, is to support a custom meta tag that allows web sites to promote their own Android apps in the Play store. Developers can start to replace awful Android app interstitials on web sites, users can get a cleaner experience, and site owners who can't conceive of other ways to promote their apps on their home pages can move toward something that is easier to maintain and doesn't penalize them.

I think it's nice that Google is paying attention to web devs by adjusting search results, but my ranty tweets are probably falling on deaf ears. The web would be indebted to someone who can get Google's and Android's ear on this.

My Kingdom for Decimal Alignment on Numbers

This post isn't proposing any solutions (although I do toss out a hack). This post is a rant that I hope helps influence browser makers.

Background

Much of my web work isn't for public facing web sites. Often it's for enterprise-level software that is deployed via the web and used in a web browser. I think any web developer who does anything beyond standard brochure-ware is ultimately in the same boat. Usually we need stylistic control over elements on the page that aren't typically considered exciting.

Once again I find myself working on a reporting feature for a large piece of software. Reports are typically grids (a table) made up of columns & rows with numbers, letters, icons, colors and so on. Clients are used to seeing these reports the same way they might see them in Excel, Crystal Reports, and similar tools.

These reports are formatted for quick visual scans to identify outliers and exceptions, so control over formatting is key to their effectiveness.

Example

Often these grids contain numbers of various lengths that include decimals. Often these decimal values aren't the same number of (significant) digits. Let me offer an example of wildly divergent numbers (I cannot show real client data):

Name	Number	Units
George	1,984.0	years
Arthur	42.000	?
Ray	451.0	degrees
Marie	13.51	g·cm−3
Isaac	6.67384	(× 10-11) m3 kg-1 s-2
Sergei	289.8001	billions of dollars

It's standard practice to align numbers to the right. The problem is that some numbers have decimals lengths that don't match other numbers, thereby throwing off the formatting and making the entire column harder to read than necessary. Note that the biggest number is the same length as the smallest number.

CSS to the Rescue

CSS3 has a solution. The property text-align has an option to solve our problem. It can accept a one character string as the character on which to align the text.

Not just a decimal, but a string. This is great news for languages that use a comma instead of a period for decimals. It's great news for very large or very small values where perhaps you want to align on the multiplication sign instead.

This style will allow me to align on the decimals in my example table: text-align: "." right; (the keyword after the string still keeps my numbers aligned to the right, after the decimal is factored in)

Browser Support

Now the question comes down to browser support. What browsers support it? None.

A Hack

To achieve the effect I want, I would have to split my numbers into two columns, one for the whole number and one for the decimal value. Like in this hack:

Name	Number		Units
George	1,984	.0	years
Arthur	42	.000	?
Ray	451	.0	degrees
Marie	13	.51	g·cm−3
Isaac	6	.67384	(× 10-11) m3 kg-1 s-2
Sergei	289	.8001	billions of dollars

This table isn't ideal. I have to clear out padding values, remove borders, and accept that my numbers are split. It is unnecessary work that could be avoided if the browser makers would just fully support an aspect of CSS3 that has been around for years and whose related styles already have seen support for even more years across prior CSS versions.

The extra styles, whether inline or with per-cell classes, also add to the overall page weight. HTML tables aren't exactly examples of slim mark-up to begin with, but this can bloat them even more.

This table is also an accessibility gotcha. Users with screen readers are used to a particular way tabular data is read, so this variation may not come across so clearly. Users who scale text may see odd baseline text alignment as text wrapping in other columns can throw off everything else.

It is likely that others who have needed to represent data with alignment on specific characters have just used images instead. That solution is far worse than even this hack, particularly from an accessibility perspective.

My Request to You

If you work for a browser maker, please bring this to someone's attention.

If you don't work for a browser maker, please share this (or your own examples) so that perhaps the browser makers will see there is a need, even if it's not as sexy as animations, transitions, WebGL, and so on.

Related

Even in the modern international web, the specification is sometimes too Anglo-centric, as in the case of the input type="number", which isn't as universal as hoped. You can read about the request to allow developers to set a pattern attribute on input type="number" to specify the thousand separator, decimal separator, decimal precision and if any special characters should be allowed.

There are also people calling for Mozilla to drop support for MathML, suggesting that people who don't use numbers in financial and scientific applications on a daily basis may not see the value in stronger support for number formatting.