Domain7

On teamwork and personal opinions

Recently I’ve been researching how people with strong opinions (and often differing opinions) can work together as a team to come up with great solutions. I boiled it down to five factors:

1. Unity of vision. Establishing unity of vision within a team is super important. It helps to overcome flame wars and infighting over specific ways of doing things or technologies. If you provide a true north that everyone agrees upon, it’s easier to develop an understanding for team members that don’t share your opinions.

2. Slow to judge. Don’t judge something until you fully understand its benefits and shortcomings—especially in comparison to your current preferences, wherein lies an existing, festering bias. Don’t get defensive and fill up with FUD when someone mentions a new technology or methodology to you. Posture yourself to be excited and eager to see how it could potentially be an improvement. Give it a good shake before drawing conclusions.

3. Eager to learn. This means being flexible, curious, open, and adventurous in your pursuit of perfection. The web changes too frequently for you to be completely myopic or throw the same solution at every new problem. A good way of measuring your eagerness to learn is to look at how much adoption you’ve put yourself through in the last year, and how many questions you find yourself asking. Both of these things should be regular activities.

4. Avoid the Great Philosophical Takeover™. This is the moment where a staunch philosophical stance builds up a religious fervor deep in your soul to the point where it pushes out any pragmatic evaluation of other people’s opinions. It can quickly turn into bitterness, discontentment and belief that “the rest of the world doesn’t see things the right way, the way I see them.” Developing philosophical convictions is obviously not a bad thing, but it’s more helpful to the rest of the team (and to yourself) if you rid them of dogma and myopia.Be “open source” in your convictions—be open to having them changed by other peoples’ contributions. I’m not suggesting we go wherever the wind takes us, but that we’re not relentlessly dogmatic to the point where objective evaluation goes out the window.

5. Your fate is tied to your teammates. It’s like a three-legged race. Your ability to run fast and be amazing by yourself won’t help you win. You have to work with your team. If you’re faster, you may have to push others to go faster. But you also may have to slow down so you can synchronize your pace. A good expression is “make the others good”. To succeed for ourselves, we have to work to bring out the best in others. This involves encouragement, suspending judgment, or asking tough questions and challenging others. We’re a team and our success is tied to our teammates.

My thoughts: Growing without middle management. Part 2

The Globe and Mail recently featured Domain7 in an article focused on building teams around creativity and flexibility, instead of creating a level of middle management. We’ve grown quickly in the last five years, but have worked hard to preserve our culture of community and collaboration. I think that’s largely what makes Domain7 such a great place to work, and what helps us produce great results for our clients.

A few weeks ago I posted an initial response to the article and promised to follow up, explaining our approach. At D7 we’ve always put a high priority on collaborative work, but as we’ve grown we’re putting much bigger emphasis on the role of skilled teams.

Here are some of the pitfalls we hope to avoid through this team approach.

• People management overemphasized - If you perform well in a team, does your next step need to be people management? We want to build a team where individual skills are valued and continually improved. By making the career path primarily about stepping into people management, we undermine the value of the excellent practical work we love to do.
• Power rather than influence - In a growing team, making change happen can be challenging. Many will take the easy route, relying on authority and power that come with a title. The problem is: people in authority don’t have the corner on great ideas. If you have to rely on your positional authority to get things done, something’s broken.
• Creative output needs space - as Daniel Pink, Gary Hamel and others have articulated, our time and the type of work we do require creative, emotional, and very engaged thinking. Although creative environments need good structure, hierarchies designed for compliance and restricted work environments are not going to deliver over the long term.

With these challenges as context, we’ve created what we call “Discipline Teams”. By “Discipline” we’re referring to the different skills and crafts we have on our wider team—things like strategy & storytelling, front end development, custom development, design, project management, etc.

In the past few months, we’ve spent time as teams focused on developing the skills and tools in each of our areas in a structured way.

And we’ve already seen the benefits:

• Deeper skills + increased creativity - We know we can always improve and learn, but we now have a much better forum to challenge each other to develop. And by not just going off and learning on our own, the greater team—and ultimately, our work—benefits from each person’s individual insights.
• Much more space - As anyone in a busy business knows, there’s not always the time and space to focus on the business because you need to be working in it. In our creative economy, that’s not enough. Our new team approach gives us the chance to spend more energy working on how we do what we do. And it means we see benefits of better work almost immediately.
• Richer accountability - In the new teams, we’re responsible to each other. It’s a commitment to working together as a group. The teams as a whole report back to all of Domain7. It produces a type of accountability that is not prescriptive or narrow, but still gives the rest of the team a chance benefit from hearing and seeing the results.

Just a couple months in, we can already see the difference that focusing on our disciplines makes. We still have lots to learn as we evolve our teams, but I think this is one approach to building a highly creative and flexible team that we won’t soon give up.

What's Wrong with Your RFP?

