Home Lien vers des pages de w3schools site w3schools comment faire About

Responsive Topnav Example

Resize the browser window to see how it works.

Mon super site


stratégie réactive

À l'heure actuelle, environ 11 ou 12% des 100 000 meilleurs sites sont réactifs , et il ne fait aucun doute que ce nombre devrait augmenter au cours des prochaines années.

Alors que de plus en plus d'organisations se retroussent les manches pour s'attaquer aux réalités du Web multi-appareils , il vaut la peine de jeter un coup d'œil aux différentes stratégies employées pour atteindre ce nirvana spongieux:

Adaptation réactive

Sites mobiles réactifs

Conception responsive mobile-première

Au coup par coup

adaptation réactive






fixe-vers-mobile

La réhabilitation réactive est le processus consistant à prendre un site Web existant uniquement sur ordinateur et à le rendre réactif après coup.

Pour de nombreuses organisations, les réaménagements à grande échelle et à partir de la base sont tout simplement hors de question.

C'est pourquoi la mise à niveau réactive est une approche populaire

pour créer une meilleure expérience utilisateur pour les appareils autres que de bureau.

avantages

Relativement rapide -

Il y a vraiment toute une gamme de rééquipement réactif, mais pris à sa définition la plus basique, cette stratégie peut littéralement consister à injecter un small-screens.cssfichier dans votre site web. Bien que ce soit un exemple grossier, la réhabilitation réactive est intéressante pour de nombreuses organisations car elle ne nécessite pas de tout reconstruire à partir de zéro.

Familier - Les utilisateurs ne se font pas renverser l' escalator des connaissances acquises . Les gens s'habituent à une interface au fil des ans. En réaménageant une interface existante, les organisations conservent ce niveau de familiarité tout en offrant une meilleure expérience utilisateur pour les petits écrans.

Sur le plan organisationnel - Sur le plan politique, le réaménagement est beaucoup plus sûr que de partir de zéro. Il y a moins de querelles au sujet de la couleur verte à utiliser, des photos banales à utiliser, et la gestion n'a pas vraiment besoin de tordre les bras aussi fort. Cela permet aux équipes de lancer des sites réactifs plus rapidement.

les inconvénients

Il ne fait qu'effleurer la surface - Encore une fois, il y a toute une gamme de réaménagements réactifs, mais l'objectif pour un grand nombre de ces projets est de «faire en sorte qu'il soit trop mou». En se concentrant principalement ou uniquement sur la mise en page refondante, les expériences réactualisées réactualisées passent souvent à côté d'autres considérations qui contribuent à la réussite d'une expérience Web multi-périphérique.

10 gallons d'eau dans un seau de 3 gallons - Parce que les sites de bureau seulement ont été faits pour les ordinateurs de bureau (et ont souvent existé pendant longtemps), ils ont tendance à contenir beaucoup de merde. Et parce que la plupart des exercices de mise à niveau se concentrent sur la mise en page de refusion, beaucoup de ces problèmes liés au contenu ne sont pas entièrement pris en compte.

Performance - Il y a quelque chose de bizarre à écrire plus de code pour mieux supporter les plus petits périphériques. La soustraction peut aller loin, mais la modernisation ne favorise pas intrinsèquement les performances en tant que conception .

Pire support - les requêtes de média en premier mobile offrent une meilleure prise en charge pour les nombreux périphériques mobiles Web qui ne prennent pas en charge les requêtes média.

Correction d'un pansement -

Je meurs un peu chaque fois que j'entends des gens dire «répondez-y», comme si c'était une case à cocher sur un plan de projet (ce qui est parfois le cas). Ce type de pensée myope manque la véritable opportunité offerte par le design réactif.







mobile-vers-fixe





Conception responsive mobile-première créant une interface qui répond aux contraintes du mobile (petit écran, faible bande passante, etc.), puis améliore progressivement l'expérience pour tirer parti de l'espace d'écran disponible, des fonctionnalités, et plus encore.

avantages

Un nouveau départ -

Un projet réactif au premier mobile est un bon départ. Les concepteurs sont ravis de se concentrer sur les principaux objectifs des utilisateurs et des entreprises. Les développeurs se concentrent sur le balisage Lean, mean. En rejetant (ou en retravaillant totalement) une base de code existante, les équipes peuvent répondre à notre réalité multi-périphérique sans avoir à se soucier des frais généraux hérités.

Meilleure prise en charge - En développant le mobile en premier , les développeurs peuvent prendre en charge un plus grand nombre d'appareils mobiles, en particulier les anciens appareils qui ne prennent pas en charge les requêtes multimédias. Performance - Alors que la performance de n'importe quel site dépend vraiment de la mise en œuvre , un projet réactif au premier mobile donne aux équipes la possibilité d'aborder les performances hors de la porte. Considérations concomitantes - Plus généralement, une nouvelle conception du mobile (malgré son nom) tend à prendre en compte l' ensemble du spectre de résolution plutôt que de mettre l'accent sur une classe d'appareils donnée. Avenir amical - Une adresse d'expérience mobile-première crée plus une opportunité de créer une base solide qui est construite pour résister à l'épreuve du temps, et de servir de plate-forme pour la croissance et l'itération futures.

