BlogmyQuery – BMQ

According to Brandweek, “brands are the express checkout for people living their lives at ever increasing speed. This article shows you how, and why, to add “appâ€�-like icons to your sites for several mobile and desktop browser displays, to clearly and elegantly identify your site with an icon that stands out from the crowd.

Logo Presentation And The Nine Basic Ballet Movements

When I was a lad growing up in rural America, we only got four channels on television, all local affiliates of the four national networks (yes, four; you’re forgetting PBS, which I only watched when they did dinosaur specials). The ABC and CBS stations came in fairly clear if you adjusted the “rabbit ears� antennae just right, and wrapped tinfoil on ’em.

Not too far off from what sat in our living room. (Photo credit: David E. Bowman, used by permission.)

NBC’s station came in over the new-fangled and somewhat unfathomable UHF channels — we had to actually twiddle a dial that looked like an old radio selector to tune it in. That channel was always static-laden, and required not only tinfoil on the rabbit ears, but sometimes needed my brother or me to stand next to the TV, carefully grab one of the rabbit ears, and, in my wife’s words years later, assume one of the nine basic ballet positions. (Her dad did the same thing to her, until he got angry at something President Johnson said and kicked out the picture tube. True story.) If we did the grand plié just right, the NBC channel would come in nice and clear, at least until Don Meredith dropped back for the touchdown pass and the signal would go out.

The television was also a black-and-white job.

So, given all of that static and lack of color, the lack of a screen display and the inability of anyone who lacked sniper-quality vision to discern what the number was on the little plastic channel dial from across the room, how were we to know what channel we were watching at a glance?

Short answer, we didn’t. Longer answer, we depended on the networks, or the local station, to tell us. That involved the use of a logo, on the networks’ choice of identifying themselves — part of their branding.

The 1960s version of the ABC Network logo. (Photo credit: Kris Trexler, used by permission.)

In those days of low, low-resolution black-and-white signals, we sometimes had to depend on the network logos to determine what station we were watching. I wasn’t old enough to see the logo ABC used in the 1950s (the letters stenciled in light gray on the side of a television camera, very unreadable), but I do remember the 1960s version: three smaller-case letters in RGB colors (they looked like different shades of gray to us) in a black circle. Easy to see and understand. ABC still uses a variant of this logo.

The 1960s version of the NBC Network logo. (Photo credit: Fanpop.)

NBC flaunted its embrace of color by pasting a color-bedazzled peacock on screen. It gave us a rather undistinctive text block at the bottom of the screen, and we couldn’t see the colors, so it didn’t convey quite as strongly (besides, no one wanted to watch NBC programs if it meant you got to stand by the antennae in allongé position for more than a few minutes). The peacock survives, in a much more stylized form, today.

The 1960s version of the CBS Network logo. (Photo credit: Solar Navigator.)

CBS used the “Eye of Horus� (they still use a version of it) flanked by three nicely serifed letters in a different RGB arrangement of colors — again, easily identifiable.

Self-Identification And Browser Speed Dials

This blast from the static-riddled past came to mind when I installed Opera 11.10 (code-named Barracuda in Opera’s best double-naught spy naming tradition) on my machine the other week. I didn’t install it the day, or the week, it came out, in part because I’m lazy and in part because I like to read up a bit on how the new browser iterations are doing before I throw my doors open and invite them in. I installed it today, or more accurately Opera got tired of me ignoring it and installed it itself, and I instantly noticed a change.

I use Opera’s Speed Dial facility for my home page, and two things were different. One, there were more (and smaller) icon docks, requiring me to fill up the screen with a few more bookmarked sites (can’t have spots unfilled, it’s asymmetrical and my OCD wouldn’t like it). Moreover, I noticed that some sites didn’t use the usual half-random screenshots to serve as their icons. Instead, some of them, like SitePoint and Google Images, seemed to now sport spiffy, iPad-like icons (minus the glossy overlay). Previous iterations of Opera merely gave screen capture “icons.�

A portion of my current desktop in Opera 11. The variances in the icon displays are obvious.

It was obvious how useful the little icons are. The chunky SitePoint blue/orange stylized “S� for example, is instantly discernible, as is the colorful Google Images “logo� (like CBS, they use a tastefully subdued serif font along with an array of bright Crayola colors). On the other hand, some sites not using the icons didn’t fare so well. Mine, for example. I got a nearly-random screenshot of my LinkedIn and Twitter contact icons, nearly useless for identifying anything. A Facebook page I visit regularly got turned into a blurry mush, as the program squished the entire page down into a barely discernible thumbnail shot. The screengrabs for Six Revisions and Smashing Magazine didn’t do so hot, either; without the text blocks on the bottom of those icons, I couldn’t easily tell what page it was (though Smashing’s logo is more discernible than Six Revisions’s). And who wants to rely on a text block to identify something?

So, with a few minutes’ Googling, I found out that the icons are completely controllable from the client end — in other words, just like the Apple iPad/iPod/iPhone icons that we can also use on our websites (Apple calls them Webpage Icons; Android’s mobile browser uses something similar), we can add an icon that will stand out on Opera users’ Speed Dial. I also found that if we prefer, we can use Speed Dial-specific CSS or content, and even add a soupçon of HTML 5 goodness.

In other words, we control the appearance. I don’t know about you, but in this day and age of not rationally being able to design sites that appear pixel-identical from browser to browser, I’ll take a bit of control over appearance and presentation any time I can get it. And, as we’ll see shortly, the effect isn’t limited to Opera’s desktop Speed Dial, but translates to many mobile displays as well.

And doesn’t it look like a mobile desktop display? More on that later.

(Not sure how to get Opera to display Speed Dial as the home page? Online How To gives a quick and easy walkthrough, though as the article notes, Opera 11 uses Speed Dial as its default for the home page selection. Here’s how to change Speed Dial icons on your, and only your, browser. And if you are new to the whole idea of Speed Dial, Opera’s given us a slick, short YouTube video to peruse.)

Chrome with Speed Dial extension, in a screenshot from December 2009. (Photo credit: Technobuzz.)

Firefox has a Speed Dial extension that I started using after I got spoiled by Opera’s own feature. Firefox also offers a similar extension called Fast Dial, but it seems to have some workability issues. Chrome also has an extension that gives its users a Speed Dial, and in a fashion somewhat similar to Opera, it allows for the use of site logos as dial icons, though without the customizability.

Internet Explorer 9 has its own built-in Speed Dial feature that is similar to Chrome’s, though it doesn’t seem particularly customizable (I don’t use IE9, so I can’t say with any authority). Mac users have a reason to preen, as Safari has done Speed Dial for years, perhaps as far back as 2003, though I understand it’s an online app and not necessarily a browser inclusion (I don’t use Macs, either, so someone here can correct me). PCMag’s Michael Muchmore claims Opera did the Speed Dial first, for what that’s worth.

Going Mobile: Stealing A March On The Future

The question of “why bother?� is valid. After all, Opera’s desktop browser has less than a 5% market share no matter whose numbers you accept, and I’m certain most users of other browsers don’t use their Speed Dial facilities. But that’s not the entire deal. Opera is well known as a cutting-edge browser whose best features often find their way into other, more popular browsers down the road. (A list of Opera innovations going back to 1994 is available on Opera’s Wiki, if you’re interested. Opera has introduced such features as screen zooming, user-defined CSS, mouse gestures, pop-up blocking, and voice navigation, and it’s had Speed Dial since version 9.20 in 2007.)

I’m not going to start trying to sell Opera to you, you use whatever browser you prefer, but if Opera’s doing it today, Firefox and Chrome and the rest will likely do it tomorrow. So making an Speed Dial icon for your site now might only delight the very small percentage of users who use that facility for now, but chances are that icon, or a variant thereof, will come in handy for another browser’s own take on Speed Dial in the near future. Opera’s desktop enhancements often move on to the Opera Mobile and Mini browsers, which at last take have well over 100 million users between them. That’s a significant user share. And, as we’ll see along the way, the same technique can be used for placing your logo on Apple’s mobile touch-screen devices.

