Optimisation mobile et responsive webdesign – mise à jour 2013

Stéphanie Walter

Senior UX Designer - Mobile Expert

Senior UX Designer. Mobile Expert. Public speaker. Blog writer. Google Dev Expert Product Design (GDE)

Follow on Twitter

Ce contenu a été rédigé il y a 6 années. Il se peut qu'il ne soit plus à jour.

Cette année encore j’ai donné des cours sur l’optimisation mobile à l’université de Strasbourg. J’ai donc mis à jour mes cours de l’an dernier.

Le domaine du responsive webdesign a tellement évolué en un an que cette année j’ai deux fois plus de slides, deux fois plus de choses à dire et quelques nouveautés. J’y donne toujours quelques chiffre, quelques bonnes pratiques en terme d’ergonomie et d’expérience utilisateur sur mobile. Une grande partie est consacrée aux media-queries, au layout CSS en général et la balise meta viewport. Mais cette année j’ai ajouté une grosse partie sur la navigation, sur la gestion des médias, des images, je vais un peu plus loin sur le retina, les différents formats d’image proposés dans les spécifications. Je fais également un rapide topo sur les performances et une partie technique plus poussée que l’année dernière.

Comme l’année dernière la présentation est disponible en ligne sur slideshare :

[Précision] Les slides sont sous licence Attribution CC-Non Commercial vous pouvez vous en inspirer pour vos slides et présentation  mais ne pouvez les modifier ou la ré-utiliser sur un site à usage commercial. Vous devez également citer l’auteur (donc en gardant la mention sous l’embed par exemple)
Je précise pour ceux qui savent que je donnais aussi des cours de jQueryMobile que le cours à directement été mis à jour sur slideshare  et que le tutoriel qui accompagnait le cours de jQueryMobile pour créer une mini application jQueryMobile pour choisir son restaurant est toujours en ligne sur Noupe : jQuery Mobile Tutorial: Creating a Restaurant Picker Web App.

Vous souhaitez des conseils en ergonomie ou en expérience utilisateur ? Un design de site, d’interface ou d’application mobile ? Envie de travailler ensemble ou de m’inviter à donner une conférence ? Consultez mes réalisations ou contactez moi directement.

22 réflexions au sujet de « Optimisation mobile et responsive webdesign – mise à jour 2013 »

  1. Ping : Optimisation mobile et responsive webdesign - mise à jour 2013 - Stéphanie Walter : Webdesign - intégration web | coreight | Scoop.it

  2. Dur dur de tout lire ;)

    Mais passé les premiers slides rébarbatif pour ceux qui connaissent déjà le sujet. Le point sur le viewport, les navigations, les dépassement de textes etc…

    Surtout les dépassement de texte je ne connaissais pas cette technique.

    Et puis tout le reste ;) Très bon diaporama même si je connaissais 70% il y a encore 30% qui m’a été utile. En espérant que pour ceux pour qui le responsive parait obscure ce diapo leur a donné envie de s’y interessé.

      • J’ai précisé pour ceux qui connaissent le sujet.

        J’ai bien le droit de te critiquer sinon je vois pas comment tu progressera. J’accepte les critiques je demande même volontairement de la critique sur mes projets.

        Et tu sais bien un étudiant s’ennuie très vite, honnêtement part de marché, webkit etc… quel ennui, ils sont soit disant amateur d’informatique donc au courant de tout ça. Si c’est pas le cas ils se sont trompé de voie.
        Mais j’étais peut être une race particulière d’étudiant, je suis autodidacte j’ai appris bien plus par moi même en 1 an d’alternance qu’en 3 ans de DUT. Mais je note que le tôt d’absentéisme en Amphi dans mon IUT était de plus de 70%. Les amphis c’est ennuyeux, il y a toutes les tentations pour ne pas suivre le cours donc éviter de passer du temps sur ce qui peut ennuyer l’étudiant est important. Surtout que tout le reste est très intéressant.

        Ensuite rien à redire les slides sont concis et parle de choses intéressantes. Il y a des exemple concret avec code et résultat rien à redire, présentation d’outils etc…

        • epic fail
          tôt -> taux
          J’ai écrit un peu vite lol.

          Mais promis j’ai rien contre ce slide bien au contraire j’ai noté que les 80 dernières pages pouvait m’être très utile.

        • Je n’ai pas dit que j’acceptais pas la critique juste que les slides et la présentation ont été donnés dans un contexte très précis (que les lecteurs du blog n’ont pas, effectivement) Même moi qui connais ces slides par coeur je les trouve rébarbatifs ;)
          Mais je t’assure qu’ils sont bien ciblés pour ces étudiants que j’ai en face dans ce master en particulier . Il est important de faire comprendre aux étudiants qui n’ont jamais vu le concept de mobilité la diversité du marché du mobile. Certains ne connaissent que le navigateur natif parfois et ne savent pas que le moteur de rendu webkit est disponible sur autant de navigateurs. Certains slides sont d’ailleurs inspirés du premier chapitre du livre de SmashingMagazine « The Mobile Book ».
          Pour le côté autodidacte tu es une perle rare (tu veux pas venir en cours chez moi leur donner le bon exemple ?!) Aujourd’hui on a plus souvent 50% des la promo sur Facebook qui n’écoute pas hélas ^^

          • Après relecture, je me trouve trop critique, je suis comme ça ;) .

            Sorti de son contexte c’était mon avis. Après dans le contexte de l’université, ils sont nécessaires je n’en doute pas.

            Pour motiver les élèves qui sont bien sur pas très nombreux à être attentif ce n’est vraiment pas évident. Il n’y a pas de solution miracle, peut être parler des choix de facebook, twitter et autre sur la question site mobile, app native ou site responsive (tu en parle surement déjà j’ai passé le début sans trop le lire attentivement), cela parlerais peut êtr à ces étudiants scotché à facebook mais bon il n’y aura pas de miracle s’ils n’ont pas l’envie ils n’écouteront pas ;)

            « Certains ne connaissent que le navigateur natif parfois »
            je pense que c’est ça le souci ces personnes là n’ont aucune curiosité naturel, en étant en master c’est un peu la honte je dirais même. Au bout de deux ans de DUT la majorité d’entre nous utilisait déjà plusieurs navigateurs (IE, FF, Chrome et pour certain Opera qui est de loin le meilleur de tous mais c’est un autre débat ;) ) sauf les fans Apple qui ne touchaient qu’à Safari et les non curieux qui restaient sur IE.

            Je t’encourage car réellement il y a beaucoup de choses intéressante même pour des professionnels et les étudiants devrait s’inspirer de ce que tu leur parle. Tu ne met aucun outil en avant tu explique seulement leurs intérets de chacun.

            Par contre pour l’autodidacte je ne pense pas être à part. Je pense que lorsqu’on se retrouve face à l’obligation de monter en compétence et aussi l’envie d’apprendre on apprends forcément mieux.
            C’est pour cela j’encourage un maximum les développeurs d’aller vers l’alternance afin d’être confronter au travail pas à des projets bidons et peu intéressant.
            Avec de la motivation et grâce à Internet et ses gentils développeurs qui aime partager leurs connaissances, j’ai appris et maîtrise aujourd’hui Symfony 2, j’apprends actuellement Zend 2.
            Par contre j’ai un ami qui m’impressionne avec qui je travaille sur un projet, il n’a pris aucun cour et étant passionné d’informatique et curieux, il a appris seul HTML, CSS, PHP et moi je l’aide à grandir sur Symfony 2, le framework CSS foundation et c’est impressionnant comme il monte en compétence.
            Et j’ai déjà prévu de lui faire tourner ton diapo. lui le lira attentivement ;)

            Je t’encourage à continuer à apprendre tes compétences à ces jeunes. Et pour ceux qui sont sur Facebook ne t’en occupe pas c’est leur avenir par le tien ;)

            Et ne t’inquiète pas je reviendrai te critiquer car j’adore ça lol.
            A vendredi ;)

  3. edit : Le point sur le viewport, les navigations, les dépassement de textes etc… * sont des sujets très intéressants pour moi *

  4. Vraiment très intéressant, merci !
    Bon, il y a certains slide qui sont obscurs (vu qu’il y a juste le titre). Ça me permet d’avoir une approche beaucoup plus concrète de ce support avec mes clients. Merci beaucoup !

  5. Ping : Des pixels et du code #55 - Stéphanie Walter : Webdesign - intégration web

  6. A tout choisir, si le budget le permet, je préfèrerais mettre en place une version mobile à part entière avec possibilité d’afficher la version desktop. Je suis assez contre l’idée de proposer impérativement les mêmes contenus sur mobile, en tout cas il faudrait mieux réfléchir au tactile je pense.

    • Et donc maintenir 2 x le HTML et le CSS ? Et sniffer le User-Agent, donc maintenir une liste à jour des User-Agents ? Il faut un sacré budget pour maintenir 2 sites, effectivement. Il y a des cas où ça peut sans doute se justifier, si on veut optimiser à fond l’expérience sur mobile, mais il reste toujours le cas des tablettes : quelle version leur servir ? Et le problème du future, à chaque fois qu’un appareil va sortir, une nouvelle version d’un OS, navigateur, etc. Du coup le RWD n’est pas la solution magique, mais ça commence à devenir intéressant

  7. Vraiment ils ont de la chance ces étudiants, tout leur est servi sur un plateau, tes slides, c’est le fruit de centaines d »heure de recherche, de lecture et de tri pour séparer le bon grain de l’ivraie. Le seul truc qui me gène, c’est la faute d’orthographe récurrente sur le mot futur. Le futur, en français c’est masculin,aussi il n’y a de E à la fin de ce mot. Tu écris future partout et c »est son orthographe ‘anglaise…enfin si ça ne dérange personne, y compris ces étudiants qui ont temps de chance…
    Cela dit des fautes j’en fait aussi,nul n’est parfait !!!
    Bon courage

    • De la chance je sais pas trop, mais effectivement les nuits passées à mettre à jour le cours furent longues.
      Oui effectivement le « future » est un gros anglicisme. Dès que j’ai un moment je ferai la chasse aux typos, merci ;)

  8. Bonjour,
    Bravo encore pour ce travail de fourmi, je me demande si tu ne t’es pas clonée pour fournir autant de ressources. :)
    As-tu lu « les secrets de présentation de Steve Jobs ». Je m’en sers pour mes présentations et conférences et j’avoue que ça ma fait évoluer.

    La question que je me pose actuellement( et c’est peut-être pas le but ici) concerne l’utilisation des pixels pour le texte (vu que le zoom texte par défaut sur les navigateurs tend à disparaitre). Quand Bootstrap passe au pixel je me demande quelle est l’utilité de se casser la tête à utiliser des em à part pour simplifier la modification de la taille de texte globale du site.

    • Oui c’est globalement ça, si tu mets des tailles de texte en em tu peux changer toutes les tailles des descendants en changeant uniquement leur ancêtre et garder le rythme vertical de ton texte.

  9. Merci pour ce partage. C’est toujours bon de lire et relire ces recommandations. J’aurais aimé avoir une prof comme toi quand j’étais étudiant.

  10. Ping : Sur Smashing Magazine : Responsive Webdesign - présent et futur de l'adaptation mobile - Stéphanie Walter : Webdesign - intégration webStéphanie Walter : Webdesign – intégration web | Strasbourg – Alsace.