The web equivalent of donating an organ

Thomas Welfley Dec
14

When we first started building @libs, we immediately saw a flaw in our viral adoption strategy. The username ‘libs’ was already registered on Twitter. This meant that when someone mentioned our game in a tweet, the text would be auto-linked to an account that we didn’t have control of. We were so disappointed about not having ‘libs’ that we decided not to invest much time in building a Twitter presence for our app. With the obvious name taken, it just didn’t seem likely that our users would find it without some blatant linkage from the @libs site or spamming the heck out of the #atlibs hash tag. Neither of these options were particularly appealing.

transplantI’m not really sure why, but I decided to message libs to see if she’d be willing to give up her username. Much as I expected, she never responded to any of my @ mentions, some of which offered her money. Those of you that are following me on Twitter probably giggled about the hopelessness of it, but I felt like I had to try.

Days went by and we eventually gave up on ‘libs’ and moved on. Match Strike launched @libs, and then a little while later, we came back to it and added Facebook support. We were really happy with it, but when you’re a perfectionist ignoring the little things only works for so long. Eventually our discussions came back to the missing piece of the puzzle; a presence on Twitter. At first, we spent a lot of time coming up with alternate Twitter usernames for our game. Sadly, they just didn’t seem to fit. ‘Atlibs’, for example, is stunningly redundant. Longer usernames, like ‘playatlibs’, seemed inelegant.  Finding an alternative that we would be happy with seemed hopeless.

Just as we were giving up for a second time, we noticed that libs had been posting all of her tweets from My Opera! I immediately hopped over there, found her blog and sent her one last, desperate plea. To our surprise, she promptly responded with the following:

“In respect of your difficulty, the name isn’t for sale but I’ll let you have it :) and hopefully it will bring you luck.”

We subsequently scheduled a time for her to change her user name (lostnbrainspace — show her some Twitter love!) and we registered libs. In the coming weeks, we’ll explore ways of using it to boost the virulence of @libs in conjunction with our recently deployed Facebook integration.

After working in web development for such a long time, it becomes easy to overlook that outsiders often think of the Internet as a shadowy realm filled with people that want to steal identities or otherwise destroy lives. The insiders know that it’s really just like everywhere else; there are some bad neighborhoods and some bad people about, but there are kind, generous people too. Lostnbrainspace is one such individual. She gave up something that was important to complete strangers a world away and asked for nothing in return.

Posted in , | 2 Responses

Updating a logo? Bring it to a boil.

Rex Riepe Dec
09

Whether you’re updating your company image or simply evaluating how memorable your logo is, sometimes boiling it down to basics can help.

Boiling_water

I wrote about brand perception and brand image before over on Fedorable, and some of that thinking applies here. Brand perception is how customers see a company, and brand image is the actual stuff that the company creates. There’s usually a big gap here, even when it comes to something as simple as a logo (which is not in itself a brand, but rather a small part of it).

Very few people have photographic memories, and when a brand is brought up in the customer’s head, there’s usually an associated logo.  This thought is where brand perception and brand image meet. It’s the thought that you need to be designing for.

Try it. Think of the logos for these companies.

Nike McDonald’s Facebook

Got some images in your head? Good. Do you think you could draw them? How about pick them out of a lineup of similar logos?

Keep this simplicity in mind. Most people could produce a semblance of these logos with a pen and piece of paper. The same can’t really be said for complicated logos involving large sketches, gradients, or multiple elements. State flags make for great examples. Here’s Florida’s:

florida-sm

If a logo is as complicated as the seal in the middle of this flag, then it’s got problems. Here are a couple methods for simplifying a logo:

Simplifying an existing logo

I don’t feel like picking on anyone else’s logos, so I’m going to go ahead and use the Match Strike logo for this example.

matchstrikelogo

It’s already pretty simple. But if we wanted to simplify it more, we could. The method I typically use here is trying to recreate the logo, using only two colors: Black and white. This brings out the shapes that will stick with the audience best. If the logo you’re working with relies heavily on color, you can cheat here and use a third color, 50% grey. Here’s my Match Strike result:

matchstrikelogo-simplifiedThe flame and match are still easily identifiable, even though I had to cut out a few color distinctions. If your logo is still recognizable in this state, then it’s probably simplified enough to really stick in someone’s head. If it looks like a muddy mess, then consider throwing out the same elements that make it hard to recreate in two colors.

If it looks okay, then try working forward from this point. If you can simplify the logo, consider just using the simple version as your new logo.

Creating a new logo

The best advice I can give for creating new logos is to start off with a rough, black and white sketch. You can evoke a lot of emotion and get a lot across in a single sketch. They’re also quick, letting an artist produce multiple logo concepts in a short amount of time.

