I know we cant. But I wish we could.
Chris Coyier at CSS-tricks.com has built a j-query plugin to block Internet Explorer 6 with a nice little error message rather than doing nothing but dropping support and letting IE 6 screw up your page.
How Much (work) is a Website? A lot!
Grocery stores employ many tactics to influence shoppers' purchases, including eye-level marketing, grouping products, canned scents, irrational pricing, point-of-sale items, and shuffling of stock. It's likely you've encountered and been influenced by these techniques before, especially if you came without a list. In fact, psychologists say that shoppers who plan their trips to the supermarket by assembling a list in advance are more likely to purchase the items they need and stick to the budget they expect. On the other hand, those shoppers who approach supermarket visits spontaneously are likely to buy more unnecessary items and spend more money. Grocery stores plan for the shoppers who don't plan; that's how they make a profit.
In the same way, any web development project should be planned well in advance to ensure that the goals, scope, budget and timeline are appropriate and achievable. The difference is that, unlike grocery stores, web development companies don't profit from clients who don't plan. When it comes to our clients, we're in this thing together, from start to finish.
This month, I'd like to review the steps involved in a web development project, paying particular attention to the aspects that are often overlooked or underfunded by our clients.
RotM: Skitch, screen capture utility
Augusts Resource of the Month is Skitch. Ive been using it the past few months to help me with my site testing. Being able to quickly add images in my error reports is very useful since its often difficult to describe in words what Im seeing. Aside from Skitchs my-pretty-pony look and feel, its easy to use and it works in both my Mac testing environment and in Parallels for PC testing. Its also free (for now).
Ive used Snapz Pro X for several years now and Ill continue to use it for its advanced features (and the fact that I paid for it). But for quick screen shots that you can annotate and drag and drop into another application, Skitch is the clear winner.
In case youre wondering why Resource of the Week is now called Resource of the Month – Ive been busy, ok?
Design Guidelines for Agencies, Part 4: Preparing Website Designs for Production
At Newfangled, we refer to the process of applying the design of a site to its structure as skinning. Not horribly original but an accurate description. Preparing Photoshop files for skinning is an important step in web development and they should be organized in such a way that any developer or programmer can understand and work with them. It may require investing a bit of time to properly prep design files but it will ultimately save production time and can result in cost savings for your client.
Photoshop Documents
First of all, create separate Photoshop Document (PSD) files for the home page and sub pages. As efficient as it may seem to use one PSD for all your page layouts its actually easier to work with small, multiple PSD files, each containing a single template. This method also reduces the chance that something will be missed during the skinning process. To keep the total number of PSD files small, represent the entire site with a home page layout and a handful of sub page templates. Simpler is better.
If you want to score extra points with your web developer, create a style guide PSD that provides some Cascading Style Sheet (CSS) specs for the sites content. CSS defines a websites common page components such as the font size and style for body copy, page headers, sub heads, etc. Download a sample PSD file (1.7MB)
Optimizing Photoshop Layers
In each PSD, layers and layer folders should be well organized and labeled. Dont make the developer guess what layer 56 contains; provide useful descriptions like main nav over state. Use layer folders to group related layers together and delete any unused layers or layer styles to reduce clutter and shrink the PSD file size.
To highlight layers that have special functionality, assign them a color. For example, if youve created an over state layer for a navigation
graphic, assign it a color and leave the layer in the off state (by
clicking on the eye icon next to the layer). To assign a color, right-click (or control-click) on the layer to bring up the layer features menu. Select Layer Properties… and in the resulting dialogue box choose a color from the pull down menu. You can assign colors to layer folders as well (the color highlight will be applied to all the layers in the folder).
Another useful tool for highlighting special features in your designs is Photoshops Notes Tool. Youll find it in the tool palette (it looks like a small sticky note). Place these notes anywhere in your layout; they show up as small yellow icons that you can double-click to edit. Keep the text of these notes brief; any complex instructions for your developer should be stated in an e-mail that can be printed out for reference.
Working Files vs. Skinning Files
I keep two copies of each PSD when Im preparing files for production: a working copy with
all the artwork and text as separate, non-flattened layers; and a
skinning copy that is optimized for the developer.
Working files are useful for making edits later when the client wants to change a background graphic or update the main navigation bar. All your graphic text (with custom fonts) and multiple-layer artwork will be intact and easy to change.
Skinning files are the PSDs that you will give to your developer. Graphic text should be rasterized as artwork to eliminate the need for custom fonts during the skinning process. Text that will be generated as HTML should be retained as a text layer with anti-aliasing disabled. And complex graphics should be flattened to keep the PSD file simple and small in size. Download a sample PSD file (2.2MB)
These are some basic organization and optimization tips. As you work with more and more PSD files, youll discover additional methods for reducing production time, saving money and keeping your web developer from grumbling under their breath every time you send them a layout.
Authenticity?
I saw this article recently on Authenticity in the Age of Its Technological Reproducibility, which I thought was pretty interesting- check it out.
Then, I heard this OnPoint radio program titled What is Real? in which host Tom Ashbrook interviews essayist Richard Todd on the search for the authentic. Clearly, with the proliferation of more and more social networks, authenticity and relationships and how they are understood online are on the minds of many. This is probably what lead me to write my recent post on How I Met Two Interesting People Using Social Media.
What do you think?
Interview: David Lemley, Lemley Design
David Lemley
President,
Lemley Design
David describes himself as a Change Agent, Brand Catalyst + Hipster Dufus Wannabe on his LinkedIn profile, but he is known by his colleagues and clients for directing brand strategy and creative development programs with an unwavering passion for design. He has written numerous articles for industry publications including Design to Branding Magazine, Design and Display Ideas, and Package Design Magazine, and has spoken at many events including the 19th International Brand Design Conference.
CB: What fascinates you about the web?
DL: Pseudo-Instant gratification. Access to information and the sense of control it affords (looking up people on Facebook or Linked-In prior to a meeting, changing flight times from PDA, making dinner reservations from the taxi, not to mention its revolutionized holiday shopping).
CB: What would you change about it?
DL: I would add a food replicating device like on the original Star Trek. Then it truly would be instant gratification.
CB: Do you have a blog? If so, what makes your blog unique?
DL: Yes, but its still under wraps.
[Editors note: Update! The blog is now public. You can read it here.]
CB: What technology has had the greatest impact on how you do your job?
DL: Has to be the web. It has allowed us to serve a national client base form a tiny dock in Seattle without having to travel more than a couple times a month.
CB: Who has influenced or helped you the most in your career?
DL: God has blessed me with lots of opportunities, many of which I have blown. I have learned quite a bit by making mistakes. In my office we have a mantra taken from Bruce Mau’s Incomplete Manifesto for Growth… “Learn to Make Mistakes Quickly”.
CB: What makes you uniquely suited to your role at Lemley Design?
DL: Having my name on the door over the past two decades has transformed me from a design rock star wannabe into a reluctant leader in retail Brand strategy and design. Having helped several amazing leaders change the world, I see the patterns necessary to create real, actionable change that will be relevant to the customers’ lives.
CB: What makes your company a cut above its competitors?
DL: Our clients’ vision.
CB: If you had one sentence to pitch a potential client, what would it be?
DL: Read my manifesto and let me know if you want to change the world.
CB: I believe that everyone has a specific and unique talent that comes in handy at just the right time. It might be something most people know about you or something very few know. What is your super-power?
DL: Exhortation. The ability to help others put the right stuff in the right order to create a real solution to their problem.
CB: If the worlds technological and economic systems were to collapse and revert society to locally-focused, agrarian communities, what role would you assume?
DL: Reluctant shaman or beet farmer.
The Trust
The Value of Trust
In observing all of the conversations Ive had with people looking for web assistance of some kind over the years, Ive noticed a pattern. It seems pretty clear to me that the main thing people are looking for when scouting potential web developers is trust.
Trust. Trust in what? Well, this answer seems to be a bit of a cheat in that trust could be viewed as the safe resolution to the process of need. With that view, I could probably get away with saying that trust is everything. Clients to be need to know that we as a company and individuals have the capacity to care and interest in caring about them - not just for the project but for the long haul. And, most of all, they want to know that we can get the job done. Clients to be are basically evaluating their trust prospects.
The State of Trust
My grandfather owned an exceptionally successful autobody shop for the entirety of his professional life. It was a guarantee that every single client to be that walked through his door was exceptionally unhappy - because their car was wrecked! Most of our potential clients are in an analogous boat. He and those around him attributed his success to two things. One was his personality. For some reason, when people started speaking with him they immediately felt a little more relaxed. He was warm, optimistic and confident and that simply rubbed off on people, it made them feel that they were safe. The second was his motto, which was get it done right the first time. He practiced this through all aspects of his life, and it really paid off in business. It doesnt take long for a customer to realize when things are going wrong, or right. Everyone is used to bad service, missed deadlines, incorrectly set expectations, the whole bag. All of those things erode trust. Most customers show up to a relationship with negative trust equity, a.k.a suspicion.
How We Sell Trust
So how do we sell trust? Basically, it all boils down to honesty. Probably at least half of the people I speak with we cant help. My primary role of a finder is to let the right types of clients in the door. So, in a sense, the first step is for our trust to be earned by the client to be. When Im on the phone with someone for the first time Im evaluating them, their company and their need. If everything lines up, I open the door by inviting them to a web meeting. The majority of conversations dont get that far, and that is a positive thing. We need to be very honest with ourselves in regard to the type of work we can excel at; anything else needs to be turned away.
Once we identify a prospect that we believe is a good fit for us, the trust onus is once again on me. My method of selling trust is to demonstrate very clearly how we get the job done right the first time. It is my job to surface all the questions the client has, to examine every aspect of the need, and to demonstrate exactly how we would go about solving it. Im making a LOT of promises at this stage, and I need to be very careful Im not writing checks we cant cash. After that, sometimes weve earned the trust investment and sometimes we havent. Losing stinks, but it is usually coupled with learning.
How We Back It Up
With an autobody shop, getting it right the first time is sort of straightforward. The car is broken and bent - and the task is to make it fixed and not bent, and do it perfectly. While the process of doing that is complicated, any casual observer could say what needs to be done in basic terms. With a website it is a little different and much more subjective. There is so much noise out there, so many possible options. Before you can even begin rebuilding a site you need to do some serious planning with the client.
How do we, as web developers get it right the first time? Well, we dont! It is impossible, as we learned rather painfully from 1995-2000. In those days, wed get it wrong all the time, despite immensely difficult work, boatloads of passion and intricately detailed specification documents. It was baffling, fearsome and sort of sad. What we realized is that the only way to get the whole project to go right the first time was to actually build the site twice - but we couldnt double the budget... or the schedule. Amazingly, we did figure out how to pull this off. The solution was our Grayscreen Prototyping process. Through prototyping, we ensure that we know exactly what the client needs and that our clients know exactly how were going to serve each need. This is the first step of our process. An initial prototype (which is a real, clickable website) is built within the first few weeks of the project. Once the client sees how easy the prototype is to use and how quickly we can edit it to reflect their needs, the trust party begins and we all start to have a lot of fun. Seriously.
When a promiser actually does follows through, it flips the game and immediately creates a significant bond. In autobody and web development, it is the promisers job to accurately diagnose the need, to properly frame the solution for the clients understanding and to effectively implement that solution. If you do that once for a person, they wont forget it and maybe someday they might need your services again, or know someone else that might. Eventually the process of tipping the trust equity scale will catch up with you, and after seeing what it has done for us, Id argue that there is no better form of marketing.
Creative Questionnaire: Able Parris
Able Parris is a website designer and developer for Newfangled Web Factory. Ables 29-year journey as an artist and designer has been a rich and varied one. His first job, building barbed wire fences in Wyoming, gave him an appreciation for hand-crafted work. A self-professed amateur photographer, Able has spent time exploring fine arts at Rhode Island College and Rhode Island School of Design, remodeled houses, built websites, taught himself the guitar and established himself as Newfangleds resident gardener. You can see some of his work at ableparris.com.
Job Description:
I design and do some light development, as well as hold the unofficial role of Minister of Office Culture at Newfangled Web Factory.
Current Project:
Its not unusual that I have several projects going on at the same time. In fact, I almost prefer it that way. I am currently designing DataSynapse.com, 3Cups.net, and NestedHome.com.
First step in my design process:
I try not to walk into the design process blindly. The first step is to have a conversation with the client to get a clear idea of their objectives, what their competitors are doing and how we can do it better, and get an idea of how they plan on growing in the coming years.
Aspect of design I give the highest priority:
Purpose. I believe design is mainly problem-solving, and that without purpose a project will fail. If I can get an good idea of the purpose of a project, I can come up with a solution that will help it succeed. Without purpose I am just making a bad idea look good.
Method for overcoming creative block:
Coffee and a cinnamon bun.
One typical myth about web design:
“Its easy, my cousin does it.”
Most challenging aspect about web design:
When I first started in web design it was to build my online portfolio, and I really wanted it to be like a book. But the internet is not like a book, and it doesnt look like its going to be anything like a book anytime soon. The great thing about a book is that it has a front and a back; its easy to navigate. Websites are more like stacks of loose papers than books. The most challenging aspect of web design is designing in such a way to where the user can get information quickly and easily.
Most underrated aspect of web design:
White space
When I first knew I wanted to be a designer:
Its hard to believe, but I didnt know what a “designer” was until 2002. I had been a photographer for years, and had even designed a lot of things and had an interest in architecture. When I realized you could get a degree in design and do it for a living I decided to give it a try.
Inspirations:
I am most inspired by nature, but I get a lot of my ideas when I exercise. Its too bad, because I hardly get either!
Favorite tool:
Moleskine sketchbook
Favorite design resource:
The films of Charles and Ray Eames
The one typeface for a deserted island stay:
I would just like to be able to read my own handwriting.
Bookmarks:
nytimes.com, ilovetypography.com, designobserver.com
Design-related book I highly recommend:
The Wilco Book, although I dont own my own copy
Currently reading:
A Kierkegaard Anthology, and Dantes Inferno. (You caught me during one of my heavier reading schedules!)
Life lesson:
Hang out with people better than you who cause you to be a better person.
If I werent a designer, Id be...
a gardener
Favorite (non-design) past time:
Playing my 1940s Silvertone acoustic guitar
Read my interview on NotPaper.net
I was recently interviewed by Aprile of NotPaper.net. She probably saw my comment on her interview with Able a few months ago and found my work then.
You can read the interview here.
The Evolution of Banner Ads
Ive noticed that banner ads have evolved over time. From static billboards to flash-based interactive banners to floating ads (those have to be the most annoying) to 10-second commercials and mini movies. Today, I stumbled upon a mini website contained inside a standard 728 x 90 banner ad.
The banner advertises a new type of litter box with three pull downs revealing a demo video, testimonials and an interactive diagram. I was impressed with how much layered information the banner was able to contain and I liked that I could explore the product without being jerked away to another site.
I suppose it wont be long until these mini-site banner ads start sporting banner ads themselves.