Can we talk about how CSS art looks totally different on my phone vs my laptop

I was showing off a CSS landscape I made at a meetup in Portland last Saturday, and someone pulled out their phone and the whole thing fell apart. The gradients looked washed out and the shadows were all wrong on their smaller screen. Has anyone else run into this issue where your CSS art looks perfect on one device but garbage on another?

2 comments

2 Comments

troy_butler713d ago

Man that whole "looks perfect on one device but garbage on another" thing hit home hard. I spent like two weeks on this CSS landscape with a sunset gradient and it looked amazing on my iMac but completely fell apart on my buddy's Android tablet the colors were so off and the clouds just looked like blobs. What finally worked for me was testing on a bunch of different screens early on like before I got too deep into details. I started using Chrome's dev tools to simulate different screen sizes and also borrowed a friend's phone to check contrast and shadows. The key for me was simplifying my gradients down to like three or four stops max and adding a fallback solid color behind everything so it doesn't look totally broken if the gradient fails. Also made sure to not rely on super specific pixel values for anything like shadows or blur effects because those scale weird across devices.

blaker7512d ago

Actually, Chrome dev tools lets you simulate specific devices but not all color rendering differences across actual screens.