Design

Community Strength: The Immersive Web And Design Writing


  

I have an idea for a new product — can I tell you about it? It will take months to develop, and even though this kind of thing is usually given away for free, I’m going to charge for it. Oh, and the market for it probably won’t be very big… Wait, come back! Where are you going?!

It does sound like a crazy idea, but it’s exactly what a small group of designers and writers have been doing for the past year or so. On a Web littered with SEO-ified headlines (“17 Jaw-Dropping Responsive Design Templates and Funny Cat Pictures�), easy-to-share design gallery slideshows and quick tutorials that help you recreate the latest texture fetish in Photoshop, these people are taking a step back from what we have now come to refer to as the “fast Web.� In the words of Jack Cheng:

“What is the Fast Web? It’s the out of control Web. The oh my god there’s so much stuff and I can’t possibly keep up Web. It’s the spend two dozen times a day checking Web. The in one end out the other Web. The Web designed to appeal to the basest of our intellectual palettes, the salt, sugar and fat of online content Web. It’s the scale hard and fast Web. The create a destination for billions of people Web. The you have two hundred twenty six new updates Web. Keep up or be lost. Click me. Like me. Tweet me. Share me. The Fast Web demands that you do things and do them now. The Fast Web is a cruel wonderland of shiny shiny things.”

Slow Web
(Image: Jack Cheng)

A new wave of publications are avoiding this trap, and they appear almost quaint or old school compared to the fast Web. Or worse, as n+1 magazine points out:

“But all contemporary publications tend toward the condition of blogs, and soon, if not yet already, it will seem pretentious, elitist, and old-fashioned to write anything, anywhere, with patience and care.”

I’m talking about collaborative print and digital publications such as The Manual, Distance, Codex, 8 Faces and Ferocious, and even books such as Frank Chimero’s The Shape of Design. These publications all have two things in common:

  • First, they’re about the meaning of creativity and design, more than they are about the doing of these things.
  • Secondly, they are written with patience and care, and they are designed to be read and enjoyed in the same way.

This kind of thing is, admittedly, a hard sell. There are two main reasons for this.

First, we’re not trained to spend time doing things with patience and care on the Web. As Robin Sloan points out in his brilliant essay “Fish�:

“On the internet today, reading something twice is an act of love.”

And the reason for this is that we’re being fed junk food, and we love it. Clay Johnson talks about this in his book The Information Diet:

“Driven by a desire for more profits, and for wider audiences, our media companies look to produce information as cheaply as possible. As a result, they provide affirmation and sensationalism over balanced information. […] Just as food companies learned that if they want to sell a lot of cheap calories, they should pack them with salt, fat, and sugar — the stuff that people crave — media companies learned that affirmation sells a lot better than information. Who wants to hear the truth when they can hear that they’re right?”

So, instead of looking for nutrition, we settle for the quick fast-food rush. Short articles fit nicely into lunchtime breaks. They don’t distract us from the Twitter feed long enough for us to lose track of the day’s most important discussions. Most of all, this bite-sized information effectively manages one of our biggest fears: the sunk cost phenomenon, whereby we worry that if we “waste� time on a long piece of writing, we can never get that time back to do something else instead.

Secondly, convincing people to care about why they do something is much harder than getting them to learn how to do it. One is about meaning, the other is about doing. And only one of these things brings cash directly into the bank account. As Frank Chimero points out in The Shape of Design:

“The relationship between form and purpose — How and Why — is symbiotic. But despite this link, Why is usually neglected, because How is more easily framed. It is easier to recognize failures of technique than those of strategy or purpose, and simpler to ask “How do I paint this tree?â€� than to answer “Why does this painting need a tree in it?â€� The How question is about a task, while the Why question regards the objective of the work. If an artist or designer understands the objective, he can move in the right direction, even if there are missteps along the way. But if those objectives are left unaddressed, he may find himself chasing his own tail, even if the craft of the final work is extraordinary.”

The irony in all of this is that taking a break from doing, to look slowly and carefully at why we do things and how they fit into the world around us, will almost certainly make us better at the doing part. All creative pursuits have importance and meaning only through their audience, so understanding that audience and the world it operates in is an essential ingredient in our craft.

