So a couple weeks back I was doing some work on a client website. I had just recently signed up for TypeKit and was using that to serve up the custom fonts for the site. It was working splendidly. The only exception in my early round of testing was on my iPhone 3G. In technology terms, my phone is definitely getting old now, but I am still using it and am running iOS 4.1, which is incompatible with TypeKit. So, instead of getting Adelle served up, I was just getting a standard sans-serif default from my font stack.

Was this acceptable? Probably. Everything degraded gracefully enough, but I really liked that slab-serif appearance and wanted to bring it to the website on my iPhone too. So, without getting into all the gritty details, I downloaded Arvo from FontSquirrel and coded the site so the font would be accessed by the iPhone as required. Everything seemed to be set up properly.

Except that the font was not being rendered.

I spent several hours tearing my hair out trying to figure this one out. I had successfully used @font-face with files from FontSquirrel before, and seen them rendered on my iPhone, so I knew it could be done. I just couldn’t figure out why it wasn’t rendering in this instance.

Solving the Problem

After testing to make sure that my stylesheets were being loaded, and turning off TypeKit to confirm that Arvo was being loaded in other browsers (which it was), I slowly determined that the problem had something to do with the SVG files that I was using. I am by no means an expert in SVG and only understand into conceptual terms. But, as I did some digging through the code of sites I knew were working and the code of the site that I was actually working on, I discovered a strange irregularity.

There is a tag within the XML of the SVG file which looked something like this:

<font id="webfontOTINA1xY" horiz-adv-x="335">

What was interesting about this tag was the id attribute. In the stylesheet supplied in the @font-face kit downloaded from FontSquirrel, the font declarations look like this:

@font-face {font-family: 'ArvoRegular'; src: url('Arvo-Regular-webfont.eot'); src: url('Arvo-Regular-webfont.eot?#iefix') format('embedded-opentype'), url('Arvo-Regular-webfont.woff') format('woff'), url('Arvo-Regular-webfont.ttf') format('truetype'),url('Arvo-Regular-webfont.svg#ArvoRegular') format('svg');font-weight: normal; font-style: normal; }

I have bolded the line specifically relating to the SVG version of the font. Notice the fragment identifier after the file name. When I went back and looked at the site that was working, this value was identical to the id attribute of the font tag in the SVG’s XML. This got me thinking, and I actually went in and changed this id attribute to be the same as the fragment identifier of the @font-face code that was calling it.

As soon as I did that, Arvo was rendering perfectly on my iPhone. It was a ridiculously easy fix that only served to irritate me more, since I had spent several hours working on the issue.

Again, I am not an expert in SVG, but here’s what I think is going on. The <font> tag within the XML seems to contain the entire character set, while the id attribute provides the unique identifier for that particular font. When the SVG file is called within the @font-face declaration, the fragment identifier seems to be required to tell the CSS rendering engine what block of code to use, even though there is only one font declared in the file.

This seems to suggest that you might be able to combine all of your SVG fonts into a single file and then access them through the appropriate fragment identifiers. I have not tested this, though, so if any SVG experts would like to chime in on this one, that would be awesome.

A FontSquirrel Bug?

Don’t get me wrong: I love FontSquirrel. I even listed them in a post about 10 of my favourite online tools for design and development. There does, however, seem to be a slight bug in their kit generation. From what I understand, they build their own SVG files, based on the existing font files for most of their typefaces. So far, they seem to do a pretty good job too—when they work, the type looks great on my iPhone.

For some reason, however, there seems to be this occasional breakdown where the id attribute in the XML will contain some coded identifier and the supplied CSS will use a camel case version of the font name (such as ArvoRegular). It doesn’t happen in all instances, though. It doesn’t even seem to happen consistently with the same fonts. I downloaded Arvo again as a test, and it was fine. Then I downloaded League Gothic, which has always been fine, and I found the discrepancy.

Fortunately, if you are aware of the issue, it only takes a moment to open up the files and do a quick cross reference to make sure everything is working properly. Unfortunately for me, I didn’t know about this and had to figure it out the hard way. After reading this post, hopefully you won’t have that same problem.

Webfonts Moving Forward

Is this SVG thing really a big deal? Maybe not. If you check out the information provided at webfonts.ingo, every major browser now supports @font-face rendering with either TrueType, OpenType or WOFF format fonts (or even all of them). This includes SafariMobile as of iOS 4.2. If this is the case, then do we even need to worry about SVG fonts?

Maybe not in a few years. Right now, though, there are still people running older versions of iOS. I know. I’m one of them, and I don’t want to upgrade because my iPhone is already running slow enough.

That’s enough of a motivation for me to take the time to ensure that any @font-face declarations that I make are working across the board, especially since it’s just a matter of making sure a couple of values line up.

I hope you find this quick tip useful. As already noted, I’m not an expert in this area, so if you have any comments or insights on @font-face or SVG fonts, feel free to share in the comments below.

Exclusive Content

To thank you for subscribing to my feed, I am including exclusive, feed-only content for you at the bottom of each post!

Current Freebie Code - 7ev165dd

Over the past couple of days, I have been working on an initial concept/prototype for a new, interesting website. As I normally like to do whenever I am tackling a new project, I started by opening up a notebook and making a few really simple layout sketches for how I initially thought the page should be laid out (at this stage, I am just working the layout for a single type of page, with others following later). After discussing these initial concepts with members of the team I am working with, I very logically moved on to the creating more fully realized wireframes. For me, this meant printing of some grids and using a pen to draw and label content boxes.

The process, however, started me thinking about wireframes, their importance and the role(s) that they play in the design and development process. More specifically, it got me thinking about how wireframing— even in the rudimentary pencil on a paper grid method that I use—may be even more important and useful than it may initially appear, or than we like to give it credit for.

Any form of design—but especially web design (or anything else that actually requires a tangible user interface)—is about more than just what the product looks like. It also needs to consider its audience, its purpose and its media. On the web and in application development, this means questions of usability and user experience, interaction and information architecture, all of which are at least as important—and likely more so—than the what something looks like.

Yet, in the same way that “design” has a tendency to be understood merely as the creation of a unique (and often disconnected) visual aesthetic, so to can wireframing have a tendency to be relegated solely to the realm of layout, when it is, in fact a tool with a much broader scope.

It’s All About Structure

Often, many good designers will approach the question of layout from the perspective of arranging the elements on a page in such a way as to create something that is aesthetically pleasing to look at. Conversely, others will approach the layout as a matter of arranging elements in a logical, predictable and consistent fashion, which leads to improved usability and a better user experience.

Great designers do both, and I wouldn’t be at all surprise to learn that 9 times out of 10, this is generally reflected in their wireframing.

Earlier this year Nick Haas authored an excellent post on why wireframing is important and should not be glossed over in an effort to jump straight into the “real” design (and I use that term somewhat ironically) that determines a site’s appearance. In this article, Haas rightly points out that wireframing:

forces everyone to look objectively at a web site’s ease of use, conversion paths, naming of links, navigation placement and feature placement. Wireframes can point out flaws in your site architecture or how a specific feature may work.

From this perspective, wireframing is as much about the underlying structure of a site as it is about the visual dressing that we drape over that structure. It’s about planning the skeleton or framework on which the site will ultimately be built. And, while this skeleton will be reflected in a visual manner, with a number of sketched or grey boxes arranged in a particular fashion, that does not mean that the wireframes themselves are at all limited to the visual aspect of the site.

When done properly, those boxes tell us more than what kind of grid to use or how many CSS floats will be required. Through their positioning and interaction (and, ideally, accompanying notes), they bring a site’s underlying structure to the forefront. If that structure is solid and logical, then it will be easily be able to accept the aesthetic trappings that will eventually formulate its final apperance.

On the other side of the coin, if there are issues or flaws in that structure, those problems can be readily addressed (and hopefully fixed) at this early stage of the process. This certainly beats having nearly completed the entire design only to discover some fundamental structural flaw that forces you to tear everything apart, fix the problem and then try to put it all back together again.

Wireframing can help you catch these issues early, saving time and precious budget dollars.

Wireframing With HTML

