Harder, better, faster, stronger
Working in a fast-paced environment on a stressful project with a short timeline can easily take a knock on your development time and efficiency. Here are some tips to quickly get organized and get coding.
Review the designs
When you’ve first find out that you’re starting on a new project, ask the assigned Project Manager if there can be a period of time reserved before development for review:
- Resolve any inconsistencies between page designs
- Get all of the fonts being used in the design for sIFR or Cúfon
- Ask any questions that you may have about the design, for example: Does that box stay the same height, or will it grow with content? Is that text going to be part of the image?
- Bring up any potential issues and figure out a strategy for resolution before starting development
Build templates
When building HTML templates, it’s best to start with creating your global elements, then work towards specific page elements.
- Build out the global elements first
- The header and main navigation
- Footer or super/fat footer
- Secondary navigation
- Build the secondary page templates
- Make sure your layout works in all browsers after adding in some filler copy
- Build out the home page
- Build out important secondary pages or various landing pages
Know your browser bugs
Keep track of known issues you could encounter when building a page. The best way to prevent having to constantly cross-check everything is to stick with code that you know will work with multiple browsers. Try to not get too extravagant with your HTML and CSS. Sometimes even the code you think will work doesn’t.
When you know what bugs or differences in rendering you’re likely to encounter you can squash the bug and resolve differences before the QA cycle.
Choose a reset stylesheet that you can agree with
There are so many options out there for reset stylesheets. Many will change the font-size of all elements, which you may not want. Some will change the font-size to go with the hierarchy of tags [h1, h2, h3, etc]. You’ll be changing most of these values to match your design anyway, but what if you’re just working on clickable wire-frames?
What are some of your options?
- YUI Base - Sets default sizes for some elements
- YUI Reset - Sets all font-sizes to 100%
- MeyerWeb - Sets all font-sizes to 100%
- Blueprint - Also has helpful grid CSS for fast templating
- There are many more out there. Do your research and build your own if you want!
Options for IE6 specific issues
It can be a hassle to deal with 24-bit transparent PNGs. It’s the alpha-transparency that kills us, really. For inline images, it’s usually easiest to use something like DD_BelatedPNG. For background images that are added via CSS, always go for the CSS option: Microsoft’s AlphaImageLoader.
Both of these options run on page load, so they can slow down your page-load time. If you can avoid PNGs, stick to using GIFs. If you have no other option, approach with caution as functionality may be limited by IE6.
Some notes about AlphaImageLoader:
- The code:
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sProperties)- The only part you will need to change is sProperties:
src=””andsizingMethod=""
- The only part you will need to change is sProperties:
- The src is always relative to the page that you will be viewing.
- If the image is to be displayed on http://test.com/about/news/ and your image lives at http://test.com/images/news/transparent.png the src should read:
src="/images/news/transparent.png" - Note the preceding /. This means start at the root directory and work your way down. Simply putting
src="images/news/transparent.png"won’t work. - Normally in your CSS you may format the image paths relative to where your CSS lives:
background-image: url(../images/transparent.png);. This path formatting wouldn’t work either, because IE6 would then be looking fortransparent.pngin http://test.com/about/, where it doesn’t live.
- If the image is to be displayed on http://test.com/about/news/ and your image lives at http://test.com/images/news/transparent.png the src should read:
- There are three options for the
sizingMethodattribute, but usually it’s best to go with thescaleoption. This depends on what you’re trying to put a transparent PNG background on, though.scale: scales the image to fit within the constraints of the containerimage: scales the container to the size of the imagecrop: crops the image to fit within the container
Another issue to look out for is the use of floats, margins, padding and positioning, and a combination of the four in IE6/7. Making too many nested elements position: relative; will cause some of the items to be displayed in the wrong place, or the z-index of other elements to be completely off.
- Limit your use of
position: relative;and -absolute; Floatedelements withmarginandpaddingcan sometimes cause layout problems- Don’t use negative
marginstoo frequently as many browser hacks are needed to make the elements render correctly
Use browser specific stylesheets sparingly
Reducing the number of stylesheets used will make it easier to manage the site later on. However, there are many cases where you should use browser specific stylesheets, i.e. when applying Microsoft’s AlphaImageLoader, because filters will make your CSS invalid.
If there are small differences between browsers, there’s no reason to create separate stylesheets, just add them in to your current CSS using browser hacks (IE6 only: _property: value;, IE7 and older: *property: value;). Currently there are no one-line browser hacks for IE8, Firefox or Safari, although all three of these render nearly the same.
However, there are options for Safari and Chrome only, which appear to work flawlessly:
@media screen and (-webkit-min-device-pixel-ratio:0) {
    /* Safari 3.0 and Chrome rules here */
}
And there are other options for Firefox only, which require more research:
/* Firefox 1 - 2 */
    body:empty #firefox12 {
    display: block;
}
/* Firefox */
@-moz-document url-prefix(){
    #firefox { display: block; }
}