Script côté serveur + manipulation DOM pour les sites mobiles

Mobile ne signifie plus seulement smartphones. Le mot s’est métamorphosé en un terme global pour tout appareil informatique non relié en permanence à une prise murale. Alors qu’il y a un milliard de téléphones en service dans le monde, plus de 52 millions de tablettes ont été vendues au cours du seul dernier trimestre de 2012, et les ventes de tablettes devraient dépasser les ventes d’ordinateurs portables d’ici 2016. Adapter votre site Web pour offrir une expérience mobile optimisée qui s’adapte automatiquement à plusieurs types d’appareils sera très bientôt une exigence plutôt qu’une caractéristique.

La solution populaire : la conception Web réactive

Le développement pour le Web mobile implique désormais une compréhension des navigateurs mobiles, de leurs moteurs JavaScript et CSS, et de l’expérience utilisateur attendue pour un large éventail d’appareils à écran tactile. La solution populaire à ce problème est site Web adaptatif. La conception Web réactive exploite les nouvelles fonctionnalités de CSS3 pour modifier activement la taille et la position des éléments de la page Web en fonction de la taille de l’écran, de l’orientation et du ratio de pixels. C’est une solution solide pour les sites axés sur le contenu, dont la principale exigence est de rendre le texte et les images digestes.

D’un autre côté, le redimensionnement et le repositionnement du contenu ne répondent pas entièrement aux besoins d’interface ou d’expérience utilisateur des sites Web qui ont une forte interaction, tels que les applications Web et les sites de commerce électronique. Pour ces types de sites, la conception réactive n’est qu’une petite pièce d’un puzzle beaucoup plus vaste.

Problèmes avec la conception Web réactive

D’une part, les utilisateurs mobiles se sont acclimatés au fonctionnement des applications natives.

L’engagement de ces utilisateurs via le Web nécessite de plus en plus une disposition d’interface qui imite les applications natives qu’ils associent à leurs appareils. Les techniques de conception réactive échouent seules dans cette tâche, pour les raisons suivantes :

Bien que la popularité de la conception Web réactive augmente au sein des cercles créatifs, ses limites l’empêchent d’être une solution régulière en dehors des blogs, des portefeuilles de conception et des sites d’actualités.

Script côté serveur + manipulation DOM

Heureusement, avec l’acceptation assez récente et omniprésente des normes HTML5, CSS3 et JavaScript DOM sur les principaux navigateurs mobiles, des techniques alternatives (avec une conception réactive en tant que composant facultatif) sont disponibles. Créer des applications Web qui fonctionnent comme leurs homologues natives haut de gamme, sans rediriger vers des sous-domaines distincts, est un objectif réalisable pour les développeurs Web dévoués et aventureux.

Sur le site Web de mon entreprise, SpotTrot – qui est axé sur le contenu, mais offre quelques éléments interactifs – nous servons non seulement des interfaces de bureau et mobiles, mais également une tablette distincte. Nous le faisons sans rediriger l’utilisateur vers un « point m » séparé (par exemple m.yourwebsite.com ou mobile.yourwebsite.com ) ou « t-dot » (par exemple

t.yourwebsite.com ou tablet.yourwesbite.com ) sous-domaines. En d’autres termes, nous ne maintenons pas un site distinct pour les appareils mobiles et les tablettes – nous modifions simplement le DOM et servons les fichiers JavaScript et CSS appropriés en fonction de l’appareil de navigation de l’utilisateur.

Utilisation de bibliothèques de script côté serveur pour une reconnaissance de périphérique affinée

La première étape pour y parvenir consiste à utiliser l’analyse de chaîne d’agent utilisateur côté serveur pour déterminer le type d’appareil du visiteur.

L’analyse des chaînes d’agent utilisateur pour servir une interface personnalisée est presque aussi ancienne que le Web lui-même. Ces dernières années, il est devenu la principale technique de diffusion des versions « m-dot » des sites. La philosophie de conception réactive évite de servir des sous-domaines distincts pour les appareils mobiles, mais la détection traditionnelle des scripts côté serveur peut être réutilisée pour restituer le même fichier HTML de plusieurs manières.

Il existe un large éventail de bibliothèques qui facilitent la détection des périphériques côté serveur, mais peu fonctionnent aussi bien. MobileESP, À mon avis. MobileESP est disponible dans tous les principaux langages de programmation Web et détecte à la fois le type d’appareil et ses capacités. Voici un exemple de la façon dont notre site Web utilise la version PHP de MobileESP pour catégoriser les appareils et servir le CSS et le JavaScript appropriés :

<?php // Create some constants for devices class Device { const TABLET = 0; const PHONE = 1; const DESKTOP = 2; }  // Initialize MobileESP object $uagent_info = new uagent_info(); // Define the device     if($uagent_info->isTierTablet) { $device = Device::TABLET; } elseif($uagent_info->isIphone || $uagent_info->isAndroidPhone || $uagent_info->isTierRichCss) { $device = Device::PHONE; } else { $device = Device::DESKTOP; } ?> <html> <head> ...  <!-- Serve up the appropriate CSS and JavaScript for the device --> <?php switch($device) : ?> <?php case Device::TABLET: ?> <link rel="stylesheet" type="text/css" href="https://www.webfx.com/blog/web-design/server-side-dom-mobile-friendly/style/tablet.css"/> <script type="text/javascript" src="js/tablet.js"></script> <?php break; ?> <?php case Device::PHONE: ?> <link rel="stylesheet" type="text/css" href="style/phone.css"/> <script type="text/javascript" src="js/phone.js"></script> <?php break; ?> <?php default: ?> <link rel="stylesheet" type="text/css" href="style/desktop.css"/> <script type="text/javascript" src="js/desktop.js"></script> <?php break; ?> <?php endswitch; ?> </head> ... </html> 

