Coding modern layouts with HTML and CSS [closed]

Question

I've been working with web design since 2009 and now I'm having a hard time with how to code modern layouts with HTML and CSS. I'll explain my question: when I began working with web design the process was to first create a mockup in Photoshop or Fireworks, and then look at the mockup to pick the measures, colors and eventual images that would be needed.

There was no problem in setting some element with a certain width because we planed just for one resolution. Resolutions below would need to scroll horizontally and resolutions above would see space with empty content. Also, if an element should be 20 pixels bellow another there was no problem setting a margin top and things like that.

Now there's all of that modern stuff from responsive design and so on, in which modern layouts should adapt to the resolutions. It seems kind of confusing then to keep working as I did in the past. Also, I've researched about CSS best practices and now I've found lots of things regarding less usage of ID's and more usage of classes and so on, things I've not seem when I started.

Are there some good resources like videos and tutorials that are good to get up to date with those modern practices?

Answer 1

I believe the short answer is "No." That's not helpful so I'll share some of what I have done that seems to be working.

I have been handling this by developing pages in the old same way, but now you also have to decide what the appropriate mobile version might look like. I typically start with making sure I am using this meta-tag in the header:

<meta name="viewport" content="initial-scale=1.0, user-scalable=no">

Then the CSS has something like this:

body {width: 1000px; margin: 0 auto; }
@media only screen and (max-width: 600px) {
    body {width: auto; }
    /* All other mobile styles go here*/
    img.superfluous {display: none; }
}

This will take a floating fixed-width layout and turn it full screen when things get too scrunched. The mobile design is probably moving from a 3-column layout to a 1-column layout. Your most powerful tool is hiding as much superfluous graphics as you can. There is no room for that stuff on an iPhone. Then just stack all content on top of each other.

If you are the person developing the mockup I strongly encourage you to skip Photoshop and make the prototype right in HTML/CSS. That way you can work on the desktop and mobile versions simultaneously.

I honestly don't know what you've been reading but it worries me that it suggested to use less ids and more classes. That sounds like nonsense or worse, object-oriented CSS. Just keep focusing on writing maintainable and modular code.