responsive design on a grid
- Started
- Last post
- 41 Responses
- fourth
I feel like a retard.
I learned about media queries (makes perfect sense)
I learned about responsive images (meh)
I found a framework I'd like to build my site on ( http://framelessgrid.com/ or http://goldengridsystem.com/ )
I've looked at the html and css and now I'm sitting here scratching my head and have no idea how to start building????
help?
- ********0
templates
- bulletfactory0
this may sound ridiculous, but...
do you have a design?
- sherm0
I found this site for inspiration
http://mediaqueri.es/I have another resource for a responsive grid system but you can google it and pick one or just go from scratch. It's not that hard.
- fourth0
bulletfactory-
yes I do but I'm sitting here with a fixed width design... and my head is spinning with all of these percentage calculations.
- nocomply0
Just slow it down and take it one step at a time. I think Ethan Marcotte (or one of the other big wigs on the subject) was talking about building from the inside out at the ALA conference earlier this week. It's the idea of building and stylizing responsive text and images first, and THEN building the container around them. I'm not sure if that'll help or make your head spin even more. But take that as a suggestion to do baby steps first.
I'm new to the concept as well and my first attempt at a responsive design took ages. In fact, I'm still not even 100% done with it. You just gotta go for it, even though it's slow and painful. After you get started things will start to make more sense.
Regarding the fixed width design... I use the original width the design was made at as my max-width (usually 960px) and then make responsive breakpoints for smaller screens. So basically the website never gets wider than 960px, but on smaller screens it adjusts and becomes responsive.
Hope that helps some.
- fourth0
alright nocomply...
Yeah I've been reading some of Ethan's stuff. I'm going to try and just start out with the type and going from there. All the concepts seem pretty simple but I just keep staring at my layout wondering how I'm going to keep everything tight on the grid if it's "all moving around". If that makes sense.
- sseo0
Download something like http://csswizardry.com/inuitcss/… or http://html5boilerplate.com/ or http://www.getskeleton.com/
Pick it apart or refer to it when you're not sure what the best practice is to do something.
Get inspiration from http://www.teixido.co/ or http://www.dolectures.com/ or http://trentwalton.com/
???
Profit
- alicetheblue0
^ heard good things about *skeleton*.
- doesnotexist0
tables.
- fourth0
alright thanks guys, you've been good help.
one last question... do you guys have any good links regarding responsive images? I'm still confused on how to handle them (how to serve different images for different devices, etc)
thanks again
- tymeframe0
I second the book in the note above. I just finished reading it. It really breaks the process down in a simplified form. Quick read too.
- Daithi0
For quick and easy implementation —
http://cssgrid.net/For a more complete setup —
http://foundation.zurb.com/
- 3030
I started using this one (16 cols) -
http://www.getskeleton.com/Works really well.
- nocomply0
I'm finding that responsive images are a bitch. In his book "Responsive Web Design" Ethan talks about wrapping each image in a div with a percentage-set width.
That approach seems to work if you have the ability to manually create a div around each and every image you place in your site, but it doesn't work if you use a CMS like WordPress and have non-technically-inclined administrators populating the site with content.
I spent a lot of time working on that problem and created (sort of) a solution for it. Check out my blog post at http://www.evanwebdesign.com/201…. (I say "sort-of" because I feel that it's not a perfect solution, but it works fairly well for the time being.)
In the end, I'm finding that there just aren't any perfect solutions currently available. And I think others are finding more or less the same thing.
- fourth0
nocomply,
thanks for that. I haven't tried it out yet but I do have an upcoming wordpress project that will definitely need that. thanks!
- IRNlun60
Great for testing responsive design.
- Countryman0
Dude if you use something like http://www.getskeleton.com/ all of the percentages etc... are made for you. I think your problem is that you want EVERYTHING to scale as you resize the page, but with skeleton, I am pretty sure it says at one width until you hit the tablet width and then the layout changes via media query.....
- rocketrichard0
I vote for Skeleton as well. I use it for my projects.
- utopian0
Here are few of my "Responsive Design" bookmarks:
http://thinkvitamin.com/design/b…
http://www.fastcodesign.com/1665…
http://designmodo.com/responsive…