Suprglu is super cool. You enter your account names for web services you use (e.g. flickr, del.icio.us, digg, etc.) and RSS feeds for your blogs and Suprglu displays it all in one place. Nice and simple, and you get to modify the style sheet as much as you like. My Suprglu.

[via swissmiss]

Aarrr, matey. Here be a tale of a blogging practice that makes ye look like a bilge rat pirate

As a rule, you should periodically check referrer logs. Usually it's good practice because you find out who's linking to your work. But once in a while you'll also find a site that's either copying your content outright without permission or that's embedding links to your media (images, MP3's, etc.) in their site and essentially pirating your bandwidth. This morning I found a site that was embedding links to my images in their page. Avast! The image on the right shows a bit of their page and how I'm replacing images (See the "Revenge" section below to see how this works).

My site publishes complete entries in its RSS feed. Because of that, other people's web-based aggregators are able to republish my content in its entirety. In the best case, a blogger uses a web-based aggregator to watch feeds and post the ones they like, excerpting the entry. In the worst case, they republish your entire entry without attribution. I don't know what this site owner was doing, but I noticed that their blog was basically aggregating other people's posts. There doesn't seem to be any original content. But in my case, they didn't excerpt, they re-copied my entire blog entry verbatim. What pisses me off is it looks like they wrote the article.

I suppose it's partly my fault for putting full entries in my RSS feed rather than excerpts, but I do this so that people can read my blog in their aggregators without having to actually go my site. This is the downside, I suppose. Web-based aggregators will republish whatever they get.

I take me revenge

To play with them a little, I now replace images referenced from another site with a STOP image. I hate to have to do this, because it messes up the images for legitimate aggregators. I suppose you could be really malicious and post a hardcore porn picture in there instead to make thinkgs look even worse. I'm not that malicious.

You can do the same thing if you find that someone is pirating your media. Using altlab's examples for dealing with bandwidth theft, I modified the .htaccess file on myserver to include these lines.

RewriteEngine On
RewriteCond %{HTTP_REFERER} 
    !^http://(www\.)?urlgreyhot\.com/ [NC]
RewriteCond %{HTTP_REFERER} !^$
RewriteRule \.(jpe?g|gif|bmp|png)$ img/pirate.png [L]

To use this code on your site, replace the second line with your domain and modify the fourth line to use the path to your stop image.

I thought about this a few minutes. Because I don't want to do this to everyone, I can use the code below as a method to block from that domain only:

RewriteCond %{HTTP_REFERER} 
    ^http://(www\.)?badsite\.net/ [NC]
RewriteCond %{HTTP_REFERER} !^$
RewriteRule \.(jpe?g|gif|bmp|png)$ img/pirate.png [L]

To use this code on your site, replace the domain first line with the domain of the bad site and the change the third line to use the path to your stop image. Take that, ye scurvy lubber!

Yo ho! Here be Mr. Krabs bit of advice to ye
This is why you should always look at your referrers! Be smart about RSS aggregation and blogging. If you are going to use an RSS aggregator to feed your blog, be sure to excerpt and ALWAYS link to the original article and attribute the author.

Update
Moments after doing this, they must have seen the replaced image, so they removed the copied entry from their site.

The previous grid article dealt with how to come up with a CSS strategy when you're working with another visual designer's comps. Now I'd like to discuss doing grid-based theme design for open source content management systems, e.g. Drupal and WordPress. The purpose of this article is to give you an idea of how to approach blog theme design using a grid system. After reading this, you should be able to create a fully-functional grid-based design and HTML prototype that can be coverted into a theme template.

Creating the design grid

I recently redesigned this site because I wanted a layout that provided larger areas for my content. I needed a system that provided me the flexibility to get creative with the layout, but I also wanted to be sure not to lose control of the order and balance of page elements. While the spare layout of my previous design worked well, the new design would be a little more information dense.

For the new layout I used a grid with a simple division of thirds at a fixed width of 801 px. To get to this width, I played around with different sizes that could be centered within a 1024px x 768px browser window with ample white space on the sides. I targetted my maximum width around 800px.

I started by dividing up 800px into thirds and had an approximate width of 267px per third to play with. I borrowed the idea from the MIG design of using a 3 pixel border to separate each division. This odd-sized gutter makes room for 1px vertical border lines with 1px of padding at each side if I need it. I kept sub-dividing the thirds and after a bit of tweaking came up with the grid below. Each little pink box is 1/12 the width of the page (64px wide). 4 of these side to side make up a third of the width, which I would use for normal column of text. 2 or 3 of these side to side would be nice for a narrow column.

