Derek P. Collins

My Design Signature

Mike Davidson recently wrote about how he has come to recognize some of his design and coding habits that result in what he calls a “design signature”.

This got me thinking about my own design and coding habits:

• Margin & Padding Reset

  I always start with a very basic margin and padding reset in my stylesheet using the universal selector: * {margin: 0; padding: 0;}. This allows me to start with a clean slate and reduces the number of cross-browser issues that I’ll have to face as I develop the site. I no longer use a separate reset stylesheet (I’ll discuss the details of why in a future post).

• Base Font Size

  I set the base font size on the body to 62.5% and then use ems for font sizes from there on out.

• Order Styles Alphabetically

  I order styles alphabetically except in cases like borders and margins, which I order clockwise.

• Consistent ID and Class Names

  I tend to use some consistent id and class names when laying out a site. If the main areas of the page are going to be full-width (the content is centered, but the background color on the header, for example, will fill the full-width of the browser window), I’ll use #top, #middle, #bottom and, if necessary, I may use #primary, #secondary, #tertiary, etc. if the main content area needs to be broken up even more. I’ll then use a center class to center the content within the above areas. If I’m not doing that, I generally use #header, #content, #footer all inside of a #wrapper div to center the content.

• Comment Stylesheets with Flags

  I also use comments to separate different parts of my stylesheet and I use flags in the form of =header, for example, which allows me to quickly search for and locate a specific section of a stylesheet. This is especially helpful in long stylesheets.

• Use Margins Instead of Padding

  When possible, I use margins as opposed to padding, which makes dealing with the box model a little easier in those pesky browsers.

• Multi-column Floats

  For multi-column layouts I float every column (usually to the left).

• Clearing Floats

  I used to use the clearfix class that Mike uses, however, I now use overflow: hidden; to clear parent elements that contain floated child elements.

• Fixed, Centered Layout

  I generally use a fixed-width, centered layout using a container div, auto margins, however, I no longer use a center text-align on the body as it was only used to get version 5.x browsers to center the layout and I’ve decided not to support those browsers any longer.

• Comment Closing Divs

  I use comments to specify what id or class a closing div belongs to. For example, if I have a div with an id of wrapper, then I’ll close that div in this way: </div><!-- /#wrapper -->.

• Grid Design

  I usually stick to a grid when designing a website, and while I may occasionally use a separate grid stylesheet (e.g. the 960 Grid System), I tend to write my own styles to create a custom grid.

This list doesn’t just cover my design signature, but also what I currently see as best practices when developing a website. However, I am constantly testing new methods and changing my strategy, so what I see as a best practice today, may be different tomorrow. Being flexible and open to change are essential in the constantly evolving world of web development.

Workout - Month 3

Here are the workouts that I am following with my trainer for the third month:

Workout A

• A. Front Squat + Push Press: 3 sets of 8 reps
• B₁. Reverse Lunge (barbell, alternating): 3 sets of 8 reps
• B₂. Decline Bench Press: 3 sets of 8 reps
• C₁. Split Squat (dumbbell): 3 sets of 8 reps
• C₂. Cable One Arm Row: 3 sets of 8 reps
• D₁. Swiss Ball Plank: 3 sets of 1 minute
• D₂. Decline Iso Twist: 3 sets of 8-10 reps
• D₃. Good Morning (seated): 3 sets of 8 reps
• D₄. Supine Windshield Wiper: 3 sets of 8 reps

Workout B

• A. Platform Deadlift: 3 sets of 8 reps
• B₁. Reverse Lunge (barbell, alternating): 3 sets of 8 reps
• B₂. Pull-up: 3 sets of 8 reps
• C₁. Split Squat (dumbbell): 3 sets of 8 reps
• C₂. Shoulder Press (dumbbell): 3 sets of 8 reps
• D₁. Cable Crunch: 3 sets of 8-10 reps
• D₂. Cable Lateral Flexion: 3 sets of 8-10 reps
• D₃. Swiss Ball Pike (straight leg): 3 sets of 8-10 reps

Cardio

I am continuing 3 days of cardio, however I will be incorporating more light and body-weight resistance into my cardio routine. For this I will choose several different exercises and perform them in a circuit (performing each exercise until fatigue) for up to 15-30 minutes. The following is an example routine:

1. Jumping Jacks
2. Swiss Ball Push-ups
3. Front Squat (with light weight)
4. Military Press (with light weight)
5. Swiss Ball Crunches
6. Step-ups

I would perform each exercise until fatigue, moving on to the next exercise as quickly as possible for 15 minutes (eventually working up to 30 minutes).

I should choose a variety of exercises for each session.