What bugs me about “content out”

“It's a mistake to let content drive design, just as it was to let design drive content. We mustn't let the pendulum swing too far. If we are to go beyond mere information and style to create meaning, the two must be partners, feeding from and influencing each other.”


Vendor Prefixes Are Hurting the Web

Arguments & links to counter arguments as to whether vendor prefixes are hurting the web.


The next alistapart survey is out


Responsive Advertising

“Complex ads such as flyouts and takeovers would require much more thought and change. How could you effectively engage with an audience across the various viewport sizes when there is rich interaction involved?”

via Jaik Dean

Semantics in practice and mapping semantic value to its consumers

“The practicalities of making accessible web content are messy, but important. The fact that we seem to spend more time on div vs article vs. section than on learning ARIA is a crime. (Furthermore, learning ARIA isn't complete unless you're listening to the results in a screenreader.)”


Scalable & Modular Architecture for CSS has been updated with a new prototyping section


instacss.com lets you browse CSS documentation with style


A comprehensive list of CSS power tools from Nicole Sullivan


The Good, the Bad, and the Logo

“I don't believe a logo needs to be content. While your logo is an image in one sense, it doesn't have to be an image in the document. It should never need to be an image nested inside a H1 either.”


Good F*cking Advice on your desktop

via John Owens

Verdana & Georgia have been modernised & extended

They look great but * shock horror * they cost money to use. People demanding payment for work? The cheek of it!


Codekit lets you compile Less, Sass, Stylus & CoffeeScript files

via Richard Powell

Melvin the Magical Mixed Media Machine


Web Symbols typeface

“We came up with the typeface that includes all frequently used iconographics and symbols. Although, the idea is not hot-baked - Webdings and Windings have been around for quite a time - all of them have a lot of unnecessary and sometimes actually scary symbols.”


Structuring a responsive stylesheet


Nokia flexible user interface demo

Nokia has blown Roel Vertegaal's e-ink flexible display out of the water with this full colour video flexible display. I'm still not convinced that this is a great way to interact with a device. It just looks cumbersome. Although having a flexible device might be nice to hold. Sony have developed something similar so it's probably safe to assume flexible displays will be coming off the concept shelf at some point.


Nokia Morph Concept

Nokia have come up with a concept exploring the benefits of nano technology on communication devices. In this example 'Morph' is a phone which wraps around your wrist, can sense it's environment, harvests energy & is self cleaning.


Optimising your layout for phones and tablets using viewport and media queries


I'm A Runner: Haruki Murakami

Haruki Murakami author of 'Kafka on the Shore' started running when he was 30 years old. He now runs 10k 6 days a week.

“I try to get my mind relaxed and rested while running by not thinking about anything. I run to cool down my nerves that get heated up while writing.”

When someone voluntarily gets up at 5am you know they've got something really worth getting up for.


Smiley slider is simple yet creates a powerful user interaction...


Star Wars fans your dreams have come true with this 'True 3D' display


Spec Work: What's all the fuss about?

Rob Hawkes discusses the differences between spec work, crowd-sourcing & competition. This clears up the issues quite nicely.

“Crowd sourcing is all about the control being given to the crowd to achieve something that the entire crowd has a joint interest in/desire to see changed. The originator usually has little to no control over the process... ...competitions are technically paid work for one lucky person, and the fact that so many others have wasted their time, in the sense of lost pay, is where the hatred for this system stems from.”


Less is more. Gabe Newell on game pricing.

“Newell explains how the various offers that have appeared on Steam are as much science as they are capitalism.”


Bad Ass js is back up & running covering the latest Javascript goodness from around the web.


RailwayJS is a MVC framework for Node.js


Microsoft research sensing gestures using the body as an antenna

How would you like to switch off a light by tapping a wall? Researchers have managed to utilise a phenomenon between the human body & ambient electromagnetic noise to allow for gestures to control electronics around the home.

“By examining the noise picked up by the body, we have shown that we can infer the absolute touch position around a light switch or blank wall near electrical wiring within the home with nearly 87% accuracy. The location of which wall in the home a person is touching has nearly 100% classification accuracy. We also demonstrated the potential for hovering and continuously tracking a hand on a wall to enable a richer set of interaction techniques.”

Who said Microsoft don't do anything innovative? Whether it becomes a reality or not is a different matter.


Terse JavaScript 101 - Optimise your javascript

via James Lewis

What do people use to get stuff done?

I'm not jealous of John Resig (creator of jQuery) at all. Not at all.

“Primary work computer: 27" iMac (i7 processor, 8GB RAM) with 22" secondary monitor, primary laptop is a 13" Macbook Pro (Core 2 Duo, 4 GB RAM). I have a 60Mb/s cable Internet connection through RCN. I have a number of backup machines, mostly used for testing, including a PC running Windows XP, a Chromebook, and a MacBook. I also utilize a large number of phones and tablets for testing, most of which are located at Filament Group, the folks who are behind jQuery Mobile.”

Bastard.


Your life in film. New service letterboxd.com provides a social film diary.

