A Modest Construct | web design

Posts tagged `web design`

¶ Using YUI compressor in a web project

Last year, I moved our small programming department from using JDeveloper and editing shared files directly on a network drive to using Netbeans 6.x and a proper version control system (Subversion).

After the initial learning curve, this has all been going swimmingly. I merged my first development branch into the trunk yesterday, and this branch just so happens to dovetail nicely into the whole point of this post, which is the YUI compressor, an open-source javascript and CSS minification tool developed by Yahoo’s YUI team.

¶ Creating an admissions dashboard

This entry pertains to work done in the context of my employment. Please remember, however, that any opinions expressed on this blog do not necessarily reflect those of my employer or co-workers.

The Problem

Admissions needed help. They had been moved from their former product, Exeter, to Banner’s native admissions module. But Banner’s interface stinks, and there was no decent way for counselors to do, well, anything. They relied on daily reports run out of an Excel pivot table by the executive directory of admissions, and therefore they lived on paper. The counselors needed a better way to get their work done and stay on top (figuratively speaking) of their recruits.

Enter my department. It fell to us, after some discussion, to build a tool that would be initial for undergraduate counselors, to let them slice and dice their data as needed. After a pilot run, it will gradually be expanded to include graduate and transfer admissions, as well as reporting tools for directors and and other muckity-mucks.

¶ Leaving 9Rules

A month late, sure, but better late than never…

Some of you remember that I joined the 9Rules network a while ago. At the beginning of October, 9Rules members got an e-mail advertising a new membership agreement.

After talking it out in Clubhouse, we made participating either in the private member area or my.9rules a requirement, part of the membership agreement. This goes back to the 9rules core because that is the way it used to be except members naturally interacted with one another so a requirement was not necessary [...]

If you feel you are contributing by your entries being shown only, 9rules is no longer a good fit for you, decline the agreement (or do not respond), please remove the leaf from your site and we will remove your site from displaying on 9rules.

I was in the middle of a move at the time, and the news underwhelmed me. Clearly, I thought, I haven’t even had the time to blog very much lately, much less blog and start arbitrarily posting in a forum. So, though it seemed a shame, I ignored the e-mail and passed quietly from the 9Rules world.

When I redesigned my site, I began thinking more heavily about the little leaf I was excluding, and became a little more irritated at the whole thing. A couple of years ago, 9Rules was a “Who’s Who” of the blogging world. It highlighted the best designs and the best content. It didn’t ask for anything else. This is partly why I joined it.

And perhaps it was my generation that finally changed things. Mandatory forum posting? Really? When did 9Rules become a glorified social network? Wasn’t it all about driving users to good content?

Apparently, I’m not the only one who was peeved, as there seems to have been a mass exodus of really excellent blogs in response to the revised membership agreement.

9Rules is, of course, free to do as it wants. If this is the direction that it wants wants go, more power to it. But it’s a different 9Rules than the one I joined (or thought I did), and I’m feeling better every day about my decision to leave.

§1930 · November 14, 2007 · 5 comments · Tags: 9rules, general, site updates, web design

¶ A Modest Construct v2.0: Hooloovoo

Last week, I finally went live with a new design that I’ve been toying with for this blog. It sort of grew organically out of a few failures that I’d played with on and off for the last few months. After looking at a lot of available themes, I decided to more or less write my own from scratch. I’ve codenamed this new design “Hooloovoo,” which some of you will probably get (and those who don’t can just as easily Google it).

As I said in a previous comment, the problem with having content about a new theme is that it won’t be relevant when the theme goes away or changes. So this post is to both exhibit and archive this theme so that there is some record of it.

Hooloovoo

toggle thumbnails

It’s a different creature than I’m used to—I’ve never not had a sidebar, but I decided that perhaps a sidebar wasn’t the best way to do things. I moved that sort of ancillary data to the top, but I used a pull-down menu á la Foliage mod. Since sidebar data tends to not be particularly important to the content anyway, it doesn’t need to take up real estate.

