how websites learned to fit everywhere

Let's travel back in time and learn about the history of responsive design, all the way from 1990s to 2020s.
// Helpful links:
The Wayback Machine: web.archive.org
WebXR Github: github.com/immersive-web
About Immersive Web: immersiveweb.dev
Guide to screen sizes for responsive design: www.browserstack.com/guide/id...
Flexbox Froggy (a game to practice flexbox): flexboxfroggy.com
Optimizing for large-scale displays: css-tricks.com/optimizing-lar...
List of screen sizes: screensiz.es
Responsive Web design article: alistapart.com/article/respon...
Global browser and platform stats: www.w3counter.com/globalstats...
Neocities: neocities.org
// ✨ Let's connect:
Twitter: / juxtopposed
CodePen: codepen.io/Juxtopposed
------------------
#nostalgia #webdesign #responsivewebsite

[@juxtopposed]

did you get as nostalgic as me after watching this?

[@larssnakes4575]

yeh

[@squidslash]

😼

[@ilovefalafels]

Yes ;)

[@ordinarryalien]

Not really, we're not that old, Ma'am. ;) Only joking. Yes, I did feel nostalgic. Thank you, by the way, your videos are always very enjoyable.

[@lyricaldaddy8355]

As a young developer quite contrary :D I knew flexbox have been introduced only at some later stage of the web, but seeing tables being used as "predecessors" kinda blows my mind. I can only imagine the pain. Thanks for the video, really makes me appreciate the tech and standards we do have today

[@110110010]

In 6 minutes you managed to recap almost 30 years of web design developments. I've been around for all of that. The feat of this video blows my mind.

[@110110010]

Of course it's not like I didn't feel the urge of going "um actually, media queries and breakpoints are 6-8 years before the age of flexbox and grid" but wow the narrative prowess of the video got me so hooked I can't find myself nitpicking.

[@jonathanrouse]

Its not that shocking to me, a lot of web designers and developers are aware of most of this, if you have worked in web development you kinda have to know most of this, but its great information and I haven’t seen it all placed into a single video like this before!

[@alex.g7317]

@@110110010he says as he nitpicked

[@fanovaohsmuts]

I guarantee you, this channel will be the “Every Frame A painting” of ui design

[@JadonBarnes]

Great reference!

[@ItsUXgirl]

Best storyteller on KZbin 👑

[@kipchickensout]

Wirtual wants to have a word

[@SureShot55]

i love the cats in between

[@WayOfMani]

After a long time, I'm watching a quality content on KZbin. Thanks.

[@darkwoodmovies]

I kinda miss web 1.0 websites. They were very simple and straightforward to build, and didn't use 500Mb of RAM nor did they melt Intel CPUs. And I daresay `` is like 90% of all you need to make a static page interactive. (I love React BTW, but nostalgia)

[@AwesomeAdmirak]

It worked when the web mostly served articles, but these days it mostly serves apps. It's not really an apples to apples comparison

[@R0CK3T_DEV_]

as someone who uses react often, yeah i miss the simple websites we used to have.

[@redmagebr]

What I miss the most is that when you pressed "Enter" the site would be loaded up and ready before you fully took your finger off the button. These last few years I've been sometimes comparing old reddit with new reddit and it's not a joke how much telemetry that garbage loads up, even compared with the old version that also had telemetry. Everything is so big and flashy and it feels like we're leaving function in the past, websites are not better to navigate these days, even if they do look better.

[@BosonCollider]

You can still make web pages and apps without react, particularly if all your interactions are either basic UI stuff or something that fetches something from the backend. Just use HTMX for fetching, and just use modern html like the popover API if you need a simple toggle of some kind. You'd be surprised by how much stuff you can do with an HTML first approach

[@cristinelcostachescu9585]

Oh, yes, layouts, the only escape for dividing your layout into proper columns. Thank you for this nostalgic recap!

[@ITAC85]

Also a hell to work with when browsers just decide for you what the width of each column should be.

[@cristinelcostachescu9585]

@@ITAC85 be grateful the mighty browsers allow you to use CSS... for now... :)

[@RufusWhite]

And then there was that whole era where everyone thought it was cool to make pages out of big images sliced into loads of sections for some reason. Good times.

[@melio0504]

I just finished watching all of your videos. Finally! Another video!

[@sip-oh]

all your videos scripting and editing are done well, the steady flow paired with the buttery-smooth visuals make me lose track of time I can tell tons effort is put into your videos, and it shows

[@alexanderbateman5581]

The 80 character recommendation is not based on any research, but on the fact that IBM punch cards used to have 80 slots, so programmers kept their lines to 80 characters (because they had to) and that spread to web design, many people not knowing what the origin is at all. It has nothing to do with "readability".

[@rashirana4137]

i lovee watching your videos, they are of perfect length, perfect storytelling and perfect information, so much fun to watch!!

[@danielabonvini]

Amazing video, a must see for everyone that says that web development is easy

[@zsorosebud]

