Webdesigninformer.com

SimpleBits Go to the source

A little over five years ago, Greg Storey suggested Whitney for the SimpleBits logotype that went along with a previous brand update . I’m thankful he did, because since then it’s become a favorite typeface around these parts, eventually becoming the base for the current ‘SB’ mark. Over the next few years,  Hoefler & Frere-Jones catalog became my standard go-to font choices for presentation slides. I was hooked. Over the weekend I made some subtle design tweaks here, and some not-so-subtle type refreshing. I’m honored to be beta testing H&FJ’s forthcoming webfonts offering. … Read the rest here

Jason Santa Maria Go to the source

Stamen has released some beautiful alternative takes on map tiles . They’re all free to use wherever you display OpenStreetMap data. All three are great, but the watercolor one is particularly pleasing to the eye, feeling a bit reminiscent of an old pirate treasure map. Maybe we just need to throw some all-caps italic Caslon on top of it. … Read the rest here

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

Snook Go to the source

My mind is on CSS quite a bit these days. At Shopify , I’m jumping into projects that already well under way. As a result, it’s been a great way to look at what I wrote in SMACSS and see how applicable it is to yet another project. (As if Yahoo! wasn’t already enough of a testing ground.) With Yahoo!, I (and a team of people) were writing the CSS from scratch and creating our mental map of the project as we went along. Jumping into the middle of a project as I am at Shopify, I have to try and figure out why things are done the way they are. Here’s an example of something that I ran into in the CSS: #loading-header .loading { background: url(spinner.gif) no-repeat 0 0; } [...separated by a few pages of code...] #content { [...separated by more code...] #loading-header { display:none; } .row { display:block; } &.loading { #loading-header { display:block; } .row { display:none; } } } The loading class has a spinner… Read the rest here

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

Hicksdesign Go to the source

The Icon Handbook is now available to buy . Here’s what it looks like: This is a book that I’ve been wanting to write for a long time. Whenever I’ve looked for a book on this subject, the only available publications are reference guides that simply reproduce as many symbols as possible. Where books have gone into theory, they were published decades before desktop computers, and therefore miss the most relevant and active context of icon use. … Read the rest here

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

Hicksdesign Go to the source

I’d reached that point in my rides, where I wanted some sort of cycling computer to track my progress and show my route, so I recently picked up a Biologic BikeMount to allow me to use my iPhone. Rather than buy a dedicated unit (such as a Garmin, which isn’t really an option financially at this point) this lets me reuse a device that’s already replaced lots of other separate devices like Camera and iPod. Here are my thoughts after 2 months of use. The phone gets clipped into a sturdy protective hardcase, which is then mounted to your handlebars via a supplied bracket. … Read the rest here

Andy Budd Go to the source

Like many geeks in the UK, the Tower Bridge Twitter account was one of the first Twitter Mashups I’d seen. It was also the point where I realised that Twitter was more than just a simple communication tool; it was a powerful and scriptable platform. Talking publicly available data, local developer Tom Armitage created a Twitter Bot which automatically Tweeted whenever the bridge opened and a ship passed through. This was a rare occurrence in the city and something most people have never seen, so the account gave Londoners a new way of experiencing an iconic part of the city. As such over 4,000 people, from local developers to London Cabbies followed the account which had remained active for several years… Read the rest here

Cameron Moll Go to the source

HTML Email Boilerplate : Tables for layout are lame, but they really are the only way to reliably craft HTML emails (currently). View source on the HTML email I sent recently and you’ll see markup similar to that of Sean Powell’s boilerplate. (I prefer only one td as a single wrapper rather than individual cells for the layout — div s can usually handle that just fine.) Update: Some of you have mentioned that the Authentic Jobs email I linked to doesn’t display nicely in Outlook 2007 or 2010 ( screenshot ). For the most part, I’m okay with those three items being stacked rather than in a row. However, if having your HTML email appear as similar as possible across all clients (which is still virtually impossible today), table cells are really the only way to go… Read the rest here

Hicksdesign Go to the source

…It’s a question that pops up every now then from other designers with colourblindness, asking me what techniques I use to work around it. I hesitate to ‘play the CB tambourine’ yet again, but for those that struggle with it there are 3 things I rely on a lot (apart from discovering HSL colour ): Ask people. If I’m ever unsure of a colour I’m using, or being asked to use, I ask someone that isn’t colourblind. That’s usually either Leigh or one of my studio mates at No73. Steal other colour schemes… Read the rest here

Hicksdesign Go to the source

Is a Macbook Air up to the job of being a primary working machine? It has for me… Since 1995, I’ve always used a Mac laptop as my primary (and only) work machine. When at the office, I plug it into a large screen with keyboard and mouse, and then at home or travelling I’ve got absolutely everything I need with me. Having seen the new generation Macbook Air in the flesh/aluminium, and how small and light it is compared to my unibody MacBook Pro, I wondered if it could be the way forward. The fact that I now cycle to work gave me more impetus to get something that wouldn’t be so heavy on my back. … Read the rest here