Speed Dials are nothing new, certainly. But the ability to customize them, now for Opera and almost certainly for other browsers in the near future, is something fairly different.

Apple iPad desktop, in a screenshot from April 2010. (Photo credit: Pat Moorhead.)

It’s also becoming axiomatic that if you’re designing for the future (even if that future is next month), you’re designing for mobile. If you’re not designing for mobile, you’re not serving your clients. Author and UI expert Luke Wroblewski points out that the trend towards mobile is already large and growing by leaps and bounds, and cites the stats to back it up.

A research firm made a bold prediction in December 2009 that by some time in 2012, global shipments of smartphones would surpass global shipments of desktops, notebooks, and laptops combined. That happened in late 2010, almost two years early. The gap will continue to increase. Since 2008, home usage of PCs has declined 20%, and will continue to shrink, as consumers increasingly rely on their smartphones to surf the Web.

In 2011, worldwide PC shipments fell over 3% and will continue to fall; US shipments fell over 10%. Many buyers who would have purchased a PC are now buying tablets such as the iPad. 22-25% of American and British mobile Internet users don’t bother with a desktop computer at all for Internet surfing. By November 2010, the number of visitors to web-based email sites dropped by 6%, while at the same time the number of users accessing their email by their mobile devices grew 36%. And of the mobile devices out there, Smashing Magazine author Nick Francis tells us that half of the smartphones being sold today run on the iPhone OS, and half of the remainder run on the Android OS. The Apple iPad tablet is selling like crazy.

Besides making me feel old (how about you?), these stats tell me that if I’m designing for a client and ignoring their mobile needs — and particularly failing to focus on the need to address their users’ Apple devices — I’m not serving their interests. The client may not even know that you’re not giving them what they need, but it’s on the designer and developer to know that needs exists, not the client. We know that more and more of our clients’ users may still be using a desktop or notebook to access the Internet today, but tomorrow they’ll be using a smartphone, and if not tomorrow, then check back next week, because they’ll have made the switch. Moreover, they think of websites less and less as “sitesâ€� and more as “appsâ€� (even though we know the terms aren’t interchangeable).

The techniques we’ll learn here apply right now to Opera Speed Dial for the PC and for the Apple touch screens. Tomorrow they’ll apply to more devices, probably the Opera Mobile and perhaps the Mini. And, I believe, other desktop/laptop (think “fixed� computers, though the term isn’t quite accurate) as well: I have a feeling that in a year’s time, or perhaps two, a lot of browsers’ home-page displays will employ some version of a mobile-like Speed Dial facility. Let’s steal a march on the future (and on our competitors) and see how it works.

Step One: How To Customize Your Site For Opera’s Speed Dial

[Y]ou can offer [an icon] that can be displayed on the [Apple touch screen] devices’ Home screen using the web clip feature. — Alexander Dawson, Six Revisions

The new [Opera] implementation also allows site developers to choose what appears in users’ Speed Dial entries for their sites. — Michael Muchmore, PC Magazine

Dev Opera’s Tiffany Brown wrote a quick and well-detailed how-to guide for whipping out an Opera Speed Dial icon for your browser, or for customizing your dial icon via CSS or other content. Brown verifies that if you don’t do anything special, Opera’s Speed Dial will just use the usual screen capture, and we already know how poorly that can turn out for you.

Unsurprisingly, the process started with the idea of the “favicon,â€� or the bookmark icon. We’ve been incorporating those as far back as 1999, when Microsoft bowled us all over with their inclusion in IE 5. They aren’t part of the HTML 4 specifications, but that didn’t stop many people, and browser vendors not named Microsoft didn’t wait long to add support for icon as a value for the rel attribute of the link element. Apple built on the idea of the favicon for its touch-device icons through the apple-touch-icon value. And HTML 5 has added icon as a valid and standardized value for the rel attribute, unless they change it next Tuesday.

(Note: Opera will not pick up a favicon for Speed Dial bookmarks. If it doesn’t find some kind of icon dedicated to the purpose — Opera doesn’t require the Opera-specific coding, but it does require link rel coding specifically for an icon. It won’t default to displaying the favicon, but instead will give users a screen capture as an “icon.â€�)

The Basic Icon Code

It doesn’t take a lot of time or effort to code a new icon for yourself. Brown gives us the dirt-simple code needed for the head of your document:

<head>
   <title>Spiffy page with Opera Speed Dial icon</title>
      <link rel="icon" type="image/png" href="http://path/to/logo.png">

</head>

It doesn’t get much easier than that (you can even leave out the type="image/png", as the PNG MIME type is assumed). You can see the rel difference from the Apple-specific code used for the Apple touch icons:

<link rel="apple-touch-icon" href="http://path/to/applelogo.png">

The icons themselves are a bit different from the Apple-dedicated icons, and may require you to take a run through Photoshop, GIMP, or your graphics editor of choice. The specs are simple. The minimum size is 114px by 114px (smaller ones, such as the Apple-sized 57×57 PNG icons, will be ignored, though Apple devices will use almost any reasonably sized icon, scale it down to 57×57, and add its own rounded corners — more on this in a bit) and the maximum is 256px in width by 160px in height. (Display sizes can be changed in the opera:config menu from your browser, but that only works for you and not the Opera user in Katmandu.) The file must be in either PNG, JPG, or GIF format — no SVGs.

(Web developer Mathias Bynens chided Apple for not “implement[ing] the standard <link rel=icon> and [coming] up with a more verbose proprietary link relation instead.” I have to agree.)

Using Multiple Icons

If you use an animated image, only the first frame will be used, so don’t bother. But, you can use multiple icons. What’s the difference? It will let you give users one icon to bookmark a page and a second for their Speed Dial. You’ll have to decide whether this is a nice plus or a source of potential confusion — we usually like some degree of uniformity among our logo presentations, for identification purposes.

If you want to go down that road, it’s not much harder than the first one. Here’s how:

<head>
   <title>Spiffy page with Opera Speed Dial icon</title>
      <link rel="icon" type="image/png" href="http://path/to/128x128image.png">
      <link rel="icon" type="image/png" href="http://path/to/200x200image.png">
</head>

The larger one will be chosen by Speed Dial as its icon, regardless of whether it comes first or second in the list. If both icons are the same size, Speed Dial will use the first and the second one will become the favicon.

So far it’s been easy. The next part is, well, easy too, but allows for a good bit more customization if you choose to implement it.

Using view-mode: minimized

Opera’s view-mode media feature lets you specify styles by viewing mode. If you use view-mode: minimized, you can do more than just provide a bigger, splashier favicon for your visitors’ Speed Dial. View-mode works like other media features such as device-width. You probably already knew the media query needs to be within an @media block. Here’s the code:

@media screen and (view-mode: minimized) {
   body {
      color: #fff;
      background: #b20000;
   }
}

This still has Opera use a screengrab as its “icon,� but it customizes the appearance: in this case, changing the font and background colors.

If you’d rather, you can link to an external style sheet (we’ll debate the pros and cons of that method some other time), and set the value of the media attribute to (view-mode: minimized):

<link rel=stylesheet type="text/css" href="minimizedstyles.css" media="(view-mode:minimized)">

If you use (view-mode: minimized), you’ll trigger a Speed Dial viewport that is 256 pixels wide by 160 pixels high. That may not be an issue for you, but it’s something to know.

What you definitely need to know is that if you use view-mode: minimized CSS, Speed Dial will use that as its first priority, over a more generically provided icon.

Other Possibilities

Brown gives examples of several other facilities: serving a different URL via an HTTP request, cycling through a number of pre-selected icons using auto-reload, using mod_rewrite to redirect Speed Dial requests, and using a server-side language such as PHP to serve different content at the same URL. If you find these interesting, I’ll leave you to review her article if you want to explore those aspects of Speed Dial.

Extras

