Carl Räfting

A note on media-queries and mobile devices

Carl — Wed, 09 Nov 2011 14:41:26 GMT

These days, there is a lot of talk about reponsive design and mobile/content first. While i think we can agree on that these strategies isn’t entirely bulletproof (yet!), they have a ceratin appeal and can be fairly easy to implement and use today. I do believe that this approach is better than making a mobile version of a website, but that is probably necessary sometimes.

The issue

I stumbled upon an issue when i was working on a web-application the other day. I had just finished the design in photoshop and then i built the templates in html/css. I should point out that this was the desktop version of the design. Later on i wanted to make it look good on mobile devices as well, so i set up a media query in the stylesheet to cover the design changes for those kinds of devices.

The issue appeared to me at this stage of the process, the mobile devices would need to download the extra set of styles to reset the desktop styles. This is a bit of an issue, since when we talk about mobile, we asume that the device has significantly less bandwith than a desktop computer. That’s not necessarily true all the time but it can be most of the time, if one is on a bus-commute for example.

Mobile-first

So that is where mobile first comes in, the problem however has to do with when one would build templates from a photoshop design that covers the “desktop” version. It is a bit hard to develop with the mobile first approach in this case, since the templates has to match the original design as close as possible (That doesn’t mean it has to be pixel perfect or even look exactly the same in all browsers).

Conclusion

So i tought about this some more… And finally i came to the conclusion that the best way for me was to reset the desktop styles on mobile devices (and narrower viewports), since i wanted to keep them separate from each other (easier to maintain). This means however that mobile devices do indeed get a bit heavier stylesheet than what’s necessary, but on the other hand, there’s no extra http request needed. This certainly isn’t the most perfect solution, but at this stage in the development process it was the best way to do it.

First Responder

Carl — Wed, 26 Oct 2011 19:11:58 GMT

In his latest blog-post, Rob Weychert writes about how he constructed his first responsive design, which is his own website and blog. He goes into detail about how his grid is constructed and scales to different viewports (or even devices).

We, Who Are Web Designers

Carl — Mon, 19 Sep 2011 19:22:54 GMT

Jon Tangerine writes about what it means to be a web designer and how sometimes, people will have the wrong idea about what it is you actually do. Every web designer should read this.

New webproject. A quick silly ~1 hour weekend project

Carl — Sat, 27 Aug 2011 16:27:17 GMT

This idea came to me when i thought to myself, what if i could just type one command into the terminal, and the folders and documents i needed where there? I immediately got to work and came up with this, it doesn’t look much yet but it is indeed handy and i intend to expand it further than this. Say, maybe get a bunch of files from github?

Okay let’s not get ahead of ourselves here, time will tell if i’ll actually add this. Anyway… This isn’t a groundbreaking new project of mine, it’s just a result of making reality of an idea i had, and it worked. As simple as that.

Check it out at github.

Flat, simple icons for interface design

Carl — Thu, 04 Aug 2011 19:40:20 GMT

On the hunt for icons for your next design project? Meagan Fisher has, with help from Twitter, compiled a list with nice icons.