@cameronmoll Seriously. It’s all fluff and no context, criticism, or thought. Just pretteh pretteh pretteh, and no “why”.

— Jason Santa Maria

Jason has a great point, 300 Lists of 425 New Techniques to Make Your Web Design More Spectacular won’t make you a better designer. Articles such as Web Design Trends for 2010 will do nothing to increase your understanding of design, and furthermore, they undermine the value of design.

This is not design:

1. Oversized Logos/ Headers

Splash pages are so yesterday. To make an unforgettable impression on the visitor, the trend for 2010 will be oversized logos on an equally oversized header. These types of headers can take up the entire screen, but with one important note. Visitors will not need to click anything, just scroll down. Visitors often having a clicking phobia (due to years of poor navigation), so big headers do the job of a splash page without forcing your visitors to click anything.

— Omitted ¹

Using an oversized logo or header has a set of pros and cons. While it does give a great opportunity to do some more exotic branding, just look at the quote: “big headers do the job of a splash page.” Didn’t we get rid of splash pages for a reason? A large header has a place in certain websites and not in others, making the decision of whether or not this element is appropriate for a particular website is practicing design.

Andy Rutledge puts what I want to say better than I can in a recent post:

Creativity is not design. Creativity has nothing to do with design. Creativity is bound by no laws, rules, or strictures …which is perhaps why it’s so intoxicating […]. Design, on the other hand, is based entirely on math, psychology, human perception, and a host of rigid rules and laws […]

— Andy Rutledge (Creativity is Not Design)

Andy is pretty upfront about his opinions on the matter, and just wrote a great test which looks at basic design principles. If you haven’t read through it, it’s a great chance to see fresh these principles are in your mind. If things are a little difficult, spend a little time researching them. Andy’s written about design fundamentals in the past, and they’re great reads as well. Andy’s blog is exemplary of the type of content that is being drowned out on the web but all the noise. It’s opinionated, it makes you think, it makes you question what you know about design at times. Agree or disagree with him on each post, you’ll only learn more by doing so.

What makes great design great is not a trendy technique, but the logic and conceptual aspect that were figured out in the designer’s mind—or on more likely, on paper—before a mouse cursor ever opened Photoshop.

So ignore those top x lists and articles on trends. Seek out quality content about the logic and reason that goes in to design. Read great, thought provoking posts that delve in to the process of redesigning a site, evaluating the finer details of pricing and plans pages, and so on. Make this the content you share with others, and leave the link bait to turn to link rot.

¹ Omitted because it’s unnecessary to identify the author.

Put simply, it’s a request for a new font-file format, specifically for the web: .webfont. This format would allow typefaces to be assigned to a domain to prevent abuse, and would allow us to use the browser native @font-face functionality as intended. No workarounds, no middlemen, no bullshit.

They’ve got my support.

For the sake of brevity, I’ve copied the highlights of the proposal here (ignoring the sections aimed at browser manufacturer’s and type foundries). You could also view the full proposal if you so desire.

The revised format [.webfont] is now a compressed file containing
two files with the following names:

— info.xml
— fontdata

The info.xml file contains numerous bits of data describing the font
 data.

The fontdata file would contain the actual font file. The name does
not have an extension so that it can be format agnostic.

[…] these files would be compressed into a single file.

The proposal goes on to list various elements for the .xml file but the important bit is this:

allow - A list of URLs allowed to use the font. Optional.

In our previous proposal we suggested an unobtrusive alert system that
would be triggered if the domain being viewed did not match a domain
in the element. John Daggett explained that he didn’t think
this would work. Instead, he suggested a “page info” window that
would display data about the page including information defined in the
font’s metadata plus same-site origin restrictions. We are very
interested in hearing from the browser developers about the
feasibility of these two ideas.

We’re hopeful that this is a good format for everyone. It gives users
smaller file sizes. It gives the font vendors a simple format that
allows them to include information about the font. It doesn’t require
entirely new technologies from the browser developers.

