Archive for the ‘Web Standards’ Category

Color Palettes brought to you by Sad Bird

Saturday, January 30th, 2010

Top

Lately I’ve been working on a few color palette ideas and looking for inspiration. Obvs, I turned to those who knew color well. The masters, if you will.┬áIn the first issue, Color Palettes vol. 1, I look at paintings by Magritte, van Gogh, and Lautrec.

I broke down what I saw as eight key colors from the paintings into their RGB and CMYK values with the latter being in their respective percentages.

Hey, I don’t know why I made them, but the idea is that if you, a designer, like an artist or painting, well, then here is a little palette to make incorporating them in to your design easy and not obvious.

Does that sound cool at all? Are there other artists you would like to see? Or, is there other information you would like to see included? How would you use it? I would absolutely love to read your comments. There is nothing I would love more.

-Rich

P.S. It was a big decision on color vs. colour. In the end I tried to not be pretentious.

Click to view larger.

Vangoghpalettelautrecpalettemagrittepalette

CSS Browser Resets

Wednesday, September 16th, 2009

I’ve been getting frustrated lately about my web design looking different in every browser. This is common, of course. Each broswer: FF, Safari, Opera, Chrome, and IE all have their own default margin and padding settings.

So if I make a header, main content, sidebar, and footer layout with no set margin or padding, the browser will set its own default setting. This is even more frustrating when text is introduced. The h1, p, li, and ul all have their own defaults. This creates unpredictable results. And I don’t like that, and I won’t stand for it.

I needed to find a common ground.

* {
	margin: 0;
	padding: 0;
	border: 0 none;
	vertical-align: baseline;
	font-family: inherit;
	font-weight: inherit;
	font-style: inherit;
}
ul, li {
	list-style: none;
	margin: 0;
	padding: 0;
	}

fieldset, img, abbr {
	border: 0;
	}

a, ins {
	text-decoration: none;
	}

p, h1, h2, h3, h4, form, span, img, blockquote  {
	padding: 0;
	margin: 0;
}

The asterisk at the top is the universal rule for resetting. All major browsers should recognize that rule and read it the same way. Do not reset any elements inside the “form,” for example: input, textarea, checkbox. etc. Form elements can act kind of crazy if you reset them.

Start your stylesheets with this bit of code and make your life easier. I must give thanks to Eric Meyer for pointing me in the right direction.

- Randy

Validating HTML + URL Indexing

Wednesday, August 5th, 2009

Busy Wednesday. Looks like it’s going to be a day of error checking and troubleshooting.

First bit of business – www.dowshlawncare.com has been up and running since this past Sunday, but for some reason is not being indexed by Google. Submitted the URL to Google’s search engine. If you ever have trouble indexing a site, add it here. I’ll wait a week and see what happens.

Fingers crossed that Google comes through with a win.

Up next – validating the HTML and CSS. I recommend this check for errors an any site you’re designing. In a matter of minutes I went from 22 errors down to 6. So dowshlawncare’s site is that much more validated. Performing an HTML check can improve the quality of a website, as well as making sure your site will work in the future.

The rest of the day I’ll be checking other client’s sites for erros as well. Fun day.

- Randy