CSS Wizardry » Design http://csswizardry.com Just another WordPress weblog Sun, 05 Sep 2010 18:05:35 +0000 http://wordpress.org/?v=2.8.6 en hourly 1 Thoughts on Dribbble http://csswizardry.com/2010/05/thoughts-on-dribbble/ http://csswizardry.com/2010/05/thoughts-on-dribbble/#comments Tue, 11 May 2010 10:56:59 +0000 Harry Roberts http://csswizardry.com/?p=1295 For a while I was really gutted I didn’t have a Dribbble invite, I posted a tweet requesting one, and Drew McLellan gave me one. From the off I was kind of disappointed with it. It’s just Twitter with screenshots. Anyway, I wrote these thoughts down the other day elsewhere, and I thought I’d do a mini-post to share them more publicly. They are totally unrehearsed, unedited and completely off the cuff:

“I think it’s just another place where the more famous designers just pat each other on the back, regardless of what they actually produce.
It’s too elitist and the more known designers only follow each other, leaving less known people following them but their own work barely been seen. This in turn fuels the cycle—the famous get more so, while the more humble designers go unnoticed. I am seriously unimpressed with Dribbble”

So, if you’re really really wanting a Dribbble invite, don’t worry; you’re not missing much.

]]> http://csswizardry.com/2010/05/thoughts-on-dribbble/feed/ 11 Suzanna Haworth Photography redesign http://csswizardry.com/2010/02/suzanna-haworth-redesign/ http://csswizardry.com/2010/02/suzanna-haworth-redesign/#comments Sun, 28 Feb 2010 17:40:52 +0000 Harry Roberts http://csswizardry.com/?p=834 Having only put the first version of Suze’s site live a few months ago, we both decided it needed a whole new approach. Originally a static site, built with my own PHP framework, it relied on manual updates from me, which meant that for the sake of efficiency updates had to happen once there was enough content to upload; ergo not very often. After porting CSS Wizardry over to Wordpress and being very impressed, I decided that was the best approach for Suze too. This meant she could update her own site as often as she wanted.

A screenshot of Suzanna's new site

Also, follow Suze on Twitter.

As the site was built very quickly, we are adapting it as it grows and fixing any bugs as they happen. Let me know if you find anything astray. Anyway, enough talking, go look for yourselves!

]]> http://csswizardry.com/2010/02/suzanna-haworth-redesign/feed/ 2 Type tips—quick tips on all things web typography http://csswizardry.com/2010/02/type-tipsquick-tips-on-all-things-web-typography/ http://csswizardry.com/2010/02/type-tipsquick-tips-on-all-things-web-typography/#comments Wed, 24 Feb 2010 09:42:13 +0000 Harry Roberts http://csswizardry.com/?p=805 Yesterday I released Type Tips, a collection of short and simple tips to take your web typography to the next level. The project has been some time in the making, with me first mentioning it back in early January. For one reason or another I only got started on the project last night, but I ploughed through and released a first version within a few hours.

A screenshot of type tips

I hope Type Tips comes in useful for you, and that the information in there is of some notable value. If you do like it, please share it by tweeting the link, I’d appreciate it. Any other thoughts? Just drop me a comment…

]]> http://csswizardry.com/2010/02/type-tipsquick-tips-on-all-things-web-typography/feed/ 3 Typographic phrases (or: how to turn sayings geeky) http://csswizardry.com/2010/02/typographic-phrases-or-how-to-turn-sayings-geeky/ http://csswizardry.com/2010/02/typographic-phrases-or-how-to-turn-sayings-geeky/#comments Fri, 19 Feb 2010 09:46:28 +0000 Harry Roberts http://csswizardry.com/?p=780 A while ago I had the idea to express some old sayings in a silly, geeky way, using code and logic to express logically, the meaning behind some well known phrases. I got Illustrator fired up last night and decided to finally got a few made. They’re kind of obvious really, even a non-developer brain can make sense of them, and deciphering the saying is pretty simple, but I think they’re cool nonetheless.

Many hands make light work

Many hands make light work

There are lots of contradictions in sayings and phrases. Like this one, if many hands do make light work, then how does this next one work?

Too many cooks spoil the broth

Too many cooks spoil the broth

A stitch in time…

A stitch in time saves nine

While the cat is away…

While the cat is away the mice will play

Absence makes the heart grow fonder vs. time is a great healer

Absence makes the heart grow fonder vs. time is a great healer

This one is another glaring contradiction, so I decided to combine the two into one poster.

Out of sight, out of mind

Out of sight, out of mind

Two wrongs don’t make a right

This one doesn’t really follow the code paradigm, but I thought I’d include it anyway.

Two wrongs don't make a right

Got any more that would work in this way? Leave any suggestions in the comments.