There has been a lot of discussion at different points about the merits of designing in the browser, as opposed to creating flat mockups in an application like Photoshop. There are strong opinions on both sides of the fence. My own view is somewhat less concrete, in that I feel that approaching any new web design project is really a matter of context, and the tools and techniques that I chose to employ will depend on what I am looking to accomplish.

That being said, however, while I may not always start in the browser (or even get to it early), I do feel that it is vitaly important to always be designing with the browser in mind. In other words, to consciously design within the constraints and limitations of HTML and CSS. With new and emerging technologies, these constraints are certainly shrinking, but there remain certain things that we still can’t do (or things that we shouldn’t do).

Moreover, it is important to always keep in mind that when we are designing for the web in the traditional sense (apps, I believe, may be somewhat different in this regard), what we are actually doing is creating the visual skin that will be placed over our standard HTML.

We’ve already touched on how wireframing is very much a matter of creating the initial skeleton or structure for a site. In practice, the HTML that we craft becomes the tangible result of that structure. It the context of the document, it brings semantics and meaning to the content, while simultaneously providing the key hooks that will be required to wrap that same content in the visual layout that we have created.

For this reason, I believe that wireframing and HTML are (or at least should be) fundamentally connected, to the point where I am increasingly finding myself actually writing out simple HTML structures at the same time that I am creating my wireframes. In my experience this has a number of key benefits:

1. It helps remind me that wireframing is about more than just the visual aesthetic of the site.
2. It helps keep my mind “in the browser” so to speak.
3. It helps me think of structure in a broader context. By constantly working out how the layout would need to be represented in HTML, I am better able to consider the placement of my wireframed boxes and make important decisions about the relationships between those boxes, both visually and structurally.

For me, these are all key components to my design and development process—components which help strengthen the quality of my work and ensure that the structure and layout are more than just a cool visual treatment. As such, I plan to continue to pair my traditional, rough pencil and paper wireframing with equally rough HTML structures, especially as I dive deeper and deeper into world of responsive design.

Of course, while the concept of wireframing generally serves the same basic purpose from designer to designer (or team to team), the techniques that are used in the process can be very different. As already noted, I like to work more traditionally with pencil and paper. Some designs will use simple grey boxes in Photoshop or Fireworks, while others will actually use applications and other tools that are specifically geared towards wireframing. Regardless of the technique that is used, I believe that the important relationship between these wireframes and HTML still exists and needs to be considered.

The only “exception” would be for those designers who wireframe by creating basic, lightly styled HTML documents right out of the gate. Of course, in these cases the exception is not that HTML should not be considered, but rather that it is no longer a matter of considering the relationship between two seemingly autonomous elements. Instead, the HTML is the wireframe, which only serves to further underscore the point that I’ve been driving at through the entire article: that a thorough consideration of HTML should be an integral part of any wireframing process.

How that manifests itself is up to you.

For those readers who may not be all that familiar with wireframing, feel free to check out Grace Smith’s “Get Wireframing: The All-In-One Guide” for a full complement of resource materials. There are all kinds of wicked resources to help get you started, or to help you dig deeper into the concept.

article photo my sonali sridhar

Exclusive Content

To thank you for subscribing to my feed, I am including exclusive, feed-only content for you at the bottom of each post!

Current Freebie Code - 7ev165dd

A few months ago, as I was working to put together the redesign of the Echo Enduring Blog and Echo Enduring Media, I published an articled entitled “10 Of My Favorite Online Tools for Design and Development“, in which I outlined some of the online tools that I use the most in my work. It turned out to be a pretty popular article, and I think that some people really benefited from it.

Well, after only a few short months, I’m back with another article in the same vein. In the weeks and months since that original post, I’ve come across a bunch more awesome online tools that can make a designer’s life so much easier and I wanted to share them with you.

Text Generators

Despite some very valid arguments again using Lorem Ipsum text, I still frequently find myself in situations where I need some kind of textual placeholder. Perhaps its for creating a theme, or for a client that doesn’t have any copy written. Sometimes I just need a few paragraph of text to run through some JavaScript or jQuery processing. Whatever the need, I am very rarely in the mood to just start cranking out several paragraphs of placeholder text on my own.

That’s where text generators can come in incredibly useful, and I’d like to introduce you to two of these:

BlindTextGenerator

This web app is a great little tool for designers who need to grab some quick placeholder text. It may look simplistic, but don’t let the interface fool you—this little app can pack a big punch, and deliver placeholder text in all kinds of different and interesting ways.

Blind Text Generator allows you to create a wide range of different blocks of placeholder text

It makes use of a number of different base texts, starting with the classic Lorem Ipsum, and including text in both English and Latin. Beyond that, you can control the number of character or words, and the number of paragraphs, offering a surprising degree of flexibility in terms of the length of your text. Being able to turn on <p> tags is a nice touch too.

Fillerati

Fillerati is another placeholder text generator, which spits out text from a number of classic literary works of authors such as Lewis Carrol (Alice in Wonderland), H.G. Wells (War of the Worlds) and Jules Verne (Around the World in 80 Days). Designed in an attractive and contemporary style, this little app is a pleasure to work with.

Fillerati generates placeholder text in a number of different formats, based on a selection of different literary classics

It also provides some added flexibility in the way the placeholder text is generated, allowing you to create paragraphs, headings (ranging from levels 1-6), list elements and even just plain text. The type of content you’re generating also changes the slider control, which you can use to control how many paragraphs, words or list elements you want.

CSS Generators

Now, I’m a huge fan of CSS3 and all the various bits of awesomeness that it provides us with, but as many of these new properties are introduced, I am finding that they are becoming a bit more complex than the most of the properties that we saw in CSS2. That’s cool, but sometimes it makes coding and experimenting a bit more challenging. Well, there are a variety of different generators out there that can help you create your CSS on the fly.

Border Radius

Web services seriously don’t get any simpler than Border Radius. You basically visit the site, provide values for the radius (roundness) of the four corners of a box and grab the CSS.

Border Radius generates simple CSS for creating elements with rounded corners

The only other option is being able to tell the app if you want the WebKit, Gecko (Mozilla) or regular CSS3 properties.

Yes, it may seem ridiculously simple, but it’s also super quick and easy to use and can actually be a real time saver—especially for people who are just getting started with CSS3 (or even CSS in general).

CSS3 Gradient Generator

Of all the new CSS3 properties that we can use (to some degree) here and now, the CSS gradient is probably (in my view) the most complex and daunting of the entire group. As such, a number of different generators have cropped up and the aptly named CSS3 Gradient Generator seems to be a pretty good one.

This app allows you to generate the code for creating CSS3 gradients

I like how big the gradient is preview is, allowing you to really see how one colour blends into the next. A really nice colour selection tool allows you to choose from the colour picker or define them manually in RGB, HSB or hex code. Also, the one-click “Copy the code” option is a really nice feature.

The only thing that I don’t like quite as much is the user interface (UI) for creating, deleting and controling the positioning of the swatches. It’s definitely usable, but it took me a couple of minutes to figure out what all the controls did.

Ultimate CSS Gradient Generator

Obviously, this one is another CSS gradient generator. Despite it’s grandiose name, it does have both some advantages and disadvantages over the CSS3 Gradient Generator that we just looked at (making its ultimate-ness questionable).

Another CSS gradient generator, based on the familiar UI of Photoshop

Self-styled as a Photoshop-like generator, this little tool does take UI cues from Adobe’s flagship application. Most specifically, this comes in the form of the gradient slider, where you can select the individual points within the gradient and adjust the colour, slide them back and forth to change their position and even just click to create new points within the gradient. If you are at all familiar with Photoshop, these controls will seem very natural to you, as will the colour picker window.

Interestingly, though, the colour picker does flip the controls for saturation and hue, with the saturation being controlled by the vertical slider to the right of the colour window, and hue being controlled by the x-axis of the colour window itself. In Photoshop, it is the other way around. Also, as much as I like this tool, it could definitely benefit from a one-click copy function.

CSS Tricks Button Maker

When it comes to the world of CSS, Chris Coyier is the man. He produces all kinds of insanely awesome stuff over at CSS Tricks, and this CSS Button Maker is no exception. Of all the CSS generators that we have already looked at, this one is probably the single biggest time saver if you are looking to style your buttons entirely with CSS.

CSS Trickster Chris Coyier's button generator makes creating slick CSS buttons a breeze

