#web_design

Inclusively Hiding & Styling Checkboxes and Radio Buttons — Sara Soueidan – Freelance-Front-End UI/UX Developer
▻https://www.sarasoueidan.com/blog/inclusively-hiding-and-styling-checkboxes-and-radio-buttons
https://sarasoueidan.com/images/me/me-p.jpg

Checkboxes and radio buttons are two common examples of interactive form elements that we desperately want to have full control over styling but we don’t. So we’ve been hacking our way around styling them by hiding said elements with CSS and visually replacing them with pseudo-elements or an SVG image — SVG, of course, being the more flexible, powerful, and accessible replacement. But an SVG image is, at the end of the day, just an image, so while it can visually replace a checkbox, it doesn’t really substitute for it — the user still needs a checkbox to interact with. So, when we attempt to hide the checkbox we want to style, we need to make sure that the checkbox remains accessible and interactive.

#web_design #webdesign

▻https://seenthis.net/messages/862902 via Agnès Maillard

bitmanic/font-feature-settings: font-feature-settings() is a Sass mixin for enabling OpenType features via CSS.
▻https://github.com/bitmanic/font-feature-settings

(je le met ici pour conserver cette liste des font-feature-setting bien complète #typo #web_design)

▻https://seenthis.net/messages/715498 via baroug

30 Seconds of #CSS
▻https://atomiks.github.io/30-seconds-of-css

A curated collection of useful CSS snippets you can understand in 30 seconds or less.

#web_design

▻https://seenthis.net/messages/677530 via baroug

The New Wave of Indian Type - Library - Google Design
▻https://design.google/library/new-wave-indian-type-design
https://storage.googleapis.com/gd-wagtail-prod-assets/original_images/the_new_wave_of_open_source_indian_type_design_share.png

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.

#typographie #web_design #inde

▻https://seenthis.net/messages/677532 via baroug

Your Interactive Makes Me Sick - Features - Source : An OpenNews project
▻https://source.opennews.org/articles/motion-sick
https://media.opennews.org/cache/69/1a/691a6ec11bc68314187a333a508a6f15.jpg

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.

#journalisme #long-format #web_design

▻https://seenthis.net/messages/673479 via baroug

Modern CSS Explained For Dinosaurs – Actualize – Medium
▻https://medium.com/actualize-network/modern-css-explained-for-dinosaurs-5226febe3525
https://cdn-images-1.medium.com/max/1200/1*kXsiGLMHSS4jUx4W6yBOlw.png

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!

#web_design

▻https://seenthis.net/messages/668348 via baroug

Commoditisation of UI – Hacker Noon
▻https://hackernoon.com/commoditisation-of-ui-36a5abbeb3c0
https://cdn-images-1.medium.com/max/1200/1*ckeYy9iXhY-Q5qYhvxW5gQ.jpeg

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).

#web_design

▻https://seenthis.net/messages/617062 via baroug

Does CSS Grid Replace Flexbox? | CSS-Tricks
▻https://css-tricks.com/css-grid-replace-flexbox
https://cdn.css-tricks.com/wp-content/uploads/2017/03/both-grid-and-flex.png

No. Well. Mostly No.

#Grid is much newer than #Flexbox and has a bit less browser support. That’s why it makes perfect sense if people are wondering if CSS grid is here to replace Flexbox.

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.

#web_design

▻https://seenthis.net/messages/617063 via baroug

CSS Grid and Grid Inspector in Firefox — Mozilla
▻https://www.mozilla.org/en-US/developer/css-grid
https://www.mozilla.org/media/img/mozorg/developer/css-grid/grid-meta-image.04501b110dc3.jpg

CSS Grid simplifies existing layout patterns and adds new possibilities for graphic design.
It’s a layout framework — without the framework.

#web_design #css

▻https://seenthis.net/messages/604763 via baroug

Combining fonts - JakeArchibald.com
▻https://jakearchibald.com/2017/combining-fonts
https://jakearchibald.com/static/imgs/icon.e36785a43208.png

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:

#typo #web_design #font-face

▻https://seenthis.net/messages/604764 via baroug

Google lance un outil pour réduire de 35 % les images jpeg
▻http://www.futura-sciences.com/tech/actualites/internet-google-lance-outil-reduire-35-images-jpeg-66738
http://fr.cdn.v5.futura-sciences.com/buildsv6/images/wide1920/d/e/d/ded4491ed3_104503_google-guetzli-1-01.jpg

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.

#compression #image #web_design

▻https://seenthis.net/messages/580229 via Agnès Maillard

Adobe Is Building An AI To Automate Web Design. Should You Worry? | Co.Design | business + design
▻https://www.fastcodesign.com/3068884/adobe-is-building-an-ai-to-automate-web-design-should-you-worry
https://c.fastcompany.net/multisite_files/fastcompany/imagecache/620x350/poster/2017/03/3068884-poster-p-3-inside-adobes-ai-for-designers.jpg

