DEV Community

Discussion on: Stop making responsive websites the hard way!

Collapse
 
ghost profile image
Ghost

I think is even simpler than that, default html and css are perfectly responsive, accessible and boring, everything you do to make it less boring has some level to "un-responsiveness" and "un-accessible" attached. We should be clear in what is our objective, is to showoff our amazing skills doing all kinds of shinny effects? or is to clearly deliver information, making the process as pleasurable as possible?, a nice 3MB 30%CPU animation may show how clever you are, but probably does nothing to make the site better, we have to let go our ego and think about the user/client, you want to showoff? make a blog, make a personal portfolio or something. Is a carousel the best way to deliver? is worth the extra code, the extra resources?, the fact that without JS becomes a mess?

Your **designers* were so preoccupied with whether they could, they
didn't stop to think if they should.*

  • Ian Malcolm (Jurassic Park)

Then as the author says, start simple and whenever you consider adding something, ask yourself how will this affect the responsiveness and accessibility of my site?, adds to the purpose of it?, is worth it?, Trying to "clean" a huge codebase is almost always harder than build clean code.

And always remember responsiveness and accessibility is in fashion now, but is far from a new concepts.

I'm not involved with the following links but the have offered me inspiration

motherfuckingwebsite.com/
bettermotherfuckingwebsite.com/

Collapse
 
devuxer profile image
Dan M πŸ‘¨β€πŸ’»πŸŽΎπŸš˜πŸ³οΈβ€πŸŒˆ

I love motherfuckingwebsite.com/, and I really love bettermotherfuckingwebsite.com/, but let's face it, they're text. If you can't make a pure text page responsive, you are doing it wrong. Things get a lot more challenging if you have tables, lists, cards, buttons, icons, and images. Here, not everything is readable or attractive if you just let it flow naturally and break wherever it feels like. Titles need to align properly with values. Things belonging to a group need to cluster together, not wrap from the end of row 2 to the beginning of row 3. The dev.to page I'm looking at right now has three columns in desktop mode. If I switch to responsive mode, the side columns go away and the left column moves to the bottom. Are these "shiny effects" or real functionality that makes it easier for users on larger devices to discover more features and content?

Collapse
 
ghost profile image
Ghost

Of course, having that in mind, browse normally and think what parts of it are actually adding and what is subtracting from the goal, sooner than later you'll notice how much is not only useless, is actually worsen the experience. Tables, list, "cards", buttons, icons, images and forms are easily done without any JS and responsive, just well applied CSS. Of course you can add as much eye candy you want, unless it takes away something more important, dev.to is a good example, all they have done and yet the page is very fast, works very well and doesn't eat halve my RAM nor my poor little CPU, more evidence that it can be done.

I've yet to see a carousel that actually make things better, to me are always annoying, a 5MB hero image taking the whole viewport with a button in the middle to go to the content has never made my experience better, it actually make me scroll for nothing and click for the same reason, background animations, or any animation for that matter, stock images, etc. Why would I want to wait for a photo of a coffee mug with papers in a desk or of a random office in the middle of a presentation?, the thing is that people often go straight to JS, even JS for links and static images for god sake. Rarely things are absolute, of course it may exist a case for carousels, just like the case for having an AK-47 and grenades, do I think those are most of the cases?, that when you buy a house those are the first items I purchase? would be the world a better place if more people have an AK-47 and a couple of grenades? I don't thinks so. Should we eradicate AK-47 and grenades because nobody needs them? I don't think so either. I would eradicate JS carousels tho :)

And in fact all of the "shinny effects" you mentioned can be done with CSS, just good old CSS. You can actually do a lot with flexboxes and grids nowadays and you can always use media queries to depend on the viewport size, I hate them, but you can. Of course you may have to make an extra effort and be more clever but the same had to be done with the goto idiom, of course it helped to make some stuff but it wasn't worth the cost. Using a lot of JS may feel more great, powerful and awesome than CSS but we are working to make good things not to boost our ego, well..., we shouldn't.

Thread Thread
 
devuxer profile image
Dan M πŸ‘¨β€πŸ’»πŸŽΎπŸš˜πŸ³οΈβ€πŸŒˆ • Edited

I definitely agree that most layout can and should be done with plain HTML and CSS, and I also dislike obnoxiously large hero images and carousels. Gimmicks are bad, but features that empower users are good, and some of these features are challenging to make responsive because you can't just rely on the natural way things flow on a page. This doesn't mean you can't solve these problems with CSS. You should! It's just not always going to be easy.