Seenthis
•
 
Identifiants personnels
  • [mot de passe oublié ?]

 
  • #w
  • #we
  • #web
RSS: #webdesign

#webdesign

  • #webdesign_soutenable
0 | 25 | 50 | 75 | 100 | 125 | 150 | 175 | 200 | ... | 500
  • @oanth_rss
    oAnth_RSS @oanth_rss CC BY 23/05/2025
    1
    @gao_tumbuktu
    1

    The World Wide Web and the Death of Graceful Degradation

    via ▻https://diasp.eu/p/17638194

    https://hackaday.com/wp-content/uploads/2024/08/SmallWeb.jpg

    ►https://hackaday.com/2025/05/20/the-world-wide-web-and-the-death-of-graceful-degradation

    #featured #history #interest #rants #softwaredevelopment #gracefuldegradation #webdesign #hackaday posted by pod_feeder_v2

    oAnth_RSS @oanth_rss CC BY
    Écrire un commentaire
  • @monolecte
    Monolecte 😷🤬 @monolecte CC BY-NC-SA 11/06/2024
    1
    @sombre
    1

    #Typographie - Système de Design de l’État
    ▻https://www.systeme-de-design.gouv.fr/elements-d-interface/fondamentaux-de-l-identite-de-l-etat/typographie

    https://systeme-de-design.gouv.fr/uploads/systeme_de_design_gouv_fr_f61d3d3d20.jpg

    Les typographies Marianne® et Spectral sont les typographies officielles de la charte de l’État. Leur usage crée une cohérence entre les interfaces et offre une expérience positive à l’utilisateur. Leur respect renforce également la reconnaissance de la parole de l’État.

    #webdesign

    Monolecte 😷🤬 @monolecte CC BY-NC-SA
    • @cy_altern
      cy_altern @cy_altern CC BY-SA 12/06/2024

      à noter quand même : la police Marianne n’est pas libre de droits mais réservée à une utilisation pour les sites de l’état (et assimilés)...

      cy_altern @cy_altern CC BY-SA
    Écrire un commentaire
  • @monolecte
    Monolecte 😷🤬 @monolecte CC BY-NC-SA 1/01/2024
    2
    @ericw
    @mad_meg
    2

    HTML: The Bad Parts - HTMHell
    ▻https://www.htmhell.dev/adventcalendar/2023/13

    https://www.htmhell.dev/images/og/advent23_13.png?s=011221s

    You’ve probably heard statements along the lines of “HTML is already accessible by default” or “You don’t need to reinvent this perfectly fine HTML control”. I consider these to be more of general claims rather than universal truths. It’s extremely important for web developers to recognize gaps in the platform. To that end, I’ve decided to collect a few instances where HTML falls short, through accessibility issues or usability issues.

    This is not a comprehensive list, and it does not include gaps in ARIA. I wanted to find a balance between widely known issues and more frequently encountered (but lesser known) ones, while making sure to include some things that we take for granted. In each section, I will include its severity, alternate suggestions, and links where you can find more detailed information.

    #webdesign #accessibilité

    Monolecte 😷🤬 @monolecte CC BY-NC-SA
    Écrire un commentaire
  • @b_b
    b_b @b_b PUBLIC DOMAIN 6/02/2023
    8
    @jeanmarie
    @biggrizzly
    @sandburg
    @gblin
    @rastapopoulos
    @hassan_nya
    @ericw
    @cy_altern
    8

    Visual #design #rules you can safely follow every time
    ▻https://anthonyhobday.com/sideprojects/saferules

    You do not have to follow these rules every time. If you have a good reason to break any of them, do. But they are #safe to follow every time.

    – Use near-black and near-white instead of pure black and white
    – Saturate your neutrals
    – Use high #contrast for important elements
    – Everything in your design should be deliberate
    – Optical #alignment is often better than mathematical alignment
    – Lower letter spacing and line height with larger #text. Raise them with smaller text
    – Container borders should contrast with both the container and the background
    – Everything should be aligned with something else
    – #Colours in a palette should have distinct brightness values
    – If you saturate your neutrals you should use warm or cool colours, not both
    – Measurements should be mathematically related
    – Elements should go in order of visual weight
    – If you use a horizontal grid, use 12 columns
    – #Spacing should go between points of high contrast
    – Closer elements should be lighter
    – Make drop shadow blur values double their distance values
    – Put simple on complex or complex on simple
    – Keep container colours within brightness limits
    – Make outer padding the same or more than inner padding
    – Keep body text at 16px or above
    – Use a line length around 70 characters
    – Make horizontal #padding twice the vertical padding in buttons
    – Use two #typefaces at most
    – Nest corners properly
    – Don’t put two hard divides next to each other

    b_b @b_b PUBLIC DOMAIN
    • @sandburg
      Sandburg @sandburg CC BY-SA 6/02/2023

      #ux Finitions.
      J’ai l’impression qu’on redit toujours un peu les même choses depuis 15 ans.
      Et surtout que ce sont les pratiques de PAO qui débouchent sur le web.

      Sandburg @sandburg CC BY-SA
    • @cy_altern
      cy_altern @cy_altern CC BY-SA 7/02/2023

      #saferules #design_system #webdesign

      cy_altern @cy_altern CC BY-SA
    Écrire un commentaire
  • @olange
    Olivier Lange @olange CC BY-SA 1/12/2021

    SafeGraph — Places Data for Software and Technology Teams
    ▻https://www.safegraph.com/careers

    #api #webdesign #inspiration

    Olivier Lange @olange CC BY-SA
    Écrire un commentaire
  • @tofulm
    tofulm @tofulm 13/03/2021
    13
    @cy_altern
    @jeanmarie
    @rastapopoulos
    @grego
    @ericw
    @arno
    @bouts
    @unagi
    @gblin
    @baroug
    @lianes1
    @marcimat
    @b_b
    13

    Iconduck - Free open source icons, illustrations and graphics
    ▻https://iconduck.com
    #icone #svg

    tofulm @tofulm
    • @jeanmarie
      jeanmarie @jeanmarie CC BY-NC-SA 31/03/2021
      @monolecte @b_b @cy_altern @rastapopoulos

      Y a pas mal de ressources partagées ici, si on les recensait ? :)

      ►https://orioniconlibrary.com
      ►https://www.flaticon.com
      ►https://flaticons.net par
      ►https://icons.pixsellz.io
      ►https://icongr.am
      ►https://remixicon.com
      ►https://www.svgrepo.com
      ►https://danklammer.com/bytesize-icons

      (par @monolecte, @b_b, @cy_altern, @rastapopoulos)

      #Icons #ressource_graphique #webdesign #pictos #graphisme #ergonomie #web #intégration #interface

      jeanmarie @jeanmarie CC BY-NC-SA
    • @tofulm
      tofulm @tofulm 31/03/2021

      ►https://thenounproject.com

      tofulm @tofulm
    • @touti
      vide @touti 31/03/2021

      ►https://icomoon.io

      vide @touti
    • @cocoadaemon
      alban @cocoadaemon 31/03/2021

      ►https://unsplash.com

      alban @cocoadaemon
    • @bouts
      bouts @bouts PUBLIC DOMAIN 1/04/2021

      ►https://undraw.co

      unDraw - Open source illustrations for any idea
      The design project with open-source illustrations for any idea you can imagine and create. Create beautiful websites, products and applications with your color, for free.

      bouts @bouts PUBLIC DOMAIN
    • @jeanmarie
      jeanmarie @jeanmarie CC BY-NC-SA 1/04/2021

      Dans mon idée, on partait plus sur les icônes ici pour s’y retrouver et les outils dans d’autres fils :) et avec un #Ressources_graphisme ou #Ressources_integration pour tout lier.
      Mais à voir.

      jeanmarie @jeanmarie CC BY-NC-SA
    • @jeanmarie
      jeanmarie @jeanmarie CC BY-NC-SA 13/04/2021

      des nouveaux
      – ▻https://feathericons.com
      – ▻https://github.com/primer/octicons
      – ▻https://fonts.google.com/icons?selected=Material+Icons
      – ▻https://icons.coreui.io/icons
      – ▻https://github.com/danklammer/bytesize-icons
      – ▻https://useiconic.com/open
      – ▻https://forkaweso.me/Fork-Awesome/icons

      Source + avis : ▻https://core.spip.net/issues/4727

      How to Design Better Icons
      ▻https://blog.prototypr.io/how-to-design-better-icons-869d067fddbf

      jeanmarie @jeanmarie CC BY-NC-SA
    • @jeanmarie
      jeanmarie @jeanmarie CC BY-NC-SA 1/02/2022

      ▻https://icones.js.org

      jeanmarie @jeanmarie CC BY-NC-SA
    • @jeanmarie
      jeanmarie @jeanmarie CC BY-NC-SA 18/01/2023
      @cy_altern

      ►https://www.mingcute.com par @cy_altern

      jeanmarie @jeanmarie CC BY-NC-SA
    Écrire un commentaire
  • @monolecte
    Monolecte 😷🤬 @monolecte CC BY-NC-SA 24/06/2020
    1
    @baroug
    1

    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

    Monolecte 😷🤬 @monolecte CC BY-NC-SA
    Écrire un commentaire
  • @jeanmarie
    jeanmarie @jeanmarie CC BY-NC-SA 22/01/2020

    The CSS Cascade
    Or, How browsers resolve competing #CSS styles

    We style our websites using CSS, which stands for Cascading Style Sheets.
    But what does Cascading really mean?

    ▻https://wattenberger.com/blog/css-cascade

    https://pbs.twimg.com/tweet_video_thumb/EOzouwSWkAAiVlt.jpg

    #webdesign

    jeanmarie @jeanmarie CC BY-NC-SA
    Écrire un commentaire
  • @monolecte
    Monolecte 😷🤬 @monolecte CC BY-NC-SA 8/11/2019

    ITCSS: Scalable and Maintainable #CSS Architecture - Xfive
    ▻https://www.xfive.co/blog/itcss-scalable-maintainable-css-architecture

    https://www.xfive.co/wp-content/uploads/2016/02/itcss2.jpg

    ITCSS stands for Inverted Triangle CSS and it helps you to organize your project CSS files in such a way that you can better deal with (not always easy-to-deal with) CSS specifics like global namespace, cascade and selectors specificity.

    ITCSS can be used with preprocessors or without them and is compatible with CSS methodologies like BEM, SMACSS or OOCSS.

    One of the key principles of ITCSS is that it separates your CSS codebase to several sections (called layers), which take the form of the inverted triangle

    #webdesign #CSS

    Monolecte 😷🤬 @monolecte CC BY-NC-SA
    Écrire un commentaire
  • @monolecte
    Monolecte 😷🤬 @monolecte CC BY-NC-SA 4/10/2019
    2
    @ericw
    @rastapopoulos
    2

    Tufte CSS
    https://edwardtufte.github.io/tufte-css

    Tufte #CSS provides tools to style web articles using the ideas demonstrated by Edward Tufte’s books and handouts. Tufte’s style is known for its simplicity, extensive use of sidenotes, tight integration of graphics with text, and carefully chosen typography.

    Tufte CSS was created by Dave Liepmann and is now an Edward Tufte project. The original idea was cribbed from Tufte-LaTeX and R Markdown’s Tufte Handout format. We give hearty thanks to all the people who have contributed to those projects.

    If you see anything that Tufte CSS could improve, we welcome your contribution in the form of an issue or pull request on the GitHub project: tufte-css. Please note the contribution guidelines.

    Finally, a reminder about the goal of this project. The web is not print. Webpages are not books. Therefore, the goal of Tufte CSS is not to say “websites should look like this interpretation of Tufte’s books” but rather “here are some techniques Tufte developed that we’ve found useful in print; maybe you can find a way to make them useful on the web”. Tufte CSS is merely a sketch of one way to implement this particular set of ideas. It should be a starting point, not a design goal, because any project should present their information as best suits their particular circumstances.

    #webdesign #typographie

    Monolecte 😷🤬 @monolecte CC BY-NC-SA
    Écrire un commentaire
  • @aris
    aris  @aris CC BY-SA 20/03/2019

    Gnome : le poids des icônes — aris
    ▻https://aris.papatheodorou.net/gnome-le-poids-des-icones

    https://i.snap.as/SJU7Rbr.jpg

    Gnome, l’environnement graphique pour systèmes GNU/Linux, viens de sortir une nouvelle version (3.32) comportant d’importantes améliorations au niveau des performances comme de l’ergonomie. Au passage, un nouveau set d’icônes fait son apparition…

    Jakub Steiner, salarié de Red Hat et membre de l’équipe de design pour Gnome, avait expliqué en janvier 2019 sur son blog personnel les raisons d’un changement global du design des icônes de l’environnement de bureau, qui n’avait pratiquement pas évolué depuis une quinzaine d’années

    #gnulinux #gnome #opensource #libre #interfaces #webdesign #icônes

    aris  @aris CC BY-SA
    Écrire un commentaire
  • @hlc
    Articles repérés par Hervé Le Crosnier @hlc CC BY 10/12/2018
    6
    @rastapopoulos
    @mukt
    @spip
    @severo
    @suske
    @cy_altern
    6

    Paged.js – Paged Media
    ▻https://www.pagedmedia.org/paged-js

    aged.js is an open-source library to paginate content in the browser. Based on the W3C specifications, it’s a sort of polyfill for Paged Media and Generated Content for Paged Media CSS modules. The development was launch as an open-source community driven initiative of it’s still experimental. The core team behind paged.js includes Adam Hyde, Julie Blanc, Fred Chasen & Julien Taquet.

    #Javascript #CSS #Webdesign

    Articles repérés par Hervé Le Crosnier @hlc CC BY
    • @rastapopoulos
      RastaPopoulos @rastapopoulos CC BY-NC 10/12/2018

      Très intéressant, nous qui essayons de rédiger et générer nos documents papiers longs (cahier des charges, documentation finale, etc) depuis SPIP… Enfin « essayons », non, on y arrive assez bien maintenant, mais toujours avec PrinceXML qui n’est pas libre. Et on reteste Weasy (libre python) régulièrement car il évolue bien.
      ►https://seenthis.net/messages/734575

      À suivre de prêt, cette initiative…

      « Supported by Shuttleworth fundation »

      #impression #print #intégration #html

      RastaPopoulos @rastapopoulos CC BY-NC
    • @fil
      Fil @fil 10/12/2018

      Adam Hyde de booksprint, super !

      Fil @fil
    • @rastapopoulos
      RastaPopoulos @rastapopoulos CC BY-NC 18/11/2020

      Le site est deprecated et maintenant il faut aller sur :
      ▻https://www.pagedjs.org

      RastaPopoulos @rastapopoulos CC BY-NC
    Écrire un commentaire
  • @monolecte
    Monolecte 😷🤬 @monolecte CC BY-NC-SA 13/06/2018

    Quand tu visites le #site #web d’un confrère qui a décidé d’ignorer les règles élémentaires d’ #accessibilité #accessibility #Webdesign

    https://framapiaf.org/system/media_attachments/files/000/918/032/original/59d0aa119e65abc3.jpg

    Monolecte 😷🤬 @monolecte CC BY-NC-SA
    Écrire un commentaire
  • @mist_
    Mist. GraphX @mist_ 3/05/2018
    3
    @rastapopoulos
    @mukt
    @cy_altern
    3

    Priority Guides : A Content-First Alternative to Wireframes · An A List Apart Article
    ►http://alistapart.com/article/priority-guides-a-content-first-alternative-to-wireframes

    http://alistapart.com/d/priority-guides.jpg

    #wireframes#webdesign#prototyping#methodology

    Mist. GraphX @mist_
    • @rastapopoulos
      RastaPopoulos @rastapopoulos CC BY-NC 5/05/2018

      C’est intéressant même si je ne suis pas d’accord avec le démarrage de sa réflexion sur le faire qu’un wireframe c’est forcément un dessin statique (et donc dans son argumentation pas responsive etc).

      Du coup c’est déjà un peu ce qu’on fait, puisqu’on commence par mettre des blocs de contenu (faux ou plus précis suivant ce qu’on connait comme détails à ce moment) dans du HTML. Puis on style ce HTML en bloc que l’on place petit à petit. On pourrait aller plus loin et vraiment commencer par TOUT mettre en détail et faire valider cette liste de choses à placer dans un ordre de priorité, puis le styler une fois que c’est validé seulement.

      Mais du coup ses documents de priorités il continue de les faire en pixels, alors qu’on peut parfaitement les faire en HTML directement (et donc au départ c’est mobile first tant qu’on n’a rien stylé oui mais on PEUT les styler ensuite, ce qui n’est pas possible avec un truc statique).

      Bref, ça va dans le bon sens, mais je pense qu’il faut continuer à améliorer dans la voix de partir directement sur le HTML, jamais depuis un outil statique : aussi puissant qu’ils peuvent être (sketch etc), je trouve que c’est obsolète, des outils du passé, pour la majorité des cas.

      #conception #web #prototype #design #maquette #méthodologie #bonnes_pratiques

      RastaPopoulos @rastapopoulos CC BY-NC
    • @mist_
      Mist. GraphX @mist_ 6/05/2018

      Alors je suis tout à fait d’accord, je viens encore d’en faire les frais ^^ Les outils comme sketch ou autre enferme dans une reflexion « pixel perfect » qui effectivement viens du print ou tout du moins tendrait a y ressembler.

      Le problème c’est aussi les gens qui utilisent le logiciel. Je retrouve les mêmes erreurs de conception de document, identiques a quand je faisais de la production et que j’executais les doc des directeurs artistique (ex 30 couleurs aucune dans le même format).

      On récolte donc des protos, conçues par des gens qui n’on jamais intégré ou conscience du markup, ni des implications de leurs choix graphiques.

      En exemple le plus courrant, des titres qui change de place suivant le mode mobile, mais change de bloc container : on se retrouve a dupliquer le code, a masquer en aria-hidden pour pas que les lecteurs vocaux double… bref moi j’aime pas et généralement on peut faire sans …

      Ce sont des méthodes ou type de réflexion, qui vont a l’encontre du progressive enhancement, et du mobile first.

      La en tout cas ce concept est intéressant car on pense la page en fonction du contenu réel : ce qui est totalement l’inverse des méthodes les plus couramment employées, encore largement tirés du print, sauf que l’ont à enlevé des étapes comme le calibrage ^^, et que maintenant on nous envoie le contenu quand le travail est fini, on marche à l’envers.

      Il y’a quelques années, j’avais été intéressé, par un projet Project Hub lancé par Brad Frost (Atomic Design methodology) : ▻https://github.com/bradfrost/project-hub. En fait l’idée est de constatent garder le fil avec le client en le poussant a participer (genre Agile) . Je pense que l’implication, le suivi, le déroulement devrait faire partie d’un seul outil ou chaque intervenant à accès aux infos, a la timeline, des notifications rappels, guideline, …

      Dans un outil qui gérerait l’ensemble de la progression, l’exemple cité dans l’article peut effectivement permettre au SEO, marketeux de faire leur sauce en parallèle de l’intégrateur, sans interférer avec la partie purement dev.
      Je pense que réfléchir parallèlement ainsi pourrait éviter pas mal de problème pour ceux qui sont en fin de chaine, et surtout amener à se poser les bonnes questions sans penser QUE cosmétique mais contenu. Certainement un gain de temps aussi quand on travaille a plusieurs intervenants, …

      Mist. GraphX @mist_
    Écrire un commentaire
  • @mist_
    Mist. GraphX @mist_ 10/04/2018
    6
    @renyonparis
    @rastapopoulos
    @mukt
    @baroug
    @gblin
    @typo
    6

    Design Better Forms – UX Collective
    ▻https://uxdesign.cc/design-better-forms-96fadca0f49c

    https://cdn-images-1.medium.com/max/1200/1*VvQeOFsY57NJxtZmKyRnHA.jpeg

    form. Be conversational. Be funny. Gradually engage. Do the unexpected. It is the role of the designer to express their company’s brand to elicit an emotional reaction. If done correctly, it will increase completion rates. Just make sure you don’t violate the rules listed above.

    Voila une belle liste des erreurs que nous pousse a faire nos clients, et marketeux qui savent mieux que nous organiser une page agréable et raisonné ;-) . Perso on me les as déjà toutes faites quasiement et comme un lache de tâchon j’ai éxécuté … les ordres (appelé recommandations dans le monde du travail …)

    #css#UX#forms#webdesign

    Mist. GraphX @mist_
    • @rastapopoulos
      RastaPopoulos @rastapopoulos CC BY-NC 10/04/2018

      #conception #web #ergonomie #interface #formulaires

      RastaPopoulos @rastapopoulos CC BY-NC
    Écrire un commentaire
  • @mist_
    Mist. GraphX @mist_ 12/03/2018

    Responsive Components: a Solution to the Container Queries Problem — Philip Walton
    ▻https://philipwalton.com/articles/responsive-components-a-solution-to-the-container-queries-problem

    This article describes a strategy for using modern web technologies to build responsive components: DOM elements that can update their style and layout in response to changes in the size of their container.

    #css#webdesign#container-queries#responsive

    Mist. GraphX @mist_
    • @rastapopoulos
      RastaPopoulos @rastapopoulos CC BY-NC 12/03/2018

      Mouais pas aussi cool que ce que je pensais à la base.

      Ça oblige à définir des breakpoints dans le JS en plus en doublon. Et ça oblige aussi à mettre dans le HTML lui-même les éléments qu’on veut observer pour leur rajouter des classes suivant les breakpoints. Du coup impossible de changer de thème sans changer le HTML (chose que l’on cherche à éviter au maximum).

      RastaPopoulos @rastapopoulos CC BY-NC
    • @mist_
      Mist. GraphX @mist_ 13/03/2018

      En fait c’est une version/vision du problème…

      ça fait quelques temps que je suis ce sujet et y’a pas mal de tendances, celle ci est un exemple… certainement que ça sent plus les habitudes de quelqu’un qui fait des applis mobiles et bosse avec React, du coup le html est plus marqué de toute façon…

      Dans les autres tendances et stratégies sur le meme sujet :

      Elements queries :

      ►https://elementqueries.com

      Le draft de la spec proposée :

      ▻https://tomhodgins.github.io/element-queries-spec/element-queries.html

      Un petit tour d’horizon du sujet et de la problématique :

      ▻https://www.sitepoint.com/responsive-css-patterns-without-media-queries

      Un polifyll, intérressant (regarder le src/resizeSensor.js) car a la différence de l’autre on utilise css

      ▻https://github.com/marcj/css-element-queries

      Après synchroniser le js et le css … c’est un peut pour ça que j’ai regardé pour l’insertion des variables dans scss.php, après ne pas y avoir touché depuis 5ans ^^ c’est carrément le but…

      Mist. GraphX @mist_
    Écrire un commentaire
  • @b_b
    b_b @b_b PUBLIC DOMAIN 21/02/2018
    4
    @mist_
    @spip
    @jeanmarie
    @oletrouher
    4

    Timeline Me

    TimelineMe - ​▻http://mickaelr.github.io/jquery-timelineMe - est un plugin jquery qui permet d’afficher des informations sur une ligne de temps.

    ▻https://contrib.spip.net/Timeline-Me

    #spip_blog

    b_b @b_b PUBLIC DOMAIN
    • @mist_
      Mist. GraphX @mist_ 21/02/2018

      Dans le même genre, j’avais fait celui la l’année dernière quand j’ai refait mon cv ^^

      ▻https://github.com/mistergraphx/vertical-timeline

      #timeline#integration#webdesign

      Mist. GraphX @mist_
    • @mist_
      Mist. GraphX @mist_ 21/02/2018

      et le plug spip est ici ▻https://github.com/mistergraphx/spip_vtimeline

      Mist. GraphX @mist_
    • @b_b
      b_b @b_b PUBLIC DOMAIN 21/02/2018
      @mist_

      @mist_ merci pour l’info, je me ferai un plaisir de le citer dans la gazette dès qu’une doc sera dispo :)

      Un truc non documenté n’existe pas

      (ou uniquement pour son auteur ^^).

      b_b @b_b PUBLIC DOMAIN
    • @mist_
      Mist. GraphX @mist_ 21/02/2018

      +1 => les styles le sont

      Mist. GraphX @mist_
    Écrire un commentaire
  • @mist_
    Mist. GraphX @mist_ 20/02/2018
    1
    @tofulm
    1

    CSS Grid for UI Layouts – Mozilla Hacks – the Web developer blog
    ▻https://hacks.mozilla.org/2018/02/css-grid-for-ui-layouts

    https://hacks.mozilla.org/files/2018/02/hacksscreenshot-2_1c.jpg

    The fundamental problem with Flexbox is that it is one dimensional. This makes Flexbox great for one dimensional uses, like toolbars and navbars, but it begins to fail when I need to align content both horizontally and vertically at the same time. Instead I need real two dimensional layout, which is why I need CSS Grid. Fundamentally Grid is 2D.

    #grid #flexbox #css #webdesign

    Mist. GraphX @mist_
    • @rastapopoulos
      RastaPopoulos @rastapopoulos CC BY-NC 20/02/2018

      À la fin il donne le lien vers une super chaine pédago de Jen Simmons
      ▻https://seenthis.net/messages/670758

      RastaPopoulos @rastapopoulos CC BY-NC
    • @mist_
      Mist. GraphX @mist_ 21/02/2018

      j’ai eut ça dans la news « css layout news » (du site du même nom), très bien fait cet article y’avait aussi un post de Jen Simmons « Whitespace on The Web ! — with CSS Grid »… c’est pas toujours le cas mais la y’avait des choses vraiment intéressantes.

      Mist. GraphX @mist_
    Écrire un commentaire
  • @fil
    Fil @fil 16/12/2017
    17
    @rezo
    @rastapopoulos
    @vazi
    @philippe_de_jonckheere
    @cela
    @grommeleur
    @mona
    @7h36
    @typo
    @soseen
    @mad_meg
    @alexcorp
    @monolecte
    @thibnton
    @baroug
    @gastlag
    @davduf
    17

    Millennials Are Screwed
    ▻http://highline.huffingtonpost.com/articles/en/poor-millennials

    http://highline.huffingtonpost.com/articles/en/poor-millennials/media/images/Avo_facebook.png

    #amazing #mise_en_page #scrollytelling #jeunesse #dette #WTF #Etats-Unis #travail #Uber

    Fil @fil
    • @rastapopoulos
      RastaPopoulos @rastapopoulos CC BY-NC 16/12/2017

      Il me semble qu’on avait un tag pour ça genre #art_directed_articles mais ya qu’un seen donc ça devait être autre chose

      RastaPopoulos @rastapopoulos CC BY-NC
    • @vazi
      vazy @vazi CC BY 17/12/2017

      #screen_design en référence au #graphic_design de l’imprimerie.

      vazy @vazi CC BY
    • @soseen
      soseen @soseen PUBLIC DOMAIN 18/12/2017

      #webdesign #pixel #onepage

      soseen @soseen PUBLIC DOMAIN
    • @thibnton
      tbn @thibnton PUBLIC DOMAIN 18/12/2017
      @rastapopoulos @baroug

      C’est parce que y a pas de « s » au tag @rastapopoulos (c’est juste @baroug qui a voulu faire son intéressant)

      tbn @thibnton PUBLIC DOMAIN
    • @baroug
      baroug @baroug 18/12/2017

      La rigueur ne nuit pas

      baroug @baroug
    • @davduf
      Davduf @davduf CC BY-NC-SA 4/03/2018

      #Long_Form #Nouvelles_narrations

      Davduf @davduf CC BY-NC-SA
    Écrire un commentaire
  • @davduf
    Davduf @davduf CC BY-NC-SA 23/11/2017
    5
    @mukt
    @kent1
    @suske
    @spip
    @ari
    5

    28 CSS Magazine Layouts | Free Frontend
    ▻http://freefrontend.com/css-magazine-layouts

    http://freefrontend.com/freefrontend.png

    Collection of HTML and CSS magazine layouts. Demo and download code (*zip).

    Le jour où j’aurais le temps... j’en ferais bien mon p’tit #Spip !

    Davduf @davduf CC BY-NC-SA
    • @mukt
      mukt @mukt CC BY 23/11/2017

      #web #intégration #CSS #presse #magazine #graphisme

      mukt @mukt CC BY
    • @monolecte
      Monolecte 😷🤬 @monolecte CC BY-NC-SA 23/11/2017

      #webdesign

      Monolecte 😷🤬 @monolecte CC BY-NC-SA
    • @suske
      Suske @suske 23/11/2017

      Toujours en recherche ?

      Suske @suske
    • @davduf
      Davduf @davduf CC BY-NC-SA 23/11/2017

      Toujours :-) J’aimerais vraiment changer le design de mon site... :-)

      Davduf @davduf CC BY-NC-SA
    • @b_b
      b_b @b_b PUBLIC DOMAIN 23/11/2017
      @davduf

      @davduf comme chaque année ? ^^

      /me va se cacher avant que @davduf arrive sur IRC

      b_b @b_b PUBLIC DOMAIN
    • @davduf
      Davduf @davduf CC BY-NC-SA 23/11/2017
      @b_b

      comme tous les 2 ans, cher ami :-))) @b_b :-)

      Davduf @davduf CC BY-NC-SA
    • @davduf
      Davduf @davduf CC BY-NC-SA 24/11/2017
      @b_b @suske

      Bon les amis... vous savez où je pourrais trouver un peu d’aide ? Ce serait chouette :-) @b_b @suske

      Davduf @davduf CC BY-NC-SA
    • @b_b
      b_b @b_b PUBLIC DOMAIN 24/11/2017

      Je connais un chan IRC plutôt sympa...

      b_b @b_b PUBLIC DOMAIN
    • @davduf
      Davduf @davduf CC BY-NC-SA 24/11/2017

      Hi hi :-) Mais j’ai tellement l’impression d’y être un boulet :-)

      Davduf @davduf CC BY-NC-SA
    • @l_l_de_mars
      L.L. de Mars @l_l_de_mars ART LIBRE 25/11/2017

      moi je veux bien t’aider, mais j’ai une pratique tellement old school (tout est en HTML dans le Terrier) que je ne suis pas certain d’être très utile. Je peux faire des maquettes si on en cause (que tu me dis ce que tu veux) et confier la mise en forme css à un gars qui sait faire ce genre de trucs.

      L.L. de Mars @l_l_de_mars ART LIBRE
    • @davduf
      Davduf @davduf CC BY-NC-SA 25/11/2017

      C’est adorable mais ce que je cherche c’est intégrer du SPIP dans un template HTML/CSS... :-)
      Merci encore !

      Davduf @davduf CC BY-NC-SA
    • @monolecte
      Monolecte 😷🤬 @monolecte CC BY-NC-SA 25/11/2017

      Tu veux un nouveau squelette plus « responsive », en gros ?

      Monolecte 😷🤬 @monolecte CC BY-NC-SA
    • @davduf
      Davduf @davduf CC BY-NC-SA 25/11/2017

      Oui, plus responsive, TRES typographique, plus fou que l’actuel que j’utilise...

      Des choses comme
      ▻https://codepen.io/julesforrest/full/xLBbVb
      ▻https://codepen.io/julesforrest/full/yowMPw
      ou mieux encore ▻http://www.mrmarcelschool.com

      Avec de beaux titres puisés ici
      ▻http://tobiasahlin.com/moving-letters

      Mais j’avoue que je suis resté bloqué en 2004 avec mes boucles... je suis totalement dépassé par les SPIP 2, 3, etc :-)

      Davduf @davduf CC BY-NC-SA
    • @monolecte
      Monolecte 😷🤬 @monolecte CC BY-NC-SA 25/11/2017

      Bah, t’es déjà sous SPIP 3.2. Donc, c’est du squelette, surtout du squelette et beaucoup de CSS (on veut des grilles, hein !).
      Tu es pressé ? C’est toi qui a tout fait sur ton site ?

      Monolecte 😷🤬 @monolecte CC BY-NC-SA
    • @rastapopoulos
      RastaPopoulos @rastapopoulos CC BY-NC 25/11/2017

      La dernière version on y avait un peu tous touché :p

      Mais c’est pas « plus responsive », la version actuelle est déjà responsive (à part les commentaires, qui sont pas glop en petit). C’est changer l’ambiance graphique quoi (comme régulièrement) :)

      RastaPopoulos @rastapopoulos CC BY-NC
    • @davduf
      Davduf @davduf CC BY-NC-SA 25/11/2017
      @rastapopoulos

      @rastapopoulos , il a tout vrai :-) Beaucoup de gens m’ont aidé ---- comme toujours :-)

      Là, j’aimerais bien refaire un squelette qu’on partagerait ensuite, comme feu ▻https://contrib.spip.net/TypoManiac :-)

      En fait, je suis largué entre les Z, les Thèmes, les squelettes, les plugins Framework (boostrap et Foundation)...

      Non, pas pressé mais un peu de temps d’ici le 20 décembre, alors j’aimerais en profiter un peu... :-)

      Davduf @davduf CC BY-NC-SA
    • @suske
      Suske @suske 26/11/2017
      @davduf

      Cool comment on critique la responsivité des forums alors que j’y ai passé des heures (sans grand résultat) :-p
      J’en fait encore moins à présent @davduf, du coup je crains que cette fois je reste hors du chantier. #gogogo

      Suske @suske
    • @suske
      Suske @suske 26/11/2017

      Et #bises_à_tou-te-s !

      Suske @suske
    • @davduf
      Davduf @davduf CC BY-NC-SA 26/11/2017

      Tes forums sont comme toi : tout parfait ! :-)
      Merci l’ami !

      Davduf @davduf CC BY-NC-SA
    • @davduf
      Davduf @davduf CC BY-NC-SA 6/12/2017

      Si vous avez deux minutes les amis :-)
      ▻https://forum.spip.net/fr_268641.html?debut_forums=%40268645#forum268645

      Davduf @davduf CC BY-NC-SA
    • @monolecte
      Monolecte 😷🤬 @monolecte CC BY-NC-SA 6/12/2017

      On ne peut pas avoir l’inverse : avoir une image en N&B qui passe en couleur quand on la survole ?

      Monolecte 😷🤬 @monolecte CC BY-NC-SA
    • @rastapopoulos
      RastaPopoulos @rastapopoulos CC BY-NC 6/12/2017

      Bah si mais en CSS, si tu produis par les filtres de SPIP une image de telle ou telle sorte, elle est comme elle est, tu peux plus la changer. C’est en CSS qu’il faut la passer en noir et blanc, et la remettre normal en hover.

      RastaPopoulos @rastapopoulos CC BY-NC
    • @davduf
      Davduf @davduf CC BY-NC-SA 6/12/2017

      Hum... trop complexe pour moi :-)

      Davduf @davduf CC BY-NC-SA
    • @davduf
      Davduf @davduf CC BY-NC-SA 7/12/2017

      Chers amis... J’avance bien (sommaire et article) mais je m’arrache les cheveux sur les css responsive...

      ▻http://lab.davduf.net

      Le titre des mes articles dépassent largement en version mobile...

      Au secours :-)

      Davduf @davduf CC BY-NC-SA
    • @rastapopoulos
      RastaPopoulos @rastapopoulos CC BY-NC 7/12/2017

      Apparemment tu réutilises le javascript qui change la taille d’un texte pour qu’il rentre dans une largeur, comme dans ton précédent thème d’avant. Mais il semblerait qu’il merde une fois sur deux à trouver la bonne taille en petit écran. Quand je charge ça marche pas et quand je joue ensuite avec la taille de la fenêtre ça finit par retaille le texte comme il faut au bout d’un moment. Mais bon ça fait un truc super en hauteur. Ça serait sûrement mieux de ne pas l’activer en petit écran et d’écrire plus petit.

      RastaPopoulos @rastapopoulos CC BY-NC
    • @davduf
      Davduf @davduf CC BY-NC-SA 7/12/2017

      Tu as raison, j’ai repris ▻https://github.com/freqDec/slabText que j’adore...

      Mais j’ai l’impression qu’avant le titre, le probleme est d’abord le « bloc » (cadre) dans lequel ce titre s’inscrit.... J’ai du mettre trop de padding, machin :-)

      Pour reprendre ton idée, comment « interdire » cette utilisation du JQuery sur les téléphones ?

      Ma feuille de style est ici
      www.davduf.net/lab/squelettes/css/perso.css

      Mille mercis :-)

      Davduf @davduf CC BY-NC-SA
    • @davduf
      Davduf @davduf CC BY-NC-SA 7/12/2017

      Pour ne pas encombrer SeenThis, j’ai ouvert ceci :-)
      ▻https://forum.spip.net/fr_268680.html

      Au secours :-)

      Davduf @davduf CC BY-NC-SA
    Écrire un commentaire
  • @monolecte
    Monolecte 😷🤬 @monolecte CC BY-NC-SA 19/11/2017
    1
    @hassan_nya
    1

    Auto-héberger les polices #Google Fonts sur #WordPress | Angristan
    ▻https://angristan.fr/auto-heberger-polices-google-fonts-wordpress

    https://angristan.fr/wp-content/uploads/2017/11/no-google-fonts.jpg

    Mais c’est surtout l’aspect vie privée, qu’il est difficile de ne pas évoquer dès que l’on touche à un service Google, puisque chaque visiteur va devoir télécharger quelques fichiers depuis les serveurs de Google. Et donc on a presque un service similaire : avec votre adresse IP et votre user-agent, Google va pouvoir vous suivre sur tous les sites qui utilisent Google Fonts et donc exploiter ces donnée à des fins commerciales par exemple. Bref ça pue, ça apporte pas grand chose, alors ça dégage.

    Je vous invite donc à éviter ce genre de CDN, et à lire cet article de Pepper & Carrot : « My fight against CDN libraries » .

    #webdesign

    • #Google
    Monolecte 😷🤬 @monolecte CC BY-NC-SA
    • @0gust1
      0gust1 @0gust1 CC BY-NC 19/11/2017

      mmmh. (désolé, j’ai validé mon message par erreur, et entretemps, un ami est arrivé à la maison :) )

      Ça peut éventuellement suffire pour un usage commun. De façon plus pointue, il faut se méfier : les fichiers hébergés sur le service de google sont optimisés en fonction du système d’exploitation et du navigateur de l’utilisateur (ainsi, pour une fonte donnée, il maintiennent jusqu’à plusieurs dizaines de variantes en fonction du couple OS/nav).

      Donc, télécharger la fonte (woff2, woff, etc...) fournie par le service peut ne donner que celle optimisée pour la plate-forme courante, et donc donner des rendus moyens pour les utilisateurs qui n’ont pas le même système d’exploitation que vous.

      0gust1 @0gust1 CC BY-NC
    • @monolecte
      Monolecte 😷🤬 @monolecte CC BY-NC-SA 19/11/2017

      Tu peux être plus explicite ?

      Monolecte 😷🤬 @monolecte CC BY-NC-SA
    • @0gust1
      0gust1 @0gust1 CC BY-NC 19/11/2017

      Ce comportement du service de google n’est quasiment pas documenté, mais c’est une réalité (j’ai dû creuser ce sujet pour le boulot).

      ▻https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/webfont-optimization#reduire_la_taille_de_police_avec_la_compress

      Par exemple, Google Fonts possède plus de 30 variantes optimisées pour chaque police, et détecte et fournit automatiquement la variante optimale pour chaque plateforme et navigateur.

      0gust1 @0gust1 CC BY-NC
    Écrire un commentaire
  • @hlc
    Articles repérés par Hervé Le Crosnier @hlc CC BY 3/10/2017

    Text-only news sites are slowly making a comeback. Here’s why. | Poynter
    ►https://www.poynter.org/news/text-only-news-sites-are-slowly-making-comeback-heres-why
    ▻https://www.poynter.org/sites/default/files/2017-09/Text+sites.png

    These text-only sites — which used to be more popular in the early days of the Internet, when networks were slower and bandwidth was at a premium – are incredibly useful, and not just during natural disasters. They load much faster, don’t contain any pop-ups or ads or autoplay videos, and help people with low bandwidth or limited Internet access. They’re also beneficial for people with visual impairments who use screen readers to navigate the Internet. (Related: Designing Journalism Products for Accessibility.)

    In recent months, Twitter, Facebook, and Google News have also published their own versions of stripped-down sites that use less bandwidth, mainly aimed at users in emerging markets who might not have access to faster network connections. Earlier this week, Twitter announced that it was now experimenting with an Android app designed to use less data for people with limited connectivity.

    #Webdesign #Accessibilité

    Articles repérés par Hervé Le Crosnier @hlc CC BY
    Écrire un commentaire
  • @monolecte
    Monolecte 😷🤬 @monolecte CC BY-NC-SA 7/09/2017
    10
    @bce_106_6
    @hassan_nya
    @val_k
    @simplicissimus
    @02myseenthis01
    @7h36
    @arnoferrat
    @rastapopoulos
    @mukt
    @nicod_
    10

    la cuisine du graphiste : Quelles #typo iraient bien ensemble ?
    ▻http://www.lacuisinedugraphiste.net/2017/09/quelles-typo-iraient-bien-ensemble.html

    https://4.bp.blogspot.com/-SElptH1IxlI/WbDzKLvjuXI/AAAAAAAAjPI/tZ0JckBNQsU_aBoEItboM-wxTpF6oHOjgCLcBGAs/w1200-h630-p-k-no-nu/archetype.png

    Le site est très complet et il permet de travailler les approches, les interlignages etc pour avoir une vision la plus fidèle possible de ce que l’on désire.
    À noter que c’est conçu pour les travaux digitaux. Les corps sont en pixels, les styles sont en CSS…

    #webdesign

    Monolecte 😷🤬 @monolecte CC BY-NC-SA
    • @rastapopoulos
      RastaPopoulos @rastapopoulos CC BY-NC 7/09/2017

      ►http://typecast.com est bien et a l’air plus complet et plus simple je crois (et pas que en pixels, on peut vraiment tout mettre en « em » et télécharger les CSS produites à la fin etc)

      RastaPopoulos @rastapopoulos CC BY-NC
    • @arnoferrat
      Arnaud Ferrat @arnoferrat CC BY-NC-SA 8/09/2017

      C’est sûr que c’est top TypeCast mais ►http://www.archetypeapp.com est très bien comme outil de base (et on peut tout à fait travailler en em ou en %, exporter les CSS ou même les intégrer dans Sketch). Il ne nécessite pas de s’enregistrer, permet avec le ratio des tailles de typos de faire un prototypage rapide, propose une aide pour choisir une police.

      Arnaud Ferrat @arnoferrat CC BY-NC-SA
    • @rastapopoulos
      RastaPopoulos @rastapopoulos CC BY-NC 14/09/2017

      #conception #web #graphisme #typographie

      RastaPopoulos @rastapopoulos CC BY-NC
    Écrire un commentaire
  • @tetue
    tetue @tetue CC BY 9/08/2017
    5
    @biggrizzly
    @gastlag
    @02myseenthis01
    @rastapopoulos
    @cy_altern
    5

    Comment devenir ergonome UX ? - romy.tetue.net
    ▻http://romy.tetue.net/comment-devenir-ergonome-ux

    Vous êtes plusieur·e·s dernièrement à me demander comment devenir ergonome ou UX designer. Ces profils sont effectivement de plus en plus recherchés. Si ce n’est pas votre futur métier, ça peut être une corde de plus à ajouter à votre arc de dev front, de graphiste ou d’expert a11y.

    Sans prétendre avoir la bonne réponse et sans chipoter sur la dénomination (ergonome ou UX designer, osef), je peux au moins témoigner de ce qui m’a forgée, en partant du principe que si vous me posez la question, c’est que vous souhaitez vous orienter vers quelque chose qui ressemble à mon job actuel, c’est-à-dire l’UX design ou conception centrée utilisateur/trices.

    #metiers #ergonome #UXdesigner #WebDesign

    tetue @tetue CC BY
    Écrire un commentaire
  • @tetue
    tetue @tetue CC BY 7/08/2017
    13
    @rastapopoulos
    @_nka
    @cy_altern
    @mad_meg
    @kent1
    @7h36
    @tofulm
    @nicod_
    @ari
    @monolecte
    @02myseenthis01
    @contrastfinder
    @mukt
    13

    Les do-don’t de l’accessibilité - romy.tetue.net
    ▻http://romy.tetue.net/affiches-do-dont-accessibilite

    Cette série d’affiches aide à concevoir pour tou·te·s en expliquant ce qu’il faut faire et ne pas faire (do & don’t) pour chaque type de déficience. Ces conseils simples et compréhensibles, généraux plutôt que trop prescriptifs constituent une excellente entrée en matière. À afficher, sans modération, dans vos locaux !

    http://romy.tetue.net/IMG/jpg/do-dont-accessibilite.jpg

    Sources : ▻https://github.com/UKHomeOffice/posters/tree/master/accessibility

    #accessibilité #a11y #a11yDesign #designForAll #webdesign

    tetue @tetue CC BY
    • @philippe_de_jonckheere
      Philippe De Jonckheere @philippe_de_jonckheere CC BY 11/08/2017
      @tetue

      Chère @tetue , je profite que le sujet est ouvert : je voudrais pouvoir transmettre à mon éditeur, pour mon prochain roman, des recommandations pour qu’il soit plus facilement lisible pour les dyslexiques, c’est une sorte de promesse que j’ai faite à ma fille Adèle qui veut pouvoir lire le prochain. Existe-t-il une charte ? Et dans cette charte quelles sont les recommandations les plus importantes parce que je ne pourrais sans doute pas exiger toute la refonte de la maquette déjà existante.

      Cet été, la discussion est venue avec Adèle en cherchant dans mes livres d’adolescent dans la maison cévenole ceux des livres qu’Adèle trouvait les plus lisibles. La maquette des Folio des années septante par exemple n’était pas sans donner des problèmes tandis qu’un tout petit éditeur qui n’avait pas du beaucoup se donner de mal avait produit quelque chose d’assez parfait du point de vue d’Adèle.

      Par la suite, ayant lu de mon côté Rose-Ronce d’Eric Chevillard, l’ayant bien apprécié et me demandant si d’aventure ce ne serait pas du goût d’Adèle cette espèce d’actualisation d’ Alice au Pays des merveilles , j’ai eu à découvrir de la bouche d’Adèle que la maquette tellement sobre et belle des éditions de Minuit , c’était juste parfait, loué soit Garamond !

      Bref, si tu as quelques ressources sur ce sujet spécifique, je suis ton public captif.

      Amicalement

      Phil

      Philippe De Jonckheere @philippe_de_jonckheere CC BY
    • @tetue
      tetue @tetue CC BY 17/08/2017
      @philippe_de_jonckheere

      @philippe_de_jonckheere : pour en avoir discuté avec des enseignant·e·s, il y a autant de dyslexies, et donc de solutions, que de dyslexiques… Spour ça que l’approche est plutôt de laisser à chacun·e la possibilité d’adapter à ses besoins .

      Il n’y a pas de police recommandée pour les dyslexiques :
      ►http://romy.tetue.net/quelle-police-pour-les-dyslexiques

      Les seules recommandations visent à améliorer la lisibilité (marges, alignements, etc.) :
      ►http://romy.tetue.net/ameliorer-lisibilite-typographique

      Et laisser chacun·e adapter à ses besoins, via des plugins navigateurs, etc. ou cette webapp du CNED :
      ▻https://accessidys.org

      #dyslexie

      tetue @tetue CC BY
    • @philippe_de_jonckheere
      Philippe De Jonckheere @philippe_de_jonckheere CC BY 17/08/2017
      @tetue

      @tetue Mille mercis, je regarde. Dans le cas présent, il s’agirait d’un livre en papier et donc sans plugin. J’avais déjà noté les considérations typographiques (encore que je ne me résouds pas encore à Comic Sans, mais je remarque que le Garamond est généralement bien apprécié d’Adèle) et celles de la mise en page (notamment la justification qui ne serait pas top, j’aurais pourtant cru). Merci d’avoir pris le temps de répondre en tout cas.

      Philippe De Jonckheere @philippe_de_jonckheere CC BY
    Écrire un commentaire
0 | 25 | 50 | 75 | 100 | 125 | 150 | 175 | 200 | ... | 500

Thèmes liés

  • #interface
  • #design
  • #ergonomie
  • #graphisme
  • #web
  • #css
  • #css
  • #ux
  • #webdesign
  • #conception
  • #accessibilité
  • #styleguide
  • #typographie
  • #créativité
  • #css3
  • #typo
  • #responsive
  • #ui
  • #webdev
  • #usability
  • #inspiration
  • #intégration
  • #methodology
  • #site
  • technology: html
  • #presse
  • #forms
  • #bonnes_pratiques
  • #scroll
  • #ux
  • #contrainte
  • #responsive_web_design_rwd_
  • industryterm: web design
  • industryterm: web design rwd créativité
  • company: github
  • #magazine
  • #parisweb2014
  • #ui
  • #parisweb
  • #svg