Séparer une version différente d'un site Web

Question

Je veux m'assurer de vouloir optimiser et rendre mon site très facile à maintenir pour différentes versions de mon site.

J'ai peu de version de mon site:

• iphone / ipod / android etc ...
• iPad / tablettes etc ...
• autres petits appareils comme l'ancien téléphone clap
• par défaut

J'utilise le serveur ubuntu avec MySQL 5, PHP 5 et Apache + Memcache.

Quelle serait la meilleure façon de mettre en œuvre mon site afin qu'ils utilisent tous la même fonctionnalité de base:

• PHP
• JS (pour commun)
• CSS (pour commun)
• etc ...?

merci

Answer 1

Remarque: cette solution est plus une question de performances qu'une solution rapide et j'ai enfin terminé

Je suppose que puisque vous utilisez Memcache, vous récupérez votre contenu à partir d'une base de données MySQL, puis analysez-le en PHP, enregistrez-le dans le cache et affichez-le.

Chaque version aurait un domaine différent. iPhone / Android (et autres smartphones) utilisera le domaine m.domain.com, les tablettes (iPad, galaxy etc ...) utiliseront t.domain.com, tous les autres utiliseront o.domain.com et la valeur par défaut utilisera www.domain.com ou domain.com.

Tous ces sous-domaines peuvent pointer vers le même dossier (/var/www/ - celui par défaut). Ce qui fera l'affaire, c'est comment vous l'appelez.

Ajoutez ceci à votre configuration .htaccess ou apache:

SetEnvIf Host ^www\. page=www
SetEnvIf Host ^o\. page=others
SetEnvIf Host ^m\. page=mobile
SetEnvIf Host ^t\. page=tablets
rewriterule ^.*$ index.php?subdomain=%{ENV:page} [QSA,L]

Ainsi, dans votre fichier PHP, vous pouvez utiliser le $_GET['subdomain'] et décider de ce que vous devez faire pour générer votre page. De cette façon, c'est très facile à maintenir, vous avez 1 point d'entrée et vous pouvez configurer des règles en PHP pour récupérer des informations sur ce que vous devez afficher (le contenu sera le même, seule la mise en page changera).

Une chose que je recommande sera d'optimiser vos fichiers. La version mobile de votre site doit en aucun cas être plus légère (CSS, Images, JS). Vous ne voulez pas que votre utilisateur charge de gros CSS, JS et images à partir d'un appareil mobile avec un réseau lent. Vous souhaitez optimiser autant que possible pour un périphérique réseau plus lent. En d'autres termes, vous ne souhaitez pas afficher un logo 300x200 sur un téléphone à clapet 176x220. Une façon sera de nommer votre fichier en fonction du domaine dans lequel il se trouve. Par exemple:

• file.css (4k) V.S. fichier-m.css (0.4k)
• logo.jpg (300px * 300px 15k) V.S. logo-m.jpg (100px * 40px 2k)

Et dans votre code PHP, vous pouvez avoir une logique pour charger dynamiquement des fichiers JS, Images et CSS. Pour rappel, plus vous chargez votre site mobile rapidement, mieux c'est. La maintenabilité est importante mais vos utilisateurs aussi. Si vous avez un site mobile lent, ils auront tendance à ne pas aller sur votre site et à aller ailleurs. Tout le monde n'utilise pas le réseau 3G / 4G ou le WiFi sur son téléphone. En outre, je recommande d'utiliser la compression de sortie (comme deflate ) quand vous le souhaitez pour accéder à vos fichiers.

Cela améliorera votre temps de chargement, en particulier pour les appareils mobiles. Maintenant, si vous utilisez le même fichier, disons un fichier Javascript pour envoyer un bulletin d'information, vous ne voulez pas le dupliquer ni le copier avec le nom. Au lieu de créer une logique supplémentaire dans votre PHP, vous pouvez créer un lien symbolique comme celui-ci:

ln -s /var/www/js/file.js /var/www/js/file-m.js

Avec cette solution, vous devrez rediriger vers le site approprié en fonction du type d'appareil utilisé. Vous ne voulez pas qu'un téléphone à clapet affiche une version iPhone de votre site. Voici quelques astuces que vous pouvez faire pour y parvenir:

