Tuesday, October 28, 2008

Trends in Web Design

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.

Thursday, October 16, 2008

Designing a Fun Site

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.

Wednesday, July 2, 2008

Learning New Things

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:

Sunday, June 8, 2008

Displaying International Fonts and Characters on the Web

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...

Saturday, May 24, 2008

Wikis

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!

Friday, April 25, 2008

Sending HTML Email

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.

Friday, March 21, 2008

How I Spent My Vacation

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.