Navigating the Uncertain Web

The current talk I’m giving distills the second chapter of The Uncertain Web into 45 or so minutes (I’ve got the powerpoint on Github if you’re interested.)

As I continue to discuss topics relating to the book here on the blog, I thought it would be useful to outline the core concepts of that chapter in an even shorter format so that even if you haven’t read the book (and you should really read the book- it’s great) or haven’t had the good fortune to see me speak you have some sense of what I’m talking about as an approach to tame the web’s uncertainty.

Here are the basic ideas.

Don’t Blame the Web for Being the Web
The web is a diverse place that’s getting more diverse every single day.

If you accept the web’s diversity (and maybe even celebrate it) and you find yourself getting angry about one thing (maybe Internet Explorer 8) or another (the stock Android Browser) just take a minute to remind yourself that this is just the way the web is.

Repeat after me: This is just the way the web is.

Since there’s competition in the browser space, there’s always going to be a bad browser. When the current bad browser goes away a new one takes it’s place at the bottom of the pile. You just have to accept that and move on with your life.

Identify and Embrace Your Audience
You would think this second general concept would go without saying, but…. You really need to identify and embrace your audience

Do you know who your audience is? You’d be surprised how many clients I’ve had who couldn’t answer this very well at all.

While you can look at web-scale statistics for browser and operating system market share to get some idea of where things are, the only metrics that truly matter are those for your specific audience.

Test and Pray for the Best
This third general concept used to be much easier. Nowadays we’ve got to test in as many devices as we can and then pray for the best in the ones we don’t have direct experience with.

Once you’ve identified your audience, where they are and what they’re using it’s time to define the technical demographics you’re going to target with testing and active support.

You’re never going to test everything. The days of testing 95% of the web with one PC running IE6 and toggling between two screen resolutions are long gone. Test with as many real devices as you can and have a plan for what broad range of devices and operating systems you’re going to support. “Android” isn’t good enough. “Android 2.3 and up” is better and saying you’re going to dig up a Moto X means you’ve got your full game face on.

Focus on Optimal, Not Absolute Solutions
This concept has been with me for many years. My prime example is the many arguments I’ve had against putting in the extra effort to add rounded corners in older IE.

These days you need to focus on optimal, not absolute solutions.

Your site is not an absolute thing. The best possible site you can have will be the best possible site for everyone that visits it. If that means it’s a high DPI, 25MB monstrosity for a guy on a MacBook air in a coffee shop in Palo Alto or just a logo and an unordered list for someone on a-rented-by-the-minute phone in Lagos, then that’s the way it is.

People are used to sites looking different on different devices so take advantage of it and provide them with the best possible experience for their particular setup.

Embrace Accessibility
This concept is unfortunately something I have to call out, but people don’t focus enough on accessibility for the pure sake of it, so here we are.

On the modern web we need to embrace accessibility.

If your site is accessible you’re guaranteeing that you’ll be able to reach the largest possible audience.

You’re also doing the right thing.

I can’t stress that enough. You should be doing this anyway.

Lose Your Technology Biases
This general concept is one that drives me particularly nuts.

You’ve got to lose your technology biases.

Tech folks generally have great hardware and new, high powered smart phones and tablets. Most other people in the world don’t. Tech folks tend to forget that.

Not everyone has a fast machine. Test on crummy hardware and crummy phones.

Not everyone is on a Mac. In fact, the vast majority of people on the desktop are still running Windows, no matter what it looks like at conferences. Test on Windows and test in IE.

Not everyone is on an iPhone. Don’t design your experiences around iOS.

Embrace Empathy
This concept runs through much of what we’ve already discussed, but I still like to call it out. We need to embrace empathy.

Don’t blind yourself to what your audience actually is by assuming that they are just like you.

They’re not. Your average experience at work, at home or on your phone is almost certainly an optimal view of your site. You’re an expert at using the web. Make sure you look at it, really look at it, in every scenario you can muster. Sure, we’re all guilty of demoing code under the best possible circumstances. That’s natural. The thing is, that demo is the ideal vision of your site run by an expert. The thing you’re actually building, the down and dirty version, is for people with a completely different relationship with technology than yours.

Try to get in their shoes instead of assuming everyone else is in yours.

Lose Your Stack Biases
This is a new pet peeve that has cropped up over the past couple of years.

Lose your stack biases.

Your users don’t care if your stack is clever. What they care about is the speed, usability, look and feel, interactivity and features of your site. If your stack isn’t adding to one of those then you might be going down the road to stack obsession.


This is the foundation of what I’m talking about these days. This is all covered in much greater detail in the book and in my talks, but the overall gist is here. Now that I’ve gotten this out of the way I’ll get back to diving into the continuing evolution of the web and what we can do about it to make it the best web it can be.

A Long Journey Reaches a Happy Conclusion: The Uncertain Web is Out In All Formats

lrg

It’s true. After a two year odyssey, The Uncertain Web is finally out in every format that matters. The book has actually been out for a little over a month in multiple ebook formats from O’Reilly and Amazon; but owing to a slight production hiccup it hasn’t regularly been available in print until now (technically this Friday, but Amazon is on the case.) The book is in full color (and looks great) so I wanted to wait until you had the option to get your hands on the print edition before I really started to spread the news.

