WebBlather

Free Advice and Commentary on Web Site Issues

HTML Editing Basics

October 29th, 2007

I got an email recently from someone asking for (free) advice on how to manage their Web site that someone had built for them. Here’s my response:

I’ll try to offer some basics to get you started — of course, this is an overview, and you’ll have to do some studying…

An important caveat: Some Web sites have been built using non-standard HTML or other technologies. The pages might look fine in the Web browser, but if the underlying code is not well-formed, using a different tool can expose problems. Make a backup of your current site before you change things just in case.

There are many different programs available that can edit HTML. In general, you’re going to want a visual editor (also known as WYSIWYG) as opposed to a code editor. Visual editors are much easier to use, and they all work pretty well for updating text on pre-existing pages. But for more advanced things — such as applying design changes or creating new pages to be linked into your current site, you might need a more advanced editor. So first off, decide if you’re just changing or adding to text on pages that already exist or if you need more advanced design, layout or site management.

In general, the process is:

STEP 1: Copy the files that make up your Web site from the Web server to your local computer.

    • Usually this is done through a protocol known as FTP. Your Web server host has the instructions for how to access these files, and should be able to remind you of the username and password for access.
    • There are standalone FTP programs, but many of the HTML editors now include transfer utilities.

      STEP 2: Open one of the files for editing and make changes. (Save when done.) Repeat as needed with other files.

        • Most of the pros use Dreamweaver for overall layout and site management as well as simple updates.
        • There are hundreds of other programs that can also work — iWeb, CoffeeCup Editor, and HotDog are common basic editors. They’re easier to learn than Dreamweaver, but they have limitations as well…
        • For images, the pros use Photoshop or Fireworks — but again there are many other possibilities. Photoshop Elements is an excellent option for basic picture editing.

          STEP3: Upload all changed files from your local computer to the Web server. This’ll be the same process as in step 1, but you’ll be moving changed files in the opposite direction.

          STEP 4: Test in a Web browser to see that the changes look good.

          In some cases, it may be possible to edit your Web site directly on the Web host’s servers — this depends on the host and whether the site was set up for this. This is generically known as a CMS or Content Management System, but the host company probably has their own name for it, like PageBuilder. (As an example, this blog is a kind of CMS.)

          Usable Checklist — Ten Ways to Fix Your Web Site

          October 1st, 2007

          When people visit your site, they need to know where am I, what can I do here, and what’s in it for me? These tips can help.

          1. Branding

          Your logo and tagline should be easily found on your site. Just from looking at the logo and tagline, I should have a clue what your business is. Especially with your tagline, make sure it’s clear — this is not the time to be cute.

          2. Who’s Your Audience?

          Defining the intended audience for your Web site is crucial, and a step that many businesses gloss over. Sure, your audience is everybody on the Web… but the more specifics you can provide about your target audience, the better you will be able to reach them. Ask questions like: Why is your audience here? What are they doing while they’re visiting my site? What were they doing before and after? What makes them happy? What grabs their attention? What gets them into motion? If you don’t know the answers to any of these, stop what you’re doing — and go do some research.

          3. Site Layout & Organization

          Confusing site layouts are among the biggest problems sites face these days. You’re better off with the KISS strategy of keeping it simple. Try to allow the user’s eye to flow in one direction only — top to bottom, perhaps, but not both top to bottom and left to right (or worse yet: bouncing around on the page).

          4. First Thing You See

          This is a test of first impressions — that instant when most users decide whether to stay on your site or exercise the back button. Close your eyes and imagine you’re seeing your web site for the first time. Now, open your eyes and notice the first thing you see. If it doesn’t help answer where am I and what can I do here?, you’ve got some redesigning to do.

          5. Main Navigation

          Many visitors will scan your navigation bar to get an idea of what can I do here?. Make it easy for them. Be sure your main navigation is all in one place, and that the labels are clear. This is not the place to be cute. Be especially careful of using industry-specific labels (that your target audience won’t understand) and labels with multiple meanings.

          6. Call to Action

          Give your target audience something to do. Address the what can I do here? need right in the middle of your Home Page — such as “buy our most popular widget now” or “contact us to start improving your manufacturing processes.”

          7. It’s About Benefits

          Remember the three main goals: where am I, what can I do here, and what’s in it for me? Answer the last question in terms of benefits to the user. Consider this weak-benefit statement: offering curriculum consulting to higher education — that doesn’t tell what’s in it for me? Can you rephrase that in terms of benefits to the user?

          8. Retention/Stickiness

          First impressions are important, but repeat visitors will be your core customers. Give them a reason to come back — either by providing information (or services) they’ll want or by constantly updating the information (or services) available.

          9. Content

          Write clean, simple text for your Web site, and keep it organized. If the text is long, highlight key information or provide summaries. Where appropriate, include links to related content (or services), and a call to action that is related to the content.

          10. Ask for Feedback (and really listen!)

          Most people leave your site and don’t tell you why. Maybe the phone rang. Maybe the computer crashed. Maybe your site blew off all the tips listed above — and not only are they leaving your site, they’re going to bad-mouth you to all their friends. One way to involve your users is simple: how can we improve? Even if people don’t respond, they’ll be happy to know that someone’s out there waiting for their opinion. And if people do respond, send them a nice reply (even if you think they’re crazy…)

          That’s my ten. What are yours?

          Personalize Your Site

          May 11th, 2007

          A while back, a friend of mine pointed out that his Web site (which is very basic) gets a fair amount of new business for his family-owned printing company. The secret: there’s a snapshot photo of him and his wife on the Home Page, and many new customers comment that they saw their photo on the Web. (Very few, except curmudgeons like me, comment that the site looks dated and boring.) The crucial lesson: be personal on your site.

          Larry and Charlotte are not models. But they are likable in person, and the snapshot makes them real to people surfing for a business. It puts a face on the business, which is otherwise just a logo.

          Another client started a “Meet Captain John” feature to introduce a new expert on staff. Response has been so good, it’s become a regular feature on the Web site, and Cap’n John is now answering online questions from customers. When people come into the store, they seek out John and introduce themselves.

          Today, I stumbled across the Web page for Scott, The Nametag Guy. He’s taken this to an extreme, even tattooing his nametag on his chest. And though I haven’t heard him speak or read his books (yet), I instantly love Scott — and clearly a lot of other folks do too.

          On the Web and in business, competition is fierce. Projecting your personality is a powerful way to connect with potential customers.

          Empty Space is not Wasted Space

          April 23rd, 2007

          Lately, I’ve been seeing a lot of dense Web sites. You know, three columns jammed with stock quotes, recent news, ads, highlights, customer login boxes, sale-of-the-day. The clutter in these sites drives me mad. It’s like a pack rat was turned loose on the Web, armed with everything that could possibly go on a Home Page. (For many bad examples and an occasional good laugh, see Web Sites That Suck).

          But when a client sends me several of these jumbled messes as examples of what-are-you-looking-for-in-a-site, I get nervous.  ‘Cause I like clean, open Web pages, even if it means that something doesn’t get to go on the Home Page. And since I like clean, open Web sites, I design them that way. But then there’s the client: well, let’s just put the news crawl right… there. In that space there.

          We can’t because it’s there for a reason. Remember, the Home Page is about branding as well as information. Put too much information on the page and you lose the branding. Empty space helps break up the dense blocks of stuff that you insisted we jam onto the page. Like taking a deep breath in the middle of a long sentence, white space gives our eyes a break as we’re scanning the page. Users need this.

          Site Navigation: Keep it Simple

          March 19th, 2007

          As Web sites become more crucial to a company’s marketing and visibility, good site design is becoming critical to the long-term success of a site. (Some would say it always has been critical, but let’s not get lost in that point just now…). Problem is, as sites are being more heavily designed, navigation generally suffers.

          I’ve recently looked at a number of high-end sites (generally Flash-based) whose overwhelming design makes the navigation difficult. These tend to be youth-oriented sites, and I guess someone must be asserting that kids are more welcoming of sensory overload, or these crowded, unfriendly sites would fade away.

          But if there’s a study out there that demonstrates that today’s youth prefer a difficult design to a simple, organized one, I’d like to see it. Until then, keep the site navigation as clear as possible. 

          • Avoid hiding too much content under broad categories. Use dropdowns or tooltips to reveal what’s in each category (and to make skipping directly to deep content easier).
          • Be sure the navigation is complete. Omitting obvious items such as Contact Us is fairly common, believe it or not…
          • If your design uses them, make animation or strong visual elements “point” to the main task (e.g. the “buy now” or the site navigation).
          • Use space to separate zones (especially navigation).
          • Keep nav elements together (except utility links such as Privacy Policy or Login/Logout — they can stand alone).
          • Avoid making your nav look like ads (or, for that matter, anything but navigation).

          Confusing Homonyms

          March 19th, 2007

          Be careful to use key words that are simple and clear for your visitors. Web site visitors don’t really read — they scan. Usually, they look for highlighted text and other noticeable keywords that give them quick clues to 1) “What’s on this page” and 2) “What can I do from here?”

          The trick is to choose keywords that a user will notice and that will be instantly meaningful. But be careful: words that have multiple meanings can trip up your site visitors. Bottom line is: be sure to use words in the way that your visitors expect — and if in doubt, rewrite.

          Consider a woodworking site, whose navigation includes “shop.” Will the user expect it to mean online shopping or about the workshop? If I’m looking to buy, I’d click that link — and if I ended up at a page about the workshop, maybe I’d go back and start over. Or, maybe I wouldn’t, if the phone rang at that moment.

          There’s an easy fix for this scenario. Adding a small cart icon or a dollar sign to the nav button (or using “shopping”) would probably clear things up. Or, substituting “woodshop” or “workshop” would provide clarity in the other direction.

          Web 101: Hosting

          January 31st, 2007
          Web Servers
          For more about how Web servers work, see How Stuff Works.

          To get started with your online business, you’ll need a Web host. This is simply a company that hosts Web sites like yours. It could be a guy running an operation out of his garage or a giant server farm located in another state. There’s a lot of competition for hosting, and the what you pay vs. what you get benchmarks keep changing. Shop around, and check out recommendations.

          Bottom line is pretty simple, though: your Web host must be able to keep your site available 24 x 7 x 365. If something crashes (and, eventually, it will), your host must be able to restore your site immediately. In addition, good customer service, via phone and e-mail, is crucial.

          You can get hosting for free, but if you’re running a legitimate business, I don’t recommend it. Likewise, your DSL, Cable or dialup provider may offer basic hosting, and the cost may be included. Again, I don’t recommend it for business use.

          I recommend that businesses start with an established, inexpensive host. You don’t have to pick the cheapest plan with one of these hosts, but if you do and you grow out of it, they will happily convert you to a more robust plan. Of the zillions of hosts out there, I recommend and use Bluehost and ixWebHosting. Why? Good features, competitive price — but most of all, excellent customer service. Likewise, I don’t recommend Yahoo (reputation for poor customer service) or GoDaddy (hidden charges and constant upselling).

          How much should I pay? What should I get? Prices can be all over the map, and the features offered are also hard to compare. At a minimum, you should get:

          • No setup fee
          • 30-day moneyback guarantee
          • More than 10 Gb space (This is for storage of your Web site files on the server. You’ll only need about 100Mb, so any host offering less than that is suspect.)
          • More than 250 Mb data transfer per month (when people access your site, they request a page and the files are transferred. More pages = more data transfer. 100Mb/mo is probably enough, unless you get featured on Oprah.)
          • More than 100 email accounts including webmail access to those accounts (This is addresses like name@yourdomain.com. You might only use a few e-mail addresses, but I’ve seen clients pay a lot for extra e-mails due to a bad host.)
            TIP: If you want to be seen as a legitimate business, don’t show your e-mail address as bizname@aol.com or jerry@sbcglobal.net. You’ve got a business domain name — use it for e-mail names too.
          • Most hosts provide daily/weekly backups of your Web site data. (If your site ever crashes or — gasp! — gets erased, you’ll appreciate this feature.) Some hosts, however, charge extra to access the backups if it’s your fault the data disappeared.
            TIP: Think for a minute about backups and disaster recovery. I’ve lost entire Web sites due to a server crash, operator error or other snafu. If it happens to you, it’ll be too late to start thinking about a plan. (See here and here for the gory details.)
          • Tech support: I’m good at this stuff, and I end up calling tech support from time to time. If you’re not experienced in working with Web servers, find a host with good tech support. (Note: don’t expect them to train you as a system administrator; but you should be able to ask a question and get a clear answer.)

          Some businesses pay more for hosting. Why? Most hosts offer a shopping cart of some sort, but you can pay a bit more to use a host that specializes in e-commerce and reduce the setup time or have better support available. If there’s a good business reason to pay more, go ahead. Otherwise, save your coins.

          TIP: beware the smallest companies — if they go out of business or are bought out by a competitor, your site could disappear or the services and pricing could change with little warning. (I once spent two weeks getting a site back after a host went missing — and took my site with them!)

          Web 101: How does the Web Work?

          January 30th, 2007
          What’s the Internet?
          For more basics on the Internet, see How Stuff Works.

          Sometimes when I present my E-Biz seminars, an attendee is lost about the foundation of the Internet — what is it, exactly? Here it is, for those who like to start at the very beginning (a very good place to start)…

          The Internet is a city (ooh, a metaphor!): There are roads, big and small; traffic lights that regulate traffic; homes and businesses that you can visit; and sometimes, traffic jams. Sure, the Internet is really a massive network of computers, all connected by wires and routers that pass information back and forth. But the metaphor helps: a Web server is akin to a home or business within the city. The wires of the network are like roads (some allow traffic faster than others). Every destination on the Web must have a unique address — that’s how the information gets from one place to another. There are even private roads and gated communities that you must have permission to use. Now, let’s mash up the metaphor…

          A Web Server is usually a souped-up computer that runs Web server software designed to listen for, and respond to, requests for information. Think of it like a business in Internet City: It is always on and connected to the Internet, and it just hangs out and waits for a request to come its way. (Actually, Web hosts can handle many smaller Web sites per server machine, so in theory your Web site might reside on the same box as your competition.)

          A Web Client is your computer, which connects to the internet in one of several ways. From the Web browser, you send requests for Web pages. These requests head out your driveway, make a right on Main, hop on the freeway, and finally arrive at the destination business (the Web server identified by the domain name you typed into the Browser’s Web Address box, or the Web Address of a hyperlink that you clicked on from another Web page). On arrival, your request identifies itself to the Web server and says, “Gimme the Home Page,” or whatever page you requested. Then it heads back to you. When you’re connected to the Internet, your computer has a unique identifier (your IP Number), so that the request can correctly find its way back to you. When it arrives back, information in tow, it presents this information to the Web Browser.

          A Web Browser is really an interpreter of HTML, which is a way of marking up plain text so that it has formatting, style and shape. (See this bold text? It’s been marked up; otherwise, it would be plain.) Most people use Internet Explorer (IE) as their browser, but many Mac users use Safari, and more and more people (including me) are using FireFox. It doesn’t really matter, except that each interprets HTML a bit differently, and some Web page designers don’t bother to check that their pages work in anything but IE. So the browser takes the HTML and sets about arranging it on the page so you can view it. Images and other visual content are delivered separately from the HTML, so when the browser runs across an image placeholder withing the HTML page, it sends a new request to the Web Server: “Gimme image ‘logo.gif’.” Once that image arrives, it is placed into the page (that’s why, on slow dialup connections, the text loads first). If a Web page has HTML plus a dozen images, your browser will have sent thirteen requests to the Web server by the time the page is completely loaded. Same with movies and Flash animation, except they take longer because the file is bigger.

          When you click another link, the process repeats: your request heads out the door, down the street, says “gimme” to the Web server, returns to you and hands the HTML to your browser so it can display a new page. All this happens in seconds…

          …unless there’s traffic on the Interstate. Or the Web server’s getting a lot of customers at the moment your request arrives and yours has to wait… or the HTML markup has problems that slow the browser down… or the images are huge, so it takes longer for them to completely load.

          Thus, the speed at which a Web page displays is dependent on several factors — but usually, it’s the total size of the HTML file plus all the images and other visual elements.

          Summary: For your web site to work, several key things must be in place.

          1. You must have a domain name (also known as a URL or web address).
          2. Your domain name must point to a specific Web host running Web server software that hosts your Web site (the Web uses DNS records to keep track of which domains point to which hosts — kind of like the yellow pages).
          3. The Web server must be on and accepting requests for HTML. (Sounds simple, but if the server crashes, so does your Web site.)
          4. You must have placed at least one page of HTML on that Web host. If your page includes images or other visual files, these must also be placed on the Web server that hosts your site. If your page links to other HTML files, they must also be placed on the Web server. You probably created these on your personal computer, but for the site to work, they must be moved (”uploaded” or “published”) to the Web server. Or, you might have filled out a Web form and saved the files in that way, but in any case, all necessary files must be on the Web server.

          Web 101: Picking Domain Names

          January 30th, 2007
          My Name is URL For the real basics on Web addresses (aka URLs), see How Stuff Works.

          Before you register www.myname.com, consider:

          Choose carefully: pick a name that’s easy to say, easy to remember and easy to spell. Shorter is good, but easy and memorable is better. Avoid traps like these:

          • TWOWRITE.COM: over the phone, you’d have to spell it out, or somebody’ll think it’s tooright.com.
          • WHOREPRESENTS.COM: Who Represents makes sense, but when you cram the two words together, it reads differently.
          • WHITEHOUSE.GOV: Be careful that mistyping will not send your customers to an unwanted site. In this famous real-life example, whitehouse.com was a porn site, and whitehouse.org is still a parody site of the real White House Web site. Imagine the kids’ surprise!

          Domains are cheap these days. Consider getting alternates (misspellings, abbreviations, slogans, etc.). You can easily point more than one domain name to your main Web site.

          A quick note about search engines: key words in your domain name help your site to show up when someone searches for that key word. So www.abccorp.com might help brand your company, but www.small-widgets.com will score higher with search engines if people are looking for “small widgets.” (For more on search engines, see SEO Basics.)

          In my opinion, .com is preferred unless you’re a nonprofit or educational organization. (Maybe in the future, .biz or another variant will catch up).

          TIP: Every registered domain name has one to four contact names, who are authorized to manage that domain. Be sure your name is listed as one of them! (I’ve spent weeks retrieving domains for clients who didn’t do this). For example, you can list yourself as the Administrative and Billing contact, and your Web Consultant as the Technical contact.

          IE7 and FF2: Will my Web Sites Still Work?

          November 3rd, 2006

          As you may know, Microsoft recently released a major upgrade to Internet Explorer (version 7.0) and about the same time, the Mozilla Foundation came out with Firefox 2. Both are major upgrades, but IE in particular is significant, since it had been so long since the last major upgrade (and since about 80-90 percent of your site’s visitors use IE). Later this month, the upgrade to IE7 will come down as part of the automatic updates for Windows users — in other words, many people are gonna upgrade without really realizing it.

          Which means… people will be viewing your Web site a little differently than they used to — or, maybe, a lot differently.

          When I build a site, I test in a variety of available browsers, and while a few minor differences are okay with me, I’m pretty certain the site looks right in the most likely browsers before it launches. So for me, a new set of browsers means going back and testing again.

          I just finished testing all the Web sites I support using the new IE and the new FF. Good news across the board:

          • The new IE interface is vastly improved (over the old IE6; IMO, however, FF is still better). For people who relish their rut, it’ll take a while before they get used to the new chrome — and I will no longer be able to tell people how to find the refresh button by saying, “it’s the one next to the back and forward buttons” — but overall it’s better. Most people won’t start using tabbed browsing right away (but eventually they will, and that’ll change their behavior a bit).
          • In FF, my favorite new feature is the programwide spelling checker, which flags possible errors anywhere you can type. This’ll be great for Web-based e-mail (and, frankly, this blog — which would suffer from haste and stubby fingers, were it not for my esteemed brother’s eagle eyes).
          • All my sites performed well in the new browsers. I’m happy to avoid major triage, but I’m also not too surprised: I generally insist on using Web standards rather than browser-specific widgets, and this is the payoff.

          If you’ve got a Web site — especially if you’re using more-advanced functions like forms, javascript, browser-sniffing, or custom programming — you should test it to be sure it’s still working. (Or, I’ll be happy to do it for you…)

          WebBlather is powered by WordPress
          Entries (RSS) and Comments (RSS).