The visual users among us might appreciate the YouTube walkthrough Opera gives us. Opera Mobile, very popular on Android and Symbian devices, also uses Speed Dial, as does Opera Mini, though neither Mobile nor Mini versions allow for client-side customization just yet. (Firefox and Chrome’s mobile versions have their own versions of Speed Dial, as does the Dolphin mobile browser.) If you’re up for taking a brief stroll into the weeds, the Dev Opera forum has a discussion on Brown’s article. And Opera’s planning on adding extensions to the Speed Dial in the new desktop release.

Gallery of Websites’ “App� Icons

An older Opera Speel Dial screenshot from early 2011. (Photo credit: Martin Brinkmann and Ghacks.net, used by permission.)

You saw how my computer looks with the new Speed Dial activated. For comparison purposes, this is how the Opera Speed Dial looked before Opera 11 on a desktop monitor without the use of the spiffy new customized icons. Not bad, but you can see how some of the screen captures don’t stand out very well. Even when I zoom the graphic, I can’t tell what sites all the screengrabs represent. The point? Many websites’ “app icons� still look the same in the upgraded Speed Dial. But, they don’t have to.

Opera Mobile screenshot from early 2011. Photo credit: Dev.Opera, used under Creative Commons license.

For comparison purposes, here’s what the Speed Dial looks like on an Opera Mobile browser. Obviously, all of the “icons� are screen grabs. I expect Opera will upgrade its Mobile Speed Dial facility to be customizable in the near future.

Let’s find some icons on the spiffy new Speed Dial and see how they look individually. Here’s a group of them from my desktop:

Four not-so-randomly selected Speed Dial icons from my desktop, circa April 2011.

I just chose four that represent the idea of the customizable icon or the well-selected screenshot: Google Images, SitePoint, Yahoo Mail, and Media Matters. SitePoint uses the apple-touch-icon value in its coding, and the others either use more generic coding or just let the browser do its screengrab without any intervention. (The blue border around some of the icons is triggered by mouse hover, and comes from me being a bit sloppy as I selected the icons for screenshotting. I left the borders on some of the shots because I rationalized that we need to see what the icons look like both with and without borders, but mostly because I was too lazy to redo them.)

The visual benefits are apparent. Google Images and Yahoo use their colorful text as their brand identity. The Media Matters logo displays clearly, though it’s apparent that the “icon� is a nicely, and serendipitously, selected chunk of the top left quadrant of their display (you can see the slice of navigation bar in the icon, though I don’t think that detracts from the strong visual impact of the brand presentation). SitePoint, with the usage of their Apple icon displaying on the Speed Dial screen, probably makes the strongest impact. Very clean and strong, and instantly recognizable.

Opera.com’s Speed Dial icon.

Here’s a shortcut to Opera’s own Speed Dial icon. Not surprisingly, they go with their big “O� logo, though I do miss the (apparently outdated) slanting shadow behind the letter. As with all the Speed Dial icons, the text is grabbed from the title of the page, explaining why it displays as “Opera brows …� We can, of course, control that with our own sites if we want to truncate or manipulate our titles to give a short, snappy text display, and users can configure their text to say whatever they want for the icon.

Apple.com’s Speed Dial icon.

This is a shot of Apple.com’s Speed Dial icon. Who expected this? I was expecting some version of the “apple� logo. It stands out nicely from the pack, and the title, the single word “Apple,� is effective, though I’m not sure the photo of the iPad does the trick for identification purposes.

Apple’s iPhone and iPad Speed Dial icons.

Surprisingly, neither Apple’s iPhone website nor its iPad site use a dedicated icon and don’t use the apple-touch-icon coding. The screen capture for the iPhone site is fairly striking; for the iPad, perhaps less so. Perhaps Apple doesn’t expect mobile users to visit these sites?

Microsoft.com’s Speed Dial icon.

Here’s the Microsoft Speed Dial icon. Or the screengrab that Opera uses for the icon. Obviously Microsoft isn’t trying to comply with Opera’s requirements, or Apple’s for that matter. Like almost everyone’s “icon� out there, it’s a screen capture from the top left of Microsoft’s home page. It’s serviceable, and that’s about all it has going for it.

Speed Dial icons from WordPress.com and Facebook pages.

Here are screencaptured “icons� from a WordPress blog and a Facebook page that I work with. You can see just how unsatisfactorily these serve the purpose of branding icons. They’re just two screenshots of incredibly compressed content. Even the identifying text blocks don’t help much.

Speed Dial icons from Six Revisions and Smashing Magazine.

These are the screencaptured “icons� from my bookmarks for Six Revisions and Smashing Magazine (showing then-current front page content). Although they’re not as bad as the two examples above, and Smashing’s logo is clearly visible, they’re not particularly pleasing. Six Revisions looks like a WordPress site, because the day I made the bookmark, the site was featuring an article about fine-tuning WordPress for SEO purposes. And Smashing’s article about achieving pixel perfection in Photoshop has long since gone off the front page, though a slice of the title remains in my icon. These icons don’t show fresh content, and don’t do justice to the sites they represent

NBC.com’s Speed Dial icon.

And ending where we started … While the other two major television networks just let Opera do a screengrab for their “icons,� NBC gives us the 21st-century version of the venerable peacock. They code a more widely applicable JPG to serve the purpose.

Step Two: Apple Plus Opera Equals a Sea Change In Browsing

An early version of a homemade “app� home page. (Photo credit: Geniosity, used by permission.)

The idea of a home page as a collection of “apps,� or more accurately links to a variety of user-selected websites, was not introduced with either Safari’s or Opera’s first Speed Dial. Computer maven John Dvorak has had a version of his “personal portal home page� available since 1999; all of his iterations use text links only, no icons, for faster loading time. More recently, a developer who blogs at Geniosity wrote about his own handcrafted, text-link driven home page he created for his copy of Firefox (image at left). The author tells me he still uses a version of this for his home page.There are other examples out there for the Googling.

I think the idea, lurking as it has on the edges of browser conventions for over a decade, is about to step to the forefront. If it does, it will be because mobile users want their desktop, laptop, and notebook browser displays to function in the same way as their mobile desktops — as a collection of personally selected, icon-based links to sites they use on a regular basis. This will be one of the first instances of mobile browsing conventions effecting a major change in “fixed� computer browsing.

I firmly believe (without any hard evidence, it must be noted) that sometime in the near future, desktop/laptop users will want to move to a Speed Dial-like browser interface that replicates what they have on their mobile devices. I see it as a sea change in browsing: instead of desktop/laptop browsers driving what mobile browsers are able to do, the reverse is going to happen. Instead of the traditional desktop “home page,� users will want a multi-app interface like they use on their phones and tablets.

If this does happen, then designers/developers who get ahead of the curve will be prepared when the changes come down the pike. We’ll already have our sites, and our clients’ sites, ready to display well in the near-future “desktop app interface� browser facility. (And if it doesn’t happen, we’ll have spent a very small amount of time on the preparation, with no harm to our sites. There really is no downside to this, as you can outfit a website for this new function in less time than it takes the local teenager to deliver you a pizza.)

So, if I have no hard evidence to show you, how can I convince you? Maybe I can’t. I may well be wrong. But I don’t think so. Years ago, science-fiction writer Robert Heinlein wrote, “It steamboats when it’s steamboat time.� (The historical reference is simple: while inventor Robert Fulton is credited with “inventing� the steamboat, there were a dozen guys on three continents working simultaneously on one variant of the steamboat or the other. Same thing with the telephone; while you and I learned that Alexander Graham Bell “invented� the contraption, there were a lot of guys working on one aspect or the other of voice-driven communication over a wire. It was the proper time in Western society’s technological development for steamboats and telephones; the need was there, and the devices’ creation and dissemination were inevitable.)

