Web Design – Writer Way

Mobile-friendly web design: Look before you leap into the future

Your new mobile-friendly website may unexpectedly shut out your customers or employees who use older desktop or laptop computers. Here’s why.

I do a lot of work updating the content of business websites. In the past year, much of that work has been driven by the shift to mobile-friendly web designs — designs that offer interactive content for touchscreen phones and tablets, along with content for traditional desktop machines or laptops that use mice or trackpads. To serve up content in this manner, the website is coded in two different versions. Small-screen devices get the mobile version of the site and large-screen computers get the desktop/laptop version (which often appears as a long scrollable page).

At least that’s the way it’s supposed to work.

This recent post from the agency Extractable talks about an unexpected disconnect one of their clients experienced when the client rolled out a new mobile-friendly web design. It worked well for the company’s users, but not for the company’s own employees. Some investigation revealed why. The users had new phones and tablets but the company’s own desktop computers were so outdated (with low-resolution screens) that those computers were perceived by the website code as small-screen devices and were thus shown the wrong version of the website.

The company’s employees were unable to see or access the main menu required to log in to user accounts and assist customers.

This is an unexpected illustration of science fiction novelist William Gibson’s observation that “The future is already here; it’s just not very evenly distributed.”

In this case, it was the company that had out-of-date computers. But I suspect this will also be a significant issue for business-to-business companies whose commercial customers are using outdated computer systems. If customers can’t access the log-in menus, they won’t be able to access their accounts to place orders.

Bottom line: Before installing a major update to make your website trendy and mobile friendly, it might be worth checking first with two or three of your major customers to find out what technologies they are using to access your website for ordering, customer service, etc. Or, test the new system with those major customers so any necessary changes can be made in the code at your end. When it comes to business websites, there’s little point in leaping into the future until your customers and employees can go there with you.

Effective web content: Rethinking your About page

I’m working with three clients on small-business websites and we’re getting hung up on the About pages.

So I went off and did some research on About pages (specifically for small-business websites). I found several types, each with their own benefits and limitations, and thought the information worth sharing:

The “all facts” page. There’s nothing wrong with an About page that is, essentially, your resume. Facts make prospective clients and partners feel comfortable; facts (about where you went to school, where you worked, your skills, your past projects, a bit about why you do what you do) provide ways to connect your world with their worlds. The danger of an “all facts” page is its dryness. An about page that’s too close to a resume risks making your business look like something you’re doing while hunting for a “real job.” If you use an “all facts” format, try pruning the information to emphasize information that relates specifically to your business.
The “too much information” page. I’m seeing a lot of About pages that make me feel as though I’m trapped at a cocktail party with an enthusiastic nut case. When people go on at length about how passionate, ethical, environmentally aware, and socially conscious they are, I get nervous. In part, it’s because they could be lying through their teeth. I’d rather look at their portfolio and their client list and their testimonials and see that these passions and commitments are evidenced in their work and in the clients and partners they choose to work with. The “too much information” page is often characterized by a regrettable photo of the business owner doing something recreational rather than professional — or, worse, a studio portrait that looks more like a brooding, self-involved artist than a business person.
The “connections and keywords” page. This is a version of the “all facts” page that emphasizes not projects and experience but the business owners’ connections to clients, partners, educational programs, and professional organizations. It reflects the influence of LinkedIn, which uses a format that identifies you by these connections. This is a great framework to which you can add a bit of personality. Again, as with the facts page, you’d do well to give greater emphasis to those connections that have something to do with your business.
The “short and sweet” page. These can be some of the best About pages. Given that most people will spend only a second or two looking at an About page, keeping it short (three sentences, max) vastly increases the chances that a prospective customer will actually read what you have to say about your business. If you say something that is genuine and moderately engaging, you’ll have achieved a huge win. Of course, there are a few About pages that try so hard to be cryptic, provocative, and clever with their brevity that they leave visitors scratching their heads.
The “story” page. Storytelling was all the rage in online communication two or three years ago. I’m finding that, like many online communications fads, storytelling is rapidly losing its patina. That’s because so many people have abused it. They’re abusing it by telling stories that are inappropriate, boring, or pure fantasy. If you are determined to use the About page for your business website to tell your story, make sure there is a real story to tell. It should have information about who did what, when, where, and why. And make sure the story is about the business at least as much as it is about you. Most importantly, focus on what you’ve done, not on what you intend to do. You want to sound like a solid business person, not a dreamer.

