We're given mounds of data when all we want is the answer to a question: Which car should I buy? What's the best treatment for this illness? Which software will be best for my business? Instead of answers, we get search results, lists, spreadsheets, dashboards and other collections of data that do nothing to help us with the sense-making process. And while more and more data is made available to us, our capacity to hold these ideas in short-term memory has not changed. We need tools to help offload the mental tasks of understanding and identifying relationships. Why? So that our short-term working memory is free to make better, more informed judgments.
Data visualization is a step in the right direction, but these impressive feats of engineering tend to overwhelm most people. And infographics, while great for engaging people emotionally and making sense of a complex topic, are designed for print and not sufficient for large, dynamic datasets. We need something in-between, something engaging and dynamic, some visual representation designed around the content it is meant to serve. Shopping for a point and click camera? Why settle for search results or a data grid? Why not show dozens of options arranged in such a way as to reveal something each camera relative to the other choices? What might this screen look like? Moreover, what will the Web look like as we start to pay attention to the content being served up by these decade old UI patterns?
For this to happen, we need skilled visual designers—those individuals who excel at communicating ideas in powerful ways—who are also excited to work with content that is liquid and unpredictable. This is still a new set of skills, but a set of skills that will be in high demand as we look for new ways to deal with too much information and a shortage of clear answers.
Past Thoughts: February 2012
I expect people think it's a compliment when they say 'I don't' know how you find the time ...'. Personally, I find it a little irritating. We all have the same amount of time, and we all choose what we do with that time.
If you don't understand how people find time to do all the things they do then chances are you're not being very thoughtful about the way you spend your time. What you do, what you don't do - that's your choice.
There is no good choice or bad choice, but there are different levels of thoughtfulness.
There are lots of ways to spend your time badly. You can be incredibly busy and still spending your time badly. Everybody, except the bored, wants more time.
What do you want your life to be? That's how you need to spend your time.
Your time is the most precious resource you have. Use it thoughtfully, productively and creatively.
We've come a long way since:
<HEADER> <TITLE>The World Wide Web project</TITLE> <NEXTID N="55"> </HEADER> <BODY> <H1>World Wide Web</H1>The WorldWideWeb (W3) is a wide-area<A NAME=0 HREF="WhatIs.html"> hypermedia</A> information retrieval initiative aiming to give universal access to a large universe of documents.
Look at http://html5boilerplate.com/—a base level page which helps you to cover some (nowhere near all) of the above list of things to care about (and the rest of the things you need to care about too, which are the other 90% of the list). A year in development, 900 sets of changes and evolutions from the initial version, seven separate files. That's not over-engineering; that's what you need to know to build things these days.
The important point is: one of the skills in our game is knowing what you don't need to do right now but still leaving the door open for you to do it later. If you become the next Facebook then you will have to care about all these things; initially you may not. You don't have to build them all on day one: that is over-engineering. But you, designer, developer, translator, evangelist, web person, do have to understand what they all mean. And you do have to be able to layer them on later without having to tear everything up and start again. Feel guilty that you're not addressing all this stuff in the first release if necessary, but you should feel a lot guiltier if you didn't think of some of it.
I would like to draw attention to a concept Antony and I introduced in our book Fragile CSS. With the ubiquity of CSS3 and increasingly complex and precise selectors, it is important to understand that, by using these sometimes too feeble rules, you might be adding a level of fragility to your code that will bring you trouble along the line. Think: Is your content likely to change? Are you making it hard to override this rule in the future? Do you need something more flexible, that you can reuse?
I love it when people, especially my mom, ask me if I saw such-and-such on Facebook or the new flash in the pan on Youtube. My response of late has been "if I worked in a coal mine I wouldn't hang out there after work".
As a young boy I dreamed of playing for my favorite football team. I'd dream of lifting the FA Cup, and then watching the slow-motion replay of my audacious winning goal from every angle on Match of the Day. I'd dream of everyone in the country having seen it, too. Likewise, I suspect that most people hold some craving to build the next biggest thing; to build a service that could somehow reach everyone and affects so many lives in some way. But, in childhood and in sport, we also find heroes the players and managers that take our small local team to relative success in any league.
The growing size of our internet community has had some effects on the presented aims of sites and services, and the purported value of them. We live in a world where it is possible that as you read this, the largest web service of the moment—Facebook—could have an entire billion active users. They are rightly acclaimed for this formidable achievement. Twitter—where I work—gets similar plaudits for its effect on mass public communication and media, just as the epic sites of five and ten years before did in their own ways. But though these sites are the gas giants of the internet, they are also distorting gravity for other services, and we see it every day as millions of dollars is invested into seed rounds, setting high demands on a return.
The best of us who work on the internet thrive on being alert to the next idea. We are harsh critics, and our lust to improve and iterate on everything we know is insatiable. From time to time, when the conditions are right, we'll take a chance and see if we can make it happen.
But how? And why? And for whom? On any day you can look at how our industry presents itself, and in its media, and all you'll see is an egotocracy of who-knows-who, and disproportionately localized financial investment. It can seem that unless you're trying to win the FA Cup, you're not worthy of any attention.
We must reject this. We must recover our sanity where 100 million users does not represent the goal criteria of every new service. We must recover the mindset where a service used by 10,000 users, or 1,000 users, or 100 users is *admired, respected, and praised* for its actual success. All of those could be sustainable, profitable ventures. If TechCrunch doesn't care to write about you, all the better.
If you are fortunate enough to work on your own product, with your own idea, and build it, and ship it, and reach enough people willing to sustain you financially for that immense amount of work, you should be applauded. You have poured in inordinate effort, and succeeded in making something that improved lives.
If your idea resonates with 5,000 people, then congratulations. If your idea resonates with 5 million people, then congratulations. If your idea resonates with 500 million people, then congratulations. Never forget that the commons of the web thrives on serving niches, sharing markets with other passionate people, and making your own success. You can think of some products as ‘small’, or ‘niche’, or ‘indie’, or ‘artisanal’, or ‘specialized’ all you like, but we must not deny their achievements with fantasies of size and monoculture.
It should not be demanded that a service reach everyone to be considered relevant. If anything at all can be ‘demanded’ in this context, it is only that you be held to your own high standards, and that you take your ideas as far as you can. Whether it's one hundred or one billion users, we should all recognize success.
We need a raising of the maturity bar in little web industry. I'd like to see more people asking questions of each other and learning from each other. I don't care if you've been using designing for 10years or 10 days, everyone still has something to learn – and often from the most unlikely places.
I'd like to see more people encouraging each other and spurring one another on. I'd like to see less back patting and more challenging articulate critique executed with a healthy measure of grace.
Various debates this last fortnight, particularly around vendor prefixing and using other work in progress features, reminded me of the importance of testing in my workflow. Working to make your users get the best experience possible is still paramount. The only way to succeed in doing this is to understand what they see, and then fix and enhance accordingly. I've seen mentions of cross-browser testing missing from many of the arguments, and blindly using prefixes more or less encouraged.
If you're not noticing the lack of a prefixed property, where one is available in a browser your site has visitor stats for and a commitment to support, I'm guessing you're not looking very hard at all in those browsers. They probably have more fundamental problems than a few missing rounded corners. Worse still, if you're not testing thoroughly, using a vendor's work in progress, unfinished, unstandardised feature could make your site behave poorly in ways you can't foresee. Using a prefix for a certain vendor should be an automatic commitment on your part to check what that prefixed effect actually looks like in those browsers that understand it.
Inspired by Daniel Markovitz’s Harvard Business Review article “To-Do Lists Don’t Work”, I have been “living in my calendar” for a few weeks now. While I’m still a long way from becoming as productive as I’d like to be, I’m definitely getting more done, and I’m also getting a clearer sense of my capabilities (read: my ideal productive self may as well have been born on Krypton).
In a nutshell, my (evolving) process works like this. At the beginning of each week, I assign upcoming tasks to days (breaking up bigger tasks into pieces that get spread over multiple days), and at the beginning of each day, I assign its tasks to specific timeframes. I leave some breathing room here and there for responding to e-mail and other little things that might pop up and need immediate attention.
So far, I have yet to accomplish a day’s tasks according to my schedule, and that failure is very valuable. On one hand, it lets me see precisely how far off my time estimates are for various sorts of tasks, and on the other, the pressure applied by the specific timeframe constraints (which Markovitz calls a “commitment device”) makes me more aware of the inefficiencies inherent in my work habits. The goal is to meet in the middle, where tasks are budgeted a bit more time (I don’t expect myself to be Superman) and my efficiency increases (I try to be a little bit more like Superman).
As I said before, my process is evolving and I’ve still got a long way to go, but, unlike my experiences with other time management methodologies, this time I actually feel like I’m on my way.
Think back a mere 10 years ago. Nearly everything was paper-based. You had to go to the bookstore to buy a book. You wrote letters that required a stamp to get to their destination, which took days and sometimes weeks. I have a few shoeboxes of letters and cards I've received. These are artifacts. Meaningless to nearly everyone, they're priceless to me: they mark points in my personal history, my story. When we first started to use the web, we printed out articles to read later. I still have articles I printed out several years ago, that I re-read and refer to on occasion.
Today, nearly everything is digital. We have email. We have digital bookstores. We read on iPads and Kindles. The web is still young, but already, the question becomes, "Is there an app for that?" We need to be careful about who we choose to entrust with our data, our digital artifacts. Services come and services go. Companies fail, they get sold. We have yet to master the art of archiving digital content on the web. We can and must do a much better job preserving the content we work so hard to create, not just for nostalgia's sake, but to ensure that we leave records and artifacts for the generations to come.
Pragmatism and power > perfectionism and prettiness. Code is there to do a job, the only person who cares how pretty it is is usually, 99% of the time, you.
One of my favorite parts of developing web sites is working with markup. HTML fascinates me because it is deceptively simple. How it impacts assistive technologies, browsers and devices is an ongoing journey of education. Understanding the semantics is challenging, yet satisfying, like the New York Times Sunday crossword.
And my fascination has only intensified with HTML5.
So I find it particularly frustrating when I read articles that poo-poo the value of semantic markup, or whine that it's too hard to figure out whether to use
<section>, or complain that something in the draft HTML5 spec isn't where it "should" be.
If semantic markup and HTML5 is confusing to someone, it only suggests to me that someone needs a bit more experience and knowledge. My first site with HTML5 took at least three times longer than if I'd stayed with good old XHTML Strict. But this experience didn't leave me believing that it was pointless to attempt writing more semantic markup. That's just how it goes when learning something new. Not acknowledging a learning curve and blaming the technology doesn't do anyone any good.
And let's not forget, HTML5 is a draft. Even once it's formalized, that doesn't mean vendors are going to magically support everything all at the same time. In our industry, this is just how it is. Complaining won't change that, but it certainly could discourage other people from learning something new.
I get that it's human nature to bitch. I'm a pro at it, myself. But when it comes to helping move things forward, bitching is at the bottom of the list. At the top of the list: education and openness. That's what has helped me move forward in my career.
As I build more sites with HTML5, I continually get better and the semantics make more sense to me. Through this process, I'm becoming a craftsman (craftsperson? whatever …). I'm a better developer because of the struggles I had learning and the challenges of staying up–to–date with a draft spec. But the best part is I'm differentiating myself from the folks who don't care to master the craft, which means more and better opportunities for me.
Sure, “It depends” is a valid answer to any worthwhile question, but it’s also vague and patronizing. It’s far more helpful to explain what it depends on.
You may catch more flies with honey than with vinegar, but you catch even more with a little audacity. Being polite is a good rule of thumb, but like everything, it also needs moderation. Don't say "share my content pleeeeeeaaaase". It makes people think your content isn't worthy of sharing if you have to grovel. In a long email, don't write a paragraph apologizing for its length (true story!). Being overly polite when meeting someone, categorizes yourself as inferior in the other person's subconscious. Treat yourself with the respect and admiration you expect from other people. If you don't think highly of yourself, nobody will. When meeting someone you admire, treat them as an equal and they're more likely to do the same.
However, be careful not to cross the fine distinction between treating yourself with respect and being a cocky jackass. Treat others as equals, not as inferiors, otherwise your attitude will get you nowhere — and will piss everyone off along the way.
As designers & developers I'd say that we're pretty much always sold on concepts such as progressive enhancement, responsive web design, designing in the browser, etc. We want to actively incorporate these processes into our work as much as we can. Problems can arise though, for those of us who work in agencies. Want to build that next site responsively? Someone has to pay.
In my role, I'm lucky that I get to meet clients early on and explain these concepts to them and explain the benefits. Others I know that work in larger agencies or big organizations aren't so lucky. They're hampered by archaic processes or sales people who refuse to alter their stock script. If this sounds like you, become an educator, sit down and show them these new techniques and highlight the benefits. Generally people are responsive to new ideas and ultimately you're the expert. If they choose not to listen, do yourself a favor and go find some smart people to work for.
As a busy graphic designer spending so much time on projects for clients, I find it very helpful to do some creative work that has nothing to do with work, especially when you are working on a big project that takes months, and where you have to stay focused on the same design for such a long time.
I think it's important to keep your creativity at its best. That's why I try to spend every day 10 to 15 minutes creating something that isn't work related. It could be a drawing in one of my sketchbooks, or just some doodling, or it could be something done in Illustrator. I prefer going the analogue way as I already spend so much time in front of my computer. So it's usually pencil and paper, watercolor, or even scissors and glue to create a fun collage. My creative mind follows another path during those few minutes, and doing so has a revigorating, stimulating effect on me.
Last week, I took a train and joined over six-hundred other people at the New Adventures in Web Design conference in Nottingham. It was an unusual experience for me. I’ve been to fifty-plus events since my first in 2005, but New Adventures 2012 was the first where I was there to soak up the experience and not to speak.
Sitting — sometimes a little uncomfortably — in the audience, I spotted people who are well known for their speaking, writing and industry leadership. People who have spoken at conferences as far away as San Francisco and Sydney. People who have written articles and books that have changed the web. People whose ideas have inspired thousands of designers and developers.
You might think that people like this were on the stage, but they weren’t. They were sitting, like everyone else, in the audience, because they were there to learn and be inspired.
That’s one of the great things about working on the web.
There’s always something new to learn and someone willing to teach you.
The Web should be consumable by all, but it should also be easy to author. Publishing tools like WordPress enable millions to author sites, and can produce high-quality code, but it's still essential that it's easy to hand-author HTML. Not everything can be simple, but it should be as simple as possible. That's why I support HTML5 - it simplifies authoring by making some previously-scripted effects declarative (form validation, controls for video and audio) and provides simple APIs where previously complex script was required - eg, localstorage APIs.
Almost 10 years ago I wrote a blog post entitled It doesn't have to look the same. In which I said:
Different is not wrong, this is the web, a dynamic medium where we have no control over our user nor should we want to have. By building sites that separate style from content we are free to display the same pages in as many ways as our imagination will allow. We can have bells and whistles for the new browsers, we can have attractive and readable designs for the version 4 browsers, we can display the content legibly for older browsers, devices that do not support CSS.
It is now 2012, and still I hear the same argument for not using CSS3, for not taking advantage of all that has been developed over the past ten years. Yet I think there might be a light at the end of the tunnel. A way to squash the idea that websites need to look the same to everyone once and for all. Old browsers will always be with us, there will always be people who don't upgrade, won't upgrade or have computers so old they can't upgrade. However, the increase in "responsive design", websites that adjust themselves according to the capabilities of the device they are viewed in, means that the average person will become used to the fact that websites don't look the same on all devices. It will become obvious to them that their phone has different capabilities to their desktop at work, and that the site responds to that. It's then far easier to explain that when they view the site on that ancient PC in the library, that runs IE6, and it looks plainer than on their top of the range laptop - that's just the site once again responding to what it is being viewed in.
Even our most non-technical of clients is likely to have experience of seeing a website on a phone or tablet, and we can use that to explain a one web approach to development. An approach that serves a good experience to everyone, no matter what the capabilities of their browser or device. Yet doesn't attempt to provide an identical experience, as that simply isn't possible.
Last year, I (re)discovered scan paths, or the route our eyes follow through interfaces. I’d come across research in the area before, but hadn’t delved in too deep. An important moment was re-reading Dr. Kevin Larson’s article on The Science of Word Recognition.
The roughly Z-shaped path our eyes take when navigating an interface fascinates me. It relates directly to understanding text at the legibility or micro typography level, and composition at the readability, or macro typography level. It aligns with a dual concept I’ve been thinking a lot about: I call it impact versus immersion. Or display versus body. Or emotion versus comprehension.
The immediate, emotional, subconscious feeling we have about an interface when we first see it is powered by the amygdala — one of the oldest parts of the brain also known as the lizard brain — which can receive sensory input and generate an emotional response in us often without the words to describe what it is, or why we feel the way we do.
The utility we find in interfaces creates an emotional response, too, but through function, and delight in use. When the information is legible and readable, the interface’s character becomes invisibly useful. The style fades into the background, and the utility comes to the fore.
It’s a little like perfect service in a restaurant. The expert waiting staff don’t impose, or interrupt the great conversation we’re having with friends, or intimate moment with partners. Our glasses are refilled, and the dishes arrive almost invisibly, gently, and fluently.
I think we’re often designing for both. Composing with scan paths in mind helps us do just that.
I love sports. You might know this by my check-ins to stadiums on Gowalla or perhaps you've seen my cheese carvings of sports mascots. A couple of years ago, if you followed my Twitter account, you might have known I loved sports from my tweets griping or celebrating local Philadelphia athletics. One winter day, I received a Twitter reply from a friend of mine stating: "Oh, I forgot I can follow @jennlukas again now that baseball season is over." My first reaction was laughter and to reply with a picture of a cat playing football. But then I started to think he might have a point.
Knowing your audience is key. I have always viewed Twitter as more of a safe place for nerds. I like to use it to stay up to date on news, mostly relating to the web. So I decided to make an effort to slow down on the sports tweets. Some have told me: "it's your twitter, post whatever you want!" And sure, that's certainly true. However, I'd personally rather read web development tweets over the ones about the Kobe Feef Phở someone just ate or the "OMG I can't believe that just happened on [insert TV show here]" variety, so why not try to cut down on my plethora of jock outbursts?
I now use Facebook status updates to fulfill my need to talk about sports on the Internet. For me, Facebook is more audience appropriate, as most of the people reading my updates are local friends who might give a hoot about the Philadelphia Phillies. I think finding a balance of staying true to yourself and using one of the many social channels we have to do so is totally doable.
Now please excuse me while I go add "Social Karma Expert" to my LinkedIn.
I recently went through a major creative drought. For about a month and a half, I had absolutely no fresh ideas; I found myself recreating the designs of others, and practicing CSS techniques just to feel productive. It was pretty depressing, particularly after such success with Animate.css.
Then one day, I thought I'd try something I've never done before, and create an icon set. It was difficult, since it had been a very long time since I even opened Photoshop, and I've never worked so intensely on such a small canvas or with the pen tool - but it really kicked me into gear.
I found that by throwing myself into the deep end of unknown waters, I got a great burst of motivation, which suppressed my feelings of doubt about my ability to design in an unusual environment. If you're ever suffering from designer's block, try something completely different. You might be surprised how well it works out.
In 1995, back when the Web design and development industry was only atoddler, we began to be able to work with color. Of course, many readers will remember the need for "web safe" color when a typical video card and monitor could only calculate 256 colors. With 50 of those reserved for system use, we ended up with a 216 color palette that was considered most consistent across all browsers. I had come from the world of dumb terminals, so I was used to green or amber text on black and it never occurred to me that having to limit a color palette for this new and exciting communication space might feel limiting to some.
Over the next year, I was brutally disavowed of this by my students, who regularly would grouse about the lack of "real" color on the Web. Almost as new to the Web as my students, I was struggling for a way to explain this to them that showed that 216 colors was actually a luxury for many people in 1995 - up to and including working Web designers, who often had to limit the palette even more if they were serving users without 256 or more color support. Then one day, I stopped by my office to pick something up, and one of the daytime professors whom I'd not met was there. She jumped up and gave me a hug, expressing great personal warmth and an artist's excitement about the Web. "Molly," she said. "I feel so free on the Web. I've been working in print design my entire career and Ifinally get to work with more than four colors!"
Suffice it to say, I had found a positive answer for my students! At the time, her response was very unique. Nowadays, we never really need to think about color limitations anymore, except insofar as those who take extra care in designing for forms of color blindness. Otherwise, on-screen color palettes in the millions exist in today's Web design and development. It is a solved problem, and if that problem can be solved, so can the many others which we face. Go forth today and color the world, and embrace our progress as creatives, technologists and an industry.
In my early to mid teens, like many in my experience in the technology world, I voraciously read the classics of 20th C science fiction, in particular, giants like Asimov and Clarke. It's decades since I've read them, but many of the stories and ideas stay with me.
One expression you've almost certainly read or heard is Asimov's 3rd law of technology (Asimov rather liked laws, his laws of robotics having long since passed into mainstream consciousness).
"Any sufficiently advanced technology is indistinguishable from magic": http://en.wikipedia.org/wiki/Clarke's_three_laws.
When I was younger, I thought this was a very astute observation about, a description, indeed a definition of technology.
But many years later, it occurred to me it's more than that. It's a challenge to technologists. Make your technology magical. Make it disappear, make it just work.
A recent, in many ways mundane example comes to mind.
Some months ago we got a new iMac for home. For the first time in years, I set it up from scratch, rather than transferring an account over from an older computer.
I created an account, gave it a password, and when the setup process completed, it connected to the web. Over our secure wireless network.
Most people would likely give this no extra thought. But I was perplexed. How could it possibly connect to our password protected wireless network? Choosing a network and connecting to it was not part of the setup process.
Then I realized, the password I gave the new account was the same as that for our wireless network. Whoever designed the setup process decided to try the user password for the networks it could see. If none of these shared the same password, there's no additional impact on the user, they simply need to connect to the network with a password, as they would otherwise. But. If (as I suspect is common) the user's password and network password are the same, the computer magically connects to the network, and so the web.
We are definitely not talking quantum levitation here, but this is magical technology.
And, there are opportunities everywhere to weave a little magic in what you build.
Something simple that comes to mind is auto-filling form fields based on the user's location using the geolocation API, but there are ways to make them almost any interaction less frustrating, more intuitive, more magical.
Perhaps your user will stop and wonder "how did they do that?". But even better, they may not notice at all. A vanishing act, the greatest magic trick of them all.
I always have something to do. "In my free time" is just a joke I sometimes mutter to myself. Without proper ways to manage that, I'd go crazy.
Though it seems like overkill, I use a system of loose and strict to-dos to help me get through my day. For starters, I use Notational Velocity (synced to iPhone and iPad through Simplenote) to record my random thoughts. I've been sprinkling Evernote into that mix, but haven't quite found a reliable reason for it yet. Once something from those lists are actionable, I'll move it into topic-based lists in Workflowy (as a Fluid app). Lastly, when I'm at a list to move it into a daily list, it goes into my trusty TeuxDeux (also as a Fluid app).
That's how I get things done.
Having been knee deep in CSS for a number of years I had become set in my ways. Like many other people I much prefered to hand code and generally avoided "frameworks". Looking back I am hard pushed to work out why, as I say I was set in my ways.
Towards the tail end of 2011 I was chatting with my good friend Greg and he asked if I had tried out Sass. I mentioned I had heard about it but hadn't really tried it in anger. After a quick demo I was a convert.
Whilst I don't use the nesting capabilities that much variables, mixins and selector inheritance make creating CSS quicker and more maintanable. If you write more than a few lines of CSS a day then I encourage you to give it a try.
The web is about the availability of information and sharing knowledge through connecting. A practice that we always need to be exercising as web professionals is to reach for that which is just beyond our grasp: either in terms of concepts, ideas, skills, techniques, and even connections with other people. It is that which we haven’t reached yet—but desire to get to—that helps both ourselves and the industry expand, grow, and mature.
Having just returned from New Adventures in Web Design 2012, in Nottingham, England, I find myself reminded once again of the good friends I have in this industry. Kind, intelligent, funny, and inspiring friends who originally came together over our shared love of the web and design in general. Every time we meet it's like the conversation carries on from the previous event. The presence of friends at conferences makes each new city feel like home; each new speaker session a shared learning experience of furthering our collective craft. What other industry has this? This sense of camaraderie, this bind of community?
I was once asked, in a room full of such friends, at the .Net Awards three years ago, 'aren't you guys all competitors?' Technically, yes, but I don't think any of us see our industry like that. There's enough work to go around. Collaboration, not competition, is the driving force behind what we do.
At events like New Adventures, I'm reminded of just how fortunate we are to work as web designers. What an amazing community. What a Great Bunch Of Lads.
Edge cases are often the bane of a developer's existence. Even good unit tests often will not save you—because edge cases will identify inflexible design, or insufficient configurability, leading to painful refactoring. On the flip side, however, solving edge cases can be one of the most rewarding accomplishments we can achieve.