Posts Tagged article

Icon Fonts Follow up

Hicksdesign Go to the source

Since publishing a section from The Icon Handbook as part of 24 Ways last December ( Displaying Icons with Fonts and Data- Attributes ) I’ve been involved in a few discussions regarding its cons, some of which have since gained workarounds, and it felt a good time to do a follow up post. First of all, its worth mentioning the context of the article – it’s from Chapter 6, where all the various possible methods for deploying icons on the web are laid out. This includes creating icons with CSS , which isn’t something I’d recommend, but just may be a solution for someone out there and work well in a particular context. In the same vein, using fonts to display icons is just one of the options. Lets go over the 2 cons that keep coming up: Unicode Mapping Jon Tan states (rightly) that where matching unicode characters exist , the key should be mapped to that (such as the heart symbol for Favourites) and others that don’t to Private Use Areas where they have no associated meaning or content. This isn’t a problem with the technique as much as the current implementation of the fonts… Read the rest here

A List Apart: Issue 342

Jason Santa Maria Go to the source

The latest issue of A List Apart is one of my favorites in recent memory, and has three articles you can’t miss. In “ An Important Time for Design ”, Cameron Koczon challenges designers to be all that they can be: The web is going to increasingly shape our world and consequently our daily lives. We can either sit on the sidelines and submissively assist those who are doing the shaping or we can take a more active role in creating the future we want. This year, thanks to a spike in demand, designers have a chance to actively nudge the world in any direction they like. It’s a huge opportunity with a tiny window. Let’s not let it pass by. … Read the rest here

Handling CSS Transitions with prepareTransition

Snook Go to the source

Using CSS transitions can be quite fun. But what’s not fun is when you want to transition something that needs to use display:none or visibility:hidden (or really, any non-transitionable property). For example, let’s say you have a dialog. When the user clicks on the close button, you want the dialog to fade out — a simple transition from opacity:1 to opacity:0 . The problem is that the element is still there, even though you can’t see it… Read the rest here

Displaying Icons with Fonts and Data- Attributes

Hicksdesign Go to the source

Todays 24ways article is Displaying Icons with Fonts and Data- Attributes , taken partly from Chapter 6 of the upcoming Icon Handbook , but rewritten to fit to the 24ways format. Instead of using the traditional route of PNG s, web fonts offer a scalable and resolution independent solution. Combined with HTML5 data attributes, you can create one CSS rule to style them all in one go. This article covers both the advantages and disadvantages of the technique. Thanks must go to Drew Wilson who helped me understand how to use data attributes. He created Pictos the excellent icon font used in the article, and his experience in making Pictos was a valuable source of research… Read the rest here

A New Number 1

Mezzoblue Go to the source

Take it with the usual grain of salt that should accompany any news of global browser trends, but, extrapolating out from the 2011 trend in StatCounter’s Global Stats Chrome appears set to surpass IE as the most-used desktop browser some time next summer. And that will finally end the 13 year domination of the market by Internet Explorer. Though, I’m a little sad that Chrome’s market share is also coming at the expense of Firefox. … Read the rest here

Chocolate is for Girls

Jason Santa Maria Go to the source

by Jessica Hische My love affair with candy has been lifelong, and while each year I seem to have a new favorite, there’s one variable that unites them all—they are not chocolate. I’m almost cartoonish in my ladydom in so many ways, but a lover of chocolate I am not. That’s not to say that I don’t occasionally crave a Mast Brothers’ masterpiece, but if I had to choose a desert island treat, it would likely be fruity, tart, or even flowery. Essentially any candy that you can clearly envision rotting your teeth to the core, that is what I want. … Read the rest here

Hiatus

Cameron Moll Go to the source

It’s clear by now dust is gathering at this domain. I’ve been okay with that, and will continue to be okay with it, but only a little longer. I’ve been swamped with obligations on my current projects and have traveled much more than usual. I’ll visit NYC for the third time in a month starting next week, for example. More importantly, I’ve realized I need to realign the focus of this site. The tumblog, light-narrative format is definitely enjoyable, and it’s helped me blog more frequently, as well. … Read the rest here

New Work: Instapaper 4 Icon

SimpleBits Go to the source

I had the honor of creating the new Instapaper icon thanks to Jason Santa Maria and his art direction. The new app is superb, and it’s out today! Read all about it from creator Marco Arment and Jason . … Read the rest here

Instapaper 4

Jason Santa Maria Go to the source

The previous Instapaper icon on the left, and the updated icon on the right. Instapaper 4.0 is out! Instapaper is one of the best iOS app around. It lets you save articles from the web for offline reading, and strips out everything but the article text and images. It’s especially great for a subway commute. … Read the rest here

Yellow Fade Technique with CSS Animations

Snook Go to the source

I don’t think I’m the first person to come up with this idea but figured I’d document it. If you’re unfamiliar with the Yellow Fade Technique, make your way over to the 37signals article that ushered in the design effect that was all the rage for awhile. This is the same thing but using CSS animations. /** * Quick fade on target to attract user attention */ :target { -webkit-animation: target-fade 3s 1; -moz-animation: target-fade 3s 1; } @-webkit-keyframes target-fade { 0% { background-color: rgba(0,0,0,.1); } 100% { background-color: rgba(0,0,0,0); } } @-moz-keyframes target-fade { 0% { background-color: rgba(0,0,0,.1); } 100% { background-color: rgba(0,0,0,0); } } Just a short and sweet blog post. You can go back to work now. … Read the rest here

