Skip navigation
Help

Visual Design

warning: Creating default object from empty value in /var/www/vhosts/sayforward.com/subdomains/recorder/httpdocs/modules/taxonomy/taxonomy.pages.inc on line 33.
Original author: 
Joseph Alessio

  

In the first installment of this two-part series on type classification, we covered the basics of type classification — the various methods people have used, why they are helpful, and a brief survey of type history, classifying and identifying typefaces along the way. Unfortunately, we only got as far as Roman (traditional serif) typefaces and the early-19th century. Now we’re back for part 2!

Part 2 will primarily cover sans typefaces, with a nod to display typefaces and other less common categories, as well as address a few of the questions people have about whether type classification is helpful and necessary.

If you haven’t read part 1, now’s your chance to go over it. It lays important groundwork for this article, covers the categories of serif typefaces, and contains plenty of useful information about the development of serif type. If you already have read it, here is a quick recap to get us started before we move on to the new material.

type classification

Review

Type Classification Systems

Type has been classified in many ways over the years, both formal and informal — Thibaudeau, Vox, British Standards, etc. None of these are complete or all-encompassing, but they’re helpful as an aid to study as well as for learning to use type correctly and effectively. The material in this two-part series draws heavily from the Vox-ATypI system, which is the most “official” of the systems today, having been adopted by the Association Typographique Internationale in 1962 and still the most commonly referenced system.

Is it perfect? No, but it provides a good overview of what is out there; and when you describe typefaces using the terms you’ll learn in this series, anyone who is reasonably familiar with typography will know what you’re talking about.

Here is a quick overview of the type categories we covered in part 1.

Humanist/Venetian

Venetian Typeface Characteristics

  • Notable calligraphic influence, patterned after handwriting.
  • Strongly angled axis or stress.
  • Based on typefaces designed in Renaissance cultural hubs such as Venice.

Garalde

Oldstyle Typeface Characteristics

  • Less calligraphic influence because type began to be viewed as separate from writing.
  • Named after influential type designers Claude Garamont and Aldus Manutius.
  • Still has a tilted axis but less obvious than in Humanist type.

Transitional/Neoclassical

Transitional Characteristics

  • No calligraphic influence. Designed independently, sometimes on a grid.
  • First appeared in the late-17th century.
  • Virtually vertical axis and high contrast between heavy and thin strokes.

Didone

Didone Characteristics

  • Extreme contrast between thick and thin. Rigidly vertical axis.
  • Abrupt, or unbracketed, serifs. Very precisely designed.
  • Named after Firmin Didot and Giambattista Bodoni.

Slab Serif

Slab Serif Characteristics

  • Very heavy weight and low contrast between thick and thin.
  • Unbracketed, prominent serifs.
  • First typefaces created expressly for display purposes.

Sans Serifs

When we left off in part 1, it was circa 1815, with the first appearances of slab serifs, also called Mechanistics or Egyptiennes. By the time slab serifs were being popularized, early sans serifs had already been around for some time in a variety of forms. To follow the progression of sans serifs, we must step back in time a number of years.

History of Sans Serifs

The earliest sans-serif letterforms were, of course, not type, but inscriptions, dating back to as early as the 5th century BC, and enjoyed a resurgence in engraving and inscriptions in the 18th century.

etruscan type
Caslon’s Etruscan type, as seen in a 1766 specimen book. Larger view. (Image source: Typefoundry)

Strangely enough, the first “sans serif” type was created not for the Latin alphabet, but for use in 18th-century academic works on Etruscan culture, which preceded the Roman Empire in the geographical area of modern-day Italy. Circa 1748, the foundry of William Caslon (with whom you should be familiar) cut the first known sans-serif Etruscan type for the Oxford University Press, although there are earlier usages of sans serifs in similar applications.

Embossed Type
Haüy’s type, created to emboss pages so as to be read by touch, was oddly ornate for its purpose. Larger view. (Image source: Camille Sourget)

Another interesting typographic innovation was the work of Valentin Haüy, who founded a school for blind children in 1785. In 1784, a year of preparation during which he devoted himself to educating a single student, Haüy developed an embossing typeface with which to make tactile books. The typeface, which, along with his method, is called the Haüy System, is an early form of sans serif, but it reads more like an upright italic or a disconnected script.

It was first embossed and then often carefully inked over the top so that it could also be read visually, as in the photo above. It looks lovely, but was superseded in both practicality and readability by the system devised by Louis Braille, himself a student at the school Haüy founded.

Caslon Sans
William Caslon IV’s sans serif was categorized as “Two Lines English Egyptian,”. (Image source: typophile)

William Caslon IV — who inherited the type foundry, as well as his name, from four generations back — is credited with the first sans-serif printing type for the Latin alphabet, appearing first in the 1816 Caslon specimen book. It featured only capitals and was marketed as “Two Lines English Egyptian,” the “Two Lines” being a reference to the size of the set type. There was much confusion over this new style, being variously called Egyptian (despite early slab serifs also being marketed as Egyptians), Gothic, Grotesque and Antique, among others.

Figgins Sans Serif
A sans from an early Vincent Figgins type specimen. Larger view. (Image source: Typefoundry)

Eventually Vincent Figgins (whom you may remember as being credited with the first slab-serif type) called the new style “sans serif,” which became the widely accepted term, although you’ll see many of the old terms in use on some typefaces.

Classifying Sans Serifs

At first glance, you might think that sans serifs can’t be classified the way that serifs can, since fewer variables are apparent in the ones we see most often. However, plenty of details can aid specificity when discussing, using and pairing typefaces, even within the broader category of sans serifs or, as Maxmilien Vox termed them, “linéales.” Subcategories were implemented by the British Standards classification, a permutation of Vox’s system, and they provide excellent means of discerning characteristics. I am presenting here a slight variation of those four, with a couple of minor differences for the sake of practicality.

Grotesque

The Grotesque category covers the early sans serifs, specifically those designed in the 19th century and the first decade or two of the 20th. Many of these typefaces had only capitals or exist only in centuries-old specimen books, but a number of them are still quite commonly used. These typefaces tend to be very idiosyncratic, with awkward weight distribution around bowls of characters and irregular curves.

Monotype Grotesque
(Image source: MyFonts)

