Web Typography Sins - Top Ten

- By Steven D.

While many designers have been quick to embrace web standards, it’s surprising how often the basic standards of typography are neglected. Here are ten deadly sins to avoid in your web typography:

1. Using hyphens instead of an em dash

If you need to interrupt yourself, do it with an em dash (—) instead of a pair of minus signs. This is a top pet peeve for countless editors.

2. Using periods instead of ellipses.

Most fonts provide a dedicated ellipsis character (…) to keep your type tidy. The ellipsis character fits the three dots into a single letterspace, which is especially beneficial for content that might be printed.

3. Using dumb quotes

These straight “up and down” quotes used in your markup should stay in your markup. In your content, only use them to indicate a measurement in feet or inches.

4. Double-spacing between sentences.

The antiquated practice of double-spacing between sentences seemed like it was finally laid to rest thanks to web typography. Just a few short years ago, it required manually inserting a blank ASCII space to commit this font faux pas. Now, some content management systems will actually format the double-spacing for you if you let them. Don’t give them the chance! Only use single spaces between sentences.

5. Improvising a copyright symbol.

Not only is it ugly and lazy, a copyright symbol hacked together out of a capital C and parenthesis might not even cut the mustard in court. Use the real McCoy (©), and bill your clients extra for the legal advice.

6. Using too much emphasis.

You can bold text. You can italicize it. You can underline it. You can even use all caps if you really need to hammer home your point. Just don’t use more than one at the same time.

7. Underlining your hypertext links.

Underlines cut right through the descenders in your typeface, making it harder to read. Instead of text-decoration: underline;, use border-bottom: solid 1px #00f; to draw a line below your text instead of through it.

8. Faking families in Photoshop.

If your font doesn’t offer (or you couldn’t afford) the bold, italic, or smallcaps branches of the family tree, don’t try to fake it in Photoshop. Sometimes you can get away with it in print, but at web resolutions, it’ll be a mess.

9. Not using accent characters.

I know how annoying they can be (especially when you’re writing about Ikea furniture), but if somebody’s name includes an exotic character, be polite and include it.

10. Not using CSS for capitalization effects.

I know it’s CRUISE CONTROL FOR COOL, but if you’re using caps (or lowercase) for decorative reasons, be sure to use the text-transform property. It’ll save a lot of trouble if you ever decide to change things later.

About the author

Steven D. is a web developer so secretive that he won’t even tell you his last name without entering a mutually-binding NDA. In his free time, he enjoys working instead of enjoying his free time.

My Secret Weapon to Getting Contracts

- By Hollis Bartlett

In my first days of freelance web design, I did all the right things to get business — web-site done, Chamber of Commerce joined, social media networking done. So why wasn’t the phone ringing? I suspect many freelancers feel the same way. The big question remained: where do I get business?

Then I discovered a secret weapon. I wanted local business, as it’s easier to build referrals that way. I went through the local directory looking at businesses without web-sites, or with very old and poor sites and made a list. I made a small brochure, put on some decent clothes, grabbed my business cards and actually physically walked into their offices! I got enough business within two days to keep me busy for months, and had a blast at the same time.

It seems many of us have trouble getting over the fear of actual cold-calling. We will do anything possible to avoid it. We will waste time on catching up on blogs, RSS feeds, Facebook, anything to avoid cold-calling, and still chalk it up as ‘work’. However, once you try this method you will forget all other marketing ideas.

So, if you are new into freelancing, or business is slow, try the GOYAKOD method — Get Off Your Ass and Knock On Doors!

About the author

Hollis Bartlett is a full-time freelance web designer & developer located in Nova Scotia. He loves the freelance lifestyle as it gives him flexible time to spend with his wife, 3 daughters, supports a blacksmithing hobby and still gets the bills paid.

Top 10 Photoshop Moves

- By Tom Giannattasio

Is time kickin’ your ass? Well, learn to defend yourself! Master these killer Photoshop keyboard combos and you’ll find yourself with more time for the important things (e.g. Facebook trivia questions). These combos assume you’re using Photoshop CS3 on Windows platform with default keyboard shortcuts.

Legend:
( ) = Repeat as desired
{ } = Manual Input Required

10. Cloak of Invisibility

Remove everything from the screen except for your file.

• F, F, F | Cycle through Screen Modes
• Tab | Remove Tools and Palettes
• Ctrl+H | Hide Extras (Grid, Guides, Slices, etc.)
• Ctrl+R | Hide Rulers

9. Quick Brush Jab

Quickly and easily customize a brush. This combo is a staple for digital painting.

• B | Brush Tool
• Right-Click and Select or F5 and Select | Open condensed or full Brush Palette
• or . or , or Shift+. or Shift+, | Cycle through brushes or jump to first or last brush
• [ or ]: | Shrink or enlarge brush radius
• Shift+[ or Shift+] | Decrease or increase brush hardness
• {Numeric Input} | Change brush opacity (e.g. ‘5′ = 50%, ‘55′ = 55%)