Big Innovation Lives Right on the Edge of Ridiculous Ideas

Hicksdesign Go to the source

Most people think that the opposite of play is work (especially in the corporate world) but the opposite is boredom or even depression. Great article about the design consultancy IDEO , and how they use a culture of play to support creativity. Comment on this … Read the rest here

Illusory Typography

Jason Santa Maria Go to the source

Stephen Doyle, that super smart guy that everyone loves, created some lovely tape illustration/lettering/installations for a New York Times Magazine story this weekend. Lots of people do these type illusions, but few do it this well. Check out the tape on the skeleton’s ribs! I want to be Stephen Doyle when I grow up. Also, don’t miss the behind the scenes video. … Read the rest here

A Farewell to CSS3 Gradients

Cameron Moll Go to the source

A Farewell to CSS3 Gradients : Alex Walker: While the idea of programmable gradients is great, using them is seriously messy. Even in perfect-​​browser-​​utopia, gradients are consciously limited to rudimentary linear or radial application. You certainly can’t combine them, or make them contour a shape or anything useful like that…. In short, [CSS gradients are] a blunt instrument with cranky syntax and patchy support. … Read the rest here

9/11 in Review

Cameron Moll Go to the source

I’ll keep this brief. I didn’t have a chance to see any of the tributes yesterday (or the news reports for that matter), as I had prior commitments. So, I spent this morning reviewing the day’s events and related material. Following are some of the highlights from my review. The Story of Michael Ragusa’s Burial You’ll have Command+F or Ctrl+F and search ‘ragusa’ to find his story in this lengthy article, as I can’t directly link to it. This was probably the most moving tribute I read leading up to yesterday. … Read the rest here

Jason Santa Maria: Five & Ten

Cameron Moll Go to the source

Jason Santa Maria: Five & Ten : Jason Santa Maria, describing his site’s redesign (which launched on Friday): I decided to not let the design of my site become a barrier to writing here. The most important thing this site does for me is give me a creative outlet to play and write. Anything that gets in the way of that needs to get the boot. The result is a responsive, Tumblr-esque digest of things interesting to and written by Jason, with much more design sense than most Tumblr sites — including mine. … Read the rest here

“Only Geeks Understand Link Icons”

Cameron Moll Go to the source

“Only Geeks Understand Link Icons” : Peter Steen Høgenhaug, suggesting we consider using something other than the ubiquitous link icon for inserting hypertext links in an application: All in all, only 35.29% of the test participants understood the chain icon, and only 25% understood the globe icon. While we didn’t set a minimum for success, clearly, 25% is not good when it comes to usability. When being interviewed one of our participants asked: ‘Why not just write WWW? Everyone understands that!’ … Read the rest here

About Face

Jason Santa Maria Go to the source

About Face , a new article series I’m writing over at the Typekit Blog where we’ll look at the details behind a typeface and try to crack what makes it special. First up, some of my favorites, Joshua Darden’s rounded wonder Omnes , and Carol Twombly’s gorgeous slab hybrid Chaparral (the same serif in use here on my site). I have a serious crush on Chaparral. … Read the rest here

On Competing with Circles

Cameron Moll Go to the source

On Competing with Circles : Dhanji R. Prasanna, former Google+ engineer: Now, I’m not saying that Circles is the one killer feature to bring down facebook — not at all. What I am saying, however, is that [Google+ and facebook] are not playing on an even field. Like Microsoft and online Office, it is incredibly difficult for facebook to make fundamental changes to their product suite to answer competitive threats. It is for this reason I feel that Google+ has a genuine shot at dethroning facebook. Read the full article for an interesting look at the development of the Circles concept and Facebook’s “unwillingness” (Dhanji’s words) to change substantially enough to combat it… Read the rest here

Results of The Web Design Survey, 2010

Eric Meyer Go to the source

Now available: the results from the A List Apart Survey for People Who Make Web Sites, 2010 . This is the fourth industry snapshot we’ve compiled, and the story that’s emerged over that time is proving to be pretty consistent. You can get a high-level view from the Introduction , and then dive deeper into the results in the following chapters. And, as is traditional, the Addendum contains links to the full (anonymized) data set in three formats for your own analytical investigations. We’d love to see what you come up with! Something that surprised me quite a bit was that in 2010 we got about half the number of respondents we’ve gotten in past years—not quite seventeen thousand participated in 2010 instead of just over thirty thousand as we saw in previous years. I’m not quite sure what to make of that… Read the rest here

Realigned and Responsive

Cameron Moll Go to the source

Left to right, top to bottom: Yours Truly, Khoi Vinh, Tina Roth Eisenberg, Greg Storey, Myles Grant, Veerle Pieters, Roger Johansson, Jesse Bennett-Chamberlain, Jeff Croft, Marc Roberts, Ben Bodien, Sarah Parmenter, Elliot Jay Stocks, Jon Hicks. I have the incredible fortune of working with the all-star team pictured above. Some serve as advisors, others actively create and maintain things. Together we’ve collaborated on a new version of Authentic Jobs that’s realigned, responsive, and better suited to connecting companies and creative professionals. Read the official announcement over at the Authentic Jobs blog regarding the new site, Authentic Jobs UK, and the iPad contest. You’ll also find additional remarks by Veerle Pieters , Sarah Parmenter , and Elliot Jay Stocks . … Read the rest here