Share
Lorsque les tablettes et les téléphones intelligents ont commencé à faire leur apparition, de nombreux éditeurs ont développé des sites Web distincts, ou du moins des arborescences de code HTML générées distinctement, afin de personnaliser l'expérience des visiteurs sur différents appareils. Certes, des solutions sont apparues pour faciliter les choses, telles que ce plugin de thème WordPress pour mobile:
Mais, pour réellement offrir une expérience solide aux visiteurs sur tous les appareils, la plupart des projets ont nécessité des efforts de conception, de codage et de test en double ou en triple.
Le concept de conception Web réactive visait à unifier l'arborescence du code, à éliminer les outils de code et à proposer une approche plus simple pour fournir une expérience utilisateur de haute qualité sur tous les périphériques. Au début, il fallait un peu d’expérimentation et une première expertise, mais aujourd’hui, il est devenu courant. C'est un témoignage de l'orientation autour de l'ingénierie DRY.
Lorsque j'ai lancé mon site WordPress personnel, le choix du design réactif représentait encore un progrès important et de nombreux sites réalisés avec différents niveaux de qualité pour l'expérience de vos visiteurs..
La version open source de Bootstrap sur Twitter a considérablement transformé la réactivité de la conception Web. Comme moi, vous dirigez probablement un thème responsive sur votre site Web et connaissez les concepts généraux de la présentation dynamique. Mais savez-vous comment la conception Web réactive fonctionne sous le capot? Savez-vous comment construire quelque chose de sensible à partir de zéro? Voulez-vous en savoir plus?
Dans ce didacticiel, nous vous encourageons à consulter le dernier livre blanc de Telerik sur la conception de sites Web réactifs (RWD). Des techniques indispensables à la création d'applications HTML5 pour toutes les tailles d'écran, que vous pouvez télécharger gratuitement dès maintenant, constituent un guide extrêmement détaillé pour répondre à ces questions et vous aider à vous mettre à niveau..
Il existe de nombreuses raisons pour lesquelles la conception Web réactive est passée de l’appellation de tendance à synonyme de meilleures pratiques Web. C'est un moyen rapide et économique d'offrir une expérience sur mesure aux utilisateurs de bureau et de Web mobile. Vous pouvez utiliser votre ensemble de compétences existant, avoir une base de code, un ensemble d'URL et un langage de conception..
Le livre blanc vous apprend ce que vous devez savoir sur les pratiques Web réactives pour vous permettre de créer des applications pour toutes les tailles d'écran. Il vous apprend à:
Dans ce tutoriel, je vais vous donner un bref résumé de ce que propose le livre blanc. De plus, je participe aux discussions ci-dessous. Si vous avez une question ou un sujet à suggérer, veuillez poster un commentaire ou un tweet sur moi @reifman ou envoyez-moi un courriel directement..
Voici quelques-uns des domaines que le livre blanc va vous apprendre sur.
Les requêtes multimédia font partie de CSS3 et sont ce qui permet une conception Web réactive.
Essentiellement, les requêtes multimédia aident le navigateur à indiquer aux éléments conditionnels de votre code CSS comment styliser, masquer ou révéler des éléments de contenu..
Voici un exemple pour la plus petite taille de périphérique sur une unité de largeur supérieure à 768 px:
/ * Style de base pour les petits appareils de petite taille et plus haut * / .hero-text taille de la police: 22px; / * Pour les grands écrans * / @media uniquement et (min-width: 768px) .hero-text taille de la police: 48px;
Les frameworks populaires tels que Bootstrap, Foundation et Telerik RadPageLayout utilisent largement les requêtes multimédia pour créer leurs puissants systèmes de grille..
En utilisant des requêtes multimédia dans votre code, vous pouvez créer des feuilles de style avec des grilles qui répondent de manière fluide aux périphériques, en ajustant de manière dynamique le contenu et la façon dont le visiteur voit votre contenu en fonction de son périphérique et de la largeur de son navigateur..
La syntaxe peut varier d'un cadre à l'autre, mais le concept général est le même. Chaque taille de périphérique est associée à une requête multimédia et à des propriétés de style qui créent l'effet de présentation souhaité. Ces requêtes de média sont appelées points d'arrêt. Bootstrap identifie ses points de rupture sous la forme xs (très petit), sm (petit), md (moyen), lg (grand). Ceux-ci font référence à la taille de l'appareil.
Voici quelques exemples de Bootstrap et leur rendu possible sur des périphériques de tailles différentes:
En haut à gauche, les petits appareils et les tablettes plus petites, en haut à droite, les appareils de taille moyenne. Lower est plus gros appareils et ordinateurs de bureau.
Un autre concept commun est le conteneur de contenu de base. L'élément conteneur est l'élément le plus externe de la présentation. Son but est de créer un espace blanc entre la mise en page et le bord de la fenêtre du navigateur..
Le livre blanc indique également que votre conception Web adaptative demande au contenu de se développer ou de se contracter en fonction de la taille d'affichage du visiteur:
Je crois que le choix des normes est extrêmement important pour le développement de logiciels réussis. Il aide les équipes à communiquer et permet à de nouvelles personnes de se mettre au diapason rapidement. Il est plus facile d’embaucher des personnes qui connaissent leurs compétences dans les technologies standard. Et cela facilite la mise à niveau pour la sécurité, les performances et les fonctionnalités au fil du temps, en particulier lors de l'utilisation de technologies open source..
Le choix d'un cadre standard dans la conception Web réactive peut faire une énorme différence pour la réussite ou l'échec de votre projet. Le livre blanc de Telerik décrit le pour et le contre de l’un des plus populaires, Bootstrap:
Bootstrap offre des fonctionnalités de pointe, telles qu'une grille réactive solide, une première conception mobile, des classes d'assistance CSS, des composants JavaScript adaptatifs et bien plus encore. La grille est, par défaut, une grille standard de 12 colonnes avec une syntaxe simple pour créer des mises en page prenant en charge plusieurs tailles d'écran..
Le livre blanc met également en évidence la Fondation Zurb. C'est un framework open-source qui a évolué à partir de Bootstrap.
Foundation regorge de fonctionnalités avancées adaptées aux équipes composées de développeurs frontaux expérimentés, en particulier ceux qui utilisent Sass.
Le livre blanc aborde également un certain nombre de sujets avancés:
Sans aller trop loin, cela donne à la plupart d’entre nous une introduction très détaillée des aspects les plus importants à connaître..
J'espère vous avoir suffisamment intrigué pour que vous souhaitiez en apprendre davantage. En tant que chef de projet qui gère régulièrement des personnes ayant une expertise dans ces domaines, j'ai trouvé qu'il s'agissait d'un excellent guide, facilement compréhensible, pour la conception de sites Web réactifs et son fonctionnement..
Envie de plonger? Visitez la collection de livres blancs de Telerik et téléchargez dès maintenant des techniques indispensables à la création d'applications HTML5 pour toutes les tailles d'écran.
Ces frameworks réactifs sont des points de départ importants et incluent des composants d'interface utilisateur pour démarrer votre projet. Les composants contiennent généralement les fonctionnalités de base nécessaires au fonctionnement et à la création de prototypes. Cependant, vos applications les plus avancées et les plus complètes nécessitent des fonctionnalités d'interface utilisateur plus robustes. Bientôt, vous recherchez une suite d'interface utilisateur compatible avec le Web réactif.
L’interface utilisateur Kendo de Telerik comprend une grille, des graphiques, un planificateur et d’autres composants responsive qui fonctionnent de manière transparente avec n’importe quel framework de conception Web réactif que vous utilisez. C'est fait par notre sponsor qui a créé le livre blanc RWD ci-dessus.
Je veux juste vous donner un aperçu visuel de ce que vous pouvez attendre de l'interface utilisateur de Kendo:
Construire des contrôles de grille interactifs avancés n’est jamais facile. Kendo UI fournit une grille puissante et flexible prête à l'emploi:
Il y a une vue de calendrier (ou calendrier):
Kendo UI comprend des graphiques intégrés:
Et il existe un éditeur riche en fonctionnalités et facilement configurable:
En fait, il existe une bibliothèque contenant 73 autres widgets d'interface utilisateur à ajouter:
Fondamentalement, à ce stade, vous devez faire deux choses:
J'espère que vous êtes intrigués par ce que le livre blanc HTML5 de Telerik peut offrir (et par le framework Kendo UI). N'hésitez pas à poster vos expériences ci-dessous, ainsi que vos questions et commentaires. Vous pouvez également tweeter @ meifman ou m'envoyer un email directement, et parcourir ma page d'instructeurs Envato Tuts + pour voir les autres tutoriels que j'ai écrits..
Accentsconagua