I’m confused about responsive design. Input?

[nixnerd]

So, the other day I started a thread about background images. A bunch of people had a ton of input and someone posted a video about compressing photos. Well… actually, it was about MUCH more than compressing photos. A large portion of the video had to do with mobile design and responsive design. I started watching the video for one thing and went down a whole other rabbit trail that caused me to question my own existence… ok maybe that’s going too far. It did however make me question my approach.

I’ve only created one responsive site and in my opinion, it wasn’t executed all that well. I guess since then, I’ve just viewed responsive design as another passing trend that will be eliminated with the new web standards. That was pretty ignorant. We JUST got HTML5 and CSS3. Chances are it will be awhile until something else comes along. Probably around the time the Playstation 5 ready to drop. Even then, it’s a HUUUUUGE assumption that responsive will be dead.

I now think I need to get with the times and start coding just about everything to be responsive. Now, I understand the philosophy behind it and I’m fine with that. But where can I get some practical yet general tips and practices? I’m looking for responsive 101.

The reason I’m here is I’ve tried Googleing something to the effect of “responsive web design how to” and “responsive web design for beginners” and I’m suffering from information overload.

No matter how good the ol’ Google Machine may be, I would have NEVER found that video had @AlenAbdula not posted it. I’m looking for that same type of thing. Does anyone have any great resources for diving into responsive?

[Senff]

Best resource for Responsive 101 is Ethan Marcotte, the guy who actually started it all:
http://alistapart.com/article/responsive-web-design
http://www.abookapart.com/products/responsive-web-design

[Alen]

> I now think I need to get with the times and start coding just about everything to be responsive.

Not every project is best fitted to be responsive. Once you have enough experience working with various solutions, research and analysis of project requirements, you can make informed decision what fits the best. Keep that in mind, just because fixed solution doesn’t seem popular on the internet doesn’t mean it’s not the right solution for particular project. I guess all am trying to say, don’t decide this is right and this is wrong, think of it as… toolkit at your disposal.

Web was always responsive. It is the leakage of print design that put constrains on our way of thinking. And all Ethan did was think outside of the box. And he labeled it.

As for where to start, by far the easiest to digest: http://bradfrost.github.io/this-is-responsive/resources.html

[Alen]

Also, don’t try to tackle all issues at once. Everything that seems complex can be broken down to smaller pieces. So dedicate couple hours each day on reading the resources listed above, but keep a mental note, not to try to understand every problem/solution… focus on one particular thing at a time. I see you posted about Flexible Grids, don’t think about those now… again you are limiting yourself to the grid. You don’t need a grid to do responsive. Grids are used to organised content, only use them if they are trully needed. Don’t just assume you need them all the time.

Also,

Everything is hard before it’s easy!

I’ve made this for someone here while back, it gives you basic breakpoints for Mobile First approach. http://codepen.io/anon/pen/qkzms (resize the window)

Hope that helps. Alen.

[Alen]

This is a good talk as well:

http://vimeo.com/68965033

[Alen]

All videos: http://vimeopro.com/mirabeaunl/mobilism-2013/

[KnowledgeJunkie]

i faced the same problems before starting responsive. Currently i use media queries. I got the knowledge about this stuff when i came across a [page](https://css-tricks.com/snippets/css/media-queries-for-standard-devices/ “”) here in css-tricks, during my weeks of research and info overload.

[KnowledgeJunkie]

you could refer to this [site](http://justbuildwebsites.com/ “”) also regarding responsiveness.

[Author]

Posts