Recently I was looking through a recent slough of Requests for Proposal (RFP) and was reflecting on the misalignment of the request and the heart of the need.

Businesses are asking for professional creative, marketing, and web engineers to come to the table to help them reach and engage their customers. The form? Often a tactical and prescriptive document that removes any ability to apply creative approaches for thinking outside of the box.

I’ll use the analogy of an interior designer, as my wife has us watching way too much reality TV lately. People on those reality design shows are asking professionals to style up their home as they personally lack that expertise. They know their financial reality and what they like, but they bring in the professional to dream and deliver, within their parameters.

I would love to be approached, through an RFP, with a request to provide ideas in which we as a company could make a difference for a business. To ground the response you hope to receive, give me context and research, instead of a list of requirements. What are the organization’s business goals? What are the current marketing strategies and plans? And what research has been done with your customer stakeholders? I think an open request for ideas and strategies would promote creativity in the RFP response. The provision of research would solidify those ideas within business context and reality.

If creativity is removed, and tactics are decided already, it begs the question for me: why ask for external assistance in the first place?

Lessons from a Scrappy Underdog

Everyone’s got an opinion on Google+ today, so I thought I would stay out of the fray… way out.

I’m a Saab owner. Saab’s recent struggles make me proud of my car. To put my comments in context, this is worth a read: Inside Saab: Back to base

Saab, the iconic car brand, has innovated and led the industry in so many areas—even when it was under the wing of the behemoth, GM. Perhaps it’s because I lived in Sweden, or maybe because I’m a lifelong Canucks fan (used to rooting for the underdog), but whatever it is, I’m now on my second Saab 9-3 and you still can’t wipe the smile off my face when I drive somewhere, even for the most mundane errands.

You would think, then, that when the company, now independent and small, struggles to make a go of it, I might get embarrassed and ready to jump ship to avoid association. Anyone still wearing an “I heart BP” shirt? It can’t get much tougher than the past couple weeks—Saab came to the verge of not meeting payroll. Luckily it looks like the scrappy company is ignoring the odds and making good progress on building a long term solution.

We’ve all felt it: the web magnifies both the effect and the opportunity in tough circumstances. Bad news always travels fast, but in the era of the social web, the worse it is, the quicker it travels. And we seem to be approaching instantaneous speeds!

This post by Saab is a great example of a company receiving a brand boost through living and breathing an open and transparent posture—particularly in the midst of a tough situation. The web enables this like never before. As I said, after reading it, I’m more engaged with the underdog survivor brand than I was before; more sympathetic and on-board.

But I think the real win is not this particular message they sent out. It’s the thoughtful and intentional decision Saab made just recently, under it’s new ownership, to embrace its community in a new way, online. They hired one of the community’s loudest members and invited him inside the walls to lead their transformation—from a formal press release culture, to a web paradigm. Now Saab engages in real-time, transparent and open communication with their customers.

Sure, if a crisis hits, many people can write a great “open letter”, but I think we’re naive to think it will have much impact if it’s also a “Hello, my name is…” letter.

Saab, small and unconventional as it is, needs every arrow in its quiver. I’m sure they’re now glad they made this move, and it’s a powerful reminder of the value of building a strategic and structured approach to social and web engagement before you need it.

Project Management With Soul

(How to keep your projects human)

Meet Frank—he’s my father-in-law. During his time as an electrical engineer for BC Tel (and then Telus), he was responsible for planning the fibre-optic cable routes that now bring internet to 80% of British Columbia. His vision for a connected BC came at a time when early adopters were still on dial-up, and Frank’s ability to shift from a high-level vision to a minute level of detail is what defined his projects.

But if you ever travel with the man, you’re in for a ride.

From the moment the trip is meant to start, he’ll be idling in the packed van (which has been ready since 5 am), lingering in the driveway waiting for you to finish up in the washroom, maybe honking the horn as you shove on your shoes and stumble out the door.

Then there’s the travel. Have you got your passport? Where’s your bags? Where’s the lineup? What time is it? The whole family throws its whole weight into trying to calm the man down and prevent him from having a stroke in Gate 32. By the time you arrive at your intended destination, your hair has been blown back and your arms are shaking from the stress of it all—but I promise you this, you’ll be there on time.

Project Managers, we are sometimes guilty of the same behaviour. We possess an otherworldly ability to plan, with an uncompromising attention to detail. But what I wonder is this: we can get there on time, but has our family survived?

On your projects, will the client work with your company again? Will they refer you? Is the team proud of the results? Did they burn out during the process?

Being a PM is about managing the experience of the project, not just the outcome. You’re setting the mood, you’re maintaining the flow of the project, and you’re sensitively taking care of your team and the client.

Here are a few of my thoughts on the peripherals of project management: how to get the job done in a way that keeps all participants unruffled, unflustered, and unharmed.