Here’s are some observations by marketing communications experts on effective About pages and why business owners have such difficulty writing them:

What About…Me?

So…what type of “About” page did I use for WriterWay?

#3, the “connections and keywords” page.

Most of my business comes through referrals. I find that nearly every prospect who contacts me makes a reference to some client or organization they saw mentioned in the top third of my About page. We then go on to discuss that common connection.

People never mention any of the weirder stuff I have near the end of my About page, so my guess is that they aren’t reading it — I’ve got too much stuff on the page. (See “short and sweet,” above.)

What’s next in website design? Scroll down to see

Suddenly, they’re everywhere. Websites with big, bold home pages. Big headlines. Big, colorful backgrounds that evoke posters. No sidebars, ever. Want more information? Start scrolling, scrolling, scrolling.

Suddenly, they’re everywhere.

Websites with big, bold home pages. Big headlines. Big, colorful backgrounds that evoke posters. No sidebars, ever. Want more information? Start scrolling, scrolling, scrolling.

Take a look at Nordic Ruby . And Grovemade.

This isn’t news to designers. But it may be news to lots of folks in Marketing and Communications who are working with the current industry standard template — a top nav; a photo slideshow; three “boxes” filled with teaser information linking to pages deeper in the site; and secondary pages with complex sidebars.

What’s driving the change

Blame the trend toward scrolling sites on mobile devices and tablets (and their touch screens). By late 2013, 28 percent of website visits were from mobile devices (phones and tablets) and that percentage was growing at a phenomenal rate. For businesses whose visitors are in demographics that rely on phones and tablets, the percentage is likely far larger. For the mobile visitor, clicking little text links on a touchscreen is painful; scrolling, a breeze

What’s gained, what’s lost

My experience with mobile-friendly websites that rely on scrolling is that the process of getting information from them is less hierarchical and more immersive. I get a sense of the personality of the organization. If I need to click to get to a secondary page, the link is a large, bold button.

That said, I miss the hierarchy. Without a detailed site map or drop-down navigation, it’s easy to feel that you’re lost and overwhelmed.

Perhaps that’s why some of the most appealing scrolling sites are ones that represent simple, discreet events (such as a conference).

Looking ahead

Thinking about migrating your organization to a scrolling website design? These 12 scrolling sites featured on awards.com provide plenty of inspiration. Be sure to check out the Unfold site — it’s a continuous loop!

Why there’s nothing funny about your website’s photos

Tips for finding a corporate photographer for your company’s website and executive headshots.

The comic strip wife wants to replace the shabby living room set with all new furniture. Her cost-conscious husband proposes a compromise — why don’t they just freshen up the living room with a new coat of paint?

“Aieeee!” the wife shrieks at his cluelessness. “Then our old furniture will only look worse!”

Hilarious? Not if that’s what’s going on with your corporate website.

outdated COO photo — Is this your COO photo? Let’s hope not.

You freshened up your website with all that beautiful stock photography showing friendly customer service representatives, sleek professionals, and happy corporate customers. But on the website’s “About Us” page, you still have a off-kilter picture of your headquarters that looks like it was taken during the Reagan Administration. Let’s not even talk about the blurry headshot of the COO with a blow-dried pompadour and the grin of an axe-murderer.

Which brings us to the question: Why is it that companies are willing to spend thousands of dollars to launch new websites with the latest SEO and social-media bells and whistles but then go all Scrooge when it comes to spending $1,000 to get one photo of their building and basic headshots of their four top executives?

The answer is simpler than you think. It’s because the web designer went out and got them the stock photography, but to get the building photo and executive headshots, they’d have to…well, what would they have to do?

Find photographers
Schedule their colleagues to get executive portraits

Apparently, they’ll do anything to avoid this.

What’s the real cost?

All too often, the marketing department deals with the photography issue by calling in the IT guy’s wife or the CEO’s nephew—someone who “just loves to take photos” and will do it for free. And that’s why so many company websites end up with a poorly-lit shot of the reception-area front desk with their (barely readable) logo on it—and the receptionist’s gym bag poking out from behind the desk. It explains “About Us” pages with a headshot of the CEO with his bald spot shining like a search light.

