7
\$\begingroup\$

Using the Flat Web Design Tutorial offered at 1webdesigner I tried converting the resulting PSD file to HTML5 and CSS3. While attempting to use sectioning elements in the markup I quickly found myself lost in how to maintain semantic code while also adhering to the original design. As a result there are more div tags than I initially desired. How can I achieve the same result using the HTML5 sectioning elements?

If you notice any other areas that could use improvement, please don't hesitate to point them out.

Demo

HTML 

<html>

    <head>
        <meta charset="utf-8">
        <title>John Doe | Web &amp; Graphic Designer</title>
        <link href="css/normalize.css" rel="stylesheet" type="text/css" media="screen">
        <link href="css/style.css" rel="stylesheet" type="text/css" media="screen">
    </head>

    <body>

        <header role="banner">

            <div class="container">

                <a href="/" title="Return to Home">
                    <img src="img/logo.gif" id="logo" alt="Logo" height="35" width="37">
                </a>

                <nav>
                    <ul>
                        <li><a href="#" title="Home">Home</a></li>
                        <li><a href="#" title="Services">Services</a></li>
                        <li><a href="#" title="Portfolio">Portfolio</a></li>
                        <li><a href="#" title="Blog">Blog</a></li>
                        <li><a href="#" title="Hire me">Hire me</a></li>
                    </ul>
                </nav>

                <h1>Holla.</h1>

                <h2>I'm <span class="keywords">John Doe</span> a Philippines-based <span class="keywords">web</span> & <span class="keywords">graphic</span> designer who creates 
    clean and modern design for the world of web.</h2>

                <a href="#" title="View my work" id="view-work" class="btn">View my work</a>

            </div> <!-- end container -->

        </header>

        <div id="services" class="container">

            <section class="column four">
                <img src="img/browser.png" alt="Web Browser" height="48" width="48" class="services-icons">
                <div class="column-content">
                    <h3>Web Design</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.</p>
                    <a href="#" title="Learn more">Learn more</a>
                </div> <!-- end column-content -->
            </section>

            <section class="column four">
                <img src="img/mobile.png" alt="Cell Phone" height="48" width="36" class="services-icons">
                <div class="column-content">
                    <h3>Mobile Design</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.</p>
                    <a href="#" title="Learn more">Learn more</a>
                </div> <!-- end column-content -->
            </section>

            <section class="column four">
                <img src="img/camera.png" alt="Camera" height="48" width="48" class="services-icons">
                <div class="column-content">
                    <h3>Photography</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.</p>
                    <a href="#" title="Learn more">Learn more</a>
                </div> <!-- end column-content -->
            </section>

        </div> <!-- end services -->

        <div id="projects">

            <div class="container">

                <div class="column six">

                    <h3>1stwebdesigner</h3>

                    <h4>01 july 2013</h4>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

                    <dl>
                        <dt>Client</dt>
                        <dd>Dainis Graveris</dd>

                        <dt>Role</dt>
                        <dd>Designer</dd>

                        <dt>Tools</dt>
                        <dd>Photoshop</dd>
                    </dl>

                    <a href="#" title="View Project" id="view-project" class="btn btn-secondary">View Project</a>

                </div> <!-- end column -->

            </div> <!-- end container -->

            <img src="img/preview.png" id="preview" alt="Screenshot of 1stwebdesigner landing page">

        </div> <!-- end projects -->        

        <footer role="contentinfo" class="container">

            <h3>Say <span class="keywords">Hello.</span></h3>
            <p>I'd love to hear from you.</p>

            <nav>
                <ul>
                    <li><a href="#" title="Email"><img src="img/email.png" alt="Email"></a></li>
                    <li><a href="#" title="Facebook"><img src="img/facebook.png" alt="Facebook"></a></li>
                    <li><a href="#" title="Twitter"><img src="img/twitter.png" alt="Twitter"></a></li>
                    <li><a href="#" title="Instagram"><img src="img/instagram.png" alt="Instagram"></a></li>
                    <li><a href="#" title="Dribbble"><img src="img/dribbble.png" alt="Dribbble"></a></li>
                </ul>
            </nav>

            <p id="copyright">&copy; 2013 <span class="keywords">John Doe</span>. All rights reserved.</p>

        </footer>

    </body>
