how websites learned to fit everywhere
HTML-код
- Опубликовано: 3 окт 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/imm...
About Immersive Web: immersiveweb.dev
Guide to screen sizes for responsive design: www.browsersta...
Flexbox Froggy (a game to practice flexbox): flexboxfroggy.com
Optimizing for large-scale displays: css-tricks.com...
List of screen sizes: screensiz.es
Responsive Web design article: alistapart.com...
Global browser and platform stats: www.w3counter....
Neocities: neocities.org
// ✨ Let's connect:
Twitter: / juxtopposed
CodePen: codepen.io/Jux...
------------------
#nostalgia #webdesign #responsivewebsite
![BabyChiefDoit - Too Slow (feat. STAR BANDZ) [Official Music Video]](http://i.ytimg.com/vi/zayaxws7RPg/mqdefault.jpg)
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
I guarantee you, this channel will be the “Every Frame A painting” of ui design
Great reference!
Abandoned?
Best storyteller on RUclips 👑
Wirtual wants to have a word
i love the cats in between
After a long time, I'm watching a quality content on RUclips. Thanks.
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.
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".
the 80 character limit per se, yes. However its a known usability issue that text should not be too long as it becomes hard to track and read. This is also true for print, the recommended character length is around 50-75, which is pretty close to 80. So the readability point still stands.
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 no. 500mb of ram. What will my 16gb of ram do when 500mb is used up...?
I just finished watching all of your videos. Finally! Another video!
Back when centering a was a great accomplishment
I think it's absolutely brilliant to explain so much in such a short time, all while being clear and humorous!!!! 🤯
6:04 Make sure you do your magic down below 💀
its nice to learn about this in a small video, really helps understanding why float is a thing when flex boxes are simply superior.
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.
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 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!
dude, you inspire me to become a front dev
Ouuuuuu FAVORITE UI/UX DESIGNER ON YT
not sure if the thumbnail is a reference to the movie but if it is i love this channel 10x times more
ngl this is by far the best explanation on responsive design I've seen lol
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.
I had to write an email that would look the same across various email clients. Turns out that desktop outlook is absolutely terrible at rendering HTML, including not supporting border radius and many, many more CSS properties. So for stuff like desktop outlook you still have to use dumb tricks to get what you want.
Amazing video, a must see for everyone that says that web development is easy
i lovee watching your videos, they are of perfect length, perfect storytelling and perfect information, so much fun to watch!!
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.
ngl the *big space* old design looks cool as heck and i wanna make it on my website
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!
AHH A NEW UPLOAD!!! One of my fab topics thank you soo much
Amazing video, it's been only 10 days and I cannot wait for your next masterpiece
Neocities goes so hard I was looking for a place to find retro inspiration 😮
Somehow watching this makes me realise that I'm in an industry that constantly makes me feel I'm a newbie and have to keep learning new things.
reliving all the horrible implementations of my previous websites one phase at a time lol
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!
You could do 90% of what you do with flexbox, using floats. So having columns/panels shift around in different viewports were possible even before flexboxes were a thing. It was harder to do and had a lot more limitations.
This video is how I imagined my presentation on the history of the web sounded. Which was nothing even close haha. Amazing video!
Lets not forget about:
Wish I had this in my web design class 3 years ago 😭😭
liked the title, best movie I've ever seen ❤️
You're the definition of edutainment.
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.
You deserve way more subscribers!
This video is so well done
Always a great time when Juxtopposed bends me over with a new video!
I like the Movie reference in the Thumbnail.
The first half of my career in a few minutes! Great video
This is basically my 5th time request for a linkedin ui revamp
You have a talent for edutainment.
Good and fast history lesson!
I would love to see a redesign of game launchers. Such as Warzone, Fortnite and League of Legends. Games that have a messy lancher in my opinion.
Great videos, you are very creative and organized. Keep up the great work!
I took a break from work to cry myself out about some CSS issues, only to find out I forgot about 4k/27" and now need to design for VR as well.
Amazing video, as always your videos are top notch!
now i miss hammering px values in my css, thanks
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
- 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.
You’re great at explaining these things!
for introducing me to webXR, u just earned a sub!
Now i want to learn to fit everywhere
love what you're doing!
omg i had that BenQ monitor
Very Informative Video, Thanks for making this one
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.
Ma'am, you just earned my heart
I think I found my new fav youtuber
Wonderful video as always keep it up🎉
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.
Your videos are so good! Thank you. Would love to see a video about all the new AI tools that designers could use. Thanks!
Great video as always!
love to see you do wordpress dashboard redesign looks so outdated
Where were you when I had to do my Final Year Project back then 😭😭😭😭
I rember making a website not long ago for ahh fun and thinking that making it compatible with mobile would be dark sould lvl... but thank to media screen max width its actually easy 🔥💯
(It even actually look be'er on mobile actually now lmfao)
Her voice just melt my heart...
“we've got responsive design only in 2010”: okay, zoomer
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!
Background music ❤
What a good video ❤😊
" a little bit of everything, all of the time"
The vast majority of websites to this day just doesn’t work on mobile. Just the other day I was at LAX airport which is massive so you’d think their website would work on mobile which almost everyone at an airport has and yet it just doesn’t you have to scroll from side to side to see all the information about the flight and in landscape mode you couldn’t even see a single listing due to the enormous navbar
Raw HTML + let the browser handle the layout is the best solution that we'll never get.
I've been making websites since 1995. I really dislike having to design for mobile and trying to get sites to work responsibly.
you should title this "history of the entire web, I guess"
Another great video!
i would appreciate a redesign video of Ultimate Guitar - the home of all us musicians
I love these videos
5:00 lol, that's literally me.
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)
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.
It's called website responsive they used @media query rule in CSS the website scales depending on the screen width.
Oh man, i havent read AListApart in years.
Pls, make the shortest Webflow course 🙏
little history sesh I see!
Excellent video
Who remembers og thumbnail
Why does your voice remind me of my favorite teenage drama video essayist, do you go by QuinnCurio sometimes?
spoiler alert: they dont.
Please make a complete UI redesign video on RUclips music (the web version preferably) ❤❤
Thank you for the video
I love your cat stickers 🐈
I LOVE!!! SO COOL!
Nice vid
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😅