The wave of the future is mobile computing, and one of the most fundamental aspects of mobile computing is the app-laden desktop. The idea of opening a browser to a single home page is rapidly becoming obsolete, I feel. I started using Speed Dial on my browsers (all of them except IE) over a year ago, and I wouldn’t go back for a plateful of Grandma’s brownies. The usefulness and convenience of having (in the case of my Opera “home page�) 25 “apps� on my desktop as soon as I open my browser precludes me ever going back to a single home page again.

Still not convinced? Okay, open your desktop browser and stare at whatever home page you’ve chosen. Now flip open your mobile device and look at the array of apps and websites ready to be accessed. Which one gives you more options? Which one feels more modern? More useful? (There are certainly exceptions, particularly companies which require the employee to have the browser set to the company’s or department’s home page, other organizations such as libraries and community centers which have their home pages hard-set, and users who spend so much of their time working on a single site that for them, it wouldn’t make sense to have a “home page� full of icons to different sites when they will always go to the same site first.)

The Future Is Now

[I]n the coming years, more and more websites will have mobile incarnations that look a lot like applications. [P]eople won’t even realize that in the end, the next generation mobile web won.
— Kim Pimmel, Smashing Magazine

For now, the best way I see to prepare for this predicted oncoming mobile transformation is to combine the requirements of Apple’s touch-screen devices and Opera’s Speed Dial. Apple requires a PNG file of at least 57×57 for conversion to a touch-screen icon. Opera requires an icon at least 114×114. And Opera will recognize Apple’s touch-screen HTML code. I’d say create a PNG icon of 114×114 or larger, not forgetting Opera’s maximum size requirement of 256×160, and use the apple-touch-icon coding:

<head>
   <title>Spiffy page with icon for Apple and Opera</title>
      <link rel="apple-touch-icon" href="http://path/to/appleoperalogo.png">

</head>

Another viable option is to use two strings of code:

<head>
   <title>Spiffy page with icons for Apple and Opera</title>
      <link rel="apple-touch-icon" href="http://path/to/applelogo.png">
      <link rel="icon" href="http://path/to/speeddiallogo.png">
</head>

to ensure full inclusion and forwards compatibility, especially if, as I suspect, Chrome or Firefox will incorporate client-side customization to their own Speed Dial (or dial extensions) in the near future. By doing it this way, you can design separate icons for the touch devices and the browser(s) that take advantage of each one’s individual characteristics.

The 114×114 icon will be scaled down for different devices. The guys at DevDaily remind us that the iPhone 4 uses the 114×114 icon, whereas older iPhones will scale the icons down to 57×57. An iPad (v1) will scale it down to 72×72. The same 114×114 icon will work perfectly nicely on all these devices. (Bynens gives some instructions on forcing Apple’s iOS4.2 to use multiple icons for different device resolutions, if you’re interested.)

Here’s the proof in that particular pot of pudding: a before-and-after pairing of my site’s icon in Opera’s Speed Dial. For the second go-round, I used the apple-touch-icon coding so that the icon will appear on Apple’s touch-screen devices as well as in Opera’s Speed Dial.

Comparison of my site’s old and new Speed Dial icons.

The difference is marked. The first icon presents little more than icon gibberish; since I use text and not a graphic as an <h1> site heading in my site, Opera used some of the first graphics it came across (the three icon buttons) and went from there, providing a screen capture that does nothing whatsoever to identify my site as anything of consequence. It took me maybe ten minutes to whip out the new icon in Photoshop, write and insert the code line, and upload it. And that was with the assistance of tabby cats!

You guys could do it in less, I’m sure. I’m not entirely happy with it; it’s smaller than the bookmark canvas, the corners arent’t rounded, and where the icon canvas is rectangular, the icon itself is square (if the background were white, it wouldn’t matter as much). But whereas the first icon is almost entirely meaningless, the second one conveys.

Side note: There are tutorials out there advising us to create icons for Apple devices in Photoshop that include the rounded edges, drop shadows, and “gel” overlays. Don’t do it. Keep the icon edges sharp and don’t include the glossy overlays. Apple devices add those effects automatically. The icon I created will have the rounded edges, drop shadow, and glossy appearance on Apple devices. If you want to force Apple to use your own icon without modification, you can use this code:

<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png">

allowing you to add your own effects as you desire.

Bynens writes: “I’d recommend to always use precomposed icons. It gives you full control over your icon, and it’s the only kind of icon Android 2.1 supports.” He also notes that iOS1 and Blackberry’s OS6 do not support precomposed icons. He gives a somewhat more broad-based, cover-all-your-mobile-bases code snippet, which I’ll pass along:

<!-- For iPhone 4 with high-resolution Retina display: -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="apple-touch-icon-114x114-precomposed.png">
<!-- For first-generation iPad: -->
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="apple-touch-icon-72x72-precomposed.png">
<!-- For non-Retina iPhone, iPod Touch, and Android 2.1+ devices: -->
<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png">

Opera 11.10 supports precomposed icons as well as the Apple Touch icons.

Conclusion

Right now this works on Apple’s touch-screen devices and on Opera’s desktop browser. It’s my educated guess that within a matter of months, it will work on Opera’s Mobile browser and at a later time on the Mini as well. It wouldn’t surprise me if, by this time next year, the code string works on new Speed Dial facilities in Webkit and/or Gecko desktop and mobile browsers (be they actual browser inclusions or extensions). We might even see something of the sort in new IE versions; it’s never smart to count Redmond out. So: take a few minutes, steal a march on the competition, and add the feature to your sites right now. You and your clients will be glad you did.

There is a better way to do it. Find it. — Thomas A. Edison, who telephoned when it was telephone time.

Related Links

• Designing For The Future Web
• Smartphone Browser Landscape
• Everything you always wanted to know about touch icons
• Mobile Developer’s Icon & Image Checklist
• A Study of Trends in Mobile Design
• Mobile Web Design: Best Practices
• Making It a Mobile Web App
• Mobile Web Design: Is It Worth It?
• Holistic Web Browsing: Trends Of The Future
• Apps vs. the Web
• Web Development For The iPhone And iPad: Getting Started
• How to Use Your iPad for Real Design Work
• How to Make an HTML5 iPhone App
• How To Use CSS3 Media Queries To Create a Mobile Version of Your Website
• The State of the Mobile App World (infographic)

(vf) (il)

---

© Michael Tuck for Smashing Magazine, 2011. | Permalink | Post a comment | Smashing Shop | Smashing Network | About Us
Post tags: branding, logos, mobile

Designing an icon set may sound like an easy thing to do but in actuality it is much easier said than done. Many designers end up with a disaster, while some more matured and experienced designers successfully meet the expectations and deliver.

Generally speaking, a designer needs to learn the basic principles of icon design first, and must be aware of the significance of and function that icons perform on web sites and in user interfaces. In order to create useful and effective icons, one must know the difference between icon and logo designs; and most importantly, how to use your creativity to incorporate the characteristics we need in the icon successfully.

In the end of 2009, we had compiled a post on Illustrator Icon Tutorials, and since we have noticed that there are lots more outstanding tutorials on designing beautiful and attractive icon sets that have been shared by experienced designers all over the world. So, we have decided to bring you all another collection of Adobe Illustrator Icon tutorials.

Illustrator Icon Design Tutorials

How to make a realistic vintage typewriter in Illustrator
In this tutorial you will learn to craft your very own vintage typewriter with a realistic finish in Illustrator.

Create a Super Glue and a Paint Tube Icon
In the following tutorial you will learn how to create a super glue and a paint tube icon. These shiny icons are simple to create, we’ll cover a complete workflow, and show you techniques that will speed up your work process.

How to Create a Suitcase Icon in Adobe Illustrator
In the following tutorial you will learn to create a suitcase icon, suitable for a travel oriented site, or vacation brochure. Grab hold of your vector tools and let’s get to building.

Create simple but effective Weather Icons in adobe illustrator
In this tutorial you will learn how to create some attractive little weather icons in Adobe Illustrator.

