Tips for taming layout

Expect the posts to dry up rapidly as I struggle to conquer Joomla in the final weeks, but here’s one more for the road …

As I generally don’t code layouts from scratch in my current role, I’d forgotten some of the tips and tricks I used to use to get table-free layouts working across different browsers, particularly the when accursed browser bugs raise their ugly head.

Two simple but effective tricks:

  1. Sketching out the template code organisation on a sheet of paper helps you to think about organisation at a high level – similar to a wireframe, but focusing on your how macro elements such as <div>s and <ul>s will fit together. For me, I tend to start with horizontal strips first (usually banner, body and footer) then put vertical elements such as navigation, images and columns inside them.
  2. When putting together the HTML template, to clearly see where each rectangular section is laid out on the page, I put a 1px border around each element – using different colours like #c00 (dark red) and #ff6 (bright yellow) to ensure they stand out against each other and any pretty design elements you have already incorporated. Colouring the background of each element is another option, though this tends to be less efficient when trying to get things perfect to the last pixel.

So not rocket science, but definitely a time saver in my experience!

Leave a Reply

Your email address will not be published. Required fields are marked *