web-dev-qa-db-fra.com

Ai-je besoin d'un tout nouveau modèle pour une application Web mobile?

J'ai une application Web ne servant actuellement que des clients de bureau. Je créerai une version mobile de l'application.

Je me demande:

  • Dois-je créer la conception à partir de zéro et utiliser quelque chose comme plate-forme mobile pour concevoir la version mobile à partir de zéro?

Ou:

  • Puis-je simplement insérer la balise supplémentaire et modifier les éléments de niveau de bloc html5 actuels en utilisant @ écran de média et (max-device-width: 480px) {}?

Je suis plutôt expérimenté en matière de conception UI-UX de bureau HTML5 et CSS3 (+ JS), mais je n’ai pour l’instant rien fait pour les navigateurs mobiles et je me sens très confus.

Quelle option est la bonne façon de faire?

De plus, si vous avez des articles et des suggestions sur le sujet, je serais très heureux de les lire.

Merci beaucoup!

2
Phil

Vous n'avez pas besoin de créer un nouveau modèle à partir de rien mais vous devez mettre à jour votre modèle existant afin qu'il puisse être rendu "réactif". Responsive est le mot clé que vous souhaitez rechercher ici. Fondamentalement, cela vous permettra d'utiliser le modèle unique mais de le rendre différemment en fonction de la largeur de l'écran de l'utilisateur. Il peut s'agir de petites modifications telles que l'affichage/le masquage d'une barre latérale ou de modifications très importantes de la présentation et des éléments à l'aide de techniques Javascript plus avancées.

Consultez l'article de Luke Wrobelski, des tutoriels sur Lynda ou (je recommande fortement) le livre de A List Apart sur le sujet, entre autres.

1
joesk

Pour un article récent et très utile sur les techniques de réponse basées sur CSS, voir Construire un site réactif de base avec CSS . Cette implémentation est agréable car elle ne dépend pas d'un système de grille sous-jacent pour le contrôle des colonnes, ce qui signifie que les widgets de votre modèle existant pourraient être disposés de manière plus naturelle (au lieu de les regrouper dans des ensembles à placer dans des colonnes de la grille). Pour plus de détails sur les techniques et les considérations que vous pouvez appliquer à vos propres conceptions, voir Implémentation de la conception adaptative de Tim Kadlec .

1
Don Day