#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?

#sensei

▻https://seenthis.net/messages/578302 via baroug

The Futures of #Typography
▻https://robinrendle.com/essays/futures-of-typography

https://robinrendle.com/images/essays/futures/bible-text.jpg

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?

#typo #web_design

▻https://seenthis.net/messages/562833 via baroug

Resilient Web Design—Introduction
▻https://resilientwebdesign.com
https://resilientwebdesign.com/author/images/medium/jeremykeith.jpg

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.

▻https://seenthis.net/messages/551734 via baroug

We’ve updated the radios and checkboxes on GOV.UK | GDS design notes
▻https://designnotes.blog.gov.uk/2016/11/30/weve-updated-the-radios-and-checkboxes-on-gov-uk
https://designnotes.blog.gov.uk/wp-content/uploads/sites/53/2016/11/radios-checkboxes-2.png

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.

#web_design

▻https://seenthis.net/messages/548440 via baroug

@supports will change your life | Charlotte Jackson, Front-end developer
▻http://www.lottejackson.com/learning/supports-will-change-your-life
http://www.lottejackson.com/assets/images/static/profile_cl.png

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.

#web_design

▻https://seenthis.net/messages/534997 via baroug

#Gmail Update: A Closer Look at Google’s Rendering Refresh | Campaign Monitor
▻https://www.campaignmonitor.com/blog/email-marketing/2016/10/gmail-update-googles-rendering-refresh
https://www.campaignmonitor.com/assets/uploads/2016/10/Stocksy_txp8941bd1fdOB100_Medium_347003-2-1600x1066.jpg

#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).

#web_design

▻https://seenthis.net/messages/531222 via baroug

Comment travailler avec des icônes en SVG
▻https://la-cascade.io/comment-travailler-avec-des-icones-en-svg
https://la-cascade.io/content/images/2016/04/styled-icons.jpg

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é.

#web_design

▻https://seenthis.net/messages/520255 via Agnès Maillard

Using #Feature_Queries in #CSS ★ Mozilla Hacks – the Web developer blog
▻https://hacks.mozilla.org/2016/08/using-feature-queries-in-css

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.

#web_design

▻https://seenthis.net/messages/517997 via baroug

font-display for the Masses | CSS-Tricks
▻https://css-tricks.com/font-display-masses
https://cdn.css-tricks.com/wp-content/uploads/2016/08/foit.png

#font-display is a new #CSS property that is available as an experimental feature that first shipped in Chrome 49 and is now also in Opera and Opera for Android. Using it, we can control how fonts display in much the same way that we can with JavaScript-based solutions, only now through a convenient CSS one-liner!

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.

swap: The fallback text is shown immediately until the custom font loads. In most cases, this is what we’re after. JavaScript-driven font loading solutions almost always aim to emulate this setting.

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.

#web_design

▻https://seenthis.net/messages/517998 via baroug

Web Design in 4 minutes
▻http://jgthms.com/web-design-in-4-minutes

“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?”

#Web_design_content_progressive_enhancement_clevermarks

▻https://seenthis.net/messages/512775 via Nicolas Hoizey

The #UX Secret That Will Ruin #Apps For You | Co.Design | business + design
▻http://www.fastcodesign.com/3061519/evidence/the-ux-secret-that-will-ruin-apps-for-you
http://b.fastcompany.net/multisite_files/fastcompany/imagecache/620x350/poster/2016/07/3061519-poster-p-2-why-the-web-is-making-itself-look-slower-than-it-really-is.jpg

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.

#web_design

▻https://seenthis.net/messages/507895 via baroug

Understanding #CSS #Timing_Functions – Smashing Magazine
▻https://www.smashingmagazine.com/2014/04/understanding-css-timing-functions
https://media-mediatemple.netdna-ssl.com/wp-content/uploads/2014/04/01-bezier-curve-ease.jpg

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!

#web_design

▻http://seenthis.net/messages/501180 via baroug

Technical and social challenges of #conversational_design — uxdesign.cc – User Experience Design
▻https://uxdesign.cc/my-website-is-now-conversational-here-is-what-i-learned-7e943cc6ace0
https://cdn-images-1.medium.com/max/1200/1*c4mVWPnnokwJfIkbtvtEDA.jpeg

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.

#web_design

▻http://seenthis.net/messages/501174 via baroug

Répondre au #design de nos vulnérabilités « InternetActu.net
▻http://www.internetactu.net/2016/06/16/du-design-de-nos-vulnerabilites
http://www.internetactu.net/wp-content/uploads/2016/06/like.png

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.

#liberté #technologie #web_design

▻http://seenthis.net/messages/500534 via Agnès Maillard