<< September 2012 | Home | November 2012 >>

CSS3 Media Query Testbed

the web developer 101

I've written quite a few articles on the css3 media queries and I thought I'd clarify my work on the subject and give a little more info on the context of these articles.

First of all, what I wanted to do was to build a database of the various values one can expect to be supported by the various devices out there. And this is not a simple task, so I did set up a "test environment".


Tags : , ,

The new iPads and our websites

Now that Apple has announced their iPad lineup for the holidays, it's about time to think how our websites are going to work on it.

The 4th generation iPad looks like it has the exact same screen as the 3rd generation iPad. So nothing should change.

But how to target the iPad mini with media queries?


CSS media queries best practices

From the rest of the media queries articles, I've been able to deduce a number of things regarding the usage of media queries on a website. Here is my first feedback on this regard.

You will also find here various tips and advices that I've collected on the web and from experience.


Tags : , ,

Media features of the most common computer setups

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 !


Tags : , ,

Google's data centers

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


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.

Tags : ,

SOPA - PIPA - DRM - ACTA, why it is all futile

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.


Good passwords and bad passwords

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.

Media features of the most common devices

Recap of the mobile devices

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 !


CSS, Media Queries and Retina problem

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 !


Firefox 16 is out (again)

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.


Tags : , , ,

iOS6 - Mode panorama

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.

What's the width of your website?

Hmmm... Let me think.

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.


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.

Advertising or not advertising?

It depends on how you do it...

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.


the ultimate resource for Web technologies?

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.


iOS 6's new web browser

As every web developer will tell you, the iPhone's browser is a common target. It is popular and it is the most advanced version of WebKit - at least with this level of popularity. With iOS6, Apple introduced a number of things in there, and here is an article listing all the new things every mobile web developer should know about.

Typically, new versions of iOS are adopted pretty quickly. iOS6 is no exception, being already installed on 60% of iPhones and 45% of iPads, just two weeks after its release.

These new features will be available very soon to a sizeable percentage of your mobile traffic, making them a reality you can build upon.

Update on the Oct 25th, 2012According to the latest Apple keynote announcing the iPad mini among other things, already 200 million devices are loaded with iOS6. Time to have a look !

Tags : , , , , ,

Setting the tone

The word God is for me nothing more than the expression and product of human weaknesses, the Bible a collection of honorable, but still primitive legends which are nevertheless pretty childish. No interpretation no matter how subtle can (for me) change this. These subtilised interpretations are highly manifold according to their nature and have almost nothing to do with the original text.

Albert Einstein
Tags : ,

HTML and CSS resources

Here are the resources I use most when it comes to responsive design, html or plain css needs. In other words my bookmarks. Use them as you wish, and many thanks to them for their work. This page will evolve as I find new resources of course.



General design tips

Various browser support

  • Nov 05 2012 http://caniuse.com Everything HTML, CSS and Javascript, drilled down by browser version and complete/incomplete support. Invaluable. Of course, nothing will ever replace testing first hand.

Tutorials, tips & tricks

Working offline


  • Nov 26 2013 http://motherfuckingwebsite.com/ Very simple: A responsive page under 2.2kb, simple, elegant, gets the point across, no JavaScript, well... the dream page.
<< September 2012 | Home | November 2012 >>