Webdesigninformer.com

Cameron Moll Go to the source

Google and Arcade Fire Team Up for HTML5 ‘Experience’ : This multi-window browser experience is probably unlike anything you’ve seen before, though eerily reminiscent of the Javascript-controlled browser window resizing and spawning we saw a decade ago (most notably with Flash sites). The big headline here is that it’s built with HTML5. I’ve not dived into this enough to understand precisely what components of HTML5 are being used, and Google’s official post doesn’t offer details either. Given every link and article I’ve seen pointing to this today mentions HTML5, somebody oughta give us the deets. Note: I’ve linked to the Wired article, as the actual site is getting hammered with traffic. … Read the rest here

SimpleBits Go to the source

PaintbrushJS : New from Dave Shea , “…a lightweight, browser-based image processing library that can apply various visual filters to images within a web page.” I’m salivating just thinking of the possibilities here. Be sure to check out the demo . … Read the rest here

Cameron Moll Go to the source

Display Caps Lock Warning in Most Browsers : A script that adds WebKit-like notification inside the password field when the caps lock is enabled, in a progressive-enhancement kind of way. It’s not a lightweight script (about 170 lines) and James Edwards doesn’t clearly state which browsers currently support it. … Read the rest here

SimpleBits Go to the source

CSS3 Generator : Handy tool that spits out the syntax and associated vendor-prefixed CSS3 for properties like border-radius, box-shadow, multi-column layout and more. Especially helpful are the supported browsers icons with pop-up version numbers for each property. … Read the rest here

Mezzoblue Go to the source

I’m probably way behind the curve on this one, but I recently realized the following: All browsers that support the CSS text-shadow and box-shadow properties also support the new CSS3 RGBa syntax. Which means you can safely combine them today. That’s handy, because it means no worrying about matching a precise hex colour shadow to a specific hex colour background. Instead just let the browser blend. An example: p { text-shadow: rgba(0, 0, 0, 0.2) 0 1px 0; } That will produce a paragraph with a 20% opacity black drop shadow that will blend into any background colour below it. … Read the rest here

Cameron Moll Go to the source

A Real Web Design Application : This is a very thorough overview by Jason Santa Maria of the current tools available to web designers, their shortcomings, and the friction and waste created by transferring work from tool to browser. Jason’s argument toward the end of his article will certainly continue a debate that’s already raging: A web designer jumping into the browser before tackling the creative and messaging problems is akin to an architect hammering pieces of wood together and then measuring afterwards. The imaginative process is cut short by the tools at hand; and it’s that imagination—or spark—at the beginning of a design that lays the path for everything that follows. Without it, you’re at best able to make a website that looks like a website—rather than a design that tells a story in the form of a website. To read only the above quote on its own would be to take Jason’s remarks out of context. The paragraphs that follow demonstrate he favors designing in the browser if the tools to do so can be improved. … Read the rest here

Hicksdesign Go to the source

Last night I presented a 5 minute microslot on CSS Filters – excluding older versions of IE from seeing your CSS , and feeding extra styles to specific versions of IE and mobile browsers. The slides (with presenter notes) are now available to download from the new Speaking section. Comment on this … Read the rest here

Cameron Moll Go to the source

WebINK Font Embedding by Extensis : Another entry into the font embedding market, this one by Extensis. Fonts foundries currently include Mark Simonson Studio, Porchez Typofonderie, TypeTogether, URW, and exljbris. One nice feature seems to be the ability to control kerning within your font settings rather than just through the letter-spacing CSS property. I’m not certain, however, that kerning should be set off-site rather than within the CSS. (Though admittedly, the current CSS/browser support for kerning is lacking considerably.) … Read the rest here

Eric Meyer Go to the source

If you upgraded Thunderbird and discovered that the fonts used to display messages suddenly changed, and worse still, you were unable to get all messages to obey your font display settings, then this post is most likely for you. Here’s what happened to me: I upgraded to Thunderbird 3.1, and suddenly all my messages were in a font I didn’t recognize or appreciate. I insist on seeing only the plain text version (technically, the text/plain part) of all my e-mail; and what’s more, that it be displayed in a monospace font. Courier 13, in my case. So I made sure “View > Message Body As” was still set to “Plain Text”, which it was… Read the rest here

Cameron Moll Go to the source

Firefox Home for iPhone : Mozilla has submitted its first app to the App Store, and it’s a “lite” version of their Firefox browser. The entire premise seems to be built on picking up where you left off on your desktop PC. While a nice idea (and one possibly forced by Apple policy), it ignores the context of mobility — something I repeatedly hammered on in Mobile Web Design and something that still holds true today. Frankly, I don’t see my phone’s browser as an extension of my desktop browser. I wouldn’t place any bets on this app doing remarkably well. … Read the rest here

Cameron Moll Go to the source

