Web developer, writer, speaker. Co-founder of his company Algonquin Studios as well as evolt.org. Has co-written “Usability: The Site Speaks for Itself,” “Web Graphics for Non-Designers,” and “Web Professional's Handbook.”
While this may be old news to some of you (just over a week now), I only discovered this weekend that the Internet Archive Wayback Machine can archive a page for you, with its own URL, on demand.
Thanks to a tweet from Jennifer Sutton, I came across the post Instant WayBack URL where Karen Coyle outlines the announcement from the Internet Archive. She outlines two key benefits:
putting permalinks in your documents rather that URLs that can break
linking to a particular version of a document when citing
These alone are great reasons. For those who must provide citations using an academic standard, such as the Chicago Manual of Style citation format (the standard at Web Standards Sherpa), you should include the date a page was last changed or accessed.
With the Wayback URL, you can link to a version of the page as you saw it on the specific date. You may need to update the citation format to include the source URL and capture date, but now you can at least make the version you saw available.
Screen shot of the on-demand Wayback URL field.
Many documents go through multiple versions, whether it's a blog post or technical document. Some organizations, such as the W3C, have a method for posting versions of each specification at unique URLs for easy reference. In the absence of that process, creating a snapshot of the page makes it a lot easier to cite what you saw on the day you saw it, as opposed to guessing some time in the future what a page might have said.
As someone who has written for other web sites, I would love to have had this feature in the past. I would have captured all of my evolt.org articles before we flipped over to the new old design (that was more than a decade ago now?). When .net Magazine moved its content into the Creative Bloq site, I would have used it then archive what I had written, including the comments (which are now lost).
As I snipe at sites from PrintShame, it may have been more fair of me to link to versions of the sites on the day I captured them, since some of them (ok, only two that I know of) made an effort to update their sites after appearing there. Just as a I have referenced good and bad examples in my talks, it is more useful to attendees to see the versions of the pages I referenced, making the resources from my talk useful for more than a few days.
As I make changes to my site, I can treat this as a poor-man's archive. Before I roll out a major (or even minor) updated, I can capture a page so I can compare how it looked or what content it contained. While it's no substitute for a proper back-up, it can prove handy. Of course, if you use the Wayback URL in this way then you should probably consider donating to the Internet Archive.
If you find yourself in a contentious debate on someone's blog (or a news site, etc), the on-demand ability to archive might be a handy way to track if someone is editing the original content as the fight evolves, making it far easier to call BS that much sooner. It's also a bit harder to dismiss this kind of capture as having been 'Shopped.
Trying It
To demonstrate how absurdly simple it is to make a page in the Wayback archive, I posted this blog entry as a stub with the only following content:
This is a stub for the post that's coming. I am trying to show off the on-demand hotness.
A comment over at my Google+ share points out that this has value for Wikipedia, where web references are a necessary part of the documentation process, and where those links sometimes die over time.
Yesterday I had the pleasure of visiting the University at Buffalo (my alma mater) to give a presentation for its CIT professional development series. I got to talk about responsive design.
Knowing in advance that the room would have technical and non-technical users I went for a code-free presentation. One thing I learned is that code would have been useful, so if you're looking for any in here you won't find it.
I understand there is video from the event, and as soon as I have it I'll share it here as well. In the meantime, enjoy the slides without any context. Which may be more entertaining than my typically awful attempts at humor.
Today I spoke at Buffalo's second WordCamp. I am a casual WordPress user, not a developer, though my decade-and-a-half experience with multiple blogs and content management systems (even writing our own CMS at Algonquin Studios) gives me plenty of insight into the common challenges users and developers face across all platforms.
I have also learned that few developers work on just one platform. Nearly all of us touch more than one platform in our careers (or workday), and my experience from last year is that everyone attending falls into that boat. When I made these slides I wanted to make sure I was presenting ideas and concepts that developers could take to any platform.
There will be video of my talk (featuring my awful sense of humor) in probably a month or so (based on last year's timeline). When it's available I will post it here.
That being said, you don't need to be a WordPress developer to get something from these slides. Enjoy!
Looks like the WooThemes slider/carousel will be getting Google Analytics event tracking built in for a future release — now you don't need to be a coder to figure out if anyone is clicking your carousel:
Yay, @tomharrigan and I will chat about getting GA event tracking features into WooSlider! #wcbuf (now he's stuck)
Yesterday Opera announced the release of its newest browser, Coast, built specifically for iOS tablets (I would say just iPads, but if my fridge gets an iOS tablet UI then I'd be wrong and will have paid too much for a fridge).
Background
Recently Opera moved away from Presto as its rendering engine and hitched its future to Blink, the rendering engine born from WebKit that powers Chrome. Now instead of Opera worrying about the rendering engine, it is focusing on the user interface, the place where it can set itself apart from the other browsers.
Essentially Opera is removing the browser chrome (implying to the user that a web page is just an app) and adding gesture support. Given that Opera was the browser that introduced us to mouse gestures well over a decade ago, and given that a touch screen is an inherently gesture-based UI, this seems like a natural fit.
Bits for Developers
Sadly, my office wifi was down and I couldn't play with the browser immediately (my crusty iPad 2 is wifi only). So instead I took some time to read through the developer notes.
Tablet First
Overall Opera recommends general responsive design current best practices, though it promotes a tablet-first approach. Opera offers some CSS you can use to specifically target iPads Mini, 2, 3 and 4 (Retina and non-Retina), though it leans on vendor prefixes with only a brief note to also use other prefixes and unprefixed rules.
Responsive Images
It's also clear that Coast supports the new srcset option for responsive images. It even offers a code example: <img src="image.jpg" srcset="retina.jpg 2x">
Note: As Bruce was kind enough to inform me (because I missed it in the dev notes), responsive images will be supported only in iOS7 and up.
Update as of September 20, 2013
According to Opera, iOS7 did not come with a WebKit update. That means Coast cannot support responsive images via the srcset attribute without a polyfill. Nor can Safari, of course.
TileSpeed Dial Web App Image
Instead of "Speed Dial" icons/images, Coast now looks for a "web app image." If you don't have one, Coast will first look for a Windows 8 tile image, then an Apple touch icon, then a shortcut image, then just a favicon. You can, however, create your own 228 × 288 pixel image and stuff it into your site with the following HTML:
<link rel="icon" href="$URL" sizes="228x228">
User Agent String
Don't use this to do any browser sniffing. Browser sniffing bad. This is instead handy for recognizing it in your logs:
Mozilla/5.0 (iPad; CPU OS 6_1_3 like Mac OS X) AppleWebKit/536.26 (KHTML, like Gecko) Coast/1.0.2.62956 Mobile/10B329 Safari/7534.48.3.
General Review
Getting going is pretty easy, just start typing into the only field on the screen. As you type you can see a Google preview on the left, which you can tap at any time to go to Google, or a list of icons on the right which correspond to sites you might mean. The icons start out just displaying the first letter of the site, and then identify the site's tile or shortcut image.
Note the handy ".com" and ".net" options that appear above the right end of the text box.
Once you are on a page, you can go back by swiping from the left, forward by swiping from the right, or reload the page by pulling down from the top — but not too far or you get the iOS menu instead.
Vine of me playing with back, forward and reload in Opera Coast.
Opera Coast skips tabs and windows altogether and, frankly, feels a lot more like Internet Explorer for Metro than other current tablet browsers. It's pretty easy to see the open "tabs," flip through them, get more details, and discard them. It's also incredibly easy to forget you have so many tabs open. I regularly found myself littered with tabs because of all the links opening new windows.
Testing Opera Coast window/tab management.
While in that tab view, you can also see how "safe" the page is and can get to options to share it, email it, print it, and so on.
The arrow on the right gives you all the share options.I don't have a printer installed, so I'd love to hear feedback on how Coast honors print styles.
Adding and removing a bookmark, tile, whatever, is pretty easy. It took a few swipe-fails, but I got the hang of it well enough to show the whole process in one uninterrupted Vine:
It takes a little getting used to, but it's not too hard
Gotchas
There were a few things that threw me off. Perhaps because I am a power user, perhaps because I only played with it for one evening.
Swipe History
The swipe for back/forth is handy, but conflicts with behavior I have already learned. In Chrome for Android, swiping left or right has the infuriating feature of bringing me to the next or previous tab in the stack order. For those rare sites that implement a slide that is swipe-friendly, imprecise swipes will move me back and forth in the history instead.
Web App Images
Using the browser in portrait view, the additional screens of tiles (speed dial icons if you are already familiar with Opera) aren't immediately apparent. It wasn't until I turned to landscape that I saw them. The tiny dots under the Coast icon weren't enough for me to intuit that. They also aren't nearly large enough to tap to jump to a specific screenful of tiles.
Hit Sizes
The 9-box grid at the center bottom as well as the three rectangles at the bottom right are the only real browser chrome in play as you surf. They are also maddeningly small to tap. And I have dainty, lady-like fingers, so I suspect it may cause consternation for others.
Address Bar
If I am on a site and I want to change the address of the current page (maybe I fat-fingered and got to a 404, or I know a super-secret URL), I could not find a way to bring up the address bar and change it. It also made it impossible to know the current page address at any time. As someone who regularly looks at the URL for familiar addresses, indications of scam sites, quick commitment to memory, and so on, this alone takes it out of the running as an everyday browser for me.
Email a Page
I did not care for the email feature one bit. Not only does it embed a screen shot of the page (with a Coast watermark), the screen shot won't display on other devices. Outlook blocked the image because the attachment ended in .com (not .png or .jpg). Had it not come from me, I wonder if Outlook would have blocked it as spam. My Android email client couldn't display it because there was no file extension to give it a clue.
What you see when you choose to email a web page from Opera Coast.Best case scenario of what the email recipient sees, though the attachment was blocked in Outlook and unusable in my Android email client.
Tweet a Page
Tweeting a page left me similarly dissatisfied. By default it includes a Twitpic screen shot of the current page with an Opera Coast watermark. When composing the tweet, I tapped the paperclip icon to see if it would do anything, but nothing happened. I opted not to tweet again.
Overall, I like the browser. I like what it's trying to do for consumers. As a power user, however, It's not a fit for me though I'd be interested in bringing it in front of some other members of my family.
I also didn't get to try out unsafe sites, printing pages, responsive images (need iOS7), or poorly-built sites. My opinion might change as I continue to play with the browser.
Open Question
There are a lot of Android tablets out there, not just the four screen size offerings from Apple. So how long before we can see Coast on my Nexus 7, if ever?
Updates
I'm adding notes throughout the day as they come up.
Surprising no one, the following reviews from more mainstream sources completely fail to include any screen shots or videos that weren't pilfered from Opera. I only say that to remind you that by reading this post you have gotten the most in-depth review currently on the web and you should be excited and send me a thank you note and maybe read all my other posts and high-five me on the street.
These articles are, however, worth visiting just to see the comments and how others are reacting to it.
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:
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.
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?
All of the text is set as an image. There is no selectable text.
At default zoom settings, the text is too small.
The text and background colors don't provide enough contrast.
The numbered examples require extensive scrolling to see the accompanying text.
The blog post of this infographic has useless alt text ("Accessibility-Email-Design-1000px").
The title of the blog post is easily as useless (again, "Accessibility-Email-Design-1000px").
The blog post itself has no other content. No words, no explanation, no plain-text equivalent.
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.
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.
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.
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.
While this may be old news to some of you (just over a week now), I only discovered this weekend that the Internet Archive Wayback Machine can archive a page for you, with its own URL, on demand.
Yesterday 