Letterboxd (which takes it name from the "practice of transferring film shot in a widescreen aspect ratio to standard-width video formats while preserving the film's original aspect ratio") is a new website which lets you create a diary of what you've been watching, ratings & reviews. Whilst providing you with your friends latest watched & film lists (if they've signed up). The thing I like about letterboxd is that it's taking the pub conversation about films online. If you're a fan of film & appreciate your friends opinions then you'll get on well with letterboxd. It also has a rather lovely user interface which is an absolute pleasure to use. If you need an invite then give me a shout on Twitter.


Nyan Cat infiltrates Unreal Tournament


Learn better CSS with Chris Coyer


F*ck You. Pay Me!

Mike Monteiro talks about how to get your clients to pay up!

via James O'Connell

Why I've finally had it with my Linux server and I'm moving back to Windows

“I've had it. I've had it with all the patched together pieces and parts that all have to be just the right versions, with just the right dependencies, compiled in just the right way, during just the right phase of the moon, with just the right number of people tilting left at just the right time.”

I regret that I experimented with Ubuntu on my Samsung netbook because it turned out to be (after much use) rubbish. I found the updates to be even more annoying than Windows. The user interface is crap. I just love it when you increase the font size of an interface only to have the submit & cancel buttons on dialog boxes hide below the screen. In the case of Ubuntu you get what you pay for. Which is a shame.

via Ste Brennan

How to Use Games to Excel at Life and Work

Notes:

Summary:

This could be the reason why small phone app games don't have longevity & could be the downfall of foursquare. The different kind of skills utilised in these games don't increase. They usually involve one kind of skill & then reward you for improving that one skill. Winning badges is going to get boring. Another example could be fitocracy, the exercise app which rewards you with points, could improve their experience not just by rewarding you for doing exercise but rewarding you for learning new types of exercise.


Rubber magnets + iron filings = iron type


Dive into HTML5 has many new homes

The rather fantastic 'Dive into HTML5' by Mark Pilgrim recently disappeared off the web for some unknown reason but luckily someone has managed to get a copy & it's now being hosted in multiple places for all to see.

This shows the fragility of digital assets and demonstrates the need for multiple back-ups of resources the community find useful. In my opinion there is a common misconception that things posted on the web will stay on the web. With the flick of a switch a resource you find valuable can disappear.


The user interface for Inbox2 is an absolute delight


Use ugly javascript to improve your javascript


Fancy making a 3D game in javascript? This might help...


Contrivance and Extortion: In-App Purchases & Micro-transactions

“Games that do both of these things, that abuse checklists and include In-App Purchases, are deliberately contriving their designs in the worst way in order to extort money from players.”


We need one of these for the office. Mid air pan & zoom on large displays.


How Diaspora* Found Its Tiger Stripe in the Midst of a Paypal Fiasco

PayPal froze all Diaspora* donation funds for no apparent reason. It's pretty disgusting & the only good thing to come out of it is that startup Stripe have stepped up to provide an alternate service. It's about time PayPal had some competition.


Should social media be paying you?

Jeff Croft writes about the success of Lendle - an e-book lending service which pays it's users. It's good to see another article exploring the idea of data ownership.

“As social media companies become profitable, they should be sharing some of it with their users. After all, without them, they'd be nothing as companies.”


Adobe acquire Typekit & PhoneGap. Propose CSS regions & shaders

We've seen Adobe provide a flash to HTML converter in Wallaby & HTML5 animation package in Adobe Edge & it looks like they are securing a back up plan as flash popularity among web developers wane.

“Adobe will offer developers the choice of two powerful solutions for cross-platform development of native mobile apps, one using HTML5 and JavaScript with PhoneGap and the other using Adobe Flash with Adobe AIR”

Adobe have also submitted a proposal for CSS regions. These will bring extra options for developers who want magazine like layouts. For example content flowing from one box to another.

Even more exciting is the proposal of CSS shaders

“With CSS shaders, you can turn your HTML or SVG element into a vertex mesh. That mesh is then processed by a vertex shader which makes any kinds of distortion, in 3D space, possible.”

It's applied to an element using a custom filter & can create effects like page turning, wobbles & distortion.

Adobe acquired TypeKit which will stay as a stand alone service for now but will be eventually integrated AdobeĀ® Creative Cloud...

“Adobe Creative Cloud will become the hub for viewing, sharing and syncing of files created by Adobe Touch Apps and Adobe Creative Suite, and includes 20GB of cloud storage. Access to the portfolio of Adobe Creative Suite tools as well as the six Adobe Touch Apps announced today.”

Could this be Photoshop on demand?


Letter kerning can be addictive...


Elements of Typographic Style Applied to the Web

Based on the definitive typography book 'The Elements of Typographic Style' by Robert Bringhurst.


Virtual Possessions Have Powerful Hold On Teenagers

“For the young people in the CMU study, a digital photo that friends have tagged, linked and annotated is more meaningful than a photo in a frame or a drawer.”

“The "placelessness" of virtual possessions stored online rather than on a computer often enhanced their value because they were always available”

Does this make it even more important that we take care where we store our digital assets if they mean more to us? Adding our photos to Facebook is a bit like giving a photo album to Tesco to store. Then again where else can you get the same level of reliability & interaction for free?