Monotype Grotesque (above, 1926), based on Berthold’s much earlier Ideal Grotesque (1832), is an excellent example of the quirks commonly evident in Grotesques. Note the awkward “a” and “g,” the squarish bowls, the odd curves and angles at the tips of strokes in the “J” and “S,” and the overall irregularity.

The capital G in a Grotesque is usually spurred, and the British Standards specifies a curled leg on the capital R, although that is not apparent in many typefaces of the period. They tend to display some variation in the thickness of strokes, but the contrast does not show calligraphic influence or a logical pattern. The style became more sophisticated over the course of the 19th century. Perhaps the finest sample of this category appeared in the Berthold Type Foundry’s 1896 release of Akzidenz-Grotesk, which, along with Schelter Grotesk (1886), served as an archetype for many Neo-Grotesques, most notably Neue Haas Grotesk and Univers.

grotesque

Interestingly enough, it has been postulated that Akzidenz-Grotesk was based on Walbaum or Didot. Despite looking extremely different at first glance, a simple comparison of the basic forms shows that the metrics are very similar.

Examples of the Grotesque category include Franklin Gothic, Monotype Grotesque and Schelter Grotesk.

Neo-Grotesque

The Neo-Grotesques, also called Transitionals or Realists, include many of the most commonly used sans. They are based on the later Grotesques and take the design of the sans-serif to a new level with their careful construction and aesthetics. They are much more refined than the Grotesques, during which period type designers were still feeling their way around the new style; thus, the Neo-Grotesques lose many of the awkward curves and idiosyncrasies that are common in earlier sans serifs. You’ll see much less variation in line weight, and most often a single-story “g.”

neo-grotesque

Created with an emphasis on neutrality and simplicity, they were extraordinarily popular among the Modernists and remain popular today. Despite many claims otherwise, simplicity does not directly translate into legibility: A tight vertical rhythm and pinched apertures keep many Neo-Grotesques (including Helvetica) from being good choices for body text. In fact, in the 2013 edition of the DIN 1450 (the German standards on legibility in typefaces, published by the Deutsches Institut für Normung), Helvetica is used as a negative standard. That’s an entirely different topic, however.

In 1957 — a big year for Neo-Grotesque sans serifs, as Frutiger’s Univers as well as Folio (originally thought to be a stronger competitor, although history has proved otherwise) were released — Haas Foundry released Max Miedinger’s Neue Haas Grotesk, which drew heavily on Schelter and Akzidenz Grotesks. In 1960, Haas, in an effort to market it more effectively, rebranded Neue Haas Grotesk to what we know as one of the most ubiquitous typefaces of all time — you guessed it — Helvetica.

helvetica specimen
Many people love Helvetica so much that they’ll hang prints of vintage Helvetica specimens as decoration. (Image source: etsy)

The quintessential members of this group are, of course, Univers and the immortal Helvetica, which has gone through quite a number of permutations over the years (as have all of these typefaces) and was recently revived by Christian Schwartz as a rerelease of Neue Haas Grotesk. A nice informational minisite was created by Indra Kupferschmid and Nick Sherman for the release. Other typefaces in this category include the DIN 1451 and its derivatives, and Bell Gothic and its successor Bell Centennial.

Humanist

If you remember the most important quality of Humanist serif type, you’ll be relieved to learn that the same quality carries over to the sans serifs! The primary characteristic of Humanist type, both serif and sans serif, is a strong calligraphic influence, basing its shapes and flow on forms that could originate from a pen or brush. This means a much higher stroke contrast, and some Humanist sans even feature some stress, whereas nearly all other sans serifs have a completely vertical axis.

Another interesting characteristic of Humanist sans serifs is that their proportions often derive largely from Roman inscriptions and early serif typefaces, rather than 19th-century sans serifs as the Neo-Grotesques did. Because of this design process involving older letterforms, the lowercase “a” and “g” are most often two-story in Humanist sans serifs. All of these characteristics combine to make most Humanists a more legible choice than other types of sans faces.

Humanist Sans (Optima)

Hermann Zapf’s Optima is one example that clearly shows the calligraphic heritage, with an unusually obvious difference between thick and thin strokes, while many others in this category have more subtle features. The Humanist sans group includes classics such as Gill Sans and Frutiger as well as more recent releases like Myriad (1991), Trebuchet (1996) and Calibri (2005).

Geometric

Geometric sans serifs are exactly what their name suggests. Instead of being derived from early Grotesques, like a Neo-Grotesque, or from calligraphic and engraved forms like the Humanist sans, they are built on geometric shapes. The characters often have optically circular bowls and are otherwise typically very rectangular, sharing many components between the various glyphs.

Erbar Grotesk
Erbar’s small x-height, among other factors, renders it difficult to read. Larger view.

Jakob Erbar, whose eponymous typeface is credited as being the first Geometric sans, reportedly based his construction on the circle. Released in the 1920s, Erbar-Grotesk was intended to be legible. Ironically, because of the awkward visual rhythm, resulting from strict adherence to geometric forms, Geometric lineals are among the least legible of sans serifs and are usually suitable only for display type. Geometric sans serifs usually show little or no stroke contrast and usually feature a single-story lowercase “a.”

Geometric Sans

Paul Renner’s Futura, Koch’s Kabel and Lubalin’s Avant Garde are typical examples of the style. H&FJ’s Gotham is also a Geometric sans, although it is less strictly geometric than some and allows for more variation in the heavier weights.

The Rest Of The Story

That’s the basic classification for sans serifs! While the two parts of this series primarily deal with serif and sans type, there are many other styles to consider. The Vox-ATypI system also provides five subcategories of “calligraphics” (i.e. type that is derived from handmade letters), but as they are largely self-explanatory, I won’t dedicate much space in this already lengthy article to them. Here is a brief summary of each category.

Scripts

Script Metal Type
A case of script metal type. (Image source:
Etsy)

Scripts are, of course, typefaces based on handwriting, particularly formal scripts. The letters often connect, but not necessarily so. They range from the very formal — Matthew Carter’s Snell Roundhand, named after the author of a 1694 booklet on penmanship, originally released in 1966 — to the very casual — Ashley Havinden’s eponymous Ashley Script, from 1955.

Glyphic

Trajan Inscription
Carol Twombly’s Trajan was based on this inscription at the base of Trajan’s Column in Rome.