PS - Frank’s an awesome dude, the family’s perfectly intact (maybe a little travel-averse), and he has given me permission to use his story as an example. Just in case you were wondering.

---

1. Plan your trip

The best service you can offer to the client and your teammates is being prepared: make sure the team is booked for the right time periods, that the technology is well-planned, and that the work will flow well between team members. Do your best to ensure there are no surprises.

Are you the expert in the topic area you’re working on? Will you know every stop along the way? Probably not. You’ll need to ask questions early to plan properly: on a web project, this likely means engaging team members to dig into the details and fill in the blanks.

The beginning is also a good time to declare your communication plans to your client. They shouldn’t have to be the ones to ask “are we there yet?” —it’s your job to tell without prompting. Let clients know when they’ll be hearing from you, and provide status reports at regular intervals.

2. Learn what makes this project special

At the end of a project, success is often evaluated on the basis of whether or not it went according to plan. If the answer is “Yes, we stayed on track,” mission accomplished.

Yet interestingly, that’s rarely what clients look for when evaluating success. It’s not just a matter of hitting the schedule: following the schedule is just the baseline they assumed you’d achieve anyway, not the criteria for success. If I asked how your vacation was, and you answered “we stayed on the right roads,” I would not think you had a great trip.

This project is special to your client, so it should be special to you. You might be managing several projects, but it’s (probably) the only web project your client is on right now. So before you start, get to know the project. Learn what makes this route, this trip, this project special for your client. Dig in into any and all ancillary material that’s been created for the project—the proposal, the strategy documents, the sitemap. You’re going to be the face of this project for the next while, so be as engaged in it as you can be.

3. Make it personal

The client has to deal with you on a weekly basis: you might as well help it not be dreadful. Don’t get stuck in robotic business-mode, and don’t be a jerk. Take the time to tell stories, ask about their own lives, share opinions, even take a risk and tell a joke. If you get to know each other well enough to care about each other a little bit, two things happen: they will get better service out of you, and you’ll get more respect and courtesy out of them.

4. Build hope, not hype

A happy client is one whose expectations were met. You’re the one who can help shape those expectations. Don’t hype it up, accidentally encouraging them to imagine an impossible-to-build site that will dispense ice cream and solve world hunger. Build genuine, informed excitement for what’s to come. It’s the difference between hype and hope.

You don’t want a client to end up expecting the impossible, waiting for a dream that can’t be delivered. Try to trim phrases from your vocabulary that inflate expectations. Don’t make promises you can’t keep.

Be honest with progress reporting; be truthful about risks and issues. No, this doesn’t mean making the client fear the project’s off track or is somehow going to be really poor. Be genuine about your enthusiasm for the project. Build momentum, infusing the project with energy at any touchpoint you can.

5. Communicate with care

Take the time to craft careful, artful emails. Writing excellent emails will prevent misunderstandings, build goodwill, and make the project go smoother. As you write and edit every email, ask yourself:

• Can I say this in fewer words?
• Can I organize this so the important text occurs visibly and early?
• Is it clear what action I expect from the recipient, and when?
• Is it human enough?

If you need more time in order to craft that draft, tell them. Will you be able to give them a more thorough response to their email later this afternoon? Send a quick note letting them know, so they’re not left guessing. Do it efficiently: If somebody needs an answer, a decision, or information from you, close the communication loop quickly to not leave things up to assumption.

6. Be meticulous

Be absurdly, unreasonably meticulous—when it counts. When it comes to documenting requirements, checking the facts, writing status reports, making promises, setting dates, there’s no point in being sloppy. Back to the travel metaphor, the doors are shut properly, the roof-rack is properly affixed, and you’ve got all your travel documents in one place. Don’t leave room for “I forgot that” or “Oops, I should have added this.” In some parts of the PM’s job, it’s basically a matter of public safety to do what it takes to do the work thoroughly and tightly.

7. Create space for beautiful moments

On a project, there are moments when breakthroughs happen. When tough challenges are met with brilliant insights that meet exactly what the client needed. It’s the spark of innovation and beauty that we creative agencies keep trying to bottle up and sell.

These beautiful moments only happen when the team is given the tools, the space and the permission to work at their best.

What does your team need in order to work well? I would suggest you ask them. On every project, get to know what helps your team shine. Listen. Ask questions. Observe styles and preferences.

There’s a few things that are common across most team types and team members that might consistently apply for all projects:

• Have you provided clear expectations? Does your team know (specifically) what they’re expected to do? Have you provided all known limitations and requirements?
• Is the timeline realistic and clearly communicated? Will there be enough time for them to do what you’re asking?
• Are you available and checking in? Not being a pest, but providing a presence that lets them know you’re there to help.
• Do they have the right knowledge of the client, the industry and the challenge? Can you help them feel a sense of ownership and engagement?

Try to set your teammates up with the freedom to innovate, and the best chances for success.

8. Bring it back to the goals