8. Quick Brush Jab Path Stroke

Stroke a path with a customized brush.

• {Draw Path} | Use any tool to draw a path
• B | Select Brush Tool
• Quick Brush Jab | Use the Quick Brush Jab Combo to customize brush
• Enter | Stroke the path with your customized brush

7. Gaussian Attack

Apply a filter, fade it and apply again. Good combo for fine-tweaking filters.

• {Apply a Filter} | Manually choose and apply a filter (warning: using the Lens Flare filter may result in a swift kick to the mouse balls)
• Ctrl+Shift+F | Fade the filter
• (Ctrl+F or Ctrl+Shift+F) | Reapply filter with or without dialog box

6. Shadow Maker

Create a basic shadow based on a chosen layer.

• {Select Layer} | Select the layer the shadow will be created after. The transparency of this layer needs to resemble the desired shape of the shadow.
• Ctrl+J | Layer via Copy
• Ctrl+[ | Move layer down
• D | Reset color defaults
• Alt+Shift+Backspace | Fill with black and preserve transparency
• Ctrl+T | Free transform
• {Transform} | Modify to your liking
• Enter | Commit

5. Layer Catcher

Select, group and mask layers. Often easier than using the layers palette.

• V | Selection Tool
• Ctrl+Click or Ctrl+Shift+Click or Ctrl+Shift+Right-Click | Select your layers
• Ctrl+G | Group Layers

4. OCD Layer Sort

Rearrange your layers quickly and easily. Great cure for you neuroticism.

• F7 | Show Layer Palette
• Alt+[ or Alt+] or Alt+, or Alt+. | Select a layer
• Shift+Alt+[ or Shift+Alt+] or Shift+Alt+, or Shift+Alt+. | Select more layers
• Ctrl+[ or Ctrl+] or Shift+Ctrl+[ or Shift+Control+] | Move layers down or up or send to bottom or bring to top

3. Ultimate Flattener

Merge All Layers (even those hidden). Quick way to flatten a file.

• Alt+. | Select Top Layer
• Shift+Alt+, | Select all layers between currently selected and bottom layer
• Ctrl+E | Merge the selected layers

2. Infinite Dupe

Duplicate and evenly distribute or transform items. Nice way to distribute something like nav buttons.

• Ctrl+T | Transform
• {Transform/Move} | Manually Move or Transform
• Enter | Commit Transform
• (Ctrl+Alt+Shift+T) | Duplicate and transform relative to the newest item

1. Finishing Move - The Web Extractor

Extract a selection and save it for the web. Extremely useful when pulling individual elements from a design, such as buttons or rules.

• {Create Selection} | Select the area you want to extract
• Ctrl+Shift+C | Copy Merged to clipboard
• Ctrl+N | Create New Image based on selection size
• Enter | Confirm New Image
• Ctrl+V | Paste from clipboard
• Ctrl+Alt+Shift+S | Save for the Web

About the author

Tom Giannattasio is a Web Designer/Flash Developer living in Bethesda, MD. In his free time, he enjoys reading, philosophizing, digital painting and going to the zoo. To view a sample of his work, visit his website at www.attasi.com.

Who Do You Design For: Clients or Users?

- By Brian Haught

If you close your eyes and think back to the first design fundamentals class you ever took hopefully you remember the instructor saying,”When beginning a design ask yourself who is your audience? If you don’t know who you are designing for then how can you design anything at all?”

Fast forward to the present. Now you are a freelance designer, you have met with the client, discussed what they want and agreed to do the job. Suddenly the client sends you a sketch of a horrible monstrosity of a design so unholy your eyes begin to burn. The client attached instructions that do not resemble the previous discussions and break every rule you can imagine.

Now ask yourself, “Who are you designing for?” By definition, your job is to communicate a message via images and text. But, as a businessperson your goal must be to meet the requests of the client. If you go against the client’s explicit requests and produce a user-centric design, oddly enough you’ll have an unhappy client. Now the flip side of the coin. If you cooperate, lay down your sword, turn off the grids and produce what the client has demanded, the design will fail and in turn you will fail. The bad design will always come back like Rocky and smash you right in the face.

I still feel there is no right answer, but all I can do is plead my case. This is the very definition of a catch-22 and this 800 pound gorilla shows no signs of going away. I get down on all fours and beg the client not to demand drop shadows and convince them that whitespace is a beautiful thing and is not to be confused with wasted space.

About the author

After several years as a corporate slave and servant to the public Brian Haught got a wild hair and went to college. Today he landed a position as Art Director for a local company where he oversees and implement the print and online advertising. He manages to do several freelance jobs a year and find time to play video games. You know the important stuff. All in all he is just a guy who likes design, art and anything “techy”.

Note

This post is one of the finalists of guest author contest on smashingmagazine.com.