background preloader

Mobile-First Responsive Web Design

Mobile-First Responsive Web Design
What Is Mobile-First Responsive Web Design? Mobile-First Responsive Web Design is a combination of philosophies/strategies, and ultimately boils down to a broader application of good ol’ web best practices. As the digital landscape gets increasingly complex, we need to design experiences that work across the entire spectrum of digital devices. Mobile First Mobile First Mobile First is a philosophy created by Luke Wroblewski that highlights the need to prioritize the mobile context when creating user experiences. Responsive Web Design Responsive Web Design is a term coined by Ethan Marcotte that articulates how to adapt a website’s layout for multiple screen resolutions. Progressive Enhancement Ultimately, mobile-first responsive web design comes down to using Progressive Enhancement as a foundation for web strategy and design. Why Mobile-First RWD Works The interactive landscape is increasingly complex. That’s what makes mobile-first responsive web design a great approach. Content.

Nouveau thème graphique en HTML5 et responsive design Vous ne l’aviez sûrement pas remarqué, mais le thème de ce blog a été entièrement réécrit en HTML5. Le but de cette refonte n’était pas de revoir la charte graphique (qui me convient bien), mais de se livrer à un exercice de remise à niveau du code. J’ai donc demandé à mes anciens collègues de Mahi-Mahi (et notamment Alex) de se pencher sur la question et vous avez le résultat sous les yeux : un thème graphique identique au précédent, mais avec un temps de chargement divisé par deux (on passe d’une page d’accueil de 2 Mo à 880 Ko) et une mise en page en responsive design qui s’adapte automatiquement à l’écran du terminal que vous utilisez (cf. Le responsive design à l’assaut des terminaux mobiles). Donc concrètement ce blog est beaucoup plus rapide à charger (moins de 7 secondes au lieu de 14), et sa mise en page s’adapte à la largeur de la fenêtre ou du terminal utilisé. Pour rentrer dans les détails, voici les tâches réalisées sur la structure HTML :

Astuce : Utiliser Facebook Connect pour de la pré-inscription Après plus d’une année d’existence Facebook Connect est un succès : Les chiffres le confirment (60 millions d’utilisateurs et 80.000 sites y ont recours) et les arguments ne manquent pas (Pourquoi intégrer Facebook Connect sur votre site ?). La révolution est telle que MySpace et Yahoo! utilisent maintenant cette solution : MySpace to adopt Facebook Connect et Yahoo brings Facebook Connect into its sites. Nous sommes tous d’accord pour dire que c’est une révolution pour faire de l’authentification douce (en 1 clic) qui va de plus favoriser la viralité, idéale pour les commentaires d’un blog ou pour participer à une opération événementielle. OK… mais quid de l’utilisation de Facebook Connect pour de l’authentification sur le long terme ? Autrement formulé : Facebook Connect de même que Twitter Sign in sont-elles des solutions viables pour de la création de compte ? En fait il y a deux options :

Bonnes pratiques pour les écrans d'identification Souvenez-vous, il y quelques années je me réjouissais de la simplification de la procédure d’identification avec Open ID : La création de compte simplifiée avec OpenID. Depuis, les choses ont bien changé avec l’avènement des réseaux sociaux et leurs mécanismes de social login. Je veux bien croire que le fait de s’appuyer sur les profils des internautes permet de gagner du temps et d’augmenter le taux de conversion, mais de là à ne proposer que cette option comme Klout, c’est extrêmement gênant. Ce type de mécanisme d’identification fonctionne bien pour ceux qui ont un compte Facebook ou un profil Twitter, mais pour ceux qui en ont plusieurs, cela engendre des conflits insolubles (j’ai dû avoir recours au support technique pour me dépatouiller de ce bazar). Sinon dans le même genre il y a aussi Asana qui restreint le choix à Google Account et le met en première position : On trouve aussi la même chose chez Pinterest avec un formulaire minimaliste, mais soigné :

Les petits détails qui font la différence Pour celles et ceux qui ne le savent pas, l’ergonomie est une discipline sérieuse, elle ne peut (en théorie) être pratiquée que par des professionnels diplômés et aptes à perpétuer la tradition de rigueur scientifique. Mieux : l’ergonomie est une science, elle se fonde sur des publications de référence, par exemple les critères ergonomiques de Scapin et Bastien (guidage, charge de travail, contrôle explicite, adaptabilité, gestion des erreurs, homogénéité et cohérence, signifiance des codes et dénominations…). OK très bien… mais cette rigueur scientifique ne doit pas vous faire oublier que les sujets de test sont des êtres humains : imprévisibles, faillibles et dont le comportement est dicté par des émotions. Il serait donc fort dommage de ne pas prendre en compte cette dimension émotionnelle et de ne pas essayer de séduire les utilisateurs avec des petites attentions. D’ailleurs, le proverbe dit : “Le diable est dans les détails“. Personnellement j’adore, et vous ?