How to Make a Detailed Printer Icon Using Illustrator
In this icon design tutorial, we will construct a desktop printer icon that is rich in detail. Ready? Perhaps you should serve yourself a cup of coffee and grab a bag of chips to pass the hunger while we draw our icon (it could take a while to finish)!

Create a Jeans Pocket Icon Using Adobe Illustrator
In this tutorial you will learn many useful and necessary techniques, such as the creation of vector texture, working with the Scatter Brush, using the Graphic Style palette, creating scuffs and creases on the fabric, using the Gradient Mesh, and more. Believe me, it’s worth your attention.

Create a Nice Award Medal Icon
In the following tutorial you will learn to create an icon of an award medal. You will use various shapes and pathfinder techniques to make this great looking icon. This illustration can be made without the use of the Pen Tool, so it’s a great tutorial for beginners. You will be proud of the results!

Syringe Icon Tutorial
In this tutorial you will learn how to create a medical syringe icon with illustrator CS5.

Create a Simple Paint Brush Icon
Here you can learn to create a quite simple paintbrush icon. For this fast tutorial you’ll use some basic tools like the Rectangle Tool, the Ellipse Tool or the Pen Tool. Then, for some neat effects you’ll need the Wrinkle Tool or the Warp for rougher effects.

Create a Tasty Burger Icon in Illustrator
In this delicious tutorial the artist will show you how to create a three-dimensional, scrumptious burger using Adobe Illustrator.

Quick Tip: Create a Shiny Shield with Illustrator
In this Quick Tip, you’ll learn how to harness the Appearance panel to make the basic structure of a shiny, beveled shield. Once the structure is in place, a few well-placed gradients are all it takes to achieve a sharp, polished look.

How to Create a Simple Cardboard Box Icon
In this tutorial you will learn how to create a simple cardboard icon using 3D Extrude & Bevel and basic gradient fills.

How to Create a Shiny Bucket Icon
In this tutorial you will learn how to make a realistic vector bucket icon. You will learn to use the 3D Revolve function, how to add realistic light effects and how to draw different objects to form a composition.

How to Create a Hyper-realistic Flashlight
In this tutorial you will learn how to create a very realistic illustration of a flashlight. This style of illustration is particularly popular for icons and technical illustrations. Although this tutorial is more advanced than others, don’t let that dissuade you from giving it a go, you will find it’s written in an easy to understand format and the results will be worth the perseverance.

Create a Shimmering Cityscape in Perspective, Using Illustrator CS5
The Perspective tools in Illustrator CS5 make it a lot easier to draw in perfect one, two or three-point perspective. Using symbols in conjunction with the Perspective tools will make quick work of this stylized cityscape.

Create a Safe Icon in Adobe Illustrator
In the following tutorial you will learn to create a safe icon. We’ll use a variety of Adobe Illustrator tools and techniques to create this icon. Learn how to make a place to stash your vector gold. It’s all about the details you put into this design to give it a bit of shine.

Quick Tip: How to Create a Simple 3D Lollipop Icon
In the following tutorial you will learn to create a lollipop icon. By using some simple shapes and the Distort & Transform function, you will see just how easy it is to make a great looking icon.

Make a Headphones Icon Using Adobe Illustrator
In this tutorial you will learn how to create a realistic image of headphones using simple and understandable techniques. It turns out that to get a good result there is no need to do it in a complex way. This tutorial is easy for any beginner to complete.

Make a Mailbox Icon Using Adobe Illustrator
Attention! This icon was not created solely for educational purposes. You can see the working process of real designing! We are going to use various professional techniques to create this icon, and artist will give you many useful tips along the way.

How to Use the Perspective Grid to Create a Modern TV
In this tutorial you will learn how to create your own modern TV on a stand. Using the Perspective Grid in Illustrator CS5 as the basis of your work you will learn how to quickly create a product illustration with perfect perspective.

Create a Modern Style Icon with a Professional Finish
If you want to learn how how to create a professional level Hard Drive icon with shading and lighting the techniques, then we have an awesome tutorial for you.

How to Use the Opacity Mask to Make High Gloss Icons and Reflections
The Opacity Mask is a somewhat hidden feature in Adobe Illustrator. Mask work like Photoshop’s alpha channels to obscure parts of your artwork. In this Quick Tip, you’ll learn how to use Opacity Masks to make reflections and highlights on a vector icon.

How to Create a Stylish Wireless Phone
In this tutorial you will learn how to make a great looking Wireless Phone. You will be using Offset Path and various gradients to create a three dimensional phone with realistic highlights and reflections.

The Perfect Diamond
In this tutorial you will learn how to cut a perfect diamond.

Vector Retro Television
In this tutorial, you will be shown how to make a stylish retro looking television in Adobe Illustrator. You will learn how to draw basic shapes, modify them and apply gradient and gradient mesh for more realism. Hope you enjoy this illustrator tutorial.

How To Create a Colorful Logo Style Icon in Illustrator
Follow this step by step to create a vibrant and colourful logo style icon graphic. This style of abstract three dimensional shape has become a popular trend in the world of logo design. Today we’ll look at how to build the graphic in Illustrator using a range of tools and techniques.

Create a Simple Trunk Icon
In the following tutorial created by Andrei Marius, you can learn to create a simple trunk icon. This detailed Illustrator tutorial uses some Extrude & Bevel 3d effects, gradients, offsets, and other techniques that can be easily applied to other icons ans illustrations.

Create a Dirty Water Drop Character Icon
Did you know that 3.575 million people die each year from water-related disease? Moreover, 884 million people lack access to safe water supplies; approximately one in eight people. That’s pretty crazy! To spread the awareness about The Water Crisis, you can create the following Illustrator icon and learn more about the crisis at Change.org.

Quick Tutorial: Create A Sleek Bevel Styled Icon With Just a Few Illustrator Tools
I love simple and sleek looking icons. I love them even more when they’re easy to make, and completely versatile as a foundation for a ton of other icons. With a little practice, you can probably whip out some really beautiful icons in under a few minutes!

Create A Briefcase Icon
In this tutorial, you will be shown how to create a briefcase icon with rectangles, ellipses, and gradients. This briefcase icon is great for web designs and user interfaces. Moreover, you can easily apply these techniques to other icons, logos, and illustrations.

How to make a Calendar icon
This tutorial is for any and all of those users out there interested in icon development. In this tutorial you are going to learn how the folks at DryIcons made the Calendar Icon from their most popular icon set “Coquette�.

Create a Windows Vista Icon
In this video we will go from the very start of the process to the very end of the process of duplicating the “my computer” icon for Windows Vista and making it all vector.

Vector coffee cup tutorial Illustrator
In this tutorial you will learn how to make a realistic looking vector cup of coffee.

Simple Skull Vector Icon
In this tutorial you will learn how to create an easy, light skull vector icon.

Create a vector stop watch icon
In this tutorial you will learn how to create a vector stop watch icon in Adobe Illustrator. The tutorial is covering all the steps needed to create a great looking, realistic stop watch. Only the basic tools in Illustrator such as Ellipse, Rectangle, Gradient and transformations are used to achieve the result you see here.

How to Design a Realistic Gamepad
In this tutorial, you will learn how to create an illustration of a gamepad using the Pen Tool, Gradients and Filters. You can use this illustration as the basis of an icon or for a decorative element on a larger design.

How to Draw a Glossy Yo-Yo Icon using Adobe Illustrator
Entertain yourself with this tutorial on creating a glossy yo-yo icon. You will learn how to combine different gradient and object effects to make a hyper realistic and shiny plastic surface. The result is a perfectly rendered and appealing icon that can be made in just one hour!

Create a 6-egg box (not necessarily for Easter)
In this tutorial you will learn how to create a carton containing half a dozen eggs. We will use 3D Rotate and Revolve Effects. We will also play a lot with masks. You may download the source file (created in Illustrator CS4, back-saved to CS2+).

Create a yummy vector cupcake
In this tutorial you will learn how to create a tasty looking vector cupcake treat.

