▼Blog

Hear my commandment: Know thy medium

If there were commandments in online advertising and marketing, atop that list should be: Know thy medium.

For the past several weeks, Ohio.com, the online home of the Akron Beacon Journal, has positioned a button ad on the right side of its home page where Dr. James George, DDS promotes his dental services. (By the way, doesn’t this guy look like James Lipton?)

Ohio.com doesn’t use its medium, the Internet, in the right way for two reasons:

1. The ad is an annoying Flash animation that blocks you from clicking on any news story in the path of a blimp that zips across the page.
2. If the blimp entices you to click on George’s button, an external application fires up to read a linked pdf.

Usability expert Jakob Nielson notes in his Top 10 Mistakes in Web Design that

Users hate coming across a PDF file while browsing, because it breaks their flow. Even simple things like printing or saving documents are difficult because standard browser commands don’t work. Layouts are often optimized for a sheet of paper, which rarely matches the size of the user’s browser window. Bye-bye smooth scrolling. Hello tiny fonts.

Worst of all, PDF is an undifferentiated blob of content that’s hard to navigate.

PDF is great for printing and for distributing manuals and other big documents that need to be printed. Reserve it for this purpose and convert any information that needs to be browsed or read on the screen into real web pages.

Worse yet, on slower computers or Web connections, unexpected pdfs have the tendency to crash browsers and computers. Even if that doesn’t happen, pdfs really slow down the users’ experience as their computers manage an unexpected download. On faster machines, less savvy users are disorientated, not recognizing that they are actually in an external application. I’ve witnessed this many, many times.  All sorts of other usability issues pop up with pdfs as Nielson notes in another post.

Ok, so we’ve established that pdfs generally are not user-friendly. What should have Ohio.com done?

1. If there must be an annoying flying blimp, which I’m sure the client loved, render it in javascript or some less obtrusive form of Flash so users can navigate to surrounding stories without interference. You still grab the readers’ attention but don’t meddle with their ability to use your product. (Journalists should also contemplate the ethical dilemma the blimp creates by obtruding their content.)
2. Get off their lazy butts and create a landing page for Dr. George. What an awesome upsale! Or at least do it like George does on his Web site. Although surrounded by an ugly wrapper, George’s coupon page allows you to print gifs of his money savers by opening them in a pop-up window. (If I wanted to get picky, I would point out that pop-up blockers are standard with many modern browsers and are on by default. By making the coupons a pop-up, many users will not see them — at least not easily.)
3. At minimum warn users that an external application will open a pdf of the coupons.

Ohio.com’s ad salespeople are really doing Dr. George a disservice by linking to a usability-unfriendly pdf of his printed ad and deploying story-click-blocking animations. They are not alone. Many newspapers republish pdfs of their print ads online as a “service” to readers — but more accurately as a disservice to their advertisers. The online salesforce would do better to take advantage of the Web’s abilities rather than lazily posting a pdf of the newspaper ad.

Three pseudo classes beyond LOVE/HATE

I thought I knew all I needed to know about CSS, at least as far as modern browsers allow me, after reading a string of books about it over the past two years. (CSS Zen Garden is the best.) Somewhere along my studying, I blocked out certain rules, in most cases because Internet Explorer 6 doesn’t support them.

With Internet Explorer 7 more than two years old, used more than IE 6 and IE 8 coming soon, it’s time for designers to adopt more advanced CSS features. (IE seems to be losing market share as well.) The Microsoft developers’ site outlines IE’s support of CSS. Today we’ll look at pseudo classes.

LoVe/HAte is a handy way of remembering which way to order your link styling in CSS by :link, :visited, :hover and :active. (Not following this order will screw up things. Really. Trust me.) These familiar pseudo classes specify the look of your hyperlinks.

But wait — there’s more — and they don’t even have to be used for links!

:focus is a way to add focus to an element, like a form, and works now in Firefox and will supposedly work in IE 8. This is fantastically useful and a great way to make your site’s forms user friendly. Example.

:lang, again, not in Internet Explorer until version 8, but allows you to specify language of an element, like a quote box, and supply custom quotation marks. You can also use it in combination with XHTML to declare the language attributes of text in a document.

:first-child, now a part of IE 7, matches a style to the first child element of any element. For example, this selector could specify that the first paragraph of a document turn blue, but the rest of the paragraphs remain the default paragraph color.