Since you learned what makes this project special back in point number two, one of your biggest contributions as a PM is to help anchor the project in the client’s original strategy. If you know what will make this project a success for the client, ensure that everything you touch is pushing the project in that direction: your schedule, your status reports, your phone calls. If you’re tuned in to what the client’s true business goals are for this project, you’ll be in touch with that crucial piece of success criteria.

What’s a Web Designer?

Remember when the job description for “web designer” was “I will design and build a website for your dad’s stump removal service” or something similar? Ten years ago was a much simpler time for web designers. As our industry has matured over the years, things just aren’t that simple anymore for the makers, who don’t have the capacity to do everything, and for the managers, who have to oversee larger and larger teams.

Web design in general isn’t simple. There are several different disciplines that come into play to design a great website. It’s like a grab bag of disciplines from other visual industries: typography, interface design, graphic design, user experience, and even motion design.

On top of that, the web design industry is a perpetually moving target into the foreseeable future.

We’re currently in the middle of a huge shift from designing for desktops to designing for mobile web (not an expansion, but shifts in user behaviour), and it feels as if everyone’s scrambling to learn or develop opinions for this new incarnation. At best we can speculate what will be around the corner and do our best to prepare for the next big thing.

So the question is: given our current set of skills and the amorphous unknowns of the web, what should web designers enrich and specialize in, and what should we be required to know?

Here are my thoughts.

Skills every web designer should have:

• Basic best practice front-end programming (Semantic HTML, CSS and some Javascript).Ryan Singer of 37signals says “UI literally ‘interfaces’ between two things: software code and the human eye/brain. The whole purpose of UI is to connect code on one side and human senses on the other. So I don’t think it makes sense to call oneself an interface designer unless there is at least an understanding of how programs work, how databases work, and so on. Otherwise what is the design interfacing to?”
  
  If you are designing for the web, you should have a good grasp of the underlying technologies that your designs are interfacing with. It’s incredibly helpful to know how something will be built while you are designing it… to know the limitations and the innovations that will be used. Not knowing this is like designing a skyscraper without knowing what materials it will be built with.

• Strong knowledge of typography. Most of the web is written language, as Oliver Reichenstein wrote about back in 2006, so in turn we should have a strong knowledge of typography. I recommend reading The Elements of Typographic Style by Robert Bringhurst and Stop Stealing Sheep by Erik Spiekermann and E.M. Ginger.

• Interface design. If you’re like me, most of my knowledge of design, starting out, came from the print world. But people use our creations, they don’t just look at them. A great book on interface design is Designing with the Mind in Mind by Jeff Johnson.

• Good understanding of the creative process. This is an extremely broad category, but there should be a general hunger for learning creative processes, especially in the tradition of graphic design. Thinkertoys is a great high-level place to start for creative thinking and process.

Principles every web designer should have:

• Content precedes design. As Jeffrey Zeldman said in his recent keynote at An Event Apart in Boston: “Design without content is decoration.”
  
  It’s nearly impossible to create the best design for the content without the content. The content informs the aesthetic, layout… everything. The less content you have to design, the more guesswork and uncertainty you’ll be forced into. A good way to draw a line with this is to refuse to use Lorem Ipsum if at all possible.
  
  Designing for progressive enhancement is about making users happy. Don’t snub users that are less tech-savvy than you. The user experience you create should reach as many people on as many devices as possible. This usually means designing specifically for different screen sizes, either as separate code or responsive design.

• Be an early adopter. This goes for anybody that deals with the web, but if you hear about such-and-such being the next big thing, pounce on it, get plugged in and use it. Get the early beta. There are myriad reasons why this is valuable, but the biggest is that web technology is moving too fast not to. The earlier you get plugged into something that ends up going far, the more leverage and expertise you have in that community. If it doesn’t work out and doesn’t massively reorganize culture, you still have gained some insight and a pulse into what new companies are doing on the web.

• Don’t get overzealous. I think this applies more severely to programmers, but there’s a constant temptation upon a discovery or a mastery of something to believe that one specific way is “the only way”. But this overzealousness can really hamper a designer’s ability to provide the best solution for a problem. Stay at an objective distance from trends so that you’re not forcing the trend where it doesn’t belong. Not every problem is solved by adding noise to the background and using Univers Condensed for headlines.

Thoughts on Specialization

In terms of specializing in a specific aspect of web design, it’s important to work within your strengths, but be proficient in the essentials. Depending on how we analyze our strengths, this process can have the effect of encouraging us to limit what we know.

But I like Matt Perman’s definition of strengths and weaknesses: “Your weaknesses are the things that make you feel weak, and your strengths are the things that make you feel strong.” This perspective paves the way for a lot more growth than just going through your skill set and checking off the areas you feel you’ve somewhat mastered.

