Mobile, Tablette, Navigateur – Ajouter des User Agents sur Safari pour tester le responsive design de votre site


Il est parfois assez compliqué avec la seule utilisation d’émulateurs (android, iOS, Windows Phone…) de tester de manière correcte un site que l’on souhaite faire en responsive design. En effet, vous êtes obligé(e) d’installer le SDK de chaque système d’exploitation, de le configurer bref de le faire fonctionner. Or, Safari apporte une solution facile et agile pour remédier à ce problème. Pour résumer simplement, vous pouvez d’une certaine façon créer autant de “profil” que vous le souhaitez au sein du navigateur Safari, profils qui sont autant de “User Agent” permettant de simuler la vue sur une Tablette ou sur un mobile, fonctionnant sous tous les systèmes d’exploitations du marché : iOS, Android, Windows Phone, BlackBerry…etc.

Responsive Web design, N°4

Responsive Web design, N°4

Un tour d'horizon rapide et pragmatique sur les questions de responsive Web design afin de concevoir des expériences UX multi-plateformes (mobile, tablette et web)

Genre(s) : , , , , , , , , , , , ,

Un tour d’horizon des “User Agent”

On liste ici les principaux user agent notamment en faisant tout de même la distinction entre les tablettes et les mobiles, car très souvent les expériences, l’UX et les IHM que l’on conçoit pour un site diffère quelque peu selon la taille de l’écran… en attendant la télévision connectée bien sûr.

Voici un rapide tour d’horizon non exhaustif des “User Agnet” dont vous aurez sans doute besoin. Il en existe assurément un bien plus grand nombre mais pour des raisons pratiques et pragmatiques, nous ne donnons que les principaux.

Dans la famille “Android”…

  • Le User Agent pour une tablette Galaxy qui fonctionne avec Android sera la suivant :
    Mozilla/5.0 (Linux; Android 4.0.4; GT-P7510 Build/IMM76D) AppleWebKit/535.19 (KHTML, like Gecko) Chrome/18.0.1025.166 Safari/535.19
  • Le User Agent pour un Galaxy Note (mobile) qui fonctionne avec Android sera la suivant :
    Mozilla/5.0 (Linux; Android 4.0.4; GT-N7000 Build/IMM76D) AppleWebKit/535.19 (KHTML, like Gecko) Chrome/18.0.1025.166 Mobile Safari/535.19

Source : http://docs.oracle.com/cd/E14004_01/books/ConnMobApps/ConnMobApps_Setup8.html

Dans la famille “Windows Phone”
Quelques membres de l’honorable famille “Windows Phone”…

  • Le User Agent Windows Phone 7
    Mozilla/4.0 (compatible; MSIE 7.0; Windows Phone OS 7.0; Trident/3.1; IEMobile/7.0; LG; GW910)
  • Le User Agent Windows Phone 7.5
    Mozilla/5.0 (compatible; MSIE 9.0; Windows Phone OS 7.5; Trident/5.0; IEMobile/9.0; SAMSUNG; SGH-i917)
  • Le User Agent Windows Phone 8
    Mozilla/5.0 (compatible; MSIE 10.0; Windows Phone 8.0; Trident/6.0; IEMobile/10.0; ARM; Touch; NOKIA; Lumia 920)

Source : http://jonathanstark.com/blog/

Dans la famille “BlackBerry”
La famille des terminaux “Mûre” (aka BlackBerry en anglais) est d’une très grande variété. Pour plus d’information, sur la manière de cibler les terminaux BlackBerry, on vous invite vivement à consulter le blog de développement de blackberry.com. Il y est expliqué le modèle de construction ou la “pattern” qui spécifie le “User Agent” de chaque modèle de Blackberry.

  • Le modèle du “User Agent” pour un BlackBerry 10
    Mozilla/5.0 (BB10; ) AppleWebKit/537.10+ (KHTML, like Gecko) Version/ Mobile Safari/537.10+

Source : http://devblog.blackberry.com/2012/08/blackberry-10-user-agent-string/

On vous donne néanmoins quelques-uns des users agents nous avons pu cueillir sur le web…

  • Le User Agent pour le modèle Z10
    Mozilla/5.0 (BB10; Touch) AppleWebKit/537.10+ (KHTML, like Gecko) Version/10.0.9.2372 Mobile Safari/537.10+
  • Le User Agent pour la tablette BlackBerry
    Mozilla/5.0 (PlayBook; U; RIM Tablet OS 2.0.0; en-US) AppleWebKit/535.8+ (KHTML, like Gecko) Version/7.2.0.0 Safari/535.8+

Enfin, un exemple assez complet, où l’on comprend mieux en pratique le mode détermination du modèle.

