working with colors.

Picking a color scheme for a web site is one of the most important and possibly the most frustrating part of creating new designs – at least for me. I have been recently using Adobe’s Kuler as well as a handful of other color web sites. I can usually get the first two out of three colors without any issue but the accent color always gets me. I usually end up surfing some sites and “accidentally” find the third color I need. Why bring this up? This is the big reason I have not been very active on my blog this week. I have three “from scratch” designs I am working on for clients and have been busy piecing colors together. Anyone have any color resources they want to share, please leave a comment.

new cms to consider: drupal.

I have worked with a number of content management systems over the years and have never been so impressed – and able to use something out of the box – as I was with Drupal 5.x. A prospective client of mine a short while ago mentioned something about Drupal and I had not used it since the last major upgrade. After installing it and using it for 20 minutes, I became very impressed. Drupal is the most elegant CMS I have ever used and the most “clean”. By clean, I mean very organized (file structure and Admin area). I also believe that Drupal is the most feature rich and easy to use CMS out of the box. At this point, I am going to drop all XOOPS development and move any new clients to either WordPress or Drupal. Nice work Drupal!

CSS Tips and HOWTOs From W3C

I have been very busy working on CSS for a big up and coming web site and I have spent the last few nights doing some research on best practices and came across a W3C site I used when I first started coding with CSS that is very useful. There are a number of tips and howtos for the very things you think should be “easy” when laying out a page…and that your clients always want like:

If you are just starting out with CSS or are looking for some help with something you *think* should be simple, spend some time at the W3C Web Style Sheets CSS tips & tricks web site.

yahoo! pipes.

I finally sat down and looked seriously at Yahoo! Pipes to try and figure out how or if it could be useful to me and my clients. I wanted to make something useful so I decided that it would be nice to have a “master Jen feed” which would include the RSS feed from this site, my company’s web site, as well as from my son’s web site. Within five minutes, the master feed was created and in my RSS feeder. While this might not be the most advanced thing Yahoo! Pipes can do, I am definitely considering grouping a number of my RSS feeds together and making more “master feeds”.

For anyone who is interested: Jen’s master feed. If you are not using RSS yet – please…it is 2007, even MS IE 7 supports RSS. Time to get on the bandwagon!

Keep It Simple!

I am currently working on a big project which includes wrangling over 12k lines of CSS. Tonight it took me an hour to create a very simple form when it would normally take me 5 minutes. Why? Overcomplicated CSS. At this point I am using so many default values (like vertical-align: baseline; and float:none;) that it is insane.

Why can’t I start from scratch and just toss all the old code that is messing everything up? I wish I could, but so much of the project is reliant on it, that I am forced to plow through it.

Just a quick reminder to all those people who work with CSS: keep it simple and define the bare minimum.

CSS and z-index.

I have been busy working on an excited project that uses some pretty complicated layouts. I was originally hired to optimize and clean up the XHTML/CSS so it would work in IE 6, IE 7, Safari, and Firefox, but now am busy working on producing the clean XHTML/CSS from the start. I needed to brush up on my understanding of how z-indexes work, and I found an excellent tutorial that I wanted to share: Understanding CSS z-index.

First Days Working From Home

Well, the first two days of working at home have gone great. I have gotten more stuff done before 8am than I can usually do by the time 8pm comes around. I am able to get up, spend some time with my son, workout, shower, and then start working all in the time it would usually take me to get to my office. During lunch, Triscuit, Evan, and I go on a nice walk and then come back for some more work. Not to mention, I can now also stop working much earlier and enjoy some time with the family. Good times. Why did I not “retire” (as Dad Muller would say) earlier? All the while, I get to work with interesting clients on really cool projects which forces me to keep building my skill set.

google's my maps.

Google just announced “My Maps which is a great way to add your personal routes, landmarks, etc on a Google Map. This would be awesome to plot out a trip using placemarks with photos/videos taken at specific places. I am excited to play around with this!

using parallels and windows for web development debugging.

Yesterday I finally broke down and bought Parallels and Windows XP to run on my MacBook Pro so I could do my CSS debugging and testing on IE 6 and IE 7 for Windows. After the ridiculously long Windows install and then security updates (74), I was pleasantly surprised with the speed and performance of Windows and IE within Parallels. I was quickly able view all my work in a Windows environment while also using my Mac browsers at the same time. This is awesome and I am quite excited to have this as an option.

cross check your css.

If you do not have a lot of time or experience with CSS, here are some quick ways to save yourself headaches down the road. If you have read my blog before, this is nothing new, but I cannot stress these points enough.

  1. Validate your code. By simply validating your code, you can learn a lot about CSS, as well as find picky errors which might wreak havoc on your code (missing closing bracket, etc).
  2. Look at your site in more than one browser. I have been a part of several projects that have been built to “look ok in Firefox” but are a disaster in Safari and IE. Usually if you check your work in two browsers (IE and Firefox) or even just Safari and Firefox (for the more advanced developers that are aware of IE issues) you will save much frustration later.
  3. Look at your changes often. I will generally make small changes, then check out the changes in IE, Safari, and Firefox. If all looks good, I move on. If not, I at least know the problem lies in a small chunk of code.
  4. Use background colors to troubleshoot. In the last few months, this tip alone has saved me countless hours and bottles of Advil. Floats with margins and padding often appear correctly in one browser but not another. Why? Usually they have some issues with width. Do you really know where your float boundaries are? I don’t…so I will add a temporary background color to my containers so I can see exactly how wide everything looks. This also works well for general spacing issues. You can easily see if it is the rogue padding or margins belong to a certain class or div. When working with several layers of divs…this is an easy way to save time.

Questions? Comments? Let me know!