Glyphic typefaces are those derived from engraved or chiseled letters. Many of these typefaces look like they could be classified as serifs but are based on the work of a chisel, rather than having gone through the traditional design process and referencing the stroke of a pen. As such, Glyphics, also called “incised” typefaces, sometimes contain only capitals, and the serifs tend to be small, as a natural detail of the chiseling process rather than as a design feature. Trajan and Friz Quadrata are excellent examples of this style.

Graphic

Graphic Wood Type
Graphic wood type from the extensive Hamilton Wood Type collection.

Graphic is essentially a sort of catch-all label for display type that doesn’t fit into any other category. It includes anything that would be drawn or designed, with a brush, pen or any sort of tool. If it’s not exactly a sans, not exactly a serif, and you’re not really sure what it is, it is most likely a Graphic typeface!

Blackletter

Gutenberg Bible
Gutenberg printed with type designed to mimic the late-medieval Fraktur style of handwriting. (Image credits: JMWK)

Blackletter type began with Gutenberg and was used in printing, even printing body text, until the early- to mid-20th century in Germany. It is based on a medieval scribal hand, written with a broad-nib pen, and differs from graphic typefaces and scripts in that it has been used at length in body text. It has a very dense type style. When the traditional style that Gutenberg had used began to give way to the more readable early serifs (the Humanist/Venetian designs of Aldus Manutius and his colleagues), printers called the new style “Whiteletter,” in reference to the negative space-to-ink ratio on the page; thus, the old type was termed Blackletter, and we still use this term today.

Gaelic

Gaelic Type
Gaelic type includes the Latin alphabet as well as some additional glyphs. Larger view. (Image source: mathewstaunton)

Gaelic type is based on the insular script found in manuscripts throughout the UK. As with Blackletter, it has been used in printing body text in Ireland, from its earliest appearances in the 16th century all the way through to the mid-20th century, but is no longer popular as a text typeface. The Vox-ATypI system was amended to include the Gaelic category in 2010 at the ATypI annual conference, appropriately held in Dublin.

Non-Latin Type

Beyond that, there is still another world of type to discover. The entirety of these two articles on the subtleties of type (and, believe me, it can get much more complicated!) have discussed only the Latin alphabet, which, while quite commonly used, is merely one of many writing systems used today. I encourage you to learn more about, and get involved in, the typography of other writing systems! Some are very widespread and used daily by hundreds of millions of people; others are used by mere thousands.

Regardless of how many people use it, each writing system needs quality typefaces. From the commonly used (check out Nadine Chahine’s interview on Arabic type) to the rarely seen (Jean-Baptiste Levée gave a fascinating talk at last year’s TypeCon on creating Air Inuit Sans, supporting Inuktitut glyphs), the typography of non-Latin writing systems promises an exciting future.

Closing Remarks

We’ve barely scratched the surface of the fascinating subject of typography and type history in this two-part series “Making Sense of Type Classification.” Hopefully, it has piqued your interest in this intriguing field. Knowing your way around the typographic resources available to today’s designers is essential, and it is helpful to understand a little behind the characteristics, history, visual character and idiosyncrasies that make each typeface unique and that define how it communicates.

At one point in the history of Web design, an extensive knowledge of type history was unnecessary because a Web or interactive designer was limited to half a dozen typefaces, and those in limited weights and variants.

Today, however, the landscape of Web design is completely different, and the typographic possibilities are endless! Also, while this material is covered in many design schools, a significant portion of designers today haven’t had a formal design education, so now is the best time to catch up!

That being said, we also must remember that, while type classification is an important aid to studying type, it is not a hard and fast system that cannot be questioned. Many typefaces combine characteristics and could easily fit into multiple categories, and no classification system can cover all of the possibilities. In the end, type classification is an excellent means of learning to recognize common patterns and distinguishing characteristics of typefaces, and we get to learn some type history along the way.

With this short series, you’re now equipped with a strong knowledge of categories of type; you’ve learned to analyze typefaces and pick out unique aspects of letterforms; you’ve seen how type has evolved with culture; and, most importantly, you have a solid foundation for further study of typography and type history! It cannot be overstated how immensely important sound knowledge of typography is for anyone in the broad field of design, and the material we’ve covered here will serve you well in navigating the world of type.

(al) (ea)

© Joseph Alessio for Smashing Magazine, 2013.

0
Your rating: None

Web typography has come a long way from the days when the only way to get a custom typeface on a page was with images created in Photoshop. These days, thanks to widespread browser support for CSS @font-face and services like Typekit, a couple lines of code will add actual font files to your pages.

Go back to 2001 with that information and you would blow many a designer’s mind.

Of course if you’re not a designer, today’s overwhelming variety of type possibilities can be overwhelming. For some help deciphering it all and navigating the sometimes complex world of web typography, check out the video above of Typekit’s Jason Santa Maria‘s talk “On Web Typography.” The video comes from An Event Apart Boston in June of last year, but was only recently made available online (note that Santa Maria has since left Typekit).

After a whirlwind tour of the history of online typography, Santa Maria explores typography from a newcomer’s perspective, looking at how typography affects how you read and how to choose and combine typefaces for a better looking, easier to read site. It’s about an hour long, but you’d be hard pressed to find a better intro to and overview of the art of typography.

0
Your rating: None

The iPad may have started it, but the high resolution screen will soon be the norm. Photo: Ariel Zambelich/Wired.com

The rise of high-resolution screens means that web developers need resolution-independent graphics or images look blurry. For photographs responsive images may be the solution, but for simpler graphics like logos and icons there’s an easy solution that’s been with us for some time — Scalable Vector Graphics or SVG.

A slightly blurry icon or logo on a retina display probably isn’t going to drive your visitors away, but if it’s easy to fix and can potentially save you some bandwidth as well, why not?

Historically, browser support for SVG has not been particularly good, but these days SVG images work just about everywhere, except older versions of IE. Thankfully it isn’t hard to serve up regular old PNG files to older versions of IE while keeping the resolution-independent goodness for everyone else.

Developer David Bushell recently tackled the topic of SVG graphics in a very thorough post titled A Primer to Front-end SVG Hacking. Bushell covers using SVG graphics in image tags, stylesheets, sprites and even the old-school <object> method. He’s also got a great list of external resources, including SVGeezy for IE fallback, the SVG Optimizer for saving on bandwidth and grunticon which converts SVG files to PNG and data URIs for fallback images.

Head on over to Bushell’s site for more details and you can check out some of our previous posts on SVG for even more resources.

0
Your rating: None