Struggling industries will try anything

What do you do when you want to save your business from failure? Seek taxes, sue your customers or find some government protection, apparently.

Although the auto and financial industries’ troubles are the obvious, in-the-news examples, many other traditional businesses have been struggling for years too. Think movie, music and newspaper companies.

The Internet being the great disruptive force it is has thrown many firms into a tailspin trying to protect their old business models from its influence. Here are some recent examples.

• Record companies in Canada receive 29 cents — recently up from 21 cents — for every blank CD sold in the country. The Canadian copyright board levies this charge in an attempt to “compensate” artists record companies that are suffering loses due to music piracy. IPods, flash drives and even DVDs are not taxed.
• This guy — who is a professor, god help us — suggests newspapers should seek an antitrust exemption so they can collude and start charging for online subscriptions.
  

  Now, here’s my idea: The newspaper industry should ask the Justice Department for an antitrust exemption that would allow publishers to collaborate on a decision to begin charging for their Web sites. No paper would have to charge, and each paper could determine its own price. But if most papers in a region – San Francisco, Oakland and San Jose, for example – began charging for Web access at more or less the same time, many readers would likely subscribe.

• Speaking of papers, this writer and others think the government should revive the Depression-era Federal Writers’ Project to put unemployed journalists to work.
• Ever wonder why sharing music is such a pain in the butt? Blame DRM, which many record, movie and software providers use to block you from sharing their works. What happens when companies put particularly intrusive DRMs in their products? Revolution.

  The Dark Knight, which grossed nearly a billion dollars worldwide, was 2008′s most-pirated movie. (Could have all the piracy actually encouraged people to pay and see the blockbuster movie?) Spore, a popular computer title, and despite its DRM, was ’08′s most-pirated computer game. Have they not learned?

  Sony widely received criticism for putting DRM malware in its CDs in 2005. The protection software actually opened users’ computers to viral attacks. Not exactly a ringing endorsement for the technology.

  Say what you will about piracy/sharing’s legality, but the Web makes “owning” intellectual property in the 21st century very difficult.

• The Recording Industry of America rushed to shutdown two last.fm-like music-sharing Web sites because the group couldn’t collect royalties. Never mind that these sites encourage more music consumption and exploration.
• The much-hated RIAA has shifted its failing strategy of suing its customers to suing Internet Service Providers. One record company exec has even suggested taxing universities for all the music their students steal.

Even Web companies struggle making money off the Internet. The first dot-com crash showed that your .com needs a business plan beyond piles of venture capital money and unrealistic initial public offerings. (Goodness, Netscape had revenues of just $16 million when it went public and was valued at more than $2 billion(!!).) I believe the later days of Web 2.0 are showing that you can’t count on just advertising to sustain your online business.

Still, some companies successfully mix free and charge services. Basecamp creator 37signals is an oft-cited example.

Bottom line: Businesses are struggling to survive in a world of “free” online. Competition is fierce and creating a scarcity online is difficult. With the cheap cost of entry, anyone can undercut you by being a disruptor. Taxes, suing your customers and government interference are hardly business plans, though.

Resetting CSS style sheets

While I digest what’s left of the turkey and stuffing I ate over the weekend, I want to remind myself (and other Web developers) of something to be grateful for: CSS reset frameworks. These wonderful style sheets override built-in browser preferences to start you off with a fresh palette to textually paint your new Web site. All browser-specified margins, padding, sizes, indents, etc. are gone.

The sheets come in a variety flavors, many inspired by CSS master Eric Meyer. Yahoo provides developers a sheet to link directly to. (You can also steal the source to build your own.)

Your preferences may vary. But to start building pixel-perfect layouts — even in Internet Explorer — these frameworks are a great start. You will be surprised by how many styles are affected, and how you let browsers dictate how your site’s tags look. I use a very basic version of this on NickGehring.com, just setting all margins and padding to 0 with an asterisk.

* {
margin: 0;
padding: 0;
}

Yahoo and other frameworks get much more sophisticated with their approaches. It all depends on your needs.

Template trends leave a sense of déjà vu

Smashing Magazine, an awesome online resource for Web developers, posted a story on online newspaper design trends. Visit enough of these domains and you soon get a feeling of déjà vu.

Smashing lists them:

