R. Kane;1344217 wrote:
Also, you've mentioned a lot of "what not to do's" but what about "what I should be doing"?
1) Semantic markup -- Use the tags for their meanings, NOT their default appearance. The job of HTML is to say what things ARE, NOT what they look like.
2) separation of presentation from content -- really the same things as the first point. NOTHING in your markup, be it tags, classes or ID's should be saying what things look like. This also means you do NOT use the STYLE tag ever (shouldn't even exist!) and the STYLE attribute should be used with an eye dropper; only resorted to when style is actually conveying content since what's a good style for one media target quite possibly has no business even being used on another -- because again, there's more to a website than what it happens to look like on the screen a "designer" happens to be seated in front of.
3) progressive enhancement -- you slowly add your bits of fancy tech as you go.
First, start off with your content or a reasonable facsimile of future content in a text editor and put it into a logical order as if HTML, CSS and all the other fancy stuff never even existed. Content is KING of the Internet, so start with CONTENT.
Then, mark that content up semantically -- which means again saying what things ARE, NOT what they look like. DIV and SPAN obviously don't go in the markup at this point, and for ghu's sake create a logical document structure using numbered headings and HR for what they are FOR... which if you do, all those new HTML 5 structural tags become pointlessly redundant code bloat.
Just to clarify on that, h1 is the top level heading, EVERYTHING on the page is a subsection of the SINGLE H1 on the page. H2's are the start of subsections of the H1, H3's are the start of subsections of the H2's and so forth down the line -- which is why having multiple H1's is gibberish, why skipping over heading numbers is gibberish, why pairing H2+H3 or H3+H4 as title and tagline is gibberish (as was the now defunct HTML 5 hgroup). HR are for changes in section/topic where a numbered heading is unwanted/unwarranted, NOT for drawing lines across the screen. Of course, if all these tags mark the beginning of new sections, why do we need a SECTION tag? If browsers implemented heading navigation like they were supposed to, why do we need a NAV tag? (which does NOT mean 'menu', it means "UA's can skip this section to get to the content). Same even goes for FOOTER and ARTICLE -- and don't even get me started about the pointless garbage ASIDE tag. (which to be frank is about as legitimate in use as CENTER)
Then moving on one adds the CSS and any DIV/SPAN as needed to build the layouts -- adding those DIV and SPAN only once you've exhausted what you can do with the semantic tags... which is why the people who start out with nothing but a bunch of empty DIV IMHO have no clue how to use HTML properly. The layouts (yes, PLURAL!) should be elastic, semi-fluid and responsive.
Then and ONLY then do you start applying colors, backgrounds and style, and bring in the PSD jockey to make it pretty ... though increasingly the 'artists' are only really useful for making the logo thanks to CSS3 making it far, far easier to build clean attractive layouts.
Finally you enhance it with scripting if desired.
Overall it's called progessive enhancement, and it leads to a design that is accessible and gracefully degrades meaning it can reach as many users as possible.
... it's really easy to do; far easier in most cases than the train wrecks of bloated code most people vomit up and call a website. I don't get why so many people rail against the mere suggestion of said approach apart from it making painfully obvious what a load of manure all the scams like Photoshop jockey "layouts", off the shelf templates, and SEO-tardery actually are. There are SO many nube predators out there it's a significant contributor to my "disgust to the point of nausea" with the entire direction of the industry.
R. Kane;1344217 wrote:
Can you give an example of a website you find beautifully coded or inspirational and why so that I can understand your perspectives a little better?
Five or six years ago, I could have pointed you at several -- but with the sick fad and sicker buzzword of HTML 5 driving web development back to the worst of 1997 style practices, bloated garbage frameworks like bootcrap and jquery being slapped on websites that don't need them, and the general "sleaze it out the door as fast as possible who cares what it costs us in the long run" attitude -- much less the death of the five or six developers I had the least bit of respect for; I find it hard to find any sites other than my own to point you at.
Though take this rewrite I did of a page someone had over on DigitalPoint:
Thread about it is here with a full code breakdown (I used to do one of these a day -- now it's more like two a week)
Took their design concept and rewrote it using the methods I advocate. It's semantic markup, semi-fluid elastic responsive design, built using progressive enhancement. The reason I point at this one is I included the stage BEFORE style is applied, showing why semantic markup is so important:
Since that's basically what non-visual UA's like search engines, screen readers, braille readers and so forth use. (and why HTML 5 feels the need to piss that away I have no clue).
What really makes that rewrite so interesting is that the HTML+CSS is the same size as the OP's "table's for nothing" HTML.
Feel free to browse my "for_others" directory -- it's unlocked and filled with rewrites of code and examples I've done for users on various forums the past decade or so.
Likewise my EWIUSB website:
Is built using the same methodology, though it's reaching just about five years old now so the code is a bit out of date by my current standards. IMHO if you don't look at your own work from a year ago going "what was I thinking" you're in the wrong business!
That page is good for a laugh as the EWI owners love the design (colors and patterns based on the product box), and other designers hate it -- but regardless of the graphical stuff, the page gracefully degrades, is built pretty much using the techniques I advocate, and is fully responsive, elastic and semi-fluid which is how if you look in this directory:
You'll find screencaps of all the various different ways that ONE codebase can show itself -- be it different font metrics, screen widths, or device capabilities.
I'd also point out that despite all the 'style' that home page is what? 98k in 22 files... and that's including ALL the CSS for the ENTIRE site. (20k uncompressed, 5k compressed). Nowadays it would probably be even leaner as I've upped my game even more. Most 'modern' developers thanks to using garbage frameworks would end up with two to three times that before they even start plugging in content just in scripts and CSS... and typically thanks to those frameworks end up with two to ten times the HTML+CSS I do; but then claim it was "easier" and "faster"?!? On what planet?
If I had used bootcrap the page size would have doubled or more! I cannot fathom how anyone can see any legitimate benefits to using things like bootstrap, jquery, etc, etc... It's a bunch of fat bloated nonsense that has no business being used in 99% of the cases people use it. It makes more work, more code, and is in no way "easier" in any sense of the word.
Same goes for nonsense like LESS, SASS and OOCSS -- if you are finding benefits from using them, you're probably doing it all wrong. These three in particular all reek of a failure to grasp how to use selectors and inheritance properly, much less a "semantics, what's that?" attitude.
The ONLY explanation I can find for people to make such claims about 'frameworks', 'preprocessors' and other such tools is a failure to grasp how HTML and CSS work, what they are, and why they exist; and to be frank, if you don't understand those, you probably have no business building websites in the first place!
... which is the problem with such tools, they often delude people who have no business making websites into believing they can. That they're able to slap an inaccessible bloated slow loading very pretty but ultimately useless train wreck and have a handful of people pat them on the back regardless of what crap it is -- that just further fuels the delusion.
... and I suspect the ONLY reason they defend such sleazy, broken practices as vehemently as they do is the cognitive dissonance akin to that found amongst doomsday cultists after the predicted end of the world doesn't happen.
... and wow, continuing to THREE posts. What, did they lower the limit to below 10k now?