les inconvénients

Avouons -le, une nouvelle conception du mobile n'est pas un raccourci. Il faut beaucoup de temps et d'efforts pour construire les choses à partir de zéro. L'astuce consiste à faire l'effort en vaut la peine.

Un changement mental -

Il est difficile d'amener les équipes et les organisations à penser différemment. La mentalité du mobile-premier remue tout sur sa tête, ce qui remet en cause les conventions auxquelles les gens se sont habitués au fil des ans. Cela nécessite de vendre des choses (heureusement, il y a un livre pour ça), et des rappels continus pour empêcher les gens de retomber dans leurs vieilles habitudes.

Difficile sur le plan organisationnel -

Une grande refonte est habituellement encombrée de toutes sortes de formalités administratives. Le PDG veut peser sur les conceptions, bien que n'étant pas dans toutes les réunions préliminaires sur ce que toute cette conception réactive hoobityboop est tout au sujet. L'ambition et la politique peuvent faire obstacle à la création d'une expérience utilisateur qui ressemble et fonctionne parfaitement sur n'importe quel appareil.

Peu familier - Tout remaniement ne sera pas familier aux utilisateurs au début. Mais il faut veiller à maintenir le niveau de familiarité des utilisateurs avec l'interface, surtout après une révision majeure.

au coup par coup

Une stratégie réactive fragmentée rompt une refonte à grande échelle en morceaux de la taille d'une bouchée . Tout comme le réaménagement (bien que dans ce cas ces stratégies ne s'excluent pas mutuellement), il pourrait ne pas être possible de procéder à une refonte massive. C'est pourquoi certaines organisations prennent une étape à la fois. Il y a peu de saveurs différentes de réaménagements réactifs au coup par coup:

page par page

Les révisions réactives page par page prennent un sous-ensemble de pages. Des entreprises comme Microsoft ont déployé des pages d'accueil réactives, tout en laissant la majorité des pages intérieures uniquement sur le bureau.

/

avantages

Très visible -

déployer une version responsive de la plupart des pages vues (comme une page d'accueil) met l'effort où la plupart des utilisateurs sont susceptibles de voir la refonte rafraîchi.

Apprendre à être flexible -

Les organisations utilisent souvent ces projets comme des projets pilotes pour des initiatives plus larges. En se concentrant sur quelques pages de base, ils sont capables d'apprendre tout ce qui se passe dans la création d'une interface réactive, puis d'utiliser cette connaissance pour l'appliquer au reste du site.

Meilleure chance de lancement -

Se concentrer sur une page ou une fonctionnalité est un excellent moyen de s'assurer que les choses se réalisent effectivement. Redessiner le kit et le caboodle à la fois pourrait être une entreprise monstrueuse, ce qui signifie qu'il pourrait ne jamais voir la lumière du jour.

les inconvénients

Continuité -

L'utilisateur passe de l'expérience brillante, nouvelle et réactive au contenu d'héritage corrompu en quelques clics rapides. Ceci est mauvais du point de vue de la cohérence, car les utilisateurs considèrent une entreprise comme une marque unique, et non comme un méli-mélo de différents départements et priorités.

À courte vue -

beaucoup de reconfigurations basées sur des pages sont si concentrées sur le «lancement par Q3», il n'y a souvent pas de plan de jeu pour déployer le projet sur le plus grand site.

Meurs sur la vigne -

Vous devez d'abord planter un drapeau dans le sable avec une stratégie comme celle-ci, sinon vous risquez de vivre en permanence sur les terres de Frankenstein.

composant par composant

J'ai travaillé avec plusieurs organisations qui entreprennent une approche plutôt intéressante de la conception adaptative. Au lieu de s'attaquer d'abord à la page d'accueil puis de passer aux pages intérieures, certaines organisations répondent aux principaux composants (comme l'en-tête et le pied de page), puis passent lentement aux autres composants. Lorsque toute l'interface est rendue réactive, ils activent la balise META viewport et se retrouvent avec une expérience réactive.

avantages

Initiez progressivement les utilisateurs à une nouvelle interface - Au lieu de renverser les utilisateurs avec une toute nouvelle expérience 100% étonnante (!),

Cette approche fragmentaire introduit la nouvelle interface sur une période de temps. Les changements ne sont pas si extrêmes que les utilisateurs seront en colère, mais déplacer le design dans la bonne direction.

Briser les choses -

Les équipes apprennent à résoudre les problèmes au niveau atomique modulaire plutôt que de se concentrer sur la page.

Niveau d'effort de jauge - Briser les choses en modules donne une meilleure idée de la portée du projet .

les inconvénients

50 Shades of Incomplete -

Cette approche peut être gênante car les utilisateurs sont exposés à une interface Frankensteined qui est à la fois ancienne et nouvelle, fraîche et périmée.

Mourir sur la vigne -

ces types de projets doivent avoir des buts finaux clairs ou ils pourraient finir dans le purgatoire pour toujours.

La coexistence technique -

Que se passe-t-il quand un module utilisant les dernières technologies et techniques pointe la tête avec un ancien module croustillant? Il y a beaucoup de défis d'architecture technique avec cette approche.

2725 visiteurs depuis le 11 fev. 2018