// PHP version - also make sure the current domain is checked otherwise you will be in an infinite loop!
if(strpos($_SERVER['HTTP_USER_AGENT'],'iPhone') !== FALSE || strpos($_SERVER['HTTP_USER_AGENT'],'Android') !== FALSE)
{
  header('Location: http://m.domain.com/');
  exit();
}

OU dans la configuration .htaccess / apache sous le site par défaut:

RewriteEngine On
RewriteCond %{HTTP_USER_AGENT} "iphone|android" [NC]
RewriteCond %{HTTP_HOST} !^mobile.domain.com
RewriteRule ^(.*)$ http://m.domain.com/ [L,R=301] # or 302 if you want temporary
# etc...

Je vous recommande de consulter http://detectmobilebrowsers.com/ pour découvrir ce que vous pouvez utiliser pour le mobile appareils et vous pouvez vérifier http://validator.w3.org/mobile/ pour vous assurer que tout a l'air bon pour votre appareil mobile.

En ce qui concerne les fichiers PHP courants, je recommanderai d'utiliser un emplacement centralisé, un chemin spécifique que vous pouvez utiliser et que le monde extérieur ne peut pas utiliser. Vous pouvez mettre tout ce code dans un dossier commun où tous les sites peuvent accéder à ces fichiers. Exemple:

/web/lib/

De cette façon, personne, sauf vous, ne peut accéder directement à vos fichiers. Dans votre code PHP, vous ferez quelque chose comme (par exemple le script de connexion):

<?php
 define('BASE_PATH', '/web/lib/');
 require(BASE_PATH . 'filex.php');
 // etc...

Answer 2

Il existe plusieurs façons différentes, mais la plus simple à maintenir est d'utiliser une stratégie de développement mobile first. Cela signifie écrire le css pour la plus petite taille (en utilisant des tailles d'image plus petites si possible), et cela deviendra la base, puis en utilisant les requêtes multimédias css3, remplacerez le css de base avec de nouveaux styles.

Bien sûr, IE aura quelques problèmes, alors utilisez une instruction conditionnelle (lte ie8) après la feuille de style de base (afin qu'elle écrase les styles de base) pour charger le css de bureau pour ie.

En ce qui concerne JS, assurez-vous que le site peut fonctionner correctement avec JS désactivé. Un conseil est d'écrire le site complètement sans javascript, assurez-vous qu'il fonctionne, puis ajoutez-le après pour améliorer les fonctionnalités existantes.

Et en ce qui concerne le contenu principal, gardez-le le même, votre php n'a pas besoin d'être différent pour les différents appareils, laissez le css faire tout le gros du travail.

Voici un exemple de ce que vous pourriez avoir

//Your Base CSS (no background images here)
.content{
  width:240px;
  margin:0px auto;
}
.logo{
  background-image:url(../logosmall.png);
}
// Smartphones (portrait and landscape)
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
// Styles
}

// Smartphones (landscape)
@media only screen 
and (min-width : 321px) {
// Styles
}

// Smartphones (portrait)
@media only screen 
and (max-width : 320px) {
// Styles
}

// iPhone 4
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
// Styles
}

// iPads (portrait and landscape)
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
// Styles    
.content{
  width:768px;
}
.logo{
  background-image{url(../logomedium.png);
}

// iPads (landscape)
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
// Styles
}

// iPads (portrait)
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
// Styles 
}

// Desktops and laptops
@media only screen 
and (min-width : 1024px) {
// Styles
.content{
  width:1024px;
}
.logo{
  background-image:url(../logolarge.png);
}
}

Donc, dans cet exemple, je règle une largeur de base de 240px (en supposant que le plus petit écran qui sera utilisé est de 240px) et en le centrant, puis j'écrase cela en fonction de la taille de la fenêtre par une valeur plus grande. Il en va de même pour l'image, par défaut, je sers la plus petite image, puis je la redimensionne en fonction de la taille de la fenêtre.

Voici un exemple d’approche axée sur le mobile, que beaucoup considèrent comme la meilleure pratique pour travailler avec une conception réactive, car elle réduit la quantité d’images d’arrière-plan qu'un téléphone doit charger.

Jetez un œil à http://mediaqueri.es/ pour voir quelques exemples de designs réactifs

Et cherchez plus d'informations, ce que j'ai fourni ici ne fait qu'effleurer la surface. Une recherche sur le mobile first responsive design vous permettra d'obtenir de nombreuses informations à ce sujet.