At least, that’s what I think. But I could be wrong. So, to find out more, I got in touch with some of the publishers who work on these publications and asked them a series of questions about what they’re doing and why they’re doing it. What follows are excerpts from email discussions with the following publishers:

Why should you care about what these people have to say? The purpose of this article is not to convince you to stop reading articles that help you learn the techniques of your craft. Its purpose is to make the case for a more balanced information diet, with which we all take the time to nourish the parts of our brain that give us much-needed context to understand and effectively use the techniques that we see in galleries and tutorials. So, let’s get to it.

Q: What made you start your publication? Why do you think it’s important to do?

Andy McMillan: “For the past two decades, we’ve done an incredible job as a community of discussing, debating and sharing, all of which has contributed to driving our techniques and technologies forward at a staggering pace. This is the energy that provided us with the Web standards movement, and I would argue we’re on the cusp of another major shift. Web design is beginning to define itself as less of a technical skill, but rather as a mature and distinct design discipline.

“Our extraordinary passion for prototyping, experimenting, documenting and sharing the how has gotten us to where we are today. But we believe that as Web design matures as a discipline, there is an additional requirement for greater discussion around the why of what we do. The manual aims to give a home to deeper explorations of our work through sharing stories behind the why of Web design and who we are as designers.�

The Manual
The Manual, Image: Andy McMillan)

Nick Disabato: “I started figuring out the ideas behind Distance in April 2011, when I noticed a few problems in design writing. Most long-form stuff was either hyperbolic and incendiary, thin on citation and high on personal opinion, or it involved this hand-wavy, un-actionable “it dependsâ€� kind of conclusion. But it’s possible for writing to take a confident stand without turning into flame bait — by providing justification and offering a way forward. Otherwise, we risk losing something tremendously important about the exchange of meaningful ideas. This is the gap that Distance hopes to help fill.â€�

John Boardley: “I started I Love Typography, We Love Typography and Codex all for the same reason: they are ways to share my obsession with typography. I never imagined that these projects would become so popular. I had no grand plan. And that reminds me: I still don’t. I think these projects are important simply because type matters. And type matters because words matter — whether they are words that inspire (in prose or poetry), words that guide us (wayfinding), beseech, implore, persuade (advertising) — they all matter. Beyond the fundamentals of legibility and readability, the choice of typeface and the typography, the mise en page, imbue those words with a voice beyond words, with a personality that sets the scene. The choice of typefaces is analogous to the music score for a movie — the very same scene made more sober, more exuberant, more frightening, more comical, more beautiful, more inspiring, simply through the accompanying music score.â€�

Codex
Codex, Image: John Boardley)

Q: What have been some of the biggest challenges in getting it off the ground?

Nick: “It’s been challenging to have no idea what I am doing. Let’s say you have this principle: you believe that online discourse is degrading, and that design writing could do better by being slower, more thoughtful and more focused on research. How do you work in a way that fulfills that principle? You’d probably get others involved, because leading by example often carves a niche vacuum on the Internet. It probably involves writing; actually, it probably involves long writing. In order to keep the scope from getting too insane, you’d probably want to constrain it somehow.

“But that’s only the beginning of an avalanche of questions. How do you execute on it? How do authors react to a hands-on editor? How do you make money? Do you sell digital, print or both? How do you market it? How do you conduct outreach without coming off as a shameless, desperate Willy Loman type? How do you handle fulfillment on the print editions?

“All that for well-researched essays about design and technology. Each one of those questions needs to be addressed, because each one is critical to the final success. Every day is a new challenge, a new step forward — all done with the risk that it may never pay off (figuratively and literally).â€�

Distance
Distance, Image: Brent Knepper)

John: “Launching Codex was quite different from launching the blog projects. It necessitated hiring a small team, paying a small team, finding advertisers and sponsors, commissioning articles, finding a printer, a distributor, choosing paper, doing art direction — the list is endless. I guess the biggest challenge is finding the right collaborators — those who share your vision and those who you can work with night and day without wanting to put a hit out on them.â€�

Andy: “Of course, it’s been a lot of hard work, but I think a lot of what we might have considered initially “challenging� was negated by having the first issue funded through Kickstarter. While Kickstarter is a great tool for pre-selling an idea into reality, it’s really much more valuable as a tool for gauging interest and support. While we thought The Manual should exist, and friends agreed, we needed the support of the Web design community at large to know there was demand for a publication like this. Having The Manual successfully funded through Kickstarter let us know that it was something the community wanted, too.