Blackberry Curve: BlackBerry8330/4.5.0.77 Profile/MIDP-2.0 Configuration/CLDC-1.1 VendorID/105
Blackberry Curve 2: BlackBerry8530/5.0.0.337 Profile/MIDP-2.1 Configuration/CLDC-1.1 VendorID/105
Blackberry Storm: BlackBerry9530/4.7.0.148 Profile/MIDP-2.0 Configuration/CLDC-1.1 VendorID/105
Blackberry Storm 2: BlackBerry9550/5.0.0.287 Profile/MIDP-2.1 Configuration/CLDC-1.1 VendorID/105
Blackberry Tour : BlackBerry9630/4.7.1.40 Profile/MIDP-2.0 Configuration/CLDC-1.1 VendorID/105
Blackberry Pearl Flip: BlackBerry8230/4.6.1.234 Profile/MIDP-2.0 Configuration/CLDC-1.1 VendorID/105
Blackberry Pearl: BlackBerry8130/4.3.0 Profile/MIDP-2.0 Configuration/CLDC-1.1 VendorID/105
Blackberry World: BlackBerry8830/4.2.2 Profile/MIDP-2.0 Configuration/CLDC-1.1 VendorID/105

Keep in mind that “VendorID/105″ specifies Verizon networks.

Source : http://jeffhee.wordpress.com/2010/01/12/blackberry-user-agent-strings/

Muni de cette armée de “User Agent”, on va pouvoir créer, sous Safari, chaque profil pour tester chaque terminal souhaité.

Comment ajouter facilement des User Agents à Safari

La première chose à faire est de bien fermer Safari. Car, on s’apprête à manipuler un fichier de “configuration” du navigateur. On va tout simplement les User Agents trouvés plus haut à la liste des terminaux disponibles sous le navigateur Safari dans l’onglet “Développement”.

Evidement, si vous n’avez pas activé l’onglet “Développement” dans Safari, activez-le !

Comment activer l’onglet “Développement” ?
“Après avoir lancé Safari, cliquez dans la barre de menu sur Safari>Préférences, puis rendez-vous dans l’onglet Avancées et cochez la case en bas de la fenêtre : « Afficher le menu Développement dans la barre des menus » puis quittez les préférences de Safari.”

Source : http://www.blogdumac.com/trucs-astuces/safari-menu-developpement-382#sthash.Yug6GTAr.dpuf

Considérons donc que l’onglet “Développement” est activé et que Safari est fermé ! Enfin…. On va donc éditer la liste des User Agents de Safari contenu dans le fichier UserAgents.plist

On va copier via la console le fichier sur notre bureau puis l’éditer.
cp /Applications/Safari.app/Contents/Resources/UserAgents.plist ~/Desktop/

En l’éditant, on rajoute les User Agents manquants dans UserAgents.plist

	<!-- ANDROID  -->
	<dict>
		<key>separator</key>
		<true/>
	</dict>
	<dict>
		<key>name</key>
		<string>Android Tablet</string>
		<key>version</key>
		<string>4.0.4</string>
		<key>platform</key>
		<string>Mac</string>
		<key>user-agent</key>
		<string>Mozilla/5.0 (Linux; Android 4.0.4; GT-P7510 Build/IMM76D) AppleWebKit/535.19 (KHTML, like Gecko) Chrome/18.0.1025.166 Safari/535.19</string>
	</dict>
	<dict>
	<key>name</key>
	<string>Android Mobile</string>
	<key>version</key>
	<string>2.1</string>
	<key>platform</key>
	<string>Mac</string>
	<key>user-agent</key>
	<string>Mozilla/5.0 (Linux; U; Android 2.1; en-us; Nexus One Build/ERD62) AppleWebKit/530.17 (KHTML, like Gecko) Version/4.0 Mobile Safari/530.17</string>
	</dict>
	<!-- // ANDROID  -->
 
	<!-- WINDOWS PHONE  -->
	<dict>
		<key>separator</key>
		<true/>
	</dict>
 
	<dict>
	<key>name</key>
	<string>Windows Mobile</string>
	<key>version</key>
	<string>8.0</string>
	<key>platform</key>
	<string>Mac</string>
	<key>user-agent</key>
	<string>Mozilla/5.0 (compatible; MSIE 10.0; Windows Phone 8.0; Trident/6.0; IEMobile/10.0; ARM; Touch; NOKIA; Lumia 920)</string>
	</dict>
	<!-- // WINDOWS PHONE  -->
 
	<!-- BLACKBERRY  -->
	<dict>
		<key>separator</key>
		<true/>
	</dict>
 
	<dict>
	<key>name</key>
	<string>Blackberry Z10</string>
	<key>version</key>
	<string>10.0.9.2372</string>
	<key>platform</key>
	<string>Mac</string>
	<key>user-agent</key>
	<string>Mozilla/5.0 (BB10; Touch) AppleWebKit/537.10+ (KHTML, like Gecko) Version/10.0.9.2372 Mobile Safari/537.10+</string>
	</dict>
	<!-- // BLACKBERRY -->