A handful of the many canvases your site will adorn. Photo: Ariel Zambelich/Wired.com

In the bad old days of just four years ago it was pretty common for mobile users to get shunted off to some half-baked, feature-deprived “mobile” version of the website they were trying to visit. This misguided practice was common (and annoying) enough that even today Chrome for Android and other mobile web browsers ship with a feature that allows users to “request desktop site.”

To make that feature work Chrome for Android changes its user agent string. Any site that uses user agent strings to redirect mobile users will no longer because to redirect them and the desktop version is displayed.

Responsive websites don’t rely on user agent strings though. Instead they adapt to screen size based on CSS media queries so even if a user has the option for desktop sites checked in Chrome they still won’t get the “desktop” site (of course with responsive sites there really is no desktop site, just a desktop layout).

Provided your responsive designs are good, this isn’t a problem (and if they aren’t then you have bigger problems). However, Opera web standards evangelist Bruce Lawson raises an interesting edge case: what about users that have never seen the mobile layout and are disoriented when they do? If you were expecting, say, the desktop layout of the BostonGlobe.com and instead saw the mobile layout for the first time you might be understandably confused. Here’s what Lawson has to say:

My reason for wondering [about turning off responsive design] is watching my dad use his Xmas Android phone and seeing his puzzlement that some sites look completely different on that device. Non-RWD sites loaded the layout he was familiar with — the desktop layout — which meant he could verify he was on the right site, he knew where in the layout the content he wanted was, and then scroll and zoom to it. When a site looked radically different, he’d check the URL bar to ensure that he’d typed in the right address. In short, he found RWD to be confusing and it meant he didn’t trust the site – no way would he buy anything from these sites.

The first thing to note is that this isn’t a problem unique to responsive sites. The same thing would crop up with a separate mobile experience. The difference is the inability to opt out of the responsive layout. An edge case? Sure, but Lawson isn’t alone in wondering about turning off responsive designs. CSS guru Chris Coyier tackled that very question last year, writing:

Why don’t we see opt-out responsive design? My guess is two-fold:

  1. It’s a bit technically challenging to implement and there aren’t a lot of precedents.
  2. It’s admitting you didn’t do a very good job on the responsive design.

The latter likely being the bigger factor. Like: why are we creating this responsive design at all if we aren’t sure it’s a better experience?

I would agree with both points, but clearly there are at least a few edge cases where offering an option to turn off responsive design might be a good idea. Of course it may not be worth worrying about the edge case of unfamiliar visitors — that’s the sort of decision you can only really make by looking at your own visitors and doing your own testing.

If you actually want to try it, Coyier has some ideas on how to go about creating an option to opt out of a responsive design.

0
Your rating: None

Creating custom icon font files with Icomoon. Image: Screenshot/Webmonkey.

Responsive images means getting high-quality, bandwidth-friendly images to the right screens. Currently that’s not nearly as simple as it sounds, but there’s a responsive images web standard in the works and plenty of smart developers working on the problem.

Implicit in the responsive images discussion is that the images in question are photographic images. For graphics, solid-color images and icons there are already better solutions, namely, either SVG or icon fonts.

Icon fonts in particular have been getting a lot of attention lately and for good reason — they make an easy, lightweight way to serve up resolution-independent images that look good on any screen. Indeed in most cases icon fonts can replace your old image sprites (though you can keep your sprites around for older browsers). And don’t forget icon fonts are fonts, so any CSS effect that works on text will work on your symbols.

There are dozens of great icon font sets available that you can just drop into your projects. Pictos, Glyphish and Symbolset are just a few popular options. There are high-quality free icon sets as well, but it’s also easy to create your own font file from any vector image you have.

Turning your vector files into icon fonts means you can serve your RSS, social icons and perhaps even your logo all from the same custom font file (or even straight from your stylesheet with base-64 encoded data). What’s more, when you roll your own, you can include only those icons you need, further reducing file size.

I’ve been using the OS X application Glyphs to package up icon sets, but, as developer Jeremy Keith recently highlighted in a blog post, there are a number of great (and free) online services that can turn your icons into font packs. Assuming you don’t need all the font editing features found in desktop apps like Glyphs, web services like IcoMoon will work great.

To create your custom collection IcoMoon has dozens of icon fonts to choose from (some free, some not), as well as an option to convert your own graphics. Once you have your set assembled the app will spit out the whole collection as single font file ready to use on your site. You can even get the resulting font base-64 encoded so you can avoid the extra HTTP request.

For more info on how and why to use icon fonts check out the nice overview on the Pictos blog, Chris Coyer’s Icon Fonts are Awesome, developer Trent Walton’s icon font write up and Jenn Lukas’ series on icon fonts.

0
Your rating: None

Size matters: Flickr's lightbox view now offers much larger images.

Yahoo is once again lavishing some attention on Flickr. Flickr has already launched a new photo uploader and a new photo editor in recent weeks, and now the site is making your images look even better with new, higher-resolution photo displays.

It’s been nearly two years since Flickr last redesigned its photo pages to display larger images. Since then screen resolutions have only improved, and when it comes to viewing photos you don’t have to be a pro photographer to know that bigger is better.

To make your uploaded images look better — especially when you’re browsing in fullscreen mode — Flickr is introducing two new photo sizes, 2048 and 1600 pixels.

Right now you’ll only see the new larger images when you enter Flickr’s “lightbox” view with its darker, photo-friendly interface (just click an image to enter lightbox view). At the moment the regular photo pages remain unchanged. However, the Flickr blog reports that the larger images will soon be available through Flickr’s API and “a few other places over the next couple of weeks.” While the new image sizes are probably too large for the default photo pages, we wouldn’t be surprised to see Flickr refresh the photo page layout with larger images in the near future.

The larger of the two new photo sizes also seems like a future-friendly choice since it works well with very high-res screens like what you’ll find on Apple’s latest iPad. Although Flickr does not appear to be doing so just yet, serving the larger images to the iPad would make for sharper photos on the iPad’s high-resolution screen. [Update: The Flickr team tells Webmonkey that it "just enabled hi-res photo sharing to the new iPad this morning."]

Naturally, to take advantage of the new larger image sizes Flickr is now creating, you’ll need to be uploading photos at least that large. But given that most phone cameras produce images in that pixel range these days, there’s a good chance you already are.