Screen shot of the grid (shrunken to fit)

So now I have a grid that could easily be divided into the thirds I needed to make a multi-column layout. This gives me a very simple grid to work with and I don't think I'd need to have smaller grid divisions for blog themes. Next step is to start looking at layout sketches I had in mind and think about how to turn them into XHTML & CSS. The visual design I'm basing this demo on is an old theme I once used on my blog, with a little modification of the graphics and color palette. You can see a screenshot of the old theme (it's the one in the upper left hand corner).

Turning boxes into content areas

To get started, I think about the page elements I want to use. I want the page to have these parts:

• header
  • logo
  • graphic element
• body
  • weblog content
    • blog entry
      • entry metadata
      • comments
  • local navigation
  • advertisements
• footer

I have some hierarchy of elements established in this list. You probably won't need to jot down a list of elements like this to do a weblog layout, but it helps to show where we're going.

Using the list as a starting point, I start to think about where I want these elements to go on the grid. You can use the grid like a wireframe (page schematic) by selecting areas of content and blocking them out, labeling them as you go.

Wireframe of content areas

Above, I took each of the page elements and blocked them out. We're going to take the wireframe and create the visual design elements for the page and design the layout of the content blocks.

Visual design comprehensive sketch over grid

As I'm doing this design, I realize that I don't actually need 3 grid blocks for the ads, so I use 2 instead. The layout is looking good to me so far, so now I start thinking about how to turn the blocks into CSS.

Turning content areas into CSS elements

Working with grids makes it easier to visualize a strategy for the CSS layout. I start by thinking of the hierarchy of divs that will make up my page wrapper and all of the child divs nested within it. I'll label those in the wireframe to show what I'm thinking.

As you can see, I'm going to enclose the entire page in div#wrapper. The rest is a bit like a sandwich. On the top, I put the #logo and #graphic in div#header. On the bottom, I have div#footer with my copyright info. And sandwiched in the middle is div#main which encloses the 3 column layout of #localnav, #content and #ads.

Next I go about measuring each content block and recording it's dimensions. I'm mainly looking for widths here except for the header, where I actually want the height as well. Heights will, of course, stretch vertically in the div#main. I measure the #header out to be 801px wide by 131px high. In the screenshot below, I show how I get the dimensions of #logo using the Info panel in Photoshop. I do this to each content area, getting fixed widths for all the areas.

Creating the style sheet for the layout

Constructing a shell

When I'm done gathering my measurements, I can start to construct the stylesheet. I start by creating a barebones shell that will look a bit like our wireframe. First I record the main divisions in my CSS file.

Then I put in all the dimensions and positioning. To test my sanity and the precision of my measurements, I put the grid into the div#wrapper as a background image. The core CSS for the layout is below.

