webDevBlog: Technology and Web News - Graphic Design

Emphasizing Important Content

Mon, 09 Nov 2009 12:57:00 -0500

At Georgetown Law Library, we assume our internal users (e.g. current students and faculty) are the most frequent visitors to the library's homepage. Today we launched a new section of the page we hope will be useful for this internal audience. We're now featuring selected databases and research guides on the homepage, which we introduced by rearranging some content on the page.

In using this, we can highlight updates to research guides and selectively promote our licensed databases and other resources. We hope this helps us highlight useful content, and we see it as an alternative to using our Due Process blog to promote new items. Due Process still works well for certain types of content and database news, but it doesn't seem approprite to use it for more routine reminders, such as telling people that U.S. Law Week is a good place to get Supreme Court news.

Here's a view of the featured section at launch:

In testing this feature, we first tried to include the feature in the center column, but the design challenge proved to be too complex. It works well at some screen resolutions, but at lower resolutions (even just below 1024 pixel width), the content looks almost unreadable:

Some of the more subtle changes are a shift from play control buttons under the Feedback Blog entries, as well as introduction of the "box-shadow" element to make the site look better in browsers that understand this feature. Admittedly, we took elements of this directly from the book "Handcrafted CSS" including the suggestion of using the CSS3 properties box-shadow and border-radius, even though they're not widely supported in current browsers. We added rounded corners to the boxes earlier this year.

Let us know what you think. Inevitably we'll tweak this based on feedback and usage data.

Simple Trick for Avoiding Cached CSS Files

Mon, 28 Sep 2009 13:06:00 -0500

When implementing changes to a website design, often fundamental changes are made only to a site's CSS file. Perhaps you're tweaking font spacing, adjusting margins for sections of a page or making significant layout changes. One problem that comes up when testing designs is that browsers like Firefox and Internet Explorer tend to cache a CSS file, making it hard to know whether intended changes actually work. For users, getting a current copy of the (X)HTML file may still mean you get the 'old' CSS file.

By passing a variable as part of the CSS file, this can help avoid the problem. Here's an example:

This tip was featured recently on the site: The Do's and Don'ts of Modern Web Design, which provides short posts describing best practices and things to avoid in creating websites. As the site's subtitle states, these are "Snacksized Web Design Tips and Tricks." The site makes each available with a retweet function to share them with your world of followers.

Online, the technique of the CSS Caching Hack dates back to (at least) 2006. It's a nice trick to keep in mind, and we'll be using it for some site adjustments we're planning for the law library.

Audience-Oriented Menu Options

Thu, 20 Aug 2009 14:43:00 -0500

The Georgetown Law Library site uses a horizontal navigation bar for access to most sections of our site. We introduced it with a redesigned site in January 2008, and people seem to like how it works. In the course of conversations and a usability study this past Spring, we noticed that people sometimes pause, trying to decide which of five broad menu selections to choose. We recently made a small change intended to make it easier for students and faculty to find what they need. The audience-based items on our sitewide navigation are now in a different color, grouping them together visually. Compare the difference:
Old:

New:

Following are two law schools that indicate different types of menu items for different audiences

Harvard Law School

Cornell Law School Library:

Selective Enhancement: Border Radius

Thu, 20 Aug 2009 14:20:00 -0500

In the world of web design, there's a concept known as "Progressive Enhancement" The basic definition on Wikipedia is as follows:

Progressive enhancement is a strategy for web design that emphasizes accessibility, semantic markup, and external stylesheet and scripting technologies. Progressive enhancement uses web technologies in a layered fashion that allows everyone to access the basic content and functionality of a web page, using any browser or Internet connection, while also providing those with better bandwidth or more advanced browser software an enhanced version of the page.

Today we updated the homepage at the Georgetown Law Library to include rounded corners for browsers that understand them. This doesn't add functionality, and it is no more advanced than it was. Given this, it seems more like "selective enhancement". We've selectively enhanced things for people using Safari or Firefox, while leaving Internet Explorer users with angled corners.

Compare the difference:
On a browser that interprets rounded corners:

On a browser that ignores this property:

For our own documentation, the corners are done with the CSS Property -moz-border-radius.

-webkit-border-radius: 6px; -moz-border-radius: 6px;

There are dozens of alternative methods of creating rounded corners, some requiring images, some with JavaScript, and some in pure CSS. For us, we decided that it's enough to selectively enhance the experience of visitors. Maybe it's a way for us to show that Firefox users tend to think outside the box (pun intended).