Really, isn’t it time to call the pros?

Tips for finding a professional photographer

For head shots, it’s pretty easy. You’ll find photographers by searching under the keywords “(city name)” “photography” and “headshots” (or “corporate headshots”). Ask for their pricing for “onsite headshots with backdrop and lighting” and tell them you want high-resolution digital copies and full rights to one or two images for each executive.

A photo session for four people should take less than an hour.

Two tips:

If you are trying to control costs, don’t start adding in photos of lots of other employees or setting up those ghastly, fake-looking group photos in the reception area or conference room. (Group shots are cursed: someone in the photo will quit within days.)
Schedule the shoot for a day when the executives are going to be there and dressed professionally (such as the day of a meeting or sales presentation).

For an exterior building picture, it’s a bit more difficult to find a photographer. That’s because most of the corporate photographers, even the affordable ones, fill their sites with dramatic “feature” shots from pricey shoots that required tons of equipment and lighting — the exact opposite of what you are looking for. Don’t panic. These same folks will do basic pictures of your building or lobby (or your company van) if you stress that you want something very simple, with two or three final shots with high-resolution digital files (and full rights). This way you’ll have what you need for trade show posters, brochures, and the website.

To find a good photographer, search under your city’s name and “corporate photography”—plus the magic keyword “affordable.”

I know this all sounds painful and time-consuming, but when you get those great pictures on your website, it will be so very, very worth it.

An inside look at SEO that outsiders can understand

Rand Fishkin talks about what SEO is and isn’t, and what people (rightly or wrongly) think about search engine optimization.

Imagine trying to figure out what an airplane does by looking at one on display in a museum.

Now imagine trying to figure out what an airplane does by watching one that’s taking off. By catching something on the move, or in transition, so much more about what it does, and how it does it, becomes apparent.

So…I invite you to take a look at the blog post SEO thought-leader Rand Fishkin has written about the transition of his company SEOMoz to its new identity, Moz. Rand writes beautifully, and his decision to rebrand the company was all about what SEO is and isn’t, and what people (rightly or wrongly) think about search engine optimization. Think of it as an insiders look at SEO that outsiders can understand.

The “Mission & Vision” section of the post also contains a marvelously clear and unpretentious infographic. Infographics are the latest online communications fad and, predictably, about half of them seem to have been designed to communicate how trendy and clever the design firm is, with the actual client information being ignored or mangled in the process. As with many other aspects of marketing communications, the Moz folks know how to do things the right way.

Have a look.

And the next time people start whining to me that SEO is either confusing or inherently evil, I’m just sending them to this post.

Have hackers got the mobile version of your website?

Have hackers compromised the mobile version of your website? It’s worth checking.

(This post on the hacking of mobile versions of websites falls squarely between WriterWay.com and iPhone4Tips.wordpress.com. Therefore, I’m posting it on both blogs.)

A few weeks back at iPhone4Tips.com, I wrote about the increasing proportion of website users who are using mobile devices (Where are the Smartphone-friendly websites?). While researching that story, I tripped over a far uglier one: Hackers who go under the radar to redirect websites — but just their mobile pages. Let me start at the beginning of this topic and work up to the rather complex explanation behind it all.

While writing the story on the need for mobile-friendly web pages, I checked to see if the organizations I work with are walking the talk. Did they have mobile-friendly pages?

I got distracted almost immediately because the second group whose site I checked had all the mobile versions of its pages redirected to a website in Russia that urged visitors to download something that claimed to be “Adobe Flash.” (Yeah, right.)

When I checked the same site from a desktop computer, it looked just fine. I was puzzled, so I called two friends and asked them to check both desktop and mobile versions of the site. They confirmed what I was seeing — but we discovered along the way that iPhones and Androids were being redirected to different Russian download pages.

I alerted the two volunteers who act as sysops for the website. Both are experienced programmers and website designers, and neither had come across this before.

The bottom line is that someone had obtained our not-very-secure password, compromised our .htaccess file, and inserted their redirect rules in our code. Fortunately, we were able to correct it by filing a ticket with the ISP to get this the .htaccess file corrected. A far more secure password is now in place.

