Webdesigninformer.com

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

Hicksdesign Go to the source

…as we have a date! The Icon Handbook will be available to pre-order on December 20th ! More details will be released shortly, but the Five Simple Steps page has an introduction and table of contents to give you a flavour. Tagged: iconhandbook , icons … Read the rest here

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

Eric Meyer Go to the source

For very little reason other than I was curious to see what resulted, I’ve compiled a list of various CSS modules’ version histories, and then used CSS to turn it into a set of timelines . It’s kind of a low-cost way to visualize the life cycle of and energy going into various CSS modules. I’ll warn you up front that as of this writing the user interaction is not ideal, and in some places the presentation suffers from too much content overlap. This happens in timelines where lots of drafts were released in a short period of time. … Read the rest here

Snook Go to the source

With all my work at Yahoo!, I’d been thinking more and more about CSS architecture. I really sat down and took the time to analyze my process. What’s the most flexible but straightforward way to do it? How does this fit in with the team process and how does this work in comparison to how other people are doing it? I started making notes and eventually started writing up my thoughts… Read the rest here

Hicksdesign Go to the source

As the Apple TV doesn’t let you connect a drive directly with your content (it requires a ‘middle man’ of iTunes) getting your content to show up can be a little trying at times. Some of the reasons why it goes wrong are: The Mac serving the content isn’t on The Mac serving the content has dropped off the wifi network (happening a lot in Lion) The Mac serving the content doesn’t have iTunes open The Mac serving the content has iTunes open, but Home Sharing isn’t turned on (or using the same login as the one specified on Apple TV) The drive where all the content is stored has become unmounted, so iTunes can’t access it You’ve remounted the drive, but there’s a bug where if iTunes has tried to play content stored on the network drive, it corrupts the file path data, replacing it with some other obscure file (in my case, it seems to be a photo folder bizarrely) In short, there’s too much to go wrong, and Apple TV is on the naughty step until these steps can be bypassed without hacks. Rant over. Tagged: appletv , mediacentre … Read the rest here

Andy Budd Go to the source

Over the last few years I’ve noticed a strange and disturbing trend amongst web practitioners. There was a time—not so long ago—when passionate individuals would blog about their work for no other reason than to share their discoveries. The more prolific of these individuals built up an online reputation and became seen as experts. Some of the more articulate ones were asked to write books or present their thoughts at conferences, and received a modicum of success. After years of sharing their knowledge freely, some were able to capitalise on their notoriety by securing jobs at interesting companies or setting up small agencies. A few even managed to make a living off publishing books and speaking at conferences, although how they managed this is anybodies guess… Read the rest here

Cameron Moll Go to the source

Designers vs Coding : Frank Chimero, a relatively recent convert to HTML/CSS: Good design and good markup provide structure to content. Good markup is a fundamental part of good design: beautiful on the inside, beautiful on the outside. … Read the rest here

Adactio Go to the source

Right after I wrote about combining flexbox with responsive design —to switch the display of content and navigation based on browser size—I received an email from Raphaël Goetter . He pointed out a really elegant solution to the same use-case that makes use of display:table . Let’s take the same markup as before: <body> <div role=”main”> <p>This is the main content.</p> </div> <nav role=”navigation”> <p>This is the navigation.</p> <ol> <li><a href=”#”>foo</a></li> <li><a href=”#”>bar</a></li> <li><a href=”#”>baz</a></li> </ol> </nav> </body> The source order reflects the order I want on small-screen devices (feature phones, smart phones, etc.). Once the viewport allows it, I’d like to put that navigation at the top. I can do this by wrapping some display declarations in a media query: @media screen and (min-width: 30em) { body { display: table; caption-side: top; } [role="navigation"] { display: table-caption; } } That’s it… Read the rest here

Snook Go to the source

Just a quick documentation of this interesting bug. This only happens in Internet Explorer 8 (but not 7 or 9), which was interesting. If you have an element with long text but it has white-space:nowrap to prevent text wrapping with a max-width and overflow:hidden to clip the overflowed text, then a floated container (which should collapse to the width of the content) will collapse to the width of the text as if it was not set to be clipped. The use of text-overflow:ellipsis has no effect on this. … Read the rest here