Design a 3D Digital Clock Icon with Illustrator
This tutorial will explain how to create a glossy and stylized digital clock from scratch in Adobe Illustrator composed of basic shapes and nifty gradients. We will make a vector icon that will be scalable to any size by taking advantage of designing icons and graphics using a vector-based application like Illustrator.

Create a 3D Shipping Package Box Icon in Illustrator
This icon design tutorial will discuss how to create a shipping box/parcel box icon from scratch using Adobe Illustrator. We will use the 3D Extrude & Bevel effect, the Pen Tool for drawing simple shapes, several panels like the Transparency Panel and the Gradient Panel, and other fundamental Illustrator features.

Vector printer tutorial Illustrator
In this tutorial you will learn how to make a realistic vector printer in Adobe Illustrator.

Create a Gift Box Illustration
In this next tutorial you will learn how to create an illustration of a gift box. You will be shown how to use the rectangle tool and the star tool to create a pattern and a symbol. For the box and the bow shapes you will use the 3D Extrude&Bevel effect, the Map Art option plus some Warp effects and Pathfinder options.

Create a Laptop Icon
In the following tutorial you can learn to create the icon of a laptop. Once you’ve created the basic shapes, it’s easy to continue with the other components. Give it a try and you might learn some interesting stuff about the role of Smart Guides and Rectangular Grid Tool.

Create a Neat Price Tag
In the following tutorial you will learn how to create a nifty little price tag. First, for the basic shape, the grid and the Snap to Grid will significantly ease your work. Then, for the rest of the illustration you’ll use the Pathfinder options, multiple gradients and strokes plus some basic effects and brushes.

Create a Cute and Simple Hippo Face
In the following tutorial you’ll learn to create a simple hippo face. It’s made with simple tool like the Ellipse Tool, the Rectangle Tool and the Rounded Rectangle Tool. Also, for some discrete details I added some basic effects like the Inner Glow or the Gaussian Blur.

How to Make an Opulent Chair Icon
In this tutorial, you will learn how to make a chair icon using gradient mesh, the pathfinder tool and the appearance panel. Don’t let this tut deceive you, with a bit of imagination you can create an entire collection of soft furnishing icons in minutes with a few easy tricks.

How to Illustrate a Marvelous Violin Icon
If you want to learn how to create a marvelous violin icon, then we have an awesome tutorial for you. This tutorial covers how basic shapes and a solid understanding of perspective and volume work together to quickly build a successful icon.

How to Create a Distinguished Personal Diary Icon
In this tutorial we are going to create a stylish personal diary icon using Illustrator CS4. Gradient is at the core of this tutorial and we will be taking look at it in close detail. You will also learn how to use the opacity mask to create drop reflections and shadows.

Create a Stylized First Aid Icon in Illustrator
In this tutorial we’ll use a combination of craft and Illustrator’s 3D tools to create a first aid icon. You can use the techniques you learn in this tutorial to create realistic rounded box icons of your choice. This works well for complex icons at large sizes and scales down nicely.

Design a Stylish Wallet Icon in Illustrator
In this simple tutorial you will be shown how to create the wallet icon from the Cute Little Factory’s Women’s Icons using Adobe Illustrator CS4.

Reflections Done Right – Creating a Money Roll Icon
Cash-in when you follow this tutorial for creating accurate and logical reflections. Learn how to use shading and masking to create an illustration that’s worth the look.

Create a Classic Calendar Icon
Here you’ll learn to create a classic calendar icon. It’s a pretty simple and fast tutorial. You only need to know how to use the basic tools and some effects like the Inner Glow, the Drop Shadow, the Transform effect, the Rounded Corners effect or the Warp effect.

(rb)

As I’ve mentioned in posts like Beware of -webkit-text-size-adjust:none and Controlling text size in Safari for iOS without disabling user zoom, it is possible for web developers to prevent user zoom in Safari for iOS.

In many cases this won’t be a huge problem, either because the site/app uses a sensible text size to begin with or because the user has sharp eyes. But when you find yourself viewing a site or app that has too small text for you to read comfortably and has disabled user scaling in the browser, there is a trick that may help – the built-in Zoom function in iOS.

Read full post

Posted in Accessibility, iOS.

Copyright © Roger Johansson

See "Definitive Daft Punk" visualised in realtime »

I've always believed in the strong connection between sound and vision. Music videos are like little slices of synchronous art, designed to please all of your senses. (Go ahead, lick your TV next time "Poker Face" comes on!)

Every so often I delve into music making, but aside from the cover art for those releases my music has remained very separate from my visual design work. Now and into the future I plan to rectify this, and first cab off the ranks is a data visualisation I've had in my head for a while.

The art of the mashup has come to the fore in pop culture of recent years, but beyond Biggie Smalls crooning over Elton's keys I feel that the general public understands little of the nuance that goes into constructing a complex mashup from tiny pieces of songs.

In order to explain the layering and interplay that goes into something like a Girl Talk album or The 139 Mix Tape I decided to take my own mashup of Daft Punk's discography -- Definitive Daft Punk -- and reveal its entire structure: the cutting, layering, levels and equalisation of 23 different songs. By dividing up the sound data for each song and computing its appearance in realtime, the resulting visualisation gives you an understanding of the unique anatomy of this particular mashup.

The entire piece is composed from the latest HTML5 and CSS3 technology (canvas, audio, transforms & transitions) so you'll need a newer browser to view it in. I recommend Chrome because it pulls off the best performance with my mangled code. All of the waveform and spectrum visualisation is performed in realtime, so your browser is rendering a music video on the fly!

Hopefully it gives you a new insight into the artform of the mashup, otherwise you can just stare at the pretty shapes.

Despite contemporary browsers supporting a wealth of CSS3 properties, most designers and developers seem to focus on the quite harmless properties such as border-radius, box-shadow or transform. These are well documented, well tested and frequently used, and so it’s almost impossible to not stumble on them these days if you are designing websites.

But hidden deep within the treasure chests of browsers are advanced, heavily underrated properties that don’t get that much attention. Perhaps some of them rightly so, but others deserve more recognition. The greatest wealth lies under the hood of WebKit browsers, and in the age of iPhone, iPad and Android apps, getting acquainted with them can be quite useful. Even the Gecko engine, used by Firefox and the like, provides some distinct properties. In this article, we wisll look at some of the less known CSS 2.1 and CSS3 properties and their support in modern browsers.

Some explanation: For each property, I state the support: “WebKit” means that it is available only in browsers that use the WebKit engine (Safari, Chrome, iPhone, iPad, Android), and “Gecko” indicates the availability in Firefox and the like. Finally, certain properties are part of the official CSS 2.1. specification, which means that a broad range of browsers, even older ones, support them. Finally, a label of CSS3 indicates adherence to this specification, supported by the latest browser versions, such as Firefox 4, Chrome 10, Safari 5, Opera 11.10 and Internet Explorer 9.

WebKit-Only Properties

-webkit-mask

This property is quite extensive, so a detailed description is beyond the scope of this article and is certainly worth a more detailed examination, especially because it could turn out to be a time-saver in practical applications.

-webkit-mask makes it possible to apply a mask to an element, thereby enabling you to create a cut-out of any shape. The mask can either be a CSS3 gradient or a semi-transparent PNG image. An alpha value of 0 would cover the underlying element, and 1 would fully reveal the content behind. Related properties like -webkit-mask-clip, -webkit-mask-position and -webkit-mask-repeat rely heavily on the syntax of the ones from background. For more info, see the Surfin’ Safari blog and the link below.

Example

Image mask:

.element {
	background: url(img/image.jpg) repeat;
	-webkit-mask: url(img/mask.png);
}

Example

Gradient mask:

.element2 {
	background: url(img/image.jpg) repeat;
	-webkit-mask: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
}

Further reading: Safari Developer Library

-webkit-text-stroke

One of the shortcomings of CSS borders is that only rectangular ones are possible. A ray of hope is -webkit-text-stroke, which gives text a border. Setting not only the width but the color of the border is possible. And in combination with color: transparent, you can create outlined text.