Puis on copie notre nouveau UserAgents.plist au précédent endroit.
sudo cp ~/Desktop/UserAgents.plist /Applications/Safari.app/Contents/Resources/UserAgents.plist

Safari avec le nouveau fichier UserAgents.plist
Mobile, Tablette, Navigateur - Ajouter des User Agents sur Safari pour tester le responsive design de votre site

Safari avec le nouveau fichier UserAgents.plist
Mobile, Tablette, Navigateur - Ajouter des User Agents sur Safari pour tester le responsive design de votre site

Pour mémoire, voici le fichier d’origine UserAgents.plist

	<?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot;?>
	<!DOCTYPE plist PUBLIC &quot;-//Apple//DTD PLIST 1.0//EN&quot; &quot;http://www.apple.com/DTDs/PropertyList-1.0.dtd&quot;>
	<plist version=&quot;1.0&quot;>
	<array>
		<dict>
			<key>name</key>
			<string>Safari</string>
			<key>version</key>
			<string>5.1.9</string>
			<key>platform</key>
			<string>Mac</string>
			<key>user-agent</key>
			<string>Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10_6_8; en-us) AppleWebKit/534.59.8 (KHTML, like Gecko) Version/5.1.8 Safari/534.59.8</string>
		</dict>
		<dict>
			<key>name</key>
			<string>Safari</string>
			<key>version</key>
			<string>5.1.6</string>
			<key>platform</key>
			<string>Windows</string>
			<key>user-agent</key>
			<string>Mozilla/5.0 (Windows; U; Windows NT 6.1; en-us) AppleWebKit/534.59.8 (KHTML, like Gecko) Version/5.1.6 Safari/534.59.8</string>
		</dict>
		<dict>
			<key>separator</key>
			<true/>
		</dict>
		<dict>
			<key>name</key>
			<string>Safari iOS</string>
			<key>version</key>
			<string>4.3.3</string>
			<key>platform</key>
			<string>iPhone</string>
			<key>user-agent</key>
			<string>Mozilla/5.0 (iPhone; U; CPU iPhone OS 4_3_3 like Mac OS X; en-us) AppleWebKit/533.17.9 (KHTML, like Gecko) Version/5.0.2 Mobile/8J2 Safari/6533.18.5</string>
		</dict>
		<dict>
			<key>name</key>
			<string>Safari iOS</string>
			<key>version</key>
			<string>4.3.3</string>
			<key>platform</key>
			<string>iPod touch</string>
			<key>user-agent</key>
			<string>Mozilla/5.0 (iPod; U; CPU iPhone OS 4_3_3 like Mac OS X; en-us) AppleWebKit/533.17.9 (KHTML, like Gecko) Version/5.0.2 Mobile/8J2 Safari/6533.18.5</string>
		</dict>
		<dict>
			<key>name</key>
			<string>Safari iOS</string>
			<key>version</key>
			<string>4.3.3</string>
			<key>platform</key>
			<string>iPad</string>
			<key>user-agent</key>
			<string>Mozilla/5.0 (iPad; U; CPU OS 4_3_3 like Mac OS X; en-us) AppleWebKit/533.17.9 (KHTML, like Gecko) Version/5.0.2 Mobile/8J2 Safari/6533.18.5</string>
		</dict>
		<dict>
			<key>separator</key>
			<true/>
		</dict>
		<dict>
			<key>name</key>
			<string>Internet Explorer</string>
			<key>version</key>
			<string>9.0</string>
			<key>platform</key>
			<string>Windows</string>
			<key>show-platform</key>
			<false/>
			<key>user-agent</key>
			<string>Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; Trident/5.0;</string>
		</dict>
		<dict>
			<key>name</key>
			<string>Internet Explorer</string>
			<key>version</key>
			<string>8.0</string>
			<key>platform</key>
			<string>Windows</string>
			<key>show-platform</key>
			<false/>
			<key>user-agent</key>
			<string>Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.0; Trident/4.0)</string>
		</dict>
		<dict>
			<key>name</key>
			<string>Internet Explorer</string>
			<key>version</key>
			<string>7.0</string>
			<key>platform</key>
			<string>Windows</string>
			<key>show-platform</key>
			<false/>
			<key>user-agent</key>
			<string>Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.0)</string>
		</dict>
		<dict>
			<key>separator</key>
			<true/>
		</dict>
		<dict>
			<key>name</key>
			<string>Firefox</string>
			<key>version</key>
			<string>4.0.1</string>
			<key>platform</key>
			<string>Mac</string>
			<key>user-agent</key>
			<string>Mozilla/5.0 (Macintosh; Intel Mac OS X 10.6; rv:2.0.1) Gecko/20100101 Firefox/4.0.1</string>
		</dict>
		<dict>
			<key>name</key>
			<string>Firefox</string>
			<key>version</key>
			<string>4.0.1</string>
			<key>platform</key>
			<string>Windows</string>
			<key>user-agent</key>
			<string>Mozilla/5.0 (Windows NT 6.1; rv:2.0.1) Gecko/20100101 Firefox/4.0.1</string>
		</dict>
		<dict>
			<key>separator</key>
			<true/>
		</dict>
		<dict>
			<key>name</key>
			<string>Opera</string>
			<key>version</key>
			<string>11.11</string>
			<key>platform</key>
			<string>Mac</string>
			<key>user-agent</key>
			<string>Opera/9.80 (Macintosh; Intel Mac OS X 10.6.8; U; en) Presto/2.8.131 Version/11.11</string>
		</dict>
		<dict>
			<key>name</key>
			<string>Opera</string>
			<key>version</key>
			<string>11.11</string>
			<key>platform</key>
			<string>Windows</string>
			<key>user-agent</key>
			<string>Opera/9.80 (Windows NT 6.1; U; en) Presto/2.8.131 Version/11.11</string>
		</dict>
	</array>
	</plist>

