Responsive Images Recap

Here's another recap on the state of responsive images. This one from the Filament Group, who was involved in the Boston Globe redesign. It discusses their solutions and the problems with them and then the newly suggested picture html element and a call for the need of bandwidth detecting media queries. I'm still concerned about bandwidth detection. I think somehow there should be a setting that lets users decide if they want high res images (when supported) or the faster low res images. If I'm just browsing on a laptop tethered to a phone with 4g and paying for every kilobyte, I may not want to download a large image just because I can. I agree we need better ways to server appropriately sized images, but I don't want to force anything on a user. Although a popup asking them if they want every large image is not practical either… I'm glad this discussion is continuing though!

Embedded Link

The state of responsive images | Feature | .net magazine
Designer/developer Mat “Wilto” Marquis takes a look at the img tag, explains why a largest-size-fits-all approach to images is untenable and discusses different solutions in this ongoing saga

The CSS Vendor Prefix Debacle continues

The Opera Browser will soon be released to support the webkit prefix, which was designed and spec'ed to only be supported for css properties in development by webkit browsers (safari and chrome). Who is to blame? Opera points the finger squarely at webkit for not following standard procedures and at developers who aren't writing according to standards and aren't even including the prefix-free version of properties in their code. I'd be interested in seeing some real data as to how many sites are doing this and what properties they are using. It seems like a horrible practice and I've not met anyone who's fessed up to doing it on production level projects. They should be at least using the non vendor property and are most likely using some sort of starte package, boilerplate, framework or preprocessor or tool that does all the prefixing for them. So where's the data?

Embedded Link

Opera confirms WebKit prefix usage | News | .net magazine
Open web under fire as Opera argues author errors forced its hand

TILT your website with CSS

Great bookmarklet to apply a 3D tilt effect to any site. Reminds me a bit of the upcoming firefox inspector 3d view how it shows the DOM structure with nested items at a higher depth. I hope no one ends up using something similar to make the page rock like the ocean: I can't imagine trying to read while getting seasick. Maybe it would be applicable for a game or something…

Embedded Link

CSS Tilt
We're not quite at the stage where we can fly through the Internet in 3D à la Johnny Mnemonic, diving between skyscrapers of data and a

Separate HTML and CSS for fast clear & clean code

Another great article from Jonathan Snook reasoning thorugh the benefits of specific css class selectors with some good examples. Really calls to mind his SMACSS principles I've been loving.

Embedded Link

Decoupling HTML From CSS | Smashing Coding
For years, the Web standards community has talked about the separation of concerns. Separate your CSS from your JavaScript from your HTML. We all do that, right? CSS goes into its own file; JavaScript…

Semantic Chart for HTML5

I'm not going to get into the discussion on whether or not semantics are important, but want to share this flowchart for those who are interested in making a sensible web. It will help determine what HTML5 element is best for elements. Thanks fo the HTML5 doc!

Embedded Link

Let’s Talk about Semantics | HTML5 Doctor
It's time we had “the talk”. I could get you a book or recommend some sites from Dr Mike's special bookmarks folder, but the best way to make sure you get the right idea is to do it myself. I&…

C64 Game recreated as HTML5 Game

Here's a great interview with the hungarian developer, Kriz, who recreated this old game as closely as he could from scratch. I found it interesting he didn't even try to crack into it and look at the source code. He just watched closely and recreated what he saw. This is the 4th such game he is behind and I hope he keeps going!

Embedded Link

Wizard of Wor
There seems to be a trend of re-creating classic 8-bit games in JavaScript at the moment, including the recent and excellent Survivor. B

WordPress Slider Plugin that's Responsive

It seems that every site lately has some sort of slider in it. I'm interested in this plugin that will get the redundant work and even be responsive from the guy(s) at DevPress. I hope to be trying this out on my next project.

Embedded Link

Plugin Release: Responsive Slider | Professional WordPress Themes | DevPress
There is a new DevPress product, and this time it's not a theme. It's a plugin! We just released Responsive Slider. Responsive Slider plugin. Many of you have asked for a theme with slider, an…

Mobile Specific Sites Hurt

I've said it before I don't want a different experience on mobile vs desktop. I always am scrolling around a mobile version of a site to find the link to get to the full site because whoever designed it deemed that I as a mobile user wouldn't appreciate the functionality the site brought. I still agree with the responses to Jakob Nielson's recent publication that we should have mobile versions of our sites. I agree whole-heartedly with the responses from smashing magazine here and Josh Clark and many others. It's encouraging to see the flood of people coming out to contradict the uncharacteristically unwise council from this UX giant. Here Bruce Lawsen gives a great recap of the whole story and the points argued by both sides.

Embedded Link

Why We Shouldn't Make Separate Mobile Websites | Smashing Magazine
There has been a long-running war going on over the mobile Web: it can be summarized with the following question: “Is there a mobile Web?” That is, is the mobile device so fundamentally…

Open Sourced Flash Tower Game

Ben Lowry has released all his code for his game InkTd. It is a standard tower style game with a bit of a twist. It gives options for 2 game modes: path mode and another called maze mode with the path being dynamically adjusted to reach the base. Sounds like it deserves porting to html5!

Embedded Link

InkTd Flash game source code released – Emanuele Feronato
Did you ever wonder how a complete tower defense source code looks like? This is your lucky day. A couple of years ago Ben Lowry, also known for being the founder of Playtomic, made a tower defense ga…

Some Useful Page Load Time Charts

Google analytics shares some data between mobile and desktop speed and segmented by region and industry . I see that (obviously) desktop is a few seconds faster overall.

Embedded Link

Global Site Speed Overview: How Fast Are Websites Around The World? – Analytics Blog
The first step in optimizing any process is to establish and obtain an accurate set of measurement data. In the context of optimizing the user experience on the web, it means that we need to measure t…