1

I've been designing websites for a while now and haven't had any complaints, surprisingly. But, there's one thing that bothers me quite a bit. I'm slow. It takes me, on average about an hour to style 1 webpage (a full webpage incl. content, images, text and so on) - and I don't know if that's how long it takes most people?

And I always run into the same problems over and over again (even though each time I use a different way, based on what I learned last time), which causes me to constantly re-align, re-adjust, re-write.

I know I'm doing something wrong, but I just don't know where anymore. When my pages are finished, they're great, but there's always some very tiny, but noticeable differences between each browser - and it really * me.

Below is HTML & CSS for a generic, empty webpage. Maybe you could be so kind as to tell me what you think is wrong with it, and how I might be able to better it?

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <title></title>

    <link rel="stylesheet" href="" />

    <meta name="author" content="My Name" />
    <meta name="keywords" content="sample, keywords, keyphrase" />
    <meta name="description" content="A sample description." />
  </head>
  <body>
    <div class="Wrapper">
      <div class="Header">
        <div class="PresentationArea">
          <div class="LeftSide">
            <img src="" alt="" class="" />
          </div>
          <div class="RightSide">
            <h1>Heading</h1>
            <p class="PresentationDescription"></p>

            <a href="" alt="" class="StyledButtonLink">Learn More</a>
          </div>
        </div>
      </div>
      <div class="ContentArea">
        <h2></h2>
        <p></p>
      </div>
      <div class="Footer">
      </div>
    </div>
  </body>
</html>

CSS

/* RESET -SOME- STUFF */
*{border:0;border:none;padding:0;margin:0;}

body {
}

a {
}

p {
}

h1,h2 {
}

.Wrapper {
  width: 960px;
  height: 100%;

  margin: 0 auto;
}

.Header {
  width: 100%;
  height: 31px;


}

.PresentationArea {
  padding: 5px 0 0 0;
}

.LeftSide {
  width: 65%;
  height: 250px;
}

.RightSide {
  width: 35%;
  height: 250px;
}

.PresentationDescription {

}

.StyledButtonLink {
}

.ContentArea {
  width: 100%;
  height: 350px;
}

.Footer {
  width: 100%;
  height: 31px;

}

Any help is greatly appreciated

Thank you

Improve this question
3
  • "there's always some very tiny, but noticeable differences between each browser" - what browsers, what types of differences? Commented Mar 6, 2011 at 21:52
  • I forgot to mention what differences, sorry. I am updating my question to include them. Commented Mar 6, 2011 at 21:55
  • I don't really see anything wrong with the HTML, except the a tag should not have an alt attribute. Commented Mar 6, 2011 at 21:57

2 Answers 2

Reset to default
2

How long to style a web page?

It all depends on what is in the page! When I assess a project to set a project price, I assign a time value of anywhere from 2 to 4 hours per page. On average, for a 10 to 20 page website, I found that allowed me enough time to develop semantically meaningful mark-up, concise and robust CSS, and integration into a content management system.

Some pages are complex and take more time, for example, image gallery pages or tables of structured data. Depending on the amount of JavaScript/jQuery or PHP/MySQL that the page might need, it could took a day or more to build a page.

In other cases, for example, biographical pages where you have a simple header, headshot/image and two paragraphs, you can easily get a set of 10 pages done in an hour.

How to speed up the mark-up process

I try to keep a consistent approach to using padding and margins. For example, I tend to use non-zero margin-bottom values for headers and paragraphs and zero out margin-tops, although others do it the other way. I also use a proper reset style sheet (see above suggested by Andrew Marshall).

I also pre-style my headers (h1 ... h6) and lists and so on so that I have a generic default typographic style that I can use as scaffolding for each site that I build.

Cross Browser Pixel Perfection

I am a great admirer of Dan Cederholm (author of Bulletproof Webdesign, Hand-Crafted CSS) and I agree with his approach that web pages just need to look good in all browsers and work properly. They don't need to be pixel perfect across all browsers. Most of my clients will not pay for the meticulous coding needed to make pages perfect across all browsers.

Having said that, I use one or two hacks to fix IE oddities now and again, but I don't get too concerned otherwise. The main thing that I look out for are block element widths (IE box model issues) that can break a float-based layout.

My HTML/CSS Framework

I tend to use a fairly generic 3 column design so I have a basic page layout and associated style sheets that I use to start all my website builds. This saves me time.

In the future, I will have more standardized 1 or 2 level menus (horizontal and vertical layouts) and some generic turn-key contact forms with client/server side validation.

Closing Comments

I am a one-person shop and I often build websites for other graphic designers. I fall on the developer end of the web professional spectrum.

I have been in business over 7 years and love the work.

I also read a lot of books on CSS and HTML, much to the despair of my immediate family.

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Thanks so much @Marc, you've given me plenty to think about.
1

For one you should include

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

in your HTML <head> (and also ensure that everything is actually UTF-8 encoded).

I'd recommend using a separate, "full-on" CSS reset stylesheet. You might want to look into using a CSS framework such as Blueprint or 960.gs (these usually include a reset by default).

I think it's convention to have HTML IDs and classnames be all lowercase, with hyphens (or underscores) where spaces would be.

It's a good idea to run the W3C HTML Validator on your HTML as well, this ensures that you're not doing anything that violates the HTML specification and thus reduces the potential for unexpected behavior.

Improve this answer

2 Comments

+1 for "full-on" reset. Some tiny differences are going to disappear.
Thank you for your advice and links, @Andrew Marshall!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.