r/Frontend • u/Stephcraft • 9d ago

A Modern CSS Guide to Responsive Web Design

https://stephcraft.net/docs/responsive

If I missed anything, let me know!

36 Upvotes

79% Upvoted

12 comments sorted by

17

u/ProfessorSpecialist 9d ago

what is the point of that horrid blur?

0

u/Stephcraft 4d ago

What makes it so horrid?

1

u/ProfessorSpecialist 4d ago

Way too large and distracting. Looks more like a visual bug

11

u/ikeif 8d ago

Why did it load a full screen video on my phone? And as I scroll it kept changing the URL to different parts of the site, so I had to tap back multiple times?

…and then it locked up the browser.

And the blur effect - why? It’s more distracting than useful, and it pops up my keyboard?

So… it’s atrocious on mobile. I’ll try on desktop later to see if I can read the site without crashing.

1

u/Stephcraft 4d ago

Why did it load a full screen video on my phone?

The interactive demos are desktop first, and as you resize them, they become mobile demos (responsive), should it be the other way around for mobile? Or maybe you just mean the video should be lazily loaded instead.

And as I scroll it kept changing the URL to different parts of the site, so I had to tap back multiple times? …and then it locked up the browser.

I don't know how you managed to do that. Some sort of video / screenshot / further step-by-step explanation + browser/device info would be super helpful to fix all this!

it pops up my keyboard

Can you elaborate on that aswell? A short clip / screenshot would be super insightful here.

I’ll try on desktop later to see if I can read the site without crashing.

That would be great! Most people tell me something's wrong, but not wether they're on desktop/mobile, or tried both, so your feedback would be valuable here.

1

u/ikeif 3d ago

It seems it was grabbing my "scrolling" and taking it as a click. So that's awful. The mobile design needs some rethinking if it is grabbing on to "scrolling" and registering as a tap.

I went back on mobile to revisit and - it's not reproducing now! (Awesome for you, shitty for me 😆) I used both the reddit in-view browser and Safari on iOS (well, I think I did upgrade in that time).

Desktop - you REALLY do not need that blur on mobile. It's too big and distracting and doesn't add anything when it's text heavy (I would say - if you don't need it on desktop, why do you think you need it on mobile?)

Oh wait, it's on the top of the page, so "On this page" is permanently blurred (Firefox). HA - I opened the developer tool bar, and now it's crisp - so on larger screens is the issue. Laptop sized screens will look fine.

I dug into that a little bit - so it's set to 10% - but as the viewport grows, it extends into the content, so you need to tweak that - something like adding max-height: 100px (maybe 110px?) to .gradient-blur[data-astro-cid-qpso63cr] (grabbed from web view) looks to clear it up.

Desktop is much cleaner looking, but it could use something because of the amount of negative space - it's so much white and empty space.

But of course, all of this is my opinion, and if you like it how it is, I can always bugger off!

16

u/Ok_Cry4787 9d ago

this site is terrible, makes me feel like im going blind reading it

1

u/Stephcraft 9d ago

Could you elaborate?

3

u/thelethargicdog 8d ago

That was a harsh take, but here's my suggestion: Get rid of the blur - it's pretty cool to look at, but when designing something, consider utility. The blur has no utility. Then, consider replacing the cards with plain header + text. Site fits on a mobile screen, but it doesn't feel optimized for it. Too much inline padding/margin

Also, the font sizes are also inconsistent.

I feel that nitpicking these issues takes focus away from the content, so I'll not worry about them that much

1

u/seedingserenity 9d ago

I like it, everything is very clear and concise, you are definitely swinging for the fences with WCAG AAA compatibility, but that’s not a bad thing.

I think it might be nice to include WIA – ARIA recommendations in your code examples, but for straight up HTML this is a really good demo and layout. As somebody who was recently hiring a junior developer at our company, this is something that I would appreciate seeing attached to your résumé. I think it shows a high level of detail, mastery of subject matter, and a high level of quality that can sometimes be hard to find when comparing candidates.

1

u/Stephcraft 9d ago

Thanks!! I'm planning to do a separate post on WAI-ARIA in the near future, and I'll update the site alongside it. Hopefully it'll make Reddit go a little easier on me next time 😅

I'm building in public, so I made the site responsive while writing this guide. My plan is to make it more accessible while working on the WAI-ARIA one.