“While there are always a lot of challenges that come with each issue, it’s always worth it in the end. What we have so far are three beautiful books, with some of the strongest editorial ever written about designing for the Web by some of the most exceptionally talented people in our field. We’re incredibly proud of what we’ve produced so far.�

Q: What are some of the high points you’ve experienced throughout the process?

Nick: “The past year of my life has been a ridiculous emotional roller coaster. I haven’t felt “meh� about anything in a very long time. You know the stereotype about startup life being prone to intense mood swings? That applies to Distance, too.

“We funded our beginnings on Kickstarter. Our campaign was funded on a Friday afternoon in the dead of winter, a couple of hours before I was about to leave work and go to a gallery show that many of my friends were exhibiting in. After trudging through snow for a mile, my girlfriend and I walked inside to cheering and hugs in a packed room. I couldn’t have asked for a better way to celebrate.

“Receiving a first draft never gets old. Watching an essay come together is intensely gratifying and humbling. I wouldn’t trade it for the world. I throw down everything every single time one hits my inbox. One time I excused myself from a bar at 2:00 am to read the whole thing outside, without a jacket, in the middle of winter, drunk and shivering.

“And then, of course, taking a shipment of the print edition feels amazing. Carrying 25 boxes full of six months’ hard work by several people is a big catharsis.�

Andy: “One of my all-time favorite memories will always be opening the first box of the first shipment of the first issue and holding it in my hands for the first time. As someone who had, up until that point, only created by pushed pixels and writing code, there was an immense satisfaction of seeing months of work distilled into a single physical artefact. All the writing, editing, production, discussions, emails, to-do lists, Skype calls, arguments, debates, victories and celebrations — every one of them was contained in this thing I was holding in my hand.

“I get emails every day from people who have read The Manual for the first time, telling me it’s changed how they view their work, or motivated them to think differently, or led them to try something different. I’ll never get tired of receiving and replying to those emails. It’s been immensely satisfying to know we’re having that kind of impact with people.�

The Manual
The Manual, Image: Andy McMillan)

Q: What is the purpose behind the publications? What would you like people to do once they’ve read it?

John: “To be frank, purpose is not something I give much thought to. I enjoy making things. If people find value in what I’ve created, then the purpose comes ex post facto. I’ve always believed that if you have the opportunity, you should create what you want. There is no guarantee that what you create will find a large audience, but if it does, then you’ve had your cake and eaten it, so to speak.

“Share your passions passionately; never be condescending; don’t ever present yourself as an expert (let others be the judges of that). Again, when it comes to what I would like people to do once they’ve read I Love Typography or Codex, well, I’d hope that they come out with a richer appreciation of typography; but I have no roadmap for where they should head next. That is best determined by the reader.�

Nick: “I hope people learn from our essays, so that they can be more thoughtful and considerate in their own work. It would also be great if Distance inspired somebody to write a long essay of their own: this model isn’t exactly proprietary, and I happily invite others to participate.

“And if our readers disagree with anything, they should critique the essays. Tell us what you think is wrong about them and what could be done to improve them. We all have blogs — there’s no excuse. And we’d love to hear from you; our essays aren’t complete without your thoughts.â€�

Distance
Distance, Image: Brent Knepper)

Andy: “We’re proud to be part of the conversation, to be contributing to and encouraging further discourse about what it is we do and why exactly we do it. We like to think we’re giving a home to more ideas and contributing to the intelligent, critical thinking around our design discipline.

“This is a conversation that’s been stewing and bubbling up for a good while now, and we’re proud to give a home to part of it. What we hope people do once they’ve read The Manual is to continue doing what we’ve always done as designers of the Web: discuss, debate and share and, by doing so, continue to drive us forward.�

Conclusion

As I wrote and edited this article, reading through the responses over and over, it struck me how lucky we are to work in an industry and at a time where there is so much passion for the work we do. It is inspiring to realize that these authors and publishers do what they do without knowing whether their projects will succeed. And then it all came full circle as it dawned on me that it is up to us as a community to help them succeed, not just by supporting their projects, but by allowing their passion and the words they put out into the world to encourage us to do something about the topics we obsess over every day.

