My Cool Job: Web Developer

Categories and Tags: Using Blog Metadata for Better Findability

2010-05-23T13:49:00.000-04:00

We're wrapping up a project to update an entire blog with more usable tags and categories, and I've learned a lot in the process.

A little history about this project...the blog we were working on started with a focus on cool technology in general, but has transitioned to a stronger learning technology focus. The old categories didn't really work anymore and tags were inconsistently used.

However, at nearly 200 posts, it was time to make to restore information order. To begin, a colleague and I met with one of Ohio State's librarians to talk about categorization and metadata (data about data), and then worked out a plan that would highlight the focus of the blog without overwhelming casual readers.

Key lessons I learned are:

1. There is no right answer, but there are different approaches for creating categories and tags. We wanted to use our new categories and tags to shape reader expectations and show at a glance what topics are featured. That meant close attention to our choice of words and how to use categories vs. tags.

2. Don't use categories and tags interchangeably. Categories are the "big buckets" that different posts can be put in, while tags are additional keywords that describe each post. To keep the category list manageable, we decided to create a few categories for big concepts and to use tags for specific products, projects, programs, etc.

3. Use tags to connect similar posts. When applying tags, that means focusing on important themes that might be shared in other posts and reviewing past tags to apply them to new posts.

4. Don't be too vague when adding tags. Focus on what make an article unique, rather than using vague terms that apply to nearly everything. Otherwise, tags and categories all blend together. For example, when we first introduced the new system, one writer tagged an article as "information," but since that *should* apply to all posts we removed it and left only tags about the topic of the post.

We just finished the recoding, and the difference is striking. There are still some challenges in this project -- mainly that it's hard to bring everyone up to speed about the new guidelines in a shared group blog -- but we'll see how it goes.

Social Media and Me: My Trip to KipCamp

2010-05-01T06:07:00.005-04:00

It's been over a year since I posted to this blog. I have done and learned a whole bunch of new web things in that time, but making time to talk about projects when you're in the middle of them is tough.

I've spent the past two days at the Kiplinger Program's KipCamp, an intensive course about social and digital media in communication. I'll be starting the last day of KipCamp in a couple hours and wanted to note a few things I've learned.

1. Old friends miss me. I've have old accounts on both Twitter and Facebook, but never spent time in them. During KipCamp's Twitter lesson, two long-time acquaintances who DO twitter (apparently often) wrote to welcome me back. Then, approximately one minute after logging into Facebook, my best friend from junior high messaged me. We haven't spoken in 20 years and haven't communicated even electronically more than 4 times since. (Maybe my real lesson is social networking is a powerful connector -- something I had resisted acknowledging when I was shunning it as a waste of time.)

2. The point of social media p.r. is less to tell the whole story than to be interesting. Or at least interesting enough that your social network forwards your message to their networks, and so on, and so on... Its strengths are forming a baseline of awareness across a large group. This realization struck when a fellow camper and I were trying to revise a factual "tweet" into something more lively -- neither of us disliked the original version, but we also wouldn't think to forward, or "retweet," it.

3. There's no quick solution to creating an online persona. The people who do it well are adaptive and responsive and probably naturally witty. They pay attention to what works and model what they like in others.