</html>

CSS

/*

    style.css

    Colours
    =======

    Red:            #f84242;
    Darker Black:   #111111;
    Black:          #25252a;
    Dark Grey:      #666666;
    Grey:           #9d9d9d;
    Light Grey:     #e5e5e5;
    White:          #ffffff;

*/

/*  ------------------------
    General Styles
    ------------------------  */

html {
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizelegibility;
}

body {
    font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 15px;
    line-height: 1.65;
    color: #666666;
}

/*  ------------------------
    Typography
    ------------------------  */

h1, h2, h3, h4 {
    margin: 0;
    font-weight: 300;
    line-height: 1.65;
}

h1, h2 {
    color: #fff;
}

h4, dt {
    font-weight: 400;
    color: #9d9d9d;
}

h1, footer h3 {
    font-size: 72px;
}

h2 {
    font-size: 22px;
}

h3 {
    font-size: 24px;
    color: #111;
}

h4 {
    font-size: 13px;
}

p {
    margin: 0;
    font-weight: 300;
    color: #666666;
}

a {
    color: #f84242;
    text-decoration: none;
}

dt {
    font-size: 11px;
    text-transform: uppercase;
}

.keywords {
    font-weight: bold;
}

#services h3 {
    line-height: 2.0833;
}

#projects h3 {
    margin-top: -6px;
    font-size: 36px;
    line-height: 1.3;
}

footer h3 .keywords {
    font-weight: 300;
    color: #f84242;
}

#copyright .keywords {
    color: #111;
}

/*  ------------------------
    Layout
    ------------------------  */

.container {
    margin: 0 auto;
    padding: 120px 10px;
    width: 940px;
    overflow: auto;
}

header .container {
    padding: 60px 10px 120px;
}

footer.container {
    clear: right;
    padding: 120px 10px 60px;
}

header {
    background-image: url('../img/header-bg.jpg');
    background-size: cover;
    background-position: left bottom;
    background-color: #f84242;
}

#logo {
    float: left;
}

header h1 {
    clear: both;
    margin-top: 120px;
}

#view-work {
    margin-top: 120px;
}

.column:last-child {
    margin-right: 0;
}

.services-icons {
    float: left;
    margin: 0 6px;
}

#services img[width="36"] {
    margin: 0 12px;
}

#services p {
    margin: 10px 0 24px;
}

#projects {
    background-color: #e5e5e5;
}

#projects p {
    margin-top: 25px;
}

dd {
    margin: 0 0 20px;
    font-weight: 300;
}

#view-project {
    margin-top: 28px;
}

#preview {
    float: right;
    margin-top: -580px;
}

/*  ------------------------
    Navigation
    ------------------------  */

header nav {
    float: right;
    margin: 0;
}

nav ul {
    margin: 0;
    padding: 0;
}

nav ul li {
    display: inline-block;
}

header nav ul li a {
    margin-right: 40px;
    font-size: 16px;
    font-weight: bold;
    text-decoration: none;
    color: #fff;
    opacity: 0.6;

    /* vertical align text */
    height: 38px;
    line-height: 38px;
    vertical-align: middle;
}

header nav ul li:last-child a {
    margin-right: 0;
}

header nav ul li a:hover {
    border-bottom: 2px solid #fff;
    opacity: 1;
}

footer nav {
    float: none;
    margin: 120px 0;
}

footer nav ul li {
    vertical-align: top;
    width: 128px;
    height: 128px;
    background-color: #e5e5e5;
    text-align: center;
}

footer nav ul li a {
    display: block;
    margin: 40px auto;
    width: 48px;
    height: 48px;
}

/*  ------------------------
    Buttons
    ------------------------  */

.btn {
    display: inline-block;
    border-radius: 10px;
    padding: 10px 20px;
    background-color: #25252a;
    font-size: 16px;
    font-weight: bold;
    color: #fff;
    text-decoration: none;
    cursor: pointer;
}

