position: relative;

Centering a block of text (or anything else) vertically within a div has been a longstanding problem where tables seem to have the advantage.

I recently came across this article about vertical centering and tried using the bottommost code snippet today with good results in FF, IE6, Opera and Netscape. It’s a bit clumsy, but it does the trick there – however this doesn’t work in IE7.

I wound up using the topmost snippet – with hacks, which I don’t like using, but I was pressed for time this morning… I’m going to revisit this when I have an opportunity to see if I can figure out what to do about IE7 and the non-hacked example.

Someone sent me a link to this addictive little background maker today.

I’ve written before that I work as a temp for The Creative Group, and that I was fortunate to be picked by an employer for the very first job that has kept me on since February on a part-time basis…

This week was a new record – I worked 20 hours doing banner ads, email ads, and specific content pages for online photo processing sites. I was on call with several managers toward the end of the week, and got a few good comments about the work I’m doing.

I like it – it’s mostly straight graphics with just a bit of HTML, kind of a nice change from what I usually do. And it’s nice to be involved with a company where the work is very fast-paced (things I do often go live the next day on 2000+ sites!) but people still manage to give kudos for hard work. That’s totally unlike my last full-time job prior to opening Parallax… Pretty refreshing.

We’ll start with Create Magazine since their web site just crashed my browser for the umpteenth time and made me lose this post that I’m now irritably rewriting.

• Create Magazine. This regionally-focused magazine is okay, but nothing that jumps out as being very special. They have a web site that doesn’t work – I wouldn’t look too deeply if I were you, particularly on their Awards section. I’m not providing a link because I don’t want to tempt you.
• Website Magazine. I’m not sure how I got on the mailing list for this one, but this free trade publication is certainly worth looking into. This is really the only print magazine I know of that focuses on the business of being a web professional with all of its broader roles.
• Photoshop User. This is a good if you want to get better at Photoshop. Join NAPP for $99 for a year and get the magazine for free.
• Business 2.0. This one’s from CNNMoney – I like this magazine and have subscribed for a few years. Basically tech news.
• Entrepreneur, Fortune Small Business and Inc. Similar to BusinessWeek Small Biz, these are all pretty good but I like Entrepreneur and Inc better than the other two. I like their clean layouts and these two tend to have more articles about online businesses and the digital realm than the others, at least lately.

There are a few titles that I’ll only pick up occasionally – Communication Arts‘ Design Annual is full of eye candy and worth its high price.

So today I’m going through the ridiculously tall stack of recent magazines that I’ve read and kept because they have an interesting article or two I wanted to save.

What magazines do I read, you ask? Can some of them be useful to me too, you say?

Perhaps. Here’s what’s in my stack:

• PC Magazine. I’ve subscribed to this off and on since I was in high school. Most of these are keepers, at least for a few months.
• GDUSA (Graphic Design USA). This one I’ve gotten for about a year, but I’m probably not going to resubscribe. It focuses heavily on print, is overflowing with ads and always has this huge section about all the major stock photo companies – I don’t need to see that every month. Sometimes there are pretty good articles; this month’s issue had a big feature on trends in logo design. Their awards issues are worth keeping, however.
• Practical Web Design and .net. A British import that’s packed with code examples, free software, and usually some good articles. This is a pretty good magazine but it’s very expensive, so I don’t get all the issues. And I’m not sure what’s going on with this mag right now – supposedly it was closing down in favor of sister magazine .net in January, but I’m sitting here with a March 2007 issue…
• Dynamic Graphics. This is one of my favorites and definitely a resubscription is in order. A lot of good, practical info for both digital and print design, and not so many ads.
• BusinessWeek Small Biz. A pretty good one for entrepreneurs, tailored to small and micro businesses.
• Print. I won’t be renewing my subscription to this one – way too much focus on (duh) print design, and way too many ads.
• HOW. This on the other hand is a keeper – big on creativity, great awards issues. Always a few interesting articles on things like typography…

Okay… back to sorting and I’ll finish up this article in a bit.

I’m a perpetual student and right now I have two new books on my desk – ‘Teach Yourself Javascript in 24 Hours’ (like I have that kind of free time) and ‘Learning PHP5.’ I also have ‘Head Rush AJAX’ which I haven’t read yet. I’m halfway through the Javascript book.

I was wondering, in what order should I read these books?
I went hunting on Google this morning for ‘web designers important skills’ and found this article in Slashdot’s archives.

Now this is a long one, and there are some strong opinions about what to know and what’s useless information. But I found myself reading a lot of it this morning and thinking about where I want to be with my work in 5 years.