Examples

Assigns a blue border with a 2-pixel width to all <h1> headings:

h1 {-webkit-text-stroke: 2px blue}

Another feature is the ability to smooth text by setting a transparent border of 1 pixel:

h2 {-webkit-text-stroke: 1px transparent}

Creates text with a red outline:

h3 {
	color: transparent;
	-webkit-text-stroke: 4px red;
}

Further reading: Safari Developer Library

-webkit-nbsp-mode

Wrapping can be pretty tricky. Sometimes you want text to break (and not wrap) at certain points, and other times you don’t want this to happen. One property to control this is -webkit-nbsp-mode. It lets you change the behavior of the   character, forcing text to break even where it is used. This behavior is enabled by the value space.

Further reading: Safari Developer Library

-webkit-tap-highlight-color

This one is just for iOS (iPhone and iPad). When you tap on a link or a JavaScript clickable element, it is highlighted by a semi-transparent gray background. To override this behavior, you can set -webkit-tap-highlight-color to any color. To disable this highlighting, a color with an alpha value of 0 must be used.

Example

Sets the highlight color to red, with a 50% opacity:

-webkit-tap-highlight-color: rgba(255,0,0,0.5);

Supported by: iOS only (iPhone and iPad).

Further reading: Safari Developer Library

zoom: reset

Normally, zoom is an Internet Explorer-only property. But in combination with the value reset, WebKit comes into play (which, funny enough, IE doesn’t support). It enables you to override the standard behavior of zooming on websites. If set with a CSS declaration, everything except the given element is enlarged when the user zooms on the page.

Further reading: Safari Developer Library

-webkit-margin-collapse

Here is a property with a quite limited practical use, but it is still worth mentioning. By default, the margins of two adjacent elements collapse, which means that the bottom distance of the first element and the top distance of the second element merge into a single gap.

The best example is two <p>s that share their margins when placed one after another. To control this behavior, we can use -webkit-margin-collapse, -webkit-margin-top-collapse or -webkit-margin-bottom-collapse. The standard value is collapse. The separate value stops the sharing of margins, which means that both the bottom margin of the first element and the top margin of the second are included.

Further reading: Safari Developer Library

-webkit-box-reflect

Do you remember the days when almost every website featured a reflection of either its logo or some text in the header? Thankfully, those days are gone, but if you’d like to make a subtle use of this technique for your buttons, navigation or other UI elements with CSS, then -webkit-box-reflect is the property for you.

It accepts the keywords above, below, left and right, which set where the reflection is drawn, as well as a numeric value that sets the distance between the element and its reflection. Beyond that, mask images are supported as well (see -webkit-mask for an explanation of masks). The reflection is created automatically and has no effect on the layout. Following elements are created using only CSS, and the second button is reflected using the -webkit-box-reflect-property.

Examples

This reflection would be shown under its parent element and have a spacing of 5 pixels:

-webkit-box-reflect: below 5px;

This reflection would be cast on the right side of the element, with no distance (0); additionally, a mask would be applied (url(mask.png)):

-webkit-box-reflect: right 0 url(mask.png);

Further reading: Safari Developer Library

-webkit-marquee

Here is another property that recalls the good ol’ days when marquees were quite common. Interesting that this widely dismissed property turns out to be be useful today, when we shift content on tiny mobile screens that would otherwise not be fully visible without wrapping.

The weather application by ozPDA makes great use of it. (If you don’t see shifting text, just select another city at the bottom of the app. WebKit browser required.)

Example

.marquee {
	white-space: nowrap;
	overflow:-webkit-marquee;
	width: 70px;
	-webkit-marquee-direction: forwards;
	-webkit-marquee-speed: slow;
	-webkit-marquee-style: alternate;
}

There are some prerequisites for the marquee to work. First, white-space must be set to nowrap if you want the text to be on one line. Also, overflow must be set to -webkit-marquee, and width set to something narrower than the full length of the text.

The remaining properties ensure that the text scrolls from left to right (-webkit-marquee-direction), shifts back and forth (-webkit-marquee-style) and moves at a slow rate (-webkit-marquee-speed). Additional properties are -webkit-marquee-repetition, which sets how many iterations the marquee should pass through, and -webkit-marquee-increment, which defines the degree of speed in each increment.

Further reading: Safari Developer Library

Gecko-Only Properties

font-size-adjust

Unfortunately, this useful CSS3 property is supported only by Firefox at the moment. We can use it to specify that the font size for a given element should relate to the height of lowercase letters (x-height) rather than the height of uppercase letters (cap height). For example, Verdana is much more legible at the same size than Times, which has a much shorter x-height. To compensate for this behavior, we can adjust the latter with font-size-adjust.

This property is particularly useful in CSS font stacks whose fonts have different x-heights. Even if you’re careful to use only similar fonts, font-size-adjust can provide a solution when problems arise.

Example

If Verdana is not installed on the user’s machine for some reason, then Arial is adjusted so that it has the same aspect ratio as Verdana, which is 0.58 (at a font size of 12px, differs on other sizes).

p {
	font-family:Verdana, Arial, sans-serif;
	font-size: 12px;
	font-size-adjust: 0.58;
}

Supported by: Gecko.

Further reading: Mozilla Developer Network

image-rendering

A few years ago, images that were not displayed at their original size and were scaled by designers, could appear unattractive or just plain wrong in the browser, depending on the size and context. Nowadays, browsers have a much better algorithm for displaying resized images, however, it’s great to have a full control over the ways your images will be displayed when scaled, especially with responsive images becoming a de facto standard in responsive Web designs.

This Gecko-specific property is particularly useful if you have an image with sharp lines and want to maintain them after resizing. The relevant value would be -moz-crisp-edges. The same algorithm is used at optimizeSpeed, whereas auto and optimizeQuality indicate the standard behavior (which is to resize elements with the best possible quality). The image-rendering property can also be applied to <video> and <canvas> elements, as well as background images. It is a CSS3 property, but is currently supported only by Firefox.

It’s also worth mentioning -ms-interpolation-mode: bicubic, although it is a proprietary Internet Explorer property. Nevertheless, it enables Internet Explorer 7 to render images at a much higher quality after resizing which is useful because by default this browser handles such tasks pretty poorly.

Supported by: Gecko.

Further reading: Mozilla Developer Network

-moz-border-top-colors

This property could be filed under ‘eye-candy’. It allows you to assign different colors to borders that are wider than 1 pixel. Also available are -moz-border-bottom-colors, -moz-border-left-colors and -moz-border-right-colors.

Unfortunately, there is no condensed version like -moz-border-colors for this property, so the border property must be set in order for it to work, whereas border-width should be the same as the number of the given color values. If it is not, then the last color value is taken for the rest of the border.

Example

Below, the element’s border would have a standard color of orange applied to the left and right side (because -moz-border-left-colors and -moz-border-right-colors are not set). The top and bottom borders have a kind of gradient, with the colors red, yellow and blue.

div {
	border: 3px solid orange;
	-moz-border-top-colors: red yellow blue;
	-moz-border-bottom-colors: red yellow blue;
}

Supported by: Gecko.

Further reading: Mozilla Developer Network

Mixed Properties

-webkit-user-select and -moz-user-select

There might be times when you don’t want users to be able to select text, whether to protect it from copying or for another reason. One solution is to set -webkit-user-select and -moz-user-select to none. Please use this property with caution: since most users are looking for information that they can copy and store for future reference, this property is neither helpful nor effective. In the end, the user could always look up the source code and take the content even if you have forbidden the traditional copy-and-paste. We do not know why this property exists in both WebKit and Gecko browsers.

Supported by: WebKit, Gecko.

Further reading: Safari Developer Library, Mozilla Developer Network

-webkit-appearance and -moz-appearance

