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

 
  • #r
RSS: #responsive

#responsive

  • #responsive_email
  • #responsive_images
  • @baroug
    baroug @baroug 19/01/2018

    Avec Mosquito, on vient de livrer le site de la Fondation Custodia :
    ▻https://www.fondationcustodia.fr

    Comme d’habitude, c’est du #SPIP, #HTML5 #responsive et tout ça…

    Parmi les points à voir en particulier…

    – Un menu hamburger tout mignon.
    https://i.imgur.com/bNcdyNm.jpg

    – Des #longforms pour la présentation des expositions :
    ▻https://www.fondationcustodia.fr/Georges-Michel

    – Dans ces longforms, on peut présenter des collections d’œuvres avec mon raccourci <ligne>, qui présente les images sur une ou plusieurs lignes, en adaptant la taille des images pour occuper la largeur de l’écran :
    https://i.imgur.com/o4jIdNN.jpg

    – Ou avec mon raccourci <slide>, qui présente les documents les uns à côté des autres sur une ligne.
    ▻https://www.fondationcustodia.fr/Les-portraits-en-miniature-12
    https://i.imgur.com/FLoLf2r.jpg

    Pour rappel, « ligne » et « slide », c’est dans mon #plugin « Insertion avancée d’images », documenté ici :
    ▻http://www.paris-beyrouth.org/Plugin-SPIP-Insertion-avancee-d-images

    On trouvera même quelques habillages automatiques de formes irrégulières, toujours avec ce même plugin, et le raccourci <img|shape> :
    https://i.imgur.com/zGMFgeK.jpg
    C’est pas toujours évident à utiliser à bon escient, mais là ça donne un aspect « imprimé » particulièrement chic je trouve.

    – Dans les « formes longues », un problème usuel, c’est la navigation verticale « trop » longue, et donc l’utilisation d’une sorte de table des matières pour pouvoir naviguer rapidement. Mine de rien, c’est toujours assez problématique. Là j’ai développé une solution que je trouve bien sympathique, avec une table des matières en haut à gauche de l’écran, qui se plie/déplie, au fur et à mesure du scroll, et au survol, pour indiquer où on est et qui, évidemment, permet de naviguer au clic :
    https://i.imgur.com/g7h66dl.jpg

    Détail mignon : pour réaliser le graphisme de ce petit menu, il n’y a pas une seule image, c’est entièrement réalisé en CSS.

    – Il y a une maquette assez sympa pour la présentation des « Collections », avec des panneaux qui défilent horizontalement (et c’est responsive, la présentation change assez radicalement sur téléphone ou tablette) :
    ▻https://www.fondationcustodia.fr/les-portraits-en-miniature

    – Il y a aussi une présentation avec un « méga-zoom » sur les images, pour la présentation des œuvres des « Catalogues », mais comme le contenu n’est pas encore en ligne, alors je reposterai un message pour que tu ailles voir quand ce sera prêt.

    – Quand on clique sur la loupe de recherche, hop un grand pavé recouvre l’écran :
    https://i.imgur.com/FRMLXPy.jpg

    – Enfin, sur ce site, je me suis particulièrement astreint à ce que toutes les animations/interactions/transitions soient autant que possible réalisées sans Javascript. Du coup, on peut naviguer sur le site avec Javascript désactivé, avec un minimum de dégradations (essentiellement : des images responsive qui vont rester en basse définition). Mais le menu hamburger se déploie, avec ses sous-menus animés, comme si de rien n’était ; le système de « table des matières » des longforms fonctionne très bien, avec ses animations au survol, les sliders un peu partout fonctionnent de manière transparente… (et évidemment : des interactions « au doigt » moins riches sans Javascript).

    – Enfin la page d’accueil obtient un score de 100/100 sur mobile avec PageSpeed, et 97/100 sur ordinateur, c’est chouette.

    À l’intérieur du site, j’ai le plugin Saisies qui me fait chuter la moyenne sur quelques pages, en m’insérant violemment des appels à un fichier CSS et un fichier Javascript (ah, c’est vache !). :-))

    #shameless_autopromo

    ▻https://seenthis.net/messages/660728 via ARNO*

    baroug @baroug
    Écrire un commentaire

  • @7h37
    7h37 @7h37 12/02/2017
    1
    @baroug
    1

    Typographic Email

    This is a #responsive #email template that is optimized for readability. This is used in my project - EmailThis. I created it because I needed a simple, minimal yet beautiful email template that focusses specifically on readability.

    https://raw.githubusercontent.com/EmailThis/typographic-email/master/screenshot.png

    source : ▻https://github.com/EmailThis/typographic-email
    démo : ▻https://rawgit.com/EmailThis/typographic-email/master/dist/kitchen_sink.html

    À intégrer dans le plugin Newsletter de #SPIP ?

    ▻https://seenthis.net/messages/568924 via b_b

    7h37 @7h37
    Écrire un commentaire

  • @baroug
    baroug @baroug 28/11/2016

    The 100% correct way to do #CSS #breakpoints

    600px, 900px, 1200px, and 1800px if you plan on giving the giant-monitor people something special.

    ▻https://medium.freecodecamp.com/the-100-correct-way-to-do-css-breakpoints-88d6a5ba1862

    https://cdn-images-1.medium.com/max/1200/1*7YeOvzoYgUEDJdfQy2ERXg.png

    #responsive

    ▻https://seenthis.net/messages/545884 via b_b

    baroug @baroug
    Écrire un commentaire

  • @baroug
    baroug @baroug 25/03/2016

    Important pour les amateurs de #HTML5 : avec les récentes mises à jour iOS 9.3 et OSX 10.11.4, les nouvelles versions de Safari comprennent enfin la balise `

    ` qui permet de gérer des images #responsive (c’est-à-dire qu’on ne charge pas la même image selon les dimensions ou l’orientation de l’écran).

    C’est important parce que c’est le dernier gros navigateur à adopter cette balise, et c’est d’autant plus important, c’est que si on s’enquiquine à faire des images adaptées à l’affichage sur smartphone, évidement Safari pour iOS est l’un des principaux concernés.

    Et pour rappel, pour gérer ça automatiquement dans #SPIP, j’ai mon chouette plugin image responsive :
    ▻http://seenthis.net/sites/328805
    ▻http://zone.spip.org/trac/spip-zone/browser/_plugins_/image_responsive

    ▻http://seenthis.net/messages/473240 via ARNO*

    baroug @baroug
    Écrire un commentaire

  • @baroug
    baroug @baroug 11/03/2016

    sphinx resizeable
    ▻http://essenmitsosse.de/pixel/?showcase=true&slide=6

    #pixel_art #responsive

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

    baroug @baroug
    Écrire un commentaire

  • @fil
    Fil @fil 8/02/2016
    1
    @baroug
    1

    Art directed #responsive_images with #picture and #Cloudinary
    ▻http://cloudinary.com/blog/automatically_art_directed_responsive_images

    ▻http://seenthis.net/messages/458897 via Fil

    Fil @fil
    Écrire un commentaire

  • @baroug
    baroug @baroug 13/01/2016
    2
    @7h37
    @rezo
    2

    Lancement du premier épisode de la BD en ligne « Le Portrait d’Esther », « une bande dessinée numérique de Romain Bonnin et Pierre Jeanneau », consacrée aux biens juifs spoliés durant la guerre, pour le compte des Musées d’Angers :
    ▻http://portrait-esther.fr

    C’est évidemment du #SPIP #HTML5 #responsive. Mais la grosse nouveauté ici, c’est la gestion d’une bande dessinée animée (« turbomedia », mélange de BD statique et d’animation) avec un outil que j’ai développé.

    Le principe de cet outil est de permettre d’ajouter des « scènes » (ou des « cases » si c’est une BD) dans les articles de SPIP, et à chaque scène d’ajouter (par glisser-déposer) des « couches » qui s’empilent les unes au-dessus des autres (façon Photoshop). Ça donne par exemple ce genre d’interface :

    http://i.imgur.com/ioJcvMq.jpg

    La scène a une durée qui définit la durée des animations de l’ensemble des couches. Chaque couche a une situation de départ et une situation finale, le système fera l’animation en interpolant entre le départ et l’arrivée, éventuellement avec un délai défini pour chaque couche (par exemple l’apparition de plusieurs phylactère les uns après les autres).

    Les éléments qui peuvent être animés sont : position horizontale, position verticale, zoom, flou, opacité, visibilité.

    C’est très succinct parce que l’idée n’est pas de faire un outil d’animation de dessin animé, mais d’animer les scènes dessinées par l’illustrateur. C’est donc un outil conçu pour être simple pour que le dessinateur puisse lui-même concevoir les animations. Mais c’est déjà à mon avis plus amusant que les outils de « turbo-media » que j’ai vus pour l’instant (qui sont plutôt une succession d’images façon « click-click-click »).

    Bon, ce premier épisode n’est pas encore extrêmement animé, ce que j’ai vu de l’épisode II l’est déjà plus. On est en train d’apprendre ce qu’on peut faire avec l’outil (« nous » étant le dessinateur, le scénariste, Mosquito et moi) et quel équilibre trouver entre la narration « classique » et l’animation.

    Avec Emmanuel, on est très curieux d’avoir des retours là-dessus, des idées, tout ça. On se dit qu’il y a des choses intéressantes à faire avec ça, mais on n’a pas encore les idées très fixées.

    Sinon, un détail rigolo, c’est la première fois qu’on utilise mon réglage « Ken Burns » sur une image intégrée dans l’article. Ici sur le portrait de Pétain, effet de zoom lent :
    ▻http://portrait-esther.fr/article11.html
    Le raccourci pour faire ça est :
    <img11|right|large|largeur=360|kenburns=1.4>

    ▻http://seenthis.net/messages/449253 via ARNO*

    baroug @baroug
    Écrire un commentaire

  • @baroug
    baroug @baroug 6/09/2015

    Chocolat - #jQuery #responsive #lightbox
    ▻http://chocolat.insipi.de/#

    Chocolat.js enables you to display one or several images staying on the same page.

    The choice is left to the user to group together a series of pictures as a link, or let them appear as thumbnails.

    The viewer may appears full-page or in a block.

    #web_design

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

    baroug @baroug
    Écrire un commentaire

  • @7h37
    7h37 @7h37 11/05/2015
    1
    @baroug
    1

    Responsive Typography
    ▻http://fr.slideshare.net/clarissapeterson/responsive-typography-27460071?ref=https://css-tricks.com/bookmarklet-colorize-text-45-75-characters-line-length-testing
    http://cdn.slidesharecdn.com/ss_thumbnails/responsive-typography-cssdev-131022124356-phpapp01-thumbnail-4.jpg?cb=1393061454

    #web #design #responsive #typographie

    ▻http://seenthis.net/messages/369467 via nicod_

    7h37 @7h37
    Écrire un commentaire

  • @booz
    BoOz @booz 15/04/2015

    Tackling responsive_email at The Times — Digital Times — Medium
    ▻http://seenthis.net/messages/361387

    Tackling #responsive_email at The Times — Digital Times — Medium ▻https://medium.com/digital-times/tackling-responsive-email-at-the-times-a1c0d7446c65 https://d262ilb51hltx0.cloudfront.net/max/800/1*DoKkWlEO5bf9objnhig8oA.jpeg

    Setting up local instances of Outlook 2003–2013, an array of iOS, Android and Windows Phone mobile devices, various web-based clients and Thunderbird (I could go on…) would be a mammoth feat, particularly given the short time period we had to get up and running. We looked around for a service that could provide this for us, and came across #Litmus — a combined email testing and analytics tool. Litmus have been fantastic to work with, and offer a suite of tools that have made testing across a huge number of platforms almost (...)

    BoOz @booz
    Écrire un commentaire

Thèmes liés

  • #spip
  • #html5