Great XHTML and CSS

HTML, CSS and anything else that deals with client side capabilities.

Moderator: General Moderators

Post Reply
jack_indigo
Forum Contributor
Posts: 186
Joined: Sun Jun 08, 2008 11:25 pm

Great XHTML and CSS

Post by jack_indigo »

I've got a lucrative project coming up and they want me to create 3 sample XHTML + CSS pages that "demonstrate an awareness of great XHTML and CSS". Now I've got my own idea of what this should be, but I want to hear from you what you think should be included in that so that I can win this project. Your help is greatly appreciated.
jack_indigo
Forum Contributor
Posts: 186
Joined: Sun Jun 08, 2008 11:25 pm

Re: Great XHTML and CSS

Post by jack_indigo »

Here's what I believe so far by guessing:

- As for a page theme, I don't think by this specification that they would really care much except to see use of 2 column and 3 column formats. They probably want a page that would look like the Wall Street Journal page, but far less "busy". When they are interested in looking at your XHTML and CSS, and don't look at your design skills, they want to really focus just on the XHTML and CSS.

- An understanding of advertising -- such as some selling point or major news item in the "foldspace" (the space above 600px) on the homepage, and space for ads in appropriate places like the sidebar or end of an article.

- Articles having buttons for text size, print view, social bookmarking, email/share with a friend, and perhaps comments. They don't necessarily have to work since this is XHTML/CSS, but shows an understanding of the need for this.

- They want to see XHTML Strict, right? Not XHTML Transitional? And then having that validate 100%.

- It's obvious they want to see mostly DIVs unless I'm displaying grid-type data where a TABLE tag would do.

- They want to see tidy indenting, such as run through some kind of tidy script, and using tabs instead of spaces.

- No inline styles.

- Use of :hover, :active, and :visited.

- Callouts on article text. Is that what you call them? That's where you put some quote in bold and in a separate section on the page with text wrapping around it.

- Good use of stylesheets. I start with a good reset.css. Then, my strategy is to use a default CSS that handles all browsers and is geared for FF 2 and 3. Then, I load a smaller override set of 3 for IE6, IE7, and IE8 to override the default CSS, and using conditional comments. And since Opera and Safari/Chrome do not support conditional comments, using CSS Hacks to delineate Opera and Safari/Chrome -- but used extremely sparingly, or perhaps not at all. (Often I find if a page validates in FF 2 and 3, it often works in Opera and Safari/Chrome -- but not 100%.) Now you may think you're cool and only use one CSS file and think all browsers will work great with that, but I disagree. Go take a look at many top news sites out there and you'll see they use multiple CSS files -- one master and then a handful of override CSS's depending on browser type.

- Good use of CSS selectors such that not everything needs an ID or class applied to it.

- Classes on similar DIVs unless I can apply an ID on the container DIV and use CSS selectors to reach the children.

- Using classes only where applicable because they put more processor and memory overhead than an ID tag would.

- Using the IE6 trick to make containers containing floats to expand to the size of the floated contents inside, and yet also work in other browsers too.

- Shows use of floats and relative positioning.

- Avoiding occasionally risky absolute positioning except where necessary, and using relative positioning if necessary at all.

- Using a centered 960px #body DIV and use the HTML {overflow-y:scroll;} technique for FF to remove "page wiggle" for that format.

- Uses a CSS tidy program.

- Optimizes the CSS down to the minimum necessary so that I don't have too many IDs and classes and use base classes and inheritance that overrides those classes.

- Uses font sizing with 'em' instead of pixels or points.

- Doesn't include comments -- reduces page load speed.

- Of course, some people like to minify the CSS and the XHTML, but then that doesn't demonstrate how organized you are, and makes it a nightmare to debug. So, for busy environments, minifying CSS and XHTML is no longer the norm in my opinion.

- CSS in a separate file.

- Defines CSS for different media -- what a pain, but necessary. For instance, makes the screen CSS in one format, and the print in another format. And if you're really hip, you may even have a mobile CSS.