Next I start putting the widths (and heights for the #header) I recorded into the style sheet, creating a shell for the site. To make the boxes lay out precisely, I use left floats for columns and the Position Is Everything easy clearing method. If you view a demo of the CSS shell you'll see that the boxes line up precisely against the background grid. Things are looking pretty good. Now we have to add the graphic elements from the comp.

Completing the wrapper

We're almost done now with the wrapper. To finish off the wrapper we have to cut up the background graphics and tweak the the widths just a little so that our border backgrounds fit around the grid. Take a look at the wrapper with header graphics and borders in place .

Final touches

It's looking nearly finished now. All that's left is to do the style elements for the HTML inside the major divs. I put in all of the HTML for the template areas. I create the site logo and drop that into div#logo. I add some padding to the columns inside div#main. Finally, I add color and sizes to the fonts. Now you can view the final HTML template .

Conclusion

Grids are very useful for doing even simple blog themes. They give you a solid system you can rely on to lay out your template and evolve it as needs require.

I showed you how I approach layout and site development for a weblog template and gave you an HTML prototype you can convert into a theme. You are free to use the template in this example, I'm releasing it under GPL. I hope this article helps Drupal developers in some way by giving them a process for approaching their theme designs. Have fun theming!

See also: Cutting and sewing grid-based design: Part 1, working with other people's comps

What kind of grid article is this?

Good question. After I blogged that I wanted to write this entry a few weeks ago, I started wondering if it was worth it since more appropriate people (visual designers) have written about grid-based web design already. Few people, however, seem to have talked about their actual process of getting a comp, cutting up its graphics and using it to produce actual CSS. As you may know, this blog is all about exposing my processes. So I thought there might be some value in writing about it.

As a site developer I often have to produce web graphics from other people's design comps, a process that involves slicing up layered Photoshop files. When I'm lucky, what guides me is a visual designer's grid system. A few years ago I would then take these grids and turn them into tables. The technique and math of doing CSS layout today is bit more complex than doing HTML tables, but it's also simpler in terms of separating presentation from content.

In this article I'm going to discuss the steps I take when measuring and cutting a comp layed over a grid and turning that data into CSS. The point is to demonstrate the steps to site developers who are new to grids. If you are already doing grid-based site development, this is not for you. I'm writing a second part to this article that provides more step-by-step instruction to using grids to design a site theme and producing the XHTML/CSS to match the visual design.

First a disclaimer. This entry is not meant to instruct you with regard to the design of grid systems. If you need an introduction to designing with grids, the literature below should give you what you need.

• Articles
  • "Five simple steps to designing grid systems", Mark Boulton — discusses the practice of designing grid systems and ultimately applying them to web layouts.
  • "The Funniest Grid You Ever Saw", Khoi Vinh — discusses the use of a grid system in the Onion.com redesign.
  • "Thinking Outside the Grid", Molly Holzschlag — offers a differing opinion about the restrictiveness of grids in web layouts.
• Books
  • Grid Systems in Graphic Design, Josef Muller-Brockmann
  • Making and Breaking the Grid: A Graphic Design Layout Workshop, Timothy Samara

Sketch, measure, cut and sew: An example deconstructing a design grid

Here's a quick example to show you what grids do for you and how to use them as a site developer. You'll forgive the headings, but a friend has gotten me into watching Project Runway lately. The analogy to me is obvious. When we design, we strategize, architect and then produce. Not very unlike making a dress, no?

Sketch

On a project I completed in summer 2005, a visual designer gave me a few comprehensive sketches for the fixed-width layouts he wanted to use on their site. The comps showed a unique layout per section. A simple grid system was used to lay out the pages.

Grid system applied to home page

In dress-making, this would be the part where someone sketches designs and drapes fabric or paper over a dress form or mannequin to prototype the design concept. In our case, the grid is the mannequin and the comp is the pattern. I was surprised by how easy my job of planning the multiple layouts was because of this simple grid. The next step would be to identify where those divs would go and how to size them.

Measure

I worked with the designer to come up with usable widths for his grid based on browser resolutions we would expect from prospective users. He ended up providing me a final version of the grid that maxes out at 767px wide. This gave him enough room to be usable for browsers at 800 x 600 pixel resolution. He finally delivered a document to me that looked like the figure below (scaled down to fit this this blog entry). This was to be the grid system used in all of the layouts for a client web site. If you're playing the sewing game along with me, again this is the paper for our dress pattern.

Grid system

You'll notice that this simple grid specifies widths for columns and heights for rows. The designer gave me a set of comprehensive sketches that were drawn to grid. I was a little apprehensive at first, of the preciseness of the comps, thinking that positioning fixed-sized boxes might be tricky in some places. But the layouts are not that complicated really. Only a few key boxes needed to be precisely positioned at vertically locations. The main content areas would of course stretch vertically as needed. The trickiest part was dealing with font size increase in the narrow navigation links (system text) of the header. The logo was not a problem because I was using image replacement for that. In the end, I was excited by the challenge and set out strategizing how I'd architect everything and started measuring.

Cut

Home page: Identification of style elements and measurements for divs

Using the grid-based design comps provided me with units of measurement that I could easily turn into divs for the style sheet. I figure out the areas of content in the same way I would work with a wireframe to block out content and graphics. I come up with a naming scheme for these blocks and turn them into CSS elements. Next, I measure out the blocks of content or graphics in the designer's comp and record measurements for my style sheet.

I don't usually do all the documentation of things like above, but if I was working with a large team, e.g. handing off pieces to another site developer, these documents would be very useful. What would be even more useful is a method to automate some of this process of wireframing and CSS element measurement without using something like Dreamweaver.

Sew

One of the requirements of this site was that the owners have the flexibility of using a unique layout in each section (each link in the global nav). Using a method I gleaned from Doug Bowman, I tell the content management system (CMS) to change the id applied to the body tag depending on what section the page is in. This targets a set of layout rules specific to the section it's in. To provide an example, the "Principals" section uses this <body id="principals"> while the "Contact" section uses this <body id="contact">. Each section uses the same grid but their layouts differ from one another.

The result would be that we produce different layouts for each layout type (section in this case). So we could modify the position of the page title area for example like so:

#principals #title {
  position: absolute;
  left: 0px;
  top: 97px;
  width: 189px;
  height: 189px;
  background: #000;
}

