Conseils pour développer un site web responsive

Question

Je ne parviens pas à trouver un bon flux de travail lors de la conception d'un site Web réactif.

J'ai essayé quelques approches, ce que je fais actuellement:

1. Est-ce que tous les html et css fonctionnent avec la fenêtre maximisée (environ 1400px de large)
2. Puis je le rétrécis et insère @media screen and (min-width: 600px) par exemple, quand je vois la mise en page devenir folle, puis la réparer
3. Réduire un peu plus et puis par ex. @media screen and (min-width: 400px) et ainsi de suite ...

Dans le code HTML, j’utilise <meta name="viewport" content="width=device-width, initial-scale=1">, comme c’est ce qui ressort de HTML5Boilerplate.

De la grande fenêtre à la petite, tout fonctionne à l’arrière, et je finis par avoir une bonne version mobile du site.

Bonne droite? Non, le problème est que lorsque je maximise à nouveau, certaines choses sont gâchées et il est incroyablement difficile de les réparer. Comme dans frustrant, prend du temps ...

J'ai essayé ce processus douloureux dans les deux sens (du plus grand au plus petit et vice-versa).

L'utilisation de l'unité vw a beaucoup aidé (maintenant, je la mets partout), mais c'est quand même une sorte de cauchemar, du moins pour moi.

J'ai même essayé des programmes comme Macaw ou Rediffuser mais je suis pas très à l'aise car à la fin je vais devoir faire quelques retouches/optimisations à la main alors pourquoi ne pas tout faire à la main pour commencer ...

Je dois faire quelque chose de mal. Qu'Est-ce que c'est? Quelle est la meilleure façon/la plus facile de faire cela? Travailler avec max-width plutôt une meilleure idée?

Il doit y avoir un flux de travail évident que je ne connais pas.

Answer 1

Je ne pense pas que quiconque puisse vous donner des conseils spécifiques sur la raison pour laquelle la conception réactive est si difficile à coder, mais il existe généralement deux approches. A. vous concevez pour le plus petit écran possible et avancez vers le haut (mobile en premier), ou b vous démarrez avec le plus grand écran possible et descendez. Vous pouvez obtenir des éléments très élaborés, et c’est une question de préférence des utilisateurs quant aux divs que vous souhaitez afficher/masquer, ou de redessiner en fonction de vos conceptions réactives. Après des années de travail avec des conceptions réactives, voici comment je l'aborde.

• Je conçois toujours pour Monitors First sur le plus grand écran possible. Voici mes points d'arrêt:
• Supérieur à 2560 largeur (alors je viens de letterbox le site en 2560)
• 1921 - 2560 - Écrans géants (écrans de cinéma)
• 1441 - 1920 - Écrans HD
• 1100 - 1440 - Macbook Airs
• Tablettes (portrait d'orientation de l'appareil) Moderniseur tactile activé
• Activation tactile du modernisateur des tablettes (paysage d'orientation de l'appareil)
• Téléphones (portrait d'orientation de l'appareil) Moderniseur tactile activé
• téléphones (orientation de l'appareil paysage) touche de modernisation (nous superposons simplement une div et nous leur demandons d'allumer leur appareil, car il est impossible de concevoir un téléphone en mode paysage).

Encore une fois, tout dépend de ce qui fonctionne pour votre projet, du nombre de points d'arrêt que vous avez. Si vous utilisez quelque chose comme Twitter Bootstrap, ils ont un bel ensemble de points d'arrêt (pas aussi haut que 2560) qui devraient vous donner un bon départ (si vous êtes prêt à payer pour cela avec des tonnes de classes de CSS non utilisées). .