There’s plenty online about attacks through .htaccess file rewrites, but I’ve found very little written about the hacking of the mobile pages of otherwise unscathed websites. It’s quite clever. Many sysops, such as ours, interact with sites only using desktop machines, and would be unlike to spot malicious hacking activity that affected only mobile pages and mobile users. Thus the hackers get to work under the radar — until a mobile user feels inconvenienced enough that he or she goes to the trouble to report that the pages have been redirected.

For those of you with a technical background, I asked our sysop to share what we did to troubleshoot and solve the problem. He writes:

I verified that the redirect was only happening on mobile browsers and not desktop. Suspecting the behavior was user-agent-string based, I switched my desktop’s user-agent to spoof an Android browser and, sure enough, got redirected. It was likely to be either a cross-origin scripting vulnerability (where malicious JavaScript is injected into the content of our page), or a redirect at the HTTP level which would mean our Apache configuration was compromised.

I couldn’t see any malicious code in the content of our page, but just to be sure, I used the UNIX “curl” tool to manually look at the response coming back from a request by a mobile browser. Sure enough, it was an HTTP 301 redirect, saying the requested page had been moved to a new location on a malware site in Russia. Unfortunately most browsers will “helpfully” perform that redirect automatically, so you need a fairly low-level tool to diagnose when it is happening.

Having identified it as an Apache configuration issue, I contacted [ISP], and they confirmed that our .htaccess file had been compromised and the new redirect rules had been inserted there. They fixed the offending file, and the problem went away. I then immediately changed our passwords to prevent the same attacker from continuing to have access.

I can’t be sure how the compromise happened, however our old password was pretty insecure. It may have just been guessed, or somebody who knew the password might have been infected with a keylogger. I doubt it was a targeted attack, because our site is unlikely to have a very large Russian readership who would actually be vulnerable. More likely it was an exploit of opportunity.

It doesn’t appear that we suffered anything beyond some embarrassment from being hacked. It could have been much worse. Take a look at your mobile pages — today!

Is your web writer stealing content? Are you encouraging plagiarism?

Do you patronize a business that steals content?

Last week I visited the website of a local business and was astonished to see that the keyworded webpage describing one of their services had the name of a rival business on it — in a big, bold subhead.

Curious, I went to the website of the rival, and there was the exact same content and photo.

The writer for the first business had simply copied and pasted the content (which appears to be original to the second business) onto the client’s site.

I sent email to the manager of Business #1, alerting her to the situation and explaining that the writer she’d paid to develop original content was instead using the content that Business #2 had paid their own writer, and a stock photography house, to provide. I noted that what her writer had done was plagiarism, and her writer had put them into a situation where they could be sued by the content owner.

The manager wrote back, expressing astonishment. She thanked me for letting her know, and said she’d deal with it.

Out of casual curiosity, I went back the following day to see if she had removed the page. My jaw dropped.

The content was still there. All that the manager of Business #1 had done to deal with the situation was to remove the name of the rightful owner of the content, Business #2, from the page and substitute the name of her business in the big, bold subhead. The unlicensed image was still there.

I called and spoke to the manager. She clearly thought that the error I was pointing out was that she had failed to remove the clue pointing back to the source of her stolen web content. I pressed the point, and her utterly unflappable response was that, hey, the content writer was a friend who had done the work for her for free.

Which shows that you really do get what you pay for.

Interestingly, Business #2 is an extremely competitive chain known for aggressive business practices. I predict it won’t take long for them to find the purloined web content.

I flirted with the idea that the writer who left the name of Business #2 in the stolen copy was making a stab at doing “black hat” SEO*, but decided not to attribute malice (or competence) to what’s clearly several layers of small-time thievery and laziness.

*”Black hat SEO” is the industry term for unethical search engine optimization. One of its milder (“gray hat”) tactics involves mentioning your rival’s name on your webpage so that search engines will lead people looking for your rival’s services to your page, where you can talk them into using your services instead.

Quick fixes for commercial websites: How to diagnose customer pain points

Five ways to diagnose (and address) customer pain points on commercial websites.

Garry Przyklenk, writing for Search Engine Watch, has a great article for marketing professionals about improving our ability to turn online visitors into customers, clients, and prospects. (The technical name for this process is “conversion optimization.”) The first step he covers in the article is the one I’m going to talk about here: diagnosing customer pain points.

