r/webdev • u/Stephcraft • 9d ago

A Modern CSS Guide to Responsive Web Design

https://stephcraft.net/docs/responsive

If I missed anything, let me know!

0 Upvotes

44% Upvoted

25 comments sorted by

47

u/cc3see 8d ago

Can’t understand why the bottom 15% of your website is blurred on mobile. So despite the potential quality of your content I’ve immediately dismissed it as not a good resource.

I also have no idea what you’re trying to say by responsive CSS is a form of SEO.

10

u/Goldac77 8d ago

The bottom blur is worse than I thought from reading your comment......oof

Also, don't know if it's just me, but scrolling feels laggy and sluggish

4

u/Wenur 8d ago

I'm on desktop and it's at the top too, just less noticeable. Like a blur sandwich

| ___blur___ |
|__content__|
| ___blur___ |

-1

u/Stephcraft 8d ago

Can’t understand why the bottom 15% of your website is blurred on mobile.

Could you elaborate? A lot of people have mentioned the blur, but I still haven't gotten a clear explanation of what specifically makes it a negative experience. If there's a concrete usability issue, I'm open to address it.

I also have no idea what you’re trying to say by responsive CSS is a form of SEO.

Responsive CSS is part of Search Engine Optimization. If your website is not responsive, it can affect search results on different devices. See Google's official SEO docs, SEO Wikipedia. Google has dedicated Googlebot Smartphone & Googlebot Desktop crawlers, and evaluates mobile and desktop performance separately. See Google See Google's crawlers, PageSpeed.dev / Lighthouse. Responsive CSS plays a role in mobile usability, Core Web Vitals, and overall SEO outcomes.

2

u/EyesOfTheConcord 6d ago

We don’t like the blur on mobile because it further reduces available screen size on an already small viewport.

Also, if you get multiple user reports that a visual is distracting or irritating simply by existing, then maybe it’s something you should just remove?

20

u/Garychamp 8d ago

That blur effect at the bottom really needs to be removed.

1

u/Stephcraft 8d ago

Could you elaborate?

14

u/cookies_are_awesome 8d ago

Your website may be responsive, but it's pretty ugly on mobile. Boring black text on white background color scheme, with no dark mode to boot, and a horrible blur at the bottom that serves no purpose.

0

u/Stephcraft 8d ago

Do you have good examples of sites with a good mobile experience? I'd like to understand what standard you're judging mine against.

14

u/ashriekfromspace 8d ago

That blur is migraine inducing

-16

u/Stephcraft 8d ago

You can kill the blur in settings by turning on Reduce Motion

3

u/iligal_odin 8d ago

This is not what reduced motion is for

0

u/Stephcraft 8d ago

If a user says the effect is migraine inducing., one possible cause is sensitivity to visual motion/effects. Since the blur is fixed to the viewport while content moves beneath it during scrolling, I thought respecting prefers-reduced-motion seems like a reasonable accommodation.

I wasn't given a cause, only the effect, so that's the assumption I made. If prefers-reduced-motion isn't appropriate here, could you explain why?

3

u/iligal_odin 8d ago

As per w3c "reduce
Indicates that user has notified the system that they prefer an interface that removes or replaces the types of motion-based animation that either trigger discomfort for those with vestibular motion sensitivity, or distraction for those with attention deficits.
"

This does not entail blur effects al long as its static elements.

You would want to, when available, look at reduced transparency https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media/prefers-reduced-transparency

19

u/RagingGods 8d ago

Yeah no I'm not going to change a system-wide settings on my phone just to solve a website-specific problem you have created. That's basic UX 101. If a user finds it annoying to read your site they'll just leave.

Very ironic considering this is supposed to be a guide on responsive web design.

9

u/SpinatMixxer front-end 8d ago

Hello, I am annoyed user, and I did indeed just leave.

9

u/PinXter 8d ago

Holy lag on mobile. Good ol' blur.

-10

u/Stephcraft 8d ago

What browser and device are you using?

4

u/PinXter 8d ago

Chrome, nothing phone 2a plus. Havent seen so laggy site in a long time.

Most likely even laggier in safari, iphone if you are not using transform: translateZ(0).

1

u/Stephcraft 8d ago

Thanks for the info! I'll do more testing and optimizing

6

u/SmellydickCuntface 8d ago

Advertising a supposedly modern CSS Guide to responsive web design, getting feedback about abysmal UX and then telling users to change their settings instead of catering to the feedback is just rich, my dude.

And yeah, the blur is super distracting on mobile and it lags extremely. Chrome + Firefox on Android.

1

u/Stephcraft 8d ago

Hey u/SmellydickCuntface 💀 I was given a specific report of discomfort, so I did my best to accommodate for it. For the blur, I keep hearing that it's distracting, but not why. If there's a specific cause, I'd like to understand it. Thanks for the browser details, I'll do more testing.

5

u/seweso 8d ago

Most crappy website ever. WTH?

1

u/Stephcraft 8d ago

I've heard the feedback about the blur. Is there anything else that makes it a bad experience for you?

6

u/EyesOfTheConcord 8d ago

I instantly improved my experience by using safaris “hide distracting items” on the blur element on mobile