Limiting yourself to two colors also keeps you from expressing too much, keeping the logo simple. I’ve used this process for a while now– here’s one of my earlier logos (below is a  suggested color palette, and the finished logo on the right):

murphybedssouthwest

Even though the end result is a pretty complicated logo, it didn’t go too far in my mind because it was easily represented in the concept. I should note that I used the “cheat” method here of 50% grey. If it’s something that we learn again and again in the logo design world, it’s that rules don’t exist– just suggestions.

Posted in | Leave a response

“Do no evil” vs. “Don’t be evil”

Rex Riepe Dec
06

Google’s informal corporate motto is “Don’t be evil.”

I’ll repeat that: Don’t be evil.

vaderI stress this because the motto is one of those phrases that gets exaggerated given some time to circulate in the community. Most frequently it’s twisted into “Do no evil.” It’s like Kanye’s famous quote that he never said, “George Bush hates black people,” and Darth Vader’s ever-popular unquote, “Luke, I am your father.”

In Google’s recent purchase of Etherpad, a lot of people got nervous. They called foul since Google was violating their own nonexistent corporate policy of “Do no evil.” They weren’t. One can do evil and still not be evil, given the right mixtures. If Gandhi had kicked a kitten at some point in his life, I’m sure we’d all still consider him an alright guy.

Google themselves have commented on this, back in 2006 when they tangled with Chinese censorship. Schmidt said they put together an evil scale to make sure they were still in the clear, and that not serving China at all would be a greater evil.

Now it’s a moot point, of course, since Google has decided to open-source Etherpad instead of completely crushing the project.

But still, let’s remember to hold Google to the standards they actually espouse, and not the ones that we make up.

Posted in | Leave a response

Building a Website? Beware the Goblins.

Thomas Welfley Dec
02

So, you’re a business owner and you’ve decided to build a website. That’s fantastic. You’re about to embark upon a journey down a road paved with gold, lined with money trees that weaves through fields filled with goblins. Yes, goblins. We’re not talking goblins that are actually nice but simply misunderstood; these goblins are ferocious. They want to capture you, eat you, and sap your business of whatever monetary resources you’re ready to commit to building that fancy new site.

goblinDon’t be discouraged. The potential rewards are worth the risk, and this article should help you stay as far away from some of the nastier goblins as you possibly can.

Don’t drop the ball

Business owners have this awkward tendency to think about websites like phone book listings back in the day. You have to have one, but it doesn’t really need to be anything spectacular, right? Even if it’s bad, at least it’s there? This kind of mindset is bad news. Your website isn’t your phone book listing, it’s a virtual addendum to your storefront. A mediocre ad in a phone book might not hurt your business too much, but running a shop that looks like a run down shack abandoned sometime in the early 90s certainly will.

With that on the table, repeat after me: Having an awful site is a sure-fire way to obliterate consumer confidence.

Let’s say I’m looking for an A/C repair service. If I google “A/C repair Orlando” and I click on 5 links, the first thing I’m going to see is how good or bad the site is. All else being equal, I’m going to go with the company that has the better website because it says to me that they are serious. It might not be fair, but judging books by their cover seems like a pretty good strategy if you don’t know how to read and I certainly don’t know anything about A/C repair.

Don’t hide the communication tubes

If you’re not selling your products directly through your site (and perhaps even if you are), you need to have all of your contact information out there as easily accessible as possible. I see sites all the time that have just a contact form or just a phone number. Don’t make your customers think. If for whatever reason they’ve decided they need to call you, they better not have to reformulate their strategy because your phone number is hidden or not there at all. Similarly, if they expect to contact you with an e-mail or contact form, that better be there too. Otherwise, you’re creating a completely unnecessary barrier for your customer.

Furthermore, you should consider that some people don’t like to speak to strangers on the phone and some people might even be frightened by the prospect. Your willingness to put your phone number or address out there is admirable, but that doesn’t excuse you from also putting up that shiny contact form and/or e-mail address. If you try to skip it, your customers will go somewhere that’s willing to communicate with them on their terms.

Don’t let them leave without a reason to come back

If you managed to get a customer to go to your site, you’re doing great. Maybe they even bought something from you or they contacted you to inquire about some service you offer. It’s time to relax, sip some warm tea, and eat crumpets, right? Wrong!

You need to give that customer some reason to come back. Six months from now when they need more of whatever you’re pushing, they might not even remember who you are. Ultimately though, it’s easier said than done. Here’s three ideas for free:

  1. Offer your customers a discount if they friend / follow you on Facebook or Twitter
  2. provide an RSS feed and/or e-mail subscription for coupons
  3. blog about information relevant to your customers (that’s what we do! subscribe!)

Don’t hire that ‘IT guy,’ ‘webmaster,’ or your cousin’s friend’s nephew