The truth is that very few marketing teams know if their websites are making life painful for visitors — and that’s because the customer complaints don’t get back to us. In large organizations, or even in mid-size ones, the person responsible for the marketing aspects of the website is often insulated from customer frustration. Chances are that users are squawking to customer service, to sales people in the field, even to tech support — in other words, to people in other departments who roll their eyes and grumble under their breath about “those idiots in marketing.”

Przyklenk notes that if we want to remove the barriers to converting website visitors to website customers, we must seek out the people in the organization who are hearing the moaning and groaning. The means getting the bad news — and good ideas — from:

• The call center. Ask them what they’re hearing from website visitors — and how they’re dealing with it. You’re likely to find you can help them in the short run, and that they can provide valuable input for your longterm website fixes.

• Your IT web team. Are they collecting data on website issues such as abandoned sign-up pages or abandoned shopping carts? If not, ask them to work with you to begin tracking this — it may involve installing third-party software.

• Sales reps. They want to make sales, so chances are they’re coaching prospects and customers on how to deal with your less-than-optimal web pages. Again, find out what they’re telling customers — it could be the basis for a tip or FAQ for the site.

• Customer support. Find out if they use web-based information to assist customers — and what could be done to make that information more helpful and easier for customers to find on their own.

• Fulfillment. Are orders, sign-ups, or donations coming through with inadequate information, leading to errors or re-work on the part of the fulfillment team? Ask them what’s missing from the web-based processes.

Przyklenk advises online marketing folks to try playing the role of the customer. I loved his suggestion that we should try signing up for an account (from a home computer outside the company network) and ordering one of our company’s products — and giving ourselves just 5 minutes in which to do it.

Faced with confusing choices, the online customer throws in the towel

Online or off, customers given too many choices are up to 10 times less likely to buy. Combine that with a confusing website and it’s a recipe for customer frustration.

Garnet Hill and The Company Store both sell great towels.

However, I now buy my towels exclusively from Garnet Hill. That’s because I can’t stand wasting time on the Company Store’s website.

TheCompanyStore.com is a slow-moving site with teeny-weeny pictures of products that appear in an only slightly larger version on the actual product page — c’mon guys, surely you have an original photo of the stack of towels that is bigger than 2 inches square!

But it’s not just the Company Store’s website. It’s the sales strategy — which is a bad match for online selling. They offer 7 types of solid-color towels that all look essentially the same in those tiny pictures, including 6 types of solid-color cotton towels. The prices of the towels aren’t all that different, so you’re faced with the prospect of having to click and read and click and read and click and read (did I mention that the site has no “compare” function?) to find out.

It turns out that, online or off, customers given too many choices are up to 10 times less likely to buy. Combine too many choices with a confusing website and you have recipe for customer frustration.

Garnet Hill towels — Why is this picture of Garnet Hill Signature towels so big?

I don’t have time to deal with this — I just want a great Company Store towel. Instead, I’m stuck wondering if the cheap one is cheap because it’s…cheap — and if the expensive one is worth it. Who knows? Who cares?

By contrast, over at GarnetHill.com, they have just 3 types of solid-color towels: Garnet Hill Supreme, Garnet Hill Signature, and a special line by Eileen Fisher. I click to see nice big pictures of the two Garnet Hill types — you get a choice of 6 thumbnails, all of which expand to 4 inches high. The difference is immediately obvious: “Supreme” towels cost more and come in fewer colors; “Signature” towels cost less and come in a vast array of colors — all easy to view by clicking a swatch to see a (great big) picture of the towel in the color you’ve chosen. So it’s easy for me to pick the Signature towels, check out two shades of blue, pick the one I want, and order the towels.

So: Sorry, Company Store. Your towels were great. I just didn’t have all day to spend trying to figure out which ones I wanted.

5 essentials for an effective event homepage

Why do websites for major community and commercial events fail the basic effectiveness criteria set by the flyer for a community center rummage sale?

I sit down to write this blog post in a mood that fluctuates between righteous indignation and profound discouragement.

We’re well into the second decade of online communication and yet we still have homepages for major community and commercial events that fail the basic effectiveness criteria established by a paper flyer for a community center rummage sale.

Unless yours is a limited-attendance, exclusive event that wants to discourage inquiries from the riff-raff, it’s essential that the homepage of your event website contain some basic information to assist potential attendees. That’s because your online visitor is busy, busy, busy and his or her decision to attend your event may well be made based on a 10-second scan of your homepage. Why do so many event homepages make that 10-second visit an exercise in hair-ripping frustration?