Notes from an introduction to Node.js - Server side Javascript

express.js is an application framework which utilises node.js & also CoffeeKup which is mark up as CoffeeScript. markup.io is a great example of a web app built on node.js & express.js - it allows you to draw all over web pages.


If your house was burning down what handful of items would you save?


The rise of the intermediaries. Optimisation vs Readability.

In this article Alex Kessinger talks about how optimised code had an adverse effect on the understanding between developers & how we should compartmentalise the optimisation process.

“How long has it been since programmers have had to worry about the size of their code? Front-end developers do this all the time, but to anyone else it's crazy.”

“My rubric for good code is how well others can readily understand it.”

“In a small but diverse team, shared code habits might be the most important key to understandable code.”

To help with this Alex uses uglify.js (again built on node.js) which compresses his code for him.

This is not the only intermediary to come to the fore recently. CoffeeScript, SASS & Stylus do similar things for Javascript & CSS.


What key factors are affecting web design today?

I particularly like this quote from Trent Walton:

“If our bodies were intended only for sitting and working on the web we'd all look like giant blobs of silly putty with eyes and one arm with 20 fingers for typing. No one wants that.”


10k Apart winners have been announced. They're so good they'll make you sick.


Can Granular A/B Testing be detrimental?

“Testing individual elements like font colors and incremental feature variations in bucket tests is unlikely to drive changes that really make a significant impact on the bottom line. Small changes most often only enable small opportunities.”


Why aren't we converting?

Cennydd explores the reason why conversions can drop after a redesign. Can design impact be quantified into conversion rate?

“There's always a performance dip after releasing a new design, no matter how good or bad it is. This is probably because existing customers' mental models of how things work have been broken”


User experience doesn't stop at the nav

Karen McGrane talks about how the definition of requirements & the lack of understanding of the content can undermine the effort you put into providing good user experience. In this case HTC & hearing aids. This article also caught my attention for the fact that it never really occurred to me how people with hearing aids use phones. The support for them is pretty poor apparently.

No one ever came back to ask if the content that got published actually met the user's needs.


Researchers at Stanford have created the ultimate web site ripping alogrithm

The produced mappings are then used to automatically transfer the content from one page into the style and layout of another

It's a great example of machine learning & is written in C++ utilising the Qt framework & Qt's webkit API.


Ever wondered what sample a certain song is using? This might help...

via Tom Killeen

Simurai combines beautiful UI design with some fancy CSS3 techniques

via Jaik Dean

Learn how to create a zoomable interface with CSS

If've you not seen the 2011.beercamp.com zoomy interface website then you're in for a treat. .net have run an article explaining how this was made. The zoom is a bit of a novelty but it's interesting technology & maths behind it.


A history of HTML5 shiv

Paul Irish details the creation of HTML5 shiv. The javascript shim which helps IE recognise HTML5 elements.

Ian Hickson, lead editor of the HTML5 spec, stood surprised, along the with the rest of the web, that he had never heard this trick before.


The Vinyl Frontier movie explores the world of vinyl toys


Flash IceField game engine demonstration

Flash may have a bad rep at the moment but the technology in this game engine is pretty spectacular. Especially compared to what WebGL can do currently.


WebGL Team Fortress level

Brandon Jones show us that WebGL is developing quite nicely & has made the source code available on GitHub. Good man.


Could this be a 1987 version of Apple's Siri?


Flexible displays could allow for a new form of interaction

Roel Vertegaal uses bend gestures to control a flexible e-ink display. The most obvious example could be pulling the corner of a device to flip to the next page. Even more exiting for Fallout fans is a wrist worn display. We could have our very own PIP-Boy in the future!

This computer looks, feels and operates like a small sheet of interactive paper. you interact with it by bending it into a cell phone, flipping the corner to turn pages, or writing on it with a pen.


Beware online "filter bubbles"

Eli Pariser talks about how the more relevant search results, social message & news becomes the more insular our online world becomes.

"The internet shows us what it thinks we want to see, but not necessary what we need to see"

Notes:


Andreas Englund shows us what happens to super heros when they get old

via Lucy

The Manual sells out & pre-orders for issue 2 will take place soon

Books are still the best way to digest words in my opinion. Especially books printed on nice paper. This was made with care, love & attention. It's great to see self published books & magazines making an impact.


Remember when life gives you lemons...


Creating colour images from black & white photos


Diaspora release a new website for the Diaspora* project

They've also opened up a get statisfaction page for feature requests & you can get involved with the project here. Could Diaspora* be to Facebook what Firefox was to IE? The whole concept of hosting your own data or joining a pod is pretty intresting.


Google analytics goes real time


Create html5 games with Impact JS

It's great to see HTML5 & Javascript used so well. The game biolab is a delight.

via Adam Lappin

Confusion in the post-Android market

PPK is providing great coverage of the mess which has occurred after the Google takeover of Motorola. Samsung & HTC are pondering developing their own operating systems to try & more control of the stack.

"The Android market share is up for grabs. Apple will capture a juicy part with the iPhone Nano, and the rest will remain with the Android vendors, although it's unclear which OSs they'll use."

via Aral Balkan