When Match Strike works on a client’s site, we put together a team that fills the following roles: a back-end developer (someone that specializes in dealing with our preferred ORM and databases as well as whatever libraries we’re using), a graphic designer / UI developer (Design, XHTML, CSS, accessibility, templating), and a sweeper (someone that knows enough about both of the aforementioned roles to act as a go-between). Sitting on the sidelines, they have a systems administrator and a project manager waiting with cool Gatorade.

When you post that hiring ad that says you’re looking for a ‘webmaster’ to design, develop, and launch your site or application, what you’re really saying is that you want a jack-of-all-trades. That’s dangerous. There are people out there that can fill all of the roles I specified, but trust me on this: they probably don’t want to work in a one person development shop. It’s likely that they developed all of those skills by surrounding themselves with people that are smarter than they are and they’re probably going to continue to do that.

So, why does anyone ever respond to those ads if they’re not qualified to fill all of those roles? Every developer thinks they’re a jack-of-all-trades. Even I think of myself that way even though Rex reminds me of my utter design ineptitude every time I see him open Photoshop. That’s just the way people in this industry roll.

If you’re absolutely set on hiring that web guy, that’s fine. Clients sometimes outgrow what can be provided via a maintenance contract and we get that. But you really shouldn’t start there. Go with a firm that has all the expertise you need to get you off the ground, then dump their maintenance contract and hire your guy. At Match Strike, we’ll even help you select our replacement if you play your cards right.

Posted in | Leave a response

5 things you might not know about CSS sprites

Rex Riepe Nov
30

CSS sprites are a pretty popular technique now, but I still see a lot of common mistakes or misconceptions when it comes to implementing them. Here’s a few advanced tips to keep in mind.

GIF or PNG-8 sprites should be grouped by color

If you’re taking advantage of the low file sizes offered by the GIF or PNG-8 format, make sure you’re not sacrificing any color quality at the same time.

threecolorbuttonIn this example image, we have three different color groups of buttons sharing one 64-color palette (intentionally low for demonstration purposes). If you look closely you’ll see the gradients in the buttons, especially purple and orange, aren’t looking so great. Here’s just the purple group in an image of its own, using the same palette limitations:

onecolorbuttonSince the palette is devoting more of its 64 spots to the one gradient, it appears much smoother. Generally try to keep color groups in separate spritemaps, especially if the images contain gradients.

If you’re using JPEG or PNG-24 sprites, you don’t need to worry about this grouping, although you may need to be worried about file size. Managing CSS sprites is often about managing the trade-offs.

Sprites without padding break when zoomed

Certain browsers will display CSS sprites in a weird way when zoomed in or out. If the sprite has padding between each element, the browser will display the padding instead of the element next to your image.

Here’s a close-up of zoomed Chrome and zoomed Firefox (3.5.5) on At Libs, focusing on the alternating image that uses a CSS sprite (in this case, the Django pony).

zoomcssspritebleedIn Firefox, the pony image blends in seamlessly with the surrounding image as it is designed to do (and so do the other switch-in overlays). In Chrome, however, the trick unravels  as the areas around the pony image on the top and left show up when zoomed. Firefox handles this better, but it’s not necessarily a mark against Chrome, since zooming generally seems to be a crapshoot.  Older versions of IE work like Firefox does here, while newer ones have the lines like Chrome. Right now, it’s best to just prepare for the lines.

To do so, just add 1px of padding between your sprites. In the fully-colored pony example, adding an additional 1px that matched the rocket background on all sides would have solved the problem. It’s a bit easier with a simple white background– just space out your sprites a bit.

Use Photoshop coordinates to quickly position backgrounds

Using a combination of rulers (View > Rulers) and the info box (Window > Info), you can easily find the top left coordinates of any image in your sprite map.  Move your cursor to the right spot and the coordinates are displayed for you in Info. Use these with background-position to easily place your background. Just remember to put negative signs in front of them. If that’s confusing, then think of it as moving the background to your image, not specifying where the background itself is. Photoshop top-left coordinates of X: 15 and Y:90 would become background-position: -15px -90px;. Easy, right?

Transparent ’spacer’ GIFs are bad

I still see this method in use now and again, and it leaves me scratching my head. After all the images on a page are loaded into a sprite map, the original img tags in the document will be replaced by a spacer image, usually a transparent 1×1 GIF. It’ll look like this:

<a href="/links"><img src="/img/spacer.gif" alt="Links" class="spriteclass" /></a>

The CSS spriting technique will then be applied to the img, with the transparent gif being stretched out invisibly. I prefer a different method which involves taking out the img tag entirely. I use this:

<a href="/links" class="spriteclass">Links</a>

Looks like a regular link, right? With some CSS we can turn it into the button we want it to be, using a technique called Fahrner Image Replacement.

.spriteclass {
display:block;
width:200px;
height:100px;
background: url('img/spritemap.png') -200px 0px;
font-size: 0;
line-height: 0;
text-indent: -9999px;
overflow: hidden;
}

