Typographic work planner

No one likes being told what to do, especially if it’s work related, but nevertheless jobs need done. Why present boring stuff in a boring way? If you’re going to be told what to do, at least soften the blow by being told nicely. Enter this, a little HTML/CSS typographic work planner. By using some super-semantic HTML and a dash of CSS you can craft a beautiful looking yet incredibly simple work planner for you and your staff.

Screenshot of the typographic work planner

Typographic work planner markup:

The rich, semantic markup is as follows. Notice the use of the more semantic elements and attributes such as summary="", colgroup, scope="", caption and more…

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" />

  <title>Typographic work planner</title>

  <link rel="stylesheet" type="text/css" href="/2009/12/typographic_work_planner/css/style.css" />
</head>
<body id="home">
  <div id="wrapper">
    <table summary="An overview of upcoming and recently completed work ?
    by employees">
      <caption>Work schedule</caption>
      <colgroup>
        <col id="date" />
        <col id="user" />
        <col id="dec" />
      </colgroup>
      <thead>
        <tr>
          <th scope="col">Date</th>
          <th scope="col">User</th>
          <th scope="col">Description</th>
        </tr>
      </thead>
      <tfoot>
        <tr>
          <td colspan="3">Sense Internet Ltd work planner</td>
        </tr>
      </tfoot>
      <tbody>
        <tr>
          <td class="date">20 December, 2009</td>
          <td class="user">Harry Roberts</td>
          <td class="desc">Lorem ipsum dolor sit amet, elit. Nunc ?
          rhoncus dui et mauris. Nam augue felis, dapibus ut, condimentum ?
          in, ornare a, est. Proin sem risus, pretium ut, mattis nec.</td>
        </tr>
        <tr>
          <td class="date">20 December, 2009</td>
          <td class="user">Joe Whitley</td>
          <td class="desc">Suspendisse venenatis. Donec eleifend ?
          dignissim diam. Integer faucibus neque tempor pede. Maecenas at ?
          magna sed lectus adipiscing molestie. Pellentesque habitant morbi ?
          tristique senectus et netuset malesuada fames ac turpis egestas. ?
          Curabitur sodales gravida tellus.</td>
        </tr>
        <tr>
          <td class="date">21 December, 2009</td>
          <td class="user">Harry Roberts</td>
          <td class="desc">Lorem ipsum dolor sit amet, elit. Nunc ?
          rhoncus dui et mauris. Nam augue felis, dapibus ut, condimentum ?
          in, ornare a, est. Proin sem risus, pretium ut, mattis nec.</td>
        </tr>
        <tr>
          <td class="date">21 December, 2009</td>
          <td class="user">Joe Whitley</td>
          <td class="desc">Suspendisse venenatis. Donec eleifend ?
          dignissim diam. Integer faucibus neque tempor pede. Maecenas at ?
          magna sed lectus adipiscing molestie. Pellentesque habitant morbi ?
          tristique senectus et netuset malesuada fames ac turpis egestas. ?
          Curabitur sodales gravida tellus.</td>
        </tr>
        <tr>
          <td class="date">21 December, 2009</td>
          <td class="user">Sam Penrose</td>
          <td class="desc">Lorem ipsum dolor sit amet, elit. Nunc ?
          rhoncus dui et mauris. Nam augue felis, dapibus ut, condimentum ?
          in, ornare a, est. Proin sem risus, pretium ut, mattis nec.</td>
        </tr>
        <tr class="today">
          <td class="date">22 December, 2009</td>
          <td class="user">Joe Whitley</td>
          <td class="desc">Suspendisse venenatis. Donec eleifend ?
          dignissim diam. Integer faucibus neque tempor pede. Maecenas at ?
          magna sed lectus adipiscing molestie. Pellentesque habitant morbi ?
          tristique senectus et netuset malesuada fames ac turpis egestas. ?
          Curabitur sodales gravida tellus.</td>
        </tr>
        <tr class="today">
          <td class="date">22 December, 2009</td>
          <td class="user">Sam Penrose</td>
          <td class="desc">Lorem ipsum dolor sit amet, elit. Nunc ?
          rhoncus dui et mauris. Nam augue felis, dapibus ut, condimentum ?
          in, ornare a, est. Proin sem risus, pretium ut, mattis nec.</td>
        </tr>
        <tr class="today">
          <td class="date">22 December, 2009</td>
          <td class="user">Joe Whitley</td>
          <td class="desc">Suspendisse venenatis. Donec eleifend ?
          dignissim diam. Integer faucibus neque tempor pede. Maecenas at ?
          magna sed lectus adipiscing molestie. Pellentesque habitant morbi ?
          tristique senectus et netuset malesuada fames ac turpis egestas. ?
          Curabitur sodales gravida tellus.</td>
        </tr>
      </tbody>
    </table>
  </div>
  </body>
