Archive for Web development
Designing for flow is something we strive for here at FreshBooks, and every time we roll out a release, we get a little closer to achieving our design ideals with respect to designing for flow - it’s a never ending project.
In the last release we were able to kill off our “default terms” preference for estimates and invoices — so now instead of having to go to “settings” and set your “default terms” you can set those terms *in context” as you create your first invoice.


Everyone knows usability is important, but not everyone knows exactly how to go about determining if their software/web/hardware product is indeed usable. As a professional usability consultant, I would (ahem) advise that you seek the aid of an experienced usability consultant to help.
This isn’t always a practical option for lots of reasons though, so what I’d like to offer are some pointers and practical things to keep in mind when you’re developing a website or any other interactive product.
Know thy user
Above all else, always try to keep this mantra in mind when designing or developing — you are not your user. What’s obvious and simple to you may not be for the people who will be actually using your product.
By the way, you do know who you’re designing for, right? Do you know something about their skill level, geographical location, wants and needs as they relate to your product? If the answer is no, I’d suggest doing some research and asking some questions to find out.
Use established interaction standards to your benefit
If you have a choice between inventing a new, cooler way to sort tables and using the more well-known method of clicking on the column header, use the latter. Chances are that people will be familiar with this paradigm and less likely to become confused.
Now for a caveat — don’t let adherence to standards stifle your creativity and innovation. It might be the safer road, but it’s not always the best choice, so think of it like any other rule of law — sometimes it’s best to break the rules, just do so wisely!
Subscribe to usability-related RSS feeds
This is a great way to keep on top of what’s being discussed in the usability, interaction design and user experience realms. It’s also an easy way to learn and internalize what’s working and not working for others.
Some of my favorites:
Sanity-checking your design is not usability testing
Don’t get me wrong, grabbing someone next to you and asking “does this make sense to you?” is often a good idea. But just don’t let this turn into “yeah, I showed it to some people and they thought it worked okay.”
There are many reasons why this type of information-gathering could lead to bunk conclusions, but primarily it comes down to the first axiom I discussed — the person in the next cube, down the hall, etc. is most likely not your target user. If they’re a software developer like you are, and they think it’s easy to use, your user may beg to differ.
More usability guidelines
These pointers are just the tip of the iceberg. If you’re interested in learning more, there’s a lot out there but I’d suggest starting with (and referring to often) this site. It contains a ton of good info for those just starting to think about usability and seasoned professionals alike.
Again, these are just some quick pointers and guidelines. There’s a lot more to the multi-faceted study and practice of usability and user experience, but hopefully this can get you started in the right direction!

Back in December we asked our customers, “who inspires you?” Armed with that information, we set out to ask those people a few questions.
Third in our series: Web accessibility expert Stephanie Sullivan.
What initially got you interested in the Web?
Honestly? It wasn’t the Web that interested me. It was code. I wanted to write C++ because, after doing some brain studies/testing, I arrived at the fact that my brain loves puzzles/research/detective work… and code seemed like it might be in that ballpark. My friend, Stuart Nealy, warned me away from C++ though — and told me I should check out HTML, the language of the Internet, instead. That’s what got me interested in the Web.
When I first started out, I had a lot of fun with graphics and design as well as code, since in my previous life I enjoyed drawing and painting. But in time, after dabbling in a bit of everything, I decided that the best way for me to be successful was to focus. And that focus ended up being in the area of client-side development.
I’ve read many references to your speaking style. How would you describe it?
Well, I’m a pretty high-energy person by nature — and I’m also a big goof with a quirky sense of humour. I get great feedback from my presentations and I try to keep things fun. But sometimes my passion for Web standards and for helping people really “get it” can make me seem a bit serious. And, well — that’s serious stuff!
What do you like most about speaking at conferences and other events?
That would definitely have to be connecting with other geeks. I really, really love getting an opportunity to converse with other people who do what I do. Sadly, I find that at home, most of my friends really don’t grok what I do. So if I start babbling on about something work-related, their eyes glaze over and I instantly lose them. At a conference, I love the opportunity to talk with such geeky people that I can be “lost” myself on occasion. The other reason for speaking is the enjoyment of the “aha moment” — helping people understand a core concept that perhaps never quite made sense before. That’s extremely rewarding.
You have inspired many people with your work, but who inspires you — either in the Web 2.0 world, or just in general?
Oh gosh — there have been many inspirations over the years (most of which are now friends)… everyone from Molly Holzschlag and Eric Meyer to Al Sparber, Mark Wubben and Ray West. It totally depends on the subject at hand. Anyone who’s doing something they’re passionate about is inspiring to me. And let’s face it — the Web is a wonderful melting pot. We share with each other, learn from each other and give back where we can — that helps the next “generation” of the Web get where they need to go as well. I just hope in time, we can attract some younger women — and help them realize this is a rockin’ cool job to have and way more fun than they thought. I mean, what’s better than workin’ and hangin’ with cool, smart people?
Since we are an online invoicing service I feel the need to ask: how do you bill for your services?
I usually bid by the project, but keep track of the hours. Meaning, I figure out the approximate number of hours I think it will take — and then double it so I might be closer to reality (though early on, I found tripling my estimate to be closer to the actual time it took), and that’s my bid. But I then keep track of scope and time so if it gets too far outside the realm of my bid, we can adjust.
I once had a program that recorded the time on each project. Only, I’m so freakin’ ADD, and I bounce around so much, it wasn’t very helpful. So I actually use either a text file (per project), or a notepad (yes, the kind you write on with a pen) and then do my billing from that. Not a very technical way I’m afraid.
Anything else our readers should know about you?
Sure. I love to meet people when I’m speaking so please come introduce yourself if you’re at an event I’m attending. Don’t be shy. (You can check my Web site for my schedule.) The book Greg Rewis and I have been writing for the past year, “Mastering CSS with Dreamweaver CS3″, is finally going to be released in late March. It’s a project-based book that utilizes the CSS layouts I wrote for Adobe that are included in Dreamweaver CS3 (the book teaches DW and CSS together which is unusual). I’m also currently a developer for a company called Miskeeto, building Web sites for socially conscious companies that want to make a difference. And we’re green (though I guess I complicate that with all my travel!).
On a personal note, I love playing beach volleyball — but I only get to play when I’m in town and can drag myself away from the little people inside my computer. I’m not real great with that work/life balance thing and tend to work 24/7.
Thanks for having me, Saul!
Thanks for having us!

