You are looking at archived content. The hot new stuff is happening at Veerle's blog 3.0. You should check it out!

Apr 02

Just Add Heat, one of the projects I’ve worked on

2007 at 09.38 am posted by Veerle Pieters

Let’s talk about food, shall we? ;) One of the projects I have been working on a while ago is a website design for a company from Toronto, Canada called Just Add Heat. The logo and colors were already in place so our job was to to create a few website templates. This brings the perfect opportunity to share some basic CSS information on how the main template is set up.

Introducing Just Add Heat

If you are busy you'll surely recognize the following scenario. Hard at it and completely gone up in your work you suddenly realize that it is dinner time but there is no food in the house or you don't have time to prepare a decent meal. That's were a new trend called assembly kitchens comes in. It's a place where customers spend a couple of hours putting together a week or a month of dinners they can cook at home. That's what Add Heat is all about, but I let the owner speak for herself:

I just opened an assembly kitchen near Toronto, Canada. While this is a very new concept here (mine is the 9th such facility in the country), these assembly kitchens are spreading rapidly across the U.S. with an estimated 1,100 locations by the end of 2006. It's a large kitchen where customers can come and assemble family sized, healthy meals in record time. It takes about 10 minutes to put together something like a spicy chicken stir fry or pork tenderloin with apricots and raisins. We provide all of the ingredients that are chopped, washed and ready to go, plus all of the mixing/measuring utensils, and freezer friendly packaging (we also clean up!). Just Add Heat opened August 15th and in less than three weeks it has proven to be a much needed service. Part of this success can be attributed to Veerle Pieters as she created a fabulous website that is easy on the eyes and unintimidating for all. It was great working with her because she understood our wants and needs very quickly - making the birth of the website pain free and fast.

Inside Just Add Heat

It was great working with the people from Just Add Heat and a fun project and subject to design for. I'm very happy and honored they choose Duoh! for the design of their website and I'm double pleased that the business is going so well. It's amazing how you learn about new things in other countries. Assembly kitchens isn't something that is available to my knowledge in Belgium yet.

Setting up the template

Here is a picture that shows you how I divided the different areas of the page:

Just Add Heat template layout

As you can see from the CSS below and the picture above, I use 2 wrapper ids and within these I have again 2 content areas:

  1. body {
  2. font:75%/150% "Lucida Grande", "Lucida Sans", Verdana, Arial, Helvetica, sans-serif;
  3. background:#646464;
  4. color:#666;
  5. }

The body element has the grey color as background and the primary-content-wrapper id and secondary-content-wrapper are stretched over the entire width (100%):

  1. #primary-content-wrapper,
  2. #secondary-content-wrapper {
  3. width:100%;
  4. text-align:center;
  5. }

The primary-content-wrapper id has the background image repeated horizontally. The rest of this area is filled with a very light grey color:

  1. #primary-content-wrapper {
  2. background: #f0f0f0 url(../images/bg-primary-content.gif) repeat-x;
  3. }

The secondary-content-wrapper has a border of 6 pixels at the top:

  1. #secondary-content-wrapper {
  2. border-top:6px solid #585858;
  3. }

There are probably different ways of doing this and achieving the same result. Some of you might find this piece of code a bit too basic to learn from, but from the e-mails and feedback I get I know that a lot of you are still starting to learn CSS. Hopefully by sharing this part of the project I help you to get a better insight on how to think in divs instead of tables.

However reality is, that you don't always have total control over the outcome. So there are a few things I would have done differently code-wise, but hey, it's already an improvement from a total table-based website. I don't want to be a code-nazi, but the urge is always there to correct. "Let it go Veerle" that's what I tell myself :) Further from that, I wish the people of Just Add Heat all the luck with their new business. I think I would be a regular customer if it was nearby ;)


44served

gravatar

1

permalink this comment MaRmAR Mon Apr 2, 2007 at 10.39 am

I think this is the way of CSS I would do it too, of course accordingly to final design.
As I see in Photo gallery on that site their logotype is made with ‘Trebuchet MS’ font though. Why you didn’t used it in site’s header?


gravatar

2

permalink this comment Neil Bradley Mon Apr 2, 2007 at 11.32 am

Hey Veerle,
Great site. Really nice design and layout - as usual. :)

Was the site done with ExpressionEngine?


gravatar