Cameron Moll Go to the source

Vimeo PRO : Yesterday Vimeo unveiled its PRO account for businesses . They’ve had a long-standing policy against commercial videos on the site, though many have slipped past the radar if they were creative or artistic enough. Now they welcome business accounts, but with a catch: Vimeo PRO lives as a separate service — invisible to the Vimeo.com world…. Vimeo PRO accounts do not have access to the Vimeo community by default, meaning PRO accounts’ activity and videos will not show up on Vimeo.com, and they do not have the ability to like or comment. We’ve taken this step to keep commercial content hidden and maintain the current Community Guidelines. Commercial videos are housed in customizable portfolio pages, and the Vimeo player can be fully customized to your liking (including company logo)… Read the rest here

Snook Go to the source

I’ve been thinking quite a bit about CSS architecture these days. One thing in particular that has crossed my mind is how to handle certain situations. For example, we want to hide content on the page and then reveal it (or vice versa). In JavaScript, this is relatively straightforward: get an element, and apply a class or remove a class to change the state of the element. … Read the rest here

Cameron Moll Go to the source

Andy Rutledge: Redesigning NYTimes.com : Andy Rutledge: Regarding content strategy and mechanism, today’s ‘news’ is rife with irrelevancies and distractions. Part of this is due to the news industry’s abandonment of actual journalism, but much of it is due to thoughtless promotional strategy and pathetic pandering. I suggest that digital news acquire a responsible and more usable approach. Andy’s arguments and mockups are both very well-conceived — I would love to see online journalism (all of it, not just NYT) head in this direction. His design concepts are fabulous. I do believe, however, there should be an affordance for social components in news media, which Andy leaves out of his concepts… Read the rest here

Cameron Moll Go to the source

“You Interact with the Content, Not the OS” : Joseph Cohen: They reversed the direction of mouse scrolling! Crazy! But really, they needed to. With Lion, Apple is trying to change the user experience metaphor that has governed OS design since the 80s. It was a symbolic move, but one, to me, that ties together the new interaction paradigm — you interact with the content, not the OS. Lion — at $29 — seems like an incremental upgrade. But I guarantee that it will prove to be one of Apple’s boldest moves in defining how we interact with computers of the future. … Read the rest here

Cameron Moll Go to the source

Content Choreography : I’m a little late linking to this, but no matter. Trent Walton, on the topic of responsive/adaptive layouts and how content architecture should be examined with scrutiny by all team members: The production model of passing a site down the assembly line from design to development to launch seems to be an inefficient approach for responsive & adaptive site design. I think the Paravel method of gathering around a table & slugging every decision out until launch lends itself to the level of reiteration necessary for these projects. We’ve found that the best way forward is to pull all members of a team together to design, build, test and evaluate in multiple quick rounds. And of course, Trent’s editorial artwork is terrific, as always. … 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

Andy Budd Go to the source

There’s an interesting debate happening in the world of mobile design at the moment. In one camp we have the “nativists” who believe that the best mobile experiences are tailored to a particular device. These are the people focused on creating platform specific mobile apps and mobile websites. Then we have the “universalists” who believe in the “one web”, a place where all content and services can be delivered to multiple devices through the same URL. This division is causing me a bit of a quandary. … Read the rest here

Hicksdesign Go to the source

Two media-centre related things I’ve done recently: Jailbreak my Apple TV to install ATV Flash Black , and update my Boxee Box to v1.1. Heres a quick report of how it went: First the ATV : When the beta of ATV Flash Black was announced last December, I looked into and disregarded, the jailbreak process. Too much hassle if you had updated your ATV from the factory supplied version. Now, the process is straightforward with Firecore’s Season Pass app and a micro-usb cable. Likewise, installing ATV Black was easy when following the instructions, and I was able to add extras onto my Apple TV. … Read the rest here

Cameron Moll Go to the source

Responsive Web Design or Separate Mobile Site? Eh. It Depends. : Josh Clark, author of Tapworthy: Designing Great iPhone Apps , summarizes and opines on many of the debates circulating the community right now regarding responsive design and mobile-optimized content. It’s a good read. … Read the rest here