- Uses an XHTML/CSS that degrades nicely across browsers.

- Doesn't use blank GIFs for spacers.

- Was designed by hand in a product like Dreamweaver or other good tool. Doesn't use something like FrontPage or other WYSIWYG editor.

- Doesn't just get a template from the web and customize it -- understands completely how to make an XHTML page from scratch along with its various CSS files.

- Works across various browsers even if you increase or decrease the font size with CTRL+Plus and CTRL+Minus.


Now what I don't understand is why so many sites use UL/LI without using DIVs, and even when they are turning off bullets on those elements. Is it to save keystrokes and make the page load faster? Is it because it might stack better? I have like no clue. I mean, if bullets are not necessary, then to me it seems more logical to use DIVs.
User avatar
omniuni
Forum Regular
Posts: 738
Joined: Tue Jul 15, 2008 10:50 pm
Location: Carolina, USA

Re: Great XHTML and CSS

Post by omniuni »

I may be off base, but I think you're getting a bit too demanding of yourself, in some respects, and missing some big ones.

Quick note, btw, Dreamweaver is not what I would call a "great tool"... but it doesn't really matter. I would say, though, that using a good text editor of some sort (Dreamweaver will do if that's what you're familiar with) will result in far cleaner and easier to read code. Use spacing and indenting liberally, but consistently.

One of the best ways to ensure that things look good is to make a design that will appear pleasing regardless of browser size. Min-width and Max-width are now supported by IE7, and I don't think there's much reason to plan for IE6 any more. Even Microsoft is using PNG's with transparency in their new Bing site, so I think it's pretty safe to take advantage of the same technology.

Pay attention to your typography. Using "serif" or "sans-serif" are good ways to make sure that a good type face is always chosen. even IE does a good job when it's given the ability to choose for a user. Line-height and other attributes can be nice touches, and choose your basic element styling first so that even without additional markup things look pleasing.

When you write your page, semantically tag things, and order them appropriately so that the page is logically readable even with styles turned off.

If you know what you're doing, you should be able to achieve a layout that will work nicely on IE7+, FF, Opera, and KHTML/Webkit browsers like Safari without using hacks. It takes some time to find the things that all of the browsers understand the same (or close enough) but it CAN be done.

XHTML 1.1 Strict is not too difficult to get to validate once you become used to it. I use it myself for my business website.

Here's a cool trick: try using subtle GIF animations to add some flash without using flash. For example, a one pixel animation, set to run once, that fades from white to gray applied as a :hover for navigation which has white as the background color. If it works right, it should produce an effect where mousing over the navigation element will fade from white to gray, and then reset to white when you mouse out. Load background images in a div set 0px by 0px with the page as an alternative to using javascript to pre-load them. Either way, the effect is the same: if you have a background image that's a :hover, it'll work immediately the first time you need it rather than the browser loading it for the first time.

Elegance is the name of the game. Less code, cleaner code, and fast loading will go a long way, especially if you can show some deceptively simple looking tricks. Stand out by creating a well-integrated look with minimal (efficient) code.

Oh, and I see no reason to leave points out. Em's can be difficult to understand and work with, personally I stick to points and percentages. I could be wrong, but I don't think ems really have a benefit over points.

Choose symbols and graphic elements carefully. Clean, sharp lines, and the ability to be clear at small sizes is important.

I'm not sure why you'd need a CSS tidy program...

And about comments, use them SPARINGLY. No comments can be difficult to understand. Using good naming conventions will go a long way in this respect, but one or two well-placed comments to clear up any difficult to understand areas may indeed be a good thing, especially if you think you might be working with someone else.

Well, those are my thoughts, anyway. Good luck! I'd love to see what you come up with!
User avatar
JAB Creations
DevNet Resident
Posts: 2341
Joined: Thu Jan 13, 2005 6:44 pm
Location: Sarasota Florida
Contact:

Re: Great XHTML and CSS

Post by JAB Creations »

