It only took 9 months, but it seemed like a good time to put together a second set of free (as in beer) wallpaper photos produced specifically for the iPhone or iPod touch. These are taken from some of my favourite photos from my Flickr photostream over the last few months along with a few other unpublished photos.
As with Set 1, I ask that instead of redistributing the download, that people link back to this post.
Download the iPhone Wallpapers (442KB Zip File)
As I mentioned the other day, the site Wisingline designed for fiveruns.com is a finalist for the SXSW 2008 Web Awards but today they opened up the People’s Choice award voting — you know, the one you get a say in selecting.
I really have no aversion to big prizes, adulation or going home with a nice trophy, so I’d appreciate your vote. You can toss one vote this way every day until March 9th when the awards are handed out. Make my mom proud!
What are you waiting for…get voting!
Yesterday, SXSW announced the finalists for their annual Web Awards and guess what? The Wishingline-designed and developed site for FiveRuns has made the short list under the CSS category! Needless to say I’m excited and frankly, just honored to be nominated.
The FiveRuns site (the one nominated) has undergone many changes since it’s inception back in 2006 — from a tiny pre-beta release site developed prior to the launch of FiveRuns’ flagship Manage product to the much more fully realized site that exists now. Of course there’s more to come in 2008.
Even though I don’t really expect to win (that’s the politically correct thing to say right?), I suppose I should write an acceptance speech just in case… :)
The Interactive Web Awards will be handed out by emcee Eugene Mirman on Sunday, March 9th at the Hilton Austin Downtown.
On Tuesday, Steve Jobs was quoted in the New York Times when commenting on Amazon’s Kindle ebook reader device as saying:
It doesn’t matter how good or bad the product is, the fact is that people don’t read anymore.
This caught my eye in particular and stopped me in my tracks as it relates to a trend I’ve noticed on Apple’s own site over, let’s say, the last year or so. Less text. More graphics. More video.
Apple’s website, in particular, prior to the big design change that rolled out last year was full of text content. Nearly every page, for virtually every product was loaded with well-written marketing copy. Now, not so much, at least in terms of the amount of text content. It’s still exceptionally written, full of beautiful graphics, strategically on target with Apple’s raison d’étre and Jobs’ infamous RDF — there’s simply less to read.
Jobs goes on to say:
Forty percent of the people in the U.S. read one book or less last year. The whole conception is flawed at the top because people don’t read anymore.
I find these comments fascinating due to the proliferation of book stores here in Toronto and around the world — the big chains and small independents over the last 10 years. It’s completely contrary to my own experience. If I had to guess, I would say my local and extended (interweb-related) social circles read more, not less. Based on my book spending and reading habits over the last few years, I certainly wouldn’t fall into that 40%.
Whether there is any direct connection between Jobs’ feelings on the matter of reading and the amount of text content on the Apple website is not for me to say with any absolute certainty since I do not work for Apple, nor do I have any information on the inner workings of Apple’s web design/content teams, but it does strike me that such a connection could be drawn to explain what happened to all the content.
As an early Christmas present to whomever would like them, I’m offering up a set of free (as in beer) wallpaper photos produced specifically for the iPhone. These are taken from some of my favourite photos from my Flickr photostream over the last few years.
I’m calling this “Set 1” assuming that I’ll eventually do more.
My only request is that they are not re-distributed (please link back to this entry instead) and any contained/embedded attributions remain intact.
Download the iPhone Wallpapers (Set 1) (544KB Zip File)
For quite some time I’ve wanted to do something with the notebook since it’s felt like I’ve been seriously neglecting it. For one reason or another that isn’t far from the truth. I haven’t been posting much throughout the last year for various reasons and much of the content was quickly becoming outdated and irrelevant, even to me. So it was time for a clean sweep and a fresh start.
I had a few goals in mind before I started to do anything though.
Start to get back to my typographic roots which had fallen by the wayside. This manifested itself in sticking to a suitable vertical rhythm for the content and having a bit more fun using type within the entries. The perhaps slightly unusual entry titles being one such example.
I also looked at specifying some of those lovely new Office for Windows/Vista fonts throughout as the primary font-family selections but unfortunately discovered that the sans-serif fonts have a really small x-height in comparison to some of the more traditional choices (Lucida Grande, Verdana, etc). But if you do happen to have those fonts installed, you should at least see Constantia being used for the entry titles. This is definitely something I’ll be tinkering more with in the future.
I was definitely not shooting for a revolutionary take on weblog design by any stretch with the layout itself. Instead, I wanted simplicity in keeping with my overall dump the cruft and try to focus on the content plan. In some respects, this design is intended as a placeholder for a larger update that’ll be coming for the wishingline.com site sometime in 2008. Nearly three years on the same design is more than long enough.
One thing I know for sure about the notebook redesign — permalinks to entries from the old site are busted and will probably remain so. I just can’t be bothered to write all those htaccess rules right now and hopefully the improved, clean urls will be enough of any apology for breaking them.
If you happen to be exploring and find something that doesn’t work or seems buggy, please leave a note in the comments or contact me directly so I can look into it. Unless something creeped in at the last minute, everything should be hunky dorey in Safari, Firefox and IE 6 and 7.
Though nearly two months from kickoff, 2008 conference fever is already ramping up with two big ones currently marked on the calendar, tickets purchased and hotels arranged with more surely to be added as the year goes on.
First, one of too few relevant and topical Canadian-based web/design-related conferences — Web Directions North. Unfortunately due to other commitments I missed the inaugural event last year, but after speaking with both Derek Featherstone and Dave Shea during SXSW, which only shortly followed WDN, I realized I couldn’t afford to miss it a second time.
Given the great lineup of speakers, can you afford to miss it? I’m excited — new faces, old friends, and no dobut spectacularly organized! Plus I haven’t been to Vancouver in over 10 years which is a treat in itself.
And then there’s old reliable — South By Southwest down in lovely Austin, Texas. Last year, oddly my first year attending, was a blast and I’m looking forward to catching up with friends, hopefully generally more interesting talks and panels than last year and just an all-around good time. I’ll be at the Hampton and staying a couple extra days at the end of the Interactive portion of the conference to visit with clients and hopefully putter around Austin a bit with anyone staying for the week of music mayhem that starts when Interactive ends.
Hope to see you there at one or both conferences. Do say “hello” — I promise I don’t bite.
For those in the web/design/interactive realm, SXSW is like Mecca. It’s this place you go every year — sometimes to hear great panel discussions, other times just to meet and hang out with your friends and contemporaries.
A few weeks back, the SXSW crew posted the 2008 panel picker giving you and anyone else who wants the chance to vote on the panels most deserving to be included in the SXSWi 08 lineup.
While it might be a bit of a popularity contest in some regards, you might be interested to know that my buds Brian Warren and Mark Bixby along with myself have an entry in there called “Finding a Nice vs Doing it All” which we recommend you give high marks to.
While perhaps a few weeks late in making an official announcement, as of June 18th, 2007 Wishingline Design Studios (also commonly referred to as Wishingline DS) is no longer a going concern, at least in the eyes of the Canadian government.
This doesn’t mean we’re going anywhere though — oh no!, quite the opposite. In its place is the newly formed Wishingline Design Studio, Incorporated — now with all new super-seriousness, renewed vigor and more paperwork than you can shake a stick at.
For our clients, this doesn’t mean much aside from us having to make a few minor wording changes to our general business terms and conditions, and updating our stationery, estimates and invoices to reflect the name change. Everything else is business as usual. Same design insight and problem solving. Same creative drive. Same bad jokes. More paperwork.
Taking the leap to go from a sole proprietorship to incorporating the company (still operating as a private enterprise) was a big step and one which will be bringing other changes later this year including bringing on employee no. 2, a clearer, more focused direction and tuning the design services we offer to better differentiate Wishingline Design Studio, Inc. among the highly competitive design marketplace.
Incorporating is perhaps just the preface to chapter two of our story.
In releasing Creative Suite CS3, Adobe forgot, or for whatever reason decided not to update the Flash Player icons as part of the general installation thus adding one of a few rough edges around what is otherwise a pretty good software package (truly horrible and inconsistent software updaters aside).
Although there are a number of different sets of replacement icons for the various Creative Suite applications to be found around the net, for myself at least, I prefer having something that blends in seamlessly with the originals, at least until Adobe releases a proper update (since we know they’ve designed the icon already). Therefore I took it into my own hands to put something together and have decided to share it.
Included are resources for the Mac OS X and Windows versions (sorry, no 512 px versions yet) along with 16, 32, 48 and 128px transparent PNGs. I will not be releasing the PSD source for this, so don’t bother asking. Thx.
Taking a cue from Shaun Inman, author of the original implementation, and the fellow who wrote this handy Rails helper, I’ve put together a plugin for Mephisto providing a new text filter/tag to bring better typography to headlines, lists, and more.
In conjunction with this, I’ve created a new Subversion repository and made the plugin available publicly so any updates are handled more easily, at least from my end. The initial release is now available by running:
ruby script/install http://mephisto-widont.googlecode.com/svn/trunk/
I’ve given the plugin some limited testing in an existing Mephisto install (running off a now slightly out of date build of Mephisto, later than the 0.7.3 release) with no problems noted. There’s nothing special in the plugin so it should work fine in 0.7.3 and higher. Of course, YMMV.
I just finished the first annual A List Apart 2007 Web Design Survey and you should too. The survey took less than 5 minutes to complete and you’ll be offered a chance to win tickets to an upcoming An Event Apart conference or a 30 GB iPod provided you pass along your e-mail address at the end.
What are you waiting for? Get on it!
For freelance designers, as with larger agencies, clients are our bread and butter. Without them there’s really not much point. Without them we’d all be queued up in the unemployment lines.
Design is this big unknown to people. They can usually recognize it or point out things that have been “designed”, but ask them to describe the process of getting from an idea to a final product and many wouldn’t have the first idea where to start.
It’s our responsibility to educate clients so that our working relationships are easier and the work more enjoyable — whether it be setting reasonable expectations, clarifying deliverables, ensuring clients understand that we can only do so much without requiring input from them, and making sure that they understand what they’re paying for and why it’s important.
This is something I think we’re collectively still failing to do.
There are a myriad of problems facing designers today. New technology, new communication mediums, uneducated clients, uneducated designers, too much work, too many distractions. The list goes on and on. Rather than try to cover an impossible amount of information, I’m going to take a stab at highlighting a few particular problem areas based on my own experiences.
These are:
Design can be a tricky thing. It’s hard to quantify and harder to explain. Every designer has their own process for getting from an initial brief (if you’re lucky enough to get one) to a final, billed and closed docket.
A project might involve research, user studies, competitive analysis, initial concept development, wireframing, design, code, database design, etc. There’s a million things that could go into any one project. Every project is unique in its own way with its own hurdles to leap over.
No wonder it’s difficult to educate clients on what we do.
Some clients, for the sake of reducing their costs might ask to cut out, for example, wireframing. They don’t see the value in it. They don’t get the warm and fuzzy feeling of seeing Photoshopped comps; something that looks “real”. Sure there are times when wireframes might not be necessary but it’s during projects where they could be critical that it becomes our responsibility to educate our clients as to why they should seriously reconsider.
Few clients understand the research process that should be included at the start of any design project. This usually means putting on your thinking cap and figuring out what the real problem you need to solve is and perhaps even scribbling down a few possible solutions. Research might mean doing some of the other things I mentioned earlier — like talking to the user base of a particular website (assuming there is one already) or even creating potential user profiles to understand who it is you’re going to design for, because we all know it really shouldn’t be the client themselves (although they are important in the equation too).
Not doing research up front is like writing an essay with no background on the topic. The up front process work is as important as everything else, including the outcome because if you get that wrong, there’s a good chance the final product won’t fit the bill either.
Initiating contact with a designer can be a real problem. While we have to remember that while it’s our job to foster a good relationship with our clients, they too have a role to play. It’s just as important for the client to provide value to the relationship — it’s not just why they’d want to work with you — it’s why you’d want to work with them in return.
An introductory e-mail such as the following does nothing to provide a reason to open a line of communication with a potential client.
“Please call me asap regarding a new business concept.”
That was the contents of a real e-mail I received — the entire e-mail. No phone number. No name either. Even better was this one:
“how much?”
Um… too much for you. If you have to ask then it’s definitely too much.
I get these regularly, and while these are extreme cases, the moderately bad ones aren’t much better.
When vying for the attention of a designer, here’s a few things to keep in mind — we need real information. Don’t waste our time with pointless e-mails like the examples above. Give us a problem to solve. Be clear. Concise. Tell us why we should be interested. Sell it to us. Why would we want to work with you? And assuming you get that far, commit to the project. Prove to us you’re serious.
The need to react quickly and make decisions in existing work and when dealing with new/potential work is a real challenge for designers. A lack of commitment from the client usually indicates problems down the road. And while your first instinct might be to just say “yes”, you’re better served by knowing when to say “no” and saying that more often.
Our time is not free. There — I said it.
Freelance designers and larger agencies are businesses and face similar problems to their clients — paying the bills being one of them. It’s not unusual for a client to ask for extra work to be done and be surprised when they receive an invoice for services rendered. Design is not a free ride and you get what you pay for. Billable time is more than time spent working in Photoshop or developing HTML or CSS. It’s also that up-front research and preliminary process work which is often overlooked, misunderstood, and rarely billed.
If a client asks for work on spec, just say no. You don’t want those clients no matter who they are. Doing work with no guarantee of a contract is not worth it and does nothing but hurt yourself and other designers by setting expectations which should never be there in the first place. It’s like asking a carpenter to build a bookshelf, deciding you aren’t happy with their workmanship and then going to a different carpenter to build the bookcase. Like I said, say no to work on spec.
Communications is a cornerstone of design. We use visuals to communicate ideas, values, and meaning. Design is more than just making something look pretty.
Steve Jobs said “design is how it works”, and while I agree, it is also about how it looks — at least that’s the belief held by many clients. Clients understand beauty; many don’t fully grasp how function fits into the picture.
It’s easy to find clients that can tell you they want a website that looks like “x site”, but it’s difficult to find one that can provide you with solid, rational thinking as to why that would be beneficial to them.
Clients are often good at saying, “I like this” or “I want something that looks like this”, but are challenged to tell you why with certainty or empirical evidence. It can be even worse when they don’t like something.
These are the same clients who may not fully comprehend what they’re asking of the designer. They’ve forgotten about the real key players — the people that go to their website and actually use it or buy their products. Those are the truly important people and the ones who often have no voice in the design process.
Ask a client why they want something (or don’t want something) and you shouldn’t be surprised if they can’t tell you. I think of this as a variant of “the customer is always right” — meaning, just do as you’re told. There’s a catch to consider though.
The client is (presumably) paying the bill. The job of the designer is, on some level, to please the client. The thing is though — it’s also our job to do what’s right. To do what’s right for the user — and that’s a tough thing sometimes because often, what is right for the real users of a particular website/application is something that is a tough sell for a client. The designer is typically the voice of the end user. Without us standing up for them, they have no voice. If we give in to the client every time, then the end-user loses but ultimately, so does the client even if they don’t recognize it right away.
There’s a certain amount of trust that needs to be established so that the client understands that, as the designer, you have theirs and their client’s best interest in mind rather than pursuing frivolous and selfish creative goals. Constant communication, debate and honesty are all good ways to foster trust with your clients and mitigate problems before they get out of hand.
We have to know when to fight for something and when to let go. To take something from the 37signals train of thought — ask yourself — “does it matter?” If the answer is yes, fight for it. If not let it go and focus on the important things.
On the topic of responsiveness — and this ties in with meeting deadlines — the client is just as responsible for keeping a project on track as is the designer. A project can quickly come to a crashing halt when the designer is stuck waiting for feedback or the answer to a question from the client. The problem also being that the designer is expected to eat that wasted time and scramble to get the project done on time no matter what.
Communications should go both ways. Respond in a timely fashion. Everyone is busy — that’s a given. If you want your work to be taken seriously, you have to take it seriously and attempt to stay on top of it and provide responses so that things move forward, not stop dead in their tracks. Don’t assume the designer is a mind reader. We’re not. If you want us to do something, say so. Tell us why. And don’t wait two days to tell us either.
Designers should assume the same of their clients — spell things out in a way that people can actually understand. Treat your clients the same way you would like to be treated. If after a sufficient amount of time they aren’t responding accordingly, don’t be afraid to call them on it.
Being a designer can be a fun and often exciting job. Being a designer, whether you work for yourself or an agency means the general rules of business and etiquette apply. We don’t work for free. We expect committments. We expect to be treated fairly and with the same respect we should be offering our clients. We expect honesty and integrity and are more than happy to educate clients on what it is we really do and why this is valuable to them.
Hopefully there are a few good lessons here. Feel free to share your own or your comments.
The winter holidays are fast approaching and this year Wishingline Design Studio, Inc. is sending out some fancy holiday cards. They look like this:
If you want one, you’ll need to act quickly as supplies are very limited. Clients and certain other individuals get first dibs, but otherwise, all you need to do is shoot an e-mail over to hohoho at this domain dot com with your postal address and our elves will take care of the rest.
Oh, how time flies when you’re having fun…
So, what’s new? Glad you asked.
The renovations are done. The new Wishingline Design Studio, Inc. office looks great although we’re still not completely done with it yet. Everything turned out really well and we’re exceedingly happy to finally have an end to the dust, piles of 2x4’s and plastic sheets.
The newest Wishingliner seen here is now less than two weeks away. A big congrats to my buds Luke and Matt on their latest additions.
On the business front, things have been a bit crazy. Work is good. Too much work all at once is also good, but in a painful kind of way.
We recently completed some additional work for Toronto Life although it hasn’t gone live yet. We’ve also been working with some new and some old clients on identity design, web application and site designs and redesigns with more on the way.
Some of this work literally just wrapped so it’s still a bit early to really say much, but when it’s time you’ll hear about it. Until then, here’s a bit of a tease.
The Darns were nominated for a Toronto Independent Music Award for “Best Alternative Act”, but sadly did not win. Maybe next year. And the band is finally celebrating the release of “What It All Turns Into” on November 18th with a big CD release bash in Toronto. Next up — something that hopefully resembles a tour.
There’s also been a few small changes and tweaks made to the site such as the newish homepage graphic, the little availability info on the homepage (also repeated elsewhere through the site), and an upgrade of MovableType and the newly released phpFlickr 2.0 scripts which use Flickr’s new serialized API. I only had to modify one line of code to update my scripts to work with the new release which was a nice surprise.
That all aside, there’s still a boatload of work piled up and I should probably start in on it now. I’ll try not to let another month slip by…
While likely not featured in the new 2007 catalogue, Ikea may have invented the greatest little plastic tool I have ever seen. It’s ingenious in its simplicity and sheer usefulness and while I’m amazed it’s taken this long to come up with such a great piece of engineering, I’m happy someone did. It saved my fingers this past weekend.
It looks like this:
What does it do you ask? Very simple. It holds those tiny finishing nails they give you to attach the back board to many of their pieces of furniture such as bookcases, cabinets and wardrobes. No more hitting your fingers with the hammer. No more crooked nails breaking through the back of the bookcase in the wrong spot. Perfect every time.
Thank you Ikea!
Back in early May I talked about what I dubbed “Sliding Door Buttons”. I’ve continued to evolve this technique to the point where it’s now behaving consistently across browsers and platforms.
The essence of the technique and the reasons behind its usefulness remain the same, but there are now some additional enhancements that I think add to the implementation and provide basic design features that might otherwise be difficult to achieve using other methods.
The HTML code required is slightly rearranged and helps work around some basic problems in the previous implementation. But before we talk about any specific changes to the CSS, let’s look at the basic structure of a sliding door button.
<div class="buttons">
<a href="#" title="Add a new user" class="btn"><span>Add User</span></a>
</div>
<div class="buttons">
<a href="#" title="Cancel" class="btn-disabled"><span>Cancel</span></a>
</div>
The surrounding div element with the class “buttons” is not necessary, it’s simply included as part of this illustration. The basic code is an anchor with a span element inside it. Simple? Yes. Clean. Yes. Do we have the hooks we need to style it? Yes.
The only real difference between this version and the previous one is that I’ve reversed the order of the span and anchor and which element has the button class applied to it.
As mentioned in the first part, the basic idea behind these buttons builds on Doug Bowman’s [Sliding Doors of CSS][ala] technique but rather than being focused on site navigation, we’re instead focusing on a common UI element, the button. The approach is essentially the same: use simple HTML elements, two images (one for the left side and another for the right) and allow the button to expand as necessary to accommodate longer text.
<style type="text/css">
* {margin: 0; padding: 0;}
body {
background: #fff;
font-family: "Lucida Grande", Helvetica, Arial, sans-serif;
font-size: 12px;
line-height: 1.2;
margin: 16px;
text-align: left;
}
p {margin: 0.5em 0;}
.buttons {
background-color: #efefef;
border-top: 1px solid #ccc;
padding: 4px;
}
.btn, .btn-disabled {
background-color: transparent;
background-position: 0 0;
background-repeat: no-repeat;
font-size: 12px;
font-weight: bold;
padding: 5px 0 6px 8px;
}
.btn {background-image: url(images/btn_dark_left.gif);}
.btn-disabled {background-image: url(images/btn_light_left.gif);}
.btn span, .btn-disabled spam {
background-color: transparent;
background-position: top right;
background-repeat: no-repeat;
margin-left: -5px;
margin-right: 8px;
padding: 5px 12px 5px 8px;
}
.btn span {
background-image: url(images/btn_dark_right.gif);
}
.btn-disabled span {
background-image: url(images/btn_light_right.gif);
}
a.btn:link, a.btn:visited {
color: #333;
text-decoration: none;
}
a.btn:hover {color: #666; text-decoration: none;}
a.btn:active {color: 001999; text-decoration: none;}
.btn-disabled {color: #ccc; text-decoration: none;}
a.btn, a.btn-disabled {
display: table-cell;
vertical-align: middle;
}
</style>
<!--[if lte IE 6]>
<style type="text/css">
.btn, .btn-disabled {display: inline-block;}
</style>
<![endif]-->
The big change that helps resolve the consistency problem in the earlier implementation turned out to be very simple: use display: table-cell on the anchor element. For Windows IE, we use display: inline-block since it’s the only browser to really support it (so far).
Following the example here, we could create as many variants as necessary with fairly minimal additions to the CSS code. To take it one step further, you could also add an inline image inside the space to add a simple icon to the button.
The one real missing piece of the puzzle in terms of making the behaviour closer to a traditional input button is that we have no real way of disabling the button. It’s a link. It’ll always be a link. What we can do is use a bit of JavaScript magic to swap our sliding door button with a nulled button. In this case for the nulled button we remove the anchor and replace it with another span element (another inline element in HTML).
Here’s a quick example of this technique in action. I’m not demonstrating the JS swapping here. My suggestion there would be to look at Prototype for that sort of interactivity since it makes it very easy.
As before, I welcome your questions, comments and critiques. Simply drop a note in the comments.
Even though I already have more than enough going on to keep me busy, the projects I’ve been handling lately have inspired me to get a little skunkworks project out of my mind and off the ground. So today marks the start of my what little free time I have project, remarkr.
remarkr will have nothing to do with blogs, or bookmark management, wine or web-based invoicing but will have everything to do with filling a huge hole in the graphics industry and will hopefully put the competition to shame by providing fewer features, a significantly user experience and more bang for your buck.
I’ll undoubtedly be talking to a few Rails folks at RailsConf in just over a week’s time about this to guage interest and see if anyone else would like to come on board to lighten the load and share in the fun.
If you’re interested in participating, fire off an e-mail to whatis [at] remarkr [dot] com or sign up for the launch.
One of the small tasks I set for myself in working on an upcoming web application project was to construct any buttons required in the app using simple anchors rather than using either input or button elements, handling the visual appearance with CSS.
This was a challenging task in some respects due to some cross-browser quirks (what else is new?) and the simple desire to not create excessive code for the sake of nice buttons.
In the end, a smattering of ALA technique and home-brewed trial and error did the trick and allowed a fairly robust and flexible system for constructing buttons while aiding accessibility and ideally making users with screenreaders happy as well.
The main designer/developer benefit is that these buttons are easy to style, can be easily repurposed to allow different styling and allow for translation into other languages without having to produce countless images. They also happen to work based on my testing in IE6/Win, Safari and Firefox. I haven’t done any testing in Opera, but I suspect that they should be fine in newer versions of that browser as well.
Since this technique is based on Doug Bowman’s Sliding Doors technique, I suggest you give it a brush-up read if necessary. It lays the overall foundation for the sliding door buttons technique.
The short version is this: we need two images. A left side and a right side. The left side will occupy the space from the left edge of the button text to the left edge of the button background itself. You should get the general idea from the screenshot above.
One key thing to remember is to make the background of the button on the right side wider than you need. The reason for this is to allow the button to expand and contract with the length of the button text and to allow a certain amount of font scaling.
The basic markup is as simple as it gets. You need an anchor and a span. It looks a little something like the sample below.
<a href="#" title="My Button"><span>My Button</span></a>
Simple, no? To style the button, you apply the left background image to the anchor and the right background to the span, remove the text-decoration from the links, add some padding to allow the entire button shape to be visible and set the span to display-inline.
The reason for placing the span inside the anchor is simple: doing it the other way around works fine until you get into IE and it all falls apart. Placing the span inside brings the added benefit of ensuring the entire button shape will be clickable by the user.
You can grab a quick sample of the sliding buttons technique in use here.
Clean, (at least reasonably) semantic code is something I strive for when writing code as part of web projects at Wishingline Design Studio, Inc.. It’s not always easy or possible due to numerous factors, but it’s a worthy goal nevertheless.
This is especially true of more marketing or information-driven sites where I feel there’s a greater likelihood of visitors using screen-readers or requiring enhanced accessibility. Try to provide a reasonably good experience for everyone — within reason. This is a philosophy I know is shared by many web professionals who care about standards, usability and accessibility.
What I’ve noticed of late is that a good portion of “Web 2.0”-style applications don’t necessarily follow those rules. Even 37 Signals’ applications are cluttered with non-semantic code, inline-styles and hordes of inline javascript. So much for the separation of content from style from behaviour.
What I’m curious about is how much does this matter? Is it bad or just personal taste? Do the requirements for web applications differ greatly compared to more informational pages (eg. blogs, marketing-oriented product websites, etc.)? Should they? Can we just get away with that sort of thing more easily with web applications than with regular vanilla web pages because of their general intended audience? Is it just a matter of the complexity of one type of web page vs another?
Feel free to leave your thoughts in the comments.
Toronto Life, a 40-year veteran of magazine racks in Toronto and across Canada launched the latest incarnation of the magazine’s companion site, torontolife.com today featuring both a whole new front-end built upon web standards.
Wishingline Design Studio, Inc. was approached in late February to assist the onlin team from publisher, St. Joseph Media in pulling together the new site design and implementing it using lean XHTML and CSS. The new design nicely complements the print edition of the magazine and brings a simple modern and appealing esthetic to one of the staples of life in Toronto.
See more from this project in our portfolio.
A home renovations company flyer came through the mail slot the other day. In and of itself, this is not unusual. But the statement included near the end of the flyer stood out and is a good general business statement that I can’t say I’ve seen anyone really talk about, at least in terms of web design.
The quote is simply:
If we don’t take care of our customers, someone else will
In the web design/programming world this is very true. Designers and programmers are a dime-a-dozen. Face it, it’s true. Whether the majority of these people are true schooled or accredited designers/programmers is another matter, but there is always someone else waiting in the wings to pick-up a new client the moment you falter.
With this in mind, take a bit of time and think about how you can serve your client better; at least say thank you — keep them happy and keep them coming back.
Name on a big sign outside a live music club: check. Project I worked on heavily featured on the back cover of a major design magazine: double check!
While it may be obvious, communication and collaboration are key to working with clients on design-related projects whether they be for the web or print. I think people forget that though; and for anyone handling the project management aspects of a job — especially if you’re a freelancer, this can be very frustrating and really drag down productivity.
Without client communication, who exactly are you designing for? How do you know if something is working, or right for the client’s target audience(s)? How do you get them to approve anything so that you can wrap up parts of a project and move on to the next component?
There’s nothing quite like the frustration of a project, especially one with a very short timeframe, coming to a screeching halt because the necessary communication just isn’t happening.
The thing with collaboration is that it’s a two-way street — it’s not one person sitting in a room talking to him or herself. It’s no fun having to chase after a client (or the other way around) to get an answer to a question or to get feedback to maintain a project’s momentum.
The thing is that everyone involved needs to understand is… well… the importance of being involved. If they don’t, they need to understand that projects will not finish on-time, on-budget and sometimes not at all without their support.
Collaboration tools, such as Basecamp can help ease the burden by enabling more frequent and timely collaboration and communications while improving your responsiveness as a designer. It lets clients be more involved in the process, makes you more accessible and better able to keep track of everything.
Design can happen in a vacuum but only to a point. The client must get involved — whether it’s simply to bounce ideas off, to point out problems or suggest improvements. There’s few clients who will sign-off on a project without reviewing your work and being happy with the end result.
Reading Jakob Nielsen’s Alertbox for September 19th this morning got me thinking about something which has always bothered me with web applications and web forms in general. Jakob mentions the problem of scrunched screen elements and effective use of screen real-estate often being a problem with web forms.
In particular, he refers to avoiding drop-down menus and scroll lists by instead using lists of selectable items where “all items are visible simultaneously” to reduce errors and make selection more immediate. This made that little lightbulb over my head start flashing repeatedly…
One of the biggest annoyances with web forms for me typically rears its ugly head when faced with an e-commerce transaction and having to select a state/province or country from an excessively long drop-down menu. Raise your hand if you also find this annoying and tedious.
Some might argue that you can get around this by using a standard input field as some do. Yes, but then you have to deal with the problem of spelling and possibly abbreviations. So what’s a web geek to do?
What if the best solution was a combination of the two approaches? A simple text field with the capability to autocomplete based on user entry?
Rather than force the user to scroll through a really long list, let them type the first few letters and choose from a much shorter list of options (or a single option depending on what they entered).
This approach would permit you to check against a list of common abbreviations, country codes, misspellings and still be able to deliver a useful, intuitive and responsive interface with less errors and more completed transactions.
Perhaps the most significant downside to this approach is that there are still massive numbers of users using antiquated browser software which is incompatible with “Web 2.0” DOM scripting and AJAX.
Nevertheless, given that we have wonderful technologies such as Rails, Behaviour and Script.aculo.us to help solve such design problems and for creating innovative web applications I’m a little surprised I haven’t seen anyone really try to tackle this issue in a new way. I can’t possibly be the first to consider this, can I?
It’s amazing how quickly time has flown by since the last time I posted anything. I took a quick glance this morning before getting into the thick of things and noticed that it’s been nearly two weeks. That seems like a rather long time.
It’s not that I haven’t done any writing for this part of the site, it’s just all sitting in the editing bin waiting to be finished while I tackle ongoing work, new business, rehearsing and trying to find a few precious moments to spend with the incredibly patient and understanding wife first. Having your priorities in place can be a good thing you know.
In the brief moments where I’ve had a chance to breathe (and sleep), my mind still ponders all the things that haven’t had the attention they deserve and the things that haven’t even been started yet.
I did manage to cross one small item off the list today — Wishingline Design Studio, Inc. is now an official Executive Producer of “Copy Goes Here”, a new movie being produced by those fun and smart peeps at Coudal Partners.
Film is a great thing — sure I hate being on film or having my picture taken for that matter, but getting a chance to somehow, even indirectly be involved in the making of a movie sounded like a great idea. Considering I didn’t really want to direct (or act) — being a suit seemed like a welcome alternative.
Now, where’s my damn trailer…?
Content. It’s the thing that gives people a reason to go anywhere beyond the homepage on your site. It’s a big reason why people visit a site in the first place and it’s still amazing the number of clients that do not understand that.
In starting work on the Wishingline Design Studio, Inc. site and generally any project, my own methodology starts by mapping out preliminary content which allows me to take into consideration site architecture and design elements. Aside from providing structure, and ensuring work is on-strategy, our job as designers is to make content both visually appealing and readable. Not knowing what the content will be greatly affects design decisions. It should at least.
What information does the client want to make available? How should it be organized? What parts are simple, small and fairly static (unchanging) and what parts are likely to grow and expand? Will there be long passages of text, possibly spanning multiple pages (or long individual pages)? Where will images, flash and other multimedia content be used for more than decoration? Will there be content that appears in multiple places on the site?
In organizing site content I like to start using a flat hierarchy; that is, no hierarchy and then start to tie pieces together. Are there things that belong in more than one place? Sticky notes can be a real time-saver here. Low-tech often works best at this point.
Create meaningful primary categories that will become your first level hierarchy and work your way down. Do things need to be separated out further? For example, if you’re maintaining a news archive, does it make sense to organize the archived content by year? By month? Some other way? At all? Some sections may be flat (no sub-categories) and others may result in multiple levels. This is where you should start thinking long-term about maintenance and future redesigns.
When structuring your content, try to keep in mind what the user will have to do to actually find and get to the content. Make it as easy as possible. Complex hierarchies are often a deterrent for less savvy users because it’s easy to get lost. Typically I refer to Microsoft’s site as an example of this. I always get lost myself anytime I need to look for information there.
Determining such things before putting pencil to paper or fingers to keys can save you in the long run. What I mean is, try to avoid writing or designing anything until you know how content will be organized and fit together.
In general I’ve found most designer or agency sites follow a fairly common structure in terms of content. There are things that a site must have along with others that could fall under the nice to have banner. There should be information on the business itself — what it does, who is behind the business, philosophies and strategies along with a portfolio of work, or case studies. Exactly what content is needed is up to you, the designer and the client. Thankfully this is easier if you’re your own client ;-)
More and more agencies and freelancers are also adding blogs to their sites to better communicate to clients, peers and attract new potential clients. A blog can also act as a great marketing tool to get your name out into the world. Just look at a high-profile agency such as Coudal Partners who does just that. In my case, I started backwards — starting with the blog and working out, building the informational side of the site second. My mother’s always said I was a little backwards. Hi mom!
Another often overlooked component of the content process is taxonomy. What are things going to be called? Are you going to use consistent labelling throughout the site? Are labels clear and understandable by the user? For many users it’s unsettling to look at unusual site taxonomies and know what to do.
Unusual labelling can lead to users shaking their heads, getting frustrated and giving up, probably never to return. That’s bad for business. All is not lost though. An unusual taxonomy can be made usable but providing users with additional hints in the HTML using title attributes, alt tags, or rollovers whenever possible. Make icons clear and easily identifiable. Some visual icons are easily recognizable (eg. print — usually a printer icon) while some may be more abstract or difficult to instantly recognize.
As an example — labelling your design portfolio as just that, you’re less likely to confuse a user than if you were to label it “catalogue”. Some users will explore but many do not have the time, patience or willingness to learn your taxonomy and explore. Clarity is often better for the user experience than simply being clever. Generally the idea is not to confuse or confound the user but rather to engage and delight them.
Depending on the needs of your site or a project, creating a taxonomy guide could be a helpful document to ensure consistent and easily identifiable labelling.
When mapping out content it’s also good practice to begin with a reasonable understanding of your target audience. Who are you trying to communicate with? What is important to them? What information do they want and expect from you? What tone should the writing use? Funny? Serious? Playful and creative?
Content is just one of the hooks that gets people coming back to your site, but if the content is boring or not on strategy, you may miss the boat. This means speaking to your audience (and not speaking down to them). It means engaging them and giving them a reason to return.
The most universal hook is humour. Make people laugh or chuckle and they’re more likely to stay interested than if you take the dry and uninteresting corporate-speak route. In many cases that is what is required though; but there are still ways to keep content lively and interesting.
Mapping out the content may mean putting together a rudimentary sitemap diagram or perhaps a more complex one showing how pages interrelate to each other or by indicating where different types of content fit into page layouts. It can also be useful to indicate where modular code such as “includes” are used by creating page schematics.
Why would you want to map out your site and content? Planning up front will save you time in the end; trust me. If you’ve thought through the problem, the solution will be easier to manage and implement and you’ll be less likely to second-guess yourself. Second-guessing means re-work, and no one likes re-work. Not me anyway.
A good example of this would be writing a contact form more than once if you’re going to potentially re-use the same code in a number of different places. The key here is finding those bits and reusing them as “includes”. Consider how the final pages will be structured. This will allow you to develop code in a way that makes using these include files easy and in a way that can accomodate subtle differences in different contexts throughout a site. Don’t repeat yourself.
A simple, real-world example is the calendar displayed in the sidebar of this site (at is exists today). This is a single index template in MovableType which is included in other templates where required. The code is not repeated in multiple places. Instead a single line of code adds that external template code into others which makes maintenance and troubleshooting easy.
Hopefully by this point you’ve got a few ideas on how to get organized and think about site organization and structure. The key for much of this is to put yourself in the shoes of the user and look at things from their perspective. It’s about the experience. Make it a good one.
One of the challenges with any design project is selecting an appropriate colour palette. It’s often overlooked; an afterthought for web projects when perhaps it should be one of numerous driving forces.
Colours each have their own meanings or associations, and the options for choosing the right ones to use — past experience and colour knowledge, sampling photographs/illustrations, colour swatches, magazines, visits to local paint stores, going for a walk in the park, or even using one of the myriad of web-based colour tools such as the Behr’s EXPLORE Colour Tool are virtually unlimited. The method of selection isn’t important, but the output is.
Colour choices can be equally as important as the visual aspects of a design itself. Poor colour choices can destroy beautiful designs causing viewers to move on rather than take valuable time to absorb the content or message. In the same vein as using the wrong colours, too much or too little colour may have the same effect.
For example, if you were looking to evoke feelings of calm, serenity and a sense of something being “classic”, you wouldn’t necessarily choose red as your primary colour. Instead you might look at greens, blues and whites since green traditionally symbolizes nature, freshness, harmony and safety. Blue is stability, depth, trust, and wisdom. White is light, goodness, purity and is considered to be the colour of perfection.
Most sites start with primary and secondary colours, often drawn from a company identity or set of visual brand guidelines. Tertiary colours are often used to add complexity to the colour palette — as accents or to draw attention to parts of the site. Well thought out choices can pull viewers in, grab attention and trigger the desired emotional response. Throw in some good typography and you’ll really be on your way.
In the early days of the web (mid-to-late 90’s) designers were more restricted with regard to colour choices due to limitations in what could be expected on the viewer’s end. Large displays capable of rendering millions of colours was not the norm as they are now. Today the majority of users have more powerful computers with larger, brighter displays capable of moving the industry beyond imagery restricted to the Web colour palette. The internet, like the real world can be a colourful place.
At this point in time, millions of colours and 1024x768 resolution are taken to be the lowest common denominator though there’s still reason to take into account users with smaller, lower resolution display capabilities. It’s safe to export GIF images using the Adaptive colour palette, along with a trend towards using 24 bit PNG images which also support full alpha transparency and improved colour fidelity despite a lack of full support in Internet Explorer 6.
When selecting colours to use, bear in mind the gamma differences between Windows and the Mac. Colours typically look darker on Windows-based computers than they do on the Mac. There’s a option in Photoshop that help you get a better idea of what your images and colour selections will look like on a PC and I highly recommend making use of it.
The thing which typically separates small-frys from the bigwigs in terms of colour decisions really comes down to complexity. This means selecting a palette which is both complementary but also offers a degree of contrast and variety. This means not using only blue and orange or red and green — it may mean adding magenta, brown, yellow or some other colour to provide additional visual interest.
A handful of good examples of this in my opinion can be seen on sites such as Terminus 1525, Masterfile, Basecamp and of course Apple, just to name a few. Doug Bowman’s Stopdesign site another great example of the use of colour complexity in design. Doug is consistent in his colour choices but with adds complexity with his use of accent and highlight colours to divide content and provide a sense of navigational space.
Colours can be used to liven up otherwise stark designs, to call attention to items, or may be the focal point of the design itself. The use of colour is dependent on the needs of the design and the intentions of the designer. Do the colour choices add to or detract from the underlying message? For example, photography sites are often stark in terms of their use of colour because of the affect it can have on the photographs themselves. In such cases, neutral (white, black or shade of gray) is usually better.
Web designers need to be concerned about colour for a number of reasons, but one of the more notable ones is that colour can be used to instruct users about how a site is structured or how it works. Link colours are a perfect example. Links can change colours when the user mouses over them, clicks on them or has visited a link. Interactions such as this subtly tell users something about how the site works, sets expectations and aids in learning.
Colour can be used to create logical sections for sites — use red as a primary colour for the ‘news’ section and ‘blue’ for the company info section for example. Wired used to do this on their site but recently removed the feature. See Stopdesign for an example of this in use.
But colour should not be used in a vacuum. Considerations should also be made to accomodate people who are colour blind or who may not be able to see all colours.
Although I haven’t talked much about what I’m planning for the Wishingline Design Studio site throughout this article, but you can infer some ideas based on the colour swatches above (not finalized and may change dramatically). I’m still tinkering with the site’s primary and secondary colours; making sure everything is happy, harmonious and has the right balance of complexity and appeal.
Colour choices can be based on current trends, mood, meaning and on existing branding information, but whatever the case they should complement the design rather than detract from it. This means do not use a red background with blue type on it!
Start by picking one or two colours that complement each other then spread out from there choosing secondary and tertiary colours. Remember not to go overboard though — too many colours is somehow worse than not enough. I tend not to count shades of a base colour as colours in the palette, but whether you do is personal preference.
If you’re really serious about colour, I can’t more highly recommend getting yourself a set of Pantone Colour Books — it’s one thing to see colours on screen, but it’s another entirely to see them on paper they way they’re often intended. Pantone offers a set which is both affordable and an excellent investment.
As an aside, do yourself a favour and read Dave Shea’s piece on CMYK for RGB designers if you haven’t already. It’s a good primer on CMYK, Spot and RGB colours, their differences and uses.
CSS can be a really great thing for web-based application design and development. At the same time it can very restrictive, mostly due to cross-browser compatibility and standards-compliance (or lack thereof). To this point, one of my big missions at Masterfile has been to help drive the site to be more standards-compliant, getting rid of some of the not-so-hot legacy front-end code and to slim down pages wherever possible.
Steps in that direction have been taken in the last few significant releases, but probably none more than the release which we just pushed out to the real world. This is not to say it’s perfect or that it’s 100% valid code, because it’s not — but it’s substantially closer than it ever was before.
Better page structures and the removal of nearly all table-based structure allowed us to do something we think is pretty cool, and something that until the week following us presenting it to the president, no one had yet seen on a stock photo site. I nearly fell out of my chair when I saw someone had actually beaten us to it! In the time since then it appears to have vanished off that particular site (which shall remain nameless).
So… what feature is this you ask? It’s a little something we like to call “floating thumbs” or “floating boxes”.
Conceptually it’s simple, and probably very obvious: floated DIVs inside a container. Stretch the contained wider and the DIVs rearrange themselves accordingly. Shrink the container and the DIVs rearrange themselves to fit the narrower space. In an attempt to keep things sane and from falling apart wherever possible, the min-width CSS property was used to restrict the content from collapsing in upon itself, at least in supported 5th generation browsers such as Safari and Firefox.
Watch a Floating Thumbs Demo Movie (Requires QuickTime)
The floating thumb technique works beautifully and consistently in officially supported browsers. During development and prototyping, the tricky part was making it work with a statically positioned sidebar that is locked to the right side of the window. I spent a few weeks prototyping this and ended up using some additional DIVs as containers to keep everything happy, but thankfully it degrades nicely and didn’t add significant weight or complexity to the code.
In visiting with clients and doing some site statistics analysis we discovered a large proportion of visitors were using large monitors with higher screen resolutions. Considering a large portion of the market Masterfile serves are creative-type people and organizations, this made perfect sense.
We looked at the UI and knew that we weren’t doing enough to help these people see as many images as possible on the screens due to the design being limited to a fixed-width column (due mostly to the previous table-based layouts). Moving towards a fluid, standards-based page layout let us offer users a better experience without needing to set preferences or without needing any complex interactions. Just resize the browser window. For users with 20-30 inch displays, the net effect of this is enormous.
Making it easy and painless was the key. Not forcing the user to have to change settings somewhere and then making it difficult to revert back if they don’t like it will aid in adoption of the feature. It’s something simple and we know users will appreciate it.
After nearly two very long years, I’m finally done and satisfied with the identity work for Wishingline Design Studio, Inc. and although you won’t see it in place here for a while now, it is coming. My big realization out of all of this has been that it’s amazing how so much time can pass before you really have the time, energy and inspiration to buckle-down and get to work when so many other things are beating at your door.
During the nearly two years I’ve tinkered with this, I hummed and hawed over whether or not to retain a bonsai tree as part of the identity. That was my original intention at least but instead I went in the opposite direction and ended up with something abstract.
While the triple “w” visually resembles a sine wave — indicating movement or “flow”, it also permits a direct connection to the blog title “On A Long Piece Of String” just as it could easily be a piece of string. It’s simple and, at least in my eyes, vastly different from a lot of what else is out there in the general web design world. It’s also kind of fun just to stare at — you’ll go a bit cross-eyed staring at it too long though.
My intention with slipping this out is to begin the process of documenting the design and development of the actual, honest-to-goodness Wishingline Design Studio, Inc. site — design concepts all the way through to the final site launch. I’m not entirely sure to what extent this will happen as it depends on, at least in part, on general interest.
So what do you think of the logo? Smash? Trash?
The new Masterfile.com site is live and happily purring away. All that hard work, sweat, blood and lost/gray hair was worth it. Seeing as how this was a much larger undertaking than we anticipated I think it’s worthwhile to discuss the point and the process.
We’ve known this was coming for some time now, but the project didn’t really hit our desks until around six or seven weeks ago when we started to get glimpses of what was coming from the designers that were hired to take care of the company identity and re-branding work. They were also given an opportunity to help re-skin the website; to give it a fresh coat of paint.
At the time they were told that they couldn’t really change anything too drastically. The site works and is respected throughout the stock industry as one of the best. I’d say it’s in the top two, but I’m a little biased.
The site also has some of the best and most intelligently implemented features. Doing any damage to that — making the site any less usable was not an option. The equation we like to use comes from Ole Eichhorn’s Critical Section site and goes like this:
W=UH
Where, W=wrongness, U=ugliness and H=hardness. In plain English, this means: “if something is ugly or hard, it’s wrong”. In the world of software development and web design, we should all hold this to be true. This is our internal mantra at least and our task has been to ensure that the site is never any less usable than in a previous incarnation. I, and numerous clients and people outside the development team who have used the new site seem to agree that we succeeded in that aim.
The site changes are just a part of the overall re-branding project previously mentioned. The first step was the introduction of the new corporate identity, new stationary, marketing collateral, magazine advertisements (see the back covers of the current issues of HOW Design, Print and other popular industry publications) and re-establishing the company culture to be more reflective of the employees. Although the official launch is not until later this week, pieces of this have started to make their way out into the world.
In discussions to get a grasp on the task of actually doing the work of re-skinning the website, we were told the point of the design changes to the website were focused around colour. The previous site was about photos and making them as prominent as possible while lessening the impact of everything else. This makes sense from a business point of view since that’s what the company sells. Getting in the way of users looking at photos is bad. This is still true, but now we’re reintroducing the idea of colour back into the site design to make the site more vibrant, to improve visibility of features and to improve usability.
The new design and identity are more representative of the company and its internal culture. Based on the old identity and site, you might think that from a culture point of view that Masterfile was a bit stuffy, old-school and took itself a little too seriously. On the contrary. The company is primarily made up of younger, creative employees who work hard and are knowledgeable and passionate about photography and design. So the new identity — which is funky, playful, and a little retro fits the bill. The web site also needs to express that same idea.
While this could easily be a long, drawn out and technical explanation of the things we did to get from where we were to where we are now with the site, but (for now) I’m going to keep it reasonably brief.
Click The Image Above To View The Before And After Showcase
One of the notable goals we had with the new site was to make it possible to re-colour the site. CSS to the rescue! The catch — nearly 30 localized languages along with a fair bit of legacy code still using nested tables and other un-semantic markup. The plan is to switch up the site colours every so often to keep it fresh and fun. If you don’t like the current colour scheme, maybe you’ll like the next one better.
Compatibility is important and we had to make sure the site worked reasonably well in as many browsers as possible. In doing this though we had to be realistic and some browser stats helped us stay focused on the particular browsers we needed to target.
Yes, there are small quirks and inconsistencies in the new design, but upgrading to new(er) browsers clears up most or all of these issues. It’s also likely a number of these quirks are font-related issues for which there’s not much we can do. Our CSS font stack was designed to help minimize these issues and was based on research, but unfortunately there’s not really a good way to accommodate every possibility and permutation. Why can’t everyone just use Firefox or Safari :)
Other things we did to help the overall site usability based on research and user testing was to automatically select the search field so it’s ready for input when the user loads the page, completely reorganizing the information pages and updating the help documentation.
We also reworked the visual hierarchy of the pages by more effectively using page header styles and providing the utility boxes (Search, Categories, Lightboxes, Last Searches, etc.) with clearly defined headings to make them more easily identifiable. They were also re-skinned to be more visually neutral and not “in your face” so that they’re visible but not in the way. This is one of my personal favourite features.
A new price icon was added below image thumbnails for North American users allowing quick access to pricing information (RM calculator or RF pricing) via the enlarged image preview. This functionality is not available for international clients since certain collections are not available in all countries.
We also looked at how we could lighten the load of the site itself by reducing the sheer number of image assets required throughout the site design. Part of this was accomplished by moving to text-based site navigation (an unordered list) and using transparent images for buttons, leaving much of the actual visual styling to the CSS instead. With roughly 30 international versions of the site, the number of images that require changes quickly grows exponentially and time is better spent improving the site or adding new features rather than modifying image assets. We expect that users would tend to agree.
Of course there were lots of little things. We’ve probably forgotten half of the them, but here’s just a few.
At the moment we’re in bug fix mode and preparing for the inevitable 1.0.1 release sometime in the near future. I doubt we’ll get everything, but we’re working on it. The major issues will be dealt with and lingering smaller issues will be logged in the bug database.
I’ve been busy at work preparing for a fairly large-scale re-branding and have been working with one of the more highly regarded and respected design/branding agencies in Canada (at this time I can’t name names and will attempt to keep this as anonymous as possible). They’ve been busy working with management to help redefine the company culture which has unfortunately been somewhat misrepresented by the current identity which is very corporate and kind of bland (at least from an identity standpoint).
The current brand is not representative of the employees who are mostly younger (late twenties to mid-thirties types) and of an artistic temperment. The identity mark is also nearly ten years old and showing its age. The plus side for the designers is that they’ve done a good job it seems in developing an updated company identity; one that is younger, somewhat hip, and better targeted towards the company’s primary markets now and in the future.
They’ve put together some nice promotional pieces, advertising and packaging that make good use of the new identity and that I think will go over well and should result in an increase of traffic to the website. Some of this should start appearing very soon in magazines and design-related publications.
On the downside though (and getting more to the point) is that their understanding of web design and web application design is sadly disappointing, though not terribly surprising. “Typical print designer” comes to mind.
You have to understand that these are primarily print designers. They understand branding, identity, advertising and package design. Pixels are a different language to them, at least in terms of the web. They are clearly more experienced in Flash-style sites where pixel perfect layout is a realistic expectation and where the sky’s the limit in terms of possibilities. They also apparently like to mock up web designs in Adobe InDesign. Odd, IMHO.
The interesting problem, besides trying to explain the ideas of usability, visual hierarchy and importance has been the idea of not doing any harm to the site on the whole. A simple but interesting equation was pointed out to me by my manager which makes a good statement for our overall design/development process.
The equation comes from Ole Eichhorn’s Critical Section site and goes like this:
W=UH
Where, W=wrongness, U=ugliness and H=hardness. In plain English, this means: “if something is ugly or hard, it is wrong”. In the world of web design or software development, we should all hold this to be true. The success of Apple’s iApps, and Apple software in general is a perfect illustration of this point.
Unfortunately, this is where our (initial) disappointment in working with the supposed bigwig designers kicked in. We knew up front that they liked the site and didn’t want to change much. We thought that sounded good and it gave us the warm and fuzzy. We were expecting more of a re-skinning of the site rather than a major undertaking such as a redesign.
In reality what’s happened is that we’ve ended up somewhere in between due to the proposed requirements and overall usability needs along with small feature changes we’d like to implement to improve the site. Remember that equation? It was doubtful the designers had seen that before or had enough understanding of the needs of web applications compared to those of marketing-oriented sites.
What was initially presented to us we discovered later was a first iteration but was immediately accepted by upper management with no questions asked. I guess if you’re paying the bigwigs the big bucks you assume they know what they’re doing. Maybe they do sometimes, and maybe in the case of the site changes they’re a little off. Now I’m not saying they haven’t done good work in the past on other sites — it’s just that at least to this point, it’s been less than spectacular.
The printouts we were given to look at looked Ok. Not spectacular, but Ok. They had obvious problems such as the pixel perfect precision of everything and an overall heaviness which troubled us. The site has been there before and there was no cause to go back without fear of harming the user experience. Visual hierarchy and importance were the big issues here.
Based on the branding, Helvetica was being advocated as the primary font of choice in the CSS for everything. Sorry, been there, done that. We just got away from that and are not interested in going back. We’re pretty happy with the font stack in the CSS file currently. We are considering it for some larger image-based headings, but the overall font selection in place currently will likely not change since we’ve improved readability of the content quite a bit since the last major functionality update a little over a month ago.
The biggest problem discovered with the printouts provided by the designers — the only thing the managers had seen to this point — was that they were nowhere near colour accurate. This actually made things worse. Once we found out just how much heavier the pages looked with the real colours, I think we all were even more disheartened with the experience. Seriously — these are bigtime, expensive designers who were being paid for crap work and seemed to be missing the mark completely with the website changes.
There have been numerous opportunities where concerns have been expressed, ideas shared. Things are starting to get cleared up but considering the schedule indicates tht we’re launching this in less than 3 weeks… I’m still nervous. There’s still a lot to decide and even more work to actually do along with technical hurdles to overcome.
We’ve got our CVS branch setup for maintaining the existing site while we work on the re-branding, as well as our tasks database for keeping track of everything along with an extensive inventory of what needs to be added, deleted or changed as part of this exercise. It’s complicated and I hope it goes smoothly. The CVS stuff worries me a little, but more from people being lazy and not taking their time when doing updates and testing. One wrong commit and we could have bits of the re-branding mixed up with the current live site. That would not be pretty.
In the time since this was all revealed, there have still been obvious disconnects between our team and the designers. They do not understand the differences between static marketing sites versus application-based sites. You can get away with more on Flash-based sites than you can in HTML-based sites.
We’ve since taken our own path and reworked the design keeping in mind what we knew about the overall intentions for the changes being proposed.
Andy Budd put up a great post on his blog today focused on the margin property in CSS. In the post, he uses a series of examples illustrating how the margin property is supposed to behave along with how to get around some peculiarities found in certain browser implementations.
If you’ve done any research on writing semantic markup (XHTML) and styling it with CSS, the best way to start debugging rendering issues is to first test in a standards-compliant browser such as Firefox or Safari and work back to Windows IE or whichever browser(s) that need to be supported to avoid using unnecessary hacks or workarounds.
Although I’ve got a good handle on using the margin property and how and when margins are expected to collapse, I did learn a few things I didn’t know and gained some valuable insight on how to work around margin-related rendering issues. Be sure to read through the comments for a few other useful tips.
One of the things I’ve had on my mind recently has been form design and layout. Specifically in relation to both web and application design though I’m going to stick to web apps here since talking about desktop applications opens another can of worms. In particular I’ve been pondering buttons and form field naming conventions and their usage in guiding users through a form or application.
I’ve built quite a few form-based web applications during the last few years and something I notice on occasion when visiting other sites or using such applications is that buttons are often inconsistently named or placed in a way that is confusing for the user.
A good example might be a Reset or Cancel button. To the uninitiated user, these two buttons could be the same thing and in some cases they are. At the very least, their meanings (intentions) can be easily confused. A more experienced user might know that the Cancel button is used if they change their mind and want to cancel an operation they’re in the midst of whereas the Reset button is used to return the form or application to its default state; as it was when they initiated the session. In many cases, eliminating either button is a good place to start since they’re often not needed at all.
I’ve seen many users inadvertently press the Reset button in a form-based web application for changing their e-mail password thinking that pressing that button will change their password where it instead actually resets the form and clears any entered information. Inevitably this frustrates the user. Changing the label of the button to “Clear Form Values” or something like that might be more appropriate.
Alternatively, highlighting the Submit button or switching the Reset button into a text link might help indicate to the user which button to push to actually submit the form. Using the “tabindex” tag to force a tab order may help avoid such mistakes, but for users who tend to move around using the mouse alone, it provides no protection. Browser defaults may also affect exactly how tabindex values are interpreted. Simply providing a clear button label such as “Change Password” or “Submit Changes” might be enough.
Naming form fields appropriately also goes a long way to making forms readable, understandable and therefore usable to users. I’ve seen forms where a field value for “Name” might not actually be asking for your name. There’s also the question of splitting up names as First and Last name. Is it better to record that information as one value and then use either a JavaScript, PHP, MySQL, Java, Perl, ASP, Coldfusion (etc) function to split the value into first and last components by breaking it at the space? What if the user includes a middle initial? What’s easier for the user who actually has to fill out the form?
One field is certainly easier to fill out (and probably faster than two fields) and provided it has an appropriately descriptive label associated with it is likely the best choice. Yes it may require a bit more back-end programming depending on how the recorded data is used, but typically is just as flexible as if the data was recorded into separate fields. This particular case is much a question of business logic as it is ease of use. A good experienced DBA can help here as well as a good understanding of database normalization techniques. A little forward-thinking, experimentation and analysis never hurts either.
The overall flow of an application can also be a determining factor in whether or not someone completes the form and presses the ever-elusive Submit button. This may result in a missed sale if your form doesn’t flow properly or is too complex.
Forms can be simplified by structuring them into related sections and subdividing data collection across multiple pages or by simply removing unnecessary information or allowing users methods to lessen the burden of data entry. An example of progressive disclosure in form design can be easily produced using the Accordion component included with Flash. Progressively display, validate and guide a user through a form. Make the process quick and as painless as possible and you’re more likely to complete a transaction than have a user jump ship.
Excessive complexity is a leading cause of incomplete e-commerce checkout transactions. If your form covers more than 3 or 4 screens, users will frequently give up and leave. Giving a user too much time to reconsider by having long or complex forms will no doubt result in lost sales, errors in user input and a poor overall user experiences.
Aside from taking part in user testin