Right now, I call myself a designer/developer, since I do it all. But I do the graphic design and (X)HTML/CSS parts better than the PHP/MySQL parts. I know only enough Javascript to modify scripts I get elsewhere. I know enough PHP to comfortably customize open source e-commerce, CMS and other scripts without much of a problem – I can generally figure out how most things like that work, but couldn’t write it myself without a lot of hair-pulling.

So if I want to increase my level of understanding on the development side, what should I concentrate on, technology-wise? What should I not waste time on? Is it better for my future career to pick one or the other (design over development in my case) and focus mostly on that instead? Will getting better at JavaScript do me any good down the road?

I love my job because it encompasses so many areas. I’m guessing that I’ll be leaning more and more toward standards-based front end development, user interface design and information architecture as time goes on. But since I’m still a one-person shop for the time being, I need to be as fluent in PHP, MySQL and a few other things as time allows. I want to be a well-rounded designer that understands a bit more than just the basics of back end development.

There’s always so much to learn. I like that part too – it gives me an excuse to buy books.

I read a post in a mailing list today that made me think. I know that the homepages for the big search engines are full of errors. They don’t validate – and it doesn’t matter. They’re not hurting for it. It makes not one iota of difference as far as search engines go whether code validates.

I try (I don’t always succeed, but I always try) to make sure my code is valid for both HTML and CSS. Why do I do this? Because I feel it’s the right thing to do.

I know that there are usually many ways to accomplish the same result when you’re building a web site. I get that, and I like that. But I with my idealist viewpoint believe that there are ways that are more clean, less intrusive, easier to later understand and change than others.

Take for instance CSS hacks. When I first began using CSS heavily, I used hacks. But since I discovered conditional comments, I very rarely use a hack (the last one was about four months ago and specific to Opera). I like conditional comments because they seem to me to be a cleaner, more correct solution than toying with presentational elements in CSS that may later reveal incompatibilities as new browser versions are released (look at the list of CSS hacks that stopped working in IE7).

I met a designer last week whose work I love – he’s a very talented individual and a standards advocate as I am. We were talking about a common issue in CSS and I asked how he got around that – he agreed that conditional comments were the way to go but that he defined them within the stylesheet and not in the actual HTML page. He whipped out his laptop and showed me what he meant.

I looked at the code and thought ‘that’s a hack’ even as he said ‘this is a conditional comment.’ He supposed that a purist wouldn’t agree with his labeling.

I’m a purist. I think hacks are messy, they’re more like bandaids than real solutions. For me, conditional comments are the cleaner fix.

I validate because I care very much that my code is clean. I define clean, in part, as being error-free, and validating helps me accomplish that, most of the time. I know it doesn’t matter to search engines, nor to the vast majority of my clients. But I consider my work as a web designer/developer to be a craft – and it matters to me.

A colleague from the Women Designer’s Group has a great little PHP contact form script posted on her blog. I recently used it for a client with just a bit of easy modification to the CSS styles to make it play nice with the rest of the page.

However, this client needed to have two different emails sent upon submitting the form – two emails with two different headers. Here’s how you take care of that:

Download either script – the Simple one just has name, email and a textarea for comments, while the Complex one has other input elements like radio buttons and dropdown lists. I used the Simple one.

Open up index.php, this is the actual form processing script. Note that what I’m doing here is not the only customization you’ll need to do to use this script! But it’s very well-documented and should make sense to anyone with a smattering of PHP.

Scroll down to the bottom and find this section:

$mailheader = "From: $name < $email>nContent-Type: text/html";

mail("YOUR NAME OR COMPANY NAME HERE","$subject","$message","$mailheader");

The first line pulls the user’s name and email from the form that’s being processed and sets that up as the ‘from’ information for the email that’s coming to you.

The second line is where the email’s actually going – pretty self-explanatory. You enter your company name and email address, and it pulls in the subject (which you’ll define earlier in this script), the message (which includes all the information the user submitted), and the mailheader (the ‘from’ information above).

Pretty simple.

So what happens if you need to send two emails? What if you’d like one email to come to you, but you’d like another to go back to the user who filled out the form?

Not too difficult, really. What you’ll do is create copies of the two lines shown above. We already have ‘$mailheader,’ so just copy that and change it to ‘$mailheader2.’

For $mailheader2, let’s change it so it indicates that it came from your company:

$mailheader2 = "From: YOUR COMPANY NAME \nContent-Type: text/html";

Now copy the ‘mail’ line and we’ll change that like so:

mail("YOUR COMPANY'S VISITOR < $email>","$subject","$message","$mailheader2");

This will send an email with the subject line ‘Your Company’s Visitor’ to the email address entered by the user, the subject line you created earlier in the script, the message containing all the data submitted by the user, and your second mailheader showing your company as the ‘From’ address.

Make sense?