If by great they also mean correct you should serve the page as application/xhtml+xml otherwise you're actually just coding malformed HTML.

Presuming they haven't banned using a serverside language I would have a look at the clientside headers and determine if application/xhtml+xml is supported. Then I would serve XHTML 1.0 Strict as text/html for non-XHTML browsers (Internet Explorer and Opera 6.X and older basically) and serve everything else as XHTML 1.1 as application/xhtml+xml.

Code: Select all

<body> <div id="parent"><div id="child">
Don't use anything except width on parent elements (parent being direct children of the body element). You won't need to fix IE in that scenario. Always attempt to reserve parent padding usage as child margin instead. Basically the next child uses margins instead of it's parent using padding.
jack_indigo
Forum Contributor
Posts: 186
Joined: Sun Jun 08, 2008 11:25 pm

Re: Great XHTML and CSS

Post by jack_indigo »

JAB Creations wrote:If by great...etc. etc.
Thanks for your thoughtful post, JAB. I'll keep this in mind.
jack_indigo
Forum Contributor
Posts: 186
Joined: Sun Jun 08, 2008 11:25 pm

Re: Great XHTML and CSS

Post by jack_indigo »

omniuni wrote:...and missing some big ones....etc. etc.
Omniuni -- very insightful post. I'll keep this in mind as I prepare the portfolio.
User avatar
omniuni
Forum Regular
Posts: 738
Joined: Tue Jul 15, 2008 10:50 pm
Location: Carolina, USA

Re: Great XHTML and CSS

Post by omniuni »

You're welcome, Good Luck!
jack_indigo
Forum Contributor
Posts: 186
Joined: Sun Jun 08, 2008 11:25 pm

Re: Great XHTML and CSS

Post by jack_indigo »

Here were some of the interview questions I recall for this gig:

1. Do you know what the box model is in regards to browsers?

{I had heard this, but bombed it. I then asked if he could provide a hint and I would be able to explain. He then started talking about padding, margins, and borders, and I said, oh -- margins add space on the outside of a box, padding on the inside, and borders on the outside.}

2. What does quirks mode mean?