1. Color schemes – Most news sites use a white background with dark (black) text and blue links.
2. Header and sidebar banners – Lots of ads in these places.
3. Top navigation – Aside the New York Times, many news sites embrace top navigation.
4. Tabbed content areas – Cram lots of information in a small space.
5. Grid-based layouts – A good way to “manage and organize a large amount of content.”

Visit enough of these domains you and you soon get a feeling of déjà vu. Didn’t I just write that?

Lots of big new organizations of all stripes use templating in their designs. It saves time and probably makes supporting these sites from corporate HQ a lot easier. As things become more centralized and budgets leaner, these standard designs probably save money, too. Why spend months on a redesign when you need to focus all your resources on being able to report?

Advance Internet’s recently redesigned templates for Cleveland.com, OregonLive.com, MLive.com and Syracuse.com. Cleveland.com uses a hybrid of the new template, old template and a third blogging template for some story commenting. It’s rather confusing.

Gannett’s templates for Indianapolis Star, CentralOhio.com, Montgomery Advertiser and Cincinnati.com. Gannett launched these earlier this year, with the design originating from the Indy Star. Apparently the redesigns have caused a lot of turmoil. These templates, very much to their credit, push social media sharing high up on the front page.

Community newspaper powerhouse Gatehouse uses a similar set of templates on many of its 518 newspaper sites. Some are like my former employer’s site, while others are a variation of the Wicked Local brand, and yet others deliver news to the beat of a different template. All seem to have a gradient with a little bit of a drop shadow on each side of the content area.

Fox television stations that use the Fox Interactive Web template look EXACTLY the same. It’s not even worth posting more examples. Just take out “Cleveland” logo and insert “Tampa Bay” or “Twin Cities.” The templates boasts plenty of bevels, shadows and gradients, all in a red, white and blue theme. Very LOUD! I credit the Fox designs for not pimping out the 10 o’clock anchor team that no one cares about.

Smashing also compares blogs to traditional news sites. Blogs, as you would imagine, do a better job of integrating social networking, vital in the battle to turn readers into users, and users into members of an online community. I think more news sites should work like blogs. It’s already starting to trend in this direction — just a matter of getting those darn publishers to give in.

The Financial Times made its new site more like a blog with a vertical news flow called “the river”. FT also ported over the salmon color of its printed paper. Some things never change.

I would love to find designs that break out of the mold. Traditional news sources are unlikely to do this, though. Years of instituational behavior, coupled with taking themselves too seriously, mean few Web news sources are going to deviate much from the norm. Visit enough of these domains and you soon get a feeling of déjà vu.

Seven good blogging tips

Lost Remote provides a good list of things bloggers should/shouldn’t do. Among them, with comments from me:

1. Have a voice - To think in newspaper terms, a professional blog comes somewhere between a story and a well-reported column. Don’t be boring!
2. Don’t just post wire stories – Or regurgitate press releases. Ugh! I’ve seen this done word-for-word in a local newspaper’s entertainment blog. That’s lazy reporting and journalism.
3. Engage with your readers - A colleague once snorted (yes, snorted) at my suggestion that reporters should act more like blog writers and actually police/engage in the conversations that bloom out of their stories. Many news Web sites treat their story comments like ghettos, where just about any racist or mean-spirited, off-topic comment goes, especially those hosted on Topix.com. That’s only part of the solution, of course.
4. If you don’t enjoy it, you shouldn’t be doing it
5. Create content that’s easy to read on the fly – What a great idea …
6. Make sure you post the entire feed

I will add a No. 7: Update, update, update! Now certainly for me this is a case of do as I say, not as I do. If you want to have any sort of following for your blog, you have to update it. How do you expect to build an audience if your last update was in February? I’ve seen many businesses and trade associations do this. They’ll kick off a blog, make a big deal out of it, then just stop posting.

For a Web developer starting, then forgetting is stupid. Your blog is a vital part of your “brand” and shows  your expertise. Not only can you give back to your field in terms of tips and inside information, you build crediblity in that community and with future customers.

Similar opportunities abound for news sources online. Build some credibility through regular, thoughout, kickbutt posts.

Procrastination doesn’t make a car search any easier

Car searching sucks, and for a guy who hates debt and would rather stick to his ole, reliable car, this process has become the ultimate source of procrastination. Except for a transmission that’s about to go and a lack of heat or AC, my car, Natasha, as I call her, runs as well as the day I bought her.