Also, I do realise that, programmatically, not all of these posters make perfect sense. For example, $cooks > 'enough' doesn’t really work in a programming sense… It’s just a bit of fun!

]]> http://csswizardry.com/2010/02/typographic-phrases-or-how-to-turn-sayings-geeky/feed/ 9 Moo business cards—most impressive http://csswizardry.com/2010/01/moo-business-cardsmost-impressive/ http://csswizardry.com/2010/01/moo-business-cardsmost-impressive/#comments Sat, 09 Jan 2010 16:36:42 +0000 Harry Roberts http://csswizardry.com/?p=81 After so long with no type of business cards to speak of, I decided to design myself some new ones. I wanted to use the pink I use on the site (#f43059) but I also wanted to shy away from using the obvious choice of Helvetica (although it is a beautiful typeface). Instead I opted for Din, which I think works amazingly well in context. I also decided to use Moo for the printing, and I am extremely glad I did…

CSS Wizardry business cards

Naturally I designed the cards in Illustrator but my initial thoughts were to flatten these vector files and send them off to a print company to be done by them. However, after remembering Moo, I decided to give them a shot and get a limited run of just fifty cards made—this was because I wasn’t sure on just how good the quality might be…

Photograph of the front and back of my business cards

The main reason for my concerns about quality was the fact that I was to print the cards from a .jpg image, rather than a lossless vector format. However, when they arrived I was amazed to find they were perfectly legible, totally flawless and perfectly finished. Nothing was even slightly questionable about the cards or their quality, I was pretty impressed!

Photograph of the case in which my Moo business cards arrived

As well as the quality of the cards themselves I was delighted to find they were presented in a gorgeous heavy card case along with some sorting tags for ‘Mine’ and ‘Theirs’ business cards. A beautiful way to present some top quality cards.

Moo MiniCards

As well as getting myself some business cards from Moo I decided to surprise Suze with some MiniCards with a few photos from her Flickr stream. The cards were, again, top quality, presented in a lovely shallow box. She was really pleased with them! Although she is wondering what exactly to do with them, so please post any suggestions!

Suzanna Haworth’s MiniCards

A firm recommendation…

After the speed with which the cards were printed and delivered, their outstanding quality, the beautiful presentation and the sheer pleasure of using Moo (not to mention the extremely attractive prices) I will, without a shadow of a doubt, be using Moo again, and definitely recommending them to anyone who requires professional business cards or something novelty like their MiniCards. Five star service.

]]> http://csswizardry.com/2010/01/moo-business-cardsmost-impressive/feed/ 5 Message to Santa—a Christmas project http://csswizardry.com/2009/12/message-to-santaa-christmas-project/ http://csswizardry.com/2009/12/message-to-santaa-christmas-project/#comments Wed, 23 Dec 2009 11:01:54 +0000 Harry Roberts http://csswizardry.com/?p=76 Last year, the ever so talented Megan Smith and I designed and built Message to Santa—a cool way for kids to send of their present letters to the Big Man. Megan provided the cute little illustrations, and I designed and built it all. Although it is December 23 now, so probably a little late to be sending off your letters, I thought I’d do a quick blog post about it…

A screenshot of Message to Santa

]]> http://csswizardry.com/2009/12/message-to-santaa-christmas-project/feed/ 0 Typographic work planner http://csswizardry.com/2009/12/typographic-work-planner/ http://csswizardry.com/2009/12/typographic-work-planner/#comments Tue, 22 Dec 2009 11:17:25 +0000 Harry Roberts http://csswizardry.com/?p=49 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="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:

  • summary="": This is an attribute which provides a brief overview of the table and its contents/purpose.
  • caption: This is a table specific caption, essentially a heading/title explicitly for the table.
  • colgroup and col: This is an essentially invisible element that just adds semantic meaning to the table. It defines the columns and can—in some browsers—be used to style them.
  • scope="col": This is an attribute which tells the browser whether the th is a title for a column or a row. This then obviously makes the other possible attribute value row.
  • tfoot: This is a table footer and contain pretty much anything you like. It must however appear before the tbody.

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

]]> http://csswizardry.com/2009/12/typographic-work-planner/feed/ 27 Suzanna Haworth Photography http://csswizardry.com/2009/12/suzanna-haworth-photography/ http://csswizardry.com/2009/12/suzanna-haworth-photography/#comments Thu, 17 Dec 2009 19:53:55 +0000 Harry Roberts http://csswizardry.com/?p=7 I recently completed a complete design and build for my girlfriend, Suzanna Haworth. She’s something of a photographer and we decided that we ought to knock her a little site up to showcase her works. As she wasn’t a client per se I had much more creative freedom than I usually would so I decided to exercise some CSS3 and progressive enhancement on the site.

Screenshot of Suzanna Haworth’s website

The site also uses some custom written PHP which makes really light weight of adding new galleries and images, as well as making it pretty efficient for such a heavy website.

]]> http://csswizardry.com/2009/12/suzanna-haworth-photography/feed/ 0