DokuWiki uda-fewd:responsive_web_design_fundamentals

uda-fewd:responsive_web_design_fundamentals:adding_a_basic_media_query_2

Anonymous (anonymous@undisclosed.example.com) — 2017-04-02T11:52:22+00:00

<- Adding a Basic Media QueryNext Step Media Queries -> 2 autres méthodes @media screen and (min-height: 500px) { } @import url('over_500.css') only screen and (min-height: 500px); " @import est lourd en terme de performances, on souhaite donc l'éviter !" solution 1/3 : plein de requête sur de petits fichiers solution 2/3 : une seule requeête mais plus gros fichier

uda-fewd:responsive_web_design_fundamentals:adding_a_basic_media_query

Anonymous (anonymous@undisclosed.example.com) — 2017-04-02T11:49:07+00:00

<- Basic Media Query IntroAdding a basic media query 2 ->

uda-fewd:responsive_web_design_fundamentals:basic_media_query_intro

Anonymous (anonymous@undisclosed.example.com) — 2017-04-02T11:47:32+00:00

<- Lesson 3 IntroAdding a Basic Media Query -> différents outils pour des.adapt. * media queries : selon pixel ratio, width, orientation...

uda-fewd:responsive_web_design_fundamentals:defining_the_viewport

Anonymous (anonymous@undisclosed.example.com) — 2017-04-02T11:24:57+00:00

<- Lesson 1 SummaryPixels, pixels and moar pixels! -> optimiser une page pour différentes tailles including differences between CSS and device-dependant pixelschoisir la bonne taille pour vos éléments exercice de fin, faire une version mobile du site de sa ville. bien régler le viewport pour éviter les trucs qui sortent, le zoom

uda-fewd:responsive_web_design_fundamentals:emulators_simulators_and_real_devices

Anonymous (anonymous@undisclosed.example.com) — 2017-04-02T10:51:13+00:00

<- Pan, Zoom, Touch, IckSetting up Chrome's Dev Tools -> Simulateurs et emulateurs, pas réalistes à 100% mais bon outil. ici celui de chrome mais aussi voir ios simulator

uda-fewd:responsive_web_design_fundamentals:final_project_updates

Anonymous (anonymous@undisclosed.example.com) — 2017-04-02T14:26:25+00:00

<- Minor BreakpointsWrap Up -> google web fundamentals : abréger du texte : * text-overflow: ellipsis; * *

uda-fewd:responsive_web_design_fundamentals:flex_item

Anonymous (anonymous@undisclosed.example.com) — 2017-04-02T12:00:16+00:00

<- Flexbox ContainerDeconstructing a Flexbox Layout -> order

uda-fewd:responsive_web_design_fundamentals:flexbox_container

Anonymous (anonymous@undisclosed.example.com) — 2017-04-02T11:59:25+00:00

<- Flexbox IntroFlex Item -> display flex flex-wrap

uda-fewd:responsive_web_design_fundamentals:flexbox_intro

Anonymous (anonymous@undisclosed.example.com) — 2017-04-02T11:57:23+00:00

<- GridsFlexbox Container -> très bel exemple de mise en page avec flexbox

uda-fewd:responsive_web_design_fundamentals:font_boosting

Anonymous (anonymous@undisclosed.example.com) — 2017-04-02T11:27:54+00:00

<- meta viewportQuiz - Pixelation -> ensuite, le navigateur va essayer de rendre plus gros le contenu important : font-boosting

uda-fewd:responsive_web_design_fundamentals:fonts

Anonymous (anonymous@undisclosed.example.com) — 2017-04-02T13:21:47+00:00

<- Responsive Tables - Contained ScrollingMinor Breakpoints -> exemple de trop peu de caractère par ligne, ou trop de caractères par ligne. le nombre de caractère par ligne est appelé measure en anglais consensus sur 65 caractères par ligne pour le web attention aussi à la taille des caractères, ils doivent être lisible : ici exemple de base à 16px avec interlignage de 1.2 mini

uda-fewd:responsive_web_design_fundamentals:grids

Anonymous (anonymous@undisclosed.example.com) — 2017-04-02T11:56:12+00:00

<- What Styles Are AppliedFlexbox Intro -> pattern le plus important : grid fluid system, où les colonnes passent à la ligne suivante alors que le viewport se réduit en largeur (elle se mettents les unes sous les autres)

uda-fewd:responsive_web_design_fundamentals:images

Anonymous (anonymous@undisclosed.example.com) — 2017-04-02T12:44:20+00:00

<- Lesson 5 IntroResponsive Tables Intro -> * responsive images : responvise resolution * best : source set attribute aussi different crop : image en largeur sur téléphone ? -> media queries cours sur les images responsives

uda-fewd:responsive_web_design_fundamentals:important_udacity_front_end_feedback_extension

Anonymous (anonymous@undisclosed.example.com) — 2017-04-02T11:08:07+00:00

<- Setting up Chrome's Dev ToolsQuiz - Device Emulation -> udacity a fait une extension pour commenter notre code chrome : ff :

uda-fewd:responsive_web_design_fundamentals:index

Anonymous (anonymous@undisclosed.example.com) — 2017-04-02T12:02:08+00:00

* why responsive * Sites on Mobile * Quiz - Share Your Great & Awful Sites * Intro to Project * Pan, Zoom, Touch, Ick * Emulators, Simulators and Real Devices * Setting up Chrome's Dev Tools * IMPORTANT! Udacity Front End Feedback Extension * Quiz - Device Emulation * Remote Debugging Intro * Setup for mobile * Using dev tools on mobile * Mobile tools for iOS * Lesson 1 Summary * starting small * Defining the Viewport * Pixels, pixels and moar pix…

uda-fewd:responsive_web_design_fundamentals:intro_to_patterns

Anonymous (anonymous@undisclosed.example.com) — 2017-04-02T12:28:12+00:00

<- Lesson 3 SummaryPattern - Column Drop -> patterns : * mostly Fluid * column drop * layout Shifter * off canvas

uda-fewd:responsive_web_design_fundamentals:intro_to_project

Anonymous (anonymous@undisclosed.example.com) — 2017-04-02T10:47:45+00:00

<- Quiz - Share Your Great & Awful SitesPan, Zoom, Touch, Ick -> Projet qui va servir à se faire la main en le rendant responsive, pas une seule bonne solution, plusieurs solutions possibles. thinking responsively

uda-fewd:responsive_web_design_fundamentals:large_fixed_width_elements

Anonymous (anonymous@undisclosed.example.com) — 2017-04-02T11:36:09+00:00

<- Setting the ViewportMax-width on elements -> relative width mieux pour responsive n e pas compter sur taille spécifique de viewport pour que le contenu rende bien

uda-fewd:responsive_web_design_fundamentals:lesson_3_intro

Anonymous (anonymous@undisclosed.example.com) — 2017-04-02T11:46:13+00:00

<- Lesson 2 SummaryBasic Media Query Intro -> jusqu'ici : ux pour tous devices, gros boutons, mais le design adaptatif au delà d'optimiser des éléments particuliers -> mise en page, quelle information, arrangée comment ?

uda-fewd:responsive_web_design_fundamentals:lesson_3_summary

Anonymous (anonymous@undisclosed.example.com) — 2017-04-02T12:01:54+00:00

<- Deconstructing a Flexbox LayoutIntro to Patterns -> flexbox et flex grids c'est bien, mais il existe d'autres technique, on va en voir quatre dans la prochaine leçon.

uda-fewd:responsive_web_design_fundamentals:max-width_on_elements

Anonymous (anonymous@undisclosed.example.com) — 2017-04-02T11:39:20+00:00

<- Large Fixed Width ElementsQuiz - Relative Sizes -> utiliser des unités relatives conseil : utiliser ça : img, embed, object, video { max-width: 100%; }

uda-fewd:responsive_web_design_fundamentals:meta_viewport

Anonymous (anonymous@undisclosed.example.com) — 2017-04-02T11:27:01+00:00

<- Pixels, pixels and moar pixels!font boosting -> Si on ne dit pas au navigateur que le site à été conçu pour un petit écran, il considère que ce n'est pas le cas et qu'il faut zoomer et pan, et fait le rendu comme si on avait 980 dips de large

uda-fewd:responsive_web_design_fundamentals:minor_breakpoints

Anonymous (anonymous@undisclosed.example.com) — 2017-04-02T13:29:26+00:00

<- FontsFinal Project Updates -> En plus des breakpoints majeurs pour les gros changement, il peut être utiles d'ajouter des breakpoints mineures pour de légers ajustements

uda-fewd:responsive_web_design_fundamentals:mobile_tools_for_ios

Anonymous (anonymous@undisclosed.example.com) — 2017-04-02T11:22:10+00:00

<- Using dev tools on mobileLesson 1 Summary -> Please note that on the forums, there is a discussion continuing about ios-webkit-debug-proxy. Depending on your version of canary, if you're using it, it might take a lot of time and some students suggest trying Safari Dev Tools and point to links like this:

uda-fewd:responsive_web_design_fundamentals:next_step_media_queries

Anonymous (anonymous@undisclosed.example.com) — 2017-04-02T11:51:47+00:00

<- Adding a basic media query 2Which styles are applied -> Les propriétés les plus souvent utilisées sont max-width et min-width il y a aussi min-device-width et max-device-width, la différence est subtile mais importante, le premier basé sur la largeur du navigateur, le second de l'écran, et ce n'est pas nécéssairement la même chose !

uda-fewd:responsive_web_design_fundamentals:pan_zoom_touch_ick

Anonymous (anonymous@undisclosed.example.com) — 2017-04-02T10:50:12+00:00

<- Intro to ProjectEmulators, Simulators and Real Devices -> responsive : make your site available through any device, from mobile to tv le titre fait référence à la difficulté d'un des intervenant à naviguer sur mobile sur google.com/finances non responsive, ou il doit pan, zoom, touch, ewww

uda-fewd:responsive_web_design_fundamentals:pattern_-_column_drop

Anonymous (anonymous@undisclosed.example.com) — 2017-04-02T12:29:33+00:00

<- Intro to PatternsPattern - Mostly Fluid -> le plus simple, les éléments s'empilent verticalement lorsqu'il n'y a plus assez de place pour le faire horizontalement en s'adaptant à la largeur

uda-fewd:responsive_web_design_fundamentals:pattern_-_layout_shifter

Anonymous (anonymous@undisclosed.example.com) — 2017-04-02T12:38:00+00:00

<- Combining Fluid LayoutsWhich is Which -> sans doute le pattern le plus adaptatif, avec plusieurs breakpoints avec en plus des changement d'ordre on peut utiliser order: -1 . la valeur par défaut est 0 donc on peut mettre un élément devant les autres avec une valeur négative. de même si on met la valeur d'un élément à 1 ou plus, il apparaitra après les éléments avec la valeur par défaut.

uda-fewd:responsive_web_design_fundamentals:pattern_-_mostly_fluid

Anonymous (anonymous@undisclosed.example.com) — 2017-04-02T12:30:28+00:00

<- Pattern - Column DropMostly Fluid Part 1 -> très proche du column drop, mais plus proche d'une grille, avec plus de colonnes on passe d'un stack à quelque chose de plus en plus en forme de grille, avec potentiellement à la fin des marges pour limiter l'expansion en largeur

uda-fewd:responsive_web_design_fundamentals:pattern_-_off_canvas

Anonymous (anonymous@undisclosed.example.com) — 2017-04-02T12:40:16+00:00

<- Which is WhichOff Canvas Visualization -> exemple classique, menu hamburger qui toggle l'apparition d'un menu qui était off canvas

uda-fewd:responsive_web_design_fundamentals:picking_breakpoints

Anonymous (anonymous@undisclosed.example.com) — 2017-04-02T11:54:46+00:00

<- Number of BreakpointsPicking Breakpoints 2 -> penser les breakpoints pour des devices finit en cauchemar à maintenir, au lieu de cela, se focaliser sur le contenu " on ne devrait pas choisir ses breakpoint, mais utiliser son contenu comme guide pour les trouver"

uda-fewd:responsive_web_design_fundamentals:pixels_pixels_and_moar_pixels

Anonymous (anonymous@undisclosed.example.com) — 2017-04-02T11:25:48+00:00

<- Defining the Viewportmeta viewport -> au lieu de nous donner la largeur en pixels physiques, il nous le donne en DIPS : Device Independant Pixels comme son nom l'indique, c'est une unité qui donne compare des pixels à une distance réelle l'idée est que la même distance en pixel en change pas en rapport avec le densité du dispositif d'affichage

uda-fewd:responsive_web_design_fundamentals:quiz_-_tap_targets

Anonymous (anonymous@undisclosed.example.com) — 2017-04-02T11:43:38+00:00

<- Tap Target SizesStart Small -> ajouter un min-height et min-width de 48px pour tout ce qui est tap-able nav a, button { max-width: 48px; min-height: 48px; }

uda-fewd:responsive_web_design_fundamentals:remote_debugging_intro

Anonymous (anonymous@undisclosed.example.com) — 2017-04-02T11:11:03+00:00

<- Quiz - Device EmulationSetup for mobile -> * android device * usb cable * ordinateur de dev * developper mode sur android device * voir le manuel, souvent settings -> about -> appuyer sur build number 7 fois puis aller dans developper options pour activer le debug usb chrome canary et beta sur mobile : y'a besoin ?

uda-fewd:responsive_web_design_fundamentals:responsive_tables_-_contained_scrolling

Anonymous (anonymous@undisclosed.example.com) — 2017-04-02T13:19:02+00:00

<- Responsive Tables - No More TablesFonts -> aussi possible : contenir la tabled ans une div avec une width de 100% et un overflow auto -> devient scrollable sans que tout soit scrollable

uda-fewd:responsive_web_design_fundamentals:responsive_tables_-_hidden_columns

Anonymous (anonymous@undisclosed.example.com) — 2017-04-02T13:15:32+00:00

<- Responsive Tables IntroHide Some Columns -> Il s'agit de cacher des colonnes sur la base de leur importance lorsque le viewport diminue en largeur. Exemple avec score de sport : on cache le nom complet de l'équipe pour préferer le nom raccourci (FRA). Où les sets d'un match de tennir pour ne montrer que le score final. Mais voilà, on cache de l'information à l'user : et si on en a besoin ?

uda-fewd:responsive_web_design_fundamentals:responsive_tables_-_no_more_tables

Anonymous (anonymous@undisclosed.example.com) — 2017-04-02T13:17:23+00:00

<- Hide Some ColumnsResponsive Tables - Contained Scrolling -> exemple en ligne : on 'collapse' les données qui prennent alors la forme d'une liste à opposer à la forme tableau pro : toutes les données visibles et non cachées @media screend and (max-width: 500px) { table, thead, tbody, th, td, tr { display: block; } }

uda-fewd:responsive_web_design_fundamentals:responsive_tables_intro

Anonymous (anonymous@undisclosed.example.com) — 2017-04-02T13:13:49+00:00

<- ImagesResponsive Tables - Hidden Columns -> Les Tables peuvent facilement générer du scroll horizontal sur des viewport peu larges : c'est vilain * hidden Columns * no more Tables * contained tables

uda-fewd:responsive_web_design_fundamentals:setting_the_viewport

Anonymous (anonymous@undisclosed.example.com) — 2017-04-02T11:29:31+00:00

<- Quiz - How wide is the viewportQuiz - Setting the Viewport -> on dit qu'on va régler nous-même le viewport, à la largeur du device, avec une échelle de 1 entre les DIPS et pixels CSS * permet de changer la largeur du doc lors qu'on rotate l'écran, et d'empêcher le zoom

uda-fewd:responsive_web_design_fundamentals:setting_up_chrome_s_dev_tools

Anonymous (anonymous@undisclosed.example.com) — 2017-04-02T11:00:57+00:00

<- Emulators, Simulators and Real DevicesIMPORTANT! Udacity Front End Feedback Extension -> CMD+OPT+J ou CTRL+MAJ+J sur chrome pour ouvrir les dev tools emulateur : l'icone téléphone à côté de la loupe en haut à gauche possibilité de choisir le device pour avoir la taille correspondantes echap pour plus d'options d'émulation

uda-fewd:responsive_web_design_fundamentals:setup_for_mobile

Anonymous (anonymous@undisclosed.example.com) — 2017-04-02T11:20:27+00:00

<- Remote Debugging IntroUsing dev tools on mobile -> * chrome canary (dernière version avec plus d'option notamment expérimentales, utiliser canary permet de tester les dernières technos) : * pour linux, chromum dev channel : * en savoir plus : * brancher en usb et confirmer qu…

uda-fewd:responsive_web_design_fundamentals:sites_on_mobile

Anonymous (anonymous@undisclosed.example.com) — 2017-04-02T10:45:03+00:00

<- Quiz - Share Your Great & Awful Sites -> basic guidelines * fully responsive for tablet and mobile * desktop : a fully responsive layout that start at minimum size skinny ties

uda-fewd:responsive_web_design_fundamentals:start_small

Anonymous (anonymous@undisclosed.example.com) — 2017-04-02T11:44:04+00:00

<- Quiz - Tap TargetsQuiz - Project Part 1 -> en responsive c'est comme en pas responsive sauf qu'on a plus de tailles conseil commencer par le petit format, puis le moint petit jusqu'au plus grand, en se demandant s'il y a effectivement un besoin pour un plus grand écran ? en commencant par ce qui est petit, cela aide à faire des choix sur ce qui est important !

uda-fewd:responsive_web_design_fundamentals:tap_target_sizes

Anonymous (anonymous@undisclosed.example.com) — 2017-04-02T11:40:31+00:00

<- Quiz - Relative SizesQuiz - Tap Targets -> la souris c'est précis, pas les doigts, ce qui doit être tap doit faire au moins 40px de large et de distance pour les gros doigts ! assez gros et assez espacé donc.

uda-fewd:responsive_web_design_fundamentals:which_styles_are_applied

Anonymous (anonymous@undisclosed.example.com) — 2017-04-02T11:53:23+00:00

<- Next Step Media QueriesBreakpoints -> media-queries sur les cas 1 (<400) et 3 (>600), cas par défaut au milieu géré sans MQ