4
\$\begingroup\$

This was our old site that I am redesigning.

old

Someone else hardcoded with inline CSS and javascript in tables.

I wanted to make it dynamic, so I added Mustache and made this template:

{{#labs}}
  <div class="lab">
    <h4>{{{lab}}}</h4>
    <p>
      {{#stadt}}
        <span><i class="fa fa-building-o"></i></span><span>{{{stadt}}}</span>
        <br />
      {{/stadt}}

      {{#telefon}}
        <span><i class="fa fa-phone"></i></span><span>{{{telefon}}}</span>
        <br />
      {{/telefon}}

      {{#webseite}}
        <span><i class="fa fa-desktop"></i></span>
        <span>
          <a href="http://{{{webseite}}}" target="_blank">{{{webseite}}}</a>
        </span>
      {{/webseite}}
    </p>
  </div>
{{/labs}}

Here is some of the JSON file:

{ "labs" : [
{ 
    "lab":"Ri&szlig;mann Zahntechnik GmbH",
    "stadt":"D-06917 Jessen",
    "telefon":"+49 (0) 3537 21 38 61",
    "webseite":"www.rissmann-zahntechnik.de"
  },

Would it make a big enough difference to not have the full word as the name? So maybe like "l" instead of "lab" and "w" instead of "webseite", etc.

Here is the result of the listings:

current

The even spacing between the icon and the values was achieved by this CSS rule:

.lab i { width: 27px; }

Also, does it make sense to have it in a single <p> tag, or should I consider placing each value in its own <div>?

\$\endgroup\$
  • 2
    \$\begingroup\$ We're talking about a total savings of 66 + (19*labs) characters at the expense of intuitive reading. I would argue that it's not worth it as it will have virtually no (maybe saving 100 bytes if you're not gzipping your content...) impact on your user or your server \$\endgroup\$ – megawac Jan 17 '14 at 0:48
3
\$\begingroup\$

By using excessive markup for presentational purposes, the template is the exact opposite of clean.

<span><i class="fa fa-phone"></i></span><span>{{{telefon}}}</span><br />

vs.

<span class="fa fa-phone">{{{telefon}}}</span>
<!-- span set to `display: block` with a `:before` pseudo element to contain the icon -->

If you're not able to do this because of a library you're depending on, my recommendation is to find a better library.

By moving away from tables, you've committed a sin that's just as bad as using tables for layout: you're using non-tabular markup for tabular data. It is understandable that you don't want it to look like a table (either for aesthetic or responsive reasons), but tables don't have to look like tables any more than a list has to look like a list.

Go back to using tables and make adjustments to your CSS instead:

http://jsfiddle.net/SGK8Q/

What the markup should end up looking similar to this:

<table>
    <thead>
        <tr>
            <th>Lab</th>
            <th>Contact</th>
            <th>Phone</th>
            <th>Website</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td class="name">ABC</td>
            <td class="contact">Johnny</td>
            <td class="phone">555-1234</td>
            <td class="url">http://abc.example.com/</td>
        </tr>

        <tr>
            <td class="name">DEF</td>
            <td class="contact">Billy</td>
            <td class="phone">555-1234</td>
            <td class="url">http://def.example.com/</td>
        </tr>

        <tr>
            <td class="name">GHI</td>
            <td class="contact">Dave</td>
            <td class="phone">555-1234</td>
            <td class="url">http://abc.example.com/</td>
        </tr>
    </tbody>
</table>

The CSS:

table, tbody, tr, td, th {
    display: block;
}

thead {
    display: none;
}

/* everything past here is optional */
tr + tr {
    margin-top: 1em;
}

.name {
    font-size: 1.2em;
    font-weight: bold;
}

.url {
    color: blue;
    text-decoration: underline;
}
\$\endgroup\$
  • \$\begingroup\$ The <span class="fa fa-phone">{{{telefon}}}</span> would not work because the class="fa fa-phone" is for font awesome icons. By "will not work" I mean that yes, the icon will display next to the phone number, but it then interferes with inherited styles for the text and loses the desired spacing between the icon. And thanks for pointing out how tables would be more appropriate. \$\endgroup\$ – JGallardo Jan 17 '14 at 18:24
1
\$\begingroup\$

As megawac said, do not give up readability for a few bytes.

Your template looks heavy because you deal with missing data thru {{#xx}} and because those icons take up space. I am not a big fan of logic in templates, but in this particular case you made the right call.

I think one paragraph tag is better than many, so I would keep it that way.

Still, I wonder if you can replace <span><i class="fa fa-building-o"></i></span> with <i class="fa fa-building-o"></i>, I can't tell why you need the extra enclosing span.

Finally, I think you should indent your stadt and telelephon blocks over a few lines like you did for#webseite, it becomes more readable for me.

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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