What do you think?

While things are still hazy about exactly how this new service would work, I’m rattled by the following section of the opening announcement:

We’ll be launching this summer with a great collection of beautiful and hardworking typefaces. We’ll offer a free version of the service to get you started, and a low-cost way to grow from there. A truly scalable professional version will follow soon after.

Pay? Again?

The issue with @font-face has largely revolved around licensing issues and the complications from the lack of DRM that it provides. Understandably, the type foundries are not willing to allow their hard work to be easily downloaded from linked font files.

The problem, at the moment, lies in this complicated licensing that is a result of technology failing to amicably meet the needs of type foundries and designers. As a result of this, it appears as if we’ll be renting our typefaces from a third party entity.

I already pay for a license to use typefaces within my design applications, and now I’ll need to pay again to use them in the final produced site: a recurring fee because files don’t host themselves.

While I’m excited that a group of influential people (who I admire) have taken this step towards making @font-face a more realistic tool, I have to wonder why we’re solving what is essentially a technical issue with yet more complicated legalize and extra money out of every designer’s pocket.

If the technology to link typefaces exists, designers can and will do so regardless of licensing. This will become the same battle DRM has been for the music and film industries, with the same outcome. The people who properly work through Typekit to protect the rights of the foundries will be the ones who pay extra money, while the ones who just link their font-files with abandon will be the ones truly enjoying @font-face.

Perhaps this is just a rant over lunch hour about something I don’t fully understand — and while I sincerely appreciate the effort — I think we may still be headed down the wrong path. Hopefully I’m just blowing smoke, because I’d love to see this service succeed.

The trickier part comes when handling data that users will interact with. For example, the archives here on Astheria are presented in a timeline format. It provides a visual cue to relevance of a post by how old it is, but also maintains a list format that is relatively easy to digest and use. Although the growing number of posts here may demand an alternative format.

This post will be written from the perspective of doing something similar in Wordpress, although the concept and the bulk of the code is applicable to any content management system, or in fact, anything that stores dates with items that are comparable! Granted, I’m not a PHP programmer, and I’m sure some of this could be done differently. However, I’ve received a number of requests via e-mail about how this was done, and thought I would share the code.

Please note that I’m providing this code ‘as is’ and am not offering any support or installation assistance. What this script will do is print an ordered list for each year of posts you have, along with a title for that year. Each list item will be vertically separated from its peers based on the time that has passed between the two. You can adjust the $distance_multiplier variable to adjust the scale of the gaps. Enjoy!

I had a bit of help fixing some hiccups in the code from my coworker and friend, Matt Gray.

<?php get_header(); query_posts('posts_per_page=-1');
	$dates_array 			= Array();
	$year_array 			= Array();
	$i 				= 0;
	$prev_post_ts    		= null;
	$prev_post_year  		= null;
	$distance_multiplier 	        = 2;
?>

	<?php while (have_posts()) : the_post();

		$post_ts    =  strtotime($post->post_date);
		$post_year  =  date( 'Y', $post_ts );

		/* Handle the first year as a special case */
		if ( is_null( $prev_post_year ) ) {
			?>
			<h3 class="archive_year"><?=$post_year?></h3>
			<ol class="archives_list">
			<?php
		}
		else if ( $prev_post_year != $post_year ) {
			/* Close off the OL */
			?>
			</ol>
			<?php

			$working_year  =  $prev_post_year;

			/* Print year headings until we reach the post year */
			while ( $working_year > $post_year ) {
				$working_year--;
				?>
				<h3 class="archive_year"><?=$working_year?></h3>
				<?php
			}

			/* Open a new ordered list */
			?>
			<ol class="archives_list">
			<?php
		}

		/* Compute difference in days */
		if ( ! is_null( $prev_post_ts ) && $prev_post_year == $post_year ) {
			$dates_diff  =  ( date( 'z', $prev_post_ts ) - date( 'z', $post_ts ) ) * $distance_multiplier;
		}
		else {
			$dates_diff  =  0;
		}
	?>
		<li style="margin-top:<?=$dates_diff?>px"><span class="date"><?php the_time('F j'); ?><sup><?php the_time('S') ?></sup></span> <a href="<?php the_permalink() ?>"><?php the_title(); ?></a></li>
	<?php
		/* For subsequent iterations */
		$prev_post_ts    =  $post_ts;
		$prev_post_year  =  $post_year;
	endwhile;

	/* If we've processed at least *one* post, close the ordered list */
	if ( ! is_null( $prev_post_ts ) ) {
		?>
	</ol>
	<?php } ?>