With a wide range of controls that allow you to define the size, padding, border radius, gradient, background, border and :hover and :active states, this generator is a powerful little tool to help you create awesome looking button styles to integrate into your website quickly and easily.

I actually used it just this past week and was more than happy with the results. I did do a couple of minor tweaks to the generated code, but using the generator definitely saved me a ton of time, and I was very happy to see that it degrades pretty nicely in older browsers too!

Typography

I love typography. You might even say that I obsess over it. As I was doing the redesign of this blog back in the summer, I spent hours and hours and hours pouring over different typefaces. So, it should come as no surprise that I have a couple of typography-related tools to share!

Baseline CSS

You’ve probably heard it said before, but it bears repeating—typography is not about picking a cool font. Yes, typeface selection is an important first step, but there are all kinds of other choices that need to be made, like leading (line spacing) and tracking (letter spacing). One important consideration that doesn’t get a lot of attention on the web is baseline alignment. Baseline CSS is a framework that works to solve this particular problem.

An awesome CSS framework for bringing a typographic baseline grid to your web designs

It many ways, it works almost like a reset stylesheet, except that instead of just resetting all the borders and padding and so forth, it actually sets the basic rendering of all the HTML elements to align with each other according to the “defined” baseline. Of course, the baseline itself is theoretical, and actually uses font-sizes, line heights and relative positioning to actually control the alignment, since there is no native baseline CSS property (though wouldn’t that be cool?)

It probably isn’t needed for every site out there, but for a site that uses a lot of text this framework could be a huge asset.

TypeTester

Ever wanted to be able to compare several different typefaces on a web site at the same time? To do this manually would require a lot of work, repeating elements, setting styles, reviewing, resetting styles and so forth. Well, TypeTester is an awesome tool that can do most of the heavy lifting for you.

Type tester is an awesome tool for testing and comparing different typographic stylings and seeing how they render on the web

Basically, you define your sample text, and then have three columns, each containing the same block of text, but each controlled with different options. This means you can look at the text in the same typeface, but at three different sizes, or with three different leadings or colours. You can compare the same text at the same size, but with different typefaces. With powerful controls, the combinations for testing are virtually limitless!

Each column also renders the text in regular, bold, italic and bold-italic weights/styles, as well as in mixed case, upper case and small caps, giving you plenty of options to compare.

In terms of fonts that are available, well there is a list of safe fonts, of default Windows fonts, of default Mac fonts, default Vista fonts and Google fonts. It also says that you can choose your own (providing a list of all your installed fonts), but this doesn’t seem to work quite perfectly (I expect this has something to do with different formats). Still, there are a ton of different options for you to play with.

Oh, and as if all that’s not enough, when you find the perfect type settings, you can also grab the appropriate CSS. Nice!

Other Tools

To end this list off, I have two miscellaneous tools. They don’t really fit together in any distinct category, but I still think that they are all pretty awesome and hope that you can get some use out of them.

Favicon.cc

Sticking with the generator theme for now, we have Favicon.cc. Favicons (those little icons that appear in the status bar and in browser tabs to identify a site) are a small but important consideration when it comes to usability. This tool is a quick and easy way to generate your own favicon from an existing image.

A super simpe online tool for the quick (or not so quick) creation of a favicon for your site

All you have to do is upload an existing image (square works best) and this little app will scale it down to a standard 16 x 16 format. That’s not very big, so I would recommend against using anything overly detailed. Remember this is an icon, not a photo. For those who may be feeling extra adventurous, the app will also allow you to create your own icon from scratch, by defining the colours of each point on the 256 pixel grid. Or, you can use this to make slight tweaks the an icon generated from an uploaded picture.

When you’re done, you just download the .ico file and drop it into the root of your webserver. It’s a fast and easy way to create favicon files.

JSONLint

Last on the list today, we have an awesome and useful JSON validator. I’ve been working with JSON a lot over the past several weeks, and this little tool has been an invaluable resource for me.

Working with JSON? This awesome little validator is a super useful tool for validating and debugging your code

Basically, like most validators, you can just copy your JSON code and paste it into the applications texteara. Then, press the Validate button and in a flash, you’ll be told if your code is valid or not. If it’s not, you’ll get some reasonably descriptive error messages to help you track down the problem and resolve it. I don’t even know how much debugging time this tool has saved me, especially when first learning the ins and outs of JSON.

Also, one hidden feature of this one is that you can just paste a URL instead of actual code. In this case, the app will go out and scrape the JSON from the page and try validating that instead.

Conclusion

Again, like my earlier post, this list is not an exhaustive roundup of all the different resources that are out there on the web. There are all kinds of other awesome apps and tools for us to find and get excited about. So who knows, maybe in another four months I’ll have yet another list of awesome tools to help make our design and development work easier and more streamlined.

What about you? What are some of your favorite resources and web apps that make your work as a designer or developer go more easily? Please feel free to share them!

Exclusive Content

To thank you for subscribing to my feed, I am including exclusive, feed-only content for you at the bottom of each post!

Current Freebie Code - 7ev165dd

CSS is a remarkable technology, capable of doing things that I wouldn’t have even dreamed of when I was first introduced to it. And, with added support for rounded corners, box shadows, text shadows, rotation and a wide range of other possibilities, web designers and developers can accomplish all sorts of amazing things when it comes to applying a design to a website.

But are we starting to take things too far?

The design community is awash with all kinds of different “CSS experiments” where people attempt to do some pretty incredible stuff (and quite often succeed). In an article I wrote for Six Revisions a couple months ago, I listed five of the experiments that I found really interesting:

• CSS3 Transforms & @font-face Experiment
• CSS Posters
• Pure CSS Line Graph
• CSS3 Leopard-style Stacks
• Pure CSS Twitter Fail Whale

Each of these experiments takes a different approach. Some, like the line graph, have some practical applications in the real world, while others like the CSS fail whale are completely and entirely impractical. It’s certainly interesting to know that it can be done, but that doesn’t necessarily mean that it should be done.

Let’s Be Practical

I’ve been thinking this way for a while, but it was really cemented in my mind when I recently read Faruk Ateş recent article “Pure CSS Icons: Make The Madness Stop,” which I picked up on from a short post over on Think Vitamin. In his article, Ateş notes that “some people have started experimenting with CSS as a ‘design tool’ and it suddenly hit upon a large audience.” He also writes:

how usable are these snippets of CSS and markup, really? Is it easy to plug them into your website as you’re designing it? No. Is it easy to plug them into your website as you’re developing it? No. Is it easy to adjust them once they have been integrated into your website? No, no, no!

I have to agree wholeheartedly with this. Before this week, I’d looked at a bunch of the CSS experiments out there, and occasionally appreciated some of what they manage to do, but i had never really taken the time to examine the actual styles themselves. So, I took a gander at the code for these CSS social networking buttons:

Social media icons created entirely with CSS

Just as I expected, there are lines and lines of different styles, all just to create one icon. Is it impressive? Yes. Creative? Certainly. But it’s just not practical. This is also not an easy way to create icons. It probably takes long hours of careful consideration and experimentation to create these kind of graphics. I could create similar icons in Photoshop in less than an hour, and they would probably look better too (smoother, better anti-aliasing).

Finally, as Ateş clearly notes, the whole concept of maintenance becomes problematic. Adjusting an icon should be about moving pixels, not about changing CSS rules. It just screams at me as being the epitome of impracticality.

Of course, it should be noted that Nicolas Gallagher, the creator of the above cited icons does make note that “CSS is not necessarily the most appropriate tool for this kind of thing” (again, cited by Ateş).

HTTP Requests?

While Gallagher’s icons are presented and framed mostly as an experiment, there is another set called “Peculiar” which is actually available for sale. Yes, that’s right, they are now selling CSS icons – and at $25 for just 45 icons, the price seems a little steep too. Here is the preview of the icon pack:

These icons are created entirely using CSS

Honestly, I like the look of these icons. They are small, elegant and beautifully wroght, and so from a craftsman’s perspective, I tip my hat to Lucian Marin for his fine design work.

However, in the preamble to the Peculiar site, he writes “It was created for sites and web applications that depend on fewer HTTP requests as possible or don’t need to use any image at all.” Now, I understand the need to cut down on HTTP requests to improve the overall responsiveness of and load times of our sites. Really, I get it.

But, before everyone starts running out and buying up CSS icons left, right and center, I just have to ask: is one more request really going to make that much of a difference? Because all you need is one. A single, well crafted CSS sprite can contain all of these icons, in multiple hover states if you need them too. Then, all your styling is just a matter of background positioning.

Also, I have to wonder how much bandwidth difference there would be. I’m not about to fork out $25 to download icons that I’ll never use, so I’m not sure how much styling there is involved with these little beauties. Based on what I saw from the Gallagher example though, I would imagine it would be a fair bit. Even minified, it’s probably still going to be a significant amount of data, and with the really minimal amount of colour data that would be involved with creating a CSS sprite of these icons, I just don’t feel that one extra HTTP request and a few extra bytes of information is really worth the hassle.

In the Spirit of Semantics

I’ll admit that I’m occasionally as guilty as the next guy for occasionally adding in an extra
<div> or <span> to be able to achieve something visually on a site that I can’t seem to figure out how to do otherwise (or at least can’t figure out how to do efficiently). I try to avoid it, though, and the last thing I want to do is to start filling up my code with all sorts of extra tags to help build CSS icons.

That’s just not semantic coding.

Now, looking at the Gallagher example, he does an excellent job of keeping his markup beautifully clean, relying heavily on the :before and :after psuedo-classes for apply his styling. So, from an HTML perspective, I would have to say this is semantic (though I’m sure that many other examples utilize some excessive HTML elements, just for the purposes of providing “hooks” for their styles).

That being said, semantics is a discipline all about of meaning, and semantic HTML is about writing code that supports the meaning of a document, while using CSS to dictate the visual rules by which that content is displayed. CSS is about taking the form and structure of the document and representing it in the browser. Or, to put it another way, it’s about facilitating the graphical presentation of content.

It’s not about creating the graphics themselves.

That’s the realm of vector-based and/or pixel crunching software like Photoshop, Fireworks, Illustrator and so on. And so, it seems to me that using CSS to create graphical elements like icons goes against the very purpose for which the technology was ultimately created. By doing so, it deviates from its own core meaning, and therefore strikes me as unsemantic, at the very least in spirit if not in a strictly literal sense.

Tables Again?

Though it doesn’t form a perfect parallel, in some ways this issue of CSS icons (or other graphics) can be compared to using tables for layout. There are a few key reasons why tables for layout is a bad idea:

1. Bloat – All the necessary table tags fill up your HTML, making it big and ugly and an absolute nightmare to manage. I used to use tables back in the day, and I hated it for this very reason
2. Inflexible – Tables are rigid, unmoving things, and getting them to do anything even remotely complex was a huge pain. Empty cells and complex ROWSPAN and COLSPAN properties can only take you so far without becoming entirely unmanageble.
3. Purpose – Most of all, we have to recognize that it just wasn’t what tables were designed to do. Tables exist in HTML for the purpose of presenting tabular data, not for creating layouts. Yes, you can, create layouts with them. Yes, with a bit (or a lot) of effort, you can bend them to your will, but it’s just not what they were created to do.

If you’ve been around the web design and devlopment industry for very long, you probably already know how much of a faux pas table-based design is considered. Well, when it comes to CSS icons, consider these thoughts:

1. Bloat – All the necessary CSS declarations will really bloat up your style sheets, making them an absolute nightmare to manage. Wait, didn’t I just write those same words? Also, depending on how the icons are achieved, you might find your HTML bloating up with extra elements too.
2. Inflexible – Again I admit that people have done some really incredible things with CSS, but compared with a real graphics program, CSS generated graphics are incredibly limited in what they can do.
3. Purpose – As we’ve already discussed at some length, CSS wasn’t designed as a tool for creating graphics, despite the fact that people are able to do some pretty amazing things with them, like the Peculiar and social media icons we’ve already looked at. Impressive? Yes. The right tool? No.

Obviously, there are some key differences between CSS icons and using tables as a layout tool, but the similarities in these three areas are somewhat startling. I also think it works as a really excellent illustration of something that I pointed out back at the beginning of this article: that just because something can be done doesn’t mean that it should be done.

Conclusion

Of course all of this is my personal opinion, and I leave the final decesion up to you. If you think that CSS icons make sense for you to use in your own work, then feel free to take advantage of them. I’m also not trying to talk Marin out of making any money from his Peculiar icon set. If he can manage it, then more power to him.

This article was simply the presentation of my own thoughts on why I don’t thinks that CSS icons (or any other, similar graphic) are really a viable solution for displaying graphics on the web. I hope my points were clear enough, and that they provided some food for thought on this particular subject.

What about you? How do you feel about the idea if CSS icons? Do you think they are viable? Would you ever consider implementing them into one of your own websites?I’d love to hear your thoughts on this.

Note: Main article image supplied via ShutterStock

Exclusive Content

To thank you for subscribing to my feed, I am including exclusive, feed-only content for you at the bottom of each post!

Current Freebie Code - 7ev165dd

As a designer, writer, husband and father (among other things), my life is pretty full and I absolutely love pretty much anything that can save me time. This is especially true when doing my work as a designer. Over the years, I’ve come across a number of awesome little websites and web apps, created by brilliantly helpful people to make my life easier – and yours too.

So, in this article, I’ve decided to share some of my favorite online resources. This isn’t to say that they are necessarily the best or the most powerful. They’re just the ones that I like to use. Some of them are generators of sorts, while others offer customizable and downloadable content that you can use in your own work.

Grids

I like using grids when I build websites, and the one I use most often is probably the 960 grid system, which I wrote about in one of my first posts on this blog. Not only does the grid allow me to create a beautiful, proportionate structure for my designs, it also provides an excellent and consistent framework. This, in turn, means that I can build concepts and prototypes faster than I could if I was coding the entire thing from scratch.

I’ve found this to be especially useful in my last few projects, in which I did a lot more of the design work in the browser itself, rather than mocking it all up in Photoshop.

Anyhow, while the plain-jane 960 grid worked well enough for me for my first few grid-based sites, I’ve been finding more and more that I want to tweak the basic parameters of the grid. For instance, I may want to increase the size of the gutter between columns, or change the number of columns from the standard 12, 16 or 24. Well, there are some awesome grid generator tools out there that I’ve used to do this.

Grid System Generator

The Grid System Generator is a great tool. Personally, I was first drawn to it because it could allow me to customize the standard 960.gs that I had become so accustomed to using. It allows me to specify different widths for the document, change the number of columns, and tweak the spacing of the gutter (through left and right margins). Yet, while CSS is adjusted for my settings, the basic syntax remains the same!

Generate custom CSS grids based on four different frameworks

The Grid System Generator isn’t a one-system app, though. You can also generate custom grid frameworks based on the Golden Grid, 1KB Grid and Simple Grid systems, making it a truly flexible tool with appeal and practical application for a wide range of designers and developers.

Tiny Fluid Grid

As a matter of personal preference when it comes to coding, I tend to prefer working with fixed-width layouts. It just tends to match the way I think – mostly in exact pixel widths. However, on one website that I was designing recently, the background image was extremely important for my client, and because I was using a base width of 960 pixels, this background became somewhat obscured on displays set to 1024 pixels in width.

So, I needed a way to shrink the content area down for smaller displays, while still maintaining the default width for larger displays. In other words, I needed a fluid grid. I could probably have done the math myself and converted the existing, static grid to a fluid one, but fortunately I had just discovered the Tiny Fluid Grid generator a few days earlier!

Generate a custom fluid grid based on the 1KB Grid system

This little web app will generate a fluid grid – based on the 1KB Grid System – and allows you to select the number of columns, the percentage width of the gutter, and (most importantly) the minimum and maximum widths of the grid itself. The syntax is pretty similar to the 960.gs, so I only had to make one slight tweak to the CSS to apply the grid to the existing site, though I had some other CSS trickery to do to force the grid to shrink down when I wanted it to.

Regardless, Tiny Fluid Grid was a real life saver on that project. It also has an awesome GUI. While most other generators just accept numeric input, this one has some really slick sliders that just make it fun to play with!

Typography