Back in December we asked our customers, “who inspires you?” Armed with that information, we set out to ask those people a few questions.
Second in our series: brand identity afficionado FJ de Kermadac.
All of us here at FreshBooks are quite familiar with your work, but for those of our readers may not be, please give us the basics: age, nickname, serial number…
My name is FJ de Kermadec. I am “Frenchman of the Board” at Webstellung, the firm I founded in 2004. We specialize in identity and strategy — everything for a brand to be born and thrive, on- and offline. We also run a philanthropic program for the living arts and support independent artists.
I am based in Paris, France, but I travel quite a bit between Paris, the U.K. and the U.S. — anywhere Air France goes. In my spare time, I contribute to Mac related publications, which I find is a great way to keep learning.
I keep an updated summary of things on my personal site, FJdeKermadec.com.
What led you into the world of Web design? What’s forcing you to stay in the world of Web design?
I started designing sites as a way to put some thoughts and data online, things I wanted to share and get feedback on. I’ve never liked being forced into templates, so I quickly had to write my own tags. It started with a couple styling declarations and it quickly turned into entire pages.
There is always a better way to get a message across. Ways to write or present it to make it spread faster or stick longer in the minds of the recipients. My quest for perfection is a never-ending one, and it keeps pulling me back onto the Web.
Do you relate accessibility and standards with Web 2.0?
Web 2.0 is very much like Web 1.0 in that regard. There are companies and designers that care about standards, and others that don’t. The voice of standards is certainly easier to hear today than it was a few years ago as designers gain a deeper understanding of the Web and see the beauty of code as a part of an overall aesthetic.
Furthering the cause of standards and accessibility has always been a struggle and I fear it will continue to be one, regardless of how rich the Web experience becomes.
Are you a designer with a passion for standards, or a “standards guy” who can also do the design, or some other combination of the above?
I like to think I’m a combination of both.
To me, true creativity can only thrive on a basis that is sound and orderly, regardless of the medium. In paintings and print, it gives us eye-pleasing layouts and enhances the message, on the Web, it gives us interoperability, in music it gives us harmony.
I apply standards to everything practical in my life, from Web design to coffee cups. At Webstellung, we have standard rules and procedures for nearly everything. That allows us to build things, and then maintain them without worrying about how they’re built.
What’s the single biggest change you’ve seen in the industry in the last ten years?
Order and method are back. After being dazzled by the idea of constant change and permanent fluidity, the industry is finally reaching a productive position. New ideas and technologies are seen in the context of fundamental design and business concepts.
Clients come to us to build long-term projects. They’re still very much interested in the newest ideas and cutting-edge technologies but they see them as part of an overall strategy. Weekly re-branding is going the way of the Flash intro, which means brands can finally be given the attention they’ve been craving.
How do you decide the price of someone’s site design? Is it a formula or are the rules re-shaped for each client?
Web work is only a fraction of what we do, as we focus first of all on brand and message.
However, all the work Webstellung performs is billed on an hourly basis and all our hours are billed at the same price. That way, clients can course-correct projects easily, without requiring a whole new contract to be negotiated. They also needn’t worry about the split between development, typography, design, music editing…
Branding especially requires that lots of strings be pulled and many specialists be called in — the same person cannot design the uniform of your lift attendants and put together your Web site. Our clients rely on us to make it all simple, and this means simplifying cost structures as much as we possibly can.
Of course, we’re in contact with our clients on a daily basis, so they know they won’t be surprised when the final hourly count arrives. We also keep a log of all hours worked so there’s no question of padding the bills!
One final detail, which is important in an international business, is that we bill our U.S. clients in U.S. dollars and our European clients in Euros. This adds a bit of complexity on our end but it takes a big variable out of the equation for our clients.
People who promote Web accessibility often aren’t the best designers, so their work can often be quite dull. How do you keep the spark of your visually appealing work?
I try to stay current in both fields. I consider myself neither a designer nor a developer but I strive to stay up-to-date and informed in every area my company works in. It’s no easy feat but it’s the only way to help our clients in a meaningful way — not just an efficient or eye-pleasing one.
I also have the opportunity to work with a terrific team and the final version of every project is born from repeated interactions between all persons involved.
Every member of our team is given an equal weight in projects. Our typographers can raise a red flag on a Web development project and Web developers often comment on business cards as we draft them up. That ensures everything we work on is cross-examined and analyzed by different “eyes,” ultimately providing a balance that is difficult to attain when a single individual covers it all.
Oh, and we are absolutely obsessive about QA, which helps a lot.
What are the biggest accessibility roadblocks you might encounter in an average day?
We’re here to solve the problems of our clients, and our clients are all active businesses. Active because they are very young, booming, or simply in an industry where waiting is not an option — think IT or fashion.
Some projects need to get out the door fast, especially those that are Web-based. I remember the time we designed and developed a streaming Web radio for a state museum in France in less than a week! (That was actually our first project ever.)
In those cases, one is often tempted to cut corners or take shortcuts, which is almost always the wrong answer. Distinguishing between real time-savers and convenient cop-outs is a constant struggle, whether in design or development. Accessibility is an especially tricky domain, in that it’s difficult to judge how a shortcut that doesn’t affect you could affect someone with a disability you don’t have, or who relies on a device you’ve never seen and cannot quickly test on.
How do you blow off steam? Have you ever burnt out?
I like to read — anything from fiction to a book on vi — go to the theatre or see a good operetta. Of course, being from Paris, I’m always up for a late dinner out with friends or a walk through the city at night. That’s one of my guilty pleasures and an endless source of inspiration — things happen when most people have gone back home.
How do you avoid distractions in the workplace? Put another way, how important is it to have a great environment for managing your workload?
I don’t. Design and development are creative endeavours and shutting the world out is no way to be creative. Of course, it is important to have an organized, logical and reasonably quiet space to work in, but life will always creep back in. Attempting to suppress your environment is a life-long endeavour that’s doomed to fail.
Having a great environment, however, is paramount. By great, I mean an environment that’s clean, healthy and organized. A place where you feel good and can stay in for a good many hours a day without bouncing off the walls, cutting ten years off your life expectancy or gouging out your eyeballs with the electric letter opener. Everyone will have his own set of criteria and a different idea of what makes a place “just right.”
FreshBooks caters to online creative types. What advice would you offer our readers on creating compelling designs, and growing themselves and their companies as designers?
Do not stop at providing the client with what they want, but take the time to understand, and provide them with what they truly need. Want and need are always compatible and I know of no client who will not listen to properly documented suggestions for improvements or developments.
The ability to read between the lines is what distinguishes a communication firm from a design factory that churns out brochures by the meter. Clients know and appreciate this.
If you could give one piece of advice to people just starting out in the field, what would it be?
You cannot and should not launch a business unless running it arrives at the very top of your personal enjoyment ladder, above all other activities, even those involving nudity.
[Editor's note: the opinions expressed in this interview do not necessarily reflect those of FreshBooks!]
You’ve chosen some pretty interesting fonts. Is it just a visual choice or is there something else driving the decision?
Our choices always start from visual and logical considerations. The tone and mood of a font is paramount to the building of a strong, genuine identity. In fact, if you have done your homework and know your client inside and out, you should never encounter any issue when selecting the right font: it will come to you.
Most of the time, the right-looking font will be from the right country or the right period too. Fonts carry a large cultural baggage with them, which people wrongly ignore. The right font is the one that looks right and ties into your brand inside and out.
We don’t do many software reviews here at FreshBooks, but every once in a while there is an application deserving of note, and CSSEdit is most certainly one of those apps.
If you hadn’t guessed, we really, really like our accessibility and standards here at FreshBooks. We’re always working hands-on designing our application, our Web site and our blog. This means a lot of our work flow involves tweaking and adjusting the little things in our CSS.
There are several options in both the PC and Mac worlds that allow you to visualize your work before you take that latest layout live. Many show great promise but are stuck in the dreaded version one, or even beta. Some are just too complex, making the simple jobs complicated, all the while hoarding valuable system resources while you switch between Photoshop, Illustrator and whatever else you run during your standard work flow.

Enter CSSEdit, which has everything one could want in an application. Simplistic design, easy learning curve, visual styling, lightweight footprint and a host of features to increase your productivity and allow you to focus on getting your work done. Designing is a visual world, and CSSEdit allows you to code, reference and see your designs in real time, easily and powerfully.
Features
Preview: Gone are the days of make changes, upload, refresh, repeat. CSSEdit’s built in preview and X-ray features make finding errors or locating erroneous code as simple as using your eyes. X-ray determines where the element is on your page, so you can discovering how elements are interacting.
Selector Builder: If you work in Web standards you can imagine creating more advanced selectors can become quite the learning experience. Selector Builder is a feature that removes the guessing game and lets you work in plain English.
Powerful source editing: Repetition be gone! CSSEdit automatically adds brackets, (semi-)colons and appropriate spacing for you. If you encounter a style sheet from someone who didn’t have that luxury, you can always do a re-indent to immediately apply your spacing settings. Tada!
Milestones: We all have faults and can obviously make mistakes — and web browsers, like people, are no exception. If you happen to break something while trying to adjust for one of these “browsers” you can use CSSEdit’s milestones to go back to a previous time and figure it out. It lets you fix bugs without fear of losing your valuable work.
Verdict
I’ve been using CSSEdit in conjunction with TextMate leading up to this review. With the switch I’ve managed to remove some of the much larger and more expensive Web design behemoths from my repertoire. The big application companies would do well to look at the way apps like CSSEdit can slip so smartly into a designer’s work flow, removing overhead and streamlining production.
With a price point of $29.95 USD, creating Web sites has never been so rich, or affordable.

Back in December we asked our customers, “who inspires you?” Armed with that information, we set out to ask those people a few questions.
First in our series: Web standards guru Eric A. Meyer.
For those of our readers who might be unfamiliar with you, please give us the basics: age, nickname, serial number…
I’m in my late thirties and never really have had a nickname. They just don’t seem to stick. Similarly, my serial number was filed off years ago. Don’t tell Homeland Security.
Let’s see: I hold a B.A. in history with a small clutch of accompanying minors; I spent two years working for Netscape (long after the really good stock options had been issued, sadly); I’m a big fan of progressive and hard rock but the overall scope of my musical tastes borders on the indiscriminate; and I live in an inner-ring suburb of Cleveland, Ohio, with my wife and daughter. I love it here, so much so that I’ve turned down more than one job offer from Silicon Valley firms because they all would have required me to move out there.
And of course I’ve written six books and a whole bunch of articles, all on the topic of CSS and Web standards, which is what got me on your radar in the first place.
What led you into the world of Web design? And what’s forcing you to stay?
I fell in early, first encountering the Web in late 1993 and CSS in mid-1996. I was just in the right places at the right times. What keeps me here is what lured me onto the Web in the first place: I want to make it as easy as possible for people to share information and experiences.
Do you relate accessibility and standards with Web 2.0?
Certainly! Web 2.0 is just Web evolved. Everything there is built on the same basics, only now it’s been made more complex (and, arguably, more advanced). The problem is that not enough people doing Web 2.0 stuff are thinking about accessibility. The greatest fade-in-pop-out effect in the world is wasted if its technical execution blocks some users from your content.
Are you a designer with a passion for standards, or a “standards guy” who can also do the design, or some other combination of the two?
I’m a “standards guy” who can explain the technology to people who are designers. Designer, not so much. To the extent I can be said to have a design sense at all, it can best be described as “minimalist”. And that’s the charitable version.
What’s the single biggest change you’ve seen in the industry in the last ten years?
Technologically, the adoption of AJAX and related techniques, which make the browser much less dependent on full-page round trips to the server. Professionally, the success of web standards as a best practice — there was a time when that seemed an impossible dream.
What’s the first Web site you ever designed?
The main Web site for Case Western Reserve University. They’ve long since replaced it, and rightfully so; that was an early 1994 design and we’ve kind of moved on. Then again, I’m not convinced their current design is really an improvement.
How do you blow off steam? Have you ever actually burnt out?
Burnt out? Who has time?
How do you avoid distractions in the workplace? Put another way, how important is it to have a great environment for managing your workload?
I work on my own and have a third-floor office, so the only distractions I have are those I bring myself. I don’t know what makes an environment great besides good music and the ability to turn it off as needed, though, so I’ll have to pass on that one.
What do you want to be when you grow up?
An astronaut.
What blogs do you read most often?
The ones I follow that update the most often.
If you could give one piece of advice to people starting out in the field, what would it be?
Love it or leave it. Seriously, this is not a field where you can coast by on “it’ll do for now” or “eh, it’s a living”. There’s too much need to be creative and sharp, and there are too many nagging little problems to deal with on an ongoing basis, to be doing this for anything short of love.
When you find yourself with rare downtime, where can we expect to find you?
What is this “downtime” of which you speak?
Is there anything else we should know that you aren’t telling us?
Because I just wasn’t busy or stressed enough, I founded a conference series with Jeffrey Zeldman called An Event Apart. It’s been going like gangbusters and I’m very proud of what we’ve built, so I always have to bring it up. In fact, I have a wallet full of baby conference pictures if you want to see them.
The FreshBooks headquarters can be a busy place. At any given moment there are phone calls, product discussions, and programming banter clogging the airwaves. Combine that with our open-concept office, which means no cubicles, walls, or other sound-dampening barriers, and you’ve got (at times) one distracting work environment.
I’ve found that I work best when I’m totally focused on the task at hand. Any little distraction, and that huge chunk of code I was juggling in my head — it’s gone, and my productivity with it.
My solution? A pair of studio headphones from Audio-Technica I picked up on eBay back in August. Now when I need to get something done, I pop on my phones and blot out the world with tunes from my iPod. I can’t hear my co-workers and they can’t hear me, even with the volume cranked — which is great, because I listen to some pretty embarrassing stuff.
My self-imposed “audio prison” has become a shining beacon of productivity around the office. Mike’s joked about buying sets for the entire office, and Justin’s test-driving a pair of heavy-duty Sennheiser’s as we speak.
I just got my most recent copy of the Harvard Business Review, and there is a lengthy interview with Amazon founder Jeff Bezos in it. Here’s what he had to say about competition:
“We don’t ignore competitors; we try to stay alert to what they are doing… But a lot of our energy and drive as a company, as a culture, comes from trying to build… customer focused strategies… I think they work better in fast-changing environments”.
I believe many companies spend too much time setting strategy against what their competitors are doing—especially in large organizations like banks. One of the things I love about FreshBooks is our proximity to our customers. Everyone on our team answers the phone, replies to e-mail and is in contact with our customers, and we make decisions and set strategies based on the close relationships we have with our community.
When people ask us about competition, from now on I’m going to direct them to this post.

Interested in viewing your invoices and collected revenue in a nice looking graph? Now you can with our new graph generator.
A few months ago, we released our redesigned API which gave you the ability to access and update your FreshBooks information for your custom solutions.
At that time, I released a nice little tool to import your items to your FreshBooks account from comma delimited text. This month, I made this easy to use graph generator with the help of the LastXgraph PHP library and the FreshBooks API.

All you have to do is enable your API for your system and enter your API credentials. Next, click the large submit button and, presto!, a nice graphical representation of your invoices and collected revenue appears.
The source code is written in PHP is available in the sample code section of our developers section.
After countless hours of testing, we’re pleased to announce the total redesign of the FreshBooks interface.
Highlights of the new release include:
- account statements;
- lighter, faster pages;
- a colour picker that is really fun to use;
- support ticketing has received an interface update;
- and again, total interface redesign.

We’ve affectionately named this release “Sexy Beast” (Daniel bought us the cake to celebrate the release… and yes… it’s an ice cream cake).
We’ll be spending today taming the beast (read: squashing any bugs we may have missed in our testing) and generally tweaking things. You can expect more tweaks and improvements in our upcoming release. As always (and since this was such a big release), if you come across something we should investigate, please send us a note. Otherwise, we would love to hear what you think of the new design — please comment below and let us have it.