Tuesday, June 25, 2013

Keep web sites readable on mobiles HD screens

As I was working on a new web project which mixed mobiles devices and PCs, I realized that it could be a problem to keep working in pixels to define page elements. Let's take an example :

Create a basic website not specific to mobile devices. Open it on a low resolution screen (such as a Samsung Galaxy Mini). Consider that the text is readable. Now, let's open the same page on a high resolution screen. Text will be too small.

What's the fuck???

By defaut, mobiles (and tablets) lie about their screen resolution

The first thing to know is that 1 pixel is 1 pixel on PCs (for the moment). On mobiles, 1 pixel = 1 "CSS pixel". Hey, what are "CSS pixels". It's easy to understand. Here are real screen resolutions :

  • 320x480px on iPhone 3
  • 640x960px on iPhone 4
  • 640x1136px on iPhone 5
  • 768x1024px on iPad 2
  • 1536x2048px on iPad 3

But, if you ask for the current resolution in javascript (screen.width), you will retrieve :

  • 320x480px on iPhone 3
  • 320x480px on iPhone 4
  • 320x568px on iPhone 5
  • 768x1024px on iPad 2
  • 768x1024px on iPad 3

You understand : that's how Apple handles Retina screens.

Okay, Okay... 320px, it's cool. But my Galaxy Mini has a lower width (240px)...

Don't worry : you can force mobiles to lie even more about their screen resolution

I'll show how your Galaxy Mini will emulate a 320px width screen.

I discovered this excellent blog post : http://sunpig.com/martin/archives/2012/03/18/goldilocks-and-the-three-device-pixel-ratios.html ; which introduced the meta"viewport". This meta tag allows mobile device a send a fake screen resolution in pixel. This resolution is made to keep screen readable. Behind the scene, the browser adapts the pixel/inch ratio automatically.

The solution is quite easy to implement. You just have to add this tag into your current "head" tag :


<meta name="viewport" content="width=device-width"> 


Don't be too happy, this "fake" resolution depends on the browser behind and the zoom factor (small, medium, large) selected by the user. But, it's simple.

So, what should you do ?

My opinion is to work with this meta tag and to consider that the user has the default zoom factor. I think it's the best compromise.

I can't conclude this post without giving you a link to this excellent post (sorry, it's in french) : http://www.alsacreations.com/article/lire/1490-comprendre-le-viewport-dans-le-web-mobile.html

Wednesday, June 19, 2013

Colorize your MacOS X shell

I was tired of my green shell on my Mac and I really prefer the default shell on Ubuntu. So, I googled a few minutes and find a solution.

First of all, each time you open a new shell, MacOS executes your .bach_profile. (It's quite different on Mac compared to Linux. On Linux, the .bash_profile is executed when you open a new session while .bash_rc is executed each time you launch a shell. On Mac, there's no .bash_rc so we use .bash_profile).

So, let's create/edit your .bash_profile with nano .bash_profile and copy paste the following lines. Restart your shell and enjoy the difference.

export CLICOLOR=1
export LSCOLORS=ExFxBxDxCxegedabagacad


Thursday, June 13, 2013

How to know if you have a 32 bits or a 64 bits Linux kernel?

Want to install an application on your favorite Linux but you forgot if it a 32 bits or a 64 bits one and you don't know which package you have to download? Don't panic. Just type in a console :

file /sbin/init

This will check /sbin/init file type and you will see if it is a 32 bits or a 64 bits executable file. I tested it on Ubuntu 13.04 and CentOS 6.4.

Download Oracle JDK from command line

Found on the web. You can adapt the url with one grabbed from Oracle JDK download page. What I love here is the fact is send Oracle licence ...