Metadata, while displayed more or less inline on the index page, is moved down into a content footer on the individual post pages. This kind of graphical metaphor is actually very common now, but I’ve wanted to do it ever since I saw it in Hemingway about a year and a half ago. Like the upper menu, I’m dividing into thirds, and iterating with lists.

In general, I’ve tried to round off a lot of corners. This involves more images than I’d normally like, but I’ve tried to take shortcuts wherever possible, combining multiple images and simply changing their positioning: I managed to reduce the number of server requests significantly from the early phases of the design, but I still have some more to go.

Which brings me to another thing: I’ve used some 24-bit PNGs, not only as icons but as background images as well. I made a half-hearted attempt to use ifixpng to resolve display issues for IE6, but when it didn’t work satisfactorily, I decided that I spend enough timer catering to IE6 users and work, and I’ll be damned if I’m going to expend any extra effort on my hobby site. So let me make myself clear:

Attention IE6 users: there is no good excuse to be using IE6. Either upgrade or use a different browser. Firefox is good, as is Opera. Or go away.

On with the tour: I’ve heavily incorporated the jQuery javascript library into my redesign, and attempted to make it as performance-tuned as possible by including the extra plugins in a common file, and gzipping everything on the fly.

Beyond that, the theme is pretty unremarkable, really, but (I hope) aesthetically-pleasing and useful. I’ve completely removed categories from the template, since I think that tags have much more utility.

Comments? Questions? Suggestions? Venom?

§1923 · November 13, 2007 · 6 comments · Tags: Firefox, jquery, science fiction, site updates, web design

¶ Using jQuery to extract blockquote metadata

5 Nov. 2007 • I’ve formatted this code as a plugin, too. Go to the project page.

Blockquotes, by definition, can and should in most cases have a title attribute and, if possible, a cite attribute. The former is the actually name of the quote’s source. The latter is the URI to the quotes location, if it was retrieved online.

For instance:

<blockquote cite="http://heliologue.com" title="A Modest Construct">
 
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer arcu ligula, tempus vel, dignissim at, molestie ut, leo. Etiam luctus, ipsum sit amet tincidunt malesuada, magna nisi feugiat eros, in tempus libero justo sed dui. Aliquam bibendum pulvinar turpis. Ut iaculis gravida nibh. Quisque elementum ligula vel nibh. Sed leo augue, tempor sed, nonummy in, interdum at, quam. Ut cursus tincidunt felis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer pharetra vulputate nunc. Cras nec felis ornare augue tempor fermentum. Nullam rutrum malesuada nunc. Aliquam vel purus. Aliquam faucibus malesuada orci. Nulla sit amet nulla sit amet tortor fermentum euismod.
 
</blockquote>

This is all well and good for search engines, but it doesn’t do much for human readers (who are arguably more important, though it depends on who you ask). A human might want to see something like this:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer arcu ligula, tempus vel, dignissim at, molestie ut, leo. Etiam luctus, ipsum sit amet tincidunt malesuada, magna nisi feugiat eros, in tempus libero justo sed dui. Aliquam bibendum pulvinar turpis. Ut iaculis gravida nibh. Quisque elementum ligula vel nibh. Sed leo augue, tempor sed, nonummy in, interdum at, quam. Ut cursus tincidunt felis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer pharetra vulputate nunc. Cras nec felis ornare augue tempor fermentum. Nullam rutrum malesuada nunc. Aliquam vel purus. Aliquam faucibus malesuada orci. Nulla sit amet nulla sit amet tortor fermentum euismod.

A Modest Construct

Which I achieved by appending

<cite class="source">
     <a href="http://heliologue.com" title="A Modest Construct">A Modest Construct</a>
</cite>

to the blockquote.

But nobody wants to hard-code a citation into every blockquote, especially when it’s technically correct to attach the information to the semantic element in question (the blockquote, for those of you not following along). So, how to be structurally correct when using blockquotes, while still allowing human readers the benefit of such data?