Tag Archives: Web Design

small business

What good is a website?

During a conversation with a friend and business owner, he said that he didn’t care about having a website for his businesses. For him, it didn’t make sense.

I don’t care if someone in California wants to see what’s going on.

That makes sense only if you don’t understand that local customers — and potential customers — use the Web on a daily basis. They might use the Web before visiting your business — at their home or even in the parking lot.

Remember, the Web isn’t just for desktop computers anymore.

Here are three ways a business who doesn’t need a website can use a website:

  1. Encourage people to sign-up to your new email list. If you’re a good business person and your customers like you, then they’ll want to hear your expert opinion. Email marketing (‘ol school!) is still the most effect way to encourage sales.
  2. Establish and define yourself as an expert in your field. Whatever business it is, it doesn’t matter, you’re an expert compared to your customers. People who use the Web are starved for information, and on your website you can be a source of information.
  3. Become ingrained in your local community. The only way to become part of the conversation on the Web is to have a presence on the Web. That includes providing opportunities for customers to review your business and having online conversations with customers.

Whether you like it or not, your customers rely on the Web every day. Why wouldn’t you want to be where your customers are?

Is it okay to highlight how a website looked before I worked on it?

I’ve got one question for you, web designer pro: is it a dick move for a freelance web designer to point out how a site looked before they started working on it?

Here’s the context of the question. I’m a partner in a small design shop. We’re just getting our business off the rails (we’ve got clients and no live website for our business!), and we’d like to write case studies about our clients on the website to be. In one instance we’d like to show before and after screenshots of the site they hired us to redesign, along with text describing what we did.

The idea for having before and after screenshots of our clients’ websites came from plastic surgeon’s websites. They show before and after photos of their clients, so why can’t I?

I’d appreciate your feedback on this question. I have no sense whether it’s a dick move or not.

Photograph by Elizabeth Runder and republished here under a Creative Commons license.

Discover why I’m going fixed width on all my Thesis sites (and why you might want too)

I’m going fixed width (pixel based) on all my Thesis sites because I don’t want them looking like just another apple in the Thesis barrel. Now, please read the argument and rationale.

I was having a conversation with another Thesis developer last week, talking about what we liked most and least about Thesis, when I realized that one of the things that bothered me the most had nothing to do with Thesis itself, but the people who used it.  No, the problem isn’t that I personally dislike people who use Thesis.

Many people who use Thesis never get radical and make highly customized Web sites. Look at 100 random Web sites built with Thesis and you’ll probably find 80 of them very “Thesisy”; that is, the sites all have a common look or pattern to them because most of the default design options haven’t been changed very much. To change-up the common Thesis look, people need to learn some new tricks or hire the people that know the tricks. (I’m not going to link to examples of Thesisy sites because that wouldn’t be fair.)

Why is this Thesis pattern of Web design propagating across the Web? There’s a simple explanation, I think. People have the misperception that Thesis is a theme, though it does have some theme features (the design options). Thesis is really a framework (Wikipedia entry for framework). The Wikipedia entry details 4 elements of a framework:

  1. inversion of control
  2. default behavior
  3. extensibility
  4. non-modifiable framework code

By that criteria, Thesis is a framework; however, in addition to a default behavior, Thesis includes default design elements that are too irresistible not to use. If there was a framework purity test, the design options in Thesis would probably be out.

This is why I’m going with fixed width (pixel based) Thesis sites: because I can. And hardly anybody else it doing it. Thesis is a framework; I’ll do the design, thank you.

What do you think? Get it off your chest. Leave a comment below.

Photo by *Kicki* and republished here under a Creative Commons license.

Do you make these image mistakes with your Web site design?

Yes! Ninety-five percent of Web design is typography. That’s why that other five percent — images and video — is so important. If your design goes screwy with images or video, it’s like a turd floating on the Web page. How can you read the text with that turd floating in the sidebar?!

Since I began working with the Thesis theme, one thing has bothered me: the scaling of images in an em-based design. Along with that, I have one other note about effectively displaying images in your Web designs.

Of course, Thesis isn’t the only theme scaling images in an em-based design, but I’m going to use this as an example. Actually, other than two minor issues, I’m a huge fan of Thesis. Hey, not everything is perfect.

normal size image, not scaled
normal size image, not scaled

Here’s the problem: if you’re working with an em-based design and you’ve got images that are supposed to 100% span a column or header, then you need to also scale those images with an em-based formula, otherwise the images won’t span 100%. There’s no way around it.

Let’s look at this example from the Copyblogger sidebar. The right hand sidebar includes some image links that are scaled to the width of the column using ems. The images are 260 pixels wide, as you can see with the image to the right.

as it appears with em-based scaling

But, look at the image to the left, which is from a screen grab of the site in default size on Safari for Mac OS X. (The same thing happens to a lesser degree using Firefox for Mac OS X.) See the difference? That’s what I see every time I go to Copyblogger. Notice the quality degradation of the image, how the edges are blurry? That’s what happens when images are scaled using ems (or any relative measure for that matter).

