Question & Answer Wrap-Up: Quickies

Published
October 24, 2008
by
Chris Coyier

Mackinley Drummond

What's the deal with the "cardboard cutout" CSS-Tricks look?

Nothing metaphorical or especially significant. I just like texture in general. I also wanted to make the site look unique and not fall into any preconceived mold of what a CSS-based site had to look like. I have begun the early stages for a design refresh for this site. I'm pretty pumped about it. Don't get too excited though, it's gonna take me a while to complete it. I'm hoping it's before or around the new year though.

I run VMWare Fusion to run Windows XP where I run IE Tester. I have to have IE 7 installed in order for IE Tester to be able to test all the versions: 5.5, 6, 7 and 8. Somedays I wish I had a real PC with a real original version of IE 6 to test on, because there are little quirks and differences between the IE Tester versions and the real thing. You could use Parallels or Bootcamp to do the same thing, and IE Tester also runs on Vista. You'll need an Intel Mac to run either of these. If you don't have an Intel Mac or can't/don't want to run Windows on your Mac, you could use ies4osx which runs on Darwine (the OS X flavor of the "wine" virtualization software that allows you to run Windows programs without running Windows). I have ies4osx kind of slow and buggy, but it's been a while since I've used it.

Anders Kleve

When should we use image replacement instead of actual images?

The perfect place to use CSS image replacement is the logo for a website. A logo will often include the text title of the site, which eliminates the need to display the title of the site in actual web text. For both SEO and Accessibility purposes, it makes sense to have the title of your site be an h1 tag as the first thing on the page. With CSS image replacement, you get the best of both worlds. The h1 tag contains the text title of your site, but if a "regular" visitor sees your site with both CSS and images enabled, they will see the graphic logo.

Steve Davis

If you replace the h1 with an image, how do you also have an image (typically the logo) in the header that acts as a link to the home page, as is the convention.

This is a great follow-up to the previous question. I said above you should be replacing the h1 tag as that makes the most sense for SEO, accessibility, and semantically. But... this complicates things if you want to make it into a link. If you wrap the inner text in an anchor link, depending on what technique you use, it will either hide or push off the page the text, leaving no clickable area. So what you should do is perform the actual image replacement on the anchor, not the h1 itself (something like "h1#logo a"). Same theory, just leaves the area clickable.

Denzil Rowe

Which is better for building a website layout, Photoshop or Illustrator?

Whichever one you like better and feel more comfortable in. Although it doesn't hurt to know them both well.

James Dadd

If you could build everything from scratch for a website, infrastructure through to front-end programming what would be your ideal stack?
Server:
Prog/Script Lang/Framework:
JS framework:
Database engine:
Design (CSS/Tables/Templating..):

In response to the first question/answer: I’m really in love with the current CSS-tricks layout. It demonstrates what CSS is really capable of. I especially like the footer, with all the author info and stuff.

In response to this question:

If you replace the h1 with an image, how do you also have an image (typically the logo) in the header that acts as a link to the home page, as is the convention.

Is it ok for me to have an h1 tag that has my site name, and use CSS to hide that, while displaying the logo in an img tag (SEO-wise)? I want to be as semantic as possible (X)HTML-wise, while being SEO-friendly… or is there another way of doing that?

Which is better for building a website
layout, Photoshop or Illustrator?

Photoshop is way easier to work for website layout design, unless you know the small techniques to avoid visuals bugs in Illustrator.

First of all, you need to know that you can only use full pixels values for your borders (if you plan to use css to generate them), because you can’t use 0.25px as a valid css measure.

Also you might want to set the document grid to 1px and activate the snap to grid option in Illustrator to avoid placing your objects over 2 differents pixels, which will result in a poor looking product because of the anti-aliasing that this will produce.

My understanding of when to use a css image replacement tecnique and when to put the image within the html rests on one way of assessing the particular image. If its design/presentation related in anyway, it goes in the css. If its motive/purpose is adding to the content, it belongs in the html. So a logo would be design related and it would be appropriate to use an H1 for the logo and replace it that way, but a graph of todays stock market analysis would belong in the blog post being made about todays stock market.
Thats the way i try to think about my code when im working on a site.

I have recently began to design websites with indesign. I find it more usefull for all the grid tools and the typographic elements. I make graphic elements in photoshop and/or illustrator, then import them into indesign, put some fake text, and can easyly style it.
You can use paragraph styles, margin, padding etc, and it seems to me that it is much more closer to the html-css logic/semantic than photoshop or illustrator (plus the fact that working the text/typography in photoshop is just a pain…)

Is there are any advantage to testing various of IE on both Windows XP and Vista? I’m not clear on what difference the OS version makes in terms of the browser’s ability to render. Any insight is, as always, much appreciated!

” Which is better for building a website layout, Photoshop or Illustrator?”

I’m a fan of fireworks myself. Rapid prototyping allows for creating mockups with click throughs so you can send it to a client have them navigate the mockups just like a webpage (sort of). But since I’ve been doing most of my work in fireworks I’m turning into a photoshop weekling.

Chris, Thanks for putting together these CSS tutorials! They are superb! I speak on my behalf, but I’m sure all of us greatly appreciate the time you’ve put together to create all of these! How do you find time to put all these videos together, plus your job, and other life committments?

So…did CSS layout give you some trouble in the beginning? What do you think is the most difficult thing for a web designer to grasp with CSS?

Oh Dave! Microsoft is at the mercy of all my CSS frustration! I hear your pain! All I can say is…we need to send Microsoft some letters or something. Maybe if they receive enough emails/letters…they’ll start taking action!?

Wellll….all we can do is hope, right!?

-robster

This comment thread is closed. If you have important information to share, you can always contact me.

Treehouse is where you go to learn HTML, CSS, and how to build iOS apps. It's a complete education in modern web and app technology, designed to get you ready for a hot new job or to kickstart your own business.

The Lodge is a member login only area with access to video training on how to build websites from scratch using the best modern tools.

How many people touch the CSS in your current main project?

What now? I have some ideas for you.

Go explore CodePen!

As a front end designer and developer, you should have an account on CodePen so you can save your snippets, present your ideas, and engage with the rest other front end folk. I'd encourage you to go PRO as well, to unlock the full power of CodePen.

Get the newsletter!

You should sign up for the CSS-Tricks newsletter. It's a clean copy of all the blog posts each week, combined together, right to your inbox. If email isn't your thing, there is an RSS feed, iTunes, and lots of other ways to subscribe.

Listen to ShopTalk!

Subscribe to The Lodge!

The Lodge is a members-only, ad-free video learning area here on CSS-Tricks. Just like the free screencasts, but organized into four large complete series. Membership is also the #1 best way to support CSS-Tricks.

We can do the real footer now.

Site Links

Colophon

CSS-Tricks* is created, written by, and maintained by Chris Coyier. It is built on WordPress, hosted by Media Temple, and the assets are served by MaxCDN. The fonts are Source Sans and Source Code Pro. It is made possible by viewers like you who subscribe to The Lodge and through advertising for products and services I like.