Responsive Webdesign

Elmo wrote: »

I have implemented a 960px type framework across all of my sites. I want to be able to allow the sites to be responsive to screen size. Is there a simple way of doing this in CSS.

Sorry for my use of terminology (I am sure the thread should be title something else).

Look up CSS media queries.

If you want a responsive CSS framework there are three established options:

Bootstrap has everything you will ever need to bootstrap a project.
Foundation has just the things you need for the foundation of a project.
Skeleton which is a light CSS framework that has responsiveness stitched in. I haven't used it but I have been told that it is similar to 960.gs

The latest framework which looks promising is Semantic UI.

The other option of course is to roll your own by adding CSS media queries to your existing code.

Elmo wrote: »

I want to be able to allow the sites to be responsive to screen size. Is there a simple way of doing this in CSS.

The short answer here is: Yes.
As mentioned by Manc Red, look up CSS Media Queries. These allow you to write certain styles based on, for example, the screen size the page is being view on. So something like:

@media (max-width: 600px) {
  .menu {
    background-color: blue;
 }

On screens 600px wide and below, the 'menu' background colour will be blue.

There's lots of frameworks out there, such as Twitter Bootstrap, that handle a lot of responsive aspects for you that you can use. I completely get why ThrowinShapes and others have issues with things like Bootstrap, you can end up spending a lot of time stripping out things you don't want. If you're just getting started with responsive design, something like Bootstrap can be a useful learning tool, as it has just about everything you'd need as part of the framework. If the site is simple enough, Skeleton is good. Light weight, as mentioned, but it's good for just putting together a very simple site and going "OK, this is responsive design, now I get it".

What I've found myself doing, like ThrowinShapes is stripping various things out of Bootstrap and saving them, creating my own frameworks, based on Bootstrap. I've found this pretty useful to be honest, I can pick and choose which CSS, JS files to use based on whatever project I'm creating.

When you say "I have implemented a 960px type framework across all of my sites", do you just mean you designed them in something like Photoshop using a 960.gs grid or something, or is there an actual framework that you used when you were coding up the sites?

(We) May need a little bit more info on what frameworks or coding bases you've used so far when creating your sites

I recently used foundation to make my clubs website look better on mobile devices it was fairly straight forward. I used the tutorials on lynda.com to to guide me through it, you can get 7 day access for free regularly on their facebook page.

mewso wrote: »

I'm all for the media queries but I am really confused at the popularity of piling divs into your html all over the place a la these frameworks. A serious backwards step to my mind but perhaps I am misrepresenting them.

I'm inclined to agree. I'm not sure that 'popularity' is the right word for it though. I think it's more to do with a degree of laziness. We've spent years trying to not have divs inside divs inside divs (at least I have) as it wasn't nice to look at and there was a lot of unnecessary code in there when all you had to do was think about the page structure and write your css accordingly.

I think the laziness of it now is that there's lots of layout orientated css in frameworks so you can just drop and div in a div in a div and the css will handle the appearance of it all somewhat satisfactorily. But really, you've probably now got about 60px of unnecessary padding going on now.

I've started reviewing code in more detail now (using Bootstrap at the moment mostly) and adding a class as high up the 'div chain' as I can and writing css for things there so that you don't have the div in div in div thing going on. Just takes a little more thought and just a bit more work, but your code is far more minimal, so to me it's worth it.