3

permalink this comment Terry Sutton Mon Apr 2, 2007 at 11.54 am

Quite nice - the large footer really pulls the lot together.


gravatar

4

permalink this comment Andrew Ingram Mon Apr 2, 2007 at 11.54 am

Wow, that’s really nice. It’s all fruity and foody. Beautiful layout and nice clean markup.


gravatar

5

permalink this comment Birgit Mon Apr 2, 2007 at 12.15 pm

Thanks for sharing the information, it’s always nice to find design tutorials by the pros I admire the most ;)


gravatar

6

permalink this comment Veerle Mon Apr 2, 2007 at 01.21 pm

Thank you all :)

MaRmAR said:

As I see in Photo gallery on that site their logotype is made with ‘Trebuchet MS’ font though. Why you didn’t used it in site’s header?

I wasn’t aware of this to be honest. The only information I received were guidelines on the colors and the logo. I never saw these pictures when I was working on the site. The client added the content pages when I delivered my templates. If there was one thing I would have changed, it’s the typeface in the logo. I don’t like the “Courier-like” font.

Neil Bradley said:

Was the site done with ExpressionEngine?

No, I don’t know which system they are using. I didn’t do the implementation either. Would have been perfect though, for sure :)


gravatar

7

permalink this comment Jackson Mon Apr 2, 2007 at 01.43 pm

How were you able to keep the footer “locked” to the bottom of the browser, regardless of main content size or browser size?


gravatar

8

permalink this comment Victoria Pavlova Mon Apr 2, 2007 at 01.49 pm

The site looks gorgeous. That magenta and hot pink with gray is totally working.

I’ve only done the template design work, the rest is in the hands of the client.

So, it’s them messed up, ‘cause in Firefox2 that central part is not two-columns but one. I mean, “It looks simple because it is simple!” part goes down. It works in IE though.


gravatar

9

permalink this comment Jocker Mon Apr 2, 2007 at 01.56 pm

very nice!

I get I know that a lot of you are still starting to learn CSS

I’m one of them :) I find that tutorials like this are very useful improve on CSS layout.

Thank you for sharing this.


gravatar

10

permalink this comment Pink Panther Mon Apr 2, 2007 at 02.20 pm

The post is quite good. Is the webpage JavaScript, HTML, and CSS based?


gravatar

11

permalink this comment Veerle Mon Apr 2, 2007 at 02.25 pm

Jackson said:

How were you able to keep the footer “locked” to the bottom of the browser, regardless of main content size or browser size?

The body element has the grey color. So where the content stops, the footer starts and from there on till the border of the browser window you have the grey. Does this make sense?

Victoria Pavlova said:

So, it’s them messed up, ‘cause in Firefox2 that central part is not two-columns but one. I mean, “It looks simple because it is simple!” part goes down. It works in IE though.

Hm, that’s most bizarre :-/ It seems that a reload fixes it, but it’s bizarre because I’ve seen this behavior once and now I can’t reproduce this. It keeps on loading fine now. No idea what’s causing this. And no, they didn’t mess up this page, the homepage was one of the pages I did the entire XHTML/CSS coding for.

Pink Panther said:

The post is quite good. Is the webpage JavaScript, HTML, and CSS based?

Thanks. Yes it is.


gravatar

12

permalink this comment Scott Mon Apr 2, 2007 at 03.03 pm

Oakville is a bit of a drive for me, here in Toronto, but it sounds like an interesting concept and it looks like you did a great job with their site within the constraints you had.

They should have had you do some finesse work on the wordmark in their logo though. I think the little illustrations are quite nice, but the wordmark font - ick!


gravatar

13

permalink this comment Soroush Mon Apr 2, 2007 at 03.11 pm

Very nice job Veerle! It has your signature design! :)

I also have a question:
You mentioned that you designed templates. Did you deliver html files, or those which would fit with a CMS template; where by putting certain keywords, the content will be filed dynamically. Hope I’m clear.


gravatar

14

permalink this comment Brendan Mon Apr 2, 2007 at 04.20 pm

I’m so glad you didn’t post this yesterday.  I’ve got my April 1st blockers on. Nice site!


gravatar

15

permalink this comment Christophe Mon Apr 2, 2007 at 04.57 pm

MaRmaR said:

As I see in Photo gallery on that site their logotype is made with ‘Trebuchet MS’ font though. Why you didn’t used it in site’s header?

If you look at the left picture of the shop, you see figures (“13”, “14”, etc) with the “same” font as in the site’s header.

Hmm, I believe :-§

Anyway, we learn a lot with you Veerle, thanks !


gravatar

16

permalink this comment Nick Toye Mon Apr 2, 2007 at 05.20 pm

The tribute from me Veerle is would I go to the site because I want people to make my dinner? (I know that’s over simplified.), No.  I would go to the site because the design is everything a website should be.

I just love the sitemap. Only recently I have been thinking about the value of a sitemap and whether or not is it a survivor from the old school.  I suppose its all in the execution.

Although I have noticed that there seems to be some encoding issues, on Privacy for example, oh and in Safari.


gravatar

17

permalink this comment Oliver Mon Apr 2, 2007 at 07.03 pm

Jackson said:

How were you able to keep the footer “locked” to the bottom of the browser, regardless of main content size or browser size?

Veerle responded

The body element has the grey color. So where the content stops, the footer starts and from there on till the border of the browser window you have the grey. Does this make sense?

I think he means where the bottom of the footer touches the bottom of the browser, I guess using min-height?


gravatar

18

permalink this comment Veerle Mon Apr 2, 2007 at 07.47 pm

Thanks for all the great comments :)

Oliver said:

I think he means where the bottom of the footer touches the bottom of the browser, I guess using min-height?

I see what you mean, but I didn’t use any CSS technique to make the footer stick at the bottom, because it doesn’t :) Look at the contact page or pages with almost no content. It does not stick. I’m actually not very fond of creating a big gap between content and footer in case there isn’t enough content to fill the page, I prefer it like this :) This is pure personal taste I guess.


gravatar

19

permalink this comment William Mon Apr 2, 2007 at 08.41 pm

Thank you for the post! This is very helpful.

Great job on the site. It works very well for the target audience - busy parents who don’t want to waste time trying to navigate through a complicated site!

You are an inspiration to many, Veerle!


gravatar

20

permalink this comment Michael Short Mon Apr 2, 2007 at 10.35 pm

Thanks for the great article veerle. it was very helpful!

First time poster btw :-D


gravatar

21

permalink this comment John Martin Mon Apr 2, 2007 at 10.59 pm

Hi all, I’m the developer of the site, so I thought I’d chime in and answer a few of your questions. But before I do, let me just say that Veerle did a magnificent job, especially given the constraints of the existing colors and branding. (I’m guessing that typewriter fonts in black and pink are probably not the ingredients of a dream brief.) Not only is the rendered design beautiful, but the markup that generates it is very well structured and concise. (The home page with styles turned off is a sight to behold.) Any of the niggling style/layout/encoding issues are almost certainly due to changes and additions that we have made since.

Was the site done with ExpressionEngine?

No, it is a custom system built using the Django framework. We have some fairly complicated reservation and ordering processes as well as a bunch of (private) reporting and point-of-sale features, so we would have been bumping on the boundaries of a regular CMS.

As I see in Photo gallery on that site their logotype is made with ‘Trebuchet MS’ font though. Why you didn’t used it in site’s header?

The typeface on the signs is a mistake. The proper branding is the typewriter logo that you see on the site.

So, it’s them messed up, ‘cause in Firefox2 that central part is not two-columns but one. I mean, “It looks simple because it is simple!” part goes down. It works in IE though.

It may be. I’m not sure what this is, to be honest. I’ve noticed it a few times, but like Veerle a reload fixed it and I was unable to reliably repro. Something in the markup is causing Firefox to render non-deterministically. If anybody has any ideas…

Anyway, thanks for the write-up Veerle. I hope we get a chance to work together again!


gravatar

22

permalink this comment Victoria Pavlova Tue Apr 3, 2007 at 10.07 am

Veerle, thing is that in my Firefox 2.0.0.3 div with “Simple…” stays lower whatever I do - I tried reloading but it did not work. Using Firebug I removed text-indent: -9999px; and it helped but not for sure - it needed disabling-enabling floats on those div’s.

Hope you’d nail that bug down ‘cause such a beautiful bright site needs it :-)


gravatar

23

permalink this comment kaffass Tue Apr 3, 2007 at 11.28 am

Great veerle. you are really great.


gravatar