So, maybe what I initially thought was an article about design publications is actually an article about all of us instead. The point is not just that we should have a balanced information diet, but that the real power of that balanced diet lies in the energy it gives us to get started on our own projects. Seek out these nutritious words. You won’t regret it.

(il al)


© Rian van der Merwe for Smashing Magazine, 2012.


Removing whitespace around text fields

Trying to be pixel perfect on the Web is like begging to be frustrated. I try to not worry so much about a pixel here or there, but sometimes you just have to get complete control to make things look right.

Until recently I had never paid any special attention to the exact amount of whitespace some browsers create around textarea and input[type="text"] elements, but then I started implementing a design that required there to be exactly no whitespace around them. And I noticed that browser behaviour differs a bit here, so I needed to find a fix.

Read full post

Posted in .

Copyright © Roger Johansson


Encouraging Better Client Participation In Responsive Design Projects // Design Process


  

Last week at the fabulous Smashing Conference in Freiburg, I gave a new talk, one I’d written just a few hours prior. I chose not to use slides, but instead to speak about three things that I’m incredibly enthusiastic about:

  1. Responsive design is not (just) a design or development problem;
  2. The client participation process is broken;
  3. How to call your client an idiot, to their face.

Here are the (slightly expanded) notes that I made before my talk.

Responsive Design Is Not (Just) A Design Or Development Problem

In all the excitement about responsive Web design over the last few years, someone forgot to tell our bosses and clients, so we’ve been treating responsive design like it’s a design or an implementation problem, whereas in fact it’s as much an issue for business. In fact, it’s an issue for everyone involved: designers, developers, content specialists, the people who commission websites and those who structure the teams who make the websites.

The Traditional Workflow

Here’s a common, if grossly over-simplified, project workflow:

  • Plan,
  • Design,
  • Develop,
  • Deploy.

Into planning, you might roll up content audits, requirements, user issues, wireframes and the like. (Aside: Perhaps it’s because I’ve had too many bad experiences with too many bad UX specialists, but I’ve a problem with any part of the process that limits our potential for great design. This includes wireframes — typically desktop-only wireframes — that are produced and often signed off by a client long before they arrive in the design studio. Nothing is wrong with UX per se, only when it’s prescriptive and not part of a flexible, iterative design process.)

Design is where you’ll find a myriad of creative activities, including graphic and layout design and more. Here, static design visuals — you might call them comps — have been the traditional currency of the visual designer. They’re what designers use to experiment with creative ideas, then exchange with clients for sign-off, and subsequently deliver to front-end engineers as blueprints for building.

Development is likely the responsibility of front-end engineers. I know from experience that engineers often work separately from designers and might have only limited interaction with them.

As for deployment, I know I’m making light of this, but it’s black magic and I simply don’t understand it.

This waterfall-style process is similar to the old-fashioned pre-press workflow that I remember when I worked in pre-digital photography. It took up to seven people to take a transparency from a camera to a color proof. Each person’s work was an opportunity for sign-off, but more importantly it was an opportunity for billing. The same is mostly true of our Web design processes today.

Compare that to what I’ve cheekily been calling a “post-PC responsive workflow�:

  • Plan,
  • Combined and iterative design and development,
  • Deploy.

In this agile-style iterative process, everyone works more closely together, designing, developing, testing, redesigning and refining.

Design Testing and Device Testing

I find testing my designs on real smartphones and tablets while I’m working to be incredibly useful. This means that I have access to several devices. But how can we afford to buy all of the devices we need? This year, Stephanie Rieger wrote about the range of devices we should use. She included iPhones, iPads, Kindle Fire and three different versions of Android. But I think her advice could be misleading.

Mobile phones
Do we really need to own a myriad of smartphones and tablets or do we need just a few to develop an affinity for them? Image: opensourceway.

It’s important to remember that there is a big distinction between two types of testing: design testing and device testing.

Designers need use only a subset of devices, because what matters most is that we develop an affinity for how our designs work on any type of device when we hold it our hands. To be clear, how a menu feels when used on a smartphone is a very different issue from whether it technically works on a particular make or model of smartphone. That’s why designers don’t necessarily need to buy a myriad of smartphones and tablets, just those they need to develop an affinity for.

Responsive Design Requires Rethinking

