I've set up a test page to find out the media features values of a device. Since then, I've been doing some testing with various devices. Here are the results of my investigations.

You will find values for number of various computer setups after the break. These are just a sample of the hits I got on the test page. Note the Google Preview bot which is of some importance as it is the setup that browse your page when a user requests a preview in Google's search results. It uses Chrome of course. There is also a few number of consoles (Nintendo and Sony).

Note that I will try to keep the page up to date with newer devices.

Of course, you can take the test yourself to see what your browsing machine CSS guts are like. Take the test !

Read more...

Ok, ok, everyone has seen them. Yet. Those pictures are pretty impressive.

http://www.google.com/about/datacenters/gallery/

I think that's the graal of any company managing servers. Of course, they only show those pictures they want us to see, so it remains a mystery if Google itself has completely reached this graal, but still. Inspiring.

I'm going to rephrase a post I made on Slashdot in Jan 2012. It is about the digital medium in the internet era and how the information economy (books, movies, music) will be affected by it. Make no mistake here, I'm not taking sides, I am just trying to predict what is in my opinion inevitable. Another thing to clarify: Do not mistake information and entertainment. I went to see Coldplay a few weeks ago, along with 80000 other people. No amount of digital information will ever amount to that. But the latest CD they produced? Almost 100% information.

Read more...

Markus Jakobsson has a nice column on wired.com about passwords, what to do and what not to do. While he makes a nice point in security vs practicality (and the bad password 'evaluation' of most sites), I think he basically gives flawed advices. His advice is to just append words to build a long password, but that means a hacker can easily make a dictionary attack, because this new password is basically a 3 letter word where your alphabet is the dictionary. Entropy changes a bit, but that's it.

My approach is to have a moderately strong password for websites I don't particularly care about. I use that one on pretty much all websites I visit. I also have a super strong password (18 chars, punctuation, letters, digits) for my ssh accounts at home and my keepass2 file. The rest - sites I do consider "important" to be secure - have passwords that are generated by a password generator, in other words, completely random. They are stored in my keepass2 file that sits on my Dropbox. I can access it from my phone and PCs. It is encrypted so nobody can read it (until someone cracks it that is.)

So, to summarize, I have two passwords to remember: My regular one and my super strong one.

Problem solved.

I've set up a test page to find out the media features values of a device. Since then, I've been doing some testing with various devices. Here are the results of my investigations.

You will find values for number of mobile devices / browsers after the break. Along with the regular Android browser you can find Opera, Firefox and Chrome on the Android ecosystem. You can also find the Android SDK which provides a nice testing environment (if a bit slow). There are also a number of devices I cannot identify from their User-Agent string and I filed under "Generic Android devices".

Note that I will try to keep the page up to date with newer devices.

Of course, you can take the test yourself to see what your browsing machine CSS guts are like, otherwise click the "Read More" button to get the list of media features of some common devices.

Take the test !

Read more...

In the world of web design, we often talk about responsive design. The concept is really simple: Design your content to flow normally on a small screen (say, an iPhone), and then work your way up by adding so-called media queries to add stuff when you feel you have enough space to do so.

Looks simple, doesn't it? Theory always does.

The question: Do you want the same design on a Galaxy S3 (a 4.8 inch smartphone) than on your 1024x768 laptop (13 inch) ? Or your iPad? Well... of course not! Yet, the Galaxy S3 has a larger resolution than the iPad. So, how do you differentiate between those devices with a media query? Well, there is no definitive answer. It depends.

You can take the test which will show you the values of the various media features on your browsing machine: Take the test !

Read more...

After a bit of a fiasco last week, Firefox 16 has been released (along with SeaMonkey 2.13 more recently).

The most notable addition in this release is the new CSS attributes that are now unprefixed (but still work prefixed) about animations, transforms and transitions. You can get more information right there.

So which one of those CSS properties is now unprefixed? What else is new? Read more below.

Read more...

I recently upgraded my iPhone 4S with iOS6. A few novelties made the change a nice one, but no clear revolution. Of course the "Maps" app did undergo a major overhaul but that's for another entry.

But there's something else new that I'd like to talk about: the panorama mode of the camera.

Before going any further I have to confess that I've been looking for a good panorama app for ages. I have all the panorama apps of the AppStore. And they all share the same two flaws:

• The resolution of the result is very low, usually around the same as the camera. That makes a very small image almost useless.
• The artifacts in the resulting pictures are just too much - even at the extra low resolution. You need to be extra careful in order to generate an acceptable picture, making the entire process a strenuous one.

On iOS 6, both those problems are gone. Jut fire up the camera, tap "Options" and "Panorama". There you can tap the shutter button and start sliding your phone sideways. If you're going too fast, it'll tell you so.

Then you get a big image (28mp) and very very few artifacts. Without putting much care in your shooting.

Below a couple of examples. Click on the thumbnail to view the image in its native resolution. These are a few of the first panoramas I took, still discovering the feature and not paying much attention.

I've been designing websites that adapt to the width of their browser since my very first website in 1995. Back then, it pretty much meant paragraphs that are wider on a larger screen. If anything, it looked weird. But I could not let myself waste all that real estate. I mean, look at my blog! There's not much wasted space. And yet, I love simplistic and overly sparse designs such as Terry Apodaca's blog (doesn't seem to be working anymore) or Brad Frost's blog just to cite a few. All three blogs (counting mine) have one property in common: They work on 2560px wide screens down to 320px wide screens.

In other words: they have no width.

No, they have not.

Really!

And this is why getting a new design by starting out with a set of PSD files is a bad idea. Actually, it's so bad an idea that it's almost a guarantee to get it wrong. Web design is fundamentally driven by an opposite force than print design is. With print design, you start with a blank canvas and try to fit your content in it. With web design, you don't have a canvas! All of your readers will provide their own canvas, so you have to take a different approach. Start to define the content you want to see printed, then play with it on a phone, a tablet a huge screen. At that stage only you start do set up "zones" or "areas" that will define the regions of your page (meat, navigation, title, footer, etc.). After that, you will play with them and see how they fit on all the different screens out there. From there, you iterate and define it. And then you put real data in there, and you usually have to start over.

Of course, for a blog it is very simple, since there is so little: Entries, a menu, a title. On more complex websites - think Amazon or eBay - the task if much more difficult. But it's also much more rewarding.

But responsive designs are not only about screens, they are also about other surfaces on which your words could be printed... Yes, printers on dead-wood-paper. If you look at both blog mentioned in my first paragraph and try to print them... Oh my. What a mess.

And mine, well, not much better, if better at all. But at least, I have the excuse of having started my blog last week ;-)

Now that it's in my head, you can be sure I'll get it done by next week.

You've got a website. Good for you. There is a good case to be made for online advertising. And there is an equally compelling case to be made against.

Whether or not you should include advertisement to your website is out of the scope of this little entry. Instead we'll assume you've decided to put some ads online but you still wonder how to do it.

Some pretty decent advises can be gathered in Adam McLane's blog: http://www.mclanecreative.com/why-blurring-the-lines-kills-your-brand/

Let me summarize it for you. To put things in a binary form, there are two options.

1. Should you clearly put your ads blurred in the middle of your content, right where the user won't be able to discern them from your real content?
2. Should you clearly visually identify a space where your ads are?

Well. There's no "best one". Those two approach lead to different results.

1. The first approach will generate a lot more revenue than the second one. But it will scare your users away because your pages will be a random blend of various sources making the experience confusing. In the end, you will have to bet on people not returning to your site. You might as well have no content, but a good strategy to lead eyeballs to your site.
2. The second approach will generate less revenue. But it will make the user experience a whole lot better because your content will be clearly available to your readers. If by any chance you generate interesting, focused and regular content, you will make your brand better day over day.

So, which is it? Well, it you don't care about your image, readership and brand, go the first route. Believe me, this is not a rhetorical advice as many sites rely on this very model. You can find them searching on Google. These are the pages filled with ads and nothing more than sparse sentences in between those ads.

But if you care you should definitely go the second route. That's the one I prefer, because I build websites to convey content, not to rip visitors or advertisers off.

It most certainly looks like it's the intent. The major contributors behind the website do add some credibility to the claim: W3C, Google, mozilla, Microsoft, Opera, Apple, Adobe, facebook, HP, NOKIA. Well... that's ... impressive. Go and take a look for yourself.

The goal of this site is to be the place to come for answers to your trickiest (and simplest) development and design questions about the Open Web Platform.

More after the break.

Read more...