4. Organizations, and even individuals, have online identities whether they create them or not. Products, services, and brands are talked about on social networks. Most individuals are findable either through simple Google searches or searches of the deep web (information databases that haven't previously been widely searchable). If you want a say in what's out there, you have to be out there saying it.

5. Savvy media people build marketing into everything they do. My session of KipCamp is being filmed for a television short on the OHIO network and we're encouraged to tweet about the program to practice what we're learning. (And here I am on my own time blogging about it!) These things record the experience so other people will choose to attend the program. The media experts who run the program know that it's not enough to do great work if no one else knows it.

Designing a Fun Site, Pt. 2

2009-02-05T07:06:00.009-05:00

The "Teach Online" project is now mostly done. You can visit it at http://telr.osu.edu/teachonline.

As you may recall, the design goal for this site is to be inviting and easy to skim, while providing a lot of information. We've created short video clips from interviews with instructors who teach online in additional to the initial JavaScript slideshows.

The videos required quite a lot of editing, but have an impact far greater than the equivalent text. Using video also:

models our recommended practice of accommodating different learning styles, as some people prefer audio or video to written text.

literally shows our target audience that others like them are doing the types of things they want to be doing.

Trends in Web Design

2008-10-28T06:50:00.006-04:00

The web is like any designed media -- fads come and go. Here are some I've noticed in the past few years:

About two years ago, online publications like Wired and CNN.com led the way away from strong background graphics, switching to largely gray layouts where the content and accompanying images draw the most attention. (In relation to technology, this shift makes good sense; as download speeds have gotten better, large graphics specific to the stories are feasible. Using repeating background images for an entire site was an efficient way to add color and visual appeal in the early days of the web.)

Over the past year, more sites are incorporating JavaScript-based interactivity, such as scrolling panels and hovering windows, that don't take the visitor away from their starting point. These elements shift considerations in information design and layout away from discrete pages and toward user-friendly controls

This summer as I was working on a freelance book project that required updating screen captures of websites, I noticed another more subtle shift. Although only a year had passed, the featured sites had changed to make room for much more ad placement–-nearly every site had been reworked to show Google ads in multiple places on the page even if the rest of the design was the same.

Maybe the big lesson is that web site design, like fashion, is not timeless. Even sites that were the height of cool in their day might end of the web equivalent of a 1970s polyester leisure suit. It will be interesting to see what comes next.

Designing a Fun Site

2008-10-16T07:59:00.005-04:00

The goal of my current web project is to present a lot of information in a non-threatening way.

To avoid overwhelming people, I'm trying out some interactive page elements – slideshows that scroll sideways and, hopefully, sections that open and close vertically when clicked.

Here's a picture, but you can visit the draft version at http://telr.osu.edu/teachonline/tour.htm to try it.

The slideshow uses a language called JavaScript, which allows clicks on the screen to cause changes in what appears there. (To be more specific, I'm using some special JavaScript libraries called jQuery that includes prebuilt bits of code (also known as functions) to control different parts of the page in different situations.)

My goal with this design is to encourage people to click to the information that interests them and perhaps read other parts that are within easy reach. The less work it is to move through the content, the more likely our audience will be to learn what we're teaching.

I'll keep you posted as this site progresses.

Learning New Things

2008-07-02T07:26:00.003-04:00

Two challenges for web developers (and all technology professionals) are teaching themselves new skills and keeping up to date with current trends.

It's for those reasons that I started my personal website, Flora Photographs, about 5 years ago.

At the start, I used Flora Photographs to learn database basics and improve my programming skills. A couple years later, I updated it to a new style of layout using only CSS. Just this week, I redesigned to bring in more CSS and some interesting/interactive features that use CSS and JavaScript.

Here's a picture of the latest version -- but you really have to visit and try a search to get the full effect:

Displaying International Fonts and Characters on the Web

2008-06-08T21:34:00.004-04:00

How do you display web content in languages other than English?

The quick answer is to use unicode. Unicode is a standard that includes character representations encompassing all living languages.

When using unicode, appropriate fonts have to be available on each viewer's computer. Otherwise, the unicode characters won't be rendered. You can test which unicode characters are available on your system – unknown characters show up as rectangles or squares rather than characters.)

There are also additional factors to consider. Details...

Wikis

2008-05-24T09:06:00.006-04:00

One of my big projects at work right now is refining the user interface for a wiki service at Ohio State.

A wiki is a kind of website that allows users to add and edit content collectively (read more about wikis), so it's important to make it easy for visitors to understand what they are allowed to do. It's also important to our users who set up their own wiki spaces in our service to change the interface to show their own personalities.

I started my interface improvements by activating several theme add-ins written by other people for the wiki software. These themes offer variety so all the wiki spaces don't have to look exactly the same. Here's an example of one that let's space owners change the background color:

I've also been working with a templating language called Velocity to restructure the wiki's introduction page, or Dashboard. Because we offer wiki space to a lot of unrelated projects, the list of recent changes for all wikis that normally appears isn't very helpful!

Sending HTML Email

2008-04-25T12:59:00.009-04:00

Earlier this week, I wrapped up an HTML-formatted newsletter project. It was challenging because every email reader renders HTML slightly differently.

Also, the type of HTML that works in email differs from what's typically written for the web. Here are some of the big differences:

Images displayed in HTML email are stored on a webserver and read remotely by the message recipient. That means files paths to the images have to absolute paths, like a link to an external website.

CSS (Cascading Style Sheets) works differently, too. Usually, CSS files are external to a page, but inline styles are needed for HTML email.

Also, only a limited set of CSS selectors work reliably in HTML email. Margins, padding, and other positioning settings fail. Unfortunately, this means arranging elements of the page has to be done the old-fashioned way -- with HTML tables.

The biggest lesson I learned is that even a simply formatted HTML-email template like this one requires a lot of testing.

How I Spent My Vacation

2008-03-21T10:51:00.013-04:00

Last week, I met up with a college friend to attend South by Southwest Interactive in Austin, Texas. In addition to enjoying good food, great conversation, and a trip to the LBJ Presidential Library to see animatronic LBJ, I attended sessions on teamwork in web design, designing user-focused sites, and whether video games have a place in higher education.

Three observations:

Great web development comes from teamwork--even "famous" web designers are surrounded by colleagues they respect and rely on.

All web developers, no matter their location or who they work for, struggle to get content from their clients.

All website owners struggle to understand who is visiting their site and why.

Although these may not seem like earth-shattering revelations, it was comforting to realize that corporate web professionals experience the same general conditions as those of us in universities and non-profits.

Eliciting Participation in Collaborative Content Design

2007-11-01T23:12:00.008-04:00

In October, I presented a poster at the HighEd WebDev conference in Rochester, NY to share how my colleagues and I collaborated to develop content in three recent web/information projects.

Here's a summary:

For one of the projects, we used a wiki to co-write the content and edit each other's drafts. This method allowed everyone a chance to see how the site was forming and add any information they had.

For another project, pairs of people arranged keywords to help define the focus of a site.

For the third project, we gathered as many people as possible to test a new software system and make notes about updates needed to the old online help pages. This would have taken the usual documentation team a month to complete, but having everyone help sped up the process and gave us a wider perspective about what was and wasn't working.

See more details. (pdf)

Launching the Site

2007-04-10T10:27:00.004-04:00

Well, after months of planning and development, we finally launched the new site. It features a home page with space for news and announcements, an RSS feed of news and events, clearly labeled services and site navigation, and a bright, shiny new look!

Coding and Testing the Site

2007-03-21T17:06:00.002-04:00

After a few tweaks to the design, I've begun building the site in HTML and CSS. Because different web browsers sometimes show pages differently, I'm testing each change I make to ensure I don't break what I've already done.

The hardest thing right now is aligning some navigation links that run along the top of the page -- it's a tight fit and I want to be sure they don't shift around and create gaps when the page is resized.

If you are interested in how CSS is used to make websites, here's a link to visit:

W3 Schools - CSS Examples

Sorry this is so short...I have a lot of work to do!

Writing for the Web

2007-03-13T08:56:00.002-04:00

When people think "web design," they often focus on the visual design. But the design of the content is equally important. A pretty site without substance is just an empty frame!

One of my big challenges is to understand what my customers want their sites to say. In this case, the customer is the group I work with. I've been meeting regularly with several of them to get opinions about what our group has to offer the people who come to us for help.

After settling on topics to include, part of my job is to locate the information, writing and edit it, and share it back with my coworkers for revisions and corrections.

A few words about writing for the web... Because the web makes it so easy for our attention to wander--there's always a new site to explore--most web writing has to be quick and to the point. I write in a style to help my online readers recognize quickly whether they will find the information they need, so they can decide whether to try another page.

Working with Visual Design

2007-03-05T23:55:00.001-05:00

For this site, I've been working with a visual designer on the appearance of the pages. She came up with several options that use the site structure I designed, and presented them to the director of our group.

Here's the design that was selected:

The next step is to test the design with users to see if they respond positively to it.

Testing for Usability

2007-03-01T13:58:00.000-05:00

After drawing a basic plan for the site pages, I tested it with a few people to see if they understood the navigation.

These volunteers clicked through a simplified version of the site to perform some common tasks we'd expect our regular visitors to do.

One interesting finding was related to a version of the site that had a special section called "Research" to highlight the research and exploration performed by the group I work for. When viewing the site, some of testers interpreted it to mean THEIR research and how our group could help. Because of this, I chose to remove the section and fold that content into sections called "Online Resources" and "News and Events."

Our test users also preferred a simpler page header with fewer supplemental links to other Ohio State services. For this reason, we moved them to the bottom of the page.

Creating a Wireframe

2007-02-21T10:07:00.004-05:00

After sketching a site structure, my next step was to create a wireframe to fit everything needed into each page. A wireframe is sketch that shows the basic form of a product. In engineering and product design, it might be a computer-generated 3-d model. In web design, it is a sketch of the pages that shows the major elements, such as navigation links, content, and any logos or brand elements.

Here's a snapshot of the first wireframe, which I drew with a basic drawing program:

By sketching out a typical page, I formed a sense for the visual hierarchy. "Visual hierarchy" basically means focusing attention so that important things are the most noticeable and less important ones aren't as obvious.

In developing the wireframe, I carefully considered how the parts of the page would be positioned. I tried to create clearly defined areas for navigation and content that would be easy to skim. (Studies of web use show that most people quickly scan pages to see what interests them, rather than reading every word.) I planned the site navigation to leave room for subsections along the left side of the screen. (Using left side for subsections gives a lot of flexibility for future growth of the site because it's easier to add items to a vertical list than it is to add to a horizontal list--scrolling horizontally is a very bad thing in web design.) I also placed a search box at the top of every page just in case people felt lost.

The sidebar on the right side also serves a purpose. First, it narrows the main content area so pages with a lot of text won't seem as text-heavy and hard to read. Second, it gives buffer for people who's screens are smaller than average so they won't have to scroll horizontally to read the main content. (Horizontal scrolling = Very Bad!) Finally, it gives another area of the page for special types of information--if something needs to be said but doesn't fit the flow of the main content, there's room in the sidebar.

Based on the wireframe, the decision makers in my group had an idea of my plan for the web site and approved it, and I could build a web version of the wireframe in HTML. Web wireframe comes in handy for exploring page interaction and performing basic usability testing, which I'll talk about in my next posting.

Designing a New Site Structure

2007-02-15T11:46:00.002-05:00

After doing research on what people hoped to see in the new site, my focus turned to site structure.

My goal was to produce a drawing of the new site's pages--the sections and subsections and how they would be arranged. (Structural drawings can show how deeply buried important information is, as well as show if some sections are too cumbersome and need to be split into subsections. They also act as visual aids to make it easier to describe site ideas to other people.)

From surveys I had learned that people wanted easier navigation in the new site. Their comments showed that they weren't finding things where they expected them in the existing site. (This wasn't surprising -- a structural drawing of the existing site suggested it would be hard to find some important pages, and some of pages in the main navigation weren't important.)

One specific problem seemed to be too many categories that weren't different enough from one another. For example, the existing site navigation includes links to Services as well as to Grants (which we offer) and eLearning (which is what we support). Site visitors sometimes had to click through all three to see how we could help them.

Another trouble spot was the Resources section, which provides online information related to eLearning and technology. Over time, it had grown to be several linked pages without a central organizing theme. Site visitors who visited Resources had to work had to locate the information they wanted or, more likely, they gave up.

After examining the content we had and comparing it to the suggestions from the surveys, I created a structural drawing that organized the pages of the site. Here's a snapshot:

This structural diagram was just a starting point. My ideas for site structure changed over time as I tested it with people inside my group and people who come to my group for services. (I'll discuss how it changed as a result of user testing later on.)

Assessing the Old Site

2007-02-07T09:34:00.001-05:00

Most of the web projects I've worked on have been redesigns of previous sites. My first step is always to carefully examine the existing site to see what is or isn't working for the web site's owner.

When I examined the existing site for my current project, I could see that the web site didn't match my group's goals. The content was a bit outdated and the section navigation didn't reflect what we do here. It was hard to find information on our current projects, which was frustrating to people outside our group who used the site as a reference.

After I examined the old site myself, I surveyed other people about what they thought should be in the new website and what they valued in the existing site. I included both people inside my group and people who come to my group for services. The list of suggestions was long, and some of the items were not practical -- but there were also suggestions that a lot of people gave, such as:

a clear list of our services
a showcase to highlight projects and new technologies at OSU
easier navigation
more online resources
an RSS feed of our news and events

In developing the new site, I based my decisions about content and features on this information.

What I've Been Working On

2007-02-07T09:23:00.001-05:00

Sorry for the slow start on this blog. I've been hard at work on a web site redesign for the group I work with at Ohio State.

This project has been underway for several months now, and we're planning to launch the finished site in mid-March. In my next several posts, I'll share information about the steps my group has worked through in the site development, including

assessing the old site
designing a new site structure
creating a "wireframe" of the page layout
testing for usability
collecting and editing content
working with visual designers
coding the final site
testing on browsers

In the last post, I hope to unveil the final site. But I have a lot of work to do for that to happen--so time to get back to work!