Responsive IMGs

Posted on 2011-09-29 by Mattias Rost

My friend Viktor at We Made You Look pointed me to this article at Cloud Four on Responsive IMGs. The article makes a case for what is the problem with IMG tags when doing responsive web design. What you want in a truly responsive web design when it comes to images, is to only load images of the size needed for the viewing display. Using IMG tags one can set the src attribute to the smallest possible image, and then through scripting change the src attribute to what ever is appropriate once the display size is known. For small screens this works well, however for bigger devices this slows the loading down as it has to do two requests (and loads) for each image (unless the script manages to change the src before the browser starts fetching the image). There are of course other techniques for responsive images, by for instance using CSS and media queries, but the article deals with the problems with the IMG tag specifically not other techniques. I prefer using media queries which to me makes most sense from a technology standpoint, but I agree it is far from ideal. However it is what is available now, and should therefore be used!

He goes on to start a discussion about what would be appropriate to future proof the IMG tag – i.e. what is needed in order to make sure responsive web designs also work for devices, screen sizes, and resolutions, that we do not know of yet. He makes his own list of what he believe is needed and encourage readers to add to it.

Cloud Four is an excellent blog on web and mobile development and design, and is definitely worth a visit!

How to choose between web and native

Posted on 2011-09-29 by Mattias Rost

Forbes has an article on how to choose between mobile web and native apps. It has a simple overview of pros and cons of the two, and what intermediate versions there are. Their claim is that it is more complicated than two ends of a spectrum, but you can choose in between. Most interestingly is what they name a dedicated web app

Dedicated web app, which is a mobile web site tailored to a specific platform or form factor, like the LinkedIn web app which was designed for Android and iOS, but not for other smartphones or feature phones.

as opposed to a generic mobile app “which are mobile web sites designed to match every web-enabled phone, like the Wikipedia mobile page.”. I have definitely gone for the dedicated web app more times than the generic mobile web app.

I agree in principle with their end points, which state that you should build whatever solution you decide on, on the data. Create an API for the data, and build the app to use the API. This is really just good development style, but can definitely help when building mobile (web) apps if you need to try different solutions later on. As some people advocate “web first, native second” (e.g. this guy), having the API and data in place, you have laid the ground work.

SlideShare goes HTML5

Posted on 2011-09-28 by Mattias Rost

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.

LESS (CSS)

Posted on 2011-09-27 by Mattias Rost

Found this handy javascript library that I think can be extremely potent: LESS. It basically gives scripting capabilities to CSS. For instance you can define a variable @color, and use that instead of using fixed values everywhere in your CSS file. This would ease when it comes to changing color schemes, for instance. But I think what will be most handy is the way it allows nested rules:

#header {
	h1 {
		font-size: 26px;
		font-weight: bold;
	}
	p {
		font-size: 12px;
		a {
			text-decoration: none;
			&:hover { border-width: 1px }
		}
	}
}

which basically defines the css-rule for e.g. “#header p” and “#header p a:hover”. This will make cleaner css-files, and will let you write less CSS making CSS more DRY. It comes with a lot more powerful stuff as well like inline javascript. Have a look for yourself and see how you can make use of it.

Fairly technical post, but I wanted to put it down in text as I found it and reacted to it.

Boston Globe does HTML5 & Responsive Design

Posted on 2011-09-27 by Mattias Rost

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.

Device Design Day

Posted on 2011-09-26 by Mattias Rost

Stumbled upon this through Small Surfaces. A bunch of videos from Device Design Day, in San Francisco. You can find all videos here, but especially liked the one below by Dan Saffer. I liked it mostly for its brevity, because he is not the best speaker. But it’s only 9 minutes long, and captures the way I perceive the way we think at Mobile Life. He says basically that we are part of the world, and by designing we change the world and therefore us. (Very very simplified, that I could go into length with.)

Design in the Post-PC Era from Kicker Studio on Vimeo.

Ubicomp 2011

Posted on 2011-09-24 by Mattias Rost

Just returned from UbiComp in Beijing. I co-organized the workshop Research in the large together with Henriette Cramer, Frank Bentley, and David Ayman Shamma.

The workshop was a followup on the workshop with the same title from last year. The workshop spurred some really interesting discussions, and most strikingly to me was how this year we were talking more about difficulties and problems, from previous year. Could be that you do not remember negative stuff as well as positive but, that was my impression. Also interesting was that a large part of the discussion was that in order to understand studies conducted in the large, you must combine them with studies in the small – i.e. small scale qualitative studies to investigate and triangulate with your findings in the large. This discussion was largely, if at all, left out last year.

Beijing also seemed to have become much richer than when I was there in 2008. It was cleaner, people more well dressed, and it was impossible to get a cab on a friday night as everyone was taking them. It is definitely an up and coming economy as they say, and I’m looking forward to see what they do with their new found wealth and increasing living standards. I also hope that it quickly reaches the country side as well.

Now it is back to thesis cranking.

Mattias Rost

Researcher and Coder

Monthly Archives: September 2011