Comment tester ensuite ?

Il ne reste plus qu’à faire la détection dans le langage de programmation de votre choix, en PHP ou en Javascript par exemple, puis de tester facilement si la détection fonctionne à l’aide des nouveaux profils disponibles dans Safari afin d’afficher des experiences UX ou des IHM différentes selon le terminal qui se présente.

Pour information, il existe de nombreuses fonctions de détection natives dans les CMS type WordPress ou disponibles sur le web.

Dans WordPress, il existe une fonction qui permet de différencier le mobile du reste, sommaire mais efficace…

	<?php
	/* http://codex.wordpress.org/Function_Reference/wp_is_mobile Since: 3.4 in WP */
	if ( wp_is_mobile() ) { 
		// Visitor is on a mobile device
			echo ('<!-- mobile device -->');
		} else { 
		// Visitor is on a desktop (not mobile) device
			echo ('<!-- desktop device -->');
		}
	?>

Source : http://codex.wordpress.org/Function_Reference/wp_is_mobile

En voici une autre qui permet entre autre de distinguer : mobile, tablet, desktop.

 
	<?php 
	function userAgent($ua){ 
	## This credit must stay intact (Unless you have a deal with @lukasmig or frimerlukas@gmail.com 
	## Made by Lukas Frimer Tholander from Made In Osted Webdesign. 
	## Price will be $2 

	    $iphone = strstr(strtolower($ua), 'mobile'); //Search for 'mobile' in user-agent (iPhone have that) 
	    $android = strstr(strtolower($ua), 'android'); //Search for 'android' in user-agent 
	    $windowsPhone = strstr(strtolower($ua), 'phone'); //Search for 'phone' in user-agent (Windows Phone uses that) 
 
 
	    function androidTablet($ua){ //Find out if it is a tablet 
	        if(strstr(strtolower($ua), 'android') ){//Search for android in user-agent 
	            if(!strstr(strtolower($ua), 'mobile')){ //If there is no ''mobile' in user-agent (Android have that on their phones, but not tablets) 
	                return true; 
	            } 
	        } 
	    } 
	    $androidTablet = androidTablet($ua); //Do androidTablet function 
	    $ipad = strstr(strtolower($ua), 'ipad'); //Search for iPad in user-agent 
 
	    if($androidTablet || $ipad){ //If it's a tablet (iPad / Android) 
	        return 'tablet'; 
	    } 
	    elseif($iphone &amp;&amp; !$ipad || $android &amp;&amp; !$androidTablet || $windowsPhone){ //If it's a phone and NOT a tablet 
	        return 'mobile'; 
	    } 
	    else{ //If it's not a mobile device 
	        return 'desktop'; 
	    }     
	} 
	?>

Il existe aussi des “librairies” pour faire ce type de détection. On peut citer par exemple, celle de mobiledetect.net.

Mobile Detect is a lightweight PHP class for detecting mobile devices (including tablets). It uses the User-Agent string combined with specific HTTP headers to detect the mobile environment.

Source : http://mobiledetect.net/

Conclusion : Avec ces nouveaux “User Agent” disponibles dans Safari, vous pourrez nettement plus facilement tester les différents terminaux sur lesquelles votre site sera susceptible d’être vu et bien vu avec l’UX optimal !

En savoir plus