Alex Gibson is a talented web and mobile developer who shares my views on HTML5, mobile web development, and responsive design. In this post on his blog he gives a thorough run through of how he re-designed his web site. He went mobile first, responsive and explains, among other things, how he setup his media queries. Furthermore, he explains how he re-orders content of the page depending on the device, using CSS. The web page is pretty simple, but serves as a nice case study of a mobile first, reponsively web designed, HTML5 site.

Be sure to check out his blog at http://miniapps.co.uk/blog/.

Here’s an interview from Web 2.0 with Bret Taylor, CTO and Brogrammer at Facebook. The interview is about Facebook’s mobile initiatives.

Facebook wants to be the App Discovery channel. There is a technology side and a business side of apps. The technology side is about choosing platforms for which to build your app and user experience. Facebook do not want to be the ones picking the platform but rather support an experience for all. The business side is about App Discovery, how a brand and app developer can get their app to their users. This is where Facebook can help, by offering a channel where app developers can get their users to spread their apps to their friends through e.g. the New Feed.

I think there is a lot of interesting things in his views on this and we have been knowing that App Discovery is gonna be huge since me and Lars Erik went to AppNation last year. When there are a million apps out there, how are you going to make sure users find yours, and how are users gonna find the one for them? I think Facebook might be a great platform for that. I too believe a lot in serendipity (as can be seen in several of the projects I’ve done over the last years like Push!Photo), and like Bret Taylor says: “Social means serendipity.”. When combining this with his technology statement that “Making a social app is making an app ubiquitously accessible.”, then I think it is easy to see that HTML5 will play an important role in getting all of that together.

Embedding video in a responsive web design can be a hassle. With FitVids.js (via Think Vitamin) it is now a piece of cake. Check video below.

Just read another example on how Web Apps are Like Lego. Not precisely in the same way I would use such an analogy, but an interesting one none the less. Basically Christian Heilmann, evangelist at Mozilla, used it to exemplify how when you build web apps it is easier to reuse components. However he also goes as far as saying that the web app makes a less optimal experience compared to a native app, but that it is compensated by the more rapid development, and the improved reach to more devices. I disagree with that, and hail that a properly designed mobile web app can ge beyond what a native app can do. Employing responsive design for more than layout but also functionality, one can create a context aware mobile experience, and a contextualized desktop viewing experience, all through one well thought out design. So, I agree that web apps can be seen as Lego, but I also think Lego can be more powerful, and more beautiful, than badly formed clay.

SlideShare just ditched flash for HTML5. This is of course awesome for the sake of HTML5, but it is also awesome for the people using it. This means that it will work everywhere where there is a browser capable of HTML5 (i.e. any modern browser including mobile ones). Unfortunately they did not go responsive on this one, but have separate versions depending on the device (so far I’ve seen a desktop version and a mobile version, and the mobile version seems to be adapting to the screen size.) They explain the benefit of having a mobile web app instead of going native for mobile in their own words

If you send someone a link to a presentation and they have to download an app to view it, that’s not a pleasant user experience. We want presentations on mobile devices to be accessible to as many users as possible.

Another step away from native apps, and a step into the world of web apps.

Here’s an awesome article on how The Boston Globe implemented their HTML5 web page botonglobe.com using responsive design. For those who do not know responsive design, it is basically a way to create and design a web page to respond or adapt to the resolution of the web browser viewing it. It does not only take into consideration of rescaling images or text elements, but rather restructures the layout to best fit the screen. In the article they describe the technical challenges they went through: implementing Media Queries for outdated browsers; fast Responsive Images; how to sandbox third party ads to not mess with the page, etc. I am also very happy to read that they do no User-Agent detection, but rather do feature detection which is often advocated for HTML5 development, and that I do. The benefits of that is nicely explained in the quote

It is clear that we did not plan under any circumstances for anybody to be opening it on a GameBoy, but, when somebody did recently, it worked great on a GameBoy.

It’s really nice seeing big projects starting to come out using HTML5 and responsive design. It definitely shows how it is unnecessary to write native apps for several platforms to get a great user experience.