That time has come. I’m spreading some news…

I’m really happy with the finished product. One of the reasons I’m proud of it is that it’s the first book I’ve written that I could really recommend to my peers– my jQuery book was a hybrid effort with another writer aimed at intermediate developers and Beginning HTML and CSS is book for beginners. The Uncertain Web, on the other hand, works for everyone from a project manager or designer (who could read the first two and final chapters with ease) all the way up to the most technical front end engineer who might be surprised by some of the things that I kick around in my precious 224 pages. Not everyone is going to agree with everything I say in those pages, but there’s definitely something that will make you stop and think about the way you approach the web, no matter who you are.

Here’s how O’Reilly describes the book:

What’s the best way to develop for a Web gone wild? That’s easy. Simply scrap the rules you’ve relied on all these years and embrace uncertainty as a core tenet of design. In this practical book, veteran developer Rob Larsen outlines the principles of what he calls The Uncertain Web, and shows you techniques necessary to successfully make the transition.

By combining web standards, progressive enhancement, an iterative approach to design and development, and a desire to question the status quo, your team can create sites and applications that will perform well in a wide range of present and future devices. This guide points the way.

Topics include:

  • Navigating thousands of browser/device/OS combinations
  • Focusing on optimal, not absolute solutions
  • Feature detection, Modernizr, and polyfills
  • RWD, mobile first, and progressive enhancement
  • UIs that work with multiple user input modes
  • Image optimization, SVG, and server-side options
  • The horribly complex world of web video
  • The Web we want to see in the future

The book is also solely my idea. Which isn’t the case with any of my other books. Typically publishers have a book they want written andthey search for an author. This time I had some ideas I wanted to share and O’Reilly stepped up to let me share them (thanks to Simon St. Laurent.) That, in particular has been rewarding for me.


Have I mentioned I have a back cover blurb? I do. It’s provided by Jeremy Keith and it makes me smile.

“A refreshingly honest look at the chaotic, wonderful world of web development, with handy, practical advice for making future-friendly, backward-compatible websites.”


I also like this tweeted comparison:

All in all I’m a happy dude.

Quick Note: I’ve Got a Few Posts on Amazon’s tech.book(store)

I’ve written three articles for them. The first two are up now:

Recommended HTML5 and Open Web Platform Books

In which I recommend books that I think are pretty good for HTML5 and general front end engineering.

Spoiler alert! I recommend my own book. I happen to think it’s pretty good so I’m not going to apologize 🙂

The Modern State of Web Browsers

In which I talk about the current browser landscape. A post which was rendered a little bit out-of-date a week later when Google announced Blink. On the other hand, my concerns about Opera, outlined in the article, have already been addressed. Blink replaces Presto in the rendering engine landscape and creates a more powerful alternative to Webkit than Presto was ever going to be. Boom! Webkit monoculture averted.

I’ve got one more post ready to go, I’m assuming it will drop next week. I’ll be sure to share when it does.

Using CSS zoom and CSS Transforms For a Better “Increase Text Size” Button

So… the site I’m working on has one of those “increase text size” controls. On this project it’s turned out to be one of those features that shows up in comps and somehow falls through the cracks until later on in the project cycle. Situation normal, really, as it isn’t a big feature. It’s just one of those things that needs to be buttoned up before the site can go live.

Anyway, I was thinking about how to do implement it the other day. I haven’t done one of these in a long time and the only other time I did one it involved crafting separate, albeit small, style sheets for the larger text sizes. I didn’t want to go that way again. Basically, I just didn’t want to write new style sheets- even small ones.

What’s a fella to do?

zoom

So, thinking about it a little bit, I seized upon using the non-standard CSS zoom property. Supported in Internet Explorer (zoom:1 is often used for a hasLayout toggle) and Webkit browsers, it would represent a simple (1 line!) CSS solution to this problem. It’s also one that I like better aesthetically as the site looks the same, just bigger. I figure there’s a reason all browsers have moved to this behavior when hitting ctrl+.

The problem was figuring out an equivalent for FireFox and Opera which don’t support zoom

Enter CSS 2D Transform

A little searching and experimenting later I came up with the idea of using CSS Transforms and the scale value to approximate zoom in browsers that lack support.

Let’s see how I did it.

As you go through the following keep in mind this hasn’t actually gone through testing yet so something weird could yet shake out. I just wrote this code yesterday, so you guys can be my sanity check.

Also, is anyone else doing this?

Continue reading “Using CSS zoom and CSS Transforms For a Better “Increase Text Size” Button”

Yahoo!’s Graded Browser Support to Downgrade IE6 in Q1 2011

I’m a big fan of the Graded Browser Support table from the fine folks at Yahoo! It was the official foundation for our browser support policy at Cramer and I still look to it now for hints into what one of the most mass-market of all sites thinks about the browser landscape.
Continue reading “Yahoo!’s Graded Browser Support to Downgrade IE6 in Q1 2011”