Obviously, typography is a hugely important aspect of any design, and the web is no exception. With the increasingly broad browser support for @font-face, and with font replacement services like TypeKit, designers are finding more and more freedom to do incredible things with typography on the web.

It has also paved the way for some really awesome typography-based tools on the web.

Font Squirrel

Looking to add some flair to your website, and move away from standard, web-safe fonts? Using @font-face is a great way to do this, but there are all kinds of licensing issues to be considered before you go uploading fonts to your server. There are also conversions to be made to account for the widest possible browser support.

Font Squirrel helps alleviate some of these issues.

Find fonts and download kits for @font-face integration

It is basically a repository of different fonts which, based on Font Squirrel’s interpretation of their licensing, are freely available to use on your websites. That’s pretty awesome. But it gets even better. The site also allows you to download @font-face kits, which include the font files along with a complete stylesheet that you can easily integrate into your own code.

It has made finding and integrating new fonts into my website an absolute dream.

What the Font?

Ever seen a cool font and wondered what it was? If it was from a famous image or logo, you may be able to find the answer on a forum somewhere (I have before), but that’s not always going to work for everyone. Well, the folks at MyFonts.com have developed a handy little app that you can use to try to satisfy your curiosity. Meet WhatTheFont.

Use this tool to identify cool fonts

Basically, you take a screenshot or photograph of some typography – preferably something unique and well spaced – and upload it to the site. It will then try to decipher the different characters and ask you to confirm that it identified the letters properly. One you’ve done that, the app will go out and try to determine what the font is.

Obviously, it’s not perfect, and the results are going to depend a great deal on the quality of the original source image. From what I can tell, the results also appear to be from MyFont’s own library (which really makes sense, all things considered). Still, it’s a useful little tool that’s fun to play with, and which can potentially introduce you to some awesome new typefaces. I have an app for my iPhone too!

Icons

I love icons. I love finding them, designing them and finding interesting ways of integrating them into my work. A few months ago, I also wrote a series about using icons on the web. All that being said, there are a few really awesome icon resources out there.

Iconza

Iconza is a free icon set fused together with a customizable generator. Basically, it is a set of 112 awesome, monochromatic icons that you can download and use in your designs (with attribution). All on its own, that’s pretty awesome. But it gets better.

Download this icon set with customized size and colour

The Iconza website actually allows for a reasonably broad range of customization options. There are 15 different colour options, including five shades ranging from black, to grey, to white. There are also three different sizes – 32×32, 24×24 and 16×16, and even just a cursory glance will reveal that the icons are optimized for quality at each size, rather than just scaled down. Lastly, this little web app provides an RGB colour selector for setting the background colour of the icons.

Feedicons.com

There is no shortage of RSS icons out there on the web, but if you’re looking for a nice simple solution for your visual RSS needs, then Feedicons.com could be a great solution for you.

Free and simple RSS icons

There are a few different download options, such as a 2 icon pack of 28×28 and 14×14 (the smaller one does look a bit off though). There is also a tiny pack of coloured 12×12 icons. The big one, however, is the developer pack, which contains icons ranging from 12×12 to 128×128, in all kinds of different image formats including editable vectors. This allows you all kinds of flexibility to customize the icons.

iconSweets

Monochromatic icons are probably some of the most useful, in terms of being able to easily integrate them into so many different types of designs, and there are so many different places to find and download such icons. One of my recent favorites is the iconSweet set, by YummyGum.

60 simple and beautiful monochrome icons

This pack contains 60 beautifully designed vector icons that appear to be designed primarily for use in your next iPhone or iPad app, but which could easily also become a focal point of your next web design too. Again, the fact that they are vector based makes them extremely customizable, which is always a bonus for any designer.

Admittedly, I also just really love the design of the website, which is part of the reason that I chose to include this particular set over some of the many others. The pink and grey colour palette and sliding images within the balloon are all really slick. That being said, however, there are lots of other similar sets available out there. To find more, check out this recent article of at SpyreStudios: 40 Minimalist Icon, Symbol & Pictogram Sets.

Other Graphics

As great as icons are, however, they are not the be all and end all of supporting graphics, and there a few other cool graphic-generating web apps that I really dig.

Placehold.it

When building prototypes and mockups of websites, I often don’t have actual images that stick in yet, and need to create a placeholder image. Traditionally, what I used to do was to create a single pixel image and then adjust the properties to stretch it out the the required size. That worked pretty well, but thanks to a recent tweet from SwissMiss, I discovered this incredibly simple and useful little site called Placehold.it.

Grab simple placeholder images of any size

Basically, this simple web app does one thing – it generates greyscale placeholder images of absolutely any size, all with a really simple, URL based syntax that is super easy to remember. All you have to do is insert the appropriate URL into your code, and the app will serve up a placeholder image for you.

It may not seem like a huge deal, but I’m pretty excited about this recent find. I can see it saving me a ton of time in future projects.

StripeMania

Stripes don’t seem to quite as popular in web design as they were two or three years ago, but they’re still something that will never really go out of style entirely. Every once in a while, I find myself needing some stripes for this or that – and not always just for on the web.

StripeMania is an awesome little web app that I’ve blogged about before in my article “17 Useful Pattern Resources“, which I always return to when I need some kind of repeating stripe pattern.

Stripemania

For an app that just generates stripes – something that might seem relatively simple – there are a surprising number of options and controls on this one. You can adjust the stripe width, the spacing width, the orientation, the colours of the stripes and the background and so forth. You can even set a gradient. All this makes for a powerful little tool with almost limitless customization.

AjaxLoad

If your websites are loading any kind of dynamic data through either AJAX or some other custom methodology, chances are that you’re going to want to include some sort of animated graphic, in order to indicate to the user that the data is actually loading. The AjaxLoad site is an awesome solution for this need.

AjaxLoad allows you to generate custom loading animations in GIF format

You can select from over 30 different animated graphics, select the foreground colour and the background colour, then generate and download an animated GIF based on your choices. If you want, you can even make the background transparent, though of course you’ll have to take into consideration the natural drawbacks of GIF transparency.

With the broad range of animations and the extensive customization, this little resource is a great one to keep in your bookmarks!

Conclusion

Obviously, this list is not an exhaustive roundup of all the different resources that are out there on the web. Such a list would be much, much longer and would include all kinds of goodies and awesomeness that I didn’t have the chance to include here. As I stated in the opening, these are merely some of my favorite, bookmarked resources, which I thought might be worth sharing.

What about you? What are some of your favorite resources and web apps that make your work as a designer or developer go more easily? Please feel free to share them!

Exclusive Content

To thank you for subscribing to my feed, I am including exclusive, feed-only content for you at the bottom of each post!

Current Freebie Code - 7ev165dd

Years ago, as I was venturing into the unknown world of high school and some semblance of teenage angst, Gavin Rossdale sang the line “it’s the little things that kill”. That chorus played frequently through my stereo and the headphones of my good old Sony DiscMan. Even today, I find the odd occasion to listen to it that album.

Well, the “little things” are exactly what I want to talk about today.

It's The Little Things

From my perspective, the little things in design are all those finer details, which, though they may often go unnoticed by the most non-designers, still work to complete a design and give it that professional polish that separates the attractive from the truly beautiful.

Let’s take a look at some examples of the little things that make some of my favorite designs so awesome.

Astheria’s Subtle, Geometric Pattern

Astheria is a really great site that offers interesting and insightful articles and blog posts. It has a really nice, minimal design that pays very close attention to white space and typography. What I would like to draw your attention to, however, is the fine pattern that runs down the right hand side.

Astheria

Because the site’s background is entirely white, and because it is aligned to the left side of the screen, the pattern of these repeating plus signs really helps establish the visual boundary of the content area. It does so in a unique way, however, which keeps very nicely with the site’s overall, subtle design.

It’s a small touch, but really helps complete and balance the site.

FINCH’s Awesome Typography

Much like Astheria, FINCH also works with a complete white background and a very minimalist design. However, what I would like to focus on here is the attention paid to the typography. As designers, we can add so much meaning to a site just through the finer details of type. Just look at this one section of the site:

FINCH

In just this one small area, we can count five different typographical treatments on the text. There is the cursive type in the pastel circles, which work as column headers. Then there’s the small-cap subtitles, set in a light grey. Article titles are set in regular case, but slightly larger and in an almost-but-not-quite black, while the publisher of each articles is set in a smaller, italicized and lighter grey variant. Finally, the paragraph text in the leftmost column, which is similar to the publisher text, but slightly larger.

