Read it when someone looks down at your Web site, saying “you should pay a designer”:
“By default, a website that uses HTML as intended and has no custom styling will be readable on all screens and devices. Only the act of design can make the content less readable” (for those who keep repeating “responsive” without understanding it)
Ces features, ce sont les features Opentype, que tu trouvera dans toutes les bonnes docs Opentype. Mais effectivement, la petite liste est pratique.
En revanche, attention : les créateurs de police n’ont rigoureusement aucune obligation d’intégrer telle ou telle feature dans leur police. Du coup, ce n’est pas parce que tu actives une feature que ça va faire quoi que ce soit : il faut aussi (surtout ?) qu’elle soit présente dans la police.
Par exemple, si tu décides d’activer « onum » (chiffres oldstyle), si la police n’a pas cette feature, ça ne fera rigoureusement rien. La difficulté, c’est donc qu’il faut que tu saches, pour la police que tu es en train d’utiliser, quels sont les features dont elle dispose (et encore : tu ne sais pas forcément ce que fait cette feature spécifique – par exemple si tu actives les ligatures spécifiques « dlig », si tu n’as pas la doc de la police, tu risques de ne même pas savoir quelles sont les ligatures qui ont été implémentées pour cette police-là).
Having the right amount of characters on each line is key to the readability of your text. It shouldn’t merely be your design that dictates the width of your text, it should also be a matter of legibility.
The optimal line length for your body text is considered to be 50-60 characters per line, including spaces (“Typographie”, E. Ruder). Other sources suggest that up to 75 characters is acceptable. So what’s the downsides of violating this range?
Too wide – if a line of text is too long the reader’s eyes will have a hard time focusing on the text. This is because the line length makes it difficult to gauge where the line starts and ends. Furthermore it can be difficult to continue onto the correct line in large blocks of text.
Too narrow – if a line is too short the eye will have to travel back too often, breaking the reader’s rhythm. Too short lines also tend to stress readers, making them begin on the next line before finishing the current one (hence skipping potentially important words).
It turns out that the subconscious mind is energized when jumping to the next line (as long as it doesn’t happen too frequently, see above bullet point). At the beginning of every new line the reader is focused, but this focus gradually wears off over the duration of the line (“Typographie”, E. Ruder).
In order to avoid the drawbacks of too long and too short lines, but still energize your readers and keep them engaged, we suggest keeping your text within the range of 50-75 characters per line.
The New Wave of Indian Type - Library - Google Design
As mobile access grows and more people around the world start using the internet—a billion people are expected to come online over the next few years in emerging markets alone—it’s also necessary to elevate the quality and range of digital typefaces available in different writing systems. This challenge is especially striking in India, a country that recognizes 23 official languages, but counted almost 1600 (including dialects) in their last census. Some of these languages and their scripts have descended from ancient Brahmi, others are based in Arabic, while the ongoing use of English, a language that’s reach and influence has grown considerably since India’s independence from Britain in 1947, means that Latin letters are also a common sight.
Keeping pace with the subcontinent’s linguistic diversity is challenging enough in print, but the relatively small number of digital fonts available for Indic languages reveals a striking disparity. Even the most widely used Indian script, Devanagari, has far fewer typographic options compared to the superabundance of Latin fonts. Some scripts like Bengali, Tamil, Urdu, and Tibetan have even fewer fonts available. But the balance is beginning to shift as a cohort of Indian type designers develop new digital fonts, and the movement is still growing in part because many of these designers release their designs with open source licenses. The code is then readily available for others to experiment and develop their own contributions, improving the quality and variety of typography across India’s many writing systems.
Now picture this: A journalist has published a piece of work you’re interested in. Ooh, the teaser sounds good! You click over to the page and WHOOSH some sort of video moves unbidden behind the header. You scroll a bit and WHOA two different pieces of the page move with your scrolling. A graph animates! A wolf howls in the distance! You’re starting to get a bit overwhelmed, and maybe a touch nauseated. I don’t know what you’d do at this point, but I’m gonna close the page.
Modern CSS Explained For Dinosaurs – Actualize – Medium
In order to deal with the inherent complexity of #CSS, all sorts of different best practices have been established. The problem is that there isn’t any strong consensus on which best practices are in fact the best, and many of them seem to completely contradict each other. If you’re trying to learn CSS for the first time, this can be disorienting to say the least.
The goal of this article is to provide a historical context of how CSS approaches and tooling have evolved to what they are today in #2018. By understanding this history, it will be easier to understand each approach and how to use them to your benefit. Let’s get started!
Bah je vois pas pourquoi, on vois justement les nettes améliorations au fil du temps (et de plus en plus rapidement tant mieux), comme d’ailleurs pour n’importe quel autre langage où de nouveaux concepts apparaissent (ya qu’à voir JS, le concept de promise, etc)
Mets toi au moins à flexbox qui est vraiment reconnu partout. C’est le minimum. Mais grid est génial et ce sera bientôt ok aussi (à chaque fois les nouveaux trucs sont bien reconnus sur tous les navigateurs récents, mais ce qu’il faut attendre c’est que les vieux navigateurs descendent sous 1%).
Ceci dit, même si les flexbox et grid permettent des trucs super, ça ajoute clairement un cran d’abstration qui rend l’abord des css en général bien plus ardu comme le dit @mariejulien ▻https://twitter.com/mariejulien/status/962978499819655169
Un débat classique que je crois avoir déjà vu « récemment » dans Spip… Le truc relou, me semble-t-il, c’est quand c’est utilisé à mauvais escient pour faire des choses très simples pour lesquelles c’est absolument inutile ; et vu que ce n’est pas un code très lisible, dans ce cas ça ajoute de la complexité pour rien du tout…
No. Well. Mostly No.
To put a point on it:
Grid can do things Flexbox can’t do.
Flexbox can do things Grid can’t do.
They can work together: a grid item can be a flexbox container. A flex item can be a grid container.
Commoditisation of UI – Hacker Noon
First, unique and good design alone does not lead to a successful product. In the post-iPhone world good #UI is not a differentiation point, but a cheap commodity, a de-facto standard. In the early days of the new era, there were innovative products that managed to beat incumbents just by having a great design (e.g. Slack had the same core tech as Hipchat, but 10x better design). Good design is a new baseline now (even Android has good design these days).
Breaking Out With CSS Grid Layout - Cloud Four
A while back I shared a simple technique for allowing certain elements to fill the full viewport width from within a fixed-width container (...). As concise as this technique was, it had one big, dumb caveat: On some platforms, you’d see a horizontal scrollbar unless you set overflow-x to hidden on the body element.
It’s now a year later and every modern browser supports (or will soon support) CSS Grid Layout (hooray!!). I thought it might be fun to reexamine this problem with a fancy set of modern layout tools at our disposal.
The trick is in the unicode-range descriptor. It indicates that the src should only be used for the hyphen (U+2d) and equals (U+3d) code points. You can turn a unicode character into a code point using this snippet:
CSS Grid simplifies existing layout patterns and adds new possibilities for graphic design.
It’s a layout framework — without the framework.
The full stack design system
“Your product is more than just a pile of reusable UI elements. It has structure and meaning. It’s not a generic web page, it’s the embodiment of a system of concepts.”
Google lance un outil pour réduire de 35 % les images jpeg
L’algorithme en question est capable de réduire de 35 % la taille d’un fichier image jpeg qui est le format le plus répandu sur la Toile. Outre sa performance, Guetzli a pour lui sa totale compatibilité avec le standard jpeg et donc tous les navigateurs, logiciels de retouches d’images et applications photo, ce qui n’est pas le cas des formats WebP et WebM également développés par Google.
à noter sur le Github du projet :
Note: Guetzli uses a large amount of memory. You should provide 300MB of memory per 1MPix of the input image.
Note: Guetzli uses a significant amount of CPU time. You should count on using about 1 minute of CPU per 1 MPix of input image.
...ça fait quand même 1 Go de RAM et 3 minutes de traitement pour une bête photo de 3 Mpixel !
Adobe Is Building An AI To Automate Web Design. Should You Worry? | Co.Design | business + design
#Adobe, one of the world’s largest and most powerful software companies, is trying something new: It’s applying #machine_learning and image recognition to graphic and #web_design. In an unnamed project, the company has created tools that automate designers’ tasks, like cropping photos and designing web pages. Should designers be worried?
The Futures of #Typography
Typesetting on the #web has evolved from a quirky afterthought into an invaluable practice. Within a span of twenty years complex interfaces that adapt to their environment, as well as an overwhelming number of typefaces, have bloomed all around us. Likewise, using animations and transitions or balancing display text in conjunction with powerful #OpenType features became not only possible but expected. So where do we go from here? What are the skills we need to contribute to the future of typography? And what do two ghostly figures from the 15th century have to do with that future?
With a title like Resilient Web Design, you might think that this is a handbook for designing robust websites. This is not a handbook. It’s more like a history #book.
But in the world of #web_design, we are mostly preoccupied with the here and now. When we think beyond our present moment, it is usually to contemplate the future—to imagine the devices, features, and interfaces that don’t yet exist. We don’t have time to look back upon our past, and yet the history of web design is filled with interesting ideas.
une analyse de l’émergence de l’hypertexte : considérations historiques, techniques et philosophiques, références nombreuses, bref : indispensable !
(une traduction en français serait la bienvenue...)
For instance, what should the Line Mode Browser do when it encounters an HTML element it doesn’t understand, such as NEXTID? The answer can be found in the sparse documentation that Tim Berners‐Lee wrote for his initial collection called HTML Tags. Under the heading “Next ID” he wrote:
Browser software may ignore this tag.
Web designers would do well to remember what the advertising industry chose to ignore: on the web, the user has the final say.
Platforms are controlled and predictable. The World Wide Web is chaotic and unpredictable.
The web is a hot mess.
The trick is identifying what it is considered core functionality and what is considered an enhancement.
1. Identify core functionality.
2. Make that functionality available using the simplest possible technology.
We’ve updated the radios and checkboxes on GOV.UK | GDS design notes
We’ve removed the grey boxes and increased the size of the controls. To understand why we’ve done this it helps to know what problem we were trying to solve with the grey boxes.
Et on voit, c’est récurent, que la meilleure solution est finalement la plus simple, sans fioritures, sobre. Et pourtant ça leur a demandé un boulot énorme et long :
We don’t make global changes to GOV.UK styles lightly. This has been the culmination of a lot of work by a lot of people, but especially Joe Lanman, Ed Horsford, Caroline Jarrett and Robin Whittleton.
Thanks also to the service teams in DWP and NHS who agreed to pilot early versions of these styles in their prototypes and services.
@supports will change your life | Charlotte Jackson, Front-end developer
we have a very powerful tool in CSS, which may be about to change your life. It’s called @supports.
With #@supports, you can write a conditional statement in your CSS to see whether or not a particular #CSS property is supported by the browser; and then depending on the answer, apply a block of code. It’s also known as a #Feature_Query.
#Gmail Update: A Closer Look at Google’s Rendering Refresh | Campaign Monitor
#Google has started rolling out their recently announced updates to their range of #email clients. If you missed the big news, Google will now be supporting embedded stylesheets, including media queries, across all their clients, including Gmail on #Android, #iOS and #webmail, Inbox on Android, iOS and webmail, and Google Apps webmail (now renamed G Suite).