With another Ohio winter coming, I know this isn’t wise. I’m in denial. But if I ever want to be able to do highway travel again, I’m going to have to replace Natasha.

There is no shortage of sources to help you become an informed car buyer — and certainly there are plenty of Web sites that list new and used cars — however, the process is fragmented. Many dealerships have their own Web sites. And, of course, there’s Cars.com, Auto Trader, etc.

I would kill for a good Web site that aggregates such things. Some sites do this, but they aren’t very good. I would also love to have more specificity when picking models, like not just generic price ranges ($5,000-$10,000) or mileages (0, 50,000, 100,000). What if I wanted a car costing less than $7,775, with 62,000 miles? Can’t be done. I think most of the dealerships in my area use the same design template too. Hurray for consistency of experience; boo for crappy templates. (Note to car dealerships: I will create you a rockin’ site in return for a free car.)

I haven’t started talking to the dealers yet. I’m curious to see how my search will play out in the troubled economy. One thing’s for sure: I have to stay on top of my credit score and credit card limits. Having a low debt-to-available-credit ratio is incredibly important. Some card companies are closing “inactive” accounts and lowering limits in the midst of these economically challenged times. I like my credit rating, and ironically, I’m going to have to start using my cards more (and paying them off!) to make sure the companies don’t screw up my score.

I will secure financing outside the dealership, and I will not spend hours negotiating a price. I hope to have a pretty good deal secured without even setting foot in the dealership, although this will be more challenging because I am not buying a new car.

I find salesmen loathsome. My back tenses up even thinking about having to go through all the BS involved in test driving, negotiating, negotiating again with the finance people, and getting out alive.

But really, enough procrastinating!

My strategy (based on links supplied below):

1. Do Web research and find some models I like.
2. Narrow it down to a few and test drive. Buy NOTHING the day I test drive it.
3. Come back home. Do more research. Get lots of annoying calls from dealers. Try to ignore them.
4. Come back to my top 3 cars. Do not be attached to a particular model.
5. Try to get into competitive bidding with the three cars via phone, e-mail, fax, etc.
6. Close the deal at dealership. Don’t talk in monthly payments; do talk in final payment.
7. Meet with financing dude. Explain I have my own financing already and try to get a lower rate than one I have from credit union, etc.
8. Sign away life.
9. Drive home.
10. Victory!

Car-buying resources:

• http://www.boingboing.net/2008/08/13/how-to-buy-a-new-car.html
• http://www.consumeraffairs.com/automotive/hownot02.html
• http://simplejoe.com/auto-car-purchase-buy-tips-tricks.asp
• http://www.edmunds.com/advice/buying/articles/45310/article.html

Evolutionary step for open social networking

Gawker redesigned its comment system recently and seeded the ability to leave comments via a Facebook profile. It’s not active yet, but I think this new capability is amazing and evolutionary.

Gawker’s network of sites aren’t the only ones experimenting with using an open(ing) architecture. Social-network-for-professionals LinkedIn will provide CNBC its user profiles. Users will be able to recommend articles, see who is connected to companies mentioned in the stories and the whole thing will have some crossover onto the cable channel. (I hope someone gives CNBC an MSNBC-like makeover. Yikes, is it loud!)

Like I said, none of this is revolutionary; it’s just evolutionary. Gawker and CNBC’s moves further realize the social/sharing/geektopia nature of the Internet and break down walls. No longer will contrived barriers hold your online “identity” within the bounds of a .com.
Continue reading »

Top 10 Web sites 10 years later

SitePoint recently took a look at the top 10 Web sites from ten years ago. They did not post screen shots so I jumped over to the Wayback Machine to see what the sites looked like back then. Continue reading »

Mygazines: Where 21st century piracy meets 19th century publishing medium

With a new Web site called Mygazines, you can scan in your favorite periodical and share it with the world. That’s a lot of work for something that is terrible to read on a computer screen.

Are publishers grateful for these extra eyes on their content and advertising? I guess not.

No, I don’t get the “convenience” of being able to read a print publication on my computer screen, especially when many Web technologies exist that allow you to do this more easily. MP3s, music, movies and software certainly lend themselves to piracy; I don’t think magazines do. I can’t think of a publication that I would like to spend time scanning. Plus, many of these magazines are already online for free! Continue reading »