Le responsive web design

Le « responsive web design », l’ultime solution ?

Habituellement, à la création d’un site internet, le design de celui ci devait apparaitre à l’identique sur tous les navigateurs du plus ancien encore en circulation au dernier à la mode. Avec l’arrivée des smartphone et tablette, dont la résolution d’écran dépasse maintenant celui de certains ordinateur de bureau, la donne à changer et il faut maintenant en tenir compte. Il n’est plus question de créer un site principal pour les « desktops » et un site secondaire pour les » mobiles » car les résolutions d’écran ayant tendances à se croiser cela n’a plus de sens. C’est là que le responsive web design fait son apparition.

Ce  terme  est l’art de créer un site internet dont le design s’adapte au changement de résolution de l’écran (ou navigateur) de l’utilisateur. Le but étant, par exemple, qu’un site ayant un design sur 3 colonnes pour une résolution minimale de 1000px de large ait un design sur 2 colonnes lorsque la résolution de l’écran ou du navigateur descend sous 800px de large par exemple et enfin 1 colonne lorsque celle ci passe en dessous de 300px. Il s’agit donc d’adapter dynamiquement le design à l’aide de css.

C’est une manière de travailler qui est intéressante car nous sommes arrivé, en terme de web design et développement, à un point ou la multiplicité  de dispositif avec des résolutions différents devient un vrai casse tête pour le développeur et/ou la société qui souhaite un design adapté à tous les formats. Il est certain qu’il n’est pas possible de développer autant de version de site qu’il existe de résolutions.

Voici un site, anderssonwise.com,  qui a su remarquablement mettre en place le « responsive web design ».

responsive web design site
Anderson Rise

Celui ci aussi : foodsense.is

Responsive web design site 2
Food sense

 

Mais tout n’est pas parfait… loin de là

Malheureusement cette nouvelle façon de créer  n’est pas exempt de défaut et de contrainte.

Le budget

Le cout de ce type de site est supérieur au site classique car il faut créer autant d’adaptation de page que de dispositif visé. Pour un site classique avec 5 pages, il faudra penser aux versions :

  • smartphone
  • tablette
  • netbook
  • ordinateur de bureau

Les images

C’est le problème le plus important qui se pose lors d’une conception utilisant cette technique. En responsive web design, les images sont redimensionnées pour s’adapter à un écran de bureau ou un écran de terminal mobile avec une résolution bien inférieure. De ce fait le mobile téléchargera une image extrêmement lourde et utilisera de la bande passante inutilement.

De plus redimensionner une image force le dispositif à consommer plus de mémoire et augmente la charge du processeur.
Sur un mobile, l’image dont les dimensions et le poids sont élevés est

  • téléchargée,
  • chargé dans la mémoire du téléphone
  • et enfin redimensionné pour que sa dimension soit adaptée à l’écran du terminal mobile.

Pour une image de 1024X768 chargée sur un mobile lambda, celui ci aura besoin de 2,36MB de mémoire. Si vous chargé 4 images de cette taille, cela fera tout de même 9,44MB à charger. Les mobiles ont une mémoire limitée et beaucoup  de téléphones ont une mémoire allouée au images et aux pages web limitées, et le fait de dépasser cette limitation cause des problèmes de chargement incomplète de pages ainsi que d’autres problèmes.

 Le temps de chargement des pages et le chargement d’éléments qui ne seront pas visible

En responsive web design plus la résolution est grande , plus il y a d’éléments visible sur l’écran (images, vidéos, flash etc…) et plus certains éléments ont une taille plus élevée. A contrario, lorsque la résolution diminue, les médias voient leur dimensions diminuées ou tout simplement disparaisse de l’écran. Sur un ordinateur de bureau cela ne serait pas très grave (car celui ci est plus puissant qu’un mobile et dispose la plupart du temps de bien plus de mémoire), mais sur un mobile ces éléments sont toujours téléchargés même s’il ne sont pas visible. C’est un point encore plus gênant que le fait de redimensionner les images car au moins ceux ci sont visible. Ces fichiers téléchargés, visible et invisibles, auront un impact notable sur le temps de chargement de la page.

