Learning about responsive web design

Is there a single definitive and comprehensive resource for learning about responsive web design? It seems like there’s a million different things involved, and all the resources I can find online treat the topic piecemeal. This is making it difficult to put together a coherent approach for actually putting responsive design into practice.

Pretty much, just use CSS grid for sizing your content on the page instead of the built in container class that most css frameworks come with these days.

Use media queries to determine what size of your window is, and always use rem's for sizing instead of exact pixel measurements.

https://gridbyexample.com/examples/

Here’s a great video to explain why CSS Grid is the future of responsive web design. I myself am using it in all of my projects.

5 Likes

Nice, this seems like just the sort of thing I needed. Thanks!

1 Like

Also Pro-Tip I see a lot of people not following. Don’t set your media queries to “well known” or “typical” device resolutions. Rather you should play around with your page at different sizes, resize it during development, and whenever it looks shitty because something got squashed set a break point there.

2 Likes

That’s a good tip. A lot of what I had read previously actually did use these supposed standard sizes, which I thought somewhat defeats the purpose. Now if only it wasn’t necessary to set break points at all, but its equivalent functionality could be derived dynamically from what’s being displayed.

This should be standard and is probably mentioned in @Dynamic_Gravity’s video , but a good way of designing is specifying width by em instead of px. That way, you get an accurate visual for screens with other DPIs (such as mobile and tablets), regardless of their scalings.
Edit: Both Firefox and Chrome/-ium allows you to switch to a “responsive view” in the inspector (F12), where you can freely resize the page for any aspect ratios

Personally, I also think that works great on desktops - when you have a browser at 1/4 width of the screen, I prefer having non-content aspects of the page collapsed.

That stems from a time when there were basically 3 sizes on the market, HD and Full HD smartphones, and iPhones. And because people are lazy and/or don’t know and/or don’t care it’s still around.

Theoretically probably possible with JavaScript, but probably more work then use.

While true, this depends on the element you are sizing.

Well, noone ever said responsive design was only meant to be for mobile right :stuck_out_tongue:

True, true! I meant specifically when doing the @media screen and (min-width:xx)

I agree with everything you say : )

Using JS was the old way of doing this and now should vehemently be avoided.

The reason for this, is the the “movement” functionality which could only be achieved with JS back in the day is now full built into the CSS spec, with CSS Grid.

This is important, because you will not have to keep track of changes in your state as this is crucial when using a modern framework like Vue, React, or Angular; which all utilize a virtual DOM and need to maintain all the state at all time.

If you have using some custom js to muck around the page there wouldn’t be way for the framework to know and it would cause headaches.

I’m a little … drunk at the moment, but don’t forget the:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Responsive can be a pain, but there’s plenty out there for something something

1 Like

Didn’t know about CSS grid until recently. It’s amazing that it took this long for CSS positioning to not be broken. It’s 2018!!! Like sheesh

Its actually been a thing since 2012, but the draft wasn’t officially ratified until recently.

And also wasn’t supported by major broswer vendors until recently; edge being the last one to support it, with IE11 only supporting basic features of the api.

Nobody recommended Laracast yet?

Skewed to PHP and Laravel, it goes over modern web design.

I haven’t used laracast.

That’s likely why. However, the thread is about responsive web design which is mostly focused on css and meta tags.

Laracasts has series exclusive to CSS.

Neat, anything you’d reccomend?

That’s what I meant to say :wink:

Gotta say I haven’t read much into it yet, since I don’t have any recent projects. But as I understand this isn’t really an all-round tool either but should be used for specific parts. It seems very useful though.
But I vaguely remember that (provided I understood the concept correctly) I have done similar things before, pushing down content blocks when there wasn’t enough space… Maybe I misread it though.

Yeah. Used for the responsiveness and breakpoints. Also, clearfix is no longer a thing when you use css grid; which is fucking amazing.

Probably with flexbox then, both should be used in specific circumstances. They’re both wonderful.

You’re gonna think I’m crazy… But I guess not. I could have sworn they had CSS courses.

Wait! FOUND IT! Just had to scroll lmao:

Jesus. That was embarrassing >_>

1 Like

I just remembered how I did it before, but obviously it’s quite a bit more work.

It’s quite a lot more work when you get more elements because you have to scale for every breakpoint and it just becomes a huge pain in the ass…