Adobe InContext Editing - Last Stop Before a Full CMS?

Thu, 21 May 2009 12:47:00 -0500

Unless you're running a one-person blog or website, there is always a need for distributed content management. The worst-case scenario with web management is that everybody emails changes to one person to post them online. It's inefficient and it is no fun to be that content funnel. A better model is to give content editors tools they need to make changes themselves.

Adobe just updated the InContext Editing service, which is a system of distributed content management that could fill the gap for anybody not yet ready for a full web-based CMS. This is technically a product from Adobe, but it may be better described as a service, as it looks to be positioned as an entirely web-based subscription model for editing web content.

InContext editing is a web-based system that lets web developers give users the ability to edit content directly within the browser. Unlike Adobe Contribute, InContext Editing does not require a desktop software installation. It isn't as feature-rich as Contribute, but the Live Demo of InContext Editing shows that simple text editing is possible without much trouble. InContext Editing requires Adobe Dreamweaver CS4 to take advantage of all features, so this option ties you to the latest incarnations of Adobe's good (and not inexpensive) software tools.

[More]

New Web Screenshot Showcase - 32,000 Images and Growing

Thu, 26 Feb 2009 16:03:00 -0500

The distributed screen capturing website BrowserShots.org recently released an online showcase of more than 32,000 image captures of website pages. It looks like the content comes from sites their visitors have requested to have pictures taken of.

You can browse sites, rate them, and search for text within the sites. It's not clear if the text searches indexed terms or a version of the site source code. For random design inspiration, this is a great site. Another search option is to look for sites of a particular color. For instance, here's a view of sites matching the hex color 003366.

It's especially nice because it includes many non-English sites, so you can just isolate design and feel without reading text.

As an aside, if you need to get lots of screenshots for websites, it is very much worth it to pay for priority processing. We needed to collect lots of images in a short period, and with priority processing, images were returned in one or two minutes.

In-Browser Web Editing: Not Just for Firebug and Web Developer Toolbar

Mon, 22 Dec 2008 11:03:20 -0500

People who develop websites have probably already heard of Firebug and the Web Developer Toolbar. They are two very popular addon tools for Firefox that let you analyze web content as delivered to the browser. The beauty of tools like this is that you don't have to leave a page you're viewing in order to debug it or test code. There's no need to transfer files to/from a server and reload the page. If you like these two tools, then consider several others profiled in an article from Smashing Magazine called: 15 Helpful In-Browser Web Development Tools.
Tools they profile include the following:

YSlow: a tool from Yahoo! that integrates with Firebug to test website speed and suggest ways to improve it
Internet Explorer Web Developer Toolbar: A Microsoft program similar to the same addon for Firefox
FireShot: A tool for capturing and analyzing parts of images delivered to the browser, falling somewhere between Screengrab! and Snagit in terms of features
Fangs: A free screenreader tool to test oral rendering and navigation of websites (similar to the commercial product "Jaws")

There's some overlap in features between the programs profiled. For instance, the toolbar from chrispederick.com includes color analysis options similar to those in Colorzilla (for color palette analysis). Nonetheless, it's nice to see a list of these tools that include addons for Internet Explorer, Opera and WebKit (aka Safari / Chrome). Firefox isn't the only browser that supports in-browser editing, afterall!
Hat tip: Boagworld podcast (which mentioned the Smashing Magazine article).

CFPresentation and CFFEED Proof of Concept Demonstration

Mon, 10 Nov 2008 15:05:00 -0500

One of the powers of the ColdFusion 8 tag CFPRESENTATION is that you can create presentations from dynamic database queries. A type of query introduced in Cold Fusion 8 is the CFFEED tag. This takes a feed (rss or atom) and turns it into a query that you can loop over as needed. Pairing the two together, following is a simple proof of concept that shows a series of slides using an RSS feed as the source.

The source for this example is a feed of Recently Redesigned Websites from the site eduStyle: Inspiration for Campus Web Designers. This was chosen as the source, as the feed output is very uniform, presenting two screenshot images and minimal but predictable text in the source of the feed.

First off, following is the pertinent code showing only the necessary CFFEED and CFPRESENTATION elements:

`#title#`


        
        #content#

With this, it generates 15 swf slides, each representing a single entry from the feed source. If I want to do this in a week or a month, all I have to do is re-run the ColdFusion file and it will get results live from that point in time.