Through all these variants, a great deal of meaning is conveyed. A visual hierarchy is established, which reveals to the reader the relative importance of each segment of content, allowing for quick and easy scanning of the page. Yet, at the same time, it also maintains a cohesive beauty which is neither fragmented not cluttered.

Again, in the final product these typographical choices may seem to be a tiny detail, but they have an incredibly important bearing on the final design!

The Design Cubicle’s Subtle Line Work

Brian Hoff, the creator and designer behind the popular Design Cubicle blog, does many things well. Typography is one example. Killer logos are another. He also has a great eye for the little things, as can be exemplified by the recent redesign of his blog.

The Design Cubicle

This is probably one of my favorite redesigns of all time, since it took the Design Cubicle from something that looked very “design-bloggy” and transformed it into a unique and beautiful site that is always a joy to look upon (and to read).

Notice all the fine detail that we can see in this shot – the diagonal line work that in the logo is also echoed very subtly through the header portion of the wide, red margins (you can also see it in the footer). The cross hatching up the sides of the content area also lends a lot to the site, and though it’s a small and subtle detail, it certainly becomes a very distinctive feature of the design.

Darren Hoyt’s Background and Typography

Darren Hoyt’s site features some more of what we have already looked at in some of the previous examples, but allows us to see it working together in this one, simple screenshot:

Darren Hoyt

Like in the Design Cubicle design, we can see a really subtle cross-hatch pattern, this time worked into the background, adding a really nice visual flair to the overall design. What you obviously can’t see in this shot, however, is the equally subtle fading that exists, or the fact that the background is actually locked in place (meaning it doesn’t move when you scroll).

Combine this with another example of really lovely typography (though very different from that which we saw on FINCH), and we have still more evidence of the incredible power of the little details.

Squared Eye’s Precision Design

The bold statement plastered across the top of the Squared Eye site is simple. They claim to have a “monstrous appetite for the tiniest details.” This, of course, fits right in with the theme of this article, and from what I can see on the site itself, the claim appears to be justified! There is interesting line work and wonderful typography, but what I would like to focus on is the pin point precision.

Squared Eye

The little arrow that you see in this screenshot is the back arrow for a sliding panel box that showcases recent design work. However, notice that this same arrow is also connected to a horizontal rule, which divides the blurb above it from the list of clients below.

Though subtle, this kind of effect ultimately requires expert execution, in terms of both the copy and the design. If it’s even just a little bit off, that part of the design could appear broken or unfinished.

Again, it’s a matter of small details paying a large role.

31three’s

The last example that I would like to showcase is the 31three site. Like pretty much all of our examples, we could talk about the typography again, which is really stunning, but what I want to highlight is how the designer (Jesse Bennett-Chamberlain) actually makes use of a number of interesting transparency effects.

31three

In this screenshot, you will notice how the porthole-like circles are actually framed by a thick, transparent ring, which in turn picks up the colour changing division that runs horizontally across the screen. This same division can also be seen, though much more faintly, through the bottle on the right of the screenshot.

While neither of these effects are particularly difficult to achieve and can be done right in a graphics program like Photoshop, they still point to the designer’s keen attention to detail, and really help to pull the entire design together.

A Problem with the Little Things

Now, as important as paying close attention to these little things can be, and as effective as they are at really helping to improve on the overall quality of a design, we still need to be aware of the very real danger of getting too caught up in the little things. Sometimes, I think, designers (myself included) can become almost obsessive about these tiny details, and can whittle away hours working on them.

Always do your best to avoid this.

The little details are important, and you should always give them their due consideration. Just be careful to not obsess too much. The attention you pay to these details very likely points to a certain maturity as a designer, but the ability to consider them, make appropriate design decisions and move on demonstrates an even higher level of maturity that I think we should all ultimately strive for.

The last thing you want is for a project to get bogged down in a sea of tiny details. After all, if we’re not attentive in this area, Gavin’s raspy, grunge refrain could become an unpleasant reality in which the little things really do kill.

You’re turn to talk! Do you have any other examples of sites that do a really great job at considering the little things? What about your own work? Do you consider these kinds of tiny details? Do you find yourself getting caught up in them? Let’s hear your thoughts!

Exclusive Content

To thank you for subscribing to my feed, I am including exclusive, feed-only content for you at the bottom of each post!

Current Freebie Code - 7ev165dd

Usability is definitely a big topic in the world of web design and development. There are entire sites, like UX Booth, dedicated to the topic (and the related concept of user experience). Still, despite the plethora of information out there, I am always amazed by how many sites out there really annoy me through basic usability faux-pas, or at least by failing to provide me with certain elements that I have come to expect and look for.

5 Basic Usability Breakdowns You Want to Avoid

So, in this article, I just want to focus on five really basic usability “breakdowns”, based on my own recent browsing and professional experience. There’s nothing deep, dark or mysterious about any of this either. There is no extensive usability theory or generalized insights into the minds of your users. This article is also neither exhaustive nor entirely authoritative. It simply lists some simple and basic fundamentals that I think that every designer and developer should follow – yet which it seems that so many don’t.

Make Me Guess Menus

I think that, sometimes, designers just try to get to clever with their navigation, and in this attempt lose all connection with that fact that people actually be able to use the site. From this perspective, if there is one thing that drives me up the wall when I come to a new site, it’s having to actually guess at using the menu.

Make Me Guess Navigation

I’m sure you know what I’m talking about – those sites where there is no clear indication as to where each menu item will direct you. And that, of course is assuming that you can even find the menu. These are the sorts of sites where you actually have to hover over some object or element in order to make the menu item appear.

If we take the time to really think about it, I don’t think it takes all that much insight to realize that this does nothing but hurt the usability. Here I am, either as a new user of a particular site. I arrive – either to the homepage or through some other entry point – and decide that I want to navigate somewhere else. Yet, before I can figure out where I can go (let alone how to actually get there), I have to play this navigation guessing game, rolling over items just to figure out what they are.

As a user, it’s an incredibly frustrating experience, which does nothing to enamour me to a particular site, or the company that stands behind it.

The solution, of course, is simple. Always make your navigation extremely clear and explicit, using simple text, or at the very least readily identifiable icons that won’t keep users guessing.

Glitchy Drop Downs

While the navigation guessing game can be frustrating, some drop down menus that I’ve come across are just plain unusable, usually due to some sort of coding issue that creates a glitch in the interface. The most common example that I come across is a menu in which the drop down items become totally inaccessible due to the way that they are styled.

Basically, the problem goes like this: I hover over a menu item. As expected, several other options appear in a dropdown sub menu. Deciding that I would like to view one of the items in that submenu, I quickly move my cursor towards it. However, before I can actually click on the item that I want, the entire submenu vanishes in a puff of CSS/box model buggy-ness.

Glitchy Drop Downs

Of course, being the determined user, I try it a few more times (knowing full well that it won’t work), before sighing in frustration. Now, if I really want to access the information, I might try bringing up the page in a different browser, but how many users to you really thing are going to be that dedicated? Probably not very many.

From what I can see from most of these sites, the problem has to do with a breakdown within the display of the menu, usually surrounding hovers and margins. For whatever reason, the submenu’s top margin is effected somehow, causing a space between it an the main navigational element. When this happens, the submenu becomes completely inaccessible. This is because, in order to move from the main menu to the submenu, the user’s cursor has to bridge the gap. The moment this happens, the hover state is to longer true, and the submenu vanishes.

More often than not, this issue is probably the result of less-than-extensive testing for cross-browser compatibility, and could be remedied by more extensive testing.

Note: I have recently become aware of some issues that have developed with my own site in some browsers. I am currently working towards ironing these out in my upcoming redesign.

Buried Contact Page

This is something that I see all the time: a contact page that is buried somewhere on the site. Let’s be straightforward and to the point about this one – if you want your users (or customers) to contract you through your website, then make your contact page visible and accessible from every single page on your website.

I’ve frequently seen sites where the contact page is buried in a submenu – possibly under an “about” section or some other less logical area. This forces the user to work harder to find it.

Buried Contact Pag

