Responsive Design

This is where @beep curates link-y things about responsive design. He also wrote two books on the topic:

[Responsive Design @RWD]

Happy new year! 🎉 Want to learn responsive design? Or the basics of CSS Grid? Check out my online class, which comes with a free 2-month @skillshare trial! https://t.co/Qj9Uq1O6ZE

[@[email protected] @keithjgrant]

Guess what now has support in all major browsers?

[Responsive Design @RWD]

no it’s cool i’ve just got something in my eye, it’s very dusty in here https://t.co/iYN3wcLhqB

[Responsive Design @RWD]

It’s true! Happy eleventh birthday, responsive design! https://t.co/CzpLQmOSiZ

[Web Design Museum @WebDesignMuseum]

Happy 11th Birthday Responsive Web Design! On May 25, 2010, web designer Ethan Marcotte published an article entitled "Responsive Web Design" in the online magazine A List Apart. https://t.co/vjK4affT5b
#WebDesignHistory

[Responsive Design @RWD]

Related: here’s an older post from @TrentWalton, on tuning type sizes with a vertical media query: https://t.co/WWE6F2baRc

[Responsive Design @RWD]

I’ve often said testing your responsive designs in landscape mode is one of the fastest ways to highlight design issues, especially vertical ones. Here’s a wonderful example of that in action: https://t.co/PalTqIeCC0

[stommepoes @stommepoes]

So what happened?
The page was built for mobile responsiveness. Portrait-mode only, of course.

Developers, CHECK YOUR MOBILE STYLES IN LANDSCAPE PLEASE. Use CSS media queries to unstick sticky shit.

[Responsive Design @RWD]

At long, long last, there’s real movement on container queries. And that’s incredibly exciting.

Here’s @una with how you can start experimenting with CQs today! https://t.co/In4p2FJB3d

[Una 🇺🇦 @Una]

🚨 An experimental flag for container queries (@container) just hit Chrome Canary!

Yes, seriously!

Go to: chrome://flags in your URL bar and turn on enable-container-queries to try it out.

Here's a demo to help you see how they work (w/flag in Canary): https://t.co/DrZxzoggV4

[Responsive Design @RWD]

“People using small screens won’t want to subscribe to our newsletter.”

“People using small screens don’t want to print.”

“People using wide viewports won’t use geo-aware services.”

🤔🤔🤔🤔🤔🤔🤔🤔

[Responsive Design @RWD]

one day i will get the VIEWPORT SIZE IS NOT A PROXY FOR DEVICE DETECTION knuckle tattoos i keep talking about

i just need more knuckles https://t.co/A8QFI5tmqE

[Derek Featherstone @feather]

Viewport size is not a proxy for device detection.

Product designer assumed downloading an .exe shouldn't be shown because viewer was on a phone.

Except they were on their desktop with large monitor 800x600 resolution with an unmaximized browser, because they had low-vision.

[Responsive Design @RWD]

This is an impossibly exciting new project from @robweychert, but WOW it is ALSO a really beautifully-made piece of responsive design! 😍😍😍 https://t.co/YgIzpgy7gq

[Responsive Design @RWD]

i said it back then, and i still believe every word of it https://t.co/9SHii6ijFE

[Responsive Design @RWD]

“80% of all digital minutes are on mobile.”

If your team or organization hasn’t adopted a mobile-first mindset, now would be a *fantastic* time to start.

https://t.co/1JdMFYRrWA

[Smashing Magazine 🇺🇦 🏳️‍🌈 @smashingmag]

🔥 The State Of Mobile in 2021.

– 80% of all digital minutes are on mobile
– Avg. consumer upgrades their phone every 2 years
– In the US phone replacement cycle is 33 months
– 84.8% of all shipped phones are Androids.

Jump to all details:
https://t.co/JF7KyuP4UC

[Responsive Design @RWD]

@nhoizey Well, I think the point about mobile first is still valid, even if we’re discussing native apps. (Many of which have, or link out to, browsers!)

[Responsive Design @RWD]

(thanks for uncovering this, @acolangelo! so glad you were there!)

[Responsive Design @RWD]

behold, a photo of Yours Truly from 2010, giving the talk that coined the phrase “responsive web design”

while looking as though i’d never seen this slide before 🤔 https://t.co/IMn9DasUTr

[Anthony Colangelo @acolangelo]

I was deep into my 2010 camera roll and found @beep on the original @RWD world tour

[CSS-Tricks @css]

HTML Video Sources Should Be Responsive https://t.co/oQn996sT5i

[Responsive Design @RWD]

We used to have the ability to create responsive, viewport-aware videos, but it was removed.

I think @scottjehl is right: responsive videos should be restored in HTML, and expanded. https://t.co/qKUnbsoeqg

[Responsive Design @RWD]

Oh my goodness, I *love* this. Thanks so much, @gabrielvaldivia! https://t.co/yj6N46xwH3

[Gabriel Valdivia @gabrielvaldivia]

Responsive Web Design Podcast, hosted by @karenmcgrane and @beep. High res: https://t.co/5YrCMR5gLJ

[Responsive Design @RWD]

@ardilamorin SAME

[Responsive Design @RWD]

“ethan, what’s your favorite responsive design,” they will ask me

“i love them all,” i’ll reply

but i’ll know

i’ll know it’s secretly this one https://t.co/cTJWGujgwq

i’ll *know*

[Responsive Design @RWD]

Friendship ended with NATIVE APP
     Now
     RESPONSIVE WEBSITE
     is my
     best friend