So working within your strengths means working in the places that give you a lot of gratification and a large sense of accomplishment at the end of the day. What you specialize in should stem from that. This allows you the freedom to expand your skill set into areas of programming, marketing, etc. that could have a significant benefit you currently aren’t aware of in your design work.

In general, I think the scope of what a web designer is and does isn’t necessarily shrinking, but becoming more clarified and fine-tuned as time goes by. We’re on the verge of seeing the masters of web design being set apart, not by the visuals they create, but by what they know and how they apply that knowledge. The sea of people new to the industry that can browse Dribbble and mock the latest trends is vast and growing. Proficiency and excellence comes from a thorough understanding of underlying principles, good communication, and an adventurous willingness to learn new things.

The World's Worst Project Manager

Tips on good project management are as common as pre-printed Royal Wedding memorabilia, and they’re just as useful, too. After all, if project management was just about following instructions, we wouldn’t have construction projects going years beyond deadlines or Fast Ferries being sold for scrap metal.

Fact: Nobody knows what a well-managed project looks like. When it happens, it’s virtually invisible. Since it caused no delays, broke no budget, and made nobody angry, there was no reason to even notice it. It’s like a polite dog or a car with a good muffler—so harmless and tame nobody even bothers talking about it.

Now, a poorly done project, there’s a case study we can learn from. It’s loud, noisy, and fails spectacularly, like a celebrity in a tailspin. Show me a project manager doing it wrong, and I’ll have an example of what not to do.

For those of us who need to see it broken in order to know how to fix it, here is our guide: tips and tricks for becoming the world’s worst project manager.

1. Say yes to everything When a client suggests a neat technical idea but you’re not sure if your team can do it, say yes. When you’re asked if the project can be delivered two weeks earlier than planned, say yes. When the client wants to add more features to a project that already has a defined scope, say yes. The answer is always yes.

2. Always assume Not quite sure what’s needed? While you might be tempted to clearly define the requirements, this time, just take a stab: guess intelligently at what the requirements are, and then get the team started right away. The client will thank you for your intuition and sensitivity.

3. Avoid hard conversations If a red flag pops up, fiercely cram that back down into your subconscious. If there’s any area of concern, a hint of the project being delayed or running into trouble, enter lockdown mode and lower the blackout blinds. Do not acknowledge the issue to yourself, and do NOT tell the client about it. If you ignore it, it will go away.

4. Don’t bother the client Your goal is to stay out of the client’s inbox, off their caller ID, and clear of their voicemail. They less they hear of you, the happier everybody will be. What, are you some kind of needy, desperate person that you need to be talking all the time? They probably get enough emails. If you’re following steps 1–3, you shouldn’t need to talk to the client anyway. Stay out of their hair, just update them when the project is done.

5. Just talk to your team when you need something Stay away from trust-building scenarios like lunchtime conversations, jokes/humour, small-talk and/or banter. Do not engage in questions about your teammates’ spouses, families, weekends, hobbies, vacations and/or recent movies seen. And please do NOT attempt to get to any sort of place where one of your teammates would call you a friend. Better to talk to them only when discussing work assignments.

6. Work on whatever’s in front of you Whatever’s in your inbox is probably the most important. Discard everything else: plans, schedules (schedu-what?), calendars, forget it: if somebody’s asking for something urgently, just do that work (they know best). The less you look into the future, the more you can live in the present. Carpe diem, PM.

7. Procrastinate If you’ve got the nagging feeling there’s something you’re avoiding, good—it’s a dangerous world out there. Nurture that feeling, feed it so it grows like an infant, tend to it gently like a campfire. Gaze into the comforting glow of your Twitter stream, find your friends again in the fields of Facebook, or graze casually in the pasture of your RSS reader. Creating a warm, lazy glow of avoidance to shield you from the unwelcome icy blasts of real life’s blizzards. The door is closed: the wolves are howling outside, but procrastination is safety.

8. Just wing it Projects practically manage themselves these days. There’s no real reason to scribble out next steps or let the team know what happens after next week. Just take it one day at a time, that’s our motto. Tomorrow will take care of itself.

9. Bask in the drama and glory of emergencies Once you’ve let your non-planning, procrastinating ways climb up the walls of your psyche like an overflowing dam, it’s time to savour the dramatic panicky reactions required to handle the flood: just freak out. IM people frantically, interrupt their work, send high-priority emails—nothing is more important than you right now. You’re the star. Plus, now that you’ve manufactured a good old-fashioned emergency, you are quite justified in ignoring everything else for the time being, right in line with steps 5-7.

And there you have it. Nine field-tested techniques to turn you into the world’s worst project manager.

Now you know what NOT to do. What would you add to the list? Have you witnessed (or possibly even committed) some of these rogue acts of PMing? What happened?

And jesting aside, next time we’ll talk trick and tips for surprising and delighting your clients. Stay tuned!

Front-end Development Strategies for a Diverse Browser Landscape

