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.