Oh thank you for explaining this so clearly. I'm right now building a web portfolio and learning some css along the way and sometimes you get how it is done but not why is it done!

[@navigator590]

Amazing video, as always your videos are top notch!

[@Haluku9]

AHH A NEW UPLOAD!!! One of my fab topics thank you soo much

[@darkejon]

The first half of my career in a few minutes! Great video

[@frytura]

its nice to learn about this in a small video, really helps understanding why float is a thing when flex boxes are simply superior.

[@27thdimensionmusic]

You’re great at explaining these things!

[@Diego_Cabrera]

This video is how I imagined my presentation on the history of the web sounded. Which was nothing even close haha. Amazing video!

[@greenhacker0com]

Lets not forget about:

[@LukasSmith827]

ngl this is by far the best explanation on responsive design I've seen lol

[@transmediasamurai]

love what you're doing!

[@2Cs1E]

Neocities goes so hard I was looking for a place to find retro inspiration 😮

[@panetony1]

I would love to learn UX/UI Design from you. Your videos are very easy to understand and have a lot of interesting facts. I don't get tired from this format and is easy to keep the attention. Thank you!

[@lukedoglt]

Wish I had this in my web design class 3 years ago 😭😭

[@rdmercer]

i started my web dev life in 2001 with CSS2 and the complex spiral demo by Eric Meyer (still up today!). Even then we couldnt believe how bad the space jam website of 1996 was. Man its been a crazy ride. These videos are so epic and underrated. Please keep this up!

[@pengurrito7136]

Good and fast history lesson!

[@hemantsaini8432]

Very Informative Video, Thanks for making this one

[@Docdoozer]

Great video as always!

[@ordinarryalien]

You're the definition of edutainment.

[@joãopedrothejohn]

ngl the *big space* old design looks cool as heck and i wanna make it on my website

[@polymathematics_]

reliving all the horrible implementations of my previous websites one phase at a time lol

[@dealloc]

Rounded corners was also a whole subculture. First we'd use images and pluck them in the corners of tables, and in some cases also edges. But then someone figured out that you could create "dynamic" rounded corners by using divs, by placing in layers line by line and use margins to control the width for each line, and even borders. Although it would look aliased-and require a ton of CSS depending on the corner size but it would be dynamic! You also weren't limited to just rounded corners. You could make them beveled, inverted.. .really anything. It also took up the space required to fit the corners, depending on the size. If the corner was large it would have to push the content that amount. Not so neat if you wanted a title or other decoration near the edges. A few techniques came up, but the most robust one was palcing a absolute positioned div inside and make the outer one relative, and boom; now the content could hug the edges. Then CSS3 was born and no-one looked back.

[@joshxkerrigan]

just started my journey into full stack web development (HTML, CSS, JS, PHP, & MySQL) and this was such a great video!!!!!! really loved the history bits and how you explained the breakthrough that was flexbox/grid. grateful i'm learning now, after these fundamental changes already happened

[@GalacticMail]

Always a great time when Juxtopposed bends me over with a new video!

[@LeHoax]

Another great video!

[@TheDyingPlant]

I love these videos

[@AppraisedVoice]

Ouuuuuu FAVORITE UI/UX DESIGNER ON YT

[@Emgaeeeee]

dude, you inspire me to become a front dev

[@RobbPage]

nice vid. i would only add that tables are still very much a part of web design these days. we don't use them for page layout but they still have their place for displaying tabular data and it's a lot easier/faster than getting flex or grid to give the same results.

[@Drexxhandle]

Wonderful video as always keep it up🎉

[@DustinWillis18]

You have a talent for edutainment.

[@microcybs]

I think I found my new fav youtuber

[@dracula5752]

love to see you do wordpress dashboard redesign looks so outdated

[@realjame]

Excellent video

[@zwatotem]

Raw HTML + let the browser handle the layout is the best solution that we'll never get.

[@TilDrill]

Now i want to learn to fit everywhere

[@Brokkolii]

now i miss hammering px values in my css, thanks

[@sofos1369]

Thank you for the video

[@aoof6742]

I LOVE!!! SO COOL!

[@lazyalpaca7]

liked the title, best movie I've ever seen ❤️

[@arcalypse1101]

Damn I'm getting old. Been around for all of it.

[@echtertill]

Nice video 👍

[@christopherjaya342]

In the future, OS will be just browser, where apps are loaded per demand, and accessible whether you use it on android phone, ipad, metaquest, or even LG refrigerator. ChromeOS is already living in that future.

[@aguswidhiyasa]

i remember when first time using CSS3 in 2010, and trying border-radius and box-shadow is blow my mind 😂 Before that i create box-shadow and border-radius using photoshop and make into the web.

[@cdkw2]

little history sesh I see!

[@mistersimeeec]

Anyone remember and ? At some point splitting the user's viewport into separate s was the way to go, and each section of your site lived in a separate page that had to talk to the "_top" page frame to get anything done. Good times.

[@harveytherobot]

Oof, don’t remind me!

[@saadsohail4690]