#contact #title {
  position: absolute;
  top: 96px;
  left: 96px;
  width: 96px;
  height: 96px;
  background: #E50530;
}

I'm using the same markup in both XHTML files, but because the Principals section uses the <body id="principals"> tag, it gets that first set of rules for positioning the #title above. The #contact section gets that second set of rules.

Now to show how we sewed up the final product. The grid is ghosted over screenshots of the two layouts I mentioned above. You'll notice how the page titles are positioned differently, following the CSS rules above. I was very satisfied at how precisely I could get the final pages to look like the sketches using CSS.

"Principals" page design layered over grid

"Contacts" page design layout layered over grid

Pretty simple process, but wow, that was a long example. I won't go into the details of that site's CSS, but the next part of this article will talk a little about the redesign of my site, getting from those comps to markup and CSS and how you can use the same process to plan and implement your site theme/skin files.

See also: Grid-based design: Part 2, Designing blog theme templates.

An open source WYSIWYG HTML authoring system for Linux, Microsoft Windows and Mac OS.

Trivial. I love and hate that programmer's word. But it seems the appropriate one to use here.

I thought that since XSL FO can be used to transform XML into PDF, then surely there must be a way to easily tranform into RTF without getting into directly creating RTF. No such luck. Hell, doing FO PDF transformations doesn't seem too easy either. Problem is that FO processors are in their infancy. The processor that we would probably consider is FOP for Apache. But this still only gets you PDF.

I'm still looking for a method to transform XML to RTF non-trivially. Will come back with anything I find.

For the past several months in my group at Lucent we've been testing out a system developed to be a simple self-service publishing application. You might recognize the interface. It follows the model other social bookmarking services have made common.

Identifying the needs

The idea to take the concept of social bookmarking and turn it into more than just a bookmark saving service came as the result of several different types of requests we've gotten in the past. One type of request was for a way to clip or save articles found on our site digital library site. We aggregate a wide variety of diverse sources. The most relevant databases include vendor news (e.g. feeds from Factiva for newspapaers and journals) and internal databases (e.g. internal news publications, technical documents repository).

A second and more urgent request we got was to provide a way for users to save articles found on our site and publish them on portlets within the corporate portal. Portlets are small windows of html content that act like little building blocks or modules in a portal page.

Several things we had done in the past helped us to add on to or evolve our existing database system and develop a new and separate system that would handle these specific bookmarking needs. We had already RSS-ified our databases, providing very complete feeds of our data as XML and partial feeds (bibliographic data) of our data as RSS. Prior to that, the primary method for doing something with database results was to set up an email or web-based alert. But the new set of requirements dealt with two issues:

• Tagging of individual records
• Re-use of records off site

Social bookmarking to the rescue

So I began developing the concept for using the social bookmarking model we've been seeing on sites like del.icio.us and furl. The first requirement was to provide a means for flagging records. The second was to provide a way to re-use that data elsewhere.

Our first releases did pretty much everything that del.icio.us does. We provided a bookmarklet/favelet for saving, tagging and commenting on a web page. The default view for bookmarks showed all users tagged bookmark entries, and you could navigate to view all bookmarks under a single tag, the bookmarks of one user, etc.

The screenshots below show the bookmarks main page and the pop-up window for saving/modifying a bookmark.

The application was shaping up to be pretty decent, utilizing all of the commonplace features on social bookmarking sites. We integrated the XML and RSS feed feature that we already used on our other databases. Feeds are available for any view the application can generate, e.g. Michael's bookmarks, Michael's bookmarks on tag "searchengines", All users bookmarks, All users bookmarks on "searchengines".

Self service publishing

