Home/ Questions/Q 4019798
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-20T10:08:58+00:00

I’ve been designing websites for a while now and haven’t had any complaints, surprisingly.

  • 0

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

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0