how websites learned to fit everywhere
Вставка
- Опубліковано 2 лип 2024
- 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 - Розваги
did you get as nostalgic as me after watching this?
yeh
😼
Yes ;)
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.
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
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.
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.
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!
@@110110010he says as he nitpicked
Best storyteller on UA-cam 👑
Wirtual wants to have a word
i love the cats in between
I guarantee you, this channel will be the “Every Frame A painting” of ui design
Great reference!
After a long time, I'm watching a quality content on UA-cam. Thanks.
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)
It worked when the web mostly served articles, but these days it mostly serves apps. It's not really an apples to apples comparison
as someone who uses react often, yeah i miss the simple websites we used to have.
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.
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
Oh, yes, layouts, the only escape for dividing your layout into proper columns.
Thank you for this nostalgic recap!
Also a hell to work with when browsers just decide for you what the width of each column should be.
@@ITAC85 be grateful the mighty browsers allow you to use CSS... for now... :)
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.
I just finished watching all of your videos. Finally! Another video!
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
I first got into web development in early 2011, and while I grew up using those old website layouts on a daily basis, I don't think I could've picked a better time to start my webdev journey. With the introduction of responsive web designs, the task of building a good website just got a lot harder, but also a lot more fun and challenging in the best possible ways.
Amazing video, a must see for everyone that says that web development is easy
its nice to learn about this in a small video, really helps understanding why float is a thing when flex boxes are simply superior.
ngl this is by far the best explanation on responsive design I've seen lol
You're the definition of edutainment.
i lovee watching your videos, they are of perfect length, perfect storytelling and perfect information, so much fun to watch!!
Ouuuuuu FAVORITE UI/UX DESIGNER ON YT
Neocities goes so hard I was looking for a place to find retro inspiration 😮
AHH A NEW UPLOAD!!! One of my fab topics thank you soo much
love what you're doing!
reliving all the horrible implementations of my previous websites one phase at a time lol
The first half of my career in a few minutes! Great video
Amazing video, as always your videos are top notch!
You’re great at explaining these things!
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!
Great video as always!
Another great video!
This video is how I imagined my presentation on the history of the web sounded. Which was nothing even close haha. Amazing video!
Good and fast history lesson!
You have a talent for edutainment.
Lets not forget about:
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!
Excellent video
I love these videos
Wish I had this in my web design class 3 years ago 😭😭
Thank you for the video
Very Informative Video, Thanks for making this one
ngl the *big space* old design looks cool as heck and i wanna make it on my website
Raw HTML + let the browser handle the layout is the best solution that we'll never get.
I think I found my new fav youtuber
Always a great time when Juxtopposed bends me over with a new video!
Wonderful video as always keep it up🎉
I LOVE!!! SO COOL!
dude, you inspire me to become a front dev
Background music ❤
now i miss hammering px values in my css, thanks
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.
Now i want to learn to fit everywhere
Nice video 👍
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.
love to see you do wordpress dashboard redesign looks so outdated
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".
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.
Damn I'm getting old. Been around for all of it.
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.
Oof, don’t remind me!
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
Neocities mentioned 👀 I'm too young to have experienced geocities culture but i yearn for silly gifs, webrings and 88x31 buttons
yea
i had to search for comments like these after seeing neocities get mentioned (i have one myself)
omg i had that BenQ monitor
It's called website responsive they used @media query rule in CSS the website scales depending on the screen width.
Nice vid
you should title this "history of the entire web, I guess"
- 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.
5:00 lol, that's literally me.
First. Yes, give me my trophy
“we've got responsive design only in 2010”: okay, zoomer
Your videos are so good! Thank you. Would love to see a video about all the new AI tools that designers could use. Thanks!
Who remembers og thumbnail
Yes
Oh man, i havent read AListApart in years.
little history sesh I see!
I love your cat stickers 🐈
Pls, make the shortest Webflow course 🙏
Honesty one of the few female UA-camrs that is actually good
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
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 🤔
Her voice just melt my heart...
You have a beautiful voice ♥
Best way to do responsive design is by using REM units with fluid layout principles.
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.
I still don't get how a check for width is accurately used to detect mobile phones. They have different resolutions
your shit is so cool thank you :)
can you do more redesigning videos they're entertaining 🙏
I saw the thumbnail change 😂
I love the silly cat memes haha
You could make a video about WebXR!
I still don't know how to reset the cat to system's settings. Looks like its not getting any connections soon.
istg there was a different title im not tripping
yes thats why i pressed the video
❤❤❤
04:24 is this grid?
top left image right side not aligned with bottom right image left side
In the beginning
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.
I'm wondering why the Google Services like UA-cam or Google Drive still use an extra mobile version for their sites like you mentioned in the vid.
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
Peak UA-cam
oh damn.. the float left/right thing.. i remember.. It was awfull 😂
i'm here only to look at funny cat images
video doesnt talk about new css responsive evolution
After so many years of internet evolution, it becomes like a reflection of humanity… a disfigured internet where everyone must make money at all costs and make terrible, slow, clunky website XD
We need a face reveal.
did the title change or am I nuts?
Can you redesign halo 2