The number of platforms, operating systems, screen sizes, environments and even contexts that users experience a web site in a browser has expanded and changed significantly since we created our first animated gif hosted on Geocities. It’s hard to believe that yahoo.com was table-based, using <center> tags and was 760 pixels wide when the first generation iPhone was released in June 2007. A lot has changed.

First of all, web technologies over the last few years have made a significant departure from browsers all-together. As I write this, my family is using the internet to watch the Cosby show on Netflix through our PS3. I haven’t visited twitter.com in ages because I much prefer their desktop app. We visit blogs less and less in favor of media coming to us, many times through apps outside the browser like Reeder.

But we still use browsers a lot, no question. Google’s taking a very different approach than Apple in the way they want people to use the web by bringing everything into the browser with ChromeOS. Most small businesses need a simple site that works in a variety of platforms, contexts and environments, and that’s it. But even that’s it can be a difficult task.

So where does this leave web designers and developers? How do we ensure that our lovingly crafted work performs great for all users in all of their various environments? I think we all agree that the short answer is we can’t, but there are some approaches that can greatly benefit our users and clients, and reduce our own headaches.

1. Gauge your target audience to decide how thoroughly you should debug versions of Internet Explorer

Chances are that for most projects a good chunk of your traffic is still using IE6. I know, it’s 2011 and Facebook dumped IE6 back in August of 2010. But the 20% of your visitors that are trying to figure out why a paperclip pops up when they start typing in Word (depending on your target audience) didn’t know Facebook did that and don’t care. Try to get out of the techno-bubble and make sure the information and usability of your site is adequate for the least tech-savvy people in your target audience. This is significantly more important than getting on a soap box about the semantic web and how css3 transitions and the canvas element will kill Flash by the end of the week. It doesn’t have to be the same design at the pixel level, but it shouldn’t look broken either. You can use “please upgrade your browser” prompts, but don’t rely on them to get away with a site that’s unusable in IE. There are folks out there that either don’t have a choice since it’s a business machine, or don’t even know what a browser is.

If your target audience for a project is pretty hip to the snip on the web, you can likely relinquish even more details for IE users, since the significantly small margin of your audience that uses IE probably came to the site through a link or a search and isn’t directly interested in the content. The level of graceful degradation you adhere to is different depending on your target audience’s web experience.

2. Yeah, media queries are cool, but…

….there are a million ways to conditionally change information, layout, design, etc. for users who come to your site from various mobile devices. Media queries are just one of many tools at our disposal for presenting “responsive” web sites, to coin the trending phrase. Many times it’s best just to serve up different code by running a server-side conditional that looks for the browser and platform, since a site needs to be significantly faster with less http requests in a mobile context. What good is a media query that just hides elements if the site is still as slow as molasses on a 3G network?

3. As much as you can, debug all the browsers your target audience will use at the same time during front-end development

I started doing this about 2 years ago, and will never go back. I just got sick and tired of searching for an element or nondescript javascript error in IE. I can’t tell you how many headaches I’ve avoided by going through this workflow:

Create your markup all the way through for a given page before doing any css. This helps to ensure that your markup is as clean as possible since you’re focused entirely on the semantics

Style one element and debug that one element for all browsers to the level you feel is appropriate for your audience. Add elements to the markup only if they are absolutely necessary, and only if they are semantically acceptable.

If you need to do some scripting, write a bit of javascript and debug that one chunk of code for all browsers before moving on.

Repeat numbers 3 and 4 until your css and javascript is white hot and ready for prime time regardless of what browser your visitor is using.

Send off for review with the assurance that everything works as it should in all the browsers it should.

Have pity on the people that are searching through a hundred lines of jquery for a missing semicolon that breaks a site in IE but works in everything else.

4. Use the latest technology first

If you follow the workflow described in number 3 above, it can really release you to play around with the latest and greatest css specifications and html5 markup, and there are some great tools for bringing more archaic browsers along for the journey with some of the more common css3 styles (CSS3pie, modernizr, html5shiv). You should be as forward-leaning as possible in this regard for a number of reasons. For the best browser rendering engine (Webkit) and fair ones that at least recognize a good chunk of the css3 specification (Gecko, Presto), using css3 can significantly reduce the size/weight of your site. It goes without question that it also greatly increases the speed of front-end development. Pushing the latest technology in your development is also a very good thing for the overall progression of the web technologies. You’re encouraging things to move forward. You’re learning the tools and skills that everyone will be using 6 months from now.

5. Consider the context before making radically alternative site design and functionality for mobile browsers

Unless there’s a very clear situation where your visitors would use your site in a mobile browser on a consistent basis, just make sure at the bare minimum that your site is usable in a mobile browser. If there is a specific situation/context where your users would visit your site often in a mobile browser, consider whether it would be even more useful as an app, or at the bare minimum that its interface within the browser feels intended and comfortable for mobile use.