Ever wanted to easily camouflage an image to look like a radio button? Or an input field to look like a checkbox? Then appearance will come in handy. Even if you wouldn’t always want to mask a link so that it looks like a button (see example below), it’s nice to know that you can do it if you want.

Example

a {
	-webkit-appearance: button;
	-moz-appearance: button;
}

Supported by: WebKit, Gecko.

Further reading: Safari Developer Library, Mozilla Developer Network

text-align: -webkit-center/-moz-center

This is one property (or value, to be exact) whose existence is quite surprising. To center a block-level element, one would usually set margin to 0 auto. But you could also set the text-align property of the element’s container to -moz-center and -webkit-center. You can align left and right with -moz-left and -webkit-left and then -moz-right and -webkit-right, respectively.

Supported by: WebKit, Gecko.

Further reading: Safari Developer Library, Mozilla Developer Network

CSS 2.1. Properties

counter-increment

How often have you wished you could automatically number an ordered list or all of the headings in an article? Unfortunately, there is still no CSS3 property for that. But let’s look back to CSS 2.1, in which counter-increment provides a solution. That means it’s been around for several years, and even supported in Internet Explorer 8. Did you know that? Me neither.

In conjunction with the :before pseudo-element and the content property, counter-increment can add automatic numbering to any HTML tag. Even nested counters are possible.

Example

For numbered headings, first reset the counter to start at 1:

body {counter-reset: thecounter}

Every <h1> would get the prefix “Section,” including a counter that automatically increments by 1 (which is default and can be omitted), where thecounter is the name of the counter:

.counter h1:before {
	counter-increment: thecounter 1;
	content:"Section"counter(thecounter)":";
}

Example

For a nested numbered list, the counter is reset and the automatic numbering of <ol> is switched off because it features no nesting:

ol {
    counter-reset: section;
    list-style-type: none;
}

Then, every <li> is given automatic incrementation, and the separator is set to be a point (.), followed by a blank.

li:before {
    counter-increment: section;
    content: counters(section,".")"";
}

<ol>
	<li>item</li>			<!-- 1 -->
	<li>item				  <!-- 2 -->
		<ol>
			<li>item</li>	<!-- 1.1 -->
			<li>item</li>	<!-- 1.2 -->
		</ol>
	</li>
	<li>item</li>			<!-- 3 -->
<ol>

Supported by: CSS 2.1., all modern browsers, IE 7+.

Further reading: W3C

quotes

Are you tired of using wrong quotes just because your CMS doesn’t know how to properly convert them to the right ones? Then start using the quotes property to set them how you want. This way, you can use any character. You would then assign the quotes to the desired element using the :before and :after pseudo-elements. Unfortunately, the otherwise progressive WebKit browsers don’t support this property, which means no quotes are shown at all.

Example

The first two characters determine the quotes for the first level of a quotation, the last two for the second level, and so on:

q {
	quotes: '«' '»' "‹" "›";
}

These two lines assign the quotes to the selected element:

q:before {content: open-quote}
q:after  {content: close-quote}

So, <p><q>This is a very <q>nice</q> quote.</q></p> would give us:
«This is a very ‹nice› quote.»

Supported by: CSS 2.1., all browsers except WebKit, even IE 7+.

Further reading: W3C

Question: To add the character directly, does the CSS document have to have a UTF-8 character set? That’s a tough one. Unfortunately, I can’t give a definitive answer. My experimentation has shown that no character set has to be set for the quotes property to work properly. However the utf-8 character set doesn’t work because it shows “brokenâ€� characters (for example, “»â€�). With the iso-8859-1 character set, everything works fine.

This is how the W3C describes it: “While the quotation marks specified by ‘quotes’ in the previous examples are conveniently located on computer keyboards, high-quality typesetting would require different ISO 10646 characters.�

CSS3 Properties You May Have Heard About But Can’t Remember

To round out things, let’s go over some CSS3 properties that are not well known and maybe not as appealing as the classic ones border-radius and box-shadow.

text-overflow

Perhaps you’re familiar with this problem: a certain area is too small for the text that it contains, and you have to use JavaScript to cut the string and append “…â€� so that it doesn’t blow out the box.

Forget that! With CSS3 and text-overflow: ellipsis, you can force text to automatically end with “…â€� if it is longer than the width of the container. The only requirement is to set overflow to hidden. Unfortunately, this is not supported by Firefox but will hopefully be implemented in a coming release.

Example

div {
	width: 100px;
	text-overflow: ellipsis;
}

Supported by: CSS 3, all browsers except Firefox, even IE6+.

Further reading: W3C

word-wrap

With text in a narrow column, sometimes portions of it are too long to wrap correctly. Link URLs especially cause trouble. If you don’t want to hide the overflowing text with overflow: hidden, then you can set word-wrap to break-word, which causes it to break when it reaches the limit of the container.

Example

div {
	width: 50px;
	word-wrap: break-word;
}

Supported by: CSS 3, all browsers, even IE6+.

Further reading: W3C

resize

If you use Firefox or Chrome, then you must have noticed that text areas by default have a little handle in the bottom-right corner that lets you resize them. This standard behavior is achieved by the CSS3 property resize: both.

But it’s not limited to text areas. It can be used on any HTML element. The horizontal and vertical values limit the resizing to the horizontal and vertical axes, respectively. The only requirement is that overflow be set to anything other than visible.

Supported by: CSS3, all the latest browsers except Opera and Internet Explorer.

Further reading: Safari Developer Library

background-attachment

When you assign a background image to an element that is set to overflow: auto, it is fixed to the background and doesn’t scroll. To disable this behavior and enable the image to scroll with the content, set background-attachment to local.

Supported by: CSS 3, all the latest browsers except Firefox.

Further reading: Safari Developer Library

text-rendering

With more and more websites rendering fonts via the @font-face attribute, legibility becomes a concern. Problems can occur particularly at small font sizes. While there is still no CSS property to control the subtle details of displaying fonts online, you can enable kerning and ligatures via text-rendering.

Gecko and WebKit browsers handle this property quite differently. The former enables these features by default, while you have to set it to optimizeLegibility in the latter.

Supported by: CSS3, all WebKit browsers and Firefox.

Further reading: Mozilla Developer Network

transform: rotateX/transform: rotateY

If you’ve already dived into CSS3 and transformations a bit, then you’re probably familiar with transform: rotate(), which rotates an element around its z-axis.

But did you know that it is also possible to spin it “into the deepâ€� (i.e. around its x-axis and y-axis)? These transformations are particularly useful in combination with -webkit-backface-visibility: hidden, if you want to rotate an element and reveal another one at its back. This technique is described by Andy Clarke in his latest book, Hardboiled Web Design, and it can be seen in action on a demo page.

Example

If you hover over the element, it will turn by 180°, revealing its back:

div:hover {
	transform: rotateY(180deg);
}

Quick tip: To just mirror an element, you can either set transform to rotateX(180deg) (and respectively rotateY) or set transform to scaleX(-1) (and respectively scaleY).

Supported by: CSS3, only WebKit browsers, in combination with -webkit-backface-visibility only Safari and iOS (iPhone and iPad).

Further reading: Safari Developer Library (transform: rotate, -webkit-backface-visibility)

Some Last Words

As you hopefully have seen, there are many unknown properties that range from being nice to hav to being very useful. Many of them are still at an experimental stage and may never leave it or even be discarded in future browser releases. Others will hopefully be adopted by all browser manufacturers in coming versions.

While it is hard to justify using some of them, the WebKit-specific ones are gaining more and more importance with the success of the iOS devices and Android. And of course some CSS3 properties are more or less ready to be used now.

And if you don’t like vendor-specific properties, you can see them as experiments that still could be implemented in the code to improve the user experience for users browsing with the modern browsers. By the way, CSS validator from the W3C now also supports vendor-specific properties, which result in warnings rather than errors.

Happy experimenting!

(al)

---

© Christian Krammer for Smashing Magazine, 2011. | Permalink | Post a comment | Smashing Shop | Smashing Network | About Us
Post tags: CSS