#web_design

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

Isometric Grids | Demo 1 | Codrops
▻http://tympanus.net/Development/IsometricGrids/index.html

#web_design

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

Why you don’t need #design like #Apple — The Startup — Medium
▻https://medium.com/swlh/why-you-dont-need-design-like-apple-a2e6f17064fb
https://cdn-images-1.medium.com/max/1200/1*pV0lklX6GQi6PRFkSlFudA.jpeg

Because we’ve seen the results of visual beauty in product design, we expect putting this level of focus on visual beauty in our brand’s message will have the same effect.
I’ve seen companies spend tens to hundreds of thousands of dollars perfecting a website, email, or ad’s visual design while spending the last few hours on writing the words that will make up that design.
Our intense focus on visual design can blind us from focusing on the most important part of the message: The story.

#web_design

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

Brutalist Websites
▻http://brutalistwebsites.com

In its ruggedness and lack of concern to look comfortable or easy, #Brutalism can be seen as a reaction by a younger generation to the lightness, optimism, and frivolity of today’s webdesign.

#web_design

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

#Progressive_Enhancement Makes Me Sad | HeydonWorks
▻http://www.heydonworks.com/article/progressive-enhancement-makes-me-sad

There’s been a lot of talk lately in favour of progressive enhancement and ‘universal’ (isomorphic) applications. Apparently, server rendering increases performance, robustness, and the parsability and interoperability of content.
I welcome these arguments because I’m magnanimous.
But there are grave concerns regarding the adoption of progressive rendering and/or isomorphism which I feel should be addressed and apparently I’m the only one brave enough to go against the grain and address them. No need to thank me.

#web_design

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

Somerset
▻http://printedbysomerset.com

Un site Internet en carton

#print #design #web_design

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

#REM vs #EM – The Great Debate | Zell Liew’s blog about web design and development
▻http://zellwk.com/blog/rem-vs-em

One of the best practices to typography on the web is to use relative units like rem and em.
The question is, which should you use? There’s been a longstanding debate between rem supporters and em supporters, believing that you should use one over the other.
In this article, you’re going to find my take on rem vs em. You’re also going to learn exactly what rem and em are, and how to use them to build modular components.

#web_design #typo

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

Re-thinking #reading on the Web — Truth Labs — Medium
▻https://medium.com/truth-labs/re-thinking-reading-on-the-web-158e789eddd7
https://cdn-images-1.medium.com/max/800/1*_3uuv2vDdCi_U-lHLKDl2g.png

They wanted to tell these stories in an interactive and visual way. The challenge was to create interactive visualizations based on industry concepts and make them accessible to both healthcare professionals and the a casual audience.
From the beginning we knew we wanted to create an experience that was familiar from an interaction perspective but different from a visual perspective. We aspired to take the traditional editorial content The Atlantic is known for and combine it with a rich digital narrative.

et le résultat : ▻http://www.theatlantic.com/sponsored/athenahealth

#web_design #opengl

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

CodePen - Flexbox playgroung
▻http://codepen.io/enxaneta/full/adLPwv
http://codepen.io/enxaneta/pen/adLPwv/image/large.png

#web_design #code

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