Now the reason I thought we could try to use this model for self-service portal publishing is the free-tagging model. The idea was to allow individuals or groups to start bookmarking articles from our News databases, e.g. any of the Factiva sources such as newspaper and magazine articles. They could use a common tag, e.g. Mobility-Portal-Hot-News, for instance. Then they could get an aggregation of all of the articles saved with that tag and somehow display them in a portlet. Of course, controlled vocabularies would have worked as well, but the free-tagging model allows them to define the use. The portlet idea is just one applicable use. There are others we could thinkg of including ad-hoc reporting.

Feeds and exporting

This was shaping up to be a pretty decent way to do self-service publishing, but the obstacle of knowing what to do with RSS stood in the way. The concept of a feed is still pretty foreign to most business users. Savvy users can install RSS readers, but re-using that content on web sites would be time consuming. The next step was to provide a means for doing this more simply.

We first provided an HTML output along with RSS, thinking that portlets could display this content as HTML, but that necessitated using iframes. The second idea I came up with was to use JavaScript to put the bookmark entries in a JS feed with the latest entries stored in an array. Then portal owners could insert a JavaScript in a portlet that referenced the JS feed and the recent entries would be displayed on the site as HTML. If you're familiar with how Google Adsense ads work, you know how simple this is.

The screenshots below show the process of preparing scripts for display on a portlet:

As always with the type of evolutionary design we do where I work, these proofs of concept helped drive the design of other functionalities we could think of. One of the nice things about working in-house somewhere is that you can continue to improve applications over time.

A common request we've gotten in the past was to provide a way to create reports for things. We commonly do output of some data for Excel, for instance. For this tool, it made sense to provide a way to generate bibliographies of bookmarks. So I began creating a tool to tranform the data into APA-style bibliographies at first, with plans to also provide RTF export of bookmark lists.

Controlling the sprawl

The set of steps we took up until now took each function and divided them into atoms or pieces of functionality that we added to our existing systems. I'm very interested in the organic approach to solving the problems. The programmer I tend to work with likes to work this way. I document the needs and the concept for the application, he makes the prototype and we evolve it together. It's actually a pretty nice approach, and we have the freedom and flexibility to do things this way.

All of these features make the system servicable, but as we conceived of different functionalities to add, it became clear that this system was becoming more and more complex from a user perspective and could do with some simplification. I liken this to getting control of a garden that has become overgrown. At some point all of those aggresive plants start dominating and stifle the smaller ones. What do we do so we can see the parts more clearly again?

At this point, I'm trying to get some traction behind removing all those little XML, RSS, HTML, and JS buttons and replacing them with one button for viewing "Export options". I'm presently trying to design the interaction and interface for this clean up.

It's been an interesting several months testing out this application. It's nice to work on such a small application that suits very narrowly defined needs. Smaller, well defined scenarios are much easier to design for than broader scenarios and rules. In the end, these small scenarios fit into the larger business rules we've established for the site and if done right, will feed back into the way we design other aspects of the site. In this instance, the self-service functionalities created for the bookmark application will be added to our other databases so that people can, for instance, create a search on a news database and generate a JavaScript to display the feed from that source on a portlet. The common example is to do a search Factiva News, for instance, on a topic like 802.11 and automatically display the links to the news items on your portal site.

This application still has a bit further to go. We're still talking about issues such as making some bookmarks private. That is possibly the last system feature we'll add. The remaining work is just refining the interface for exporting. I'm interested in seeing how other library systems are approaching the need to re-use data. Clearly enterprise information systems should be thinking about these types of issues. I'm constantly thinking of how aspects of our system can be made more useful to people throughout the company.

Technorati's tag indexing has gotten me interested in having a full Atom feed for this site, including categories. So I downloaded the latest Atom module for Drupal 4.5 and then used Walkah's patch to modify the module to generate a full Atom feed. Then http://urlgreyhot.com/personal/atom/feed stopped working. Oddly enough, when I commented out the cache portion it worked again. So now I have an atom feed with categories here: http://urlgreyhot.com/personal/atom.xml

I recording the steps I took to do this because this module is not documented (as is sometimes the case with Drupal modules). Good luck:

1) Downloaded the atom module.

2) Downloaded atom.diff and saved to modules/atom/ directory.

3) Executed command in Unix terminal window: patch < atom.diff

4) Checked the module's output at http://urlgreyhot.com/personal/atom/feed

5) Created an alias via the menu "Administer > Url aliases" from atom/feed to atom.xml.

Thanks to Kika for providing the module and to Walkah for the patch. This is why I now send people who ask me if I freelance over to people like those Bryght guys.