{I said I didn't know exactly, but thought it meant a state in IE where it defaults to HTML 4?}

3. Why might I use a DOCTYPE?

4. Describe some features of XSL.

{This hit me from left field because I didn't know the job required use of it. However, I used it back in 2001 only briefly, so I said that and said it might take me a couple days to relearn it. I said in general it's a template language to convert something from one data format like XML into another format like XHTML.}

5. What are some ways you know of to reduce page load speed?

6. Why might I use or not use sprites?

{I bombed this one because I told him I had only read this one 2 days ago and knew it had something to do with images, but had forgotten what else was interesting about it.}

7. What kinds of addons do you use to help debug a XHTML, CSS, or Javascript? (And after I mentioned my answer -- ) Any tools besides YSlow or Firebug?

8. How may I handle people with a disability with my website?

9. What kinds of reasons are there why I might put an image in my CSS versus in the XTHML?

10. When might I need to minify my CSS?

11. Describe some levels of minifying CSS.

12. Why might I use multiple CSS files as opposed to one or two?

13. Why might I use an ID versus a class on an XHTML element?

14. Describe some differences between HTML 4.01 Transitional and XHTML 1.0 Transitional.

15. Describe some differences between XHTML 1.0 Transitional and XHTML 1.0 Strict.

16. With jQuery, how might I handle like a click on an image if I wanted that?

17. Why might I use onclick versus, say, jQuery to handle it?

{I gave him a couple answers on this and said basically it depends on what you're trying to do. I don't know if he liked that answer or not.}

18. Name some WCAG 1.0 or 2.0 guidelines you know.

{Luckily I had studied this the night before based on your recommendations, guys. I also had the screen open on my page.}

19. In Javascript, what is a prototype?

{I told him that all I could think was that it was Javascript's way of making a kind of class, but admitted that with jQuery I am abstracted from having to deal with this and mostly I just deal with jQuery. I don't know if he liked that answer or not.}

20. Are you aware of how many connections a browser can open back to the web server at a time?

21. Do you know what a reset.css is? (And when I answered, he asked --) Why is it a good idea to use it?

22. How do you declare font sizes in your XHTML?

{I told him to take a reset.css and set font sizes to 62.5%, and then inside the page use ems, with 1em being roughly 10px, and then use a chart for every other point size I might want. He said that was an excellent answer -- that's what they use.}

23. Why use ems versus points or pixels?

{I told him about the IE problem with points and pixels, and why ems is better, although points is more developer friendly because then you don't have to use like decimal places on describing your sizes. So, 100%, I use ems now but when the day comes when we can use points, I plan to do so. The problem is IE.}

24. Do you know what I might mean when I say "table-less" XHTML? (And when I answered, he asked --) When might I use tables in XHTML?

25. What does eval() mean in Javascript?

26. Is it okay to use eval() in Javascript?

27. How do I access the nth character of a string in Javascript?

28. How do I see if a string contains another string in Javascript?

29. With CSS, how do you make a container of floats expand to the size of floats inside, and work cross-browser starting with any of the top 6 browsers since the launch of IE6?

30. With CSS, how might I use absolute positioning on an item inside something so that it goes by those inner bounds and not the bounds of the page?
User avatar
omniuni
Forum Regular
Posts: 738
Joined: Tue Jul 15, 2008 10:50 pm
Location: Carolina, USA

Re: Great XHTML and CSS

Post by omniuni »

Wow! Lot's of questions.

My comments in red.
jack_indigo wrote:Here were some of the interview questions I recall for this gig:

1. Do you know what the box model is in regards to browsers?

Most importantly, IE uses a different box model than the rest of the browsers. It usually requires some tricky code to make sure that everyone's box models are consistent.

{I had heard this, but bombed it. I then asked if he could provide a hint and I would be able to explain. He then started talking about padding, margins, and borders, and I said, oh -- margins add space on the outside of a box, padding on the inside, and borders on the outside.}

2. What does quirks mode mean?

{I said I didn't know exactly, but thought it meant a state in IE where it defaults to HTML 4?}

Quirks Mode refers to any browsers pre-w3c compliant implementations of HTML/CSS. See http://www.quirksmode.org/css/quirksmode.html

3. Why might I use a DOCTYPE?

4. Describe some features of XSL.

{This hit me from left field because I didn't know the job required use of it. However, I used it back in 2001 only briefly, so I said that and said it might take me a couple days to relearn it. I said in general it's a template language to convert something from one data format like XML into another format like XHTML.}

5. What are some ways you know of to reduce page load speed?

6. Why might I use or not use sprites?

{I bombed this one because I told him I had only read this one 2 days ago and knew it had something to do with images, but had forgotten what else was interesting about it.}
Sprites, by my familiarity are simply small graphics which can be used several times. What were they shooting for?

7. What kinds of addons do you use to help debug a XHTML, CSS, or Javascript? (And after I mentioned my answer -- ) Any tools besides YSlow or Firebug? Firefox web developer toolbar, FF also has a built-in javascript console.

8. How may I handle people with a disability with my website?
Hooray CSS!

9. What kinds of reasons are there why I might put an image in my CSS versus in the XTHML?
Mobile devices, printing, accessibility... again, I love my CSS.

10. When might I need to minify my CSS?

11. Describe some levels of minifying CSS.

12. Why might I use multiple CSS files as opposed to one or two?

All interesting CSS questions, those.

13. Why might I use an ID versus a class on an XHTML element?

14. Describe some differences between HTML 4.01 Transitional and XHTML 1.0 Transitional.

15. Describe some differences between XHTML 1.0 Transitional and XHTML 1.0 Strict.

16. With jQuery, how might I handle like a click on an image if I wanted that?

17. Why might I use onclick versus, say, jQuery to handle it?

{I gave him a couple answers on this and said basically it depends on what you're trying to do. I don't know if he liked that answer or not.} My thought would be weight on the processing machine. onclick is a much faster way to trigger a blatantly simple event than having all of jQuery execute.

18. Name some WCAG 1.0 or 2.0 guidelines you know.

{Luckily I had studied this the night before based on your recommendations, guys. I also had the screen open on my page.}
I'd have been in deep doo-doo with this one. I had to look it up to realize what the acronym meant!

19. In Javascript, what is a prototype?

{I told him that all I could think was that it was Javascript's way of making a kind of class, but admitted that with jQuery I am abstracted from having to deal with this and mostly I just deal with jQuery. I don't know if he liked that answer or not.}
You don't think he maybe was referring to the prototype framework?

20. Are you aware of how many connections a browser can open back to the web server at a time?

21. Do you know what a reset.css is? (And when I answered, he asked --) Why is it a good idea to use it?

22. How do you declare font sizes in your XHTML?

{I told him to take a reset.css and set font sizes to 62.5%, and then inside the page use ems, with 1em being roughly 10px, and then use a chart for every other point size I might want. He said that was an excellent answer -- that's what they use.}

Could you explain that for me? I always just set a global font size based on points, and how large I want the general font to be, and then follow it with percents everywhere else.

23. Why use ems versus points or pixels?

{I told him about the IE problem with points and pixels, and why ems is better, although points is more developer friendly because then you don't have to use like decimal places on describing your sizes. So, 100%, I use ems now but when the day comes when we can use points, I plan to do so. The problem is IE.}
What's the problem with IE? I've actually never noticed any problems with it using points. I know, I know, just Google it...

24. Do you know what I might mean when I say "table-less" XHTML? (And when I answered, he asked --) When might I use tables in XHTML?

25. What does eval() mean in Javascript?

26. Is it okay to use eval() in Javascript?

27. How do I access the nth character of a string in Javascript?

28. How do I see if a string contains another string in Javascript?

29. With CSS, how do you make a container of floats expand to the size of floats inside, and work cross-browser starting with any of the top 6 browsers since the launch of IE6?

This drove me INSANE until a friend of mine showed me the simple trick...

30. With CSS, how might I use absolute positioning on an item inside something so that it goes by those inner bounds and not the bounds of the page?

Well, sounds like you pretty much aced it to me! Good luck!!
jack_indigo
Forum Contributor
Posts: 186
Joined: Sun Jun 08, 2008 11:25 pm

Re: Great XHTML and CSS

Post by jack_indigo »

Sprites are where you make one big image, put all your typical button and decorative site images inside there, and then use background image positioning to move that image around, along with width/height and overflow restrictions, to only show one small piece of that image.

The term prototype in this case was not the Prototype framework -- he spelled that out. I described it as a kind of class in Javascript. That was actually sort of close. Here's the real answer, though: http://javascriptkit.com/javatutors/proto.shtml

Ems are used these days instead of points because some browsers -- IE in particular -- have problems for people who increase the font size on their browser. With points, some versions of IE won't increase the font size when someone chooses that feature inside IE. So, there was a big push last year to move from points to ems. The trouble is, ems are somewhat weird because:

(a) You have to use like BODY{font-size:62.5%} in a reset.css, which is strange unless you understand why.
(b) You have to realize that 1em is roughly 10px, and use a chart for everything else.
(c) Unlike points, when you use an em setting on a div, and then use another em setting on an inner div, the result is cumulative. With points, it is not cumulative and is exact. This creates some confusion unless you get used to it and don't do that.
User avatar
omniuni
Forum Regular
Posts: 738
Joined: Tue Jul 15, 2008 10:50 pm
Location: Carolina, USA

Re: Great XHTML and CSS

Post by omniuni »

Sprites- Ah! Now I know what you mean!

Prototype - Cool.

Ems - Dear Deity. I don't work on anything high enough profile to make me want to leave my nice comforting points, but it's good to know.
Post Reply