HTML gradient
Where, in the gradient of web patterns, does HTML(XHTML) fit?
Of course, this is continuously changing. The markup language used to provide:
(1) identity of the page
(2) classification of content
(3) layout of content
(4) styling of content
... and of course, with CSS, (4) is now deprecated completely, with (3) actively being pushed out of the door, but keeping a foot in, in the "CSS with Minimal Tables" compromise (see Apple's Web Development Best Practices page).
That said, it is impossibly difficult to engage in (2) without an existing storyboard (or wireframe or visual outline or mock-up or comp) in mind, on the screen or on paper. In fact, (2) never happens otherwise ... even the most dynamically generated web pages will reveal, in the designer's naming and categorization of classes and ids of elements, some kind of visual arrangement of data -- in fact, usually it was written with some specific example in mind.
Still, both the "Pure CSS" and the "CSS with Minimal Tables" strategies have the same effect: structuring layout sufficiently to begin work on further differentiation, while leaving enough flexibility to change position and emphasis when needed.
(1) is well-covered elsewhere ... titles, DOCTYPES, meta tags, etc.
So we need to look more closely at the gradient sequence of (2) or (2)-(3). The key is to understand the early unfolding of good decisions regarding what is most important about the web page.
* Determine, and order, your ends
* Determine, and order, your means
The Ends and Means, or the "Purposes and Processes", when spelled-out fully, tend to be intertwined: nouns and adjectives, verbs and adverbs ... Discovering and ordering these can involve quite a bit of deep digging. And, in group situations, some tough-minded facilitating.
Let's say they've been found. We then need to:
* Arrange the key elements.
* Ensure their differentiation from each other.
* Ensure that they complement each other.
If you have more than two things on the page, this usually means:
* Arrange the elements into categories beneficial to the user.
* Clarify and distinguish elements by level and type of "engagement", such as which elements require the users to be active, and which require them to be passive.
We now typically have something that would allow us to create a "div" scaffolding. Possibly the most important aspect of this stage is:
* name the elements
... with "class" and "id" designations. These might be:
* unique elements
* categories of elements
* active elements, for example for use with Javascript
... after this, and before applying CSS, we can lean on HTML's presentation categories for differentiation: not everything is a "div". So, "ul", "ol", "table", "h1", "h2" etc. are perfectly appropriate for categorizing certain types of content. It's just typically LESS important than the NAME of the content, and the POINT of the content. But MORE important than the CSS property:value declarations.
And besides, technically, we need all the HTML elements differentiated and named before we can even begin to write CSS rules, which use "selectors" that identify standard element types, our element classes and our element ids.
Of course, this is continuously changing. The markup language used to provide:
(1) identity of the page
(2) classification of content
(3) layout of content
(4) styling of content
... and of course, with CSS, (4) is now deprecated completely, with (3) actively being pushed out of the door, but keeping a foot in, in the "CSS with Minimal Tables" compromise (see Apple's Web Development Best Practices page).
That said, it is impossibly difficult to engage in (2) without an existing storyboard (or wireframe or visual outline or mock-up or comp) in mind, on the screen or on paper. In fact, (2) never happens otherwise ... even the most dynamically generated web pages will reveal, in the designer's naming and categorization of classes and ids of elements, some kind of visual arrangement of data -- in fact, usually it was written with some specific example in mind.
Still, both the "Pure CSS" and the "CSS with Minimal Tables" strategies have the same effect: structuring layout sufficiently to begin work on further differentiation, while leaving enough flexibility to change position and emphasis when needed.
(1) is well-covered elsewhere ... titles, DOCTYPES, meta tags, etc.
So we need to look more closely at the gradient sequence of (2) or (2)-(3). The key is to understand the early unfolding of good decisions regarding what is most important about the web page.
* Determine, and order, your ends
* Determine, and order, your means
The Ends and Means, or the "Purposes and Processes", when spelled-out fully, tend to be intertwined: nouns and adjectives, verbs and adverbs ... Discovering and ordering these can involve quite a bit of deep digging. And, in group situations, some tough-minded facilitating.
Let's say they've been found. We then need to:
* Arrange the key elements.
* Ensure their differentiation from each other.
* Ensure that they complement each other.
If you have more than two things on the page, this usually means:
* Arrange the elements into categories beneficial to the user.
* Clarify and distinguish elements by level and type of "engagement", such as which elements require the users to be active, and which require them to be passive.
We now typically have something that would allow us to create a "div" scaffolding. Possibly the most important aspect of this stage is:
* name the elements
... with "class" and "id" designations. These might be:
* unique elements
* categories of elements
* active elements, for example for use with Javascript
... after this, and before applying CSS, we can lean on HTML's presentation categories for differentiation: not everything is a "div". So, "ul", "ol", "table", "h1", "h2" etc. are perfectly appropriate for categorizing certain types of content. It's just typically LESS important than the NAME of the content, and the POINT of the content. But MORE important than the CSS property:value declarations.
And besides, technically, we need all the HTML elements differentiated and named before we can even begin to write CSS rules, which use "selectors" that identify standard element types, our element classes and our element ids.