This is not a good thing! Please don’t fall into the engagement trap, attempting to justify this usability faux pas under the premise that this will help “engage” your users. Yes, users want to engage with your website, but they want to do it through your content. They don’t want to have to spend extra time just trying to figure out how to find or access that content – in this case the contact page.

The more a user has to work at something, the less likely they are to follow through with a particular action.

So, unless you don’t want your users contacting you (which is another issue altogether), make your contract page visible and accessible throughout your website. I recommend including it in your main navigation. Some sites relegate this to a secondary menu at the bottom of the page. While this is better than nothing, I still advise against it, since it reduces the overall visibility of the page.

Remember: more work for the user translates into less followthrough.

No Favicon or Title

For those (few) who don’t know, a favicon is that little icon that appears on each tab in your browser. It’s a customizable feature that has been available for quite some time now, and though it may not seem like a really big deal, failing to include a favicon on a site is one minor usability issues that can really drive me up the wall.

No Favicon or Title

Allow me to explain.

A number of year ago now, I started using Firefox. I actually discovered the browser while in university, where a few friends introduced it to me. There were a number of things that I really liked about it, not the least of which was the ability to maintain multiple pages in the same window using tabs. That was pretty cutting edge at the time and blew my mind. I quickly grew accustomed to this kind of browsing and these days (in which all major browsers support tabbed browsing), it is not unusual for me to have upwards of ten or twelve pages open in the same window at the same time.

The favicon for each page actually appears on the individual tabs, too, offering a quick and visual way of recognize which page is which and being able to click from tab to tab. That is, of course, as long as the pages are using favicons. Sites that aren’t become more difficult to pick out quickly, making the browsing experience less enjoyable – especially if you happen to have multiple favicon-less pages open at the same time.

A related, and even more dire (though less frequent), phenomenon is that of pages not including anything in the <title> tag, or which neglect to change the contents from “Untitled Page”. This has much the same effect as a lack of a favicon, in that it simply fails to properly identify the page.

It’s also a complete SEO blunder. Now, I’m no SEO “guru” (if such a thing even exists), but I have found that a good title is probably one of the most effective ways of building recognition on search engines, and any page that lacks this information is doing nothing but hurting its visibility on the search engine front.

That being said, then, in today’s world of search engine optimization and multi tabbed browsing, you always want to provide both a meaningful title and a recognizable favicon to help users and search engines find and recognize your site.

Breadcrumb Only Navigation

The last usability issue that I want to touch on is something that I myself once implemented on a site, and which really didn’t work out – the use of breadcrumbs as the only real form of navigation.

At the time, it seemed like a good idea. It would allow the user to know exactly where in the site they were at any given moment, and would help clean up the page by minimizing the number of menu items that a visitor would have to deal with at any given moment. I thought it was brilliant.

It turned out to be a disaster.

A technique that was mean to help users find and maintain their bearings as they navigated the site actually left them feeling lost and confused. They might be able to see where they were, but they still had significant challenges trying to figure out how to get anywhere else. The breadcrumb trail did actually have some drop down navigation functionality, but it was foreign and unfamiliar to users and they simply did not embrace it.

A subsequent redesign saw the navigation return to a more complete and more traditional navigation system.

Breadcrumb Only Navigation

In retrospect, that experience taught me something very important about breadcrumbs – they are seen and understood as being primarily linear. Like a chain, one element links to directly to another, and the navigation allows the user to move back up that chain. However, though it may be one of the most obvious statements of the century, a website is more like a web (see? Obvious). Everything is interconnected, and a good navigation system should reflect this, allowing users to move from one section to another with relative ease.

Am I saying that breadcrumbs are bad? Not at all. They can be an incredibly useful navigational enhancement. What I am saying is that breadcrumbs should not make up the only (or even the primary) form of navigation.

Conclusion

So there you have it – five different usability breakdowns that you will want to avoid. As I’ve already mentioned, this list is neither exhaustive nor authoratative. There are many, many more usability issues that we could talk about, and which have probably been discussed on other websites. These are simply five key ones that came to my mind when thinking about my own recent browsing and professional experience.

What do you guys think? Do you agree with me about these importance of avoiding these usability issues? Do you have any experience with them? Are there any other issues that you want to bring up? Have your say!

Exclusive Content

To thank you for subscribing to my feed, I am including exclusive, feed-only content for you at the bottom of each post!

Current Freebie Code - 7ev165dd

What a week! I am still kind of reeling from the devastation that occurred down in Haiti, which actually hits very close to home for me. I’ve already started doing some design work to help drum up funds for the relief work. I’ll be posting more on that, and my own personal connection to Haiti later.

I’ve also been extremely busy with client projects – specifically, I’ve been working on a couple of websites, both of which are approaching completion. I’ll also be posting about those once they’re all done and have gone live.

All told, that’s why it’s been a bit quiet here on the Echo Enduring Blog this week. I do have a long line of content lined up though. It’s just a matter of getting in written, polished and posted. Hopefully you will see more of that over the coming weeks!

Now on to this week’s Echoes!

Logo – Living Grace Lutheran Church

It’s always great to see a well designed church logo that moves beyond the simple cliches that so many of them seem to use – a dove, a simple cross, a globe. This week’s logo is just such an example!

Living Grace Lutheran Church

Okay, so the logo is not entirely devoid of the cross image, but I’ll cut the designer some slack. The cross is the quintessential symbol of Christianity, so it only makes sense to have it reflected in a church logo. What I like about this one, though, is that the designer didn’t just fall back into the same old version of the cross. Actually, the cross shape is almost secondary. The first thing most people will see when they look at this is the tree.

There is actually a scriptural basis for the tree metaphor. In the book of Acts, the apostle Peter refers to the cross as a tree, and throughout the Gospels, Jesus presents several parables in which he talks about trees. I won’t get into the specifics here, but the image of the tree works very well for a Church.

It also does a nice job of dividing the background of the logo into four quadrants, which are coloured differently, to suggest the four different seasons. This suggests that the church itself is a church for all seasons, or, if reading the metaphor a bit more deeply, for all ages.

Art – Chaos

Even though I got a lot of my inner geekiness out in my “If Photoshop Was Batman, Then Illustrator Would Be…” post, there’s always room for a little bit more with me. So, when I came across this incredible painting of the Joker, I just knew I would have to feature it here in Echoes.

Chaos

I feel that the composition of this piece perfectly reflects the damaged psyche of the Joker character. The image itself is broken and distorted, just like the Joker himself. At least, we assume that the Joker is broken and distorted. It is entirely possible, however, that he is actually quite sane – and just completely evil. But that’s an entirely different can of worms.

There is something very interesting about the eyes in this one, though. They look almost calm and serene, states of being that are certainly not traditionally associated with the psyco-sociopathic clown. The make-up is also made to look more like paint, which appears to be melting off of the Joker’s face, further suggesting that the maniacal persona is exactly that, just a persona that the Joker puts on.

An interesting idea, and an awesome painting.

Tutorial – Design a Surreal Desert Scene in Photoshop

It’s been a while since I’ve featured a complex photo manipulation tutorial here on Echoes, so that’s what we will be looking at this week. The tutorial is from Tutorial 9, and provides in-depth, step by step instructions on exactly how to create a surrealistic scene using an interesting variety of different pieces of photographs.

Design a Surreal Desert Scene in Photoshop

Like most photo manipulation tutorials of this type, this one involves a lot of cutting elements out of their backgrounds, layering them over top of one another and using a variety of blending modes and other techniques to bring them all together into one cohesive looking final image. I don’t find that there’s anything really all that mysterious in this one. It makes some interesting use of levels for some colour adjustments, and does a good job of creating realistic shadows. Basically, though, it’s just a solid exercise in blending different photographic elements.

I also particularly like the techniques from the final few steps, which use some gradient maps and blending modes in order to really brighten up the image and give it that dreamy, surrealistic look. Those techniques are enough, in and of themselves, to make this a valuable tutorial.

I just have one question. Why does so much surrealistic art want to include clocks? Think Salvador Dali…

Website – Denise Chandler Website

Here’s a cool little site that came across in one of the CSS galleries that I frequent. This one has a pretty cool design, with a few interesting features.

Denise Chandler Website