Flickr Pro members can control how large their images are displayed; just head to the new image size settings page. By default Flickr sets this to “best display size,” though if you want to stop people from downloading high-res copies of your images you can limit the display size to 1024 pixels. The new image size setting doesn’t affect who can download your original files, just those created by Flickr. But since the sizes Flickr creates are larger than what most original images would have been back when Flickr first launched, the new setting makes sense.

One thing to note with the new image sizes: they only apply to photos uploaded since Mar. 1, 2012; older images won’t be resized. The other thing to know is that if you upload something with a long edge of less than 2048 pixels, Flickr won’t upsize it so there’s no need to worry about small images being pixelated.

The new image sizes may not win over fans of filter-happy, low-res image sharing websites, but for Flickr aficionados it offers a compelling reason to stick around.

0
Your rating: None

Responsive Book: Google's Chromebook site as seen by a phone (left) and a tablet.

If you’ve been waiting for responsive design to go mainstream, wait no more. While The Boston Globe‘s responsive redesign made a big splash in the developer community, The Globe has nothing on the latest web giant to throw its weight behind responsive design — Google.

That’s right, Google is now suggesting developers use responsive design tools like media queries to handle the variety of screens now accessing the web.

The Google Webmaster blog has posted a new article, Responsive Design – Harnessing the Power of Media Queries, that walks beginners through the basics of creating a responsive website.

It’s not the most thorough tutorial we’ve seen, nor is it the best — Google conflates breakpoints with device width, something we’d recommend against — but nitpicking aside, Google’s official blessing will no doubt help move responsive design to the front burner in many people’s minds.

It’s worth noting that while a tutorial is nice, Google isn’t necessarily making the leap to responsive websites for its own properties. Indeed, sites like Gmail or Reader are excellent arguments for maintaining separate mobile designs. If your “site” is actually a web app as complex as Gmail then we suggest doing what Google does — hiring a fleet of developers to build an maintain separate websites for different size screens.

Chances are, though, that your site isn’t that complex and doesn’t have the developer teams that Google can afford. Even Google uses responsive design when it makes sense. To go along with the new tutorial, Google offers up that the new Chromebook website is responsive, which shows off the company’s responsive design chops.

0
Your rating: None

Testing a responsive site across devices (using Adobe Shadow). Photo: Adobe.

We’ve covered quite a few ideas on how to build more responsive websites — that is, websites that use flexible layouts, media queries, image scaling and other tricks to make sure that the site looks great and works well on any screen.

Sometimes, though, it’s helpful to see what not to do. Responsive design guru Brad Frost recently outlined five common mistakes responsive developers make over at .Net magazine. Frost covers responsive sins like relying on specific screen sizes to trigger layout changes (it’s far better to create design breakpoints based on a site’s actual design than to just use the screen sizes du jour) and avoiding a one-size-fits all experience.

Of the latter Frost writes:

Mobile is much more than just various small screens…. We shouldn’t sell ourselves short by only creating responsive layouts. For example, we sometimes forget that mobile phones can get user location, initiate phone calls, and much more. Hopefully soon browsers on all these gadgets will have access to even more device APIs, further pushing the boundaries of what’s possible on the web.

We should do all we can to make the entire experience respond to what the device is capable of. Addressing constraints first gives us a solid foundation to stand on, then we can utilize progressive enhancement and feature detection to take the experience to the next level.

The entire post is well worth reading, but we’d like to add a sixth rule to the list: Don’t assume that what you did yesterday will be the best thing to do tomorrow.

That’s not to imply that what you do today won’t work tomorrow, just that chances are there will be an easier way to do it.

Responsive web design is a very new challenge and the best ways of meeting it are still being worked out. That can be a pain, but it also means that some very smart people are solving some very hard problems and you can benefit from their work provided you know about it.

We see new things popping up all the time, whether it’s a new way to handle responsive images or a browser update that adds widespread support for a new CSS feature. We encourage developers to spend some time reading up on the latest tips and tricks before each new project. New responsive tools are being developed and refined so rapidly that the hack you used on your last project might turn into a stable, well-maintained JavaScript library by the time you start building a new responsive site.

0
Your rating: None

  

When users land on your website, they typically read the content available. Then, the next thing that they will do is to try and familiarize themselves with your website. Most of the time this involves looking for navigation.

In this article, I’ll be analyzing the navigation elements of a particular category of websites, i.e. portfolios. Why portfolios, you ask? Because they represent an interesting blend of creativity and development techniques. As they offer an intriguing user interface and interaction, this often borderlines with what is ultimately defined as an enjoyable user experience. Should aesthetics, originality and creativity come at the expense of usability? Can they reside on the same website in harmony?

Portfolio Navigation Main Image

These themes will be explored through a brief analysis of eight portfolio websites, carefully selected by the Smashing Team and, well, scrutinized by me! My critique will encompass a blend of usability and user experience guidelines, as well as personal opinion based on my experience. Please feel free to provide your opinion in the comment section beneath this article. Also, kindly note that the websites are presented in no particular order.

Dawid Wadach

My first impression of Dawid Wadach’s website was “Whoa! Mine-sweeping! That’s surely not good usability!” For those of you who are not aware of the meaning of the term “mine-sweeping”, it refers to the the action of moving the mouse pointer over screen components (usually images) to reveal links. Although children like to mine-sweep in order to find links, both teenagers and adults hate it.

Dawid Wadach
The apparent absence of navigation is the first noticeable thing on wadach.com.

It was only after stopping to read what I was randomly and rapidly uncovering with my mouse that I actually noticed that the hidden parts contained the portfolio of websites designed by Wadach. At this point I sat back and started looking for the website’s navigation.

Dawid Wadach
Hovering over the white area uncovers some of the projects undertaken by Wadach.

To be fair with Dawid, the menu is indeed visible as it’s located in the form of a button right next to his logo. My criticism towards this implementation is that after hovering over this button, I expected it to automatically show all the menu options. This was particularly true because there was no visible change in the menu button, nor on my mouse pointer when I hovered over it. Indeed, you need to click on the menu button in order to be provided with the main navigational elements.

That, in my opinion, is not good practice, and I feel that the main menu could have very easily been rendered visible at all times without altering the visual element of the website. Indeed, that is what Dawid did, although he wrongly placed it in the website’s footer.

Dawid Wadach
The main navigation menu on Dawid Wadach’s website.

