Error getting theme layout

Optimizing your workflow as a front end developer

Posted @ 1:15 pm by Ash Kiel | Category: SolutionSet, Technology, Web Development Process | 0 Comments

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:

Build templates

When building HTML templates, it’s best to start with creating your global elements, then work towards specific page elements.

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 that 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?

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:

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.

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; }

}

Leave a reply

Error getting theme layout