For the most part, this is a minimalist site. The design elements themselves are relatively simple, and there is not a lot of excess decoration going on, and virtually no texture. Of course, the big, bold header of a question contrasts beautifully against this minimalism, giving the site immediate weight and impact from the moment it opens in the viewer’s browser window.

It’s also the first phrase of what seems to be somewhat self-effacing copy throughout the site. It’s all carefully chosen, of course, and crafted to make it seem like Denise doesn’t take herself too seriously (and she probably doesn’t). I’ve noticed that this is kind of a trend these days on designer sites. I wonder if the humour is beneficial?

The coolest part of this site has to be the bees though. The two very simply rendered little insects buzz merrily around the top of the page. This is a great example of how to give a bit of life to a static design without using flash. The bees exist simply as animated GIFs. Yes, that’s right – animated GIFs. They do still exist, and can have a purpose in the modern web beyond just advertisement banners! Very cool!

Well that’s it for this week’s Echoes. Which ones were your favorites? As always, if you know of any designs, tutorials or art that merits being included in a future post, feel free to let me know about it!

And please do keep the people of Haiti in your thoughts and prayers. Thank you.

Exclusive Content

To thank you for subscribing to my feed, I am including exclusive, feed-only content for you at the bottom of each post!

Current Freebie Code - 7ev165dd

Those of you who may have read my 25 Dark Websites and 25 Creative Footers posts may be noticing a pattern developing here. I’ve decided to do my best to stick with the whole 25 theme for these roundup articles. It’s just a nice, round manageable number, but still enough to prove valuable. I have a wide range of different ideas for these roundups, too, so be on the look out for more coming your way.

I’ve also been doing some thinking about roundups in general. I’ve seen several different posts just this past week that are complaining about how the authors’ RSS readers are getting crammed with all kinds of roundup posts – so much so that it’s getting difficult to find other, valuable content.

I guess I hadn’t really thought of that before. Most of the stuff in my reader is actually tutorial and/or freebie oriented. I see most of the roundups I visit via Twitter. Still, I certainly don’t want to be viewed as clutter, so I’m going to do my best to add extra value to these roundups with a bit of extra editorializing!

Anyhow, today I want to look at a trend that I’ve been noticing in my frequent visits to various CSS galleries. It seems that on almost every page of these galleries I see sites that are designed around green and grassy imagery. Obviously, such sites don’t actually appear on every page, but there certainly are a lot of them! They tend fall into one of two categories. Either they use a ground level view of grass as a sort of horizontal divider or feature lush rolling hills – usually vectorized and cartoony.

Here are 25 different examples of this trend.

Anna Pawelczyk

Blogsville 2009

RIPIE

TwittGround

New House Farm

Ten24Media

Acroex

BimbiSicuramente

Blossom Village Resort

CampamentoUniversiatrio

Clark Studios

Dean Oakley

Foot Steps

GeoVision

Guga

HearthCore

Jaider Morais

Juan Diego Velasco

KiddiKicks

Mint

Parcheggio

Riegos Ariel

Slim Kiwi

SPAFU Online Marketing

Yodaa

These sites come in varying degrees of effectiveness, and I am in no way trying to suggest that these are great or sensational designs (though I did weed out some of the weaker designs – pun intended). I am also not saying that they any of them are poor. This is simply a showcase. However, this collection certainly demonstrates that there is a very strong trend towards using these this kind of imagery in web design. And there are many different types of sites represented, suggesting that it is not just one particular group or industry that’s latching on to this trend.

You make also notice that these elements all tend to work pretty much the same way. The grass stretches horizontally across the screen, creating a clear and logical divider. Most of the sites listed here actually take advantage of this, using the natural break as a means of organizing their content in some form or other. It’s an interesting technique that many of these sites actually implement quite well.

Now, before you get too inspired and run off to throw a grassy divider into your next website design, let’s take a moment to think about some of the advantages and disadvantages of using this kind of imagery.

Advantages

• Position yourself as Green – The entire concept of the environment and climate change is a huge deal these days. Many people are thinking and talking about it, and this use of nice, green grass very naturally posits your site as being “green”.
• Natural Divider – We’ve already touched on the fact that that this design technique provides you with a very obvious horizontal break, which you can use to organize your content
• Open and Friendly – Grass can suggest friendliness and openness – a sort of neighborly camaraderie – and could be a useful visual element if this is the kind of image you want associated with your site or brand.

Disadvantages

• Position yourself as Green – Wait, didn’t we just mention this as an advantage? We did indeed, and while it can be beneficial, it can also work against you. Many environmentally conscious people are also very aware of what companies are doing, or not doing, and can have very strong backlash against those who try to make themselves look “green” without taking any actual steps or initiatives to helping the environment or slowing climate change. Beware of the backlash that can come from this kind of “greenwashing”, even if it’s unintentional.
• A Tired Concept? – This post alone collects 25 grassy sites, and I had several most listed when I was doing my research. I’m sure there are more than that, too. So, I think it’s pretty safe to say that this kind of imagery is pretty common out there on the web these days. As such, unless it is a perfect fit for your site, you may want to think twice about following this particular trend.
• Wrong Visual Cue? – Another possible disadvantage with this trend could be the strong associations that grass can convey. Will visitors immediately assume that the site has something to do with grass itself – perhaps a seed or fertilizer company? As designers, we always (or at least almost always) want viewers to look at something and get it right away, not have to puzzle it out on their own. If using grass (or any other design element) will obscure meaning rather than reveal it, then it’s probably not the right choice

Obviously, this is just a really cursory look at the trend of using green and grassy designs on the web, but I hope that it has been at least somewhat insightful and/or inspiring for you.

I’d love to hear you opinions! Have you ever used grass as a design element? Are there any other sites that you would like to add to this list? Are there any other advantages or disadvantages that strike you? We’d love to hear them, so feel free to drop a comment!

Exclusive Content

To thank you for subscribing to my feed, I am including exclusive, feed-only content for you at the bottom of each post!

Current Freebie Code - 7ev165dd

As you can probably tell from this website (at least in it’s current state), I am a big fan of websites with a dark colour palette. That’s what this post is all about (if you thought it was about dark as in evil, sorry about that). Working through some of my favorite CSS and Website galleries, I have compiled this collection of 25 awesome website designs, which all incorporate darker colours to some degree.

Of course, all of the sites are very different from each other, but there are a few elements that you will find repeated in many of them. First, many of the sites incorporate interesting and unique lighting effects, in a wide variety of colours. These range from evanescent swirls, to broad glows, to actual lamps shinning beams of light. I think that the darker background of these sites really lend themselves to these kinds of lighting effects, which would be either lost or much less effective on lighter backdrops.

You may also notice that many of these sites make use of texture, and in many cases, grungy texture. Again, this is probably due to the dark colours, which really lend themselves well to being textured. It adds a lot of visual interest to the design. In some cases you will also see texture combined with light, to great effect!

Anyhow, I really hope you enjoy these, and that they get your creative juices flowing!

Cleo Annex Salon

XP Codec Pack

Sub Assembly Services

Arun Pattnaik Portfolio & Blog

Miloš Zeković

Robin James Yu

Kaiser Interactive Creative Studio

Two 24 Studios

JWD Designs

Duplo Motion Graphics

Spiced Jack No 94

Matt Brett

Twenty3Design

OKB Estudio Interactivo

Sugar Rhyme

Design Newz

GreenLite

Dsignz Media

Artist & Designer Jeff Finley

GoMedia

Visual Carnival

Mike Precious

new(me)dia

Ignite New Media

61 Pixels - Online Porfolio of Todd Adams

So there you have them – all 25 designs. You’ll notice that I refrained from adding my own site to this list, even though it’s dark and uses a similar lighting effect to some of these sites. I figure you’re already here right? Also, many of these sites belong to creative agencies and freelancers, which means that some of them could change at any moment (since many designers love to mix it up). All these these designs are current as of the date of posting, though!

Anyhow, I hope you enjoyed these! Which are your favorites? Are you as drawn to dark designs as I am? If so, what do you think the allure is? I’d love to hear your thoughts on this!

Exclusive Content

To thank you for subscribing to my feed, I am including exclusive, feed-only content for you at the bottom of each post!

Current Freebie Code - 7ev165dd