On a more positive note, with regards to the hover effects of the main menu, they are very clear. The font itself is large and contrasts very well with the semi-transparent black background. The website also includes utility navigation at the top left hand corner, which is a good location for such navigation. It also includes features to share the website via social networks and to remove the mine-sweeping effect at the bottom left and bottom right hand corners.

Ironically, the links to all these features contain a hover effect on mouse-over (unlike the main menu button), which is a good usability practice. Additionally, the designer opted to change the user interface of the browser’s scrolling. In general, this is not a good usability practice, as it makes it harder for the user to locate and use the scroll. However, in this case the change was only done for aesthetic purposes, and the scroll interface does look like and behave like users would expect it to.

Conclusion

In conclusion, I feel that from a design and development perspective, the website is very well implemented. It makes great use of HTML5, CSS3 and JavaScript to provide a smooth and pleasant user experience. It is minimalistic and clean, so the user is not overwhelmed with clutter. From a usability perspective, though, I think that slight improvements to the navigation—especially making the main navigation visible at all times—will result in greatly improving the overall user experience, without affecting the whole look of the website.

Harry Vorsteher

When you’re greeted by a Flash animation explaining to you how to use the navigation (before actually seeing the website itself), well, it’s not a good sign. I personally think that the majority of users would do the same as I have, and close this animation before trying to understand what was being explained.

Users have become accustomed to certain conventions and are never eager to divert from the way they expect things to look and behave. Therefore, introducing a new, complex navigation mechanism was not a very good choice from the website’s designers (from a usability point of view).

Harry Vorsteher
The website greets its visitors with an animation explaining how to operate the navigation.

Upon closing this animation, users are greeted with two groups of navigation links, presumably linking to photo galleries. The reason why they were grouped in this way is not apparent until one clicks and drags the big wheel that lies at the center of the page. Depending on whether you opt to turn it clockwise or counterclockwise, this will scroll the photos to the right, or to the left, respectively.

Harry Vorsteher
The wheel mechanism that needs to be mastered in order to navigate through the website.

Provided that you notice and understand how to work the wheel navigation—as well as clicking on any of the categories as a means to see the photos in thumbnail format—navigation is painful, but bearable. But the excruciating pain comes when you opt to click on any of the thumbnails to see the large version of the photos.

The website background changes from light grey to a darker shade of grey, the photo occupies a large portion of the screen, and the navigation disappears. The mouse cursor also changes to a “left arrow” when you are close to the left-hand side of the screen, a “right arrow” if you are at the right-hand side, and a cross with the words “close” if you are at the very center.

This will enable you to see the previous photo, go to the next photo or close the current photo respectively. Unfortunately for the user, there is too much movement with the mouse cursor changing shape, the photo moving along the y-axis (depending on the mouse location), and an irritating pre-loader for every mouse click.

Harry Vorsteher
Horizontal and vertical scrolling (without scroll bars) is essential for viewing each image.

Moreover, if the user opts to click on the full-screen option, this removes the browser’s chrome, and further complicates navigation. In my opinion, this website basically sums up why Flash has been branded as evil amongst all usability and user experience professionals.

Conclusion

To sum it up, the user interface and the photos present in this website are truly nice and inspiring, as is the capability of the Flash developer. The navigation itself is very interesting and complex to develop. Thus, from a design and development perspective, the website is truly one to admire. However, I personally think this website is a usability nightmare, and it will inevitably lead to user frustration.

Because of its flexibility, Flash allows room for abuse. Unfortunately, several designers are more concerned with showing off their expertise rather than focusing on the user.

I am not particularly fond of the choice of using Flash instead of JavaScript libraries to create the animations for the galleries. Without resorting to recommending a re-design of the entire website, I think that some quick fixes would be to create a conventional menu which could be visible on every page of the screen.

Also, the photos in the galleries themselves should be re-sized to occupy 100% of the screen size (vertically and horizontally), thus removing the need for the users to scroll in order to see the full image. Finally, the images should be of a lesser resolution so as to minimize their loading time (and quite possibly remove the need for a pre-loader to appear for such a lengthy time as each image loads).

Justin Lerner

I love Justin Lerner’s navigation (and yes, it just happens that he also has an awesome name as well!). Joking aside, I think this website proves that usability can indeed be aesthetically pleasing. The main menu is conveniently and prominently placed horizontally, just below the logo. This is the exact place where users are most likely to search for it. It contains just five items, each of which corresponds to the five sections of the website. The font is large and visible, and each menu item changes color on hover.

Justin Lerner
This website adopts a grid approach so as to facilitate navigation.

Interesting too is the fact that the content belonging to each category is rendered more visible on mouse-over whilst highlighting the menu item to which that category belongs. When clicking the menu item or section, it expands in order to show the full content of that section. This implementation enables all of the website to be visible on a single page without cluttering the user interface.

Justin Lerner
The selected section takes center stage by expanding over the inactive ones. It is also highlighted in the second menu at the top.

What I am not entirely convinced of with this website is the need for the duplicate menu that resides just above the main menu. From an aesthetic perspective, it is modern and blends in very well with the overall look and feel of the website. However, from a usability perspective, having two menus with the same content usually confuses users as they try to click on the same-named section in both menus to see if it’s loading any different content.

Still, in this particular case, the smaller menu is doubling up as a sort of breadcrumb in order to show users which section they are currently viewing. Yet again, breadcrumbs have their own, specific usability guidelines, and it is recommended that they are adhered to.

Justin Lerner
The secondary menu (brown) replicates the same items as the main menu (grey).

Conclusion

In general, I feel the designer here did a great job in blending great design practices and good coding techniques to provide an aesthetically pleasing (and generally usable) website. Slight modifications can be introduced to improve the usability without adversely affecting the design, such as removing the duplicate menu and replacing it with a breadcrumb trail (although I seriously doubt that a breadcrumb trail is needed).

Additionally, the website would be better off from a usability perspective if more white space is introduced and the typography is more contrasting, since one needs to hover over the content in order to distinguish it well from its background.

Shelton Fleming

My experience with the Shelton Fleming website was very particular as it started off on a bad note, but quickly transformed into a most enjoyable one as I browsed through it. What ticked me off initially was the first screen that greets you when visiting the website; this consists of a yellow box containing the word “Ideas” in grey, and a grey box placed next to it containing the word “Experience” in yellow.