.btn-secondary {
    border-radius: 2px;
    background-color: #f84242;
}

/*  ------------------------
    Global Styles
    ------------------------  */

.column {
    float: left;
    margin-right: 20px;
}

.column-content {
    margin-left: 80px;
}

.four {
    width: 300px;
}

.six {
    width: 460px;
}
\$\endgroup\$
3
  • \$\begingroup\$ Well the reason why there is so much use of elements is because they use the a grid layout. This way much of the element positions are defined with padding and margin. To exclude those paddings and margins they place a new element in it that is defined by the padding and margin of the parent. How you can extend this? Base is probably the container class and the colum class. Could you give any specific place where you think there are too much elements used? \$\endgroup\$
    – nkmol
    Commented Dec 13, 2013 at 8:14
  • \$\begingroup\$ I feel that I resorted to using the <div> element several times throughout my markup because I really wasn't sure how or where to use HTML5 elements like <main>, <article>, <section> or <aside> in a grid layout. There are several <div> elements in the markup which exist purely for visual reasons. Is this considered bad practice? \$\endgroup\$
    – X '
    Commented Dec 13, 2013 at 10:16
  • \$\begingroup\$ @Yaoki check out WhatWG's summary of HTML5 in developers.whatwg.org - use the search in the top right to open the description for the element you want to check. Very useful! :) \$\endgroup\$
    – ANeves
    Commented Dec 13, 2013 at 13:09

2 Answers 2

Reset to default
1
\$\begingroup\$

Quick note: to answer one of your comments, using div's exactly how you have is actually the purpose of div's. Since they have no semantic value you can use them solely for stylistic purposes as you have. In some cases you didn't have too, but you didn't do it incorrectly.

HTML5 has really bolstered the semantic meaning behind elements. I would really look into articles that go into detail about why the tags should be used and where. Here are a few articles to look into:

html5 doctor is a great resource for continually updated information on html5 (or any html) elements. http://html5doctor.com/lets-talk-about-semantics/ just use their search on any html element and you'll get a great overview of its use.

more reading on semantics: http://coding.smashingmagazine.com/2011/11/18/html5-semantics/ & http://alistapart.com/article/semanticsinhtml5 & http://diveintohtml5.info/semantics.html are always an amazing resource for information on all things web.

http://css-tricks.com/ is one of my favorite places to bookmark information.