</html>

In detail…

There are a few things in the table you may not have seen before, briefly, they are:

Typographic work planner CSS:

The CSS used to create the work planner is pretty basic, with a dash or progressive enhancement added via some CSS3. View the full CSS file with reset etc.

table{
  margin-bottom:20px;
}
td,th{
  border-bottom:1px solid #ccc;
}
tbody tr{
  background:#fff;
}
tbody tr:nth-of-type(even){
  background:#ffc;
}
th,tfoot,caption{
  font-family:Helvetica, Arial, Verdana, sans-serif;
  font-size:1.6em;
  font-weight:bold;
}
th,td{
  padding:10px 0;
}
caption{
  font-size:2.4em;
  position:absolute;
  left:-9999px;
}
.date{
  width:160px;
  padding:10px 15px 10px 5px;
  font-family:Georgia, "Times New Roman", Times;
  font-size:1.6em;
  font-style:italic;
}
.user{
  width:460px;
  padding-right:20px;
  font-family:Helvetica, Arial, Verdana, sans-serif;
  font-size:4.8em;
  font-weight:bold;
}
.desc{
  width:280px;
  font-size:1.2em;
}
tbody tr.today{
  background:#ff8;

  text-shadow:1px 1px 1px rgba(0,0,0,0.3);
}
tfoot{
  color:#666;
}
tfoot td{
  padding:10px 5px;
}

Typographic work planner demo

By Harry Roberts on Tuesday, December 22nd, 2009 in Web Development. Tags: , , , , , | 27 Comments »

+