6. Don’t start with following the trend. Start with searching for the greatest solution.

The web offers a vast ocean of opportunities to innovate and be creative. It’s good to have and develop technologies and standards like HTML5 that attempt to ease the burden of developers by providing consistency and predictability and creating cohesion between devices and platforms. At the same time, there really, really are no rules on the web. If you think of a better way to build something that proves to have great qualities (useful, reusable, lightweight, easy, framework/language agnostic, etc.), go for it, even if it flies in the face of the latest trend. This is especially true if you see that a trend is actually a very poor choice, and that there are several much better solutions out there. It’s beneficial for the web community at large for you to be creative, experiment, and share your solutions.

Internet 101: DNS, Registrars and IP Addresses Explained

At a glance, navigating to a website is a simple and straight forward process. You type a domain name into a browser and, bipidibopidiboo, you’re at your destination. But what goes on behind the scenes is a complicated relay of communications between several different systems. As your website needs grow and evolve there will come a day when some tech geek is going to ask you about how your web services are configured. Here’s a little guide to help you make sense of the babble coming out of the geek’s mouth.

Domain Name Registrars

When you acquire a domain name, you purchase it from a Domain Name Registrar. The Registrar is responsible for keeping track of two critical pieces of information; who owns the domain name and where the DNS (Domain Name System) servers are located.

You can find the details on your own domain name by doing a “whois lookup”. http://DNSstuff.com provides a good whois lookup tool. Just type your domain name into the whois lookup field and press Enter on your keyboard. You’ll find your Registrar and DNS servers listed in the results. For example, if you registered your domain name through Domain7 your registrar would show Enom Inc. and your DNS servers would likely show something like dns1.domain7.com and dns2.domain7.com.

DNS servers are like the translators of the world wide web. They take human readable domain names, like Domain7.com and translate them into a machine readable IP Addresses like 64.69.90.196. This series of numbers is used by web browsers to find the location of your web services within the amazing network that is the internet. Your DNS servers are responsible for steering traffic to both your website and email system.

In most cases your website hosting provider will also be your DNS provider. When you move your website or email services to another server or provider, you will need to update your DNS records. When you move your website to a new web server you will need to provide a new IP for the DNS A Record. When you move your mail service you will need to update your DNS MX Records. You may even need to use a new DNS provider altogether, in which case you would need to work with your Domain Name Registrar to update your domain name’s DNS server listing.

When making changes to your DNS settings, the change will often take several hours to come into effect. This is because different 3rd party systems around the world store your DNS settings in their records for quick reference and it can take some time for then to update their records. This updating delay is commonly referred to as propagation.

Web Servers

Web servers are responsible for housing the files that make up your website. Website owners who have access to their website files will usually access the servers using the File Transfer Protocol or FTP access.

Email Servers

Arguably the hardest working machines on the internet, email servers are responsible for taking in all the emails directed at your domain names, scanning them for viruses, rejecting spam and sorting them into the proper email accounts. Emails will remain on the email server until they are removed by your email client (outlook, mac mail, thunderbird, etc.) or they are deleted through an online webmail interface.

Your email services may or may not be provided by the same provider as your website hosting services.

Though this is an overly simplified illustration, when we tie it all together and it looks something like this:

Maintaining the relationships between the various systems that keep your website and email running is a complicated process and shouldn’t be tackled haphazardly. Making the wrong move could result in several days of downtime for your website or email services. Most critically, be sure to consult with an expert before making any changes to your DNS or Domain Name Registrar settings.

Building Brands

We make websites. But what we are really doing is building brands. We build sites as an important brand touchpoint in an overall branding strategy. To build a successful website, it is so important to understand branding.

The Modern Brand

A brand identifies a product, service or organization.

We probably first associate a brand with the mark placed on cattle to establish the identity of the owner of individual animals in a herd of cattle. Throughout history, many different devices have been used as symbols of ownership, authorship, allegiance or relationship: flags, coats of arms, tartans, seals, signet rings, and signatures.

We all need to be able to select and purchase products and services from many competing vendors. The selection process can be difficult when there are many similar offerings competing for our attention. When we buy products and services, we often buy based on habit. We put trust in brand names. In our modern global economy, the brand has become the primary means of identification and differentiation to help consumers in making purchasing choices.

What is a Brand?

A brand is the idea behind a name.

A brand answers the question represented by the word, “who.” The word, identity, perhaps comes closest to the idea of what a brand is. It represents everything we know or have experienced in relationship with a person, place or thing.

Brand is the promise, the big idea, and the expectations that reside in each customer’s mind about a product, service, or company.

Alina Wheeler, Designing Brand Identity

What is a Brand Identity?

Brand identity puts a face to a name.