How to Make Web Content Look Stunning on iPhone 4’s Retina Display : Aral Balkan’s tutorial includes a number of helpful resources, as well as a petition to browser vendors: I’d like to suggest that browsers adopt the same naming convention that Cocoa Touch uses to find and load high-DPI versions of image and video assets. That is, if I embed an image using the following code… … it should load in flower.jpg when the device-pixel-ratio is 1 but it should attempt to find an image called flower@2x.jpg at the same relative path if device-pixel-ratio is 2 (and so on, for higher pixel-ratios), falling back to the original graphic if it can’t find a high-resolution version. … Read the rest here

Hicksdesign Go to the source

I’ve been wanting a fluid layout on this site for about 5 years. I had a brief redesign back in 2005 where I flirted with it for a few months, but it was soon switched back to fixed as I couldn’t get it right. Last year, I discovered CSS media queries while working on the internal pages of the Opera Browser, and tried to implement it here. It was half-assed and was removed, again after a few months. It took Ethan Marcotte’s excellent article for A List Apart Responsive Web Design to motivate me to do it properly, as well as know HOW to do it properly. I don’t think I’ve read anything as exciting and inspirational for a long time… Read the rest here

Hicksdesign Go to the source

I’ve been wanting a fluid layout on this site for about 5 years. I had a brief redesign back in 2005 where I flirted with it for a few months, but it was soon switched back to fixed as I couldn’t get it right. Last year, I discovered CSS media queries while working on the internal pages of the Opera Browser, and tried to implement it here. It was half-assed and was removed, again after a few months. It took Ethan Marcotte’s excellent article for A List Apart Responsive Web Design to motivate me to do it properly, as well as know HOW to do it properly. I don’t think I’ve read anything as exciting and inspirational for a long time. … Read the rest here

Hicksdesign Go to the source

I’ve been wanting a fluid layout on this site for about 5 years. I had a brief redesign back in 2005 where I flirted with it for a few months, but it was soon switched back to fixed as I couldn’t get it right. Last year, I discovered CSS media queries while working on the internal pages of the Opera Browser, and tried to implement it here. It was half-assed and was removed, again after a few months. … Read the rest here

Hicksdesign Go to the source

I’ve been wanting a fluid layout on this site for about 5 years. I had a brief redesign back in 2005 where I flirted with it for a few months, but it was soon switched back to fixed as I couldn’t get it right. Last year, I discovered CSS media queries while working on the internal pages of the Opera Browser, and tried to implement it here. It was half-assed and was removed, again after a few months. It took Ethan Marcotte’s excellent article for A List Apart Responsive Web Design to motivate me to do it properly, as well as know HOW to do it properly. … Read the rest here

Hicksdesign Go to the source

I’ll be doing a 5 minute microslot on CSS filters at the next Oxford Geek Night on July 21st. CSS filters is the practice of linking to your stylesheets in different ways in order to control how different browsers and their versions get your CSS . It’s something I get quite a lot of questions about when people look at my source code, so I thought I’d explain it via a presentation! The OGN microslot is the ideal format for it. If you live nearish to Oxford, and haven’t been to Geek Night yet, do come and see what you’re missing. It’s a free event (sponsored by local gents/superstars Torchbox ) in the Jericho Tavern in Oxford… Read the rest here

Cameron Moll Go to the source

dConstruct 2010 : Having spoken at this conference before, I can vouch for a quality conference put on by Clearleft each year. And the design of this year’s site? Stunning, fresh, and love the parallax effect as you widen/narrow your browser window. … Read the rest here

Eric Meyer Go to the source

While I agree with Neven Mrgan’s Walled Gardens , I feel like the whole imagery of walled gardens is a bit of a metaphorical stretch—not because it’s inaccurate, but because it’s fundamentally unnecessary. We don’t need metaphors here. That’s because the iTunes App Store is just what its name states: it is a store. That has a fairly specific and intentional meaning in the world of commerce. It means that the stock is not infinite and that someone has screened it. … Read the rest here

Cameron Moll Go to the source

Prefetch Content with HTML5 : This sounds too easy. Add a line like this to your head element: or … and the browser fetches the content in the background as soon as the user’s computer is idle. If it sounds too easy, it’s probably because Firefox is currently the only browser to support this feature. But this has the potential to be a really useful feature. … Read the rest here

Mezzoblue Go to the source

You thought our long nightmare of PNG alpha transparency support was finally over as of IE7, didn’t you? Yeah, me too. Over the past few months I’ve been collaborating with Chris Glass on the newly-launched Joyent site. (When someone comes to you and says, hey, we have Chris Glass helping us out with this project and we’d like the two of you to work together, you jump at that chance.) I was tossing around ideas for building an interactive infographic Chris had designed, and thought of at least four different ways of pulling it off. We’re reaching this interesting point with front end web technology where we now have actual choices besides Flash for jobs like this… Read the rest here