Always validate, keep content and presentation seperate and make sure to optimize. Do what you can to make the (X)HTML as human-readable as possible, and the CSS file as optimized and clean/small as possible.
First Cup of Ubuntu
Always validate, keep content and presentation seperate and make sure to optimize. Do what you can to make the (X)HTML as human-readable as possible, and the CSS file as optimized and clean/small as possible.
Tall Cafè Ubuntu
Great XHTML and CSS makes it entirely clear where a particular change goes without fear of mucking things up. Sure, your layout and styles and whatnot may be awesome; and by awesome I mean totally sweet - but that doesn't count a bit when you want to edit the page contents (nevermind now the idea to automatically generate content and insert it where needed) and get out of the XHTML/CSS as fast as you can without fear of breaking anything.
So the bits that are most likely to change should -in order to be changed easily- require the least amount of code and most importantly: the least complex code. Which means to me that something like:
Is pure horror.Code:<div id="someMagicCSSIdentifier"> <h1 class="articleheader">Bad code</h1><br /> <p class="example of bad code">This is an example of how not to do it</p> <p class="example of bad code">Imagine the fun manually updating it</p> <p class="example of bad code">Each time you want to type a paragraph</p> <p class="example of bad code">You could figure out a Kafka book easily.</p> </div>
100% Pure Ubuntu
As SuperMike mentioned, inserting a TON of comments *will* cause a slower page load, due to the fact that whether the browser ignores it or not, it's still having to download the document in the first place. Unfortunately, dial-up is still aroundOriginally Posted by tturrisi
.
Gee! These Aren't Roasted!
- Follow the specification to the character.
- Do not use tables for page layout!
- Test it in at least 3 browsers (Internet Explorer, Firefox, Opera).
- Make sure that it looks good in all the browsers.
- Do not use too many images, as too many images can lag up page load. (Not XHTML, but if you want happy visitors to your site, make it load quickly)
Customer User Title
1. Don't use Tables for layouts, only for tables, hence the name.
2. Make sure it is FULLY accessible and FULLY complies to the WCAG
3. Appended to 2, make sure that text can be changed in size and not hinder the interface
4. Works in all browsers, and contains the appropriate stylesheets for IE6
5. Remember to place ALL of your javascript at the BOTTOM of the page. Javascript is not (and according to #2, should not be) required, so it is the least important part of the page to load.
6. Don't use GIF, ever. Use JPEG for images with many colors, and PNG for images either low in color, or require transparency.
7. Stray away from dirty hacks to get things done (like Microsofts implementation of an engine for IE6 to display PNG's correctly. Instead, use something like Unit PNG fix.)
8. While specifications are great, use them sparingly for bug checking. In the business world, I haven't come accross a client yet that cared about the W3C test results as long as the page displayed fine on all popular browsers, lived up to its accessibility needs, and was able to be modified for the users pleasure. What I'm saying here is: Web Standards mean jack in the industry.
Has an Ubuntu Drip
2: Man, that's a hard thing to pull off, especially in this day and age with jQuery all over the websites. It's like you have to build a special page in your sitemap that duplicates the functionality in a clumsy but effective WCAG way for anything you are doing with jQuery. For instance, imagine using a jQuery Carousel image doodad. Those with handicaps may not be able to easily get around with it. You may have to create a link on the page to let the handicap person to see all the images in one big screen of thumbnails and then let them choose the one they want.
5: The bottom thing is nice, but I see a problem with it. For one, you end up with slow Javascript. For instance, let's say you have suckerfish menus on the page. Someone may load your page and try to hover over them before the Javascript has finished loading, and thus not be able to get around on your site until that's finished. So, for me, I disagree -- load jQuery from the page head section, load Javascript at the end of the page as a guideline, not the rule, and load any Javascript early in the page (like in the page head section) for anything that needs to load super fast or the site becomes less functional, such as with menus.
100% Pure Ubuntu
Glad to see another jQuery user! Long live jQuery!
Tall Cafè Ubuntu
I would be slightly more careful. Make sure your code conforms to the standards without so much as a warning from the validator and you will find that (#4) becomes a lot easier. There are other browsers on this world besides MSIE 6, 7 and 8; most (all?) of them try their best to implement those very same standards you code towards. So if you want to support Safari [Webkit], Chrome [Webkit], Arora [Webkit], Epiphany [Webkit], Iceweasel [Gecko], Firefox [Gecko], Opera [Presto], Flock [Gecko] etc. in one go: standards compliant code is your best bet.8. While specifications are great, use them sparingly for bug checking. In the business world, I haven't come accross a client yet that cared about the W3C test results as long as the page displayed fine on all popular browsers, lived up to its accessibility needs, and was able to be modified for the users pleasure. What I'm saying here is: Web Standards mean jack in the industry.
And web standards (as are any standards) are important enough for companies like Google, Opera, SUN (now Oracle) etc. to spend money on by letting their employees spend time and effort on those.
Has an Ubuntu Drip
Here were some of the interview questions I recall for this project I was trying to join:
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?
Customer User Title
Every element is a rectangular box. Remember your Geometry class when every square was a rectangle but not all rectangles are a square. It's just the relationship between Margins, Borders, Height, Width, and padding.
For easier debugging and correct rendering across browsers. Browsers use the doctype to determine the correct method of laying out a page.
Use sprites, and tell the server admin to flip the file compression switch on (all modern browsers support gzip, and even if they don't, apache will accommodate them.)
If you were to place one all the images in one file, you would then be able to make a single request from the server and cache the image on the clients end. You would then be able to call upon the coordinates of the images within the larger sprite. This way you could satisfy the needs of the entire site with one image, saving the user and the server valuable bandwidth. Ask and Google do this.
I use the Web Developer Toolbar.
Make sure you append the correct noscript section to a page to make sure that people without JavaScript or those that use screenreaders are able to view the equivalent information between them.
I honestly don't know other than it feels smoother. Besides that, images in XHTML are more equivalent to objects while in CSS are more like scenery providing a more fine tuned flow.
You're using a single CSS script to supply your entire website. Using just one is NOT a bad thing. You can cache it via a single HTTP GET request.
Your visitors aren't guaranteed to visit every part of your site. You may want to separate some heavy parts away from each other to ensure bandwidth savings.
*applauds*
Around 2 on most browsers.
To ensure consistent results cross-browser. Browsers can set their own css-defaults, but designs never always follow those trends. Therefore, it is your job to reset all of the CSS tags to mold them to your liking.
More than anything, it's accessibility. Disabled people will set a large font so they can see. If the font is set to pixels, it will override this for the user, but using an em, the page will set the font size according to the already default font size on the users computer. If their font size is 26px, then 1.5 ems will increase it to 39px.
Yes, and only when you need to display data in a table form, such as an order form with different choices of packages.
I just answered a random choice of questions, but I thought you may like my input on it. Maybe not, but it's my 2c anyhow.
Posting Permissions
Adv Reply
Bookmarks