Blog@Case Topics: how-to

2 Top 5 Lists = 1 Top Ten List: My most read Web Development Blog entries from 2008

2009-01-12T04:26:40Z

New Year's Eve around the world

Now that the New Year has been rung in, it seems that the meme of the moment is to blog about the year in review. So I thought I'd follow suit. I looked over my blog entries to see if I'd trended towards any new themes for 2008. While I have written more on social media this year (who hasn't?) I quickly noted that my topics overall continued to range across a wide array of Web related subjects. Next I looked at my stats to see which articles were getting the most traffic and comments.

As it happens the most read article of 2008 was also the most read article of 2007. While quick trendy subjects such as Plurk: Social Media Marketing in Action brought in new readers and temporary traffic spikes, the more timeless subjects such as writing, marketing and navigation were the ones that drew in the most readers overall. So, instead of presenting you with my top 10 articles of 2008, I've decided to break them up into 2 groups, the top 5 written in 2008 and the top 5 from year's past that continue to draw readers—even with the passage of time.

Top 5 Web Development Blog Entries written in 2008

5. Testing Web sites with multiple browser versions: Suggestions on ways to test sites in multiple browsers, reasons for testing and why we still can't ignore Internet Explorer 6.0.
4. Reflections on social media networking and marketing: Overview of popular uses for social media, nature of word-of-mouth and the impact of social media on marketing goals.
3. Wayfinding within your Web site: This follow-up to Your home page is NOT your index; it's your store front provides tips on navigational aids that will help users to explore your site no matter which page they may enter through.
2. An URL by any other name would still work like an URL, part 1: subdomains: Exploring the differences between subdomains and subdirectories and their impact (or lack thereof) upon marketing.
1. Embedding YouTube Videos the Standards Compliant Wayâ€”SFWobject 2.0: Embedding YouTube Videos is one of the easiest things you can do on the Web, but if you're a stickler for standards compliant HTML, you can't just copy and paste. SFWobject 2.0 provides an easy remedy.

Conclusions

The Web is constantly evolving and we're all trying to keep up with the latest trends and technologies. But no matter which platform we use to publish, which strategies we apply, it always seems to come back to the basics. The most basic element of the Web is content. While video and audio continue to build in popularity, the core of our content is still composed of words. That's probably why the Voice and Tone article was read more than any other.

You, my readers, understand the importance of fundamentals over the latest fad. I think that is why—for the most part—the most popular subjects on this blog are the ones that address these basic strategies, those that can be applied now and in the future. In 2009 I expect to be writing more on social media topics such as Facebook and Twitter, but I'll also be writing more about content and general marketing principles, the foundations we build upon in all of our Web-based endeavors.

What about you? If you're a blogger what will you focus on in 2009? If you're a regular (or new) reader, what would you like to see here?

Happy New Year!

P.S. Read more of my thoughts on social media and the Web on Ariwriter

Ari Herzog recently interviewed me for his blog, AriWriter: Strategies and tips on social media and online marketing. You can read the full article, Guest Interview with Heidi Cool: How a University Experiments with Social Media, online.

5 Tips to ensure your readers can read your HTML e-mail messages

2008-12-09T06:01:20Z

Sample message in Macmail

Sample message in Gmail without images

Sample message in Outlook 2007

Sample message in Outlook 2003

As the semester winds down, and the holiday season encroaches, it seems there are more and more events to publicize, greetings to send, end-of-year newsletters to distribute, holiday sales to promote, etc. T'is the season for HTML e-mails. Alas, as many of you know, creating and distributing an HTML e-mail message is far more complicated than building a regular Web site. As we struggled in the days of the browser wars, today we struggle with the myriad ways popular e-mail programs support HTML. Anyone who has had to create an HTML e-mail message, or has received one they couldn't read, knows what I mean. So today I'll present five tips that should help to make your e-mails readable by the masses.

Throughout this article I'll refer to the sample Gothfest 2009 e-mail pictured (in various renditions) on the right. This sample was created with certain features in mind to demonstrate how such an e-mail will render in different programs.

1. Use images to convey a mood or theme, not to present content.

In many popular e-mail programs, the default preference is to have images turned off in incoming messages. Thus many of us receive e-mails with little boxes and some indicator that says "click here to load images." If you are like me, you rely on the remaining text of the message to make you decide if you should bother or not. Recently I received a message from a well-known business magazine in which the only text provided stated only the name of the magazine and its address. The subject line was equally informative in that it said something like "Special News Update from Magazine X."

The rest of the content was contained in .jpg files linked in the message. This is problematic for two reasons:

Sighted readers, such as me, have no way to judge whether the message is worth reading (or not) unless we click on the image. If we're busy reading through a long list of e-mails we may just send it to the trash. If the sender didn't care enough to present the information clearly, then why should we care enough to read it?
Readers with vision problems who rely on screenreading software have no way to read a message that is part of an image. They are relying purely on the text of the message and any "alt text" provided for the image. This particular message didn't include any "alt text" so the message was lost to such recipients.

We all want our messages to be read. To ensure that they are readable by everyone in your audience, just be sure to include all the important points as actual text. This doesn't mean you can't use images to add visual interest, it just means that your message will be accessible to everyone whether they can see the pictures or not.

In the Gmail screenshot on the right we see a sample message without images. The original file contains two images, a picture of Death and a white background image with shaded edges. Because the content is text-based the main message is available and the alt text provides a description of the missing photo. This would also be readable in a text-only mail program with no colors or styles available.

2. Use Tables for Layout (WHAT????)

Most of us know that tables are meant for tabular data and CSS is meant for style and position. Alas many e-mail programs, including Gmail, don't support the positioning features of CSS. If you want to put text on the left and an image on the right—as I did in the sample— and you can't use the float property of CSS, you're stuck with tables.

To create this layout I made a table that has 3 rows of one column each.

The top row has a dark background, a green bottom border and contains the title.
The middle row has a white background and contains another table with one row and two columns.
- The left column contains a background image, but no background color and features the main text. With images off the white background from the main table will show through so that the text is still easily read.
- The right cell has a dark background and the Death picture. With images off the picture is replaced with alt text. In our sample this is showing up as black which indicates that the table cell should be restyled to feature a lighter color.
The bottom row has a dark background, a green top border and the opt-out message. In some of our samples the e-mail is showing up as dark blue which is hard to read against the dark background. In the Macmail version it has been re-styled in a light green that is easier to read.

To get a better idea of how this was set up, view the source code.

3. Use HTML 4.0 Standards Compliant Code to the extent that you can.

Going back in time to use tables makes us feel like we're breaking the rules of HTML, but it is still possible to adhere to standards compliant HTML in e-mail if you use the HTML 4.01 transitional doctype. While adhering to Web standards is a good idea in general, I also find it helpful for testing and troubleshooting e-mail files. When I find a problem in my message, the first thing I'll do is validate the file. This helps me determine if the problem is a simple coding error or if it is due to a feature not supported in one of the e-mail programs I'm testing. By eliminating any coding errors I can then focus on the work-arounds I may need to implement to solve the e-mail specific problem.

4. Use inline styles

Most of us are used to using external or embedded stylesheets. Alas, some programs don't support those. To ensure that your styles aren't ignored, use inline styles to format everything in the document. This takes more time and adds to the code, but will be accepted by more programs. For example, to style the top table cell and the header within, I used the following code:

GOTHFEST 2009

To add an inline style to an html element just include style=" " and put your regular CSS information within the quotes.

In this case I styled the top row (which uses a because it is a table header) to have a dark background, green bottom border, red type, left-aligned text and Georgia or other available serif font. The title was put in an

header styled to have 10 px margin on the top and bottom and 30px on the left and right. I also added 2px of letter spacing. I surrounded 2009 with a span styled to use 0px of letterspacing and a normal font weight. I incorporated the letter spacing and the 2009 span changes mostly to see if they would be carried through in the e-mail programs I tested.

Note: When coding for the Web I find padding works better to ensure files work well in IE 6, &, Firefox etc. But I've found that padding seems to fail more often than margin in e-mails, so I use margin to ensure that I retain space between paragraphs in as many programs as possible.

People sometimes worry that they'll lose too much flexibility if they try to stick with Web standards, but this example shows that despite the limited support of CSS in e-mail there is still room for experimentation. These styles worked in most of the programs I tested.

5. Test your mail in several different e-mail programs.

The e-mail standards project provides information on what features are supported by the most often used e-mail programs. These offer helpful guidelines, but the only way to know what will work for your file is to test it in as many different programs as you can. You can do this by installing several programs on your own computer and by enlisting the aid of friends and colleagues. I can access my work e-mail in Outlook 2003, MacMail, Gmail and Case's Webmail, so I send myself messages then check them in each program. I haven't upgraded to Outlook 2007 (as I'd no longer be able to test 2003) so to test that I send messages to my colleague Kim—who patiently lets me look over her shoulder or makes screen captures for me to evaluate.

As my samples indicate, your e-mail will not look the same in every program. That's O. K. The important thing is to make sure that it renders cleanly in each and degrades nicely if images or styles are not available. If you can do that, you will ensure that your message doesn't get missed because of poor formatting.

I can't embed HTML code in Outlook. How do I send an HTML e-mail?

How you send an HTML e-mail depends on your mailing list and the programs you have available. If you're regularly sending mass e-mails to large lists, you may wish to use an e-mail service such as Target X or Constant Contact. There are many such services available. Check with your organization to see if they already have an arrangement with a preferred vendor.

For occasional mailings sent to smaller lists, or via listservs such as those available through https://lists.case.edu, you need an e-mail program that will allow you to insert HTML. Case's Webmail program, found at http://mail.case.edu let's you paste HTML into your message body, but only if you are accessing it through Internet Explorer.

An easier option for most users is Mozilla's Thunderbird, available for Linux, Macintosh and Windows. Thunderbird is free and very easy to install. To send an HTML e-mail just click the "Write" button to compose a new message, type in your recipients addresses and subject line then go to the "Insert" menu and choose "HTML." A box will pop up in which you can past the code from your HTML file.

Learn more about HTML e-mail

Blogs: The Many Voices of a University

2008-07-23T16:17:57Z

Recorded video by Ustream
Blogs: The Many Voices of a University
(go forward past the first minute)

Sunday afternoon I skibbled off to Atlantic City to attend EduWeb 2008, a conference for Web development professionals in higher education.

The critical point of the conference—for me—came Tuesday afternoon at 5:00 when I presented Blogs: The Many Voices of a University. As some of you know, I'm more of a writer than a public speaker, so I faced the challenge with a wee bit of trepidation. Many kind people told me it went well though, so I will now share it with you. If you who were unable to attend, or if you wish to demonstrate the power of blogging to your university's administration, you may watch the video and view the slides here. I've also included the presentation abstract below.

Presentation Abstract: Blogs: The Many Voices of a University

Whether marketing to prospective students, engaging the community in campus life or reaching out to alumni, our mission requires us to distribute a wide range of information that will allow our various audiences to connect with our colleges and universities. Such information could include features of our academic programs, the impact of research, faculty scholarship, student achievements, campus activities, event announcements, etc. Through the use of campus blogs we can build on this informational foundation by letting the members of our community share their own thoughts and viewpoints with the world. By giving voice to these individuals we present an inside look into their experiences, activities and intellectual pursuits.

At Case Western Reserve University we have made blogs available to all members of the campus community including students, faculty, staff and alumni. Staff members use these blogs to share information, to teach and to provide customer service tools online. Faculty use them to share both their personal ideas and as classroom tools to engage students in online discussions. Students may blog about their overseas experiences, their athletic activities or classroom assignments while alumni may discuss their careers or political beliefs. This presentation will provide examples of the various ways individuals at Case, and other schools, are using blogs and how these individual voices come together to present a richer portrait of university life.

Blogging at Case

This presentation would not have been possible were it not for the Case Blog System provided by ITS, and the rich content created by our blogging alumni, faculty, staff and students. Thank you Lev, Jeremy and the many Case bloggers who gave me something to show off at the conference!

You can learn more about blogging at Case by visiting these resources:

Forthcoming: reflections on the conference.

Testing Web sites with multiple browser versions

2008-07-14T05:45:53Z

Firefox 3 from PortableApps.com (Windows)

Until recently I was one of the only nerds who had yet to upgrade to Firefox 3. I'd been waiting until I could find an easy way to install it alongside (rather than in place of) Firefox 2. When I'd tried doing this a few months ago—with the beta version of Firefox 3—it hadn't worked properly, so I'd put the idea on hold.

I mentioned this in a meeting, when a colleague piped up with a simple solution. He suggested using the PortableApps version, a standalone version of the program that can be installed on a Flash drive—for portability—or simply in a directory you designate on your computer. This was so obvious I immediately wondered why it hadn't occurred to me before, but then, practical ideas are like that.

PortableApps.com offers a plethora of portable software solutions—including Firefox—for Windows

Once I got back to my office I hopped over to http://portableapps.com/, looked for Firefox 3, then proceeded to download it. Within minutes it was installed, separately and independently of Firefox 2. When I tried to start it up I discovered that you can't run them both at the same time—I had to close out of 2 to open 3, then close out of 3 to reopen 2—but you can run them on the same computer. This will be tremendously useful if I discover some quirk in Firefox 3—such as an add-on that no longer works and has yet to be updated—or if I need to see how a Web page renders in each version.

That solved the problem for the Windows P. C., but what about the Macintosh?

FreeSMUG: Portable Applications for OSX

Firefox 3 from FreeSMUG (Mac)

A quick Google search turned up FreeSMUG's portable applications section. FreeSMUG offers a portable version of Firefox 3—in several languages—as well as other popular open source programs such as Open Office and Audacity. Those new to many of the Open Source programs available through FreeSMUG can learn more about them through a variety of helpful tutorials available on the site.

FreeSMUG says of its portable applications, "OS X FOSS portable applications are packaged so you can carry around on any portable device, USB thumb drive, iPod, portable hard drive, memory card, other portable device (or also on your internal hard disk), taking your preferences with you." This of course could be handy for any number of reasons, but the ability to run multiple versions of browsers to use for testing Web sites, is particularly useful to me.

Why test in multiple versions of the same Web browser? Why not just upgrade?

As a Web developer, you probably upgrade your browsers fairly often. That's not true of the average user. In many cases the people who visit your site are using the same browser that came with their computer.

The most popular browsers used by visitors to the Web Development Blog this month are:

Internet Explorer 7.0 - 24.6%
Internet Explorer 6.0 - 24.3%
Firefox 3.0 - 12.7%
Firefox 2.x - 17.8%
Safari - 5.4%

Interestingly .5% were still using Netscape 4.0, which is over 10 years old!

To ensure that you, my site visitors, can view and use this site with ease, I need to make sure that it works properly in the browsers that most of you are using. This requires testing in multiple browsers and versions.

When a browser releases a minor upgrade, this isn't a big issue. But when a Web browser makes a significant upgrade it can make a big difference. A site that looked fine in version X, may look horrible in version Y.

When Internet Explorer 7 came out, users and developers quickly noticed that many pages didn't render properly in the new version. I.E. 7 was actually more standards compliant than I.E. 6, but developers who had used I.E. hacks to make pages look right in I.E. 6 found they didn't work with I.E. 7. This led to a lot of sturm und drang about I.E. 7 "breaking the Web," as those developers needed to modify those hacks to make their sites work in both I.E. 6 and 7.

Here at Case our templated sites don't rely on many I.E. hacks so they transitioned smoothly from I.E. 6 to I.E. 7. But when I'm building new sites, I may sometimes incorporate new styles or features that I've not used before. This is when I make a point of testing in multiple browsers. Tredosoft's Multiple I.E. Installer provides a convenient way to run different versions of Internet Explorer on Windows XP. They also provide information for running I.E. 6 natively on Vista.

Must your site work in every browser available?

No, the Web has evolved enough since 1993 that making a site backwards compatible with every browser version is pretty much impossible. But if you adhere to Web standards, build sites that degrade cleanly in older browsers, and test in the browsers used by most of your readers you should be able to provide a good user experience for all of your visitors.

Web Browse Testing Resources

Tips for installing Google Analytics on Case and other Web servers.

2008-06-19T03:02:18Z

Traffic sources: a wee fraction of the data available

There comes a time in every Web maintainer's life when the boss or client asks to see the Web stats for the past 6 months/year/5 years or what have you. Ideally you or your server administrator set this up long ago; you—being equally keen to understand the usage patterns of your site, and to use that knowledge to improve your content—check them on a regular basis, and can provide the information immediately.

Then again, if you've been busy building and updating sites, this may be one of those projects that has been patiently waiting on your to-do list. If your server doesn't have analytics software pre-installed, and you've not yet installed any yourself, now—before the boss asks—is the time to do so.

This is particularly important for users who host sites on the main Case server.

Since upgrading the Web server, we have switched from using Aurora Stats to using Google Analytics on our sites. Where in the past you would have run a monthly report using the A.P.A.S. utilities, now you just install your tracking code once—after which you can view your data at any time. (We are also exploring additional server-based analytics software that we may install in the future to augment what is available through Google.)

Getting Started

To begin the process go to http://www.google.com/analytics. If you have an existing Google account you can login here to set up your analytics account. If you don't already have a Google account you can sign up to create one.

Creating your site profile

Login to Google Analytics, then select " Analytics Settings"
Click on Add Web site Profile
Choose your profile type. If this is the first time you are setting up analytics, choose new domain. If you are adding another Web site within the same domain, choose existing domain. In this example we'll choose new.
Type or paste in the URL of your site's domain. Note: If your site, like many Case sites, does not reside on the root of the domain, do not include the full path to your site, only include the domain. A complete URL, such as www.case.edu/community, will give you an error message as pictured here. Instead just include www.case.edu or whatever domain you use. (You will modify this later in step 13.)
Select your location and time zone then click continue
On the Tracking Code page, you will see 2 options. Select New Tracking Code (ga.js). This will give you the tracking code for your site. The code will look something like this:
Add the code to your site
Instructions for those on the main Case server
1. Create a new blank file in Dreamweaver or any plain text editor and copy the tracking number into the file. In our example the number is UA-1279047-11 as shown in red.
2. Save this file as .googleanalytics. In Dreamweaver select "all files" in the "save as type" dropdown box to make sure no extension is added to the filename. If your program saves it as something like .googleanalytics.html or .googleanalytics.txt simply exit the file and rename it without the extension.
3. Upload this file to the root or main directory level of your site. The server will use this file to embed the code into your pages.
Instructions for those on other servers
1. Copy the full code provided by Google and paste it into the bottom of each of your Web pages immediately above . If you are using server side includes (ssi), templates or some other method for including standard content across your site, you can put this in which ever file controls the lowermost content on your pages. I generally put mine in the bottom of the .ssi file I use to include the footer on my pages.
2. Upload your edited pages to your site.
Click the Finish button. This will take you back to the Analytics Settings page. If you have a site at the top level of your domain and everything was installed correctly you should see " Tracking code installed Waiting for Data" under the status column to the right of your profile listing. Your installation is now complete and you can return in 24 hours to see your data.
If, like accounts on the main Case server, your site is hosted in a subdirectory within your domain, you will see " Tracking code not detected" under the status column. This is perfectly normal and will be remedied in the following steps.
Click Edit under the Settings column to the right of your profile listing. This will take you to the profile settings for your site.
Click Edit in the upper right corner of the Main Web site Profile Information box.
Change the name of your profile to one of your choosing.
Replace your domain URL with the complete URL for your site. In our example we're using http://www.case.edu/community/.
Type in the name of your default page. On the main Case servers we use index.html as the default pages within directories. Other servers may use default.html. If you're not sure, check with your server administrator or Web hosting provider.
Click Save Changes to return to the Profile Settings page. On this page you can click on "Check Status" to make sure everything is working. It may take a minute or two for Google to process everything after which it should say " Waiting for Data -
Analytics has been successfully installed and data is being gathered now." Your installation is now compete.

Additional reference materials and instructions have also been provided by ITS as part of the new Aurora Project Administration System (APAS) Toolkit (login required).

Tracking .pdf, .mp3 and other downloadable files

As one of our campus Web maintainers recently observed, Google Analytics doesn't track downloadable files such as .pdf's by default. Google offers a way to do this by adding a small bit of code to each download link, but this requires you to edit each applicable link and move your tracking code towards the top of the page.

If you would prefer to install this on a site wide basis I recommend using the javascript solution offered by Good Web Practices. With this method you simply download their Google Analytics link tracking JavaScript, save it to a scripts directory on your site, and add immediately before the Google tracking code you installed at the bottom of your pages. Those of you using the Case .googleanalytics file method should add this to the bottom of your pages just above —the same way maintainers not on the main server did to add the tracking code in step 7.

Advanced Techniques in Google Analytics

Analytics Resources

CaseLearns: 2008 Summer Semester Classes

2008-06-06T21:35:00Z

Classes take place in Kelvin Smith Library

Registration is now open for summer classes at CaseLearns. Whether you're building your first Web site, adding video to your blog or just want to learn something fun, CaseLearns has a number of options available.

The classes listed below may be of particular interest to those developing or maintaining Web sites.

If you are new to Web design and want to learn Dreamweaver, I recommend reading I'm not going to teach you XHTML/HTML, but you should learn it anyway and doing the homework assignment before taking your first Dreamweaver class.

All CaseLearns classes are open to current Case faculty, students and staff, emeriti faculty, alumni, and Senior Scholars. Case affiliates may register if openings are available. Class schedules are subject to change. Please visit the CaseLearns Web site for the most current information.

Adobe Acrobat 8: Introduction: Instructor: Debbie Korodi
Prerequisites: Familiarity with Windows or Mac OS; knowledge of Microsoft Word.
Wednesday, June 18, 2008 9:00am-Noon
Adobe Acrobat 8: Creating PDF Forms: Instructor: Debbie Korodi
Prerequisite: Knowledge of Adobe Acrobat 8.
Thursday, August 7, 2008 9:00am-Noon
Digital Images I: Introduction & Basic Photoshop: Instructor: Jared Bendis
Wednesday, July 9, 2008 3:00-6:00pm
Digital Images II: Advanced Photoshop: Instructor: Jared Bendis
Prerequisite: Digital Images I: Introduction & Basic Photoshop
Wednesday, July 16, 2008 3:00-6:00pm
Digital Images III: Even More Advanced Photoshop: Instructor: Jared Bendis
Prerequisite: Digital Images I and Digital Images II
Monday, July 21, 2008 3:00-6:00pm
Dreamweaver CS3: Introduction: Instructor: Thomas Hayes
Tuesday, July 15, 2008 1:00-4:00pm
Dreamweaver CS3: Intermediate: Instructor: Thomas Hayes
Thursday, July 24, 2008 1:00-4:00pm
Dreamweaver CS3: Advanced: Instructor: Thomas Hayes
Tuesday, July 29, 2008 1:00-4:00pm
How To Make Web Pages Using HTML: Part 1: Instructor: Thomas Hayes
Tuesday, August 12, 2008 1:00-5:00pm
How To Make Web Pages Using HTML: Part 2: Thursday, August 14, 2008 1:00-5:00pm
Introduction to Pachyderm: Instructor: Jared Bendis
Wednesday, July 30, 2008 3:00-6:00pm
Understanding RSS Feeds: Instructor: Brian Gray
Thursday, July 17, 2008 10:00am-Noon
Video Workshop I: Introduction To Digital Video: Instructor: Jared Bendis
Thursday, July 10, 2008 3:00-6:00pm
Video Workshop II: Advanced Digital Video: Instructor: Jared Bendis
Prerequisite: Introduction to Digital Video
Thursday, July 17, 2008 3:00-6:00pm

Uploading files with Dreamweaver (WebDAV)

2008-05-18T23:23:34Z

If you've been using Dreamweaver to upload files to a Web server using FTP, and you're about to start using WebDAV—either because of the Case Web server upgrade or because you're looking for a more secure protocol than FTP—you'll find that using WebDAV with Dreamweaver is quite similar to using FTP. Simply follow the directions below to configure your sites. If you are managing sites you've already configured to use FTP, choose the existing site definition(s), then select "edit" instead of "new" while following the directions below and change your settings accordingly.

Step One: Define your site

Click on image to enlarge

I recommend doing this when you first start working on your site. In doing so you will provide key information to Dreamweaver that will allow it to better manage your links and other information.

Under Dreamweaver's site menu, choose "Manage sites."
Click the "New" button and select "site" from the drop down menu. This will open the dialogue box pictured on the right of this page.
Making sure you have the "advanced" tab selected, enter a name in the "Site name" box. This can be any name of your choosing.
In the "Local root folder" box navigate to the folder on your local computer or network where you are storing your files for this Web site.
In the "Default images folder" box box navigate to the folder within your site folder where you are storing your main images. (Note: This is optional; you do not have to keep all images in this folder)
In the "HTTP: address" box type in the url for your site, such as http://www.case.edu/community/.
Check the "enable cache" box.
Your site has now been defined, but don't click OK just yet!

Step Two: Define your remote server connection

Click on image to enlarge

This step tells Dreamweaver what protocol to use, the location of your server, and your login and password information.

On the left side of the dialogue box select "remote info." This will bring up a different dialogue box.
In the "Access" box scroll down and select "WebDAV."
In the URL box enter the url for your server. On the new Case server that will be: https://www.case.edu:8000//. (Don't type the angle brackets, you want an address that looks something like https://www.case.edu:8000/xyz67/departmentx.)
In the "login" box type in your username. For Case users this is your Case user ID, not the Web account name you have used in the past.
In the "password" box type your password, for Case users this is your Case network password. Click the "Save password" box.
Leaving all the other boxes unchecked, you are now ready to click "OK."
This will return you to the first dialogue box. Click Done. When this box is closed the "files" panel will automatically open on either the left or right of your open file.

Uploading ("putting") files to the Web server

With the files panel open and set to local view, click the blue button that looks like an electrical plug connecting to an extension cord. This will open your connection to your remote Web server. You may, or may not, also need to click on the round arrow button to the right of the plug to refresh your file list.
Select files and folders you would like to upload and push the "Put file(s)" button which is identified as an upward pointing blue arrow.
In the drop down menu where it says "Local view," switch to "Remote view" to verify that your files have been uploaded.
In your Web browser go to your site to ensure that everything looks right.
Note: If you would like to view local and remote files at the same time, simply click the expand collapse button to the far right of the other buttons in the panel screen. It has a blue and green bar on the top and a small right pointing arrow.

Downloading ("getting") files from the Web server

Downloading is very similar to uploading. With your connection already open, switch from "local view" to "remote view."
Select files and folders you would like to download and push the "Get file(s)" button which is identified as a downward pointing green arrow.

Once you've defined your site, the process is pretty easy. Just upload or download files using the up and down arrows, and you're all set!

Other ways to connect via WebDAV.

If you experience difficulty uploading files with Dreamweaver, you may prefer to use one of the following alternatives (these are what I use).

Uploading files with the WebDrive WebDAV client for Windows

2008-05-18T19:28:48Z

Whether you're about to start using WebDAV because of the Case Web server upgrade, or you're just looking for a more secure protocol than FTP, you may have heard that it can be tricky to use on Windows XP or Vista. WebDrive, available to Case faculty, staff and students on the software center, simplifies the process. Those of you in the habit of using stand-alone clients like WS_FTP for transferring files will find this a convenient and easy-to-use alternative.

If, like me, you develop sites on multiple servers, running different prototocols, you'll also be happy to know that WebDrive supports many of the more popular protocols including:

FTP
WebDav
SFTP
GroupDrive ^®
FrontPage ^®
Amazon-S3 ^®

Where in the past I've been using WS_FTP for sites using FTP and WinSCP for sites using SFTP, I can now use WebDrive for both those and WebDAV, conveniently keeping all of my accounts in one place.

Getting started with WebDrive

Web maintainers at Case can download WebDrive from the software center. After downloading the program you will be e-mailed a registration code. Non-case users may download a trial copy of the program from the manufacturer, South River Technologies. After downloading the program simply double click on it to start the installation process and paste in the registration code you've been provided at the appropriate prompt. Once the program has been installed you can begin defining your site(s).

Configuring sites on WebDrive

Configuring sites on WebDrive is a simple process, similar to what you've done in the past to define sites on WS_FTP or Dreamweaver. The following steps will guide you through the process—as also shown in the animation below.

Select WebDrive from the Windows program menu.
In the configuration box click on "new site" to begin using the site wizard.
Type in the name of the site. This is purely for your reference, so name it anything that aptly describes the site. Click Next.
From the scrolldown menu select the protocol you will be using for this account. For the Case Web server this will be WebDAV, but for other accounts you may use FTP, SFTP or whatever that server requires. Click Next.
Enter the url for your server. On the new Case server that will be: https://www.case.edu:8000//. (Don't type the angle brackets, you want an address that looks something like https://www.case.edu:8000/xyz67/departmentx.)
Check the box marked "Connect securely" then click Next.
Choose a drive letter that you would like to assign to this account. This will map the account to that drive so you should pick a letter that is not already in use by your computer's other drives. Click Next.
Enter your account information. For Case users this is your Case user ID and password, not the Web account name and password you have used in the past. Click Next.
Check "Connect to site now" and click the Finish button.
A window will open showing all of the files on your site.
You may now edit those files directly, or open the directory in which you store the local copy of your site to copy files back and forth. I would recommend that you continue to edit locally, then drag the files to the site when ready.

Once your site has been defined you may connect to again in the future by choosing it from the site list is WebDrive and clicking connect. To add additional sites simply repeat the process described above. Additional information on connecting via WebDAV is available on the Case Wiki.

WebDAV programs and resources for Windows

To learn more about using WebDAV with Windows XP or Vista, visit the following sites.

In my next and final article on WebDAV I'll walk you through the procedures to connect using Dreamweaver.

Introduction to WebDAV

2008-05-15T05:22:31Z

Using WebDAV, I can view the files here on the Web Development Blog. Note: It's not a good idea to use this to edit actual entries, but you can use this to add static .html files such as your "About Us" page.

Here at Case Western Reserve University, we're about to upgrade our primary Web server. Part of this upgrade involves changing the way we upload content to the server. Where in the past we've been using FTP, beginning Monday, May 19, 2008, we'll be using WebDAV. WebDAV has been growing in popularity over the last few years and is now provided as an option by many Web hosting providers. Those of you using FTP on Case or other Web servers may wish to check with your network administrator or Web hosting provider to see if other protocols such as WebDAV are available.

What is WebDAV?

According to WebDAV Resources, "WebDAV stands for "Web-based Distributed Authoring and Versioning". It is a set of extensions to the HTTP protocol which allows users to collaboratively edit and manage files on remote web servers."

This sounds complicated, but for the typical user WebDAV simply provides a more efficient way of writing your content to a Web server. WebDAV is more secure than FTP, allows one to transfer multiple files in one connection, can lock files so that they can only be accessed by one person at a time and let's you view and access your files on your computer the way you would any regular drive.

If you've been using FTP, you've been editing local copies of your files on your computer then putting/uploading them to the server. If multiple users work on the site, you will get/download the latest version from the server before making additional edits and hope that you're not all editing the files at the same time. When you connect to your server using WebDAV you can look at your files the way you would look at any file directory. You can write to the server by dragging/copying from your local directory to the server directory, or you can edit the files on the server directly—just remember that you are editing live files; you may find it prudent to keep a prior version on your local computer in case you need to revert back to it.

How do I connect to a site using WebDAV?

Those of you using Macintosh or Linux computers have it easy. WebDAV is built into the operating system. To connect on a Macintosh simply:

Go to the "Go" menu in the Finder
Select "Connect to Server"
Type or paste the address of your server. On the new Case server that will be: https://www.case.edu:8000//. (Don't type the angle brackets, you want an address that looks something like https://www.case.edu:8000/xyz67/departmentx)
Login at the prompt and save the password in your keychain

At this point your server directory will open up as a folder on your computer and you can work with it as you would any other directory. The video below shows the process in action.

Case users with accounts on http://filer.case.edu or http://blog.case.edu can also use WebDAV. To connect to filer using WebDAV use: https://filer.case.edu/dav//. To connect to the Blog server use: https://blog.case.edu//.

View at full size on Vimeo.

Connecting via WebDAV on older Macintosh machines running OS 8 or 9

If you've got an older Macintosh that you are still using in your Web development work, you can still connect via WebDAV using Goliath. Visit the Goliath Web site to download the software and read the FAQs and help files. Versions for OS X are also available.

Connecting with WebDrive or Dreamweaver on Macintosh and Windows

The ITS Web group has also provided detailed instructions on the Case Wiki.

WebDAV resources for those who want more technical details

The Web server upgrade happens May 19, 2008. Are you ready?

2008-05-13T22:57:45Z

The main Case Web server, Aurora, will be upgraded on May 19th. If you're an end user you shouldn't notice a thing, but if you maintain a Web site on this server there are a few things you should prepare for. If you maintain a Case site and have not read about the upgrade in Case Daily and received email notifications from the Aurora managers, please read the following.

Who should prepare for the server upgrade?

Only people who maintain sites on the main Case Web server will be affected by the upgrade. If you maintain a Web site on http://blog.case.edu, http://filer.case.edu, a departmental server or through a Web hosting service this upgrade won't affect you.

I'm not sure which server I use. How can I tell?

Sites on the main server have urls similar to http://www.case.edu/division/department/sitename/. If your site has an address such as http://sitename.case.edu it is probably not on the main server. Another way to check which server you are using is to check the host to which you upload your files. If you upload files to your site by FTP'ing to wwwftp.case.edu, your site is on the main server.

Check to see that you are registered as the maintainer of record

Authentication to the new server will be done using the Central Authentication Service instead of account specific usernames and passwords. To access your account you will need to ensure that you are listed as the primary maintainer so that your Case user ID will be attached to the account.

Visit the Aurora Maintainer Contact List to verify that you are listed as the primary maintainer of your account(s). If you are not listed as the maintainer, you should fill out an Aurora Project Inclusion Request form and Fax it to 216.368.3165.

Uploading files to the new server.

The new server will use WebDAV rather than FTP to upload files. If you are currently using Dreamweaver to upload files this will require only minor modifications to your current settings. I'll provide further information about WebDAV later this week. Upload instructions are also available on the Case Wiki.

Including server side includes (ssi) files

Due to tightened security, users who include .ssi files using code such as <#include file="../filename.ssi"> will need to change "file" to "virtual" as illustrated here: <#include virtual="../filename.ssi"> . If you don't make this change users will see [an error occurred while processing this directive] instead of your included content. Note, this only applies to paths beginning with ../ paths such as will continue to work as usual. SSI instructions are also available on the Case Wiki.

Controlling Access to Your Site's Content (Password protecting files and directories)

If you have been using A.P.A.S. utilities to configure access control for your site, you shouldn't need to change anything now. Your current restrictions will be transferred over to the new server. When adding or modifying such restrictions in the future you will use access rules defined within .htaccess, .htpasswd and .htgroup files as appropriate. This will provide more flexibility and is in keeping with common Web practices. I will blog more about access rules in the coming weeks. Access instructions are also available on the Case Wiki.

Conclusion

If you have read the above, ensured that you are registered as your site's maintainer, and checked your server side includes files you should be in good shape for the change. If you would like to see a preview of your site on the new server you may do so by changing www to w07 in the url for your site. For instance the home page can be viewed at http://w07.case.edu/. Additional information is available on the www.case.edu page on the Case Wiki.

Web Server Upgrade Resources

Aurora server upgrade information on the Case Wiki
Introduction to WebDAV (includes instructions for Macintosh)
Uploading files with the WebDrive WebDAV client for Windows
Uploading files with Dreamweaver (WebDAV)

5 reasons your blog should have an editorial policy

2008-05-04T21:00:02Z

Yorkshire pudding, fresh from the oven, is yummy,
but does it have a place on your Baking Blog? Let
your editorial policy be your guide.

While the medium is different, blogs have much in common with magazines. They're published periodically, can accept subscriptions (via RSS feeds), may (or may not) accept advertising and typically focus on a particular topic or niche. If you blog, you have some notion of your topical area in your head, but have you defined it for your readers? If not, it may be time to take a page from the magazines and define a clear editorial policy for your blog. Just as setting clear goals aids in the development of a regular Web page, defining a clear editorial policy for your blog will aid you in authoring future articles and attracting new readers.

What is an editorial policy?

An editorial policy is simply a short document that defines what subjects will (or will not be) covered in your blog. It may also include information on why you are covering X and not Y as well as some background information on the authors. Magazines typically publish their policies in their advertising media kits and/or their guidelines for writers. For a blog you may wish to include your policy on the "About Us" page and also provide a quick summary in the meta description element in the head of your pages. If you edit a multi-author blog, you may also find it helpful to maintain a more detailed policy for your writers that you do not publish online. This could include style guidelines and other rules that are useful to your staff but not of particular interest to the public.

Here are my top 5 reasons to define your editorial policy.

1. Establishing clear parameters for the scope of your topic helps you determine what to write and lets readers (and search engines) know what to expect.

How much or how little you write about makes a great difference. If your topic is too broad, you may confuse readers who don't know what to expect. If it is too narrow you may run out of things to say. In For â€˜bloggers, diversification avoids stagnation, Wayne Smallman addresses how the breadth of your subject area can keep your blog interesting while also supporting your Internet marketing efforts.

For example, imagine you are blogging about baking. This is a huge subject. If your expertise lies more towards bread than pastries you may limit it to that. But what if you don't discuss quick breads but do cover beignets? Perhaps your focus is yeast-leavened baking and not merely bread. Somewhere between recipes for oatmeal bread and anything cooked in an oven you will find, and define, the scope of your subject.

If your scope includes puff pastries and you have a yen to write about Beef Wellington, then feel free. Both you and your readers will know that it fits within your policy and you won't have spent hours wondering whether or not it's on topic.

2. Defining your scope reduces off-topic submissions

Some blogs accept suggestions and/or articles from readers and other writers. While this can be a great way to get new ideas and material, you probably don't have the time to sort through ideas that aren't relevant to the topic. In terms of our baking blog, it may be that our policy includes some desserts but does not include pies and tarts.

If we make this clear up front we can spend more time writing articles and less time writing rejection letters. Doing so also provides a service to your submitters. If Peter Piemaker knows your policy, he'll be able to focus his time more appropriately and find a different blog—one whose editors and readers would love to know more about making a kiwi tart with tamarind crÃ¨me anglaise.

3. A clear editorial focus matches advertisers with your audience

This blog doesn't accept advertising, but yours might. When magazines sell advertising they create a media kit with information about the topic of the magazine and the demographics of their readership. Advertisers use this information in order to target readers who are most likely to buy their products. If your blog accepts advertising, you also want your ads to be appropriate to your subject matter and audience. Readers of your baking blog will be more likely to click on ads related to bread pans and mixers, than on fishing lures or hair-care products, and will thus generate more revenue for you and your advertisers. Having a clearly defined editorial policy helps advertisers choose between your blog and someone else's.

4. Publishing your editorial policy supports your Search Engine Optimization strategies

As we know from An Introduction to Search Engine Optimization (SEO), including topically relevant keywords within your content helps search engines to identify the topics discussed on your site. While individual entries will feature keywords appropriate to those entries, where should you put the keywords that describe the the blog as a whole? Your editorial policy is the perfect place to include these because it defines the topics included in your site overall.

By publishing your policy on an "About Us" or other page, you can draw readers searching for the overall themes of your blog in addition to those searching topics covered in more specific entries.

If you already have an " About Us" page this is a good time to review it to determine if your editorial policy is clearly defined and if that policy includes the appropriate keywords. As your blog evolves, it is also a good idea to review this once a year. I just re-read mine and found it unsuitably vague so I've now rewritten it to be more specific.

5. Including an editorial policy or content description promotes a professional image and can demonstrate your expertise.

One of the first things I do after discovering a new blog is to look for the "About" page. I want to know more about the blog's overall theme and its author(s). If that information isn't available I'll have to skim through the entries to see if an identifiable theme emerges and if I can learn anything about the writer's expertise. If I've found an interesting entry—and I'm thinking of subscribing to the blog—I need this information to decide if I'll be interested in future entries and if the author should be considered a reliable source. If I don't have time to do this research myself I probably won't subscribe. I'm already subscribed to more blogs than I can keep up with, so if I can't quickly determine a blog's relevance to my life, I probably won't bother.

If you want repeat readers, especially subscribers, take a few minutes to provide this information. They'll respect you for it.

Conclusion: Establishing an editorial policy helps you set the tone of your blog

Whether you want a better way to determine what to write, wish to increase readership or want to fine-tune your advertising, a clearly defined editorial policy can guide the way. Whether you call it "Editorial Policy," "About Us" or something else doesn't matter. If the policy is clear to you and your readers it will enhance the blogging experience for all involved.

Examples of Editorial and Advertising Policies in Magazines and Blogs

The following policies vary from short descriptions to more in-depth policy statements. If your blog accepts advertising you may be interested in The Nation's advertising policy which is very detailed and says, among others things, "Although the relationship of the First Amendment to commercial advertising is complex, we start with strong presumption against banning advertisers because we disapprove of, or even abhor, their political or social views. But we reserve (and exercise) the right to attack them in our editorial columns." I thought that was rather thought-provoking, though such a statement is obviously more necessary to "The Nation" than it would be to many blogs.

Embedding YouTube Videos the Standards Compliant Way—SFWobject 2.0

2008-04-21T00:24:50Z

As video becomes easier to produce, more and more people are creating and sharing videos online. Whether you are a professor demonstrating your research, a student working on a film project, or me creating how-to instructions, you've realized that there are times when video can enhance your Web content.

The resolution on YouTube is not as crisp as the original.
You can also view the video in higher resolution .mov format.

Back at the turn of the century, embedding video was complicated. Streaming required a special server, you had to decide what format(s) you wanted to stream, then you had to provide links to whatever software users might need to view your video—in case it wasn't already installed on their computers.

With YouTube, that's all changed. Now you can just go to the YouTube page for the video you wish to embed, copy the coding they provide, paste it into your html file or blog entry and publish the page.

It's just that easy—unless, like me, you care about adhering to Web standards. In that case, it requires a few more steps, but don't worry, they're not that complicated. YouTube videos can be embedded on the Web using swfobject.js—in a manner similar to the method I described last year in " Embedding Flash Objects for Internet Explorer." You can also use this method for embedding regular Flash .swf files. Just substitute the path to your .swf for the YouTube link in the instructions below.

Downloading swfobject 2.0

SWFObject 2.0 provides a significant upgrade to SWFObject 1.5—what we'd previously been using to embed Flash .swf files. To begin you will want to download the new script from the SWFobject project page. After downloading the script, you can upload it to your site, in whichever directory you prefer. Note: SWFobject 2.0 is not backwards compatible with 1.5, but the script has the same file name, swfobject.js. If you are already using 1.5 on your site—and don't plan to immediately edit all the pages that use it—you should rename the file to something like swfobject2.js or store it in a different directory so that you don't write over the prior version.

Generate the embed code for your page

While you could do this manually by following the instructions in the documentation, the SWFobject team has provided a rather handy Web-based code generator that we'll use in this example.

Go the the YouTube page for the video you wish to embed and copy the embed code provided.
Paste this into a blank file in Dreamweaver or your preferred editor. We won't be using this code in our page, but we'll want it for reference.
Within this code you will see a link to the video after value=". Within this link there may be an ampersand. Escape the & by typing amp; after it.
Copy this link, http://www.youtube.com/v/b-tYxJcFj9I&hl=en, then go to the SWFObject 2.0 HTML and JavaScript generator v1.1.
Paste the link in the box to the right of "Flash (.swf):."
Near the top of the generator, choose between static and dynamic. I will be using static in this example as dynamic would require me to put additional code--specific to this video--in my header. Here on the blog my headers are part of my templates so I can't use anything that would be specific to only one entry. (The documentation offers additional information on the static and dynamic methods.)
Copy the width and height values from the YouTube embed code and paste them into the dimensions boxes in the generator.
Click on "more" in the SWF definition box if you like to edit additional attributes.
In the HTML definition box choose the version of XHTML or HTML and character encoding you use on your Web site.
Click the "Generate Code" button.

Embedding the video in your page

Copy the script code found with the head of the generated output.
Paste this into the head of your HTML file or blog templates. Note: Because I have already been using the previous version of SWFobject on this blog, I named my script swfobject2.js before uploading it to the server. Therefore I must also change the name in this code then add it to the code that is already in my templates. Thus my files will include:
Copy the object code found within the body of the generated output.
Paste this into the place in your file where you would like the video to appear.
Upload the file to your server and watch the video!

SWFObject Resources

SWFObject devblog
Active Content Developer Center
IE Automatic Component Activation Now Available (Internet Explorer users will no longer have to click to activate videos embedded using the static method.)
SWFObject discussion group
SWFObject 2.0 Documentation
YouTube JavaScript Player API Reference

About the Embedding YouTube Videos the Standards Compliant Way video

The video screen captures were recorded using iShowU, a program I discovered yesterday afternoon. The scenes were pieced together, and audio was recorded and added in iMovie. As this was my first time experimenting with iShowU some portions of the video are a bit wobbly, but overall I found it very easy to use. I expect my skills will improve with time.

I'll post more about the process as I become more familiar with the software. Members of the Case Western Reserve University community interested in producing similar instructional videos may also wish to visit the Freedman Center which offers tools and instructions on this and related topics.

How did I get by before Firefox Add-Ons?

2008-04-03T05:16:59Z

Last night, whilst catching up on my RSS feeds, I discovered Paul Fenwick's video, "How to Fix the Web with Greasemonkey in 3 minutes." The video offers some clever tips on how one can use the Firefox add-on, Greasemonkey, to make Web sites (not just yours) behave the way you wish. I was particularly amused by the way he made MySpace content disappear. But it also reminded me of just how dependent I am on Firefox add-on's.

What are Firefox add-ons?

According to Firefox Support:

"Firefox add-ons are small pieces of software that add new features or functionality to your installation of Firefox. Add-ons can augment Firefox with new search engines, foreign-language dictionaries, or change the visual appearance of Firefox. Through add-ons, you can customize Firefox to meet your needs and tastes."

There are countless add-ons available that will let you do anything from tracking your trades on Ebay to validating the code on your Web site. Add-ons are categorized by type or function and offer tools for both casual Web browsing and development.

A sampling of my Firefox add-ons

I just counted, and apparently I have 35 add-ons installed on Firefox. Some I rarely use, some I actively use and others work passively in the background to add value to my browsing experience. I think I take the latter for granted, but they offer some interesting insights. While I'm not going to discuss all 35, here are a few (in addition to those mentioned in the video) that you may find interesting:

Web Developer: Chris Pederick's Web Developer is the work horse of my add-ons. I use it to validate my HTML and CSS, measure things onscreen, outline elements, display line guides, view javascript, disable styles, and view or analyze details of a page in order to troubleshoot problems or fine tune my CSS. It's incredibly useful and a tremendous timesaver.
Delicious Bookmarks 1.5.44: Adding bookmarks to del.icio.us is pretty easy to begin with, but sometimes I forget. With this installed I don't have to think about it. When I add a bookmark to Firefox a box pops up asking if I would like to add it to del.icio.us as well. It then lets me add the bookmark and relevant tags in the same box and continue on my merry way. Now I don't have to worry that I can't access the bookmark on computer A because I only saved it on computer B.
StumbleUpon 3.18: The StumbleUpon toolbar is inherent to the StumbleUpon experience. If it's 2:00 a.m. and I can't sleep I can hit the Stumble button to be shown sites in areas that interest me. If I come across a cool page, that I think others should know about, I can hit the thumbs up, either to promote it or to be the first to write a review. If I want to know if a blog entry or news release has been stumbled, I can click on the reviews button to see who (if anyone) said what. And if I find a nifty new recipe that I want to share with my friend Josh (an avid Stumbler) I don't need to bother with e-mail, I just click "send-to," select his username and it will be shown to him next time he goes Stumbling.
SEO for Firefox: This is an interesting tool for Web marketers. When you do a search with this turned on you'll find data ranging from Google page rank to the age of the site underneath each result description.
Social Media for Firefox: When you install Social Media for Firefox, icons appear in the bottom status bar of Firefox to indicate how many users have bookmarked or reviewed the page you are viewing on Digg, Reddit, StumbleUpon and Delicious.
KGen: KGen lets you scan a page to see which key words are strongest on a page—handy for search engine optimization.

This sampling should give you a good idea of the power of Firefox add-ons, needless to say there are hundreds (perhaps thousands) more to choose from. To learn more, visit the resources listed below.

Are you already an add-on fan? If so, leave a comment listing some of your favorites. I'd be interested to see how readers are using these handy tools and which great add-ons I may have missed.

More Firefox add-ons resources

Common Craft's Plain English Video Series

2008-02-14T19:45:30Z

Alas, I've not yet finished the article I had planned for this week. In the meantime I highly recommend the amusing and informative videos produced by commoncraft. These easy-to-follow videos cover a variety of Internet related topics and provide a great introduction to everything from RSS to photo sharing.

For those of you who are already in the know, try sharing these with your less tech-savvy friends. Teaching them the basics of your world may (or may not) stop them from giving you funny looks the next time you start Twittering about your Facebook status and how you're aggregating your Pownce, del.icio.us and blog feeds on Tumblr.

Here's two to get you started:

Social Networking in Plain English

Social Bookmarking in Plain English

Your home page is NOT your index; it's your store front

2008-01-16T20:45:36Z

You don't need to speak German to know this store sells hosiery

In preparing this article I asked some friends, designers and users, for some of their recommendations or pet peeves regarding home page design. Here are some of their Do's and Dont's. (Thanks to Dan, Nicole and Zeke.)

Do Include:

Clean easy to follow layout.
Navigation that is apparent and doesn't require precise mouse movements to get to sub items.
Tailor your navigation to your target audience and their primary goals
A page that says, "This is who we are, and this is what you can do here... have at it!"
Easy access to contact information

Simple and uncluttered

Don't Include:

Audio or video that plays automatically
Splash screens, or "specials" that appear as popup layers
Advertisements on home pages
Businesses / Corporations that use Adsense
Products or services ... WITH NO PRICES
Self Praise "The number one site for ...." as if you'd tell us if you were number 2
Improperly used navigation that follows scrolling
Long-winded welcome statements
Company history
Instructions on how to use the site
Big useless images of smiling hip people

Intriguing, but what does it mean?

Space. Designers want to preserve it and clients want to fill it up. It's not that the copywriters, marketers and others don't like space. It's just that they have some important points they want to make, and there is only so much room in that quarter page magazine ad, 2 page-spread, catalog, or Web page. But wait, Web pages aren't restricted the way print is. We can make it wider—everyone has larger monitors these days. Or we can make it longer—people can scroll. No wait, we read somewhere that people don't like to scroll. Put it all above the fold. Or put it above the place where I'd have to scroll on a 17" monitor using a browser that has 5 toolbars. (In other words, the space we'd have in that quarter page print ad.)

Whether you're a designer, a writer or a client you've all participated in this debate. What goes on the home page and what does not? At one point you may have even thought the matter settled. But then Joe in operations suggested that it would be imperative for people to get to the transportation section in one-click. If that's on the home page, then Sally feels it is equally important to include the section on ergonomics, Brad wants to include the President's Day sales specials, and Sonia in Plumbing Supplies has just offered up the latest kitchen sink—in scratch resistant stainless steel.

Everyone's ideas are important. Any of these could be compelling to your reader, and supportive of your goal of selling widgets, clarifying the calculus, promoting an event or what have you. So how do you decide what goes on the home page?

Establish your home page priorities

Your Web site has one or more goals, educational, commercial or otherwise. The Web site project team has additional specific goals. They may want to sell out the stainless steel sinks to make room in the warehouse for next year's ceramic models. They may want to promote their research to help pave the way for the grant application due in March. These are all worthwhile, but when it comes to the home page I find there are three things we should make clear to our users.

Tell them where they are.: Your home page should make clear the name of the organization and the nature of your business.
Encourage them to come in and look around.: Give them a taste (but just a taste) of what you offer, so they want to learn more.
Provide clear directions to the entrance.: Show them how to enter and navigate your space.

That's it. If you can achieve these three steps, the rest will follow and Sonia will be able to unload those stainless steel sinks. O. K., I admit that is easier said than done. But let's compare our site to something more tangible, with which we're all familiar.

Your home page is like a storefront

In America, particularly in areas of urban sprawl, the well-designed storefront is rare. But if you've spent any time in Europe, large American cities, or small towns whose retail districts have not yet been replaced by box stores and strip malls, I think you'll know what I mean. A store front usually has a large sign over the door (like our Web banner) proclaiming the name (and often the nature of) the business. If you are walking down the street in the hopes of buying hiking boots, the sign over Larry's Leather Shoe Emporium will make you stop. You'll look in the window.

If you see patent leather heels surrounded by shiny fabric, you'll continue walking. That wasn't the right place. If you see products by Merrell and Columbia sitting next to backpacks and logs on a field of crushed leaves, you'll recognize that they may very well have what you need.

Next you will look for the door. Ideally it will be obvious. If there are two doors, you want one to be clearly marked as the entrance. You don't want to walk up to a door and find a 3 x 5 inch sign with an arrow saying, "enter next door." If you can't find the entrance you may keep walking. But if the door is clearly marked, you will come inside and look for the hiking boot section. Ideally the store will have clear signage and displays, so you can pick out your boots and make your purchase. (Inside navigation will be the subject of a later article.)

Don't clutter up the window

I use the store metaphor because it's easy to visualize. An appealing display of items we want or need will entice us to enter. A cluttered display (with some exceptions) will not.

Imagine Larry's store window with the boots and the leaves. Now lets add a stuffed deer, BB gun, hunting knife, camouflage vest, pup tent, Coleman Lantern, fake trees, a plastic owl, binoculars and a canoe. Is this a wilderness supply store or a shoe store? No matter, they have boots, so you'll enter anyway. Now add sleeping bags, parkas, stuffed bunnies, a grizzly bear, a basket of easter eggs, and a mannequin of Little Red Riding Hood carrying an open basket overflowing with jam, cheese, sausages, wine and two crystal goblets. It's an intriguing scene. You may stop and stare at the window for a moment. You may wonder what the display is about and you may wonder what they really sell here but you might not notice that pair of hiking boots sitting behind the bunny rabbits. Thus, you may keep walking.

Larry's window, crowded as it may be, may still create an attractive display. But it's also confusing. When presented with too many choices, it is easy to get confused. At that point the easier choice is to continue walking. The same applies to our Web site. If we don't present simple and obvious choices, it is easier for the user to hit the back button and look elsewhere than to enter our site—even if we have the information or products they want. (View psychologist Barry Schwartz's video below to learn more about the problems humans face when confronting choices.)

So what should we put on the front page?

As you are planning the page, think of the storefront and keep it simple. Include your name and a brief description that let's people know they're in the right place. Highlight 1-6 products, news items, special offers or announcements (not 1-6 of each). Include a simple menu with less than a dozen (6 would be good) choices that will take them to obviously distinct sections of your site. You may also include a search box, footer, related sites and other simple navigational aids, so long as they offer intuitive guidance rather than clutter. (If your site is a blog it is fine to include your primary content, i.e. your entries, on the first page, as this is standard blogging practice. I'll address blogs another time.)

These numbers aren't written in stone. Perhaps you really need 7 menu items rather than 6. It depends on the content. But when you justify 7 it's easy to think that one more won't hurt, and what about this bit, then suddenly you are up to 31 and your visitor doesn't know where to look. Just keep thinking of that store front. While you are doing that, pretend you are the visitor, a person far less familiar with your content than you. Look at your site plan or design draft through their eyes. Does it allow you to make simple choices? Or do you have to think about where to go?

Test your content

It's sometimes hard to tell how much is too much. Or your team may have marketing research that shows your target market wants to see 50 things on the front page. What they think they want may not be what they can really use, so test it. Create 2 front pages, one with the clutter and one with 6 menu choices. Get some volunteers (unfamiliar with your product or subject area) and ask them to answer 12 questions, the answers to which they will find in your site. Have them time how long it takes to find the the answers. For each question ask how easy or difficult it was to find the answer (on a scale of 1-6). There are many ways to test usability (I'll write more about that later), but this one is fairly easy to implement, even on a shoestring budget, and it can give you some quick insight between what you think will work and what really does.

Homepage Design and Decision Making Resources

My friend Shirley, from Pownce, gave me the link to the Home Page Design article which offers a number of interesting insights into the role of your homepage. Other than that I thought I'd focus more on the psychology of decision making that really drives our need to make sites simple. To that end I've included Mano Singham's articles on snap judgments and the Barry Schwartz video. These aren't directly related to Web page design, but they underscore why our design choices are so important.

UX Matters: Home Page Design
Snap judgments (1): Mano Singham examines decision making in relation to Malcolm Gladwell's book, Blink
Snap judgments and prejudices (2)
Improving the quality of our snap judgments (3)

Ted Talks: Barry Schwartz, author of The Paradox of Choice: Why More Is Less

In this video, presented by TED (Technology, Entertainment, Design) Barry Schwartz explains how freedom of choice can be stressful and make us less happy, a notion counter-intuitive to those of us raised to think that freedom choice is better. I think it's an idea we can apply to the content choices we present to our site visitors.

CaseLearns: 2008 Spring Semester Classes

2008-01-03T21:04:23Z

Classes take place in Kelvin Smith Library

Registration is now open for spring classes at CaseLearns. Whether you're building your first Web site, adding a podcast to your blog or just want to learn something fun, CaseLearns has a number of options available.

The classes listed below may be of particular interest to those developing or maintaining Web sites.

Audio Recording and Editing: Feb 13, 3:00 p.m.
Feb 13, 6:00 p.m.
Mar 20, 3:00 p.m.
Apr 9, 3:00 p.m.
Digital Images I: Introduction & Basic Photoshop: January 16, 3:00 p.m.
Jan 27, 1:00 p.m.
Feb 7, 3:00 p.m.
Mar 5, 3:00 p.m.
Digital Images II: Advanced Photoshop: Jan 30, 3:00 p.m.
Jan 30, 6:00 p.m.
Feb 3, 1:00 p.m.
Feb 14, 3:00 p.m.
Mar 26, 3:00 p.m.
Apr 17, 3:00 p.m.
Digital Images III: Even MORE Advanced Photoshop: Feb 20, 3:00 p.m.
Feb 20, 6:00 p.m.
Apr 24, 3:00 p.m.
Dreamweaver CS3: Introduction: Feb 12, 1:00 p.m.
Feb 12, 4:00 p.m.
Dreamweaver CS3: Intermediate: Feb 29, 9:00 a.m.
Feb 29, 12:00 p.m.
Mon, Apr 7, 1:00 p.m.
Dreamweaver CS3: Advanced: Apr 22, 9:00 a.m.
Apr 22, 12:00 p.m.
Dreamweaver CS3: New Features: Jan 22, 10:00 a.m.
Jan 22, 12:00 p.m.
Mar 17, 1:00 p.m.
Macromedia Flash: Introduction: Jan 31, 9:00 a.m.
Jan 31, 12:00 p.m.
Photoshop CS3: New Features: Feb 28, 3:00 p.m.
Feb 28, 5:00 p.m.
Video Workshop I: Introduction to Digital Video: Jan 17, 3:00 p.m.
Jan 17, 6:00 p.m.
Feb 6, 3:00 p.m.
Feb 24, 1:00 p.m.
Mar 6, 3:00 p.m.
Apr 2, 3:00 p.m.
Video Workshop II: Advanced Digital Video: Jan 31, 3:00 p.m.
Jan 31, 6:00 p.m.
Feb 27, 3:00 p.m.
Mar 2, 1:00 p.m.
Mar 27, 3:00 p.m.
Apr 23, 3:00 p.m.
Understanding RSS Feeds: Apr 9, 1:00 p.m.
Apr 9, 3:00 p.m.

Web Content: Not just YOUR words and pictures

2007-12-26T21:45:23Z

My Google Reader Shared Items

If they read what you write, they may also want to read what you read. Webmasters and bloggers know this. That's why we'll embed links within our text, build pages with links to recommended sites and/or add linkblogs to our side bars. In a world where most of us don't have the time to research and write everything we'd like to share, such resources add value to our existing content and give readers guidance on where to look for additional information.

Recently I've come across some other good ways to share what you read, so I thought I'd share those with you today.

Publish your OPML file to share your blog subscriptions

A few weeks back I was reading an entry on David Bradley's blog, Sciencebase, when I noticed something interesting in his footer. There, at the bottom, he has a section called "Geeky Fun Stuff" in which he shares, among other things, a link to his OPML file. That, I thought, is a really good idea. For those of you who don't know what this is, an OPML file is basically a type of XML file that includes the links to the RSS feeds of the various blogs one reads through RSS Readers such as Google Reader, Bloglines, etc. Such services allow you to import and export these files so that you can easily switch services or add a batch of feeds to your existing service. Thus, if I wanted to subscribe to all of David's feeds I could just save that file and import it into Google Reader myself. Or if I wanted to subscribe to only a few I could edit the file (in Dreamweaver or any plain text editor) to delete any I didn't want.

If you are already using an RSS reader, sharing such a file is fairly easy. Just export your file from your reader and save it to your computer. If you don't want to share everything, just open the file in a text reader, and delete the extraneous feeds— lolcats, curling news from In the Hack and anything else that may not be of interest to your readership. Once the file is ready, just upload it to your site and link to it as you would any other page.

Using Google Reader to share specific stories

Google Reader recently added some enhancements to its sharing features. I first noticed this when Robert Scoble posted a note on Pownce with a link to his Google Reader shared items page. When I went to view the page I realized that this could be a useful feature, one that made me want to revisit Google Reader.

When you visit a shared items page you will see a site that looks pretty much like a typical blog. Stories are posted on the left, information about the page owner is on the right—along with links to other resources, a feed, etc. The main difference is that the stories are things the page owner has read rather than written (though, if you subscribe to your own feed, you can share your own entries as well). Each story also includes a link to the original entry and the original source—so the material is not mistakenly attributed to you.

After viewing Scoble's page, I immediately thought of my friend X, who says she wants to establish an online presence, but isn't quite yet ready to blog. Sharing stories on a page she can link to might be a good way to get her feet wet and let people know what she is thinking about.. For those of us who already have one or more blogs and Web sites, the shared items page adds to our online mix and provides an easy way to share stories with our readership.

Getting started with Google Reader

Getting started with this is pretty easy. Just go to the Google Reader site and sign-in. If you don't already have a Google account for Gmail, analytics, etc. you can create one there. Once your account is set up, just subscribe to some of your favorite blogs and start reading. A menu at the bottom of each story gives you the option to share the story so it will appear on your public shared items page. (There is some controversy about this, but you just have to understand that it's a public page that can be seen by anyone who has, or discovers, the address. For us, that is what we want, so it's not a big concern.) If you change your mind later, you can unshare the story the same way. You can also organize your subscriptions into topic folders and share topics rather than individual items. To learn more about using Google Reader visit the Reader Help Center.

If you don't want to send readers to your Google page, but still want to share stories, you can also share a clip from the feed on your own site, as I have done on my " What I've Been Reading in the Blogosphere" page.

More sharing options

My Streamy Subscriptions

Google isn't the only service that allows sharing, but aside from the hubbub regarding privacy settings (pertaining to how and with whom one is sharing—see links below) it's very easy to use and will be familiar to a large audience. I've been sharing blog stories with groups on Streamy since last summer, but my Streamy shares aren't fully public. Another friend has recently recommended Feed Each Other which looks promising and also produces a public page. StumbleUpon, while not a reader, is also a great way to share blog stories and other Web sites. (Stumbling is quite popular with insomniacs and is a great way to learn about other sites.)

These are all useful services, but how you share is less important than what you share. If you can find articles and sites that offer additional information on the topics you discuss, or even stories that add insight to your personality or world view, you'll be providing a helpful resource to your readers.

OPML, Google Reader and Sharing Resources

A picture is worth a thousand words, but that's not always enough

2007-11-14T22:44:22Z

How to add captions to images in Photoshop

On the Web it is preferable to place your
caption in the HTML. If that won't work and
your captions are long, you should also link
to a place providing a description of the image
and an alternative rendering of the text.

Colleagues of mine are involved in a project that involves adding captions to photographs. Like many of you, they aren't full-time designers and haven't spent a great deal of time using Photoshop. While they know how to crop and resize photos, they've not yet worked with type. For those of you who may someday face the same situation, here is a quick tutorial on adding text to images.

Establish your project parameters—size matters

Are your captioned images going to be used on the Web, on hand-outs produced by your office printer or in commercial print work such as a magazine? At what size will they be used? When editing your photos you will want to start with the largest image file available, crop it as necessary then resize it to your project specifications before adding your text.

As I mentioned when discussing image formats, your usage will impact your size specifications. Generally you will want an image that is 300 pixels per inch (ppi) for commercially printed pieces, one that is 125-250 for desktop printing (refer to your user manual to determine the maximum dots per inch (dpi) your printer will produce) and somewhere around 72 to 100 for the Web.

Note: measurements for print are exact; if your photo is 300 dpi and 1 inch square, it will be printed to be exactly 1 inch square. If you print it at 72 dpi and 1 inch square it will still be exactly 1 inch, but will have less detail. Measurements for the Web are relative because they are determined by your display. On my Dell there are 77 pixels in an inch, while on my Mac there are 98 pixels in an inch. Your display may be different. As a rule of thumb I just use 72 (which was common for most monitors back in the 1990's) and keep in mind the fact that a 3 inch wide photo at 72 ppi will appear smaller on the Mac than it will on the PC. Either way it is 216 pixels, but the pixels on my PC are bigger than those on my Mac.

Consider the amount of text you are supposed to add to the image. Try to make this as brief as possible, especially if your project will be viewed online. While you may be able to use tiny type on printed matter, that type will be harder to read online. Fewer pixels mean fewer details, so 6 point type online will be tiny and jagged.

Also ask yourself if the text needs to be on the picture itself or if it can be read as a caption underneath the image. If the project is for the Web you can include captions underneath a photo in the text rather than in the image. For situations where that won't work, such as HTML e-mail, just be sure to repeat your caption text in the alt tag of the image.

How to add text in Photoshop

For this example I'll walk you through the steps used to caption the image used in this entry. We'll add text on top of the image and below.

Open your image file in Photoshop. For practice you are welcome to use this sculpture photo.
Resize your photo by going to the image menu and choosing image size. Make sure that "constrain proportions" and "resample image" are checked. Set the resolution appropriate to your project. I'm using 72 for the Web. Choose the appropriate width for your image. I'm using 240 pixels.
Click on the foreground color and use the picker to select a color for your type.
Select the type tool, click and drag on the image to create your type box, and start typing your content.
If it is not already open, go to the window menu to open your layers window. Note that your type was created on a new layer.
Switch to the selection tool to reposition your type as desired.
If your background is too busy, you may find that your type is hard to read. Try adding a drop shadow or outline to it. To do this double click on the type layer in the layers menu (click to the right of the layer name). This will open up the layers style menu. Check drop shadow, then click on the words "drop shadow" to see your parameters. Drag the menu somewhere to the side—so you can still see your type—then adjust the angle, spread, size and distance until your type looks clear. You can experiment with drop shadow and other options to create different effects. You can also try changing the color. Just try to keep it simple. (Hot pink type with a lime drop shadow is usually a no-no—unless you're competition is "Hello Kitty.")
Sometimes a drop shadow isn't enough. In this case you may want to experiment with darkening the background behind the type. You can use the burn tool to just darken an area (paint over your background with this). Another option is to create a rectangular area behind your type that is darker than the rest. To do this, create a new layer above your background image, and create a rectangle with your selection tool. Using the paint can fill it with black. Now you can leave it as is to call greater attention to your caption, or you can adjust the opacity to the layer to make it semi-transparent. In the sculpture photo I've set the opacity of the black square to 50%.
If you've tried a few of these options and your type still doesn't look right, you may want to put the caption below, instead of on, the image. If your project is going on the Web you can do this in your HTML. If you are sending an HTML e-mail though you will want to include it in the image file. To do this, you will need to increase the size of the image. First set your background color to be the same as that of your document. In this example I'll use white. Next go to the image menu and select canvas size. Click on the center top square in the grid then increase your height measurement to an appropriate size. I've added .5 inches. Now just add your type to this area. If you've added too much space you can crop accordingly.
Save the file in Photoshop format (in case you want to make edits) then go to the file menu and choose "Save for Web." Select JPEG as your file format then click save. If you would prefer a .tif file (for print) you would instead flatten image (under the layers menu) and save as .tif.

Alternative Text for Captions

Captioning images can add value, but will also pose accessibility challenges. If your caption is short, you should copy it into the alt tag of your image. This will make it available to those who use screen readers or other user agents that don't show images. If your caption is too long, you may also want to link to an alternative copy of the text, either on the same page, as a footnote, or wherever you deem appropriate. Read Andy Clarke's article, Accessible alternatives, to learn more about these techniques. For this example I've linked to a description of the image and text and placed it here on the page:

Photograph of part of a sculpture featuring a man holding an umbrella next to a dog whose nose is pointed at the mans's knee. Captions built into the image read as follows:

Spot, can't you find a squirrel to chase? You've been sitting here panting on my leg for years now.
What, and you think this is my idea of the perfect view?
This caption is part of the image file, but sits below the picture.

In Conclusion

As you've seen, it's pretty easy to add text to an image. The tricky part is making it look right and ensuring that the content is available to all. But with a bit of experimentation you can accomplish both tasks.

Usenet Newsgroups: Anachronistic Service or Useful Communication Tool?

2007-11-08T05:14:52Z

alt.politics.usa.constitution as seen in
Seamonkey (above) and Google Groups (below).
Click on the images to enlarge.

Earlier this week ITS announced that it would be taking down the Usenet news server as of December 5, 2007. In a fit of nostalgia, I opened up my newsreader (Mozilla) to leave a farewell message on cwru.general. Oddly enough, my message got a response; others (not many) were still using Usenet! This led me to wonder what had happened to newsgroups. Did the generation that grew up on the Web not know about newsgroups, or did they know about them but prefer the Web? In this age of Web 2.0, where some update their Facebook status by the hour, users pose questions on discussion boards such as http://forum.case.edu, and writers merge their Twitter, Pownce and Jaiku posts into central RSS feeds that can be shared on their Tumblr blogs, is there still a place for Usenet news?

I think perhaps there is. But before we ponder that, perhaps we need to review—for those who don't know—what Usenet is/was all about.

History

Many users today think of the World Wide Web and the Internet as being interchangeable. But as most of you know, the WWW is only one of many protocols used on the Internet. Back in the era before the WWW (which most users didn't access until 1994-95), Usenet was one of the most popular features of the Internet. To some it still is.

First created in 1979, Usenet allows users to share thoughts and ideas with one another on a variety of topics ranging from the Internet itself to the latest episode of CSI. While T. V. viewers now discuss their favorite show on Web-based forums, in those days folks dissected X-Files episodes on alt.tv.x-files. (Actually they still do.)

How Usenet is used

As one uses a Web browser to surf the Web, one uses a newsreader to subscribe to and read/respond to newsgroups. Some news readers are stand-alone programs, while others are built into e-mail programs or Web browsers and Internet suites. Once the reader is installed, the user configures it to connect to a news server just as one would configure an e-mail program to use a certain e-mail server. Most Internet service providers offer news server access.

With the newsreader installed and configured to access the appropriate server, users can then subscribe to any of thousands of newsgroups based on their interests. This will be familiar to those of you who use RSS readers to read blogs. With a newsreader you would typically call up a searchable list of the newsgroups provided by your server and subscribe to those you like. Once subscribed you would select a group from your subscription list and download the latest headers (subject lines, that link to messages) to read the various posts. From there you can respond to an existing discussion or start a new thread, just as you would on a discussion forum, but more similar to e-mail in that you can include attachments.

There are thousands of newsgroups available on the internet with topics ranging from alt.tv.survivor to alt.politics.usa.constitution. Many of these will be available through your Internet Service Provider's news server, but some may be limited to certain servers.

To learn more about using Usenet newsgroups refer to the resources listed at the bottom of this entry.

Is Usenet still viable?

Given the research I've done today, Usenet seems to be alive and well—particularly in certain circles. Those circles would be those interested in file sharing. As I've been exploring this issue I've noticed two trends:

Newsreaders such as Binary Boy geared towards optimizing music, picture and movie sharing
Uncensored News Servers, such as Tera News offering uncensored access to groups, anonymous posting and firewall counter measures

I'd like to think that the above are being used to provide more efficient news reading or to give access to users living in countries with unreasonably strict censorship laws; but I'm guessing these folks are making their money by offering an easy way for people to trade naughty pictures and pirated media. With prices for some servers ranging anywhere from $7 to $49 (and up, depending on download limits) per month, I don't think folks are signing up to share their grandmother's bundt cake recipes.

What about the rest of us? Is Usenet still a good way to share information, discuss politics and find out how to clean the headlight lenses on your '96 Passat? I think it could be. This evening I installed Mozilla's Seamonkey Internet Suite, on my home computer, to use as my newsreader and subscribed to some of the groups I'd read in the past such as alt.www.webmaster. The group was alive and well, filled with the same kind of reasonable questions, helpful advice, spam and people who shouldn't be thinking of starting a Web design business, as it always was. Newsgroups are like that, but so are discussion boards. Some members will be knowledgeable, others never will be, and some just want to push their product or start a flame war. A lot of good information can still be traded.

If one is looking for discussion geared towards very specific topics I think Usenet works well for two reasons.

One Stop Shopping: One can subscribe to groups on cars, sports, T. V. shows, politics, philosophy, etc. and view them all in one place as one does with RSS readers.
Threaded Discussion: This format is really easy to use. You are presented with a list of headers, so you can choose which topic to read, and then all the messages in the thread are listed below (the way this works may depend on your reader). Google Groups offers Web-based access to newsgroups, but if there are more than a few messages in a given topic it can be very hard to follow. Google presents them in full in order, rather like Gmail. But when you get a few hundred this also involves multiple pages and can be tricky to navigate.

Perhaps I'm just being nostalgic, but this still seems like a pretty efficient way to communicate. Back in the day, I got a lot of good information from newsgroups, and I think if one chooses a group with an active, knowledgeable subscriber-base one still can. And if that is the case one can use these to network, share ideas, promote Web sites and blogs (but only in the context of providing meaningful content to the group) just as one can with Web-based services.

What do you think? Is there a place for Usenet in your social media world?

Usenet News Resources

An Introduction to Usenet News
Choosing a Usenet News Reader
How the Usenet News Protocols Work
Internet FAQ Archives: What is Usenet? (Historical, yet definitive, read both parts)
news.newusers.questions
News Readers
On the History and Impact of the Net
Reference to Newsgroups (List of Groups)
SeaMonkey (Web browser/e-mail/newsreader)
Usenetpedia: An encyclopedia of Usenet Newsgroups related facts
Wikipedia: Usenet
Network News Transport Protocol (NNTP)

P.S. When mentioning specific newsgroups I linked to them using the news protocol. These will only work if you have configured a newsreader in your browser and are using a server that includes that particular group.

Don't build your Web site in a vacuum

2007-10-31T04:45:53Z

T-shirts, the Web site and other strategies featured
common visual elements. These examples were
produced prior to the 2004 branding initiative.
While this plan used a logo, you do not need a
department or project logo to create a
consistent message.

This is the fifth in a series of posts that discuss Search Engine Optimization (SEO) and other Web marketing strategies. This week we'll go beyond the Web.

Coordinate your online presence with your other marketing strategies

Today at lunch I saw a post on Pownce from a fellow looking for someone to design a t-shirt. I've designed t-shirts in the past, and while I wasn't volunteering, I did suggest that he provide more information—so any designers might get a better sense of the project. He wrote back that he wanted something that would be eye-catching, abstract (perhaps like graffiti), highly readable, and that his company colors were white, green and dark gray/black. I wrote back asking more questions about goals, target markets, how the t-shirts would be distributed, quantities, printing methods, PMS colors, his other marketing strategies, etc.

As a marketer I wanted to know how the t-shirts would fit into his overall marketing plan, something the designer would need to know as well. As it turns out many of the questions I asked were similar to questions one should address when building a Web site. As those who've read my Planning your Web site tutorial know, I feel the first steps in planning a Web site involve establishing clear goals and defining one's target audience. What I haven't yet discussed is how your Web site fits into your other marketing strategies.

Marketing Goals

Whether your site showcases your research in advanced robotics or is meant to sell dog-shaped robotic toys, you have marketing goals. Such goals could include:

Establishing your personal or organizational brand
Getting invited to speak at conferences
Having your book published
Acquiring research funding
Attracting an audience for your lecture/symposium
Selling your product or service
Recruiting students or faculty
Driving traffic to your Web site in order to share information, disseminate knowledge, and of course, to further those other goals!

Marketing Strategies

When we think of marketing we often think of things like advertising, junk direct mail, telemarketing, e-mail (opt-in and/or spam) and the Web. In addition to these common techniques, a well-thought out marketing campaign may also include: media relations, trade shows/conferences, newsletters, flyers, posters, sidewalk chalk, promotional items (t-shirts, pens, etc.), social media networking, viral marketing (word of mouth 2.0), promotional videos, etc. Which techniques one uses will depend on goals, target audience and budgets, but in most cases a combination of strategies will be more effective than just one. Naturally one of those strategies will involve a Web site.

For most of us, our Web site is our most visible and prominent marketing strategy. It's available online 24/7 for anyone who wants to visit. While it takes time to plan and build, it can be edited, expanded and delivered in it's new improved state without the high cost of things like printing, video, buying advertising space and mailing. In an age when we are trying to reduce paper consumption and cost, the Web is ideal.

But our audience isn't surfing the Web all day. They're often out in the real world driving past billboards, reading magazines, chatting with friends and so forth. If we want to reach them, we have to reach out to them, not just wait for them to come to us. Just as we use e-vites and printed cards to invite people to our parties, so can we use other strategies to promote our goals in conjunction with our site.

Marketing Plan Example: Thursdays in the Park

In the summers of 2002 and 2003, Case held a series of concerts in the Turning Point Garden called Thursdays in the Park. Our goal was to provide an activity where faculty, staff and students could come together and to bring members of the Greater Cleveland community to campus. University Circle, Inc. (UCI) later expanded on this idea with Wade Oval Wednesdays.

In an effort to reach out to both the on- and off-campus communities we put together a marketing plan that included:

Listings on the Case Web Event Calendar and UCI online and printed calendars
Space ads (print and online banner ads) in the Free Times and Scene Magazine (local entertainment weeklies)
Announcements on WRUW (Case's radio station)
Street banners along Euclid Avenue
Posters and flyers on kiosks and bulletin boards across campus
T-shirts (worn by staff, available for sale, and thrown out to the audience by the performers)
Listings on the Web sites of the various bands
News releases sent to local media outlets such as The Plain Dealer (who then featured us in the events section of their Friday Magazine
Audience surveys to determine how they heard about the concerts
E-mail to select audiences, such as local alumni, and those who had signed up for our mailing list
Word of mouth
Thursdays in the Park Web site

Our media plan focused on outlets that Clevelanders regularly use to learn about concerts, as well as those typically used to reach the university audience. Having a plan in place also meant that we could choose visual elements and colors that would provide a consistent image across our print and online presence.

Later as each concert series progressed we learned from our surveys that attendees discovered the concerts through a wide variety of our marketing channels. This in turn helped us to fine-tune our strategy in the second year. And while some channels, such as space ads, couldn't hold all of the information about the concert series, all of them (except the banners) did have room to list the Web site. By publicizing the event in these different ways we were able to reach a wider audience, draw a respectful crowd and also direct them to the site—where they could get directions, see photos from past performances and find other pertinent information.

Conclusion

While your Web site is likely the backbone of your marketing strategy, there are many methods you can use to augment it. These efforts will be most effective if they can be coordinated to focus on a common goal and deliver a consistent message. In future entries I'll review some of these strategies in greater detail and discuss how members of your team can work together and/or with University Marketing and Communications to coordinate how these strategies can fit together.

Blog@Case Topics: how-to

2 Top 5 Lists = 1 Top Ten List: My most read Web Development Blog entries from 2008

Top 5 Web Development Blog Entries written in 2008

Top 5 Web Development Blog Entries read in 2008

Conclusions

P.S. Read more of my thoughts on social media and the Web on Ariwriter

5 Tips to ensure your readers can read your HTML e-mail messages

1. Use images to convey a mood or theme, not to present content.

2. Use Tables for Layout (WHAT????)

3. Use HTML 4.0 Standards Compliant Code to the extent that you can.

4. Use inline styles

GOTHFEST 2009

5. Test your mail in several different e-mail programs.

I can't embed HTML code in Outlook. How do I send an HTML e-mail?

Learn more about HTML e-mail

Blogs: The Many Voices of a University

Presentation Abstract: Blogs: The Many Voices of a University

Blogging at Case

Testing Web sites with multiple browser versions

PortableApps.com offers a plethora of portable software solutions—including Firefox—for Windows

FreeSMUG: Portable Applications for OSX

Why test in multiple versions of the same Web browser? Why not just upgrade?

Must your site work in every browser available?

Web Browse Testing Resources

Tips for installing Google Analytics on Case and other Web servers.

This is particularly important for users who host sites on the main Case server.

Getting Started

Creating your site profile

Tracking .pdf, .mp3 and other downloadable files

Advanced Techniques in Google Analytics

Analytics Resources

CaseLearns: 2008 Summer Semester Classes

Uploading files with Dreamweaver (WebDAV)

Step One: Define your site

Step Two: Define your remote server connection

Uploading ("putting") files to the Web server

Downloading ("getting") files from the Web server

Other ways to connect via WebDAV.

Uploading files with the WebDrive WebDAV client for Windows

Getting started with WebDrive

Configuring sites on WebDrive

WebDAV programs and resources for Windows

Introduction to WebDAV

What is WebDAV?

How do I connect to a site using WebDAV?

Connecting via WebDAV on older Macintosh machines running OS 8 or 9

Connecting with WebDrive or Dreamweaver on Macintosh and Windows

WebDAV resources for those who want more technical details

The Web server upgrade happens May 19, 2008. Are you ready?

Who should prepare for the server upgrade?

I'm not sure which server I use. How can I tell?

Check to see that you are registered as the maintainer of record

Uploading files to the new server.

Including server side includes (ssi) files

Controlling Access to Your Site's Content (Password protecting files and directories)

Conclusion

Web Server Upgrade Resources

5 reasons your blog should have an editorial policy

What is an editorial policy?

1. Establishing clear parameters for the scope of your topic helps you determine what to write and lets readers (and search engines) know what to expect.

2. Defining your scope reduces off-topic submissions

3. A clear editorial focus matches advertisers with your audience

4. Publishing your editorial policy supports your Search Engine Optimization strategies

5. Including an editorial policy or content description promotes a professional image and can demonstrate your expertise.

Conclusion: Establishing an editorial policy helps you set the tone of your blog

Examples of Editorial and Advertising Policies in Magazines and Blogs

Embedding YouTube Videos the Standards Compliant Way—SFWobject 2.0

Downloading swfobject 2.0

Generate the embed code for your page

Embedding the video in your page

SWFObject Resources

About the Embedding YouTube Videos the Standards Compliant Way video

How did I get by before Firefox Add-Ons?

What are Firefox add-ons?

A sampling of my Firefox add-ons

More Firefox add-ons resources

Common Craft's Plain English Video Series

Social Networking in Plain English

Social Bookmarking in Plain English

Your home page is NOT your index; it's your store front