Booster Conference Slides: Making Your Site Printable

Giving my talk at Booster. Photo from Booster by Tatiana Kolesnikova.

I'll fill this up with notes and other content later, but in the meantime here are the slides from my talk this morning:

I've written a bunch of handy stuff on print styles, here are some links (or you can see all posts tagged print on my blog) along with other resources (most of this is referenced in my slides):

• PrintShame and the Zurb print styles update (June 27, 2014).
• More Evidence of the Need for Print Styles, April 6, 2012.
• The example page/site from my slides (which may go away once our next site design comes out).
• Replacing images when printing, May 14, 2013.
• Printing from Mobile Has Improved, June 30, 2014.
• Tracking When Users Print Pages, March 26, 2013.
• Tracking Printed Pages (or How to Validate Assumptions), December 11, 2013.
• Make your website printable with CSS, posted online March 5, 2013.
• Calling QR in Print CSS Only When Needed, March 8, 2013.
• Tracking When Users Print Pages, March 26, 2013.
• Tips And Tricks For Print Style Sheets, March 8, 2013.
• Printing The Web, March 25, 2013.
• CSS Paged Media Level 2
• CSS Paged Media Module Level 3
• Proposals for the future of CSS Paged Media
• Can you typeset a book with CSS?

The Twitters

Booster had a lot of activity on Twitter (not just about my talk, imagine that). I've collected some of the tweets below.

How about this: not 1 but 2 evolters speaking at @boosterconf today! Give a big Bergen welcome to @aardrian and @martinburnssv!

— evolt_org (@evolt_org) March 11, 2015

If your site doesn't support the printer it's not responsive. @aardrian #booster2015 #RWD

— Tin Kadoic (@tinkadoic) March 11, 2015

I can guarantee you that people print your site more often than they click your carousel! @aardrian #booster2015

— Regine Sagstad Berg (@reginesagstad) March 11, 2015

#booster2015 lightning talks ⚡️ from @aardrian, @ramyo, @hallvaren & @sivmhollup. pic.twitter.com/UYdIrIwLJe

— Elisabeth Irgens (@elisabethirg) March 11, 2015

@aardrian Responsive also means printable. Loving #booster2015 already!

— Siv Midtun Hollup (@sivmhollup) March 11, 2015

“…after more than a decade of support for print styles, (@RWD advocates) still forget…” http://t.co/maGjWh66BP ht @elisabethirg @aardrian

— David G. Smith (@iDGS) March 11, 2015

While Opera chose not to greet me upon my arrival in Norway, somebody must have sent former employee @lasmagnu to chat at dinner.

— Adrian Roselli (@aardrian) March 11, 2015

Open space at #booster2015 run #leancoffee stylee, with @ourfounder @jrothman @mattbarcomb @aardrian @andrev & others pic.twitter.com/dWGcGd7V77

— Martin Burns (@MartinBurnsSV) March 12, 2015

Feedback (Added 26 March 2015)

I got feedback from my talk, and it was overwhelmingly positive. Consider mine was the first lightning talk of the first session of the first day immediately after the keynote, I'm just pleased people took a moment to vote.

