Sitting on the sofa, MBP on my lap, iPhone in my hand. Do I really need an ‘in between’ device? No.

What’s a bit dissapointing about the iPad is that it’s *exactly* what we expected… and we’re used to Apple exceeding our expecations

if you have an iPhone and a MacBook Pro, why would you need an iPad?

The problem here, is the people doing the grumbling. We (geeks) aren’t Apple’s target audience with the iPad.

We may consider it yet another piece of gadgetry that makes it a little easier to read RSS feed items in bed, or check your email while you’re taking a poo—but the truth of the matter is, that’s all it is to us.

But Here’s the Magic

Think of your parents. They probably aren’t terribly tech savvy, but you buy them a laptop anyway. A laptop is a very powerful device even with average hardware specs, you can do a lot with it. But the ability to do a lot comes at the price of reduced usability. Introducing more choices means more mental hurdles to jump. To us (the geeks), these hurdles are skipped, we’re used to computers and we don’t even think when using most basic functionality. The iPad removes all of these choices, and as a result, increases the inherent usability of the device for those who normally have to jump those hurdles.

Think of those whose lives don’t revolve around using a computer for anything more than entertainment. The iPad is, and let’s be honest here, perfect for this group. Extremely lightweight, easy to throw in your book bag. Plays music, video, let’s you browse the web, read books, and so on. These people don’t need the power of a laptop the way those of us who use a computer for work do. The iPad does exactly what they want to do, and it does it well.

Think of those who travel. Many of these people have a laptop and a 3G connection card. Why? So they can check their email and file documents on the road. The iPad with a 3G connection does this, and does it well.

Think of those with desktops who want to do some mobile computing. Most people’s definition of computing is just working on stuff in Microsoft Word, or browsing the internet.

I think you can see the running theme here by now.

So Why the Lofty Title?

If the iPhone revolutionized the usability of smartphones, the iPad just did the same for laptops and netbooks. It’s a completely different take on the de facto standard. It targets the average computer user, not those of us who use a computer all day at work. It creates a UI and capability set that adopts the 80/20 principle of usability. It does nearly everything this crowd wants it to do, with 20% of the bullshit interface getting in their way.

It brings mobile 3G based computing to the mainstream, if we thought the iPhone took the internet to the mobile realm, this takes it even further. This makes a move where some people may not purchase an at home internet connection. If the iPad does everything you need, flip the bird to Comcast and only pay $30 a month for unlimited 3G access—anywhere.

So while we the geeks may feel under-impressed, there’s a whole new market Apple just tapped—and it’s going to take the internet to another level of ubiquitousness in much the same way as the iPhone. And, well, we all know the impact the iPhone has had.

Rather than write a short comment which would be lost within the hundreds soon to be posted, and since some folks on Twitter thought I should expound upon my harsh tweet, here are my counter arguments to the points made in the article, though it’s likely better if you read the article in question first:

Item One: It Discourages Bad Information Architecture

Only after reading some of the content on the site do we see that they manufacture, install, repair and otherwise service various types of industrial equipment. But those facts could have been communicated more clearly by including a simpler navigation bar with links like “Manufacturing”, “Repair”, and “Installation” — instead of the overly-specific “Wet Process Systems”, “Tanks”, and “Air Management”. This would then allow for a more aesthetically-pleasing horizontal bar that would serve to facilitate a more organized structure that’s not just one level deep.

I completely disagree. While a vertical navigation pattern may be more forgiving to an overtly long list of navigation links, the issue here isn’t the choice of layout—it’s the designer. A vertical navigation can contain a short list of well architected links just as well as a horizontal menu, and to say it’s more aesthetically pleasing comes down to the particular design in question and the other content that must be placed on the page.

Consider the example in Figure 1 below, a horizontal navigation bar here would ruin the beautiful top left to bottom right eye-flow the designer has created. The navigation is properly architected for each section, and the navigation is obvious and well placed in the hierarchy so your eye falls across it and recognizes what it is immediately.

Figure 1: Black Estate

Item Two: It Wastes Prime Screen Real Estate

As discussed in the previous section, design in today’s market needs to be based on strong information architecture. The navigation paths taken by users should have clearly defined goals and outcomes. A vertical navigation bar that sits to the left of a page’s content on every screen wastes valuable space that could be used for more important things. Yes, it’s true that you want navigation to be easy to find, but you also don’t want navigation to unnecessarily crowd the left side of the page, which studies have shown will draw a user’s eyes more often.