Archive du blog Microsoft complète son offre de collaboration avec Yammer Après plusieurs jours de spéculations et de démentis, Microsoft vient enfin de confirmer officiellement le rachat de Yammer : Microsoft Acquires Yammer to Accelerate Enterprise Social Network. Le montant de la transaction s’élève à 1,2 MM$, une sacrée belle somme quand on sait que la firme de Redmond édite déjà depuis plusieurs années sa propre solution de collaboration, mais une acquisition parfaitement cohérente tant les deux produits sont complémentaires. Pour schématiser : Sharepoint est un outil de gestion de contenu qui n’a jamais su intégrer la dimension sociale et Yammer est un outil conversationnel qui n’a jamais su correctement gérer les contenus. Certes, ces deux affirmations ne font pas honneur aux produits, mais ils résument bien leur positionnement. Considérée comme une solution plutôt “lourde”, la version 2013 est censée apporter plus de légèreté avec une prise en charge plus performante des terminaux mobiles, en adoptant notamment l’interface Metro.

Vers une Usine de Développement 2.0 En repartant de l’usine de développement tel que nous la connaissons aujourd’hui, nous allons tenter de vous initier à notre vision de l’UDD (Usine de développement) de demain. En effet, en interne chez OCTO nous travaillons activement sur ce sujet de recherche. Pourtant, avant de rentrer dans les séduisants concepts qu’il pourrait apporter, revenons sur les principes et limites de ce que l’on considère comme une UDD 1.0. C’est une usine logicielle, contenant des outils pour le développement et permettant d’automatiser tout ce qui peut l’être et ce dans le processus de construction logiciel de bout en bout. En effet, le développement logiciel actuel (à l’état de l’art) suit un processus centré sur l’usine de développement. Pour avoir une vision concrète d’une UDD, nous proposons de la représenter schématiquement comme ceci : On voit ici un workflow plutôt complet et répondant aux besoins de nombreux projets. Elle apporte aussi des bénéfices implicites comme : Gestion des environnements

5 étapes clés pour réussir la mise en œuvre d'un réseau social d'entreprise - Journal du Net Solutions Du cadrage, au pilote en passant par le déploiement, les entreprises doivent se poser les bonnes questions pour aborder sereinement leur projet RSE. Le dernier livre blanc de GFI apporte des pistes de réflexion. Dans son dernier livre blanc intitulé "Réseaux sociaux d'entreprise et logiciels collaboratifs", la SSII GFI Informatique s'est penchée sur l'intérêt de se lancer dans un projet RSE. Son analyse place l'humain au cœur du dispositif. "Avec 800 millions de membres, Facebook est le plus important réseau au monde, loin devant Twitter (450 millions de membres), LinkedIn (100 millions de membres) ou Google+ (62 millions de membres). Pour autant, l'entreprise a tout intérêt à rester vigilante sur le type d'outils sociaux qu'elle pourra mettre en œuvre, au risque de poser de sérieux problèmes en termes de confidentialité des données partagées mais aussi de taux de disponibilité de ces outils 100% SaaS.

Blogs et wikis cimentent la fonction collaborative des RSE - Etude Intranet et RSE 2012 CCM Benchmark - Journal du Net Solutions Les grands comptes interrogés à l'occasion de l'étude Intranets et RSE 2012 par CCM Benchmark ont été invités à s'exprimer sur les fonctions collaboratives présentes dans leur outil de réseau social d'entreprise. Sur les huit qui ont accepté de répondre à cette question à choix multiples, une majorité a mis en avant le fait que leurs solutions sont pourvues de fonctions de blogs et de wikis. Ce n'est pas le cas pour les fonctions de messagerie et de calendrier, fournies par le biais d'autres outils (bureautique, solution dédiée...), et encore moins pour la fonction de centre de tâches et de messagerie interne. "Les fonctionnalités collaboratives du RSE peuvent faire double emploi avec celles proposées par l'intranet historique.

Related: