http://www.davidraffauf.com/blog en david@aimtokilldesigns.com Copyright 2010 2010-04-06T21:37:53-08:00 http://davidraffauf.com/blog/introducing_our_referral_program/ http://davidraffauf.com/blog/introducing_our_referral_program/#When:21:37:53Z Do you know someone who needs a website? Why not make some cash? It’s easy.Do you know someone who needs a website?  Why not make some cash? It’s easy. Tell them to call me directly at (415) 615-2529, or email us at sales@davidraffauf.com.  When we quote $5,000 you get paid $500 when we get paid. It’s that simple. If you have any questions, feel free to call me directly at (415) 615-2529 or email us at sales@davidraffauf.com. 2010-04-06T21:37:53-08:00 http://davidraffauf.com/blog/the_evolution_of_community_online/ http://davidraffauf.com/blog/the_evolution_of_community_online/#When:22:57:16Z Henry Ford famously declared: “If I’d asked my customers what they wanted, they’d have said a faster horse.”  But when it comes to improving on a great idea, your community of customers is an invaluable source of ideas.   Henry Ford famously declared: “If I’d asked my customers what they wanted, they’d have said a faster horse.” But when it comes to improving on a great idea, your community of customers is an invaluable source of ideas. Humble Beginnings Years ago companies began to realize that their support forums were being filled with better answers from customers than from their own support staff. Customers ran into more errors, frequently undocumented, than customer service could anticipate. The myriad issues could never be fully addressed from inside the company. Armies of loyal customers were a better source for informed troubleshooting and often more responsive than the official support staff. This is where online communities got legs. Beneficial Mutations Not long after, sites like Yelp and Digg took the idea further by building their whole businesses around user generated content–tech speak for community. Locals shared first-hand, credible reviews on Yelp; and techies shared their favorites findings online through Digg. In a recent move to Oregon, armed only with an iPhone with the Yelp app, I was able to find the best place to buy a mattress and the best place to eat brunch within minutes. This kind of spontaneous, informed decision-making was science fiction even ten years ago. Top of the Food Chain In 2009 we’re beginning to see this idea taken to the next step. Companies like GetSatisfaction and UserVoice are offering completely outsourced, community-based Customer Relationship Management (CRM) tools. Plug a couple javascript snippets into your website and you can collect feedback on errors, product suggestions, prioritization of customer feedback and much more. This kind of community feedback gives product managers and producers an invaluable way to plan new features and improve their designs. And the value of the community is so apparent that you can pay GetSatisfaction up to $899/mo for these benefits. Examining the Fossil Record First community drove support. Then community drove content. Now community is driving the direction of products. The good news is that there has never been more potential for products to realistically adapt to customer needs. Of course customer demands will still need to be balanced with business needs and other parties involved in your business. The bad news? I can’t think of any. What Does Community Mean for Your Business? Savings. Loyal customers can address many support issues. A quick look at a list of complaints, errors or bugs can help you decide which fixes to include in your next software release. Feature requests weighted by votes can help you determine the priority of features in your product roadmaps. Community can save you money and steer you in the right direction. 2009-08-06T22:57:16-08:00 http://davidraffauf.com/blog/pro_css_tips_advanced_selectors/ http://davidraffauf.com/blog/pro_css_tips_advanced_selectors/#When:18:45:41Z One of the most powerful but overlooked features of CSS is the ability to use CSS selectors to pinpoint content and style it.  There’s probably untapped power you’re missing.  Here are the advanced CSS selector techniques I use everyday. SyntaxHighlighter.config.clipboardSwf = '/javascripts/syntax-highlighter/clipboard.swf'; SyntaxHighlighter.all(); One of the most powerful but overlooked features of CSS is the ability to use CSS selectors to pinpoint content and style it. Here are the advanced CSS selector tips I use everyday. Use a namespace, even for your own website's components. By keeping all my styles specifically applied to the "poll" table I can guarantee they aren't accidentally applied to other tables in the future. table#poll {} table#poll tr {} table#poll tr th {} table#poll tr.odd td {} table#poll tr.even td {} If you decide in the future you like this style for all your tables, just remove the ID in the CSS. There's no harm in having the ID set in the HTML of the poll table. table {} table tr {} table tr th {} table tr.odd td {} table tr.even td {} Or, if this is one of a few styles, just change the ID to a class: table.poll {} table.poll tr {} table.poll tr th {} table.poll tr.odd td {} table.poll tr.even td {} Descendant vs. child selectors It's not uncommon to have deeply nested HTML. Let's assume you have a div#wrapper that contains some layout divs. To keep this simple let's say you want to set their border to gray. div#wrapper div { border: 1px solid #ccc; } Everything looks good. But maybe you want to add some divs inside your layout divs. Since we've used the descendant selector, these new divs will also receive a gray border. Before I knew better I attempted to fix the issue doing this: div#wrapper div div { border: none; } The problem is that you'd have to define an infinite list of nested div selectors to cover all the cases. The right way to handle this is to use a child selector from the start: div#wrapper > div { border: 1px solid #ccc; } Now, no matter how many nested divs are within your layout divs they won't receive the border. Use attribute selectors for forms and more If you're daring enough to use CSS to wrangle a form's appearance you've probably run into CSS like this: input[type=text] {} But did you know this is a generic pattern you can apply to any element? You could warn yourself about images with no alt tags with this style: img[alt=""] { color: red; } There are other patterns that let you look for substrings, first characters, and last characters of attributes. If you wanted to add an icon after all your .pdf files you could do this: img[src~=".pdf"]:after { content: ''; } I still have to remind myself that there's usually a better solution attainable via advanced selectors than adding more HTML that's really style related. Selecting on multiple classes at once Let's say you've got a photo gallery. You tag all your photo img elements with the class "photo": But you also need to highlight recent additions. So how do you say you want to select recent photos in CSS? img.photo.recent { border: 2px solid blue; } This is a practical tip that I use almost everyday. When I didn't know this I ended up with bloated HTML with lots of additional span tags. Learning more If you want to get even fancier there are additional examples you can find in the O'Reilly CSS Pocket Reference. You can select siblings for example by doing this: h2 + p {} But I personally haven't run into many interesting uses for this kind of specificity. It's nice to know it's there for when I inevitably learn what it's super useful. Thanks for reading this quick review of underused CSS tricks. It's by no means comprehensive but hopefully it will whet your appetite for finding simpler solutions. 2009-06-26T18:45:41-08:00 http://davidraffauf.com/blog/microsoft_doesnt_get_web_design/ http://davidraffauf.com/blog/microsoft_doesnt_get_web_design/#When:18:51:35Z At the risk of sounding like a whiny designer, I’m going to blast Microsoft for a minute.  They don’t get web interfaces or typical job roles for web teams.  I’m sure their tools are great for building web services, but building an interface can be needlessly difficult. At the risk of sounding like a whiny designer, I’m going to blast Microsoft for a minute.  They don’t get the web, or typical job roles for web teams.  My question to Microsoft is why would should a designer have to learn to program, or why should a programmer have to learn to design, in order to build a web app together? Let’s just get it out of the way that the “design” mode is useless for building pleasant web experiences.  It’s good for desktop apps and people making a living off tutorial books.  But it isn’t web ready. Therefor, I’ve spend most of my time in Microsoft’s front-end .cs files on a C# project.  If you want to pull any values generated by the codebehind files you need to know object instance names and properties.  I don’t mean that you need to be able to choose them from a context menu, you have to have the developer give you a list or resort to digging through their code.  This is insane.  PHP and Rails make this much easier.  Also, if you want to loop over some data it’s the same deal.  You have to use a repeater control or something similar. Smarty in PHP had this designer/developer relationship nailed years ago.  Rails also took a rather intuitive approach with some basic programming tools that a designer could quickly grasp.  Microsoft is seriously lagging. What this means to your web team is that either your designers will be sifting through code or that your coders will be writing placeholder interfaces for designers.  Neither of these are good situations, and will build unhealthy resentment and animosity within your team. Another problem with Visual Studio / .Net is that you do not have control over the final HTML that is spit out.  The IDs on all controls get rendered dynamically.  This rules out doing cool things easily with Prototype, Scriptaculous or other javascript libraries.  Sometimes there are ways to work around it, but they take a lot more time and are less than ideal. Also, prepare to have SPANs and DIVs peppered throughout your design where you don’t want them.  And don’t try to remove them, Microsoft sees these as unobtrusive code changes. This is the markup equivalent of having a dozen semicolons randomly inserted into your programming code, with no ability to remove them.  Have fun! The Visual Studio IDE is also obtrusive.  It doesn’t simply suggest changes, it will alter your code when you don’t want it to.  A common Prototype ID selector is $(‘ID_HERE’).PROPERTY_HERE, but good luck typing that in Visual Studio without erasing a bunch of auto-filled suggestions. I guess my basic gripe about working with .Net and Visual is that developing with it doesn’t match real world job roles.  It feels like they figured out a way to spit out desktop apps on the web and never examined what’s different online and off.  And their editor is like an annoying kid that keeps trying to prove why he’s smarter than you. I’m sure .Net (C#) is an amazing tool for building scalable web services.  I’m not a big Microsoft fan but I do understand that they can make useful tools, especially for the enterprise.  But Microsoft, please don’t pretend to offer a useful tool for creating front-end web interfaces. 2009-04-24T18:51:35-08:00 http://davidraffauf.com/blog/gui_magnets/ http://davidraffauf.com/blog/gui_magnets/#When:23:53:04Z Here is a nice tool you can use to plan forms and GUIs in a meeting.  They’re magnetic form controls that you can stick on a whiteboard.  What’s even better is that you can write on them with dry-erase markers.  These should improve collaboration with developers and producers.Here is a nice tool you can use to plan out forms and GUIs in a meeting.  They’re magnetic form controls that you can stick on a whiteboard.  What’s even better is that you can write on them with dry-erase markers.  These should improve collaboration with developers and producers. I’ve always wanted a way to collaborate on interfaces.  This should help bring the product manager and developers into your design process.  They’re a little pricey at about $30 per sheet with shipping, but I’m hoping they really help with planning sessions.  I’ll report back once they show up and I can try them out.  Check out the website.  I’m especially interested to see how the hold up to repeat use. If nothing else they’ll make for some novel gifts. 2009-04-23T23:53:04-08:00 http://davidraffauf.com/blog/how_to_tackle_a_design/ http://davidraffauf.com/blog/how_to_tackle_a_design/#When:23:02:33Z Do you need to come up with a website or application design, or redesign, and you’re not sure where to start?  This is a process I typically run through for the design portion of my projects.  These are some basic strategies that can be applied to many different scenarios.Do you need to come up with a website or application (re)design and you’re not sure where to start?  This is the process I typically run through for the design portion of my projects.  These are some basic strategies that can be applied to many different scenarios. What Do You Want Visitors to See? This may sound like a condescending question, but it isn’t.  It’s one of the hardest questions to answer, especially when there are multiple stakeholders for your website.  Think about your homepage.  Make a list of everything you could possibly want to show, now assign 10 votes to these pieces of content.  You can vote for one piece of content 0 times, or 10 times, but no fractional votes.  After distributing these 10 votes among your content, you’ll have a plan for weighting these elements visually within your design. What Do You Want Visitors to Do? It’s best if you can limit your most important pages to one call to action.  The action could be signing up, viewing a product or giving you a call.  But try to narrow it down to one thing.  If you have more than one action, try to color code them by audience.  Or, visually designate one action as the primary and have one or two secondary actions. Wireframes as Blueprints The goal of wireframing is to layout your pages and workflows.  They help to determine where items should appear, how large they will be and the order in which they will appear.  It’s really important to iterate over the wireframes until everyone is satisfied.  These wireframes then serve as a blueprint that everyone involved in the project can use to get started.  They’re your game plan.  They’re also big money savers; fixing solutions here is multiples cheaper than once you’re coding and doing visual design. Visual Design Generally there are two approaches to take.  You can look around at other businesses in your industry and try to develop a look that is similar to what they have.  This is the safe route and probably the least time consuming.  It makes you look credible but the drawback is that you don’t stand out.  Someone who visits your website might return to your competitor’s site to place an order, never realizing what happened.  If you’re willing to try to differentiate yourself, you should consciously break the visual language of your niche.  Pick a different color, a different voice or play up your key business differentiator.  I think you’ll get the most bang for your buck in the long-term from this approach. Signing Up, Subscribing, Contacting and Purchasing If drawing readers, customers or mailing list subscribers is your thing then this is for you.  You need an easy and obvious way for users to sign up or sign in.  Don’t ask a dozen questions, don’t sign people up automatically for emails and make it clear what the benefits are of signing up.  You want to lose as few people here as possible.  This is a major conversion point.  The same goes for making a sale.  Only require as much input from your visitors as is immediately required. Sharing Likewise, it’s good to make it easy for users to invite friends.  This could be an optional second step after signing up.  You can also build an audience by allowing visitors to easily share your site by email or on social bookmarking websites. That s a Good Start There have been volumes written on all these topics, but this gives you a rough idea of where to start.  As you can tell it’s a mix of business decisions, structure and style.  When working with a designer make sure they’re doing their best to learn what’s most important to your business and customers. 2009-04-23T23:02:33-08:00 http://davidraffauf.com/blog/the_art_of_games_panzer_dragoon_saga1/ http://davidraffauf.com/blog/the_art_of_games_panzer_dragoon_saga1/#When:17:47:50Z Panzer Dragoon Saga was one of the first games to attempt a combination of fine art and gameplay.  The visual style, sparse setting and amazing soundtrack made this rare game unforgettable. I’ve always been a fan of the Panzer Dragoon games, they’re stunning shooters.  They thrust the player into a desperate, post apocalyptic world where the powers that be are in a mysterious arms race.  In many ways the sense of isolation, desperation and discovery of the hidden mysteries of the world feel very similar to Dune. What changed with Saga, also known as Azel, was an amazing development in art direction.  Head artist, Katsumi Yokota, really made the world come alive with an amazing, fine art inspired visual style.  It also helped that, like the other Panzer Dragoon games, Saga was accompanied by a fantastic score.  All the elements of this game came together to create a game world that felt very mature and understated.  While this Sega Saturn game’s graphics don’t look too aged, I mainly remember this game by the concept art and the character of the story. The character designs rival work being done today on games with Hollywood sized budgets.  They are an interesting mix of the simplicity of Japanese character design combined with more Western style oil painting techniques. A testament to the quality of this game and its art style is that this is one of the rarest, and most sought after video games.  At the time of writing this article this 11-year-old, Sega Saturn game is selling for just under $200 USD. There are other amazing illustrators that lend their talents to games such as Yoshitaka Amano who works on the Final Fantasy series, but I think the art style for Saga translated more directly from concept to game.  It would be absolutely amazing if some boutique developer could figure out how to use the whimsical Amano style.  Where Amano’s concepts serve more as promotional art, Saga’s designs were pretty faithfully put into gameplay. The variety of styles used in concepting this game is amazing.  I love these rough marker sketches and although these aren’t the final designs used in the game they really capture the mood. I would love to see more illustration work from Katsumi Yokota.  This artist has gone on to work on the Rez and Lumines games.  While I’m glad to see that this artist has worked on other great games, it’s really disappointing to not have been treated to any more of his imaginative illustrations.  At the time it was a risky move to have a game that focused on the characters’ humanity and frailties instead of their god-like fighting abilities.  I hope future developers can learn something from this game and venture to make understated game worlds with a sense of humanity with which players can connect. 2009-04-09T17:47:50-08:00 http://davidraffauf.com/blog/building_better_bookmarks/ http://davidraffauf.com/blog/building_better_bookmarks/#When:05:53:00Z I find that regular bookmarks are a little cumbersome, live bookmarks are a bit stiff and visual bookmarks are cute but not all that useful.  I think combining all three allows for a quick way to get to everything I need and matches my workflow.Sorry for the alliteration, that’s a lot of Bs.  I was recently inspired by an article I read over at Information Architects where they discuss changes they would like to see in how FireFox handles bookmarks.  They did some excellent and inspiring mockups that got my gears turning, and that I drew from heavily for this post. They have some really good ideas that center around treating websites like we treat other media in applications like iTunes.  We can think of websites like albums.  They account for visually browsing all your favorite sites, organizing them in different lists and displaying some useful RSS data. I’ve always liked the idea of visual bookmarks like the ones Opera uses (but not quite like the ones Safari uses).  But I’d never thought of combining RSS information until I read IA’s article. The one thing that I wasn’t crazy about was either of the two ways that they used for browsing sites and articles.  I noticed that there is a mode of display in iTunes that would allow for a nice combination of browsing sites and seeing the most recent articles at the same time: the search results.  I did a mockup to show what this iTunes style visualization could like within FireFox, or any browser for that matter. Like IA, I used lists to organize websites.  These would work exactly like playlists.  You have a master list of websites, but you can have any website appear within any list.  If you want to view all there’s a list for that.  I also used their surf lists and history lists, because I think they all work with this single visualization.  Although I admit that their simple line item list of websites might work better for history considering you may have only viewed a single page on many websites.  I also like their idea of having an uncategorized list for new bookmarks.  When you have time you can put them in the right place. As you can see below, each website has a section where the latest articles are displayed.  This is the equivalent of the way albums and tracks are displayed in iTunes’ search results.  The logo and the attributes below it serve as links straight to the homepage of the website.  All the articles are links that are grouped together from newest to oldest. If you want to see older entries there are buttons for that.  These would either grab more entries from the RSS or a cache maintained in the browser.  All of the RSS content is searchable from the top right search menu.  I find that regular bookmarks are a little cumbersome, live bookmarks are a bit stiff and visual bookmarks are cute but not all that useful.  I think combining all three allows for a quick way to get to everything I need and matches my workflow. 2009-04-06T05:53:00-08:00 http://davidraffauf.com/blog/why_i_make_websites/ http://davidraffauf.com/blog/why_i_make_websites/#When:20:55:31Z The web is full of bad website designs, confusing jargon and overcomplicated navigation.  Most web design isn’t nearly as good as it could be.  I want to breathe life into your site, cut through the jargon and help you reach customers.The web is full of bad website designs, confusing jargon and overcomplicated navigation.  Most web design isn’t nearly as good as it could be.  I want to breathe life into your site, cut through the jargon and help you reach customers.  Your website doesn’t have to be the awkward nerd at the party, with lots of interesting ideas but no way to get anyone’s attention. With the rise of some traditional print design principles on the web we’re seeing a lot more elegance and style that’s typically reserved for magazines and annual reports.  But it’s not all rainbows and unicorns.  We’ve lost some of the energy and wonder we had in the pioneering days of the internet.  With the rise of print techniques online we’ve lost sight of the fact that this is a different medium than print.  We’re losing some of the innovation. Of course we all have to work within our limitations, and there are certainly enough to cripple innovation on any website: tight budgets, short timelines and the impenetrable nature of Flash to most search engines.  But we can work within these constraints to make amazing experiences.  Evocative stories, colorful characters, artistic style and simplicity are silver bullets in the world of constraints.  We see this all the time in movies, music and video games; and it works just as well online. The web is an inherently techie place but it doesn’t have to feel that way.  I want to make websites that capture visitors’ imaginations and stand the test of time. The internet has become a million cafes, college dorms, lecture halls and special interest clubs all rolled up into one convenient location.  Telling your story, providing a useful service or making people’s lives easier through your website is your way to reach people in this new marketplace.  I can help. 2009-04-04T20:55:31-08:00 http://davidraffauf.com/blog/whose_top_sites/ http://davidraffauf.com/blog/whose_top_sites/#When:04:42:31Z I’m a big fan of Apple design and the simplicity of their products, but I’m not in the “Apple can do no wrong” camp.  I always get a little creeped out when engineers in Cupertino try to tell me what’s most important to me, especially when it comes to websites. I’m a big fan of Apple design and the simplicity of their products, but I’m not in the “Apple can do no wrong” camp.  I always get a little creeped out when engineers in Cupertino try to tell me what’s most important to me, especially when it comes to websites.  With the latest release of Safari comes a seemingly cool feature, Top Sites.  They let me view an up-to-date gallery of the sites that I visit most often.  The only problem is there’s no way to permanently remove all those boring sites I have to visit, or recreational sites I don’t want appearing on my Top Sites at work.  Conversely, there are a few sites that I really like but I don’t frequent as often as other boring websites.  Why can’t I choose these sites? Another akward feature of Top Sites is that they cycle in partner sites for free advertising into your unused slots.  I much preferred Opera’s similar offering, where they allow you to choose which visual bookmarks I want.  I hope that Apple has plans for allowing me to manually pick my top sites in future releases. 2009-04-03T04:42:31-08:00