The best way to view this is to view the demonstration in a new browser window. Alternately, you can also view an inline version of this presentation here.

Useful CFPresentation Tips and Resources

Mon, 10 Nov 2008 14:57:00 -0500

One of the tags introduced in ColdFusion 8 is CFPRESENTATION, which allows you to create a Flash-based presentation that is very slick and can take full advantage of many ColdFusion tools. Also, once created, it's easy to tweak the content and render it anew.

For a recent talk I had to give, I used CFPRESENTATION mostly to learn more about it. Following are five tips from others trying this out, together with some thoughts about those considering it. In a separate post, I'll put up a simple proof of concept to show how it works.

Five Useful CFPRESENTATION Tips

Adding Attachments to a CFPresentation: As a mostly undocumented feature, you can add attachments to a presentation very easily. Attachments can be web links or file references
CFPresentation: Presenter image tips: design suggestions for including presenter photos and a logo in your presentation
Cool-feature-in-CFPRESENTATION: CF Guru Ray Camden shows a technique for storing presentations for offline use. I found that it works to set the directory path in the intro and then copy these from the server.
Tweaking CF 8 Presentations: Ben Forta points out tips on where to tweak some internal settings for a presentation done with CFPRESENTATION
Creating Slide Presentations: Adobe documentation and examples for creating a presentation with this tag

In my opinion, it's best not to think of this as a PowerPoint alternative. Instead, it's a slick way to create online (or offline) presentations where you want to include live content or render slides in a customizable manner. Output for presentations is stored as a series of SWF files. For this reason, don't expect to include hypertext links on your slides, as they won't work.

The rendered content is not as easy to control as standard web markup. When CFPRESENTATION converts images of webpages, it resizes everything to fit in a single screen. For this reason, slides with minimal text show larger type. Also, image presentation is a bit quirky. For example, I was unable to insert a JPEG in an HTML table with a width of 50% to balance text and graphics.

All in all, CFPRESENTATION is pretty useful, and it sure looks nice for the amount of code required (which is very minimal).

Improving Options for Finding Course Materials: Custom Banner on TWEN

Fri, 12 Sep 2008 15:25:00 -0500

Beginning this year, several faculty members at Georgetown Law have started using the course management system TWEN (The West Educational Network). Students can also find course materials on a courseware system developed in -house several years ago. In addition, there are some reserve materials available in the library, and syllabus materials are distributed through a centralized service. Because having so many options can be confusing to our students, we try to link to all services at the same time. On websites we manage, this is easy enough, so we can provide course information links on a main student page, an orientation page designed for new students, and other places. Westlaw recently added a feature to TWEN to let law schools customize a banner on the system. In addition to providing a logo and link back to the law school, there's enough room to include a few links.

To allow us to include several links, we looked at setting up a dropdown menu with categories of links. While letting us provide course information sources in one place, this also lets us link to services like Hein Online and our E-Journal Finder, which provide important course materials not found on Westlaw, the quasi-default source for legal information on TWEN. Here's what it looks like:

