It's a good idea to keep an eye on techniques we can use in the (near) future. Chris Coyier shows us how we could use CSS Regions to somehow fold content on a more clever way that our current techniques allow us to.
css3 responsive
One of the absolute highlights during the excellent Mobilism conference was this talk by Jake Archibald about Application Cache. Hilarious but also extremely well researched. Be sure to read the accompanying article (you'll need it when you start working with AppChache) and the AppCache Diagram (and be sure to attend a conference where he's giving this talk).
mobilism html cache presentation
There's a group of people who think the web should try to catch up with native, and one of the things you hear most is that it should be possible to access the camera and do cool stuff with it. Well, you can, and here's a simple tutorial (with lots of links to more info).
javascript html5 camera
I'm not sure what the weather is like at your place but right here in The Netherlands winter has not ended yet. It's not snowing but it feels like it might. In that case I'll try to make one of these snowdecahedrons. And if the weather turns out to be good I'll just cut down a tree and copy this beautiful idea.
art winter
Testing your responsive site on smartphones is pretty easy, most of them have a fairly decent browser on them so usually things just work as you expect. That's not the case on feature phones though. Martin Sutherland argues that this simple observation should be an important part of your startegy when you're thinking about what test devices to buy.
devices testing
In this lengthy article Baldur Bjarnason explains how hard it is to test the design of your ebook: there is little or no documentation (some documentation is even secret), and the documentation that exists is not good enough. On top of that it's impossible to get hold of some ebook readers outside of the US and even if you have one it is very hard to test books on them. If you ever start complaining again about how hard it is to test your site on all these different browsers just think of this article.
development ebook documentation
There was a row in responsive-image-land yesterday and I linked to it in the heat of the moment, something I usually try to avoid. If you wait a while things get much clearer. In this case Jeremy Keith published an excellent braindump which clearly explains the situation, the ideas and the (current) solution. You should read it if you build web sites.
image responsive
Type on the web is mostly awful. It can be beautiful though. Elliot Jay Stocks started this new series about future-facing techniques to do with typography on the web
. This first article is about ligatures (a character consisting of two or more letters). If you care about type you should definitely read these articles.
typography design
One of the things I love most about our industry is the fact that everybody shares their knowledge freely. Now imagine if every link I post here would direct you to a shop where you could buy a paper, that wouldn't help you much, you wouldn't gain knowledge as fast as you do right now. In academics this is a common problem: articles get published exclusively in expensive magazines and are not freely available, which means that it's harder to gain knowledge. This is of course contradictory to what universities are all about and it clashes with the idea that publicly funded research should be freely available.
knowledge publishing science open
I believe there are many good reasons to use skip links but there are definitely other ways to make content accessible for keyboard users. Here's a nice proof of concept by Thierry Koblentz that uses that tab-key to tab from section to section and the arrow keys to navigate to links inside those sections. Feels intuitive once you find out how it works (yes, I know, that's somewhat, but not entirely contradictionary) and it clearly shows the importance of styling :focus states.
accessibility css html keyboard
The next time a designer ask you to create a pixel perfect design just tell them that you will, only if they can explain what the px unit in CSS is exactly. Just be sure your designer's name is not Sean B. Palmer.
css units
What happens with your data if a service closes down? Can you actually entrust your precious online presence to third party services? Geri Coady writes about the closing down of Gowalla and links to some very interesting articles and video's about the subject of shutdowns.
history data
You don't want to serve a 1024px wide image to a 320px wide screen, that's a silly waste of bandwidth. There is no easy way to do this so a group of web developers tried to work on a new HTML element to solve this issue. A few days ago a different solution was added to the spec without consulting these developers or without considereing the work they had already done. You can understand that not everybody is happy about this. If you're interested in this subject (it actually is very interesting, it's about the future of the web) you should definitely read this article, read about the beautiful HTML design principles mentioned and after that be sure to read this thread too.
html image responsive
Yes, all these new webtechnologies like canvas look absolutely great, but can you actually make something useful with it? Two years ago Simon Willison created this extremely handy canvas tool, I can't wait till we finally see it implemented everywhereM.
canvas useful innovation
This is not just an excellent explanation of the difference between a geek and a CEO (or between a true pioneer and a douchebag), it's also a beautiful essay about one of the greatest inventors ever, Nikola Tesla, lovingly created by Matthew Inman.
history nerd geek
One of the hardest parts of responsive design is the fact that we have to change the way we work, we have to change our workflow drastically, the deliverables we've been delivering in the past ten years just don't work anymore. More and more clever people start thinking about this new workflow and Stephen Hay is one of them. On Mobilism he gave this excellent presentation. Just pick and choose the ideas you think will serve you, your team and your clients well. I'll link to the video once it's published, you should definitely see it.
responsive workflow design
People like to use apps and people don't really care with what technology these apps are built. There are good reasons to use so called native technology for an app on a desktop or desknot computer, there are many good reasons why you'd want to use HTML. Mozilla is working on a Web Run-Time which lets you create launcher-apps for web-pages, here's an in depth explanation on how it works.
browsers html apps native
No that we finally accepted that we web does not have a fixed width we need to find a new workflow, the Photoshop centered way we used to work is not good enough anymore. People start thinking and publishing about this new responsive workflow, and that's a good thing. Here's an article by Luke Brooker about his new workflow, centered around the idea of style guides.
styleguide responsive design workflow
Here's a handy tool to fix those broken unicode characters like café. In the comments below the accompanying blog post Mathias Bynens scores a few Internet Points by pointing out how you can easily do this yourself with some simple JavaScript.
unicode javascript
People obviously find it inspiring to look at the offices of famous web people. What strikes me is that most of these offices are rather small. Bruce Lawson realized there are more small rooms that might inspire you and launched this next successful tumblrblog.
inspiration
Here's a nice tool that suggests a font stack based on your font. It knows fonts served by Typekit, it doesn't seem to know too many Google Fonts though. Still, a very handy tool.
typography fonts css
If you, for whatever reason, don't like any of the other tools and sites out there that tell you what browsers support what CSS feature then this tool might be the one you were looking for. I still prefer When Can I Use… though.
css development browsers
One of the only reasons to keep supporting IE6 is when you work for a company that does a lot of business in China, marketshare of IE6 was always very high over there. This graph shows us that something significant happened a few weeks ago. On the positive side: IE6 usage has suddenly dropped below 20%. On the negative side: IE8 usage is close to 50% now. A long, long way to go.
browsers
A while ago a study was presented about the impact of WCAG on user problems which caused a bit of a roar in the accessibility world. According to the study the accessibility guidelines had no significant effect for blind users. Now, before you all start builing your sites with tables again, please first read this article in which Detlev Fischer debunks the study.
accessibility
Your app needs a map but you want something else than good old boring Google Maps? You could try OpenStreetMap with one of these beautiful map tiles.
maps open
Wondering which toolkit to use for your HTML based presentation? Louis Lazaris collects them right here. Do you know another one? Let him know in the comments.
presentation html tools
What does browser support mean exactly? Some think it means pixel perfection for a predefined set of browsers. According to David Bushell it means something else. A good read for people (or clients) struggling with the ever expanding browser landscape.
browsers design
One of the easy ways to get a somewhat unique ID is by using the UNIX epoch time. The problem with an ID like that is that in HTML an ID had to start with a letter. Mathias Bynens tells us if this is still the case in HTML5.
html5 html id
Filling out forms is a pain in the ass and especially on devices without a classic keyborad you should ask your users to fill in as little information as possible. So if there's a way to make things easier you should probably use it. For instance, parts of an address can be prefilled if the user enters her zip code. Chris Coyier shows us what a flow like that could look like.
forms mobile usability ux
Here's the true story behind the
web html history
A thing we needed desperately before we could use box-sizing: border-box; was the ability to mix different CSS units. There are still some use cases though and luckily more and more browsers start supporting the calc() property. Here's how it works.
css3 css units
Here's a small post by Keith Houston with news and thoughts about unusual characters. Always a pleasure to read, like everything on his blog.
fonts letters
An important part of design and UX is performance so when you decide to use a webfont you should definitely understand what the negative impact of that choice might be for your users. Here's an excellent in depth article about font performance. Yes, you should definitely read it (and read the comments too, they're actually quite good).
performance font fonts
My father always scribbles annotations in the margins of his paper books. He's probably been doing this for more than 50 years now and if somehow we could collect these annotations it would be an incredibly intersting and useful database. But as it is, it's pretty useless. Allen Tan writes about this and more in this article about modern, digital reading.
reading books
There are a few use cases where's we'd love to use physical units (like cm and in) but unfortunately these units don't work as expected in CSS. Boris Smus wrote an extensive article about these units, how they should work, why we want them and why they work the way they work.
css units
Jeremy Keith started an open, local mobile device lab in Brighton and he urges you to do the same in your home town.
mobile testing
The BBC is working on a responsive news site and they share everything they find out, which is extremely useful. In this article Tom Maslen explains how they manage browser support. An absolute must read for everybody who is struggling with the growing complexity of browser support. This solution (or something similar) should be implemented everywhere.
responsive javascript design
Here's an overview of projects related to the HTML5 Boilerplate. There's some excellent stuff in there but before you start using everything in there, remember the excellent advice by Rachel Andrew: Stop solving problems you don’t yet have.
html script boilerplate
You should never just link to scripts hosted on other domains, the possible advantages – caching, gzip – are not always enabled. This gets explained in detail in this excellent article. Yes, you should definitely read it.
performance script
Holistic means something like complete. So Perry Chan argues that a complete user experience is the future of mobile payments. I actually think that right now, on the short run, whatever is the future: the things we have right now are just terrible, anything is less painful (at least here in the Netherlands). (I also think the future of UX on the web is bigger fonts, much bigger).
money payments
Loading an external JavaScript file can block loading of the rest of the page which, of course, can be a major performance and usability issue. The solution to this issue is to load the scripts asynchronically and Chris Coyier shows the ways to do that, extensively as always.
performance javascript usability
CSS selectors can be pretty hard to understand, especially the difference between nth-child and nth-of-type can be confusing. There are many tools to visualize the difference, here's another one by Ben Howdle.
css selectors tool