Shelton Fleming
Visitors are greeted with a splash page-like screen that fails to explain the brand identity in an obvious way.

The apparent lack of navigational elements frustrated me because I mistook this page with a splash page (which is a big no-no in usability since users can’t stand them). It is only when revisiting this page (after spending some more time on the website) that I noticed that the conversion of ideas into experience is actually the company’s tag line. Viewed from this perspective, this makes sense from a user experience perspective, as it emphasizes the company’s branding.

Shelton Fleming
The website’s hierarchy and navigation is clearly indicated through imagery and normal conventions such as highlighting.

In fact, the concept of “Ideas” and “Experience” dictates the website navigation—each section resides at opposing ends of the screen along the horizontal plane. Hovering over each of the two sections reveals a vertical side menu with intuitively-named, visible menu items. Good usability practice is also implemented through the changing of the menu text on hover.

Also, the arrow that appears on hover is a good indication to the user that the content of each menu item will be displayed right next to it—something which actually happens when clicking on the menu items.

Shelton Fleming
Color is also effectively used to indicate hierarchy and navigation options.

Conclusion

Consistent and intuitive navigation, large sans-serif fonts contrasting sharply with their background, unobtrusive imagery, and ample use of white space makes navigating through this website an enjoyable experience. Still, I would recommend removing the splash page-like design that is set up to greet visitors. It offers very little information about how it should be interpreted. Moreover, there is a very strong branding element throughout the website—thus eliciting very little need to have a page at the beginning that risks irritating users.

Chris Wang

This website prominently revolves around the projects that Chris Wang has undertaken. In fact, the first thing that one sees is a list of project titles and accompanying icons that open up in an accordion style when clicked on (revealing a gallery of images related to the project in question).

Chris Wang
At first glance it’s not immediately evident that this is a list of projects undertaken.

The project titles have a sleek orange transition on mouse hover which indicates that they are clickable. One point of criticism would be that the list of projects is not immediately evident as to what they are—the word projects next to the first listed item is a grey barely lighter than the background.

Chris Wang
The accordion effect is coupled with a horizontal gallery of the project being viewed.

Additionally, the website offers a handy keyboard navigation mechanism that uses arrow keys to enable rapid (albeit sequential) browsing of the projects.

Chris Wang
A horizontal dark yellow fill is used to indicate what is clickable.

Conclusion

Overall, the navigation is quite intuitive. It is relatively easy to switch from one project to another, and to drill down to see more screenshots from the same projects. One aspect that can be improved is the ability to close a project after viewing it, since a project always needs to be open at any given point in time. Although this first project will be replaced by clicking on a new one, the project currently being viewed takes up precious real estate that would be better used by showing the list of projects.

Jessica Caldwell

This website makes extensive use of mine-sweeping for the purpose of navigating, effectively breaking all navigation usability conventions. In a desperate attempt to find information about the owner of the website, I scrolled below the fold and located the footer which contains a list of non-clickable items grouped under the titles “Agencies” and “Brands”. The only links in the footer are those for social media and portfolio websites of the website owner (all of which link to external websites).

Jessica Caldwell
Navigation in this website is only visible on mouse hover.

Defying the odds that a user would still attempt to browse the website at this point, I decided to mine-sweep each diamond present in the home page in order to locate basic information (such as a biography of the author and contact details). It is at this point that I noticed that the diamonds contain both items that would be classified as projects done by the author, as well as the website information that I was looking for. In a typical mine-sweeping implementation, there is no apparent hint as to which diamond holds which information.

Jessica Caldwell
One of the projects uncovered by hovering over the diamond shapes.

Clicking on any of the items in the diamonds results in the content being loaded inside all the other diamonds, with the navigation retaining its place on the same diamonds. From a visual perspective, the result is quite appealing. However, this does not improve the usability in any way.

Jessica Caldwell
Clicking on any of the navigation items opens content in the same diamonds used for navigating.

Conclusion

The website offers plenty of white space—something that generally is good for usability. Aesthetically, it’s also very pleasing. Thus, in my opinion to improve the usability, the main focus should be on improving the navigation by placing a conventional menu in the top part of the website (maybe repositioning the logo towards the top left-hand side) and placing a simple menu to its right.

The diamond design for displaying content can be retained, as I think it effectively contributes towards the identity of the author. Still, I would make it occupy less vertical space so that the footer (or at least the top part of it) is visible above the fold. In this way, users will notice that the website contains a footer.

Whether or not to include clickable links inside the footer is something that the author ultimately needs to decide—replicating the top navigation inside the footer is never a good idea. However, converting the items inside the footer into useful, deep links (perhaps to specific projects that highlight the capabilities of the author) will help.

McCormack & Morrison

I personally think that with this portfolio website, the design agency McCormack & Morrison have done an excellent job translating their slogan “Good Old Fashioned New Media” into a visual experience. Indeed, the website has a strong brand identity and an almost retro feel, with powerful, bold typography.

The only links in the home page are the logo and an “About Us” link, correctly located at the top left and top right hand corners, respectively. Although the “About Us” link is disguised as a speech bubble icon, it makes use of the title tag so that it displays the text “About McCormack & Morrison” on hover.

McCormack & Morrison
The company’s tag line is used to create a strong brand identity to greet its visitors.

Perhaps less optimally located (although at least above the fold) is the “Our Work” button at the bottom right hand corner. I say “perhaps” because I wouldn’t classify this placement as a usability failure, since some people will actually look just above the fold of the website in order to locate a footer. Also, the link is in the form of a button—which in itself encourages users to click on it. Missing this button would really be a pity, because this is when you would realize that the website is indeed a one page website—it scrolls vertically to reveal projects undertaken by the agency, and horizontally to see more screenshots of the same project.

McCormack & Morrison
The projects can be viewed either by using the arrow keys or the navigation at the bottom of the website.

When viewing these projects, the “our work” button is replaced by arrow buttons that facilitate the browsing of each project. Although it is not mentioned on the website (which is a pity, really), the fact is that you can easily navigate through the projects using the keyboards’ arrow keys. This enables a very pleasant, yet rapid navigation. Another usability plus is that the website effectively makes use of the screen’s full width.

McCormack & Morrison
The company devotes a lot of importance to branding—hence the reason why each project starts off with the client’s logo.

Conclusion