If you want to be kind to your potential attendees, here are five things your homepage needs to tell them:

Who?

People need to know who is hosting your event because they want to know if it’s being put together by a reputable organization or some fly-by-night franchise.

What?

They need to know what it is (beyond the cutesy, artsy, or edgy name you’ve given it, such as “Frolic in the Park”). It’s tough for event organizers, who’ve been up to their ears in planning for months, to grasp that not everyone knows the event is “all-day” or “for kids and their parents” or “free.” Yet descriptors like these are essential for the homepage, particularly if you want people to be able to describe it to third parties (aka, “word of mouth advertising”). So is cost. I’ve come to the conclusion that an organization that puts the admission price of the event on their homepage instead of burying it somewhere on a “Registration” page deserves the sainthood.

When?

People need to know when your event is. You might think that putting the dates on the homepage (“December 8 and 9”) is enough, but that’s barely a “2” on the scale of effective communication. That’s because it doesn’t include the year, and think how many times you’ve reached an event’s homepage only to discover it’s for last year’s event. How about “Thursday, Dec. 8, and Friday, Dec. 9, 2011”? You’re getting warmer.

Times are important, too. Can people go there with kids after school? Is it a late-evening event? Does it include dinner? Give the potential attendee a break, right there on the homepage. Get rid of some blathering marketing copy they aren’t going to read anyway and put in the times: “Thursday, Dec. 8, 3 – 10 p.m. and Friday, Dec. 9, noon to 11 p.m.” Whew! That wasn’t so hard to do, was it?

Where?

Particularly when people are trying to decide if they are going to attend your event, they need to know where it is. Is it convenient? Is it familiar? Or are they going to spend 30 minutes driving up and down some main drag peering at address numbers? Oddly, the “where” is the area in which most event websites rate a big zero.

Amazingly — astonishingly — many of them give no indication on the homepage of where they are — not just in town, but in the world. No, they think they are the only “Frolic in the Park” in the universe. Is your event in Vancouver? In Everett? In Portland? Do people have to hunt around for your Contact page to find out? (And then discover it consists of somebody’s email address?) If you are having an event, you need to put the location right up there on the homepage.

And just the address (including the city) is not sufficient. There needs to be lots of additional information, including the name of the building (“Town Hall” or “Mary Foster’s house”), the neighborhood (“in North Cedar Heights”), and some landmark directions (“just around the corner from Safeway” or “five minutes north of the fairgrounds”).

A picture of your location is surprising helpful if people need to identify a building when they arrive. If your location is obscure, it’s just about essential to have a link to an interactive map, such as Google Maps. If you’ve checked out maps on other websites, you’ll know that some mapping services are pretty much useless while others are helpful. Take the extra time to figure out how to link to a helpful one.

Why?

You’re all excited about your event, but that doesn’t mean everyone else is. And that’s generally because they don’t know what the benefits of attending your event are. Is it relaxing? Educational? Useful? Will they be able to meet people they couldn’t meet other places? It can’t hurt to put in a sentence to let them know. Right there on the homepage.

Looks aren’t everything

One final remark. The design of your homepage — its aesthetic — tells people quite a bit about your event. Most organizations put a lot of time any money into graphic design — beautiful backgrounds, distinctive typefaces, and eye-catching photography. Oddly, this often detracts profoundly from how well the homepage communicates vital information — the sort of information that enables visitors to decide if they are going to attend. Perhaps the most fatal design mistake is a dark or black background with all the information in white type. Many visitors like to copy and paste information (particularly that address information) into their calendars or into an email to friends they’d like to attend with. If your website type is white, and people paste it into an application, it’s going to be invisible. Sure, they could go to all the trouble of figuring out what on earth went wrong and then figuring out how to apply color in that app. But they’re not going to bother. Oops.

If you simply must have white-on-dark design, make sure you have widgets at the top of your homepage that will allow visitors to email a link to your site, post a link to it on Facebook, or tweet it on Twitter.

Bless their hearts

Here are a few links to events whose plain, simple homepages are doin’ it right when it comes to communication:

Category: Web Design

Mobile-friendly web design: Look before you leap into the future

Like this: