Notes de conférence Paris Web – jeudi
Ce contenu a été rédigé il y a 12 ans. Il se peut qu'il ne soit plus à jour.
Trois jours géniaux à Paris Web viennent de s’écouler riches de conférences géniales, de rencontres qui l’étaient tout autant et d’expérimentations CSS.
Je vais donc essayer de vous publier mes quelques notes prises durant ces trois jours, en anglais puisque c’était la langue des trois conférences.
Responsive Web Design: Clever Tricks and Techniques
Je commence par la conférence de Vitaly Friedman de jeudi matin qui c’est basé sur la refonte de Smashing Magazine
- Focus on the content choregraphy
- When they re-designed SmashingMagazine, they wanted an independent layout (independent from devices) => set breakpoints where the content breaks, and not according to device width
- SVG and font-icon are great to serve a nice and sleek experience
- For images you can use conditional loading
- There’s a nice trick/ hack to catch when media queries are fired, based on a :before pseudo-class on the body http://adactio.com/journal/5429/
- Responsive video : ensure that the ratio is remained, create a box outside of the video, stretch the video inside the box
- Vertical media queries with the example of GoogleDrive, you can enhance behavior based on height too
- Use split mediaqueries and set breakpoints one pixel appart from one another (450, 451, etc)
- The 3 lines navicon icon becomes more and more used
- http://bradfrost.github.com/this-is-responsive/
- RWD patterns : embed what can be done with mobile
- What’s left ? Current problems : what to donc with webforms ? images ? perfoperformances ? consistency ? debuging? maintenance ?
- Casetyle : typo in the new Smashing design
- they started from scratch
- base and focused on typo?
- find out what makes mobile apps interresting
- 45-90 character per line on all devices is a good measure for typography
- be carefull and test the fonts !!
- change layout when the line lenght was too long, put breakpoints when it makes sense
- So typo tips and tricks :
- Use a font-face that is 100% (16px) to start with
- line lenght/ height = 27,8
- spacing/ line height : 0.75
- use agh!iIl1 as a test phrase to test typography
Question by the public: why did you not remove fonts for mobile to help loading and for performances?
A : we could have, yes, but we wanted a consistent style on all devices.
How Designers Destroyed the World
La seconde conférence où j’ai pris beaucoup de notes est celle de Mike Monteiro auteur de «Design is a Job » et « Let’s make mistakes »
- Creation without responsibility is destruction
- Facebook bad design decisions outed an homosexual student
- someone can ad you to a group without your agreement
- groups settings overwrite personal settings
- It can destroy a life with bad decisions, even if it was a design decision: /
- “it’s good enough” equals not very good at all !!!
- design is how it affects people and the environment they are in
- careless design is not creation, it’s destruction
- “Design for the real world” => a book you should read
- “There are professions more harmful than design, but only a very few of them”
- 4 responsibilities
- Responsible to the world: you are in the service of a better world. Make sure you are solving problems, and not creating them. Are the problems you are solving worth solving?
- To the craft: each job you do is a representation to the entire craft, if you do bad designs, you are giving a bad image of the whole craft. Other designers will have to rebuild the trust of people that have been screwed by other bad designers. Write, speak, teach!
- To the clients
- chose the right clients
- don’t work to anybody you’re afraid to say no to
- say no, you’re hire to make good design, not to make clients happy !
- when there is a terrible idea, say it !!
- be willing to get fired !!
- no client hires you to be their friend
- To yourself
- the work we choose to take on defines us
- you’re portfolio reflects your work
- portfolio is another word for your reputation
- when you start to say no, the client understands
- when you turn on a bad job, a better one will come
- Things do detroy
- your ego : you are not bigger than the problem you solve
- your fear : never trust a designer how has never been punched in a face
- your apathy : be an active designer, be intentional in your actions
- the art director hovering over your shoulder
- the voice inside that says “don’t get in trouble”
- Wake up, we need our best designers at Facebook to stop them doing bad things
- Even if you work for the most evil company in the world, decide if it’s ok to have your name on it (ethical)
- designers NEED to change the world : open, equal, more accessible web
Advanced Typesetting for Web
La conférence de Marko Dugonjić sur le choix d’une typo
How to chose a typeface ?
- put text into context
- is it used into grids ? columns?
- what is the the peripheric it will be displayed on?
- different length of some common words (ex translation for german maybe you’ll need a special typeface)
- disabled people: dyslexic people, color blind who can’t rely on font smoothing, it won’t work !!
- impatience of people sometimes
Choosing a typeface
- start with body copy
- http://www.type-together.com/
- serif or not ?
- for something that should be vertical compared : use a not horizontal pronounced typeface
- for online book : serif typeface
- “aegh!iIl1” to test glyphs in the font. If a and e are too similar, people will have problems reading it
- check out cleartype and not : lucasfonts.com
- check on many devices to make sure it looks nice
Combining typeface
- mesure the x-height of your different fonts
- create contrast, not just in color, with boldness for example too
- “designers like even grayness which is the worst for reader”
- typeface from the same foundry often work well together
- using two extra bolds typeface together : No !!
Type size
- different distances from eye to screen : desktop, mobile
- measure typo and compare it with a real book to see if it’s readable
- 16px : you can go further !
Words
- Beware about kerning
- In CSS : text-rendering: optimizeLegibility;
Line lenght
- fixation point : our brain jumps ahead to next expected work
- 100 characters per line : the biggest we can read, 70 given to typographers
- for factual information, the reading is quick you can tighten the line
- for novel reading: make it longer, people read slowly
Headlines
- big massive headlines on destktop but on mobile device this sucks. For mobile you can chose another typeface
- negative spacing between letters : if there is still some pixels between letters it’s ok
- you can add a virtual “i” letter to get proper spacing between words
- add some “j” and S between letters to see how it works for vertical spacing
Make it responsive
- some usefull units : vw, vh, vmin, vmax
- on mobile it would be great to be able to measure the proximity between user and device (does not exist)
Some ressources :
- http://www.thinkingwithtype.com/
- Steal like an artist
- #iseebadkerning on instagram
Et un dernier lien sympa :
- Headtracking : pour détecter les mouvements de la camera et animer du WebGL