The important bits here are display, font-size, line-height and text-indent. Make sure you use these values, or you’ll find your text popping up in some way in certain browsers.

With this method, you’ll find yourself relying on the img tag a lot less often, further separating your design from the semantic markup of your document. In the end, that’s a good thing. You’ll also kiss one HTTP-request goodbye when you stop using spacer.gif.

CSS Sprites shouldn’t add production time

Unfortunately most developers and designers have a bad first experience with CSS sprites. Usually a developer will learn of the technique mid- to late- in a current project. As a result, the first task he or she will be faced with is converting a site from regular old images to a full-blown CSS spritemap. Sometimes this translates to “CSS sprites are an annoying process that I have to do at the end of production.”

Well, it shouldn’t be that way. Converting a site is always tough, but designing from the ground up with CSS sprites in mind actually adds no development time. Sure, extra time is devoted to managing the sprite map and figuring out coordinates, but time is also saved by avoiding the hassles associated with multiple image files. Editing is easier. Uploading is easier. Time is also saved on markup end, with less img tags to worry about in the document itself. I’ve found that, in the end, it evens out on time, but saves on hassle.

That’s like a win/win. Or a draw/win. Either way, don’t avoid CSS sprites just because they made one project take longer.

Posted in | 7 Responses

Say ‘No!’ and Say it Loud

Thomas Welfley Nov
28

Perhaps the most disheartening experience that we’ve seen our clients go through is mistakenly hiring a developer or firm that isn’t capable of fulfilling a project’s requirements.  If you’ve worked in web development for any time at all, you’ve probably gone through this too. You probably had to be the one to tell a client that it’s going to cost them more money to maintain and expand a broken app than it would cost them to just start over. Watching someone realize that they’ve been ripped off is excruciating, and consequently, there is a strong tendency to feel animosity towards the individuals or companies that have put clients in such predicaments.

At Match Strike, we follow a simple rule to prevent our company from ever becoming one of the bad apples in our industry: We say ‘No!’ to our clients and we say it loud.

The Can-do Attitude

At a recent BarCamp event that Rex and I attended, a CEO from a local development firm gave a presentation about how he runs his company. He talked at length about presenting yourself to clients as an authority on as many technical matters as possible to increase the likelihood of additional contract leads in the future. He went on to say that developers should do whatever it takes to satisfy the client’s needs, even if it means learning new technologies. Based on the examples of success and profit that the CEO cited, it seemed obvious that he wasn’t recommending disclosing to the client a lack of experience in anything, ever.

This is exactly the wrong approach and it’s unethical to boot. Every time you do what the well-intentioned CEO suggested, you’re gambling with your client’s time and money. If you’re going to employ this strategy, you should, at the very least, fully disclose to your clients that you’d be using their contract as a learning opportunity. At Match Strike, if we’ve determined a strategic need to learn the technology in question and we have a strong relationship with the client, we’ll fully disclose the extent of our related experience and we’ll offer a discount to make it worth their while to give us the contract anyway. Otherwise, we’ll say ‘No!’

Say ‘No!’ and Say it Loud

Every time you swallow your pride and admit to a client that you’re not capable of fulfilling a need, you’ve demonstrated that you’re looking out for their best interests, that you’re not just saying whatever it takes to get them to sign a contract, and that you’re not willing to take their needs lightly. This is how you build trust.

Of course, saying ‘No!’ still leaves the client with an unfulfilled need. Match Strike maintains a decent sized network of sub-contractors that are way smarter than us when it comes to certain technologies. When we can’t get something done internally, we’ll explain that to our client and then we’ll try to find the right person or company and bring them into the fold. Not only does this provide us with opportunities to learn from experts, but we can take solace in the fact that adequately meeting our client’s need is much less of a gamble.

Admittedly, building a network of contractors is easier said than done. In my case, I was fortunate enough to spend years hand-picking and training the best new talent in the central Florida area, allowing me to build a long list of developers I can trust to get a job done. If you haven’t had similar opportunities, it’s time to start networking. Go to meet-ups, BarCamps, and engage people online. If you’re not surrounding yourself with people that are smarter than you, then you’re probably in trouble.

Our methodology may seem less lucrative because of how much it typically costs to out-source work, but generally speaking, it’s the right thing to do. In addition, we significantly reduce the risk of client dissatisfaction, allowing us to establish longer lasting, stronger relationships with our customers. The possibility of recurring payoffs and referrals in the future is potentially much more lucrative than risking a client relationship for a little bonus income in the short-term. That’s a gamble we can live with.

Posted in | 1 Response

« Previous Page
Subscribe to our RSS feed

Blurb

StrikePad is a blog devoted to the web development profession, written by the jerks at Match Strike.

Match Strike - Quality Web Development