Using the Reset Stylesheet

This is certainly one thing a web designer can’t live without, it has been here for years and many developers have even built their own customized reset stylesheets. Though don’t be surprised, there are developers who still haven’t heard of this technique or haven’t found a use for it.

The most common issues we’ve been facing from the start were cross-browser design inconsistencies and that’s because each browser has a default style for all HTML elements.

The usual differences from a browser to another is the different padding, margin or size of some HTML elements (i.e. heading elements, line-height, lists … Read article

Read More

Time saving project starter kit

It’s time to talk a bit about some time-saving techniques.
Both graphic and web designers lose precious time rebuilding the same graphic elements, recreating browser form elements, coding the same code blocks, finding doctype syntaxes and what not. Just imagine how much you’d improve your web design workflow by having all of these reusable elements at your finger tips!

Inspired by Ben Gribbin’s post Save time and money by systematizing your photoshop workflow, I’ve built a customized project starter kit to not only ease the work for graphic designers, but for web designers as well.

Improving your photoshop workflow

Read article

Read More

Should we always run away from tables?

I’m having second thoughts about writing this article, suddenly I feel under thousands of web developers about to shred me apart! :)
Aheem, like most web developers, I’m crazy, if not obsessed, about semantic mark-up and that’s why I still see the table’s great, if not, unique role.

Web designers do not run away from tables, but rather stopped using them design-wise.
CSS has been here for a very long time, but it only became popular when CSS 2.0 was out, until that point, tables were used to arrange most of the HTML elements (i.e. lists, images, text etc), which was … Read article

Read More

Two-Column Hybrid CSS Layout

There are four types of CSS layouts, fixed-width, fluid, elastic and hybrid.
We’re going to tackle a hybrid layout, which is a combination of the other three and in our case, a combination of fixed-width and fluid.

Before we start, if you’d like to take a peek at the end-result, click here!
Some of you will understand the technique just by looking at the code, but those who don’t understand the logic behind this layout, then don’t jump to copy/pasting! Let’s go through the code line by line first and see what each one does and overall, what makes this … Read article

Read More

Pure CSS One-Level Dropdown Menu

Alright, time to try and do my own version of a pure CSS dropdown menu tutorial. Despite the very many tutorials out there, few actually explain the entire code, so why not, I’ll give it a try!

Let’s start by creating a regular html nested unordered list as shown below:

Read More