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!
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:
(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!)
What Design Should I Run With?
Dark Rainbow (27%, 20 Votes)
Whiteboard (26%, 19 Votes)
Watermelon (20%, 15 Votes)
Super Serious Dark (8%, 6 Votes)
Leave it! (7%, 5 Votes)
Use the current design, just make it better. (7%, 5 Votes)
Something else ENTIRELY! (5%, 4 Votes)
Total Voters: 74
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!
Rounded corners are a great design element to escape from the blocky/boxiness a lot of web designers fall victim to. I remember the first time I created my own rounded corner box using Photoshop and HTML/CSS. What a thrill :) A lot of people shy away from it because it SEEMS a lot more difficult than it really is.
I’m going to show two ways to create this effect using Photoshop (or the graphic editor of your choice) and HTML/CSS. There are other ways to create this effect using just CSS – but I really am not a big fan of it because it creates a lot more empty divs than this method. Yes if images are off you will lose this effect – but I’m willing to sacrifice that.
Like I said I’m going to demonstrate two ways to accomplish this. The first is using just a flat rounded corner image with no other effects. The second will have a box with a drop shadow, border and gradient. :) So let’s start easy!
I’ve noticed a lot of sites have a very complicated way of styling the code samples they provide, using multiple span classes and/or inline styles and many, many <br />s. Other times the site just wraps the code in a <code> attribute and doesn’t highlight the different syntaxes.
I’ve written some simple CSS styles to fix this problem. So if you are interested in having your code display as if it was in a text editor with syntax highlighting here is an easy way to do it.
The first example is a sample of CSS code and how it can look when you apply these styles (***This is not the actual styles, just an EXAMPLE):
One of my favorite parts when creating a new design is the process of choosing a color scheme. There are times when the colors just fall into place after I have my main color, or when using a photo the colors just flow around it. But sometimes you need a little help.
Whether your looking for a color scheme to base your design on or you need a little help picking out complimentary colors the generators, articles, color wheels and more below will assist and inspire your color creativity.