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".

Read more...

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?

Read more...

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.

Read more...

I've been writing a series of articles about the CSS3 media queries. Here is an index of these articles, just to get a shot at organizing this.

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...

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 !

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.

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.

CSS3

• Sept 3 2010 http://css3.bradshawenterprises.com/ This page has been the reference for me when it comes to CSS3 transitions, transforms and animations. Lots of examples, you can see it live in your browser and it has been up to date for the last 3 years at least.
• Oct 25 2012 https://developer.mozilla.org/en-US/docs/CSS/Media_queries The reference for media queries, but only for Firefox (and other Gecko based browsers) of course.
• Oct 27 2012 http://www.w3.org/TR/css3-mediaqueries/ The reference for media queries, by the W3C, ultimate authority on the subject. A bit academic but otherwise insightful.

JavaScript

• Oct 7 2012 http://paulirish.com/2011/requestanimationframe-for-smart-animating/ Very drafty at the moment of this writing, requestAnimationFrame is a new API designed to build animations in Javascript.
• Nov 7 2012 http://weblogs.java.net/blog/manningpubs/archive/2012/10/29/natural-user-interaction-drag-and-drop All about drag and drop with html 5.
• May 14 2013 http://www.html5rocks.com/en/tutorials/offline/storage/ All about the various ways to store data in a browser. Don't forget to check http://caniuse.com to make sure your targeted browsers support your storage means. Hint: localStorage works everywhere.
• Jul 28 2014 https://pieroxy.net/blog/pages/lz-string/index.html Once you've figured out the preferred way to store stuff in the browser, you can now go to the step 2: Compressing your data before storing it in. LZString allows a String to be compressed into another String, ideal for JSON-based storage in localStorage.
• Nov 05 2014 http://dev.sencha.com/ext/5.0.1/examples/index.html ExtJS, a nice lib to incorporate UI components of all types in your web pages.
• Feb 05 2015 https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API Web Audio API, the new way to play sound in a browser.

General design tips

• Jul 21 2012 http://bradfrost.github.com/this-is-responsive/ The most common patterns used in responsive design, full of live examples on this page.
• Nov 8 2012 http://bradfrostweb.com/blog/web/responsive-nav-patterns A bit of the same but different. Also links to plenty of live websites where those patterns are in use.
• Nov 13 2013 http://www.jordanm.co.uk/post/66812678668/articles-that-changed-the-way-i-work Various tips and advices about web design. Great resource.
• Jul 28 2014 http://bradfrostweb.com/blog/post/the-principles-of-adaptive-design/ The Principles of Adaptive Design.

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

• Nov 06 2012 http://studentwebhosting.com/tutorials/amazing-css3-box-shadow-examples/ A cool tutorial for CSS box shadow with an example of how to simulate a curled sheet of paper.

Working offline

• Apr 04 2012 http://www.html5rocks.com/en/mobile/workingoffthegrid/ Learn how to make your website work even offline - a good introduction.
• May 21 2013 http://www.html5rocks.com/en/tutorials/offline/storage/ Want to store data in the browser? There are to this day 4 different APIs to do this. Learn which one works for you and how.
• May 21 2013 http://dev-test.nemikor.com/web-storage/support-test/ How much can you store in localStorage? Well, hop on to find out.

Humour

• 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.