A brand identity translates the idea represented by a brand into tangible artifacts — something that can appeal to the senses. A brand identity is a means of leaving a tangible impression, which becomes recognizable with repeated encounters. People leave an impression through their face, their voice, their mannerisms. Over time and with repeated encounters, we learn to recognize a person by these features, by their personality. A product, service or company also needs to be recognized as being different and unique. A brand identity is used to create a first impression, then to reinforce an identity that differentiates it from similar things in the same environment.

Elements of a Brand Identity

There can be many different elements to a brand identity. A brand program defines how these elements can be used and applied to maintain quality and consistency of design and presentation.

• Symbol
• Logotype
• Tagline
• Signature
• Colour
• Typography
• Sound
• Motion

Brand Touchpoints

Brand touchpoints are applications of the brand identity to artifacts.

A minimalistic understanding of a brand identity may consider a logo design and its application to letterhead and business cards. However, successful brands are built over time with the understanding that branding is the process of developing a relationship based on repeated encounters between consumers and the artifacts and individuals that represent the brand.

Each impression or encounter with the organization has the ability to increase or diminish the value of the brand. The value of the brand increases over time as positive impressions are created, greater awareness is generated, and relationships are built and maintained. If we speak in accounting terms, brand equity increases when positive experiences with a brand accumulate as a result of a brand’s ability to meet the needs and desires of a group of clients or customers. Each touchpoint can then be referred to as a brand asset, adding value to the overall perception of the brand. The value of a successful brand can be assessed in actual monetary terms.

Design increases the value of the brand by creating and maintaining standards for the application of the brand identity to each artifact. The quality of a brand is enhanced by considering each artifact in terms of a unified visual language that can be applied with attention to aesthetic details that create an impression of quality and consistency throughout the brand design program.

• Trademarks
• Letterhead
• Business Cards
• Envelopes
• Fax
• Note Pads
• Announcements
• Invitations
• Cards
• Presentation
• Folders
• Brochures
• Invoices, Purchase Orders and Receipts
• Business Forms
• Packaging
• Posters
• Newsletters
• Annual Reports
• Social Responsibility Reports
• Signage
• Advertising
• Direct Mail
• Point of Purchase Displays
• Uniforms
• Vehicles
• Exhibits
• Presentations
• Ephemera
• Website

Brand Standards

Creating and maintaining a strong brand is an active, ongoing process.

A brand is developed through a unified effort involving every person who represents that brand. It is essential that each person and each touchpoint reinforces a consistent image, voice and message in order to increase brand equity.

A brand identity standards document communicates guidelines and policies for ensuring the consistent application of the visual design elements to every touchpoint used to represent the brand to both employees and the public. The document catalogues the brand assets, available in various formats for use and reproduction in a variety of media, and the general rules that define how each brand identity element should be applied.

Brand Assets

Managing brand assets is an important part of the process. More and more, the management of brand assets is being facilitated by the development of a website that can serve as both an online brand standards document and a repository of brand assets, reproduction files and formats, and image libraries.

Branding on the Web

When working with a web agency, it is essential to provide the strategists, writers, designers and developers with the content and resources necessary to effectively translate an existing brand to the medium of the web. The skills required to build a site are multidisciplinary, and the effort must be coordinated with a proper understanding of the audience, the goals of the site, the positioning of the organization in the competitive environment, the content strategy and information architecture, and the standards and guidelines for brand assets, typography, colour and imagery. Designers should have access to as many of the existing brand touchpoints as possible in order to analyze the existing visual identity and properly translate these elements to the web.

Brand Requirements

To properly translate a brand to the medium of the web, a strong brand provides a framework and a library of assets to aid in the design and development of the site. The goals and objectives of a site will determine the minimum brand requirements. If any of these minimum requirements are missing, an effort must be made to create these assets, outside of the scope of the contract to build the site. While the following assets will not be required for every project, the following list provides a common baseline for many site design projects.

Brand Identity

• Brand Name
• Trademark
• Site Name
• Tagline
• Symbol
• Logotype
• Signatures
• Colour System
• Typography
• Messaging

Content and Design Assets

• Content Strategy
• Copywriting
• Positioning Statement
• Image Library and Visual Style Guide
• Other Assets and Resources

The following assets and resources are optional but will be very helpful to develop the information architecture and establish an appropriate design direction.

• Content Inventory
• Brand Standards Document

Branding Strategy

An effective website is a single touchpoint, albeit a very important one, in a wider brand strategy, a plan to create and manage a library of design assets and champion the implementation of the brand standards and guidelines. If a site is designed without a strong brand strategy, the site will likely be designed to fail. To succeed, make an effort to help develop a brand for your site that can be carried forward into a fully-realized brand program.

Set yourself apart from the competition by building a strong brand, because strong brands build strong companies. Brand design is the first step to building a successful site.

For a good reference about developing a successful brand, find the book, Designing Brand Identity: A Complete Guide to Creating, Building and Maintaining Strong Brands, by Alina Wheeler, and published by John Wiley and Sons, Inc.