How this website was built

Hi there early readers! Welcome to a newly started web development blog. I know that there are a lot of those around so I will work hard to make it different and hopefully earn your trust. This site will mainly consist of new stuff; very few of those “news about news” posts, there are better places for that. “Web development” I say, and by that I most often will mean client side techniques like HTML, CSS and Javascript. This is the idea and I hope it will work out.

This site has been worked on for over a year so it’s about time I get it up and working. This article will talk mostly about how this site has been built. You will hopefully notice that to me it’s important that you practice what you preach.

WordPress as backbone

I’m running the blog software WordPress 2.0 as the base for all this. I’ve read a lot of good things about it and I know PHP so I thought why not give it a try? In just a week I had written my own theme and a few plug-ins to go with it. WordPress really is well built and easy to use. Any problems I’ve had have been answered in the IRC help-channel by nice people. Kudos to the WordPress team for doing a great job.

Fireworks for building the idea

All my layouts start out in Macromedia Fireworks. Fireworks is a nice program to work in even though I’m not used to their other programs. I have tried Photoshop but it just didn’t work out between us. Floating toolboxes? Startup time that makes me fall to sleep? No, I wanted something that’s easy to get started with, and if possible something that had special tools for web development. Fireworks is perfect for this, it’s like a combination of Illustrator and Photoshop and has a user interface that even a beginner learns quickly.

I played with a few different layouts until I found something I liked. The idea with this one is to put the content in focus. Everything except the content column is dark so the white will stick out. The text starts a bit above the text in the left column and has a big <h1> so you know where to start. The comments are placed in the sidebar, mostly because there probably will be very few in the beginning. Don’t take that as an insult, I want to hear what you say, but this is not a forum or wiki :)

CSS elastic faux columns for implementing it

This site does not use tables for layout (of course!). I’m an operator of a help channel for CSS so that would be unacceptable :) A lot of work has gone to make sure the layout works like it should.

The layout in Fireworks was complete and I had the hard part left, converting my mock-up to a web site. After many tries I finally decided to go with a zoomable layout. I know this is hard to work with, especially with complex sites like this one but I thought I’d give it a try. Worked out pretty well I think. The biggest bug I know of is that the header look strange in Opera and Safari, as far as I can understand it’s because of a bug in both their rendering engines when calculating percentages. Anyhow, the site works well in both Internet Explorer 6 and Firefox so I hope most of you will see it like it’s meant to.

The layout is made zoomable by using the em unit on the parent container. When text-zooming (Ctrl + Plus in Firefox and View -> Text Size in IE) the em unit adjusts to what you select so everything gets nice. There is one big problem with changing text-size though: images do not change size when you text-zoom. So certain parts of the site need to stay fixed and some need to move for the site not to collapse.

I wanted background-images in all my three columns so having all columns change their sizes started to look hard. Then I stumbled over an article about faux columns that used percentages to position a background-image so that it could grow in both directions. The faux columns technique uses a repeating background-image to fake columns. By using two of those images I could get it working on a 3 column layout with percentages.

The next step was making the site zoomable. If I set the container to a fixed em width and then use faux columns with percentages throughout the site I get what I want. Everything worked out and I could start working in the small parts. Want to see how much trouble IE gave me? Just have a look in my “decoration” stylesheet, I commented every browser problem I encountered in IE, Opera and FF and solved most of them :)

Miscellaneous

All images used are from SXC.hu, the excellent stock image directory. Highly recommended.

That’s it people, my site and the idea behind it. I hope you will come back and read my articles. Thanks for reading.

17 responses to “How this website was built

  1. interesting look. I’m curious to see how having a comment field in the sidebar will work :)

  2. Nice elastic faux columns implementation. I used to do two columns like this, but I couldn’t figure out a way to do more than that. Now I know. Thanks!

  3. I am very impressed with your work. I have spent some time looking at how you created two specific effects.How did you create the centered division that expands when I adjust the text size.I am interested in the column effect you created, and I understand the use of ems units which has not been my practice in the past, but I’m trying to examine the page a piece at a time.

  4. Very nice.A beginner of css,i am from china.Thanks for your article and internet.

    bestwishes

  5. @Neo: sorry for being slow in answering you. The centered div that expands is done with: #container { width: 50em; margin: 0 auto; } (this requires that you are in standards mode). It’s as simple as that.

  6. i like the way of teaching css.now i am feeling softwares are not difficult, the thing is that we make it deficult.thanks for overcoming my fear

  7. I’m coming a bit late here. I just came across one of your articles (Tags encyclopedia) randomly browsing delicious (definitely a favorite of my favorites in that section now). Being a self-taught web developper, I’m making an excessive (or even exclusive) use of nested-tables-based layouts (don’t hit !). Many articles are hinting me on working some on following standards, and CSS-based layouts. I never jumped in so far cause I had all theses articles from several sources to study, and that they are often contradictory.
    I spent 4 hours reading your articles here. A warm thank you for all the work you put out in this, i’m definitely convinced now that I must change my way of working AND you provide sharp directions to follow in that process.
    Kudos to you.

  8. Thanks for describing how your site is made! I wish more people did that. Kudos!

  9. Besides, it is a good idea to make the area that you want people to read as first priority, appear lighter than the rest.
    Can see the same principle is used in the other projects… nice.

  10. The layout looks very nice, very soulful & Scandinavian somehow. I took a look at your other projects also, and find their design excellent as well, very pleasant and friendly.

    However, I do not see an advantage of having the comments in the sidebar. Particularly for long comments,I think the amount of text in the side bar makes the overall impression a bit more heavy than it would otherwise.

  11. Just stumbled on this site. I use CSS and I’ve found the one article I’ve read so far very informative…so I’ll be back. Oh and thanks for the link to the stock photo site. It’s great.

  12. The site is very useful and even a beginner can gain good experience in building web pages worth looking at.

    I have just started building my home page using googlepages.com

    This is only the beginning and I want to add more information on the pages to be added.

    Your site will help me build better pages to follow.

    I have subscribed to your feed.

    Bhasker Raj
    India

  13. Hej Emil,
    Jag är en svenska som bor i Canada. Snubblade över den här sidan via nå’n lista med länkar hos W3C. Det fanns tutorials på Finska, Danska, Hebrew och allt möjligt utom Svenska. Tittade på Din sida eftersom namnet Stenström inte bara var svenskklingande men jag kände en snubbe för länge se’n som hette Björn Stenström från Bollsta.

    Nåväl, det hör inte till saken. Jag är över femtio år gammal, men jag har varit online i tio år. Inte förrän nu har jag bestämt mig för att lära mig CSS från grunden.

    Tidigare visste jag bara små saker om det som att t. ex. ändra färg eller font med hjälp av inline style.

    Köpte en domän och satte igång för två dagar sedan (med websidan). Installerade WordPress också.

    Nu när jag har bläddrat runt lite här på Din sida så ser jag att de problem jag stötte på direkt var ungefär samma som alla andra som varit i kontakt med Dig… float, till exemple. Börjar få lite bättre häng på det nu.

    Det är mycket lättare att läsa på en så’n här sida som Din än att uteslutande använda sig av W3C. På något sätt är det lättare att förstå.

    Varma hälsningar från Quebec och…”keep up the good work!” :)

  14. @Reb: Hej! Kul att du hittade min sida, och kul att det verkar som den var lättare att förstå än W3C:s egna :) YOU keep up the good work. (Känner ingen Björn Stenström tyvärr…)

Comments are closed.