Requêtes média CSS vs manipulation DOM

Alors que les interfaces de bureau et de téléphone mobile peuvent suivre des règles de conception plus traditionnelles, l’espace de la tablette a un degré de variation beaucoup plus élevé et nécessite plus de prévoyance. Les tailles d’écran des tablettes varient généralement entre 7 et 10 pouces, tandis que les téléphones oscillent généralement autour de 4 pouces. Par conséquent, les écrans Retina sur les tablettes ont un impact plus important sur la quantité de pixels à l’écran.

Pour notre site Web, cela signifie que l’affichage de texte à une colonne ne fonctionne pas toujours pour les tablettes et doit être remplacé par l’affichage à trois colonnes également utilisé sur la version de bureau du site. Ceci peut être accompli grâce à Requêtes média CSS ou Manipulation JavaScript du DOM.

Requête média CSS

CSS3 permet une utilisation intensive des conditions en fonction des caractéristiques de l’écran de l’utilisateur (telles que la largeur et l’orientation). Voici un exemple d’utilisation des requêtes multimédias pour concevoir des mises en page réactives :

@media screen and (min-width: [width]px) { .class { property: value; } } @media screen and (-webkit-min-device-pixel-ratio: 2) @media screen and (orientation: landscape) @media screen and (device-aspect-ratio: 16/9) 

Manipulation DOM

Cependant, notre site utilise la programmation JavaScript DOM via jQuery pour basculer entre la vue simple et triple colonne.

La manipulation du DOM permet un contrôle complet et en temps réel sur la mise en page d’une page Web. Le JavaScript spécifique à la tablette, servi par l’analyse de l’agent utilisateur, contient du code qui modifie le CSS des éléments div HTML préexistants.

// If the screen is wide enough that we want 3 columns if($(window).width() >= 770) {  // Create the indent $("#front_items").css( { 'margin-top': '-5px', 'margin-left': '20px' });  // Size the columns var textWidth = ($("#carousel").width() - 70) / 3; $(".front_column").css( { 'width': textWidth + 'px', 'margin-bottom': '0' }); }  // One column interface else { $("#front_items").css( { 'margin-top': '0', 'margin-left': '0' }); textWidth = $("#carousel").width() + 20; $(".front_column").css( { 'width': textWidth + 'px', 'margin-bottom': '5px' }); }

Inconvénients des scripts côté serveur + manipulation DOM

Bien que cette technique, à mon avis, permette un bien meilleur contrôle sur la conception et l’interactivité par rapport à l’utilisation de requêtes CSS3/médias, elle n’est pas sans inconvénients potentiels.

  • Aucune détection d’appareil ou de navigateur n’est sans faille. La meilleure façon de maximiser la détection des appareils est d’utiliser une bibliothèque régulièrement mise à jour comme MobileESP.
  • Cette solution ne fonctionnera pas pleinement si l’utilisateur a désactivé JavaScript. Bien que les utilisateurs exceptionnellement rares qui ont désactivé JavaScript soient habitués à des sites Web qui ne fonctionnent pas pleinement, l’utilisation exclusive de requêtes multimédia CSS spécifiques à l’appareil est la meilleure option si vous souhaitez conserver certains des avantages sans utiliser JavaScript.
  • Cette solution nécessite la maintenance de fichiers CSS et JavaScript distincts pour chaque appareil ciblé par opposition à un seul fichier CSS que les requêtes multimédias peuvent se permettre.

Comment ça marche sur notre site Web

Le menu de navigation est le seul élément des trois versions du site SpotTrot qui présente une variation complète. C’est donc un excellent sujet de discussion pour montrer comment cette méthode fonctionne dans le monde réel. Sur le bureau, un menu horizontal se trouve sous l’en-tête, correspondant à la disposition traditionnelle du site Web.

Cela permet à l’utilisateur d’interagir naturellement et laisse la conception visuelle de ces éléments comme principal différenciateur. Sur la tablette, le même menu horizontal est déplacé au-dessus de l’en-tête. Il est ensuite légèrement modifié, avec le rayon du coin déplacé vers le bas, pour renforcer son positionnement en haut de la page.

Cela suit l’interface attendue d’une application mobile native, avec tous les contrôles de navigation généralement dans une barre en haut. Enfin, la version téléphone affiche la plus grande variation d’interface. Il serait impossible d’adapter tous les boutons de navigation horizontaux sur la plupart des smartphones, la conception opte donc pour un menu vertical.

Les boutons s’adaptent automatiquement à la largeur de l’écran pour maintenir le sens de la direction verticale de l’utilisateur, complétant ainsi la disposition en colonne unique pour les petits écrans.

Conclusion

Au cours des dernières années, la conception et le développement d’applications Web ont été les plus touchés par les écrans tactiles. Le passage de l’interaction informatique à une expérience tactile est le facteur clé de la « révolution mobile ». Alors que les ordinateurs portables et les ordinateurs de bureau à écran tactile deviennent la norme, les conceptions d’interface actuellement mises en œuvre sur les smartphones et les tablettes seront bientôt la façon dont toutes les applications Web seront conçues.

L’apprentissage de ces techniques et philosophies peut être facultatif pour le moment, mais ce sera bientôt un élément central de la description de poste de tout développeur Web.

Contenu connexe

Leave a comment

Votre adresse e-mail ne sera pas publiée.