This menu uses a version of the something called the Sons of Ursidae Menu (thanks Sara K!) which requires no JavaScript and can be rendered with only a few lines of CSS code. The dropdown menus don't work in Internet Explorer 6, but the four links under the Georgetown logo point to pages that contain all items. We're going to look at changing our main site navigation menu (which uses Open Cube's Infinite Menus), as it requires more complex CSS and complicated JavaScript.

One interesting thing about our custom menu is that Westlaw's blue and grey color scheme match nicely with the school's main colors.

AJAX Design Enhancements to Georgetown Research Guides

Mon, 28 Jul 2008 12:33:00 -0500

On the Georgetown Law Library website, we have a pretty big collection of research guides, which we've recently expanded to include treatise finder resources, as well as an expanding list of tutorials. In order to make it easier to cross-reference the guides, we've added a new expandable box showing related resources. Here are two images showing related resources for our Accounting Research Guide.

To create the expandable boxes, we used elements of the Adobe Spry JavaScript library. Specifically, it uses the accordion widget. In our implementation, we use a folder icon with an arror to indicate that there's more information under that heading. At it's heart, this is just a fancy stylized list, so it should display fine with JavaScript turned off, and there should be no reason screen readers can't interact with this added feature.

This summer, we're enhancing our research guides and treatise finder resources in other ways, so stay tuned for other enhancements.

New Usability Software Released - Mac Only

Fri, 25 Jul 2008 15:57:09 -0500

If you've ever wanted to do any usability testing of your website, there's a new program just released that may be a great option. It's called Silverback, and it sounds like a promising program. The one downside is that it is only available for the Mac platform, so an unappologetic Windows user like me has to wait for a while before using this.

If you're in the market for usability software, consider Silverback. You can try it free for 30 days, and a single copy is around $50, which is much better than the roughly $1500 street price for Morae from TechSmith. That said, we used Morae for usability testing when we redesigned our website at Georgetown, and it was well worth the money we spent on it.

At the risk of providing lots of free advertising for a company's product I haven't tested, here's a video explaining Silverback:

Silverback screencast from Jeremy Keith on Vimeo.

Three Options for Bookmarking / Sharing Content Online: ShareThis, AddThis, AddToAny

Tue, 27 May 2008 14:13:00 -0500

Once you publish anything online, you inevitably want to make it easy for users to return to important content and share it with others. When designing for the web, there is often limited screen real estate where you can insert images for people to post to Facebook, del.icio.us, Newsvine, Digg or whatever. Typically you either choose a few you like or you use a tool that lets users choose their service(s) of preference. Personally, I like the second option. On the Georgetown Law Library site, we use the free widget for AddThis.com (which we describe on our site here). AddThis.com is not "the only game in town", so following are highlights of three options for integrating a bookmark tools on your site.

AddThis.com (www.addthis.com)
The default is for a single button integrated on your site. After you've created an account with AddThis.com, you can use their service online to track which services people use to bookmark your content. Also, account owners can get rudimentary statistics about which pages people bookmark. They have easy-to-use blog integration for WordPress, TypePad and Blogger. Also, they have a feed bookmark, which we're not using yet.

AddToAny (www.addtoany.com
This service was apparently introduced a few months before AddThis.com, but it might not be getting as much press due to a lower profile site. AddToAny has two button options: Save/Share is for posting to bookmark and news sites. Subscribe is for adding RSS feeds to services that support them (e.g. iTunes or Google Reader). To Track statistics, they show how to use Google Analytics on your site to know who is using each service. There's no requirement that you have an account with them to use it.

ShareThis (www.sharethis.com)
This one looks different than the other two services, but the core features are quite similar. One nice feature is that they have an option to send links, which can be via email or SMS. They also break out the idea of posting this to a service as a separate option. In this third area is where you would post to a service like Facebook, Twitter, or WordPress. In setting up an account with ShareThis, you can customize the way the button displays. It looks like they have decent online metrics for analyzing who is using the tool on your site.

Any of the three options should seems good to use. My suggestion is to pick only one and use it for all of your traffic.

Play .FLV Files Off-Line With Adobe Media Player

Tue, 22 Apr 2008 21:16:19 -0500

Just out of beta testing, the new Adobe Media Player is a pretty slick way to play media files on your computer. If you've already got iTunes and Windows Media Player (oh, and maybe the Yahoo! Jukebox or Real Player), you might wonder: Why do I need yet another player? As it turns out, there's one really good reason you might want it: To play .FLV video files. These are Flash video files designed for streaming over the Internet. YouTube videos, for instance, are in this format, and a few sites let you download .FLV files from YouTube. There are also other sites that let you download these media types.

Previously you had to look for more obscure media players like VLC Media Player to play the files. Now Adobe Media Player lets you view FLV files off-line. Interestingly, the latest version of RealPlayer software lets you do this, and they also have an option to "download this video" to play it locally. Perhaps Microsoft and Apple won't be far behind in extending media format support. Or maybe not.

Kuler Color Generator From Adobe

Thu, 17 Apr 2008 16:20:00 -0500

If you haven't seen it before, Adobe makes a great (and free) online color palette generator called Kuler. This is a Flash-based application where you can generate, share and export color palettes.

Here's a screenshot of the Flash application in a browser window:

If you know Kuler but don't like it, take a look at this list of 25 Popular Color Scheme Palette Generators available at the site CSS Juice. On this list, Kuler is mentioned towards the end, so clearly some folks don't like it. That said, I've found it to be a great way to develop new color themes, and I see no reason to try out multiple generators.

Since we manage our site almost exclusively in Dreamweaver, there's one more reason why Kuler works well for us. WebAssist.com recently introduced a free Dreamweaver extension called "Dreamweaver Tools for Kuler" that lets you integrate Kuler directly so you can search and use palettes in the context of updating your site's stylesheet or other graphic elements. What could be cooler than that? (or is that: What could be um... Kuler?)