We're growing into something new. Read More

Ben Seven

HTML5 Icons - Atrocious and uncommunicative

The entire point of an icon is to convey information. These icons are supposedly to represent the different aspects of HTML5, and you can use the W3C HTML5 Logo badge generator to show your clients and visitors just how much of a web nerd you are with a new and exciting badge on your site. The trouble being, these icons suck. Stylistic consistency does not make an icon set good - in fact I think it's done the opposite here and meant that icons that could be clear and informative are illegible hieroglyphs. Don't get me started on how little HTML5 actually needs a logo...


Should I work for Free? A Flowchart

Be smart. You're not just protecting yourself from being ripped off - you're protecting the rights of designers and developers everywhere to get paid properly for what we do.


What do you think of the term 'Web Architect'?

I'm a designer, who is coding more and more and having recently gone freelance part time, I've been doing some full web construction mostly centered around Wordpress - everything from planning, content advisory, wireframing, designing, building and training. The term 'web designer' is too limited: I do a bunch of identity design, print work and application / icon design. 'graphic & web designer' is nice, but it doesn't tell clients anything about my holistic approach... I was prompted by this post: drawar.com/posts/…-- - while some of the assertions it makes aren't hugely well proposed, it got me thinking. Why not 'web architect'? ar·chi·tect (ärk-tkt) n. 1. One who designs and supervises the construction of buildings or other large structures. The most common usage of the word architect is to describe, as above, somebody who designs buildings. 2. One that plans or devises: a country considered to be the chief architect of war in the Middle East. However, the basic definition of the word is, again as above, somebody who plans, or devises. 'Graphic designer & Web Architect'... what do you think?

Cufon.replace('h1', {
textShadow: '#fff -1px -1px, #333 1px 1px'

Cufon Letterpress text using text-shadow

For some reason when using Cufon in a web page, certain pieces of styling have to be declared in the replace script, rather than the stylesheet. I had to dig a bit to find this, so thought I'd share.


HTML Glyphs

I use HTML glyphs for my browser's bookmarks bar folder names - and my iOS folders too. This site is a massive list of HTML glyphs - makes a great reference tool. There's some nice options for Forrst glyphs too! ᐃ↟⇈

<link rel="apple-touch-icon-precomposed" media="screen 
and (resolution: 163dpi)" href="/iOS-57.png" />

<link rel="apple-touch-icon-precomposed" media="screen 
and (resolution: 132dpi)" href="/iOS-72.png" />

<link rel="apple-touch-icon-precomposed" media="screen 
and (resolution: 326dpi)" href="/iOS-114.png" />

Serve up iOS webapp icons at the appropriate resolution

Edit - there is an Updated Version to support iOS 4.2 Found via notes.jessedodds.com/ - code which targets each individual device according to the DPI of their screens—163dpi for the iPhone 3G and 3GS, 132dpi for the iPad and a whopping 326dpi for the iPhone4. Then serves up the appropriate size of icon. Using 'apple-touch-icon-precomposed' turns off the default gloss iOS adds to the webapp icon when saving to the home screen - use 'apple-touch-icon' to keep the gloss.