Тёмный

how websites learned to fit everywhere 

Juxtopposed
Подписаться 217 тыс.
Просмотров 79 тыс.
50% 1

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

Развлечения

Опубликовано:

 

2 июл 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 163   
@juxtopposed
@juxtopposed 5 дней назад
did you get as nostalgic as me after watching this?
@larssnakes4575
@larssnakes4575 5 дней назад
yeh
@squidslash
@squidslash 5 дней назад
😼
@ilovefalafels
@ilovefalafels 5 дней назад
Yes ;)
@ordinarryalien
@ordinarryalien 5 дней назад
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
@lyricaldaddy8355 5 дней назад
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
@110110010 5 дней назад
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
@110110010 5 дней назад
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
@jonathanrouse 5 дней назад
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
@alex.g7317 5 дней назад
@@110110010he says as he nitpicked
@ItsUXgirl
@ItsUXgirl 5 дней назад
Best storyteller on RU-vid 👑
@kipchickensout
@kipchickensout 3 дня назад
Wirtual wants to have a word
@SureShot55
@SureShot55 5 дней назад
i love the cats in between
@fanovaohsmuts
@fanovaohsmuts 4 дня назад
I guarantee you, this channel will be the “Every Frame A painting” of ui design
@JadonBarnes
@JadonBarnes День назад
Great reference!
@WayOfMani
@WayOfMani 5 дней назад
After a long time, I'm watching a quality content on RU-vid. Thanks.
@darkwoodmovies
@darkwoodmovies 5 дней назад
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
@AwesomeAdmirak 5 дней назад
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_
@R0CK3T_DEV_ 4 дня назад
as someone who uses react often, yeah i miss the simple websites we used to have.
@redmagebr
@redmagebr 2 дня назад
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
@BosonCollider 17 часов назад
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
@cristinelcostachescu9585 5 дней назад
Oh, yes, layouts, the only escape for dividing your layout into proper columns. Thank you for this nostalgic recap!
@ITAC85
@ITAC85 4 дня назад
Also a hell to work with when browsers just decide for you what the width of each column should be.
@cristinelcostachescu9585
@cristinelcostachescu9585 4 дня назад
@@ITAC85 be grateful the mighty browsers allow you to use CSS... for now... :)
@RufusWhite
@RufusWhite 11 часов назад
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
@melio0504 5 дней назад
I just finished watching all of your videos. Finally! Another video!
@sip-oh
@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
@LukasSmith827
@LukasSmith827 5 дней назад
ngl this is by far the best explanation on responsive design I've seen lol
@rashirana4137
@rashirana4137 5 дней назад
i lovee watching your videos, they are of perfect length, perfect storytelling and perfect information, so much fun to watch!!
@ordinarryalien
@ordinarryalien 5 дней назад
You're the definition of edutainment.
@Haluku9
@Haluku9 5 дней назад
AHH A NEW UPLOAD!!! One of my fab topics thank you soo much
@2Cs1E
@2Cs1E 5 дней назад
Neocities goes so hard I was looking for a place to find retro inspiration 😮
@frytura
@frytura 3 дня назад
its nice to learn about this in a small video, really helps understanding why float is a thing when flex boxes are simply superior.
@polymathematics_
@polymathematics_ 5 дней назад
reliving all the horrible implementations of my previous websites one phase at a time lol
@27thdimensionmusic
@27thdimensionmusic 5 дней назад
You’re great at explaining these things!
@danielabonvini
@danielabonvini 5 дней назад
Amazing video, a must see for everyone that says that web development is easy
@darkejon
@darkejon 5 дней назад
The first half of my career in a few minutes! Great video
@navigator590
@navigator590 5 дней назад
Amazing video, as always your videos are top notch!
@transmediasamurai
@transmediasamurai День назад
love what you're doing!
@Docdoozer
@Docdoozer 5 дней назад
Great video as always!
@zsorosebud
@zsorosebud 5 дней назад
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!
@AppraisedVoice
@AppraisedVoice 5 дней назад
Ouuuuuu FAVORITE UI/UX DESIGNER ON YT
@Diego_Cabrera
@Diego_Cabrera 5 дней назад
This video is how I imagined my presentation on the history of the web sounded. Which was nothing even close haha. Amazing video!
@LeHoax
@LeHoax 5 дней назад
Another great video!
@joãopedrothejohn
@joãopedrothejohn 5 дней назад
ngl the *big space* old design looks cool as heck and i wanna make it on my website
@hemantsaini8432
@hemantsaini8432 5 дней назад
Very Informative Video, Thanks for making this one
@pengurrito7136
@pengurrito7136 17 часов назад
Good and fast history lesson!
@lukedoglt
@lukedoglt 5 дней назад
Wish I had this in my web design class 3 years ago 😭😭
@rdmercer
@rdmercer 5 дней назад
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!
@DustinWillis18
@DustinWillis18 5 дней назад
You have a talent for edutainment.
@TheDyingPlant
@TheDyingPlant 4 дня назад
I love these videos
@microcybs
@microcybs 5 дней назад
I think I found my new fav youtuber
@realjame
@realjame 5 дней назад
Excellent video
@greenhacker0com
@greenhacker0com 3 дня назад
Lets not forget about:
@GalacticMail
@GalacticMail 5 дней назад
Always a great time when Juxtopposed bends me over with a new video!
@Drexxhandle
@Drexxhandle 5 дней назад
Wonderful video as always keep it up🎉
@Emgaeeeee
@Emgaeeeee 3 дня назад
dude, you inspire me to become a front dev
@zwatotem
@zwatotem 5 дней назад
Raw HTML + let the browser handle the layout is the best solution that we'll never get.
@sofos1369
@sofos1369 5 дней назад
Thank you for the video
@Brokkolii
@Brokkolii 5 дней назад
now i miss hammering px values in my css, thanks
@RobbPage
@RobbPage 5 дней назад
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.
@TilDrill
@TilDrill 4 дня назад
Now i want to learn to fit everywhere
@dracula5752
@dracula5752 4 дня назад
love to see you do wordpress dashboard redesign looks so outdated
@christopherjaya342
@christopherjaya342 4 дня назад
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.
@aoof6742
@aoof6742 5 дней назад
I LOVE!!! SO COOL!
@echtertill
@echtertill 5 дней назад
Nice video 👍
@alexanderbateman5581
@alexanderbateman5581 4 дня назад
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".
@teamakesgames
@teamakesgames 4 дня назад
Neocities mentioned 👀 I'm too young to have experienced geocities culture but i yearn for silly gifs, webrings and 88x31 buttons
@solinus7131
@solinus7131 2 дня назад
yea i had to search for comments like these after seeing neocities get mentioned (i have one myself)
@lazyalpaca7
@lazyalpaca7 10 часов назад
liked the title, best movie I've ever seen ❤️
@arcalypse1101
@arcalypse1101 5 дней назад
Damn I'm getting old. Been around for all of it.
@hasslehoffs
@hasslehoffs 5 дней назад
omg i had that BenQ monitor
@mistersimeeec
@mistersimeeec 5 дней назад
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
@harveytherobot 3 дня назад
Oof, don’t remind me!
@aguswidhiyasa
@aguswidhiyasa 5 дней назад
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.
@trueberryless
@trueberryless 5 дней назад
Background music ❤
@joshxkerrigan
@joshxkerrigan 5 дней назад
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
@yerenzter
@yerenzter 13 часов назад
It's called website responsive they used @media query rule in CSS the website scales depending on the screen width.
@saadsohail4690
@saadsohail4690 4 дня назад
you should title this "history of the entire web, I guess"
@salmanhussain3348
@salmanhussain3348 19 часов назад
Nice vid
@ben_wright
@ben_wright 5 дней назад
Your videos are so good! Thank you. Would love to see a video about all the new AI tools that designers could use. Thanks!
@deliciouspops
@deliciouspops 5 дней назад
“we've got responsive design only in 2010”: okay, zoomer
@li_tsz_fung
@li_tsz_fung 3 дня назад
- 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.
@cdkw2
@cdkw2 5 дней назад
little history sesh I see!
@ABESW0RLD
@ABESW0RLD 5 дней назад
First. Yes, give me my trophy
@SRG-Learn-Code
@SRG-Learn-Code 5 дней назад
5:00 lol, that's literally me.
@yuriytemniuk5360
@yuriytemniuk5360 2 дня назад
Pls, make the shortest Webflow course 🙏
@DavidSilvernail
@DavidSilvernail 4 дня назад
Oh man, i havent read AListApart in years.
@LegacKult
@LegacKult 2 дня назад
Who remembers og thumbnail
@eurekamedia.
@eurekamedia. 5 дней назад
I love your cat stickers 🐈
@kipchickensout
@kipchickensout 3 дня назад
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 🤔
@akshayaxy9220
@akshayaxy9220 5 дней назад
Yes
@emm4148
@emm4148 День назад
Honesty one of the few female RU-vidrs that is actually good
@maerosss
@maerosss 4 дня назад
You have a beautiful voice ♥
@Thedevilsmirk
@Thedevilsmirk 4 дня назад
can you do more redesigning videos they're entertaining 🙏
@sykowhite9465
@sykowhite9465 5 дней назад
Best way to do responsive design is by using REM units with fluid layout principles.
@seanthesheep
@seanthesheep 5 дней назад
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.
@inxomnyaa
@inxomnyaa 4 дня назад
I still don't get how a check for width is accurately used to detect mobile phones. They have different resolutions
@jensdemuynck
@jensdemuynck 5 дней назад
You could make a video about WebXR!
@captainlennysub
@captainlennysub 4 дня назад
I saw the thumbnail change 😂
@kalilinux8902
@kalilinux8902 5 дней назад
istg there was a different title im not tripping
@laoify
@laoify 5 дней назад
yes thats why i pressed the video
@MohammadRashed.
@MohammadRashed. 5 дней назад
I still don't know how to reset the cat to system's settings. Looks like its not getting any connections soon.
@Zyodl
@Zyodl 2 дня назад
your shit is so cool thank you :)
@WindAndWander
@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.
@lennartuecker
@lennartuecker 5 дней назад
I'm wondering why the Google Services like RU-vid or Google Drive still use an extra mobile version for their sites like you mentioned in the vid.
@RandomGeometryDashStuff
@RandomGeometryDashStuff 5 дней назад
04:24 is this grid? top left image right side not aligned with bottom right image left side
@sukmaadhiw9033
@sukmaadhiw9033 20 часов назад
I love the silly cat memes haha
@TousiffTH
@TousiffTH 5 дней назад
In the beginning
@woodybob01
@woodybob01 3 дня назад
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
@akosdoesstuff9208 5 дней назад
Peak RU-vid
@AntiPhil
@AntiPhil 5 дней назад
oh damn.. the float left/right thing.. i remember.. It was awfull 😂
@iEscapedVim
@iEscapedVim 2 дня назад
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
@nomadshiba
@nomadshiba 5 дней назад
video doesnt talk about new css responsive evolution
@jodzict
@jodzict 5 дней назад
❤❤❤
@pecora31
@pecora31 5 дней назад
Her voice just melt my heart...
@kubus_puchatek
@kubus_puchatek 4 дня назад
i'm here only to look at funny cat images
@Shr11mp
@Shr11mp 4 дня назад
We need a face reveal.
@korbpw
@korbpw 5 дней назад
did the title change or am I nuts?
@Armm8991
@Armm8991 5 дней назад
Can you redesign halo 2
@zdeckeyraghav
@zdeckeyraghav 15 часов назад
Please redesign the RU-vid ui
Далее
I Redesigned the ENTIRE Spotify UI from Scratch
19:27
I Recreated This OLD ARCADE GAME in Excel
8:21
Просмотров 3 тыс.
How JavaScript Ruined the Web
15:02
Просмотров 113 тыс.
i made the same design in every program ever
23:33
Просмотров 1,8 млн
The moment we stopped understanding AI [AlexNet]
17:38
Просмотров 377 тыс.
100+ Linux Things you Need to Know
12:23
Просмотров 637 тыс.
Affinity Hitting Adobe When They're Down
7:22
Просмотров 52 тыс.
Why Western Designs Fail in Developing Countries
27:36
Просмотров 362 тыс.
Why the Nothing CMF Phone 1 is a Game Changer.
14:44
I Made a Graph of Wikipedia... This Is What I Found
19:44