#responsive_design

The Guide To #Responsive_Design In 2023 and Beyond - Ahmad Shadeed
▻http://ishadeed.com/article/responsive-design

https://ishadeed.com/assets/responsive-design/twitter-card.jpg

Responsive design isn’t about #media_queries anymore.

So, the web is responsive by default, unless we start getting creative in designing our layouts.

Using modern CSS

– The typography is responsive to the viewport width via clamp() function.
– The spacing is responsive to the viewport width via clamp() function.
– The hero section is responsive to its content via flexbox wrapping.
– The cards grid is responsive to the available space with minmax(), no media queries.
– The card component is responsive to its wrapper via size container queries and style container queries.
– The margins and paddings are responsive to the websites language via logical properties.

Using media queries

– The site navigation is responsive to the viewport width.
– The theming is responsive to the user preferences in their operating system.
– The card hover effect is responsive to what the user is using (touch vs mouse).

Fall of the Designer Part III : Conformist #Responsive_Design — Eli Schiff
►http://www.elischiff.com/blog/2015/4/21/fall-of-the-designer-part-iii-responsive-design

Unfortunately for Marcotte, his responsive design techniques unintentionally led exactly to the separation and abandonment of visual design principles in the interests of putting implementation first. Today, responsive techniques allow design practitioners and engineers to argue that the centrally important aspect of digital design is whether it adapts to multiple screens using fluid layouts to the exclusion of any other need.

Beaucoup d’exemples assez nuls et pas très convaincants mais quelques idées intéressantes.

#web_design

The Business of #Responsive_Design | Journal | The Personal Disquiet of Mark Boulton
▻http://markboulton.co.uk/journal/thebusinessofrwd

Let’s talk about responsive design.
Responsive design has changed my work and, ultimately, how I do business. This talk is about how it’s done that. But before I do that, I’d like to tap about the definition of responsive design.

Deserting the Digital Utopia / CrimethInc. Ex-Workers’ Collective
▻http://crimethinc.com/texts/ex/digital-utopia.html

It would not be the first time dissidents have extrapolated their utopia from the infrastructure of the ruling order. Remember the enthusiasm Karl Marx and #Ayn_Rand shared for railroads! By contrast, we believe that the technology produced by capitalist competition tends to incarnate and impose its logic; if we wish to escape this order, we should never take its tools for granted. When we use tools, they use us back.

http://crimethinc.com/texts/ex/computer-room.png

Here follows our attempt to identify the ideology built into digital technology and to frame some hypotheses about how to engage with it.

et un podcast associé :
▻http://www.crimethinc.com/blog/2013/11/18/the-ex-worker-13-ones-and-zeroes

#idéologie #internet #capitalisme #anarchisme #outils #cccp et même #responsive_design via @opironet

Le Quatre Heures
►http://lequatreheures.com

Qu’est-ce que Le Quatre Heures ?

Chaque mercredi, à 16 heures pile, Le Quatre Heures propose aux lecteurs un grand reportage #multimédia. Une nouvelle expérience narrative qui entremêle texte, photo, vidéo et son dans une lecture fluide, « en immersion » et sans aucun clic. Un récit au long cours que nous vous invitons à « déguster » confortablement installé, en plein écran.

#slow_journalism #reportage #parallax #responsive_design #journalisme #sites_de_presse

#plo

Working around a lack of element queries | Filament Group, Inc., Boston, MA
▻http://filamentgroup.com/lab/element_query_workarounds

Lately, we’ve been running into a recurring dilemma when building #responsive_designs. We want to build responsive layouts comprised of many modular, independent HTML components that fluidly fill any layout container we drop them into, but CSS3 #media_queries don’t currently offer a way to make content respond to its container’s dimensions (as opposed to the overall viewport size).

Impact of #Responsive_Designs
▻http://www.lukew.com/ff/entry.asp?1691

Time Inc. Responsive Redesign

Pages per visit, across #mobile, tablet and desktop are up considerably. (source)
Mobile is up 23% compared to what it had been. (source)
Homepage uniques are up 15%, and time spent is up 7.5%. (source)
The mobile bounce rate decreased by 26%. (source)

Why Google might just be wrong about responsive design in Africa | memeburn
►http://memeburn.com/2012/11/why-google-might-just-be-wrong-about-responsive-design-in-africa

– Most Africans do not have internet at home or at work. Only about 15% of the population does. And the internet that they have at home and work is not at all comparable with what you have in America (in terms of speed and reliability).
– Smartphone penetration in Africa is less than 20%.
– Public Wi-Fi Hotspots are not widely available.
– The GDP and PPP in Africa is among the lowest in the world.
So your typical African’s first and only point of access to the internet is via a feature phone. Because of the cost of data and the disposable income of a typical African, an African feature phone internet user is very aware of the size and cost of a web page.

What we need in Africa is a solution that is lightweight in terms of data usage.

http://s4.cdn.memeburn.com/wp-content/uploads/2012/11/Obama-site-speeds.jpg

[with #proactive_design] an African user can surf the net 10 times more (or at a cost that is 10 times less) and 10 times faster [than with #responsive_design].

#mobile #afrique via @NdifunaUkwazi

Simple Responsive Design Test Page - bookmarklet - BenjaminKeen.com
►http://www.benjaminkeen.com/misc/bricss

The link below lets you use lensco’s Simple #Responsive_Design Test Page on any page, by clicking the #bookmarklet. It lets you see how a page looks within different screen sizes. Very cool and simple idea. The bookmarklet lets you run it on any page (regardless of filename) and saves you the step of having to add the test page to each folder.

M’a l’air bien pratique ce bookmarklet...

#HTML #CSS

Please resize me - Rudy Rigot & Sophie Taboni
►http://pleaseresize.me

A brief history of fluidity in #webdesign

#responsive_design #fluid #fixed #fun #parisweb
►http://pleaseresize.me/images/petit/fluidgrid/3/petitNormal.png

responsivepx - find that tricky breakpoint
►http://responsivepx.com

Enter the url to your site - local or online: both work - and use the controls to adjust the #width and #height of your #viewport to find exact breakpoint widths in pixels. Then use that information in your #media_queries to create a #responsive_design.