24

permalink this comment Veerle Tue Apr 3, 2007 at 01.01 pm

John Martin said:

Hi all, I’m the developer of the site…

Thank you John for your clarification and feedback :)

Victoria Pavlova said:

Veerle, thing is that in my Firefox 2.0.0.3 div with “Simple…” stays lower whatever I do - I tried reloading but it did not work. Using Firebug I removed text-indent: -9999px; and it helped but not for sure - it needed disabling-enabling floats on those div’s.

It’s weird I don’t get this effect anymore at all. On Geert’s Mac it appears rather randomly, but mostly “not”. It always disappears as soon as he reloads. I wonder if it has anything to do with the order of loading of things. If Geert disables cache it seems to work fine each time. Something is triggering this effect while loading.


gravatar

25

permalink this comment Adrian Tue Apr 3, 2007 at 07.00 pm

Hi,

Just stumbled accross your site.  As a fairly new web developer I find your work an inspiration, its excellent.

I have just noticed that your site is powered by Expression Engine.  I have never heard of this before.  I am starting to develop sites using Wordpress with custom themes.  I was wondering if I could open a debate to which platform is the best?  Any particular reasons why you have chosen Expression Engine?

Thanks

Adrian


gravatar

26

permalink this comment Angell Tue Apr 3, 2007 at 07.15 pm

Veerle, I’ve been visiting your site since dezember of last year. Don’t give importance to my Encglish,  I’m studing.
I love this page! I’m doing an project for my friend ^^ . It’s for an Candy Store. I’m using yellow because the Logo is very “happy” and modern.
If I finish it as soon I’ll post here to show you!
I’m your fan ^^
You are great!
KISSES!


gravatar

27

permalink this comment Jackie Wed Apr 4, 2007 at 12.22 am

Hi Veerle,

  I recently looked at your new Just Add Heat site on your main Duoh website, and really thought how nice and neat it looked, with the three different sections distinguished by different content areas and colors and the pretty illustrations.  I love the colors too, and the navigation.

Thanks for trying to explain the CSS coding to us.  I have been trying to learn more about how to do table-less websites, but find it difficult to make the transition to all divs, but this certainly will be a helpful example - maybe eventually I’ll get it!


gravatar

28

permalink this comment Jason Wed Apr 4, 2007 at 01.08 am

Great site! 

Have you tried applying the clear property { clear: both; } to that div giving you the problem?

-Jason


gravatar

29

permalink this comment Sam Wed Apr 4, 2007 at 07.34 am

Great post! It’s nice to see what other designers do to achieve their results in their work. I’ll be sure to pick up from these tips, I always wanted to know how layouts that have 2 wrappers were done.


gravatar

30

permalink this comment vanni Wed Apr 4, 2007 at 10.52 pm

Veerle - another great write-up that has given me new insights. The “just add heat” site sure sizzles with your design touch… unmistakably a veerle design, to be sure.
A couple of questions: 1) did you do a mockup of the site using Photoshop? i.e you layout the sections title etc in photoshop and work from that? and 2) what font and font-size did you use on the Nav Buttons?  the buttons look to be an image and the text is still so clear even at their small font-size.

@John who said:
“No, it is a custom system built using the Django framework. We have some fairly complicated reservation and ordering processes as well as a bunch of (private) reporting and point-of-sale features, so we would have been bumping on the boundaries of a regular CMS.”
John,  there may be perfectly good reasons to use Django, but if you have a chance you owe it to yourself to check out Expression Engine…. “this ain’t your father’s or mother’s CMS….” It can handle whatever you throw at it.  I won’t classify EE as “regular”.

Cheers

PS “De Ronde” is almost upon us!


gravatar

31

permalink this comment Techjournal Wed Apr 4, 2007 at 11.33 pm

Amazing design Veerle.
Your work is inspiring. I’m just beginning to learn CSS so will probably spending a lot of time on your site from now on (wish I had found it sooner!)


gravatar

32

permalink this comment Shannon Thu Apr 5, 2007 at 02.16 am

I love your design Veerle!  It also brings together two of my loves - web design and food.  I hope I have the opportunity to do design work for a restaurant, bistro, or cafe in the next year.


gravatar

33

permalink this comment John Martin Thu Apr 5, 2007 at 10.10 am

vanni said:

John, there may be perfectly good reasons to use Django, but if you have a chance you owe it to yourself to check out Expression Engine…. “this ain’t your father’s or mother’s CMS….” It can handle whatever you throw at it.  I won’t classify EE as “regular”.

I will do so. I was a little loose with my response, it certainly wasn’t meant as a slight towards EE.


gravatar

34

permalink this comment bob dylan Thu Apr 5, 2007 at 03.52 pm

Love your work Veerle, you are an inspiration to us all!


gravatar

35

permalink this comment xxdesmus Thu Apr 5, 2007 at 08.28 pm

Just wanted to chime in with a
1. “you have an absolutely gorgeous website”

and a

2. “your work is incredible”

:)


gravatar

36

permalink this comment Jackie Fri Apr 6, 2007 at 03.33 pm

Veerle -
 
  I noticed that on your Done Like Dinner page, that title “Order Done Like Dinner Meals” at the top has a registration mark after the phrase.  You can superscript the registration mark by enclosing the ® in superscript tags like this:

  <sup>®</sup>

—in case you didn’t know.  I had to do a lot of superscripting of registration marks recently for a web page that I managed, so that is why I noticed this.  Hope you don’t mind me pointing it out. ;)


gravatar

37

permalink this comment kristarella Sun Apr 8, 2007 at 03.28 am

Very nice, I think it has your flair, but it’s obviously similar to their flare because they already had the logo with the heat swirls. They chose the right designer.

“It’s weird I don’t get this effect anymore at all. On Geert’s Mac it appears rather randomly, but mostly “not”. It always disappears as soon as he reloads. I wonder if it has anything to do with the order of loading of things.”

You could be right about that. I’ve had problems with right floats not being in the right place and having to load them before the left float before. I found a better solution in the end, it just took much playing.

Quick question - what did it mean when you used font:75%/150% ? I’ve never seen two values separated by a / for font size before.


gravatar

38

permalink this comment Tanya Sun Apr 8, 2007 at 06.11 pm

Hi,  I love your work and blog.

I was just curious on which fonts you use for the subjects and posts.

Keep up the good work :-)


gravatar

39

permalink this comment Olivier Sun Apr 8, 2007 at 11.52 pm

Just found you site… beautiful work here! I love it!

Keep it up

Oli


gravatar

40

permalink this comment Veerle Mon Apr 9, 2007 at 11.53 am

Jackie said:

You can superscript the registration mark by enclosing the ® in superscript tags like this: <sup>®</sup>

You’re right and I knew this already myself, but as good as all content is added by my client and he probably didn’t know this, so I’ll pass this on, thanks.

kristarella said:

What did it mean when you used font:75%/150% ? I’ve never seen two values separated by a / for font size before.

It’s the fontsize and line-height separated by a slash. I’m always using CSS shorthand properties for my styles.

Tanya said:

I was just curious on which fonts you use for the subjects and posts.

I use the “Century Gothic” (installed on about 80% of the computers) and “Trebuchet MS” as second alternative in the font-family property.


gravatar

41

permalink this comment Shaun Tue Apr 10, 2007 at 09.31 pm

The website doesn’t load for me? have they taken it down for some reason?

Anyway very nice site and nice information on the design work, thanks for that.


gravatar

42

permalink this comment Sanyo Thu Apr 12, 2007 at 04.36 am

Hi Veerle,

I had no idea you were the rock star of web design - we obviously made the right choice!  There are meal assembly kitchens popping up all over Toronto now, and most of them have busy and cluttered websites.  We’ve received numerous compliments on our site, thanks again.  Business is great and we’ve been receiving a lot of media attention lately.

Sanyo


gravatar

43

permalink this comment meenal Fri Apr 13, 2007 at 07.59 am

great site again Ms V.

As a web designer, I wish I had you as my boss!

I am too wondering about the footer sticking to the bottom question. Recently i designed one site..but the foote and body had different colors..so had quite a tough time adjusting it.

DO you have any tutorials or suggestions regarding this?

Thanks in advance and all the best…

[ps: can i sill send my cv ;)]


gravatar

44

permalink this comment Michael Whee Fri Apr 13, 2007 at 12.32 pm

The design of the site is awesome. And of course explanation is the best. Thanks for your works!



Commenting is not available in this weblog entry.

Flickrness

buy something from my Amazon wishlist