you should title this "history of the entire web, I guess"

[@teamakesgames]

Neocities mentioned 👀 I'm too young to have experienced geocities culture but i yearn for silly gifs, webrings and 88x31 buttons

[@solinus7131]

yea i had to search for comments like these after seeing neocities get mentioned (i have one myself)

[@salmanhussain3348]

Nice vid

[@ben_wright]

Your videos are so good! Thank you. Would love to see a video about all the new AI tools that designers could use. Thanks!

[@hasslehoffs]

omg i had that BenQ monitor

[@trueberryless]

Background music ❤

[@yerenzter]

It's called website responsive they used @media query rule in CSS the website scales depending on the screen width.

[@deliciouspops]

“we've got responsive design only in 2010”: okay, zoomer

[@eurekamedia.]

I love your cat stickers 🐈

[@SRG-Learn-Code]

5:00 lol, that's literally me.

[@Zyodl]

your shit is so cool thank you :)

[@yuriytemniuk5360]

Pls, make the shortest Webflow course 🙏

[@DavidSilvernail]

Oh man, i havent read AListApart in years.

[@aLpenbog]

I don't know why everyone was hating on tables for layouts. Yes they are wrong semantically but until subgrid I was dealing with problems where they were the only sane option if I don't want to compute a lot of stuff within JS myself. And there are probably a lot of computers/phones not running a browser supporting it.

[@ABESW0RLD]

First. Yes, give me my trophy

[@LegacKult]

Who remembers og thumbnail

[@kipchickensout]

I've always wondered why the width in pixels is used to detect different devices, wouldn't the aspect ratio be way better to use? Like what if a phone suddenly has a huge resolution but it's still a phone, but gets the desktop website 🤔

[@sukmaadhiw9033]

I love the silly cat memes haha

[@maerosss]

You have a beautiful voice ♥

[@li_tsz_fung]

- Mobile is too important because that's most of the traffic for B2C. - Google basically penalize slow sites in millisecond level, which is not totally unreasonable, a lot of the time people would just close your website if it's not immediately loaded, or things doesn't work before it's fully loaded. - Responsive web layout is still somewhat restricted by how you structure your HTML code. It's easier to do it mobile first. But then it still limits how different it can be on a large screen. - fun interactions are usually easier with mouse. - The rise of UX designer and design system. And data driven design strategies. Fun design? Your 1st time customer might not understand how to use it. Just do what they are already familiar with And therefore, you get less fun websites.

[@jensdemuynck]

You could make a video about WebXR!

[@inxomnyaa]

I still don't get how a check for width is accurately used to detect mobile phones. They have different resolutions

[@akshayaxy9220]

Yes

[@captainlennysub]

I saw the thumbnail change 😂

[@RandomGeometryDashStuff]

04:24 is this grid? top left image right side not aligned with bottom right image left side

[@jodzict]

❤❤❤

[@lennartuecker]

I'm wondering why the Google Services like KZbin or Google Drive still use an extra mobile version for their sites like you mentioned in the vid.

[@kalilinux8902]

istg there was a different title im not tripping

[@laoify]

yes thats why i pressed the video

[@MohammadRashed.]

I still don't know how to reset the cat to system's settings. Looks like its not getting any connections soon.

[@Thedevilsmirk]

can you do more redesigning videos they're entertaining 🙏

[@WindAndWander]

Would you ever consider trying a crack at redesigning the absolutely HORRID Disney+ UI? Just to show us what an actual useful design would look like.

[@sykowhite9465]

Best way to do responsive design is by using REM units with fluid layout principles.

[@seanthesheep]

Don't exclusively use rem units for everything, though. Using rem is supposed to support accessibility for people who need larger text sizes, so you should only use rem for font sizes, not widths, padding, or margins. Otherwise, increasing rem is just the same as zooming in on a web page, which ruins the point of using rem in the first place.

[@scytheonion]

i love you

[@woodybob01]

I played a cs2 game yesterday and got someone who sounded exactly like you as a teammate. Never asked if it was u though xd

[@akosdoesstuff9208]

Peak KZbin

[@korbpw]

did the title change or am I nuts?

[@emm4148]

Honesty one of the few female KZbinrs that is actually good

[@AntiPhil]

oh damn.. the float left/right thing.. i remember.. It was awfull 😂

[@yuriytemniuk5360]

So, do you suggest that a web designer makes only one type of design, and it fiting other types of displays is now a developer's problem to solve? It's just that I recently purchased a web design course, and they say a designer should do this. Whom should I believe?

[@lm25071]

And in the end you're still fighting with the graphics designer, whether the fancy vertical sub headlines should really also be vertical on mobile version or not😅

[@TousiffTH]

In the beginning

[@iEscapedVim]

tum tum tum tum ..... tum tum tum tum ..... tum tum tum tum ..... . . tum tum tum tum ..... re re re re re reeee reee reee reeeee reee reeeee reeee reeee re re re re re re reeeeeeeeeeee ree re re re re reeeee reeeeee reeeeee