Hi, I’m Brian Dys — a photographer from the inside looking out · a composer entangled in electronic music · a UX designer · a spouse, a parent, & everything in between.
About Snippet
Categories
0
Comment
…but the background colors and font colors.
What to do after writing the HTML markup?
Now that we’ve got the mock-up translated into structured content marked up in semantic HTML, it’s time to paint the town.
This morning, I gave the class a seat work — tear off a page, any page from any magazine and translate it into structured content marked up in semantic HTML. What does that mean?
Say you tore off a car advertisement page — most probably it would have the following elements on it:
- Brand logo
- Tagline
- Headline
- Subhead
- Images
- Paragraph of copy
- Fineprint
Each element we identified has an equivalent HTML element that we could use in marking up the HTML document. For example:
- Brand logo = h1
- Headline = h1
- Subhead= h2
- Paragraph of copy = p
- Images = img
- Fineprint = p
<liTagline = h2
Of course, we would still need to “group” those elements into bigger “boxes” such as:
- header
- div
- footer
With HTML tags, the content could be translated into:
[code lang=”html”]
Brand logo
Tagline
Headline
Subhead
Paragraph of copy
[/code]
Notice the addition of the <div> attribute “role” with the value, “main” — since we don’t have a semantic tag (yet) for a main content in our document, we used “role” to denote the meaning of that div’s content. “Main” simply means “main content”. It is one of the predefined Role values in XHTML. Here’s the complete list of Role values from W3C.
Categories
This week, I’m conducting a workshop on basic HTML and CSS at Chikka. Participants come from the corporate communication, creatives, and content teams. For a martian to easily digest a complicated topic such as a webpage, I’ve used a human being as a metaphor for the three frontend layers of a webpage.
Frontend meaning the webpage not needing any database or server — it should launch and run even when all you’ve got are notepad, Internet Explorer 3.0, and zero prepaid load in your EDSA Mail internet dial-up connection account (no internet needed!).
HTML: the structure layer
Think about a simple human body; disregard the color of its skin or the length of its hair or whether it is male or female — god simply made it with a head, body, and legs. No complicated hiphop outfit nor nice slick pompadour; it doesn’t have any flavoring not even vanilla. It’s only a naked human being. That’s our HTML markup — purely focused on the very essence of the structure of the content.
The HTML markup is what you see when you view the source of a webpage or when you open an HTML document in a text editor.
That’s the structure of the content of your document. For example, your webpage is an article about cats, then most probably, the structure of your content is arranged according to this:
- Header
- Site name
- Navigation
- Content
- Cat article
- Footer
- Copyright information
Of course, each item I enumerated has a corresponding HTML tag like for the header group it is <header>, etc.
It is best to forget about CSS when we’re laying out the structure layer. What all matters here is the structure of your content — don’t you ever write <header> at the bottom of the document because that’s not the correct structure. Header should be at the top, footer at the bottom.
Also, what we should give attention to in laying out the structure layer is semantics. Meaning, if you’ve got some important title or heading in your design, make it <h1> or <h2> depending on the hierarchy of your headings. Don’t use the heading tags for their font sizes; use them to show hierarchy in your headings. <h1> being the most important like the title of your site or the heading of your cat article. Likewise, if you have a list of anything, use <ul> or <ol>.
Open the HTML document in a browser, close your eyes and let someone read your HTML webpage per element from top to bottom, from left to right (or right to left in other cases) and say “next” if you want to proceed to the next element. If it makes sense to you, then most likely you’ve made the right structure.
To somehow test its semantics, you may want to use a screen reader. Everything should make sense to you while listening and “browsing” the content.
CSS: the presentation layer
Now, it’s time to present our naked human being to the world. It needs something to wear. Something like Sailor Moon’s costume.
That’s CSS, short for Cascading Style Sheets. A set of instructions that our HTML document takes to have a visual design like background color and many more.
CSS could also make HTML elements be positioned anywhere on the webpage whether at the left, right, top, or bottom.
JavaScript: the interaction layer
And lastly, whenever you want your vitruvian man to do some break-dancing, add some script.
A practical example is the validation of a form. Of course, we’ve got our content which is a form (HTML) and we’ve dressed it up with spanking gold-colored buttons (CSS), now it’s time to make it show messages when a required field is skipped and to never ever activate the button until the user fills up correctly all the required fields (JavaScript).
Combine all three layers and you’ve got that breakdancing streetdancer.
Minus the baby-kicking.
Categories
What is this?
If you say a “loader” you’re right. If you say a “throbber” also right.
But this looks more like a throbber:
—
By the way, for those of you thinking of using animated PNG for throbbers or loaders, browser support is currently bleak.
Categories
So, you want to visualize how large your background is with margins and paddings?
Utilize the color “red”. It’s easy to type in the keyboard and it appears instantly like a bright red fruit in the midst of the forest.
For example:
[code lang=”html” title=”HTML”]
<div class="favorite-things">
<ul>
<li>Mobile phone</li>
<li>Television</li>
<li>Couch</li>
</ul>
</div>
[/code]
[code lang=”css” title=”CSS”]
.favorite-things li {
margin:1em 0;
padding:1em;
border-bottom:1px solid #ccc;
}
[/code]
Let’s say you want to see how a background-color upon hover would affect an <li> element, you could do this in Firebug or any DOM inspection tool:
[code lang=”css” title=”CSS”]
.favorite-things li {
background-color:red;
}
[/code]
The element would show if you’ve got the correct spacing in your paddings and margins.
Categories
Remember when I suggested that you forget about the CSS while writing the HTML?
Now that you’ve got your HTML markup ready, it’s time to mind the CSS.
So what’s the first thing to do in applying the Mobile First principle?
Forget about the floats
Forget about which goes to the left or right. Remember, we’re building the presentational layer of the website for mobile viewports which are narrow so it’s OK to stack everything first.
I’m currently experimenting by styling these properties in order:
- background-color
- color
Styling the background-color according to the mock-up will give us a visual cue of each blocks hierarchy in a vertical manner. Then set the actual color of the text contained in each block.
After these, it’s time to go more detailed based on the mock-up. Maybe exporting the image assets is next.
I’ll keep you posted!
Categories
Don’t simply use the shorthand if you want to set only the background color:
[code lang=”css” title=”CSS”]
div {background:red;}
[/code]
Because what that really means is:
[code lang=”css” title=”CSS”]
div {background:none repeat scroll 0 0 red;}
[/code]
The background values in order are:
- background-image
- background-repeat
- background-attachment
- background-position
- background-color
One of the conflicts in using the shorthand in styling only the background color is that it sets the background-image to none.
In case that you need to style the same selector with a background image, the value in the shorthand property will persist.