Responsive web design, les points d'arrêt? Pourquoi conçu pour 1280, 1024, 640?
J'ai reçu une disposition de site web dans Photoshop pour les trois différentes résolutions: 1280, 1024 et 640 pixels de large. Comme mon expérience avec le RWD est quelque peu limitée, je voudrais obtenir une meilleure compréhension de la façon dont un web designer doit penser en termes de taille des points d'arrêt, fluidité etc. (au moment de la rédaction).
Mes questions spécifiques, découlant de ce projet sont:
- Pourquoi un designer aller avec ces 3 résolutions, étant donné que le projet est typique du site web de l'entreprise?
- Généralement, ces résolutions optimales ou devrais-je demander notre pour les autres?
(Ne pas 1024, 768, 320 plus de sens? Ou peut-être que je devrais être à la recherche de "naturel des points d'arrêt, par opposition à canonique?) - Comment dois-je penser à la mise en œuvre de la 640 mise en page en ce qui concerne l'iPhone 3 (@320px) et 4 (@640px)?
Merci pour toute aide.
OriginalL'auteur dani | 2012-10-10
Vous devez vous connecter pour publier un commentaire.
Telles semblent être les plus communs paysage résolutions 1280 être une grande version pour ordinateur de bureau, 1024 étant normales de bureau/paysage de la tablette, et 640 étant paysage pour mobile. Personnellement, je n'ai pas vu ces résolutions rapides cadres.
Je vais vous donner 2 cool sensible des cadres de référence. Squelette pistes de 3 niveaux de base: 960px+ (bureau), 768px (tablette) et <480px (mobile). Je pense que ce sont vraiment de bonnes résolutions pour travailler avec, surtout si vous êtes nouveau à l'réactif et sont encore habitués à travailler avec des pixels. Alternativement, vous pouvez utiliser le Boucle d'or approche qui utilise les mêmes principes (desktop, tablette, mobile), mais qui utilise ems au lieu de pixels, et est conçu avec un mobile-première à l'esprit (comme dans, vous de commencer la conception de la petite version, et ajouter les "trucs supplémentaires" pour les ordinateurs de bureau). Pour refroidir des articles et des trucs sur le sensible, je voudrais aussi encourager la vérification de la C'est Réactive blog.
iPhone design est spécial. Ne pas penser à eux comme à des résolutions différentes. Dans c'est la plus fine de l'état (portrait, mais encore dans le paysage, c'est le même état), vous travaillez au 320x480 (anciens modèles). Au-dessus des cadres de cette cible dans leur mobile unis. De la rétine à l'aide de modèles fonctionnent fondamentalement à cette "résolution", mais le double de chaque pixel pour la haute définition, vous êtes habitués à voir. Votre principale préoccupation avec votre conception est ici en ce qui concerne la rétine-prêt images. En cela, cette SmashingMag article devrait clarifier les choses!
Ne pas "design", pour 320, la conception de "mobile". En gros, tout "en vertu de 480px largeur" devrait démarrer à l'aide d'une colonne unique, 100% de la largeur de style (de cette manière, il pourrait même travailler à 240 si nécessaire). Mais oui, pour la rétine, vous utilisez un autre ensemble d'images avec 2x la résolution. Retina.js pourrait vous aider un peu - retinajs.com
OriginalL'auteur Brian
Ils sont probablement en ciblant l'ensemble du bureau, de bureau et de paysage formats de téléphone. Voir: http://astronautweb.co/2012/01/responsive-web-design-four-states/
(J'espère bien que le 1024 à l'échelle de la conception n'est pas réellement en 1024 pixels de large.)
OriginalL'auteur Diodeus - James MacFarlane