While it may not work for everyone, I know most people who visit this site are probably at least moderately interested in design, or more likely: are designers. I think it’s safe to say a good percentage of us are probably running around with Gotham installed on our computers these days; or Helvetica Neue, Avenir, Archer, or any other bits and bobs of popular typefaces.

So in the midst of waiting for CSS3’s @font-face to come save the day, I’ll be making use of what current technology exists to show the best possible design to the folks who can see it. And for those who can’t, you still get the old Helvetica goodness. That’s the beauty of the pre-existent functionality of font-family. So let’s play with what we have now, while we dream about tomorrow.

What does it do?

Well, in a nutshell, I’m hoping to simplify the way you monitor what the internet is saying about your sites, your brand, and yourself. As new communication mediums have evolved, simply googling yourself isn’t enough these days. At the same time, I’ve discovered a level of frustration with statistics tracking solutions that make it difficult to keep your finger on the pulse of your site. Without going into too much detail just yet, this is the problem I’m hoping to relieve, at least slightly. And having used the app for a few weeks now solo, I’m finding it to be a solid solution and good companion to my previous methods—at least for my day to day needs.

Yet-to-be-named?

Unfortunately, yes, I’ve been working with it on a particular domain and using what stood out at me on the first go around. That said I’m all ears to any suggestions any of you may have; hopefully the first paragraph was enough description, but if not maybe that’s a good thing. I’m a fan of random ideas.

So there you have it, the smallest of smallest tidbits I suppose, but I’ll be posting updates more frequently now that things are rolling along; as well as trying to make time for an article or two.

I won’t go into detail about just what it is (yet!), but I’d like to ask for your assistance so I can learn a little more about the problem, this should take no more than about two minutes to answer if you’d be so kind:

1. What software do you use to manage your site (CMS)?
2. What software do you use to watch your statistics?
3. Do you use any other software to manage or watch your website, if so, what?
4. What are your three favorite things to see reported about your website?
5. What are your three least favorite things about the software you use to manage or watch your website?

Typeface discusses the changes in the globalization of industry, and the effect of the computer and demand for faster results on the manual printing techniques which came before it. The Hamilton Wood Type Museum plays a central role, which shelters over 1.5 million pieces of wood type in rural Wisconsin. More importantly, it reminds us of the importance of the history of our profession and why we should cherish it. Be sure to check out the film’s about page for some more background.

A photo of just a taste of the Hamilton type collection

I’m sure you’re wondering if it can compare to Helvetica… While the production quality is a little rougher, I enjoyed it just as much (and granted, the editing was not fully complete for the screening). While it doesn’t have influential figures giving testimony, it does have a very humbling cast of passionate people who have lived through the evolution of the industry.

Norb, 83 years old and still cutting letters

I found myself chuckling quite often, while this is a documentary, it doesn’t feel like one. In the same vein as Helvetica, even those not fully enthralled with typography will enjoy it.

The gorgeous promotional website

I won’t deluge many details about its contents, but if you enjoyed Helvetica, I promise you will enjoy Typeface. It will be appearing in film festivals in the near future, I would expect showings in art theaters, and an expected DVD release in late 2009. Be sure to check it out if you have even a passing interest in typography.

]]>