In my opinion, McCormack & Morrison got most of their usability right. What I would introduce would be the ability to navigate through the projects in a non-sequential manner. While this isn’t a major issue with this website (as it only has four projects), it would be very tedious to have to go through a number of projects in order to reach the one that is interesting to the user visiting the website. Another issue is that there is no hint as to what project will be viewed next without actually having to visit each and every project.

Moka

Argentinian design agency Moka is well aware that its website will attract potential South American, Spanish speaking clients. So instead of offering the standard language changing mechanisms, it makes use of its website visitors’ IP address in order to provide the site in English or Spanish—depending on their location. In fact, manually changing the “/?lang=en” parameter in the URL to “/?lang=es” will yield the Spanish version of their website—this is good usability.

Moka
With an apparent lack of visible navigation, this website had to include navigation instructions at the bottom left side.

However, I would still provide a mechanism for users to know that the website is being shown in this language specifically for them, and provide a facility to change it to select other languages. This is because the user may be visiting the website using a device that is not theirs. Additionally, they may feel more familiar with one of the other languages that the website offers.

Moka
Samples of each project are rendered using the full size of the screen.

Back to navigation. The first thing that you’re greeted with is an abstract design along with the Moka tag-line. Having the company’s tag-line and logo prominently displayed is always good usability practice, because it informs your visitors what website they are visiting. But there is no apparent menu on the website.

Navigation becomes visible in the form of arrows that appear at both ends of the abstract design when one hovers over it. Implementing the website’s navigation in the form of mine-sweeping is never a good usability practice. To give credit to Moka, they do include instructions on how to navigate their website at the bottom left hand corner of the screen.

However, due to the placement (as well as the low-contrast the text has with the background), this is not immediately visible. Then again, if navigation is intuitive, one would not need to provide such instructions.

Clicking the navigation arrows enables the user to browse in a sequential manner through a number of projects undertaken by the company. As previously mentioned, the problem with this type of navigation is that the user needs to go through projects in a sequential manner without getting a hint of what the next project will show.

Also, the project description is barely visible, as it is located at the bottom left-hand corner of the screen. If the user fails to see it, then they will not be able to understand what they are seeing.

Moka
On mouse-over, the logo doubles up to show the “About Us” and contact information.

Another usability problem I found is that the logo breaks the convention of being clickable in order to go back to the home page. Apart from the fact that this practice is almost standard today, the website doesn’t offer any other mechanism to go back to the home page other than having to go back sequentially using the arrows.

This is something that is most likely to cause user frustration. Hovering over the logo provides the “about us” and the company’s contact information—not a bad idea in order to keep a clean user interface. However, it is not intuitive enough, since users will normally hover over your logo in order to go back to the home page.

Conclusion

To end on a more positive note, the website is clean, minimalist, provides ample white space, and prominently shows the company’s portfolio—all of these will provide a positive user experience. Introducing the ability to select which projects to view (and to view them in a non-sequential manner) would by far improve the user experience. Additionally, sticking to conventions such as providing better mechanisms to go back to the home page, being able to view the information about the company, and how to get in touch with them, would also be beneficial.

Final Thoughts

Even through a brief analysis of these portfolios, it is evident that a website can be usable while at the same time having a pleasant user interface. While there is still room for even more interpretation, it’s clear that one needs to be very careful to keep in mind that a website has one focus: enabling its users to achieve their objectives—this is ultimately what usability is all about.

In the case of portfolio websites, the users’ objectives may include knowing more about the owner of the website, viewing the projects undertaken by that owner, or contacting the owner. The objective to identify (as well as develop and design) what needs to be achieved is a tough process—but also one that will inevitably lead to a healthy return on its investment.

(il) (jvb)

© Justin Mifsud for Smashing Magazine, 2012.

0
Your rating: None

The high-res future is coming

The first of the new iPads will arrive in the hands of the public this Friday, March 16. Like the iPhone before it, and no doubt many more devices to come after it, the new iPad has four times the resolution of typical screens. That means your visitors will soon be looking at your site on a high-resolution screen with a whopping 3.1 million pixels.

The sharp, crystal-clear screens are awesome news for new iPad owners, but they create some new dilemmas for web developers who’d like to offer a better experience for high-resolution screens. Sure, increased pixel density means you can serve up sharper, better looking graphics, but there is a cost as well — bigger images mean more bandwidth and longer page loads.

This isn’t a new problem by any means and Webmonkey has looked at a variety of solutions in the past, including techniques like adaptive images and responsive images.

The problem is simple: you need to send smaller images to small screens and larger images to larger screens. Sending a huge iPad-optimized image to a device with a max resolution of 320×480 just doesn’t make sense. At the same time, when bandwidth isn’t an issue, most sites will want to serve high-resolution content to displays that can handle it.

The ideal solution would be to detect both the resolution of the screen and the available bandwidth. Then, based on the combination of those two factors, the server could offer up the appropriate image. Currently that’s not possible, though there are already proposals to extend HTML to handle that scenario.

The Responsive Image Working Group is a W3C community group hoping to solve some of these problems. The group is proposing a new HTML element, <picture>, which will take into account factors like network speed, device dimensions, screen pixel density and browser cache to figure out which image to serve up. Think of it as a much smarter version of the old lowsrc property. So far though it’s all hypothetical

In the mean time if you’d like to serve up high resolution images to your third-generation iPad visitors look no further than Apple.com for one (not necessarily ideal) way to do it. An Apple Insider reader noticed that Apple is already prepping its site to deliver double-resolution images to new iPads. Cloud Four’s Jason Grigsby, whose responsive image research we’ve covered before, has a great breakdown of what Apple is doing.

Essentially Apple is serving up lower resolution images by default, then using JavaScript to send larger images on to iPads. That works, but it will definitely mean increased download times for new iPads since they have to download two files for every graphic. Apple’s approach will also up the number of HTTP requests, which will also slow down the page.

The slower page loads seem to be an acceptable trade off for Apple since the company no doubt wants to showcase the new iPad’s high resolution display with high resolution images. For other sites the bandwidth trade off may not be worth the gain in image resolution.

Still, screens are only going to continue getting better with ever-increasing pixel density. Now is the time, if you haven’t already, to start embracing CSS 3 (avoid images altogether with gradients, shadows and rounded corners in CSS 3), Scalable Vector Graphics (SVG) for resolution independent graphics and of course @media queries to serve high-res background images.

For more on detecting and developing for high resolution displays, check out these posts from around the web:

0
Your rating: None