Businesses (agencies, companies, customers) now need to refactor many aspects of their businesses to allow for better responsiveness. Our clients now need to restructure their buying process. For example, at my agency, Stuff and Nonsense, I still get prospective clients asking us only for static design visuals. They assume we work in Adobe Photoshop, Fireworks or the like and that we deliver static visuals, because that’s what designers have provided them with for well over a decade. That’s why, while many of our clients don’t often expect responsive templates as a deliverable, they love it when they find out that that’s what we deliver.

Design and development teams need to reorganize. It’s a fact that purely visual designers have the most to learn.

Those Photoshop or Fireworks static visuals I spoke about are no longer equipped to provide what we need from them in a responsive context. As I’ve said before, it’s like bringing a knife to a gunfight. More on that in just a minute.

The Client Participation Process Is Broken

I know that most people know me from my writing and speaking about CSS, and some people might not know that I make my living by designing for clients. In the last year, I’ve worked on projects with STV, where I’m part-time the design lead; the Hillsborough Independent Panel, whose report into the tragic deaths of 96 Liverpool fans in 1989 I designed the website for; and the ISO, the International Organisation for Standards.

Every designer should want to make the best work possible, feel proud about that work and make their clients happy. Unfortunately, the ways that designers and developers and our clients have communicated in the past has so often lead to frustration, unhappiness and, most importantly, work that failed to meet everyone’s expectations.


For a designer, sharing regular feedback with clients and involving them in every step of the design process might sound like a risky proposition, but it is necessary and beneficial to the design process — when done properly. Image: opensourceway.

Think of the traditional media that we used to communicate our designs: static wireframes and visuals (comps) that we made using drawing tools such as Photoshop or Fireworks, many of which pre-date the Web. These visuals are like bringing a knife to a gunfight. Think about the aspects of design that a static medium cannot communicate and all of the possibilities for misunderstanding that this creates. Static visuals cannot do any of the following:

  • Display Web fonts or browser font rendering;
  • Demonstrate different browsers’ CSS capabilities;
  • (Easily) demonstrate percentage-based layouts;
  • (Easily) demonstrate animations, transitions and pseudo-classes (states).

When I say “easily,� I mean not without hours of tedious repetition that we could otherwise spend being creative.

This isn’t to say that designing in a browser is always better. Unlike Stephen Hay, I use Fireworks to design atmosphere (typography, color and texture) and to develop fine design details, an extra layer of polish, after all of the sketching and interactive prototypes are done.

Design Atmosphere

What do I mean by “atmosphere�?

Many people continue to mix layout with other aspects of design. How often has a client said to you, “I don’t like the design� when they really meant, “The sidebar should be on the left, not the right�? That’s why we need a new word for what’s left when we remove layout from a design. I call what’s left “atmosphere� because atmosphere is often about something that you feel but can’t explain, like the atmosphere in a room after two people have been arguing, or like the atmosphere at a great concert or football game.

Worse than being inefficient, static visuals set the wrong expectations in the minds of our clients. I wrote about this very thing back in 2009.

Aside: Why are most websites fixed and centred at 960 pixels? Could it be because a designer showed their client a 960-pixel-wide static visual and asked them to sign off on it? That’s what developers have been told to build. That’s why, in the past, we’ve spent hours hacking HTML, CSS and JavaScript to make rounded corners display in old versions of IE. We sold rounded corners to our clients through those visuals. It’s our own stupid fault. No one else’s.


Even small “snapshots” of the design, such as these from Dribbble, can communicate atmosphere — the visual direction, style and overall feeling — of the new website. Images: Fluid Type, Fig. 49 by Trent Walton.

Work in Photoshop and Fireworks, by all means (I do). Make static visuals as rich and as detailed as you want them to be. Just don’t set the wrong expectations by showing them to your clients as examples of how their website might look across browsers and devices or by using them as sign-off artefacts. The same goes for screenshots of Web pages. Set the right expectations by demonstrating interactive designs made using HTML, CSS and JavaScript.

How To Call Your Client An Idiot, To Their Face, Without Getting Fired, And Then Have Them Thank You For It