It would be ignorant to assume that just because navigation is placed to the left or right of a site in a vertical fashion that no content could fall below it and continue to make use of the space as you scroll down the page. Consider your typical blog template: content in a main column, navigation in a sidebar. More importantly, beneath the navigation, typically lies other sub-content that is less important to the user as they scroll the page looking at the main post content. With a horizontal model, this content would have to be placed above the main content, forcing it lower on the page. Below the main content, forcing it far down the page and demoting it to the footer’s territory, and the lack of importance that may come with this. Finally, perhaps inside the main content, creating a distraction from the title to content to post meta data flow that users are so accustomed to.

Plus, if we’re using a simplified home page to draw users in to the experience, don’t we want them to see the navigation quickly with your usual F-pattern hierarchy? I’d like to use Figure 2 as an example, the content to the right of the navigation is a flash experience to establish confidence with the visitor that the architecture firm creates top notch work. Glancing at the navigation to the left of this experience establishes in the users’ mind where the navigation is when they’re done with the experience.

Figure 2: Shea Architecture

Item Three: It Doesn’t Conform to Real-Life Reading

There aren’t many areas in life where a person is asked to read something that has a “left hand menu” that resembles what we find on websites that feature vertical navigation. In general, people are accustomed to reading content that spans the entire width of the reading area, or else is broken up into boxes or columns within the reading area. In either case, the content is vertically sandwiched between a header and footer. Books and magazines are a good example of this.

Now, to be fair, the author mentions this is a debatable point, so I’ll be brief. There are numerous examples elsewhere in the world where a person is asked to read something that resembles a vertical navigation. Restaurant menus, lists in books or emails. In fact, lists in general, which is what we use to semantically mark up navigation menus, no?

Upon finishing a line in a book your eye moves down to the next row. It’s been proven through centuries of roman language based book design that content which spans beyond a certain line-length is degrading the ease with which the reader can interpret the content.

Item Four: Fly-Outs Aren’t as Usable as Drop-Downs

I don’t believe either are usable and truly are the biggest crutch for bad information architecture available. Both have been written about numerous times as design patterns to be avoided.

Item Five: It’s Not as Successful, According to Studies

An excerpt from the quoted study:

“While testing several homepage designs, we varied the placement of a navigation element: top (under the flag or logo), left column, and right column.

“Navigation placed at the top of a homepage performed best — that is, it was seen by the highest percentage of test subjects and looked at for the longest duration.”

This is some very subjective research, if a user stares at something longer, does that mean it’s better? If they have to look at it longer to possibly interpret what the item in question is, or which category to pick, is it better? If anything this proves that content on the right side of the screen is seen less often, but the F-Pattern research (figure 3) shown proves that the left-hand side of the page is just as ‘hot’ as the top horizontal, if not more.

The key here is properly designed visual prominence. Whitespace, color, size, and more determine what the eye sees first. While it’s natural to start in the upper left-hand corner it’s the visual design of the page that will determine where the eye goes first. These eye tracking studies are based on information heavy pages such as search results. I totally agree with the research findings when you look at the designs beneath the clickheat maps, my eye goes to where readers would look too. But if that left-hand navigation wasn’t smaller text, lighter colored, and densely packed, my eyes may have done different things.

Figure 3: Quoted Eyetracking Research

Item Six: The Few Benefits Are Negligible

Yes, one of the advantages of a vertical based navigation is being able to fit more in to it due to scrolling. In some cases the flexibility of adding an additional navigation link in the future, without having to rehash the horizontal menu design to include it, is very helpful. While they may be small differences, they have their uses.

Conclusion

The point I would like to make is not that vertical navigation is in any way better than its horizontal counterpart. They both have pros and cons and are situationally more useful than each other. This is part of being a designer. Knowing the design patterns available to you and having the discretion to use the proper one at the proper time.

I hope you enjoyed the counterpoints and encourage you to think critically of such articles in the future. Having thoughtful discussion is an important part of educating ourselves and making informed decisions. I’d love to hear your thoughts in the comments.

As designers, we tend to enjoy nice things—items with quality, good aesthetics, good design. We pass them around on instant messenger, get the occasional email with something someone found that they think you’ll be fond of, etc. So essentially, I just set out to document things that I discovered or were shared with me that I wanted.

A few days later I had a new blog… thing: Needs/Wants.

It’s sort of a living experiment, I know the functionality that I desire isn’t completely in place. Maybe I won’t like the design much in two weeks, who knows. But for now, there should be new content every two days or so, and we’ll just see how it fares in the wild.

Hope you enjoy Needs/Wants, and if you’d like, there is a Twitter account to follow as well.

@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 refresh these principles 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 by 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?