Si des éléments doivent être caché il est préférable de les supprimer : vérifier le type de résolution avant l’affichage ?

 Plus de code , plus à mettre à jour

La mise en place d’un site utilisant le responsive web design nécessitera plus de code.
Étant donné que le site doit s’adapter si une modification est  demandé, cette modification doit être visible (donc faites) sur les autres déclinaisons.

 

 

 

 

Les fonctions de mon fichier functions.php dans wordpress

WordPress permet facilement de créer un rapidement un site internet de base. Mais si vous souhaitez ajouter des comportements spécifiques  ou en modifier d’autres, il va falloir regarder du coté du fichier functions.php.

Ce fichier se situe dans le dossier de votre thème (s’il n’existe pas il faut le créer) et il agit à la manière d’un plugin.
La différence majeur est le fait qu’un plugin peut être activé avec différents thème alors qu’un fichier functions.php ne fonctionne qu’avec le thème dans lequel il est créé (je simplifie beaucoup mais c’est à peu près ca ;-) ).
Le coté positif du fichier functions.php est qu’il permet d’éviter d’installer un plugin et donc d’arlourdir le chargement des pages liés à l’activation des plugins ou encore de créer une fonction qui n’existe pas encore.

Le fichier functions.php est chargé automatiquement par wordpress et peut

  • activer ou modifier certaines configuration de base de wordpress
  • créer ou modifier des éléments de l’administration
  • créer des fonctions personnalisées

Comme la liste des possibilité est longue vous devinez que ce fichier va vite devenir très long. Pour éviter d’avoir un fichier illisible il est possible de faire des includes afin de s’organiser.

Plus d’informations (EN)

Initialisation

Avant de débuter organisons nous, le fichier functions.php ne comportera que des appels à des fichiers externes. Dans mon cas j’ai choisit cet organisations :

  • fichier php dans dossier function
  • fichier css dans dossier function/lib/
  • fichier js dans dossier function/lib

La fonction load_custom_wp_admin_style

function load_custom_wp_admin_style(){
      wp_register_style( 'functionscss', get_template_directory_uri() . '/functions/lib/functionscss.css', true, '1.0.0' );
     wp_register_script('jqueryui', get_bloginfo('template_url') . '/functions/lib/jquery-ui-min.js', false, '1.7.2', false);
     wp_register_script('functions', get_bloginfo('template_url') . '/functions/lib/functions.js', false, '1.0', false);
}

La fonction custom_wp_admin_enqueue_scripts

function custom_wp_admin_enqueue_scripts() {
	wp_enqueue_style('functionscss');
 
	wp_enqueue_script('jqueryui');
 
	wp_enqueue_script('media-upload'); 
	wp_enqueue_script('thickbox'); 
	wp_enqueue_script('my-upload');
 
	wp_enqueue_script('functions');
}
add_action('init','load_custom_wp_admin_style');
add_action('admin_enqueue_scripts', 'custom_wp_admin_enqueue_scripts');

Et maintenant incluons les fichiers de fonctions personnalisée

require_once('functions/register_scripts.php'); // register les scripts
require_once('functions/custom-evenement.php'); // création event + taxonomy discipline, genre - catégorie - 
require_once('functions/meta_box_lieu_event.php'); // selectionner le lieu depuis la custome page evenement

Fonction wordpress de base

Voici quelques fonctions initialisé par wordpress qui peuvent être modifiée :

Post Thumbnails
Navigation Menus
Widgets
Post Formats
Custom Backgrounds
Custom Headers
Editor Style
Automatic Feed Links
hooks

Fonction administration

Si les fonctions que l’on souhaite chargé ne sont utiles que dans la page d’administration,  penséz à utiliser la fonction is_admin.

php is_admin();

Fonction personnalisée

Avant de charger une fonction personnalisée en front il faut penser à vérifier que celle ci existe avec la confition

if ( ! function_exists( 'nomFonction' ) ) :
    function nomFonction() {
        [...]
    }
endif;

+++