As mentioned in the other answer, You can really minimize the amount of <div>'s you use if you avoid col- based setups, but if you want to go that route, instead of building your own I suggest looking into Zurb's Foundation (http://foundation.zurb.com/) and Twitter's Bootstrap (http://getbootstrap.com/) frameworks. They're great starting points and have awesome documentation that will get you rolling very quickly.

Keep in mind <div>'s have no semantic meaning to a browser, when you use <section>, <article>, <main>, <footer>, <header>, <nav> and <aside> they serve a purpose to the browser, and create an overall outline of the website, whereas it use to only be headings <h1> - <h6> that outlined a site. http://gsnedders.html5.org/outliner/ is a good resource to see if you're using headings and sectioning in a semantic meaningful way. These HTML5 tags all require a heading or they'll read as untitled, whereas <div> elements don't require headings.

which bleeds into another semantic hiccup you have very poor use of headings throughout, this is a pet peeve of mine. http://html5doctor.com/the-time-element/, http://html5doctor.com/howto-subheadings/, http://html5doctor.com/outlines/, & http://coding.smashingmagazine.com/2013/01/18/the-importance-of-sections/

Where your heading belongs you have an image, and your <h1> is used on "Hello"? I'd go with something of this nature:

HTML

<h1 role="heading" class="logo">Site Title</h1>
...
<strong>Holla.</strong>

CSS (http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/)

.logo{
       background: url(img/logo.png) no-repeat 50% 50%;
       background-size:35px 37px;
       text-indent: 100%;
       white-space: nowrap;
       overflow: hidden
     }

Also, this is bad practice, headings for time?

e.g. <h4>01 july 2013</h4> should be <time datetime="2013-07-01">01 July 2013</time>

and doing this...

<h2>I'm <span class="keywords">John Doe</span> a Philippines-based <span class="keywords">web</span> & <span class="keywords">graphic</span> designer who creates 
clean and modern design for the world of web.</h2>

...is something I'd avoid doing as well. As this isn't a title, it's a phrased description, I'd make it a <div> or <p> and put a link with <a href="#" rel="author"> for the name.

Your use of the <nav> tag for social links in the <footer> is something that I'd debate, W3C's Spec

The nav element represents a section of a page that links to other pages or to parts within the page: a section with navigation links.

In cases where the content of a nav element represents a list of items, use list markup to aid understanding and navigation.

Not all groups of links on a page need to be in a nav element — the element is primarily intended for sections that consist of major navigation blocks. In particular, it is common for footers to have a short list of links to various pages of a site, such as the terms of service, the home page, and a copyright page. The footer element alone is sufficient for such cases; while a nav element can be used in such cases, it is usually unnecessary.

Where it could be the main source of navigation, in this case I don't believe it is. http://html5doctor.com/nav-element/

Your images have alt="" attributes which is great, but you can add even more semantic value to these if you use <figure> and <figcation> elements where necessary. http://html5doctor.com/the-figure-figcaption-elements/

Your page could be much more simple and semantic, especially for something of this size. On a smaller site like this you could literally use all pseudo elements and have zero classes on any element. However, that is very difficult to maintain on a larger scale, so I'd suggest looking into SMACSS (www.smacss.com) which will really help you build a better knowledge of how to setup your css structure. I have too many grips on your css to mention here so just read into SMACSS and other style resources and it will help immensely. I will say that normalize.css is amazing; However, you should really work it into your code instead of just plugging it in separately (http://nicolasgallagher.com/about-normalize-css/)

Approach 1: use normalize.css as a starting point for your own project’s base CSS, customising the values to match the design’s requirements.

Approach 2: include normalize.css untouched and build upon it, overriding the defaults later in your CSS if necessary.

Final Notes You have great use of <p>'s and the use of <dl>, <dt>, and <dd> is good along with a decent overall structure, but I'd replace your .container with <main>, make better use of headings and the new HTML5 elements, understand what html5 elements actual purposes are, and you'll be well on your way.

Also, look into WAI-ARIA http://www.webteacher.ws/2010/12/29/how-to-make-html5-semantic-elements-more-accessible/ and other means of accessibility. The use of role="" and aria-labelledby="" etc. can really boost semantic levels and has no effect on browsers that lack support. You have it a little, but you could add <nav role="navigation">, <h1 role="heading">, <ul role="list">, <li role="listitem">, <a role="link"> <main role="main"> among other things.

\$\endgroup\$
3
\$\begingroup\$

I find the CSS too low level for a good design.

Do you really want to declare the same style for all 'h2' tags? Then you may not like it for some of them and will redeclare. Then redeclare again. Then the mess will grow over you. :)

I rather prefer semantic approach. Give your declarations to meaningful classes. Don't use tag declarations unless they mean anything to you.

Just my view.

EDIT. Using tag declarations carry further problems. What if you decide to change 'h3' to 'h4'? Or to something else? Do you want to copy over all your declarations each time?

\$\endgroup\$
2
  • \$\begingroup\$ Thanks, this is just what I needed! I think I understand what you mean by avoid assigning specific styles to generic selectors. So, when would you style an element selector? Also, would you say it's better to use class selectors over element or id selectors? My main worry about using class selectors is how to remain semantic when building a grid (i.e., ".col-12" vs ".copyright"). I'm not sure what the best practice is as it seems unavoidable to use unsemantic class names. \$\endgroup\$
    – X '
    Commented Dec 13, 2013 at 10:03
  • \$\begingroup\$ @Yaoki Every selector is element selector :) Any DOM node is called element. Id selectors have their use for unique elements that you don't want to repeat by mistake. "col-12" class is still semantic but serves different purpose - declaring exactly those. So specific declarations only for 'col-12' will go in that class but for anything else I would add other classes. \$\endgroup\$
    – Dmitri Zaitsev
    Commented Dec 13, 2013 at 10:32

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.