Responsive image map using SVG
▻http://jsfiddle.net/eLbpmsaj
#RWD_image_imapeMap_map_SVG_clevermarks
Samsung DeX brings a new Dimension to the Mobile Web
▻https://medium.com/samsung-internet-dev/samsung-dex-brings-a-new-dimension-to-the-mobile-web-f80d7edcab29
“If you use a Progressive Web App regularly in the browser, we will prompt you to install it on the third day of using it in two weeks.”
Srcset resource selection in Chrome uses a geometric mean
▻https://codereview.chromium.org/667763004
“a higher resolution resource is downloaded only if the DPR is larger than the geometric mean of that resource’s density and the density of the resource that preceded it in the sorted candidate list”
Goshen College | A Christian Liberal Arts College in Indiana
▻https://www.goshen.edu
#RWD_example_menu
A Priority+ Navigation With Scrolling and Dropdowns
▻https://css-tricks.com/priority-navigation-scrolling-dropdowns
"Exposing long navigation menus on small screens is tricky. Hamburger menus are everywhere, although often discouraged. Displaying “just enough” navigation at every breakpoint can feel like an impossible task. This is especially true for template developers needing to accommodate an arbitrary number of menu items."
Why Britain banned mobile apps
▻https://govinsider.asia/smart-gov/why-britain-banned-mobile-apps
“From voter registration to driving license applications, citizens use response sites with simple designs that are easy to follow. According to estimates by the British Treasury, the GDS saved US$8.2bn (£4.1bn) over four years by taking an approach that emphasized simplicity of design and openness of the service.”
六甲バター × 第6回神戸マラソン スペシャルサイト
▻http://kobe-marathon-qbb.com
Un joli exemple de site Responsive en largeur fluide. La bannière aurait par contre dû être faite avec pour la direction artistique.
Responsive Web Design with Daniel Mall
▻https://channel9.msdn.com/Blogs/raw-tech/Responsive-Web-Design-with-Daniel-Mall
How do Modern web designers need to approach creating responsive web sites? Working within a new framework that includes planning, inventories, sketching to assembling to move past “visual comps” as the only output of this process. Interface inventories, performance budgets, prototypes, and element collages are all discussed by Daniel Mall in a real world project context to help define what approaches, tools and strategies web designers can use to create for the modern web.
La technique des « Fab Four » pour créer des e‑mails responsive sans media queries – L’intégration d’e-mails
▻http://emails.hteumeuleu.fr/2016/02/fab-four-emails-responsive-sans-media-queries
"Je pense avoir trouvé une nouvelle façon de créer des e‑mails responsive, sans media queries. La solution implique la fonction CSS calc(), et les trois propriétés width, min-width ou max-width. Ou comme je me plais à les appeler une fois toutes réu… Tags : #email #RWD #clevermarks
Mais du coup, la question : finalement ça peut s’utiliser dans un site normal aussi cette technique : ça fait un peu comme une Element Query, mais qui n’aurait qu’un seul breakpoint possible, non ? Du coup pour les cas où ça suffit d’avoir juste deux versions (petit/grand écran), alors on peut utiliser cette technique à la place de certaines media queries ! (Et c’est possiblement mieux puisque ça utilise la taille de l’élément parent, pas du périphérique complet : element query quoi.)
@fil ça se base sur la priorité des valeurs entre width, min-width et max-width. Suivant lequel est le plus grand ou plus petit, ce n’est pas le même qui va être réellement appliqué. Ça calcule une valeur de width qui est volontairement énorme mais soit positive (genre 38400) soit négative (-9600), du coup ce n’est jamais width qui est appliqué mais forcément soit min-width, soit max-width.
Mais sinon tu peux juste te contenter de l’appliquer, ça marche ! :D
Ça te permet de créer deux versions de taille (seulement deux, contrairement aux media queries où tu peux définir autant de variantes que tu veux) pour des blocs, mais suivant la taille du parent, et non pas suivant la taille du périphérique complet ! Donc c’est beaucoup plus précis (et ça marche en email du coup).
Sinon les « element queries » sont une des propositions d’amélioration de CSS en pourparlers par le groupe de travail Responsive :
▻http://ricg.io
» Converting an existing site or app to a responsive design Cloud Four Blog
▻http://blog.cloudfour.com/converting-an-existing-site-or-app-to-a-responsive-design
our goal has been to convert the site to a responsive web design with as little disruption to the business as possible. Tags: #RWD #méthodologie #rétrofitting #conversion #desktop #mobile
» The Power of Responsive #design Sprints Cloud Four Blog
▻http://blog.cloudfour.com/the-power-of-responsive-design-sprints
We’ve found that #agile design is ideally suited for designing responsive patterns. It allows us to focus on small pieces of a design and iterate on them quickly. Tags: design #RWD agile #clevermarks
The Difference Between #responsive and #adaptive Design | CSS-Tricks
▻https://css-tricks.com/the-difference-between-responsive-and-adaptive-design
Responsive #images in #d8 | Mediacurrent
▻https://www.mediacurrent.com/blog/responsive-images-d8
Starting with #drupal 8 Beta 15 (it could have been before, but this is when I first learned about these new changes), the Responsive Images module provides more options for determining which image to serve. These options include the srcset and sizes Tags: drupal d8 #rwd images #clevermarks
#WordPress › Responsive Images in WordPress 4.4 – Make WordPress Core
▻https://make.wordpress.org/core/2015/11/10/responsive-images-in-wordpress-4-4
Tags: #RWD #image WordPress #clevermarks
How to build a #device #lab | Tutorial by Destiny Montague and Lara Hogan
▻http://larahogan.me/devicelab
Tags: device lab #RWD #test #clevermarks
Adactio: Journal—Building the #dConstruct 2015 site
▻https://adactio.com/journal/9430
The dConstruct 2015 site is gorgeous, semantic, responsive, and performant. Conventional wisdom dictates that you have to choose, but this little site—built on a really tight schedule—shows otherwise. Tags: dConstruct #sémantique #conception #Web #clevermarks #RWD #webperf
Who moved my #hamburger ? — #mobile Growth — Medium
▻https://medium.com/mobile-growth/who-moved-my-hamburger-d237860bc589?ref=uxhandy
Tags: hamburger #RWD #trend #UX #menu mobile #clevermarks
NavNav - 90+ Responsive #navigation Bar Menu Tutorials, Examples, and Demos (CSS, jQuery, JavaScript)
▻http://navnav.co
A ton of #css, jQuery, and JavaScript responsive navigation examples, demos, and tutorials from all over the web. Tags: #rwd navigation #design css #inspiration #clevermarks
David Leuliette on Twitter : « Optimisez vos images pour avoir un réel impact en #responsive @ParisWeb with @nhoizey ▻http://t.co/R0u0PJ5MTR »
▻https://twitter.com/_flexbox/status/523428617993588736/photo/1
Please Update #Picturefill | CSS-Tricks
▻https://css-tricks.com/please-update-picturefill
if you’re using a version of Picturefill from prior to 2.3.1, please update right away Tags: #RWD #image Picturefill #clevermarks
We’re Doing Responsive Web Wrong, But We Can Fix It | Social Media Today
▻http://www.socialmediatoday.com/marketing/2015-04-23/were-doing-responsive-web-wrong-we-can-fix-it
Tags : #ResponsiveWebDesign #rwd
Gaunt Face | Matt Gaunt - What the #virtual #viewport?
▻https://gauntface.com/blog/2015/01/16/what-the-virtual-viewport
the idea is splitting the notion of “the viewport” into the “layout viewport” (where fixed position items are attached) and the “visual viewport” (What the users actually see) Tags: viewport virtual #layout #RWD