One thing I’ve learned over the years is that clients love to feel involved in the design process. Sometimes, though, they make suggestions only so that they feel they have put their stamp on the project. I know that occasionally designers think that such requests aren’t necessary and that sometimes they’re stupid. Don’t worry. You are allowed to say that to clients (more about that later), but better still, avoid the issue entirely. Here’s how…

Don’t email pictures of websites to your clients and then ask for their “thoughts.� Are you mad?! In the same vein, don’t simply upload static visuals to Basecamp and expect constructive feedback without providing some direction on how to receive them.

Don’t wait until after weeks of work before having a “big reveal.� Down this road lies frustration and resentment. Instead, keep clients involved at every step, all the way through the design process, and not only at those traditional sign-off points. That’s why for the last few years I’ve tried hard to physically work alongside my clients as often as possible. When that’s not an option, I set up shared Dropbox folders so that the client can check in on my progress as I work. We even keep a Skype window continually open.

Set up the proper environment to receive structured feedback, and then ban all unstructured feedback you might receive by telephone or email. Insist that your feedback sessions be face to face when possible, and then limit their scope to aspects of the design. For example, ask for answers to specific questions about typeface choices and typography.

At my design agency, I help facilitate structured feedback by organizing feedback workshops with our clients. More on those now.

Please remember: you are the designer. You are the person who has been hired to solve a problem that the client either couldn’t or doesn’t have the time to solve themselves. Your solution to that problem is worth a lot to their business, so never underestimate your role, skills and influence in the design process.

With that in mind, remember that you can set rules about receiving the constructive, structured feedback that’s so important to helping you make a great design.

Rule 1

As mentioned, don’t ask for unstructured feedback out of context. Emailing or uploading static visuals just doesn’t cut the mustard anymore. You must control the discussion, so take the time to explain your designs and the thinking behind the decisions you’ve made. I’ve found that, because of this approach, my clients enjoy learning about what goes into making a design and are far less likely to request unnecessary changes simply to put their mark on the project.

Rule 2

Take control of the environment in which you present your designs. Host feedback workshops or design “crits,� and use them to get to know your clients better and to develop a deeper relationship with them. Make these workshops face to face when possible, and set time and scope limits, even if you hold them over Skype. These workshops work best when everyone is encouraged to be honest and to let their ideas out in the open. That’s why, although it may seem a little old fashioned, it’s important for someone to keep a written record of what everyone has said.

Make it clear to your client that only the people who show up to a workshop may have an opinion about the design. This must include even the CEO, who sometimes makes “helpful� suggestions 24 hours before launch (or when you want to get paid).

Rule 3

Remind everyone to leave their feelings at the door, because in a design crit only the work matters. Personal feelings don’t matter; so, inside the crit, frame the conversation so that your clients can openly express their opinions. Encourage them to speak their minds, to be brutally honest if they need to be and to scribble across your notes and sketches to get their point across. By the same token, you’re free to disagree with any suggestions they make. Be free to say the suggestions won’t work, and suggest better alternatives. This shouldn’t be about ego, only about the integrity of the work.

If you feel they aren’t listening, you’re free to call them an idiot, too, if you must. Say it to their face, and don’t worry about getting getting fired — if you’ve established a good enough relationship with them, they’ll thank you for it, too, because they’ll know you have their interests at heart and are passionate about doing your best for them and their business.

(al)


© Andy Clarke for Smashing Magazine, 2012.


Use inherit to reduce repetition of CSS property values

Every now and then you will find yourself having to repeat the same value for a particular property in several CSS rules. Sometimes doing so is necessary, but there are some situations when you can use the “inherit� value to avoid repeating yourself.

In my experience, the properties I use inherit for most often are color plus properties related to background and font (both shorthand and the individual properties like background-color, font-size and font-family).

A few examples, then.

Read full post

Posted in .

Copyright © Roger Johansson


Tell CSS that JavaScript is available ASAP

When you’re styling parts of a web page that will look and work differently depending on whether JavaScript is available or not, it can be very useful to use JavaScript to change or add a class name to the html element.

By doing this you can create CSS rules that will only be applied when JS is available and vice versa. The trick is to make sure the class names are switched as early as possible during page load.

Read full post

Posted in , .

Copyright © Roger Johansson


  •   
  • Copyright © 1996-2010 BlogmyQuery - BMQ. All rights reserved.
    iDream theme by Templates Next | Powered by WordPress