👋 Oi, mga repapips, Brian Dys here! I love music, photography, and creative stuff like UX design and art. This is a place where I collect my thoughts and works. Apart all these, I’m Jaycelle’s better half and Bryce’s dad. 🥰
About Snippet
Categories
0
Comment
I’m being confounded about an article I’ve read about your logo being an image (and not a background image). You would notice about the differences between the two wherein img puts your actual image on the page and h1 replaces the text with a background image of your logo.
You may be using one method over the other — and to calm your nerves down, Facebook and WordPress use h1 approach while Google and Firefox use img approach (and a whole lot of different combinations for other sites out there).
Now, I won’t go into details about both methods because I’m sure you’re already using one — even different from the two mentioned. What’s important is the answer to “why are we using what we use?”
The answer lies on your priorities.
- You like the underlying text to be the document title of your webpage
- You like the logo to be presented as is — an image of a logo
If you’ve answered the former, then most likely you’re using h1 approach and the latter, img approach.
Personally, the way I test if I’m writing a web document properly is I strip it off everything — images and CSS — and see if it still makes sense from having semantic HTML elements to its document outline. And one of the natural steps in this test is having a heading on top of your document — usually the title of the site — it could be a logo or an photograph with an inscription — but what it represents is more important.
There are lots of combinations in putting up a logo on your webpage — just be conscious of why you’re choosing one approach over the other.
Categories
In a quest to streamline and improve our HTML markup, I’m looking at how the page would appear to a person using an assistive device such as a screen reader.
I’ve installed Fangs – a Firefox extension that “helps developers find accessibility issues in web pages and managers to understand how their website may appear to a person using an assistive device.”
In Fangs preferences, switch the output style to “Sectioned” to have an overview of the sectioning of the HTML document — this is related to checking the outline.
Categories
Editing HTML5 Boilerplate 4.1.0
- Edit line: <meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1.5“>
- For mobile device browsers, set the initial scale to 100% zoom and limit the zooming to 150%
- New line: <link rel=”shortcut icon” href=”img/favicon.ico”>
- Place your icon inside the img folder
- New line: <link rel=”stylesheet” href=”css/ui.css”>
- Start with a blank stylesheet alongside normalize and main.css
Categories
Update on February 22, 2013
Let’s get to the details on how to write the HTML markup, really.
- Write pure text of everything
- Enclose all texts in semantic HTML tags — don’t use <div> and <span>
- Add lists — <ul>, <ol>
- Add headings — use only <h1>
- Add sectioning elements like <header>, <nav>, <section>
- Check document outline
—
HTML (weighing on content structure and document outline)
- Write HTML5 tags
- No <div>s, no <span>s
- Check if HTML elements are sematic
- Check document outline
- Use <div>s and <span>s for visual design-specific purposes
CSS (weighing on mobile-first layout)
- Write styles
- No floats
- No positions
- Set color and background-color
- Set images
- Looks good on small devices? Move on to the next size
Categories
Let’s say you have this line on your webpage:
Hey guys, you may email me at yoyo@whatsup.heh or call me at 14344.
and you want to break the line right after the word “or”.
Do you do this:
[code lang=”html” title=”HTML”]
<p>Hey guys, you may email me at <a href="mailto:yoyo@whatsup.heh">yoyo@whatsup.heh</a> or<br>
call me at <a href="tel:14344">14344</a>.</p>
[/code]
or this?
[code lang=”html” title=”HTML”]
<p>Hey guys, you may email me at <a href="mailto:yoyo@whatsup.heh">yoyo@whatsup.heh</a> or
<span class="break">call me at <a href="tel:14344">14344</a></span>.</p>
[/code]
[code lang=”css” title=”CSS”]
span.break {display:block;}
[/code]
The latter? You’re doing a great start!
Rule of thumb: Write the HTML, forget the CSS
What I mean by this is, as you are writing the HTML markup, you should check your webpage in the browser as it is — without heavy consideration on how big the fonts should be or which color would be preettyy… Just imagine you’re a visually-impaired person “reading” a webpage.
The same way with sentences, it should run continously without consideration on the width of its container or the length of its line.
If we want a break in the line, it is purely for presentational purposes so do it thru CSS.
Categories
Module block
[code lang=”html”]
<div class="mod">
<div class="mod-cr">
<div class="mod-hd"><h3 class="mod-heading">Heading label</h3></div>
<div class="mod-ct"></div>
</div>
</div><!–.mod–>
[/code]
This is the basic structure of every content block in your webpage. This way, it would be modular, meaning, you could move it anywhere in the page without too much dependency on other elements.
Update – Nov 12, 2012:
- I added mod-hd as header for the module block