cssgirl... web and blog design

Archive for the ‘Articles’ Category

23
Feb

How do you code?

POSTED IN: CSS, HTML/XHTML, Web Design

When you work on a new web design project and have entered the stage for coding, how do you go about it?

Do you start with the HTML and write the whole HTML page first, then code your CSS then troubleshoot?
Do you write all of your CSS first, then the HTML markup, then troubleshoot?
Or, do you write chunks of HTML first, add in the styles, troubleshoot/test, repeat?

Personally, I have done it just about all three ways - but my most often used method is the 3rd. I start from the top and work down to the bottom from left to right. I will start and code the entire header of a site in HTML first - then write my styles. Check in firefox, and repeat. Then, after the whole page is completed I check in all browsers to trouble shoot compatability issues - which are usually minimal and related to IE6 only - go figure!

So, how about you?

How do you code?

View Results

Loading ... Loading ...
seperator
21
Aug

VOTE: I Want Your Opinions

In the beginning of 2006 I launched CSSgirl. I moved all the content from my old site (triplelproductions.com) and started CSSgirl Designs with a brand new design. Over time I’ve changed the design a bit, adding and removing sections, images and content.

Since last summer I’ve been planning a redesign, but I just can’t settle on one that I am happy with. So, I would like to have some feedback from the people who visit my site- who see it regularly!

I have four designs that I’ve created that I am deciding between. View them and let me know your opinions - good or bad! Two have already been coded, two are just image mockups:

1. Watermelon:
CSSgirl Design #1 - Watermelon
(HTML Mockup)
2. Super Serious Dark:
CSSgirl Design #2 - Super Serious Dark
(Graphical Mockup)
3. Dark Rainbow:
CSSgirl Design #3 - Dark Rainbow
(HTML Mockup - semi- complete)

4. Whiteboard:
CSSgirl Designs #4 - Whiteboard
(Graphical Mockup)

Vote for your favorite:

(PS: If you vote for “something else entirely”, let me know WHY. otherwise I’m going to remove that choice because I won’t know which direction people are looking for! Your comments won’t hurt my feelings, I promise!)

How do you code?

View Results

Loading ... Loading ...

Voting ends September 1st, 2008.

The three designs I do not choose will be converted into free Wordpress themes (and Movable Type too, if I find the time!) :)

Please leave comments with suggestions, criticisms, etc!

seperator
18
Aug

My Love Affair With Woopra

I love looking at the analytics for my site. I love seeing what articles are most popular, what people land on the most, where they come from and where they leave.

A few months ago I learned about Woopra - a free tracking/analytics program that has a beautiful gui and some pretty freakin’ cool features.

Woopra - web analytic, web stats

seperator
9
Aug

IE6 PNG Fixes - SuperSleight & Unit PNG Fix

Unit Interactive’s Unit PNG Fix A few weeks ago a new javascript, Unit PNG Fix, was released by Unit Interactive for an IE6 and below PNG support fix. Up until now I have been using SuperSleight with no issues. So I decided to do a little research this morning to find out what made Unit’s Interactive PNG fix better than good old SuperSleight.

seperator
3
Aug

Typography Essentials - Free Fonts, Tools and Tutorials

Another important aspect in web design (combined with the right color combinations and Photoshop essentials and brushes) is getting just the right typography for your design. There are many, many free fonts available as well as tools to build your own. Not only that but you can use free online resources to determine the name of that elusive font you’ve seen used elsewhere and want to grab it for yourself.

Once you find the font perfect for your project then you have to know how to use it. While some of the best resources about learning more about typography are books (Thinking with Type and The Elements of Typographic Style are two of my favorites) there are tons of online articles and tutorials written by people in the design industry that will help you better your typography.

seperator