Has an Ubuntu Drip
Although I have my own idea of this, but does anyone here have a picky opinion on what they think exemplifies "great" XHTML and CSS? Your help just might help me catch a lucrative project in this bad economy -- something has come up for me. Your help is greatly appreciated.
Dark Roasted Ubuntu
I fail to understand. Do you want a website that uses "great" XHTML/CSS? Or do you want "great" XHTML/CSS design patterns? Or what?
Tall Cafè Ubuntu
Just don't use tables for layout and make sure that the layout dousen't break if the user increases the text size.
im dyslexic, please don't comment on my spelling
blender 3d artist, visit my portfolio
Quad-Ren, Open source, resolution independent 2D graphics engine
Screen space is a precious resource, don't waste it
Tea Glorious Tea!
Be sure to separate content from presentation.
Has an Ubuntu Drip
I've got a monstrously great project opp. The catch is that they want me only for front-end work because they already have a PHP dev., a Java dev, and a C# dev. (Their backend is nuts.)Originally Posted by soltanis
They said they want to hire someone who can do great XHTML and CSS, and they are mostly interested in viewing the source of what I've done, not necessarily any designs, and they aren't interested in any PHP work I've done.
They also want to see my jQuery and AJAX work, but I've already got a sample ready on that.
I've already got some ideas on what XHTML and CSS things they might want to see to consider it the best that it could be. However, I'm interested in seeing what you all have to say so that I could ensure I don't miss anything.
Tall Cafè Ubuntu
Just show 'em what they want to see, examples of previous work. Show 'em html, xhtmk & css.
There's no definitive answer to "what is great xhtml/css?"
But there are coding standards and coding styles that set one group of code from another.
For example, if use css ids & classes, use simple non-confusing names. Use <div id="header">, <div id="footer"> don't use <div id="top-of-page"> & <div id="bottom-of-page">.
Don't name ids and classes with "illegal names". For example, don't do <span class="onload">, which will actually work as a style, but best to keep the name "onload" reserved for scripting.
Code in such a way that if any other coder reads it they will instantly understand your namings.
Get the idea that when holding such a job that your work represents a hat (a job title), not personal stuff. Thus your replacement, senior, junior or others can view your code & instantly grok it, and/or easily integrate it with no changes to backend code.
Last edited by tturrisi; June 14th, 2009 at 08:18 PM.
5 Cups of Ubuntu
Standards compliant.
Has an Ubuntu Drip
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. (That one I think is controversial to me. I mean, I prefer points because then I don't have to do 1.5em, 2.7em, etc., and instead I do 12pt, 14pt, 18pt -- matching more what you might see with a word processor. But for some reason the rest of the web world likes em's? I still don't get it.)
- 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.
Tall Cafè Ubuntu
Has no bearing on page load, comments are ignored by the browser so it in essence sees the start of a comment & skips to the end. Try it. Paste a 5 page word doc in between comment tags and see if you can tell the difference in page loading.- Doesn't include comments -- reduces page load speed.
Commenst are important and should be used, especially if working with other developers.
Has an Ubuntu Drip
The way the HTML protocol works, it loads the XHTML page, sees the separate CSS file link, and downloads it. Once downloaded into the browser cache, it processes it. The larger that file is, the slower it is before it can process it. Sure, it might skip it fast after downloading it, but that initial download is the problem. Most browsers might only show a fraction of a slowdown because of how efficient they are, but when you have a large page doing a lot of things, and several other CSS files, you need every fraction of a second that you can get. Fractions of seconds add up. They also increase your bandwidth bill for the website ever so slightly.
Posting Permissions
Adv Reply
Bookmarks