Cameron Moll Go to the source

Apple’s Role in the Earthquake : An email from an Apple Japan employee and friend of Kevin Rose: 7 hours and 118 aftershocks later, the store was still open. Why? Because with the phone and train lines down, taxis stopped, and millions of people stuck in the Tokyo shopping district scared, with no access to television, hundreds of people were swarming into Apple stores to watch the news on USTREAM and contact their families via Twitter, Facebook, and email…. You know how in disaster movies, people on the street gather around electronic shops that have TVs in the display windows so they can stay informed with what is going on? In this digital age, that’s what the Tokyo Apple stores became. … Read the rest here

Cameron Moll Go to the source

The Big Picture: Japan’s Vast Devastation : Heartbreaking. Please consider ways to donate , even by purchasing a poster by James White or a Salvation Army t-shirt by Joshua Smith . … Read the rest here

Eric Meyer Go to the source

When I saw Ian Lloyd tweet the words “Cunning. Like a fox. Neat little trick!” I knew I had to check it out, because Ian’s a sharp one. So I popped over to the linked CSS-Tricks article, Show and Edit Style Element , and checked it out. Cunning indeed! And yet, it immediately bothered me. … Read the rest here

Cameron Moll Go to the source

The King of Apple Talk Radio : Fortune writer Philip Elmer-DeWitt, interviewing the article’s subject, Dan Benjamin: In stark contrast to the rapid-fire, deadline-driven pace of most cable news and drive-time radio, Benjamin gives the impression that his guests have all the time in the world — which in a sense they do. Any subject that he and his co-hosts can’t dispose of in 60 to 90 minutes is simply pushed forward to next week’s show. And what co-hosts they are! ‘I’m fascinated by these guys — the pundits, the experts — who think about the stuff I care about every day. And I’m lucky enough to talk to each of them for an hour every week,’ says Benjamin. … Read the rest here

Cameron Moll Go to the source

Frank Chimero on the 13” MacBook Air : Frank gave up his 27” iMac in favor of the 13” Air and no external display. Here’s his reasoning: A person only flails around in regards to their rig when they don’t have a clear idea of what constitutes their work. Suitability and fit is paramount, and one is never going to find what they’re looking for if they don’t know what they need. So, I looked at my work, I watched how I used my computer for a day, and found out all I do is draw vector shapes, surf the web, listen to music, and bash words out in plain text. That’s hardly the type of activity that requires computational brute force, though I understand there are some of you out there that require just that. Not me though. … Read the rest here

Eric Meyer Go to the source

A few changes for beta 2 of the updated reset, presented here: /* http://meyerweb.com/eric/tools/css/reset/ v2.0b2 | 201101 NOTE: THIS IS A BETA VERSION (see previous line) USE WITH CAUTION AND TEST WITH ABANDON */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ”; content: none; } table { border-collapse: collapse; border-spacing: 0; } First, the small changes: adding embed , output , and ruby to the first rule. I went back and forth on these quite a bit, which is why they weren’t in the first cut. However, none of them seem to be replaced so they’re in. Others, such as command , are replaced and so stay out for the same reason that form inputs are left out. ( img is a special case.) The HTML5 element I’m still stuck on is datalist , which seems sort of replaced but then again maybe not. I’m really close to including it on the same grounds that I include canvas , but it’s hard to know if that’s a good idea… Read the rest here

Hicksdesign Go to the source

Boxee have released a Box update for the v1 firmware, fixing one of the big issues I and many others had – an option prioritise local files over online content. If it’s your first time starting the Box, you’ll now get this question on the way in: If it’s not, you can make the switch in Settings. Now when you go to Movies or Shows it displays your files by default. It now calls them ‘Local Movies’ which is an improvement over ‘Movies Files’, but I’d still prefer simply ‘Movies’. This update also adds nice features such as an alphabetical scrollbar, more sorting options and the option to set hourly scans of your media sources is back. So I can tick those of the ‘missing from the Boxee Beta’ list: Priority to Local Content More regular scanning of media sources A stylish UI Setting to change the background image (if we can just change that muddy default background image it would go a long way to helping the UI) Full screen online videos Missing Apps (Last.FM, Vimeo etc.) It sounds as if the last two are coming in the next update (out before the end of the year), which just leaves the question of the interface, and whether there will be any improvements there… Read the rest here

Snook Go to the source

I ran into this rather odd rendering in Firefox 3.6. I had a fieldset with content following it that was nested inside a list item. <ul> <li><fieldset> … </fieldset> <p>Additional information.</p> <li> </ul> The odd behaviour became quickly evident when my list bullet would not line up next to the fieldset, as expected. Instead, it lined up with the content that appeared immediately after the fieldset. I haven’t found an easy fix for this except to remove the fieldset entirely. … Read the rest here