Brian Dys

Tag: HTML

  • To or to

    ?

    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.

  • Trying out Fangs – a Firefox screen reader emulator extension

    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.

  • Things to add to HTML5 Boilerplate HTML markup

    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

  • How to code in HTML and CSS, really?

    Update on February 22, 2013
    Let’s get to the details on how to write the HTML markup, really.

    1. Write pure text of everything
    2. Enclose all texts in semantic HTML tags — don’t use <div> and <span>
    3. Add lists — <ul>, <ol>
    4. Add headings — use only <h1>
    5. Add sectioning elements like <header>, <nav>, <section>
    6. Check document outline

    —

    HTML (weighing on content structure and document outline)

    1. Write HTML5 tags
    2. No <div>s, no <span>s
    3. Check if HTML elements are sematic
    4. Check document outline
    5. Use <div>s and <span>s for visual design-specific purposes

    CSS (weighing on mobile-first layout)

    1. Write styles
    2. No floats
    3. No positions
    4. Set color and background-color
    5. Set images
    6. Looks good on small devices? Move on to the next size

  • Break It Down: Breaking a line thru CSS and HTML

    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.

  • HTML5 Boilerplate & WordPress: Day 3 – Module Block

    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

  • HTML5 Boilerplate & WordPress: Day 2 – CSS

    ::selection

    [code lang=”css” highlight=”2,3,8,9″]
    ::-moz-selection {
    color:#fff;
    background: #00b6f2;
    text-shadow: none;
    }

    ::selection {
    color:#fff;
    background: #00b6f2;
    text-shadow: none;
    }
    [/code]

    • Hex color value #00b6f2 is a nice shade of cyan
    • Font color is white

    Image replacement

    [code lang=”css” highlight=”6″]
    /*
    * Image replacement
    */

    .ir {
    display:block;
    background-color: transparent;
    border: 0;
    overflow: hidden;
    /* IE 6/7 fallback */
    *text-indent: -9999px;
    }

    .ir:before {
    content: "";
    display: block;
    width: 0;
    height: 100%;
    }
    [/code]

    • Moved up above the /* Author’s custom styles */ – so that styles of the main selector will be cascaded
    • Added display:block since most of my selectors are intentionally diplayed as a block element

    Set and reset

    [code lang=”css”]
    /*=========================Reset=========================*/
    h1, h2, h3, h4, h5, h6, p, ul, ol, li {margin:0; padding:0;}

    ul {list-style:none;}

    /*=========================Set=========================*/
    p {margin-bottom:1em;}
    p:last-child {margin-bottom:0;}
    [/code]

    Resetting all basic text tags and setting the margin for <p> to bottom.

    Clearfix inside a wide viewport media query

    [code lang=”css” highlight=”1,17-34″]
    @media only screen and (min-width: 1024px) {
    /* Style adjustments for viewports that meet the condition */

    /*
    * Clearfix: contain floats
    *
    * For modern browsers
    * 1. The space content is one way to avoid an Opera bug when the
    * `contenteditable` attribute is included anywhere else in the document.
    * Otherwise it causes space to appear at the top and bottom of elements
    * that receive the `clearfix` class.
    * 2. The use of `table` rather than `block` is only necessary if using
    * `:before` to contain the top-margins of child elements.
    */

    .clearfix:before,
    .clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
    }

    .clearfix:after {
    clear: both;
    }

    /*
    * For IE 6/7 only
    * Include this rule to trigger hasLayout and contain floats.
    */

    .clearfix {
    *zoom: 1;
    }
    }
    [/code]

    I changed the media query from em to px because I am targeting viewports with exact dimensions.

    Clearfix which solves floating problems are placed inside this media query because for narrow viewports, I don’t plan to use floats.

    Show .assistive-text only to screenreaders

    [code lang=”css”]
    /*
    * Hide only visually, but have it available for screenreaders: h5bp.com/v
    */

    .visuallyhidden,
    legend,
    .assistive-text {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    }

    /*
    * Extends the .visuallyhidden class to allow the element to be focusable
    * when navigated to via the keyboard: h5bp.com/p
    */

    .visuallyhidden.focusable:active,
    .visuallyhidden.focusable:focus,
    .assistive-text:active,
    .assistive-text:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
    }
    [/code]

    Update – Nov 13, 2012:

    • I added legend to .visuallyhidden class selector since I don’t need that label much

    Update – Nov 14, 2012:

    • Removed list-style of <ul>

  • HTML5 Boilerplate & WordPress: Day 1 – HTML

    I’ve mashed up the HTML code of HTML5 Boilerplate and WordPress to come up with something useful for my projects at International Red.

    Take a look if this will suit yours.

    Inside the <head>

    [code lang=”html” highlight=”6,10,11,14-20″]
    <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title></title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/main.css">
    <link rel="shortcut icon" href="img/favicon.ico">
    <link rel="profile" href="http://gmpg.org/xfn/11">
    <script src="js/vendor/modernizr-2.6.2.min.js"></script>

    <!–Facebook Open Graph–>
    <meta property="og:title" content="">
    <meta property="og:type" content="website">
    <meta property="og:url" content="">
    <meta property="og:image" content="">
    <meta property="fb:admins" content="">
    <meta property="og:description" content="">
    </head>
    [/code]

    Significant additions include:

    • initial-scale=1.0 in <meta name=”viewport”> – fixes some background image bugs
    • favicon.ico in <link rel=”shortcut icon”> – the default in H5BP does not appear in browsers
    • <link rel=”profile”> from WordPress
    • Facebook Open Graph <meta> tags – it could be removed upon integration with WordPress

    Inside the <body>

    [code lang=”html” highlight=”6,7-75″]
    <body>
    <!–[if lt IE 7]>
    <p class="chromeframe">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">activate Google Chrome Frame</a> to improve your experience.</p>
    <![endif]–>

    <div id="page" class="home-page hfeed">
    <header id="branding" role="banner">
    <div id="header-cr">
    <div id="header-ct">
    <hgroup>
    <h1 id="site-title"><a href="#">Site title</a></h1>
    <h2 id="site-desc">Site description</h2>
    </hgroup>
    <nav id="access" role="navigation">
    <h3 class="assistive-text">Main Menu</h3>
    <div class="skip-link"><a class="assistive-text" href="#primary" title="Skip to primary content">Skip to primary content</a></div>
    <div class="skip-link"><a class="assistive-text" href="#secondary" title="Skip to secondary content">Skip to secondary content</a></div>
    <ul id="main-nav" class="nav">
    <li id="home-nav current"><a href="#">Home</a></li>
    <li id="about-nav"><a href="#">About</a></li>
    </ul>
    <ul id="secondary-nav" class="nav">
    <li id="contact-nav"><a href="#">Contact</a></li>
    <li id="fb-nav"><a href="#">Facebook</a></li>
    </ul>
    </nav>
    </div><!–content–>
    </div><!–container–>
    </header><!–#branding–>
    <div id="main" role="banner">
    <div id="main-cr">
    <div id="main-ct">
    <div id="primary">
    <div id="primary-cr">
    <div id="primary-ct">
    <div id="content" role="main">
    Main content
    </div>
    </div><!–content–>
    </div><!–container–>
    </div><!–#primary–>
    <div id="secondary">
    <div id="secondary-cr">
    <div id="secondary-ct">
    <div id="aside" role="complementary">
    Complementary content
    </div>
    </div><!–content–>
    </div><!–container–>
    </div><!–#secondary–>
    </div><!–content–>
    <div id="primary">
    <div id="primary-cr">
    <div id="primary-ct">
    <div id="content" role="main">
    </div>
    </div><!–content–>
    </div><!–container–>
    </div><!–content–>
    </div><!–#primary–>
    </div><!–container–>
    </div><!–#branding–>
    <footer id="colophon" role="contentinfo">
    <div id="header-cr">
    <div id="header-ct">
    <nav id="footer-access">
    <ul id="footer-links" class="nav">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    </ul>
    </nav>
    <div class="credits">
    <p id="copyright">&copy; 2012 Site title. All rights reserved.</p>
    <p id="intl-red">Site by <a href="http://international-red.com/" target="_blank">International Red</a></p>
    </div>
    </div><!–content–>
    </div><!–container–>
    </footer><!–#colophon–>
    </div><!–#page–>

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <script>window.jQuery || document.write(‘<script src="js/vendor/jquery-1.8.2.min.js"><\/script>’)</script>
    <script src="js/plugins.js"></script>
    <script src="js/main.js"></script>

    <!– Google Analytics: change UA-XXXXX-X to be your site’s ID. –>
    <script>
    var _gaq=[[‘_setAccount’,’UA-XXXXX-X’],[‘_trackPageview’]];
    (function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
    g.src=(‘https:’==location.protocol?’//ssl’:’//www’)+’.google-analytics.com/ga.js’;
    s.parentNode.insertBefore(g,s)}(document,’script’));
    </script>
    </body>
    [/code]

    Significant additions include:

    • Header – Content – Footer structure
    • -cr suffix is “container” – should contain the width of the block
    • -ct suffix is “content” – should contain the padding of the block

    If you would notice the structure of inner modules, it is Module – Container – Content.

    For example, a search box. You would style it this way:

    [code lang=”html”]
    <div id="search-module" class="module">
    <div class="module-cr">
    <div class="module-ct">Search content</div>
    </div>
    </div>
    [/code]

    In the stylesheet:
    [code lang=”css”]
    .module {float:left;}
    .module-cr {
    margin:0 auto;
    width:50%;
    background-color:white;
    }
    .module-ct {padding:1em;}
    [/code]

    In this way, the width of the block is not dependent on its padding and vice versa. The block becomes more modular and you should be able to plaster it anywhere in your site.