Voting consisted of asking attendees to drop a colored card into a basket representing my talk. There were three options. I got 15 green cards (it was amazing), 4 yellow cards (it was okay), and no red cards (I didn't like it).

Only one person left a comment, which was Talked too fast. I cannot disagree with that. With 10 minutes to cover 42 slides and do so to an audience of non-native English speakers, I'm thrilled I only received that comment once (though I suspect many others agreed).

Video

Making Your Site Printable - Adrian Roselli from Booster conference on Vimeo.

Speaking at Avega Group in Stockholm

Rounding out my European tour (I'll be at Booster in Bergen and ACE! in Krakow) is a speaking gig not at a conference. I've been grabbed by the fine folks at Avega Group to speak to their team in Stockholm on the evening of March 19.

I'll be speaking about accessibility not just to Avega Group, but apparently whomever else might like to attend who is in the area. There is a Google Form you can fill out if you would like to attend (it's after business hours, so it needn't eat into your day too much).

The abstract from my talk:

We can all pretend that we're helping others by making web sites accessible, but we are really making the web better for our future selves. Learn some fundamentals of web accessibility and how it can benefit you (whether future you from aging or you after something else limits your abilities). We'll review simple testing techniques, basic features and enhancements, coming trends, and where to get help. This isn't intended to be a deep dive into ARIA, but more of an overall primer for those who aren't sure where to start nor how it helps them.

More information is on the Google Form, which I have also embedded below:

If you will be in the area, here's a map of Avega Group's venue:

Using Bookmarklets on Mobile

Viewing comments on Medium (first image), then being prompted to login in order to view comment replies (second image). Both images are current version of Chrome on Android.

This is a follow-up to my post CSS Bookmarklets for Testing and Fixing.

While surfing Medium the other day I chose to read a comment. As usual, the comment overlay came up at the bottom of my screen with an option to see replies. When I tapped the replies link, I was immediately prompted to log in. This was new.

In the time between me tweeting Medium to complain, and them responding that it was a bug, I wrote a bookmarklet to remove that login overlay.

This was the easy part. The hard part was using the bookmarklet on my mobile.

As you may already know, there is no bookmark bar in the average mobile browser (at least not on smaller screens). Viewing bookmarks will generally take you to a new tab or screen, meaning a bookmarklet cannot affect the page you were viewing.

Conveniently, once you create a bookmark it becomes available through the auto-complete feature of the browser address bar. In this case, while viewing the page I tapped the address bar and started typing the name of my new bookmarklet. It helps that I remembered this, otherwise it might have taken more time.

Typing the name of the bookmarklet into the address bar as it shows options from auto-complete (first image), then once the bookmarklet fires I can see the comment replies (second image). Both images are current version of Chrome on Android.

This allows you to use bookmarklets you have specifically crafted to improve your mobile experience, or just general bookmarklets that you might not have thought would work on mobile.

Related

Fix Medium Bookmarklet

Hopefully by the time your read this Medium will have fixed the issue. If not, here is the bookmarklet I use:

javascript:(function(){var a=document.createElement('style'),b;document.head.appendChild(a);b=a.sheet;b.insertRule('.overlay{display:none !important;}',0);})()

Copy or drag the link to your bookmarks, or make a new one and paste the code from above: Fix Medium

Of note: after you do this, the hit state of the View n replies link is partially blocked. You need to tap at the very top of the link. If that requires too much precision, then zoom in until it it wraps to two lines and tap the top line of text.

What I Was Reading on Medium

Christian Heilmann wrote a great post on the web application myth, which may be the title, though I can't be sure because Medium's URLs never match what may be the page title, which is denoted by an h3 because there is no h1 nor h2 on the page...

Anyway, regardless of title, go read what I'll title The Web Application Myth: Web applications don’t follow new rules.

Speaking at Booster Conference in Bergen

A couple days ago I mentioned that I'd be speaking at the Ace! Conference in Krakow. I also suggested I might have other speaking gigs around the same time in Europe. Now I can announce that I'll be in Bergen, Norway speaking at the Booster Conference.

Most of my talks lately have been about accessibility, but for this one I'll be talking about another topic that makes me rant — print styles:

The push for responsive web design has helped web developers consider how the sites they develop can adapt to different devices, including sizes, screen resolutions, and even contexts. It should now be easier than ever to respond to a format that has existed since the start of the web — print. I'll walk through the process for making your responsive sites respond to the format we most often forget and show you how to use Google Analytics to track what pages are printed from your site.

Given the generalized nature of the conference (it bills itself as a software conference for the whole team), I am looking forward to speaking to a diverse group of attendees, both as users and developers.

The conference runs from March 11 through the 13^th, but I'll be presenting on day one (Wednesday the 11^th). The conference will be held at the Scandic Hotel Bergen City, and again for my own benefit I have embedded a map.

Speaking at ACE! Conference in Krakow

I'll be spending much of March bringing my shining personality to Europe, partially in the form of speaking engagements. The first one I can announce is the sixth annual ACE! Conference in Krakow Poland on March 16 and 17. Somewhere within that two day conference I'll be talking about accessibility.

There is a growing list of great speakers, and I'm pleased to be included among them. At least until they discover I'm a fraud.

If you are familiar with ACE!, then it's worth noting this year a separate track has been added focused on building better software. If you are unfamiliar with ACE!, then I will let the organizers speak for themselves:

ACE! is the largest regional conference of its kind in Central Europe, attracting people from all over the region. We're really excited about ACE! 2015 which combines two one-track conferences into one. The Building Software Better track includes the traditional ACE! content such as agile, lean, Scrum, Kanban, and other tools and methods for improving the software development process. This year we're adding a Building Better Software track that features Lean Startup, LeanUX, Design Thinking, and Customer Development topics. We're also adding a workshop track so that attendees can apply new skills and experiment with new ideas. It's going to be the best ACE! yet!

from the About ACE! section

You can stay abreast of new speaker announcements and other news from the conference by following @aceconf on Twitter.

As the conference site gets updated with this year's logo and the abstract from my talk, I plan to post it here.

I've never been to Poland, and I am hearing nothing but good things about Krakow (not just from its tourism board), so I am really looking forward to visiting.

The conference will be held about 5km from the city center, so if you're nearby you can pretty much include my talk in your tourism walk for the day. I've embedded a map for my own benefit:

Best Viewed in 1 of 11 Flavors of Chrome!

Make sure you view this on Google's flavor of Chrome, otherwise, well, I have no idea what will happen.

Sometimes it's frustrating being a developer who's been around to see Mosaic supplanted by Netscape Navigator supplanted by Internet Explorer supplanted by Chrome/WebKit. Developers just love dumping one platform for the new shiny.

As I said last week, all of this has happened before and will happen again. The difference with this post is that I am not going to rant about lazy developers whining over a world that will still contain Internet Explorer and its offspring.

Instead, let's ask the average anti-IE / pro-WebKit developer a very simple question — on how many flavors of Chrome do you test?

I don't mean how many versions of Chrome. I also don't mean how many different WebKit-based browsers. No, how many flavors of Chrome?

I'll guess probably not more than a couple. I have four that I can, but typically don't, use. Even at four that's far too few.

Today Peter-Paul Koch pointed out that there are eleven (11!) flavors of Chrome (Chromia, if you will). All of them built on Chromium. Here's the breakdown from his article:

Vendor	Version	Tested	Default	Remarks
Google	40	Yes	Yes
Opera	39	Yes	No
Yandex	38	Yes	No
Xiaomi	34 or 35	Yes	Yes	Zoom reflow
HTC	33	Yes	Yes	Zoom reflow
Cyanogen	33	Yes	Yes
LG	30	Yes	Yes	Mid-range
Puffin	30	Yes	No	Proxy
Samsung	28	Yes	Yes
Amazon	37	No	Yes	Silk
LG	34	No	Yes	High-end

Peter-Paul Koch from the post Chrome continues to fall apart at brisk pace

You may have noticed that this only accounts for mobile devices. Some on Twitter also noted Chrome on Google TV, or on Android TV, which doesn't account for the Samsung Android TV nor the Sony Android TV.

So maybe it's fifteen (15!) flavors of Chrome. Either way, I suspect that number will continue to grow.

Even if I include IE6, I only have to worry about 5 versions of Internet Explorer across mobile and desktop. If I want the idyllic WebKit-only world so many seem to crave, then I need about a dozen flavors of Chrome before I can get started with the Operas, Safaris, Yandexes, and Vivaldis (plural because those forks of WebKit also have their own versions to support)

All of this written against the backdrop of a Medium post claiming it won't consider IE11 a Tier 1 browser because of what it considers an ugly border in the editor view. Unable to find IE developers anywhere, nor to figure out where to file a bug, Medium just browser-sniffs IE11 into a second tier. I'm sure Medium tested across eleven flavors of Chrome, though.

Please read PPK's piece: Chrome continues to fall apart at brisk pace

All of This Has Happened Before and Will Happen Again

Jacob Rossi from Microsoft put together an article for Smashing Magazine that discusses Microsoft's Project Spartan web browser, Inside Microsoft’s New Rendering Engine For The “Project Spartan”.

Unlike other click-bait efforts that only speculated that perhaps Spartan was going to be WebKit-based, showing their own preference instead of any real understanding of the browser world, this one is filled with lots of great information. You should read it.

The first few comments, on the other hand, started off a mess (with many more on Twitter since the initial announcement). Two examples from the article:

So here was the opportunity to swallow their pride and join WebKit to make the internet a better place

…and they built *another* closed-source, proprietary rendering engine.

[Slow sarcastic clap]

Jones

« IE did shape the web in a positive way »

This made me laugh more than it should. You seem to forget why Internet Explorer has felt the need to change its name in the first place. And it’s not because it was «too good» or «too innovative»…

Erick G.

Many folks jumped in and corrected, down-voted, and generally balanced the insipid whining. Christian Heilmann, who has logged more years working for Firefox than most devs have logged using it, waded in to challenge many of the incorrect assertions.

Bruce Lawson, who happens to work for another browser vendor (Opera) noted all the things Internet Explorer did for the web in his five-year-old post In praise of Internet Explorer 6. It's also a cautionary tale about where reliance on a single rendering engine will take us.

What these two guys have in common, besides working for the competition, is that they have been on the web since its dawn. They've seen what happens when one browser gets too big (Internet Explorer) and how we spend the next decade-plus digging out from the mess.

How did we get into that mess? By people coding for one rendering engine.

Everyone who calls for WebKit in Internet Explorer is exactly the same kind of developer who would have coded to Internet Explorer 15 years ago (and probably happily displayed the best viewed in badge).

If you are that developer, then it will all be your fault when it happens again. When WebKit is no longer the hot engine. When Chrome loses its dominance. When Apple's market share falls to match the developing world. You will be to blame.

Do you think that won't happen? Just look to Android browser fragmentation, or WebKit failing to support a standard that Firefox and IE have nailed, or Chrome introducing its own proprietary features (can't find the link; it's coming), or failing to use best practices as it tries to carry the next big thing forward, or the complete lack of developer relations from Apple. We've had over half a decade of warning signs.

It's happening again, and every petulant, lazy developer who calls for a WebKit-only world is responsible.

Related

• The Return of “Best Viewed in…”
• Everything Will Be the New IE6

Update: February 3, 2015

My rant continues in my post Best Viewed in 1 of 11 Flavors of Chrome! It's built off PPK's Chrome continues to fall apart at brisk pace. Even I didn't know there are so many Chromium variants.