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;

+++

Ajouter un beau hover à la galerie par défaut de WordPress avec jquery

jquery

Pour mon portofolio, j’avais besoin d’améliorer la galerie photo de base de WordPress.
Elle me convenait, toutefois je souhaitais que sur le roll hover apparaisse un fond blanc sur lequel le nom de la référence soit marqué.
L’idée est de récupérer le title de l’image et de le coller dans le h3 d’un div caché qui ne s’afficherait qu’au passage de la souris.

L’exemple se trouve ici : http://webdesign.niums.com/clients/

Pour rappel voilà de quoi est composée la galerie créée par WordPress
.gallery : class de la galerie
.gallery-item : dl : conteneur
.gallery-icon :dt : élément à définir
.attachment-thumbnail : notre miniature

Voilà ce que nous allons y ajouter grâce à jquery
.hide : un div qui contiendra notre texte
h3 : une balise de titre
XXX : notre texte en le copiant depuis la balise title de l’image

Préparons nos fichiers

Nous aurons besoin
– de créer un fichier javascript externe que nous chargerons : site.js
– de modifier le fichier css de wordpress : style.css

Tout d’abord créons un fichier javascript que nous enregistrerons dans un dossier js de notre dossier de thème.

Nous appellerons ce fichier dans le header.php ou le footer.php selon notre convenance : soit avec un chargement en mémoire avec un enqueue soit directement dans le fichier header

Charger les scripts en mémoire : Version wp_enqueue_scripts

Dans le fichier function php, ajoutons le code ci-dessous

 
/**
 * chargement de jquery, de la feuille de style et du fichier js
 */
function niums_scripts() {
 
 /* 
 chargeons jquery 
 wp_enqueue_scripts action hook charge seulement en front end 
 si les scripts sont nécessaires en admin on peut aussi 
 utiliser admin_enqueue_scripts 
 */	
 
   // l'appel à jquery qui est déjà inclus dans wordpress
   wp_enqueue_script('jquery'); 
   // appel du fichier styles.css
   wp_enqueue_style( 'style', get_stylesheet_uri() );
 
   // chargement de site.js en faisant attention à ce que jquery soit chargé avant 
   // (en tant que dépendance) puis on le charge dans le footer
   //wp_enqueue_script( $handle    ,$src    ,$deps    ,$ver    ,$in_footer );
    wp_enqueue_script( 'site.js', get_template_directory_uri() . '/js/site.js', array( 'jquery' ), '' , TRUE );
 
}
 
add_action( 'wp_enqueue_scripts', 'niums_scripts' );

Charger directement les scripts dans le header

Si pour une raison ou une autre, le chargement en mémoire ne vous convient pas, vous pouvez aussi charger directement les fichiers dans header.php entre head et /head

 
// Par défaut, jQuery est chargé dans le thème, pas besoin de le recharger
// charger le fichier js
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/site.js"></script>
 
// votre fichier style est normalement déjà chargé comme suit
 <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />

Création de notre js

Maintenant que tous nos fichiers sont chargés, nous pouvons créer nos fonctions.

PS : J’ai modifié mon appel à la fonction principale qui se fait lorsque le document est prêt afin qu’on puisse utiliser $() comme alias et cela sans conflit.

jQuery(document).ready(function($){
    // ici on peut utiliser $() avec la certitude que c'est jQuery, sans conflit possible
   // le code qui suit se placera donc ici
});

Pour commencer, ajoutons la classe wrap à chaque liste de définitions.
Cette class permettra aux listes d’avoir des positions « relative » afin que le futur div .hide, qui contient notre texte, puisse être positionné au-dessus des images car en position « absolute »

 
$(".gallery-item").addClass("wrap");
 
// puis attachons un gestionnaire d'évènement à la class wrap
 
$(".wrap").on({
   mouseover: function() {
      	$(".hide", this).stop().fadeTo(300, 1.0); // on définit le hover à 100%
   },
     mouseout: function() {
      	$(".hide", this).stop().fadeTo(300, 0); //  on définit le hover à 0%
  }
 });
 
//.puis nous ajoutons notre div .hide :  après  .gallery-icon 
 
$(".gallery .gallery-item .gallery-icon").append('<div class="\'hide\'"></div>');
 
// puis nous créons un h3 dans le .hide
 
$(".gallery .gallery-item .gallery-icon .hide").wrapInner('<h3>'); 
 
// puis nous copions le title dans le h3 en le recopiant depuis la balise title de l'image 
 
$(".gallery .gallery-item .gallery-icon").each(function (index) { 
var leTitre = $(this).find(".attachment-thumbnail").attr('alt');
$(this).find(".hide h3").text(leTitre);

Pour infos jQuery peut accepter un second paramètre afin d’écraser le contexte de la sélection

 $("img", this);
// est la même chose que
 $(this).find("img");

Et si l’image est un descendant direct de l’élément cliqué alors nous pouvons aussi écrire :

$(this).children("img");

En ce qui concerne le css, rien de spécial

Ajoutez le code ci-dessous dans votre fichier style.css

/* Wraps */
.wrap {
	position:relative;
	width:100%;
	height:auto;
}
 
.hide {
        display:none;
	background-color:#fff;
	background-color:rgba(255,255,255,.9);
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	z-index:2;
}

Pour info

Dans WordPress il est possible de choisir le nombre d’images par ligne.
Dans le cas contraire, pour décider du nombre d’éléments par ligne, on pourrait aussi écrire :

 
dl dt:nth-child(4n){clear:left;} 
//ou
ul li:nth-child(4n){clear:left;}

Voilà +++