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.
Your Interactive Makes Me Sick - Features - Source : An OpenNews project
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!
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).
Does CSS Grid Replace Flexbox? | CSS-Tricks
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.
CSS Grid and Grid Inspector in Firefox — Mozilla
CSS Grid simplifies existing layout patterns and adds new possibilities for graphic design.
It’s a layout framework — without the framework.
Combining fonts - JakeArchibald.com
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:
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.
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?
Resilient Web Design—Introduction
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.
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.
@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).
Comment travailler avec des icônes en SVG
Remarque : quand vous exportez un SVG depuis un outil de design, il comprendra souvent du markup et des métadonnées inutiles, ainsi que des données excessivement précises pour le chemin (dans l’attribut d). Essayez l’outil SVGOMG and comparez le code avant et après pour voir ce qui est supprimé ou simplifié.
Using #Feature_Queries in #CSS ★ Mozilla Hacks – the Web developer blog
There’s a tool in CSS that you might not have heard of yet. It’s powerful. It’s been there for a while. And it’ll likely become one of your favorite new things about CSS.
Behold, the #@supports rule. Also known as Feature Queries.
With @supports, you can write a small test in your CSS to see whether or not a particular “feature” (CSS property or value) is supported, and apply a block of code (or not) based on the answer.
font-display for the Masses | CSS-Tricks
font-display is used inside of a @font-face declaration for your custom fonts. This property accepts a number of values:
auto: The default value. The typical browser font loading behavior will take place, which is to hide typefaces that use custom fonts, and then display the affected text when fonts finish loading.
fallback: This is sort of a compromise between auto and swap. There will be a short period of time (100ms according to Google) that text styled with custom fonts will be invisible. The unstyled text will then appear (if the custom font hasn’t already loaded by this point.) Once the font loads, the text is styled appropriately.
optional: Operates exactly like fallback in that the affected text will initially be invisible for a short period of time, and then transition to a fallback font. The similarities end there, though. The optional setting gives the browser freedom to decide whether or not a font should even be used, and this behavior hinges on the user’s connection speed. On slow connections, you can expect that custom fonts may not load at all if this setting is used.
“Let’s say you have a product, a portfolio, or just an idea you want to share with everyone on your own website. Before you publish it on the internet, you want to make it look attractive, professional, or at least decent to look at.
What is the first thing you need to work on?”
The #UX Secret That Will Ruin #Apps For You | Co.Design | business + design
Steven Hoober, president at the consultancy 4ourth Mobile, was developing a service plan optimizer for a cell-phone carrier—a system that looked at a customer’s cell-phone usage and suggested the most bang-for-your-buck plan. “My guys built this tool—it took single digit milliseconds to get the results back. And it was giving [accurate] results, not just some plan we wanted to sell them,” Hoober says. “But when we tested with people, they assumed it was all marketing bullshit because it was instantaneous. They’d say, ‘This was obviously a canned result, I’m just gonna shop myself.’”
So Hoober introduced a waiting randomizer. The same code pulled the same results, but a timer delayed the display of those results anywhere from 8 to 30 seconds. The only visual feedback was a spinning indicator. Were focus group testers annoyed? Did they label the machine incompetent? Just the opposite. “People would sit there, asking, ’I wonder what it’s doing?’” Hoober says. “Results would show up, and they’d lean in to the computer [assuming] it must have been really hard to get that information!” One hundred percent of people tested trusted the new tool, even though the only thing that changed significantly was their wait.
Understanding #CSS #Timing_Functions – Smashing Magazine
People of the world, strap yourself in and hold on tight, for you are about to experience truly hair-raising excitement as you get to grips with the intricacies of the hugely interesting CSS timing function!
Technical and social challenges of #conversational_design — uxdesign.cc – User Experience Design
A couple of weeks ago, I ran an experiment on my website. I made it conversational. The feedback, responses and media coverage have been absolutely amazing. I received over 300 emails within the first 24 hours.
Some of you asked me to share my insights. Since this whole thing started as a conversation, I’d like to keep it as one.
Répondre au #design de nos vulnérabilités « InternetActu.net
Or quand on donne aux gens une sélection de #choix, ils se demandent rarement ce qui n’est pas proposé… Pourquoi leur propose-t-on certaines options et pas d’autres ? Quels sont les objectifs de celui qui les propose ?… Ou si ce choix “capacite” le besoin de l’utilisateur ou créé seulement une distraction… Pour Tristan Harris par exemple, consulter Yelp pour y trouver un bar pour continuer à discuter avec des amis transforme sa requête en quel bar semble être le plus attirant ou le proche selon les propositions que renvoie l’application. Or, le menu qui nous propose plus d’#autonomie est différent du menu qui nous propose le plus de choix, rappelle le designer. Pour lui, toutes les interfaces utilisateurs sont des menus qui remplacent les questions qu’on se pose par une autre. La liste des notifications de son téléphone correspond-elle à ce qui nous préoccupe ? Pour lui, celui qui contrôle le “menu” contrôle les choix. Telle est la première vulnérabilité que tentent d’exploiter nos outils.