How did they scale those sidebar images? Using this rule in the CSS:

 

li.widget_premium a img {
display: block;
width: 26em;
height: 12.5em;
background: #d4d2c3;
}

 

Hey, it’s not my site. They can do what they want, but I think because most Web sites are typographically intense, images that are used should have pop.

What are some other options besides scaling images relationally? You can go with a fixed width layout, then using images that don’t need scaling isn’t a problem. You might also try creating images without scaling and centering them in the column. The only problem is that there might be a lot of space around the images because they aren’t filling the column. Other than that, do you know any other solutions that don’t require em-based image scaling?

Don’t scale images with HTML

I have one last similar note about using images in your Web designs.

Believe it or not, people still use HTML to scale images instead of using an image editing program. At least a half dozen times a week I see HTML scaling of images on Web sites, which then slows down entire pages from loading quickly. You’ve seen what I’m talking about: the page is completely loaded except for some images that seem to be churning away, loading slowly from top to bottom.

I did this on purpose with the image to the right, which is really 1024 pixels wide, though using HTML it’s scaled down to 206 pixels wide using width="206" in the <img> tag (right mouse click and “view image” to see what I mean). The image might look fine, but it’s slowing down this page when it loads. Also, sometimes the image might not look so fine if you haven’t figured out the correct height/width ratio before doing your HTML scaling.

Those are just two issues I see with using images in Web design. Do you have any others? Please leave them in the comments for everybody to learn from.

Photo by thebudman84 and republished here under a Creative Commons license.

The worst top 10 lists

I’m sick of it. From now on I’ll be boycotting any “top” list when the content is spread over multiple pages, just for the sake of increasing page views. Because, that’s what it’s all about folks: getting you to view more pages on a site.

Creating lists on Web sites is a popular and proven trope; people love to read lists, no matter if they’re baseless or not. Lists are fun! Take a look at the search results for “top 10” and “top 7” (for some reason 7 is an effective number if you want more reader response).

Never mind the fact that you’re probably not any likelier to click on the ad on page 5 of the list. It’s all about increasing the page views so that Web sites can impress advertisers.

Let’s look at the numbers. If 100 people click on all 10 pages of a top 10 list, that’s 1,000 page views, opposed to just 100 if the list was on one page. Apparently the extra bandwidth charges still make this tactic profitable. Maybe bandwidth is too cheap?

What are your favorite examples of the worst top 10 lists?

Shovel ready Web design projects

Warning: Politician Ahead!!!
Creative Commons License photo credit: The Rocketeer

Talking to a potential client this week and assessing the two different Web design projects he wanted to do, I suggested first working on a nice, basic redesign of his main business site. That site was in desperate need of a design (it doesn’t currently have a design to re-design!), and as I told him, his business site was “shovel ready” for a Web designer to start work, while his other projects would require me to wait for him to write some content and collect assets.

In terms of any economic stimulus package here in the States, we’ve heard a lot about the federal government looking to fund “shovel ready” projects, so what the hell was I trying to say to my client about his site being shovel ready for a new Web design?

While his current site is a mess in terms of design and usability, I can also recognize that the site has a bunch of great content—text and some images—that just needs to be shaped with a nice Web design. I wouldn’t have to wait for him to write any content; it’s all there!

That’s shovel ready for a Web designer: all the content is waiting, just agree on the list of deliver-ables, and the project is good to go. I’ve found many potential clients aren’t ready for a designer to step in because they don’t have their content together, and some even think me writing the content is part of the package. Give me a shovel ready Web site any day!

How to stop working for free?

dollar signHave you noticed that if you show a bit of aptitude at either web design or computers in general, most people will just assume that you’re on call 24/7 for every one of their questions? These people never take into consideration whether you might actually like to get compensated for your work, even if it’s just through barter or trade. Lately I’m feeling like an ATM machine, I get so many withdrawals but very few deposits.

This morning I received an email from someone I hardly know asking how to rid of his computer of virus’. I wanted to tell him to first drop the computer on his foot, break the foot, get the insurance money, PAY ME, then I’ll tell you what to do!

There are hundreds of articles like “how to get people to work for free“, but hell, somebody give me advice on how to stop this!! Everybody is looking for computer and design labor, and there are trains full of people who are skinflints, but nobody with 2 nickles to pay my fee!

Pay the monkey! Pay the monkey! He’ll dance all night long!

UPDATE:  Another thing that’s astonishing are the number of people who ask you for free help or advice, then never say “thank you”.  That’s happened three times just this week . Are you telling me that in addition to not paying me, you’re going to be rude to me?

MORE UPDATES: Why would anybody send me a link in an email with no explanation? I thought the purpose of the link was to trigger action on my part (more free labor, of course), but it wasn’t. It was only a friendly email to make me aware of a flash mp3 player that I’ve known about for two years. Here’s a good rule the thumb: unless it’s some particularly tasty, free porn, do. not. ever. send me a link without explanation.