27 Responses to ‘Typographic work planner’


  1. Dillon S said on 11 January, 2010 at 2:21 am

    Looks neat!

    I do not mean to trash the article in any way, but are the tables necessary?
    You can do the same thing with virtually the same amount of code and the same effect without using tables.


  2. uberVU - social comments said on 11 January, 2010 at 2:21 am

    Social comments and analytics for this post…

    This post was mentioned on Twitter by smashingmag: Typographic Work Planner With CSS – http://bit.ly/5rbhpo #css…


  3. TwittLink - Your headlines on Twitter said on 11 January, 2010 at 4:18 am

    [...] Tweets about this great post on TwittLink.com [...]


  4. links for 2010-01-10 « Stand on the shoulders of giants said on 11 January, 2010 at 7:04 am

    [...] Typographic work planner — CSS Wizardry — CSS, Web Standards, Typography, Grids (tags: css typography) [...]


  5. Harry Roberts said on 11 January, 2010 at 8:12 am

    @Dillon S:
    First off, glad you like the look.
    With regards the tables, this is essentially a table – it is a cross reference between a name, a date and a description. Semantically, the page makes sense without stylesheets and therefore via a screenreader. Any other solutions (let’s say for example a ul) would rely solely on CSS for it to make sense.

    With regards this:

    “You can do the same thing with virtually the same amount of code and the same effect without using tables.”

    A little ‘mantra’ I like to use when developing is use as little code as possible but as much code as necessary.

    For a similar discussion I got involved in: http://www.wisdump.com/css/css-aid-tables-without-tables-misses-the-point-dark-side-web-standards/

    Thanks for the response,
    Harry


  6. Typographic work planner — CSS Wizardry — CSS, Web Standards, Typography, Grids » Web Design said on 11 January, 2010 at 9:42 am

    [...] Typographic work planner — CSS Wizardry — CSS, Web Standards, Typography, Grids [...]


  7. 45 Powerful CSS/JavaScript-Techniques - Smashing Magazine said on 12 January, 2010 at 6:38 pm

    [...] web designs, while taking into consideration semantics and avoiding the repetition of any markup.Typographic work plannerEnter this, a little HTML/CSS typographic work planner. By using some super-semantic HTML and a dash [...]


  8. Matt said on 12 January, 2010 at 10:20 pm

    @Dillon S

    Tables were not created to be ignored. Tables are designed for tabular data. This is tabular data. The way tables read, it makes it difficult for screen readers to read data in order in the way they are arranged, but when the data is tabular, the screen reader is reading the information in the correct way.

    Using tables for tabular data is not a sin.


  9. 45 Powerful CSS/JavaScript-Techniques | Programming Blog said on 13 January, 2010 at 2:24 am

    [...] Typographic work plannerEnter this, a little HTML/CSS typographic work planner. By using some super-semantic HTML and a dash of CSS you can craft a beautiful looking yet incredibly simple work planner for you and your staff. [...]


  10. 45 Powerful CSS/JavaScript-Techniques | WORDPRESS-TEMPLATES-PLUGINS-RSS said on 13 January, 2010 at 6:03 am

    [...] Typographic work plannerEnter this, a little HTML/CSS typographic work planner. By using some super-semantic HTML and a dash of CSS you can craft a beautiful looking yet incredibly simple work planner for you and your staff. [...]


  11. 45 Powerful CSS/JavaScript-Techniques - Webreweries.com said on 13 January, 2010 at 7:44 am

    [...] Typographic work plannerEnter this, a little HTML/CSS typographic work planner. By using some super-semantic HTML and a dash of CSS you can craft a beautiful looking yet incredibly simple work planner for you and your staff. [...]


  12. Richard Gray said on 13 January, 2010 at 8:41 am

    Where would you see the potential if this in use? Certain I am sure the code is fit to purpose, but it that purpose as clearly defined as it could be?

    For example, if you thinking a web based work planner for freelancers, this could indeed work effectively, specially if it can be intergrated into existing frameworks such as an ‘intranet’ ( I use the term loosely – since these people would be remote logins rather than on a network)


  13. Harry Roberts said on 13 January, 2010 at 9:12 am

    This is merely a front-end solution that could be taken and made into a content managed work planner quite simply.
    This solution as it stands isn’t a very complete one in terms of the work planner as a whole, but it just needs a database hooking up and you’re away.

    It’d work as a standalone build (planner.agencyname.com), or as an add-on to an intranet (internal.agencyname.com/planner/) quite easily. All I have provided is a nice, clean way of presenting it, and a sensible way of coding up the front-end.


  14. AMB Album » 45 Powerful CSS/JavaScript-Techniques said on 13 January, 2010 at 10:22 am

    [...] Typographic work plannerEnter this, a little HTML/CSS typographic work planner. By using some super-semantic HTML and a dash of CSS you can craft a beautiful looking yet incredibly simple work planner for you and your staff. [...]


  15. 45 Powerful CSS/JavaScript-Techniques « Social-Press said on 13 January, 2010 at 1:38 pm

    [...] Typographic work planner Enter this, a little HTML/CSS typographic work planner. By using some super-semantic HTML and a dash of CSS you can craft a beautiful looking yet incredibly simple work planner for you and your staff. [...]


  16. Barker Design | Graphic & Web Development » Blog Archive » 45 Powerful CSS/JavaScript-Techniques said on 13 January, 2010 at 2:44 pm

    [...] Typographic work plannerEnter this, a little HTML/CSS typographic work planner. By using some super-semantic HTML and a dash of CSS you can craft a beautiful looking yet incredibly simple work planner for you and your staff. [...]


  17. Dillon S said on 14 January, 2010 at 2:35 am

    Hey Harry!

    Thanks for the clean answer. I was just unsure of the purpose of the design using tables, so I am glad you cleared it up for me.

    I also enjoyed that article you linked too & look forward to reading more from you.

    Cheers,

    Dillon


  18. 45 Powerful CSS/JavaScript-Techniques | TipTe.com said on 14 January, 2010 at 5:23 am

    [...] Typographic work plannerEnter this, a little HTML/CSS typographic work planner. By using some super-semantic HTML and a dash of CSS you can craft a beautiful looking yet incredibly simple work planner for you and your staff. [...]


  19. 45 Powerful CSS/JavaScript-Techniques | Tutorial51 said on 14 January, 2010 at 5:48 am

    [...] Typographic work plannerEnter this, a little HTML/CSS typographic work planner. By using some super-semantic HTML and a dash of CSS you can craft a beautiful looking yet incredibly simple work planner for you and your staff. [...]


  20. 45 Powerful CSS/JavaScript Techniques « Extreme Design Studio Blog v4.0 said on 20 January, 2010 at 7:25 pm

    [...] Typographic work planner Enter this, a little HTML/CSS typographic work planner. By using some super-semantic HTML and a dash of CSS you can craft a beautiful looking yet incredibly simple work planner for you and your staff. [...]


  21. 45 Powerful CSS/JavaScript-Techniques | el chaneke said on 21 January, 2010 at 4:47 am

    [...] Typographic work plannerEnter this, a little HTML/CSS typographic work planner. By using some super-semantic HTML and a dash of CSS you can craft a beautiful looking yet incredibly simple work planner for you and your staff. [...]


  22. 45 Powerful CSS/JavaScript-Techniques » Shai Perednik.com said on 21 January, 2010 at 7:24 am

    [...] Typographic work plannerEnter this, a little HTML/CSS typographic work planner. By using some super-semantic HTML and a dash of CSS you can craft a beautiful looking yet incredibly simple work planner for you and your staff. [...]


  23. 45 Powerful CSS/JavaScript-Techniques | moreInet.com | Webdesign, Graphic Design Service in Pattaya said on 21 January, 2010 at 7:44 am

    [...] Typographic work plannerEnter this, a little HTML/CSS typographic work planner. By using some super-semantic HTML and a dash of CSS you can craft a beautiful looking yet incredibly simple work planner for you and your staff. [...]


  24. Pol Moneys said on 28 January, 2010 at 12:01 pm

    beautiful, I’ll be using it. thank you for sharing so that single/indie developers as me can “look” better.


  25. 45 Powerful CSS/JavaScript-Techniques | Vectordump said on 29 January, 2010 at 6:33 am

    [...] Typographic work planner Enter this, a little HTML/CSS typographic work planner. By using some super-semantic HTML and a dash of CSS you can craft a beautiful looking yet incredibly simple work planner for you and your staff. [...]


  26. Showcasing The Best Websites About Thailand said on 14 March, 2010 at 7:42 am

    You know, I have to tell you, I genuinely relish this blog and the useful insight. I find it to be energizing and quite enlightening. I wish there were more blogs like it. Anyway, I felt it was about time I posted a comment on Typographic work planner — CSS Wizardry—CSS, Web Standards, Typography, and Grids by Harry Roberts – I just wanted to say that you did a awesome job on this. Cheers dude!


Leave a Reply

Respond to Typographic work planner

Hi there, I am Harry Roberts. I am a 21 year old web developer from the UK. I Tweet and write about web standards, typography, best practices and everything in between. You should browse and search my archives and follow me on Twitter, 7,791 people do.

via Ad Packs