« I won't grow up! | Main | snow, baby, snow! »

 
Managing your site & redesigns

Mikey asked me the other day how I manage to change designs so often -- so here's what I do.

Tools: I use Moveable Type, Photoshop 5.5 (I HATE 6.0), UltraEdit (which is a souped-up notepad), and Get Pixel.

Images: I stalk sites like istockphoto and Image Cafe. When I see something that inspires me, I grab it. I also constantly bookmark sites whose design I admire -- it gives me ideas for creating my own designs. I also see design ideas in everything -- a commercial on TV, the colors on a magazine cover, etc.

Make the design: I make up the design in Photoshop -- the whole page. I then cut it up into little pieces, and put it all back together in html.

Use PHP includes: Don't let the php scare you! I don't write php scripts or anything. I just cut the html into everything that comes before the content (or in this case, everything that comes before the MT Index Template code). I save that file as "top.inc" -- and then I do the same for everything that comes AFTER the MT code. I save that as bottom.inc.

Every page on my site "calls" these two files. My about me page, for example, would look like this:

<?php
include('http://www.snazzykat.com/includes/top.inc');
?>
My full name is Erika-Renee. I love my name, even though I changed it to Brianna in sixth grade, and spelled Erika any other way than with a K all throughout high school. School friends called me Eka, college friends called me Ophie or Sere, and everyone now pretty much just calls me Er or Erika.
<?php
include('http://www.snazzykat.com/includes/bottom.inc');
?>

So every single page on my site simply has those lines & the content for that page inbetween. This "creates" the page when you look at it -- it gets all the html for the top from the "top.inc" files, puts it in, then the content, then all the html from bottom.inc.

The benefits to doing this? Every single page on my site changes to the new design when I upload TWO files (plus all the new images). It rocks.

But I'm not done.

Use Stylesheets: I use stylesheets -- the same basic one for every single design. Then I simply need to go in, change the colors for each element (for example, if I change the color under "title" -- every single place on my site that uses the class "title" will automatically change to that color).

But there's more!

Use MT to keep everything simple: Every little piece of my page is it's own index template in MT -- for example, the "about" section over there ---> is a mini-template called "about.inc". Same with "Navigate", "What you said" and so on. All it is is the title code, and the little snippet and/or code. I've got a mini-template for every single sidebar piece I might ever want to use (such as "most commented" and five random blogs"), and depending on the design, I can "call" those pieces in REALLY easily -- anywhere on the page that I want. If I want two sidebars, I just need to figure out what pieces I want in each one, then pop in the include to the html. (Edited 1/04: MT now lets you use "modules" - which is essentially the same thing as the little include files I've created. You might want to check into using them instead.)

That way, if ever I need to change one little thing in a section in the sidebar, I just go into that MT template, make the change & rebuild. Voila - done! And I never needed to ftp or touch any of my main html code.


So my current sidebar html really looks like this (click on the image).
It seems like a lot, but it's really not. I've tried to streamline everything so making changes is really, really simple.

Questions? Go ahead -- ask!


|

 
Trackbacks
 
Comments (34)

Thanks for the info -- this is really great stuff to know!

great tutorial!!! and i use a similar approach on my site but it's powered by pMachine. i've only skimmed the surface of CSS and have only applied it to the main page. i haven't ventured to implement it to the other pages because i like that design still. so for now, i'm going to stick to just the front page. but maybe later on, i'll be brave and tackle the rest. hee hee! :D

and you're right, once you get the hang of it, it's really easy and makes redesigning so much faster.

you rock, girl! that was sooo helpful!

I do the same thing, coz I'm too lazy to change the content every time I change design. It's gotten to the point where there's very little that's actually stored as HTML. Here's a couple of nifty things:

[local] and [global] links on my site are a pair of multidimensional arrays in PHP. Then, I use 3 lines of code to display ALL the links:
foreach ($globalLinkage as $value) {
echo "$value[1]
\n";
}

I even have shortcuts for includes! Each one of my files has its own include file (index.php/index.inc, about.php/about.inc, etc). I wrote an include file that reads $PHP_SELF, formats that to get the name of the script and it's include, and plugs it into an array. Thus, instead of calling index.inc 5 times and index.php twice in the same script, it's all $LOCAL['self'] and $LOCAL['inc'], which makes it handy to copy code between files.

Did that make sense?

If anyone would like to see my code, feel free to let me know. (Especially you, Erika ;) )

umm... that code snippet broke when I posted, sorry. And one other thing I forgot to mention: I've been using some pics from www.pics.am lately. Lots of nicely organised stuff there, and it's all free.

that's TALENT and dedication. You ARe the woman! :)

Oooo, someone who does it the same way I do! I started using PHP for the includes in the same manner... I've been explaining to my friends for a while now. It makes life SO much easier!

Ooooh, nice!!! Thanks for the info! :)

I'd love to implement something like this in my new design. It'll give me something to work on when I'm cooped up inside during these long winter months. Thanks for sharing!

So, why am I making things so hard on myself?! Oh, I must go tinker with my site now. :)

I do everything almost exactly the same... but I haven't gotten into the includes on my blog yet. I do them with ASP at work, though? LOL! BTW - Photoshop 7 kicks ass! And so do you!

wow... you make it sound so... well, damn, it still sounds hard! but it's the weekend, so maybe i'll try out some of these idears...

thanks, erika!

Aha, thanks for the information! You've given me a few ideas to make my skins even more flexible. (I'm still hoping for the custom design, but I have yet to find the pictures I'd want to use. I do have pictures from Turkey, quite a lot of them! They're all digital, but I think I still have the high-quality versions in addition to the smaller ones I made for web publishing. So we can work something out, I'm sure!)

*smacks self on forehead*

OF COURSE! OK this weekend I'm totally re-templating and PHPing my stuff. It just makes so much more sense!

This makes so much sense - thanks! It's also a great excuse to reorganize and cleanup my site - I was so excited to finish my own first design that the organization is *ahem* a little sloppy.

I thought I was the only one that hated Photoshop 6 and 7. :) thanks for this wonderful information and have a fantastic new year, as a newlywed ;)

My fiance showed me your site a few times. I have been coming back since just because I love seeing all your new designs. I'm pretty clueless about designs on a page, and my fiance gets annoyed with me everytime I ask him for something new on mine, cause he wrote it so its difficult to add new designs. I have a few on there, but I get bored easily and want new stuff on there.
Could you give me a few pointers on how to redo the page so that it is easier to change. I read your tutorial, but I think either I confused myself, or it just didnt make sense to me, which not much does lately.

did you use Amy's guide to doing skins?

Here's where I'm a bit stumped: I don't use a top AND bottom include. I just have a "top" content. So in looking over her skins guide, I feel like it'll go wrong because I don't use two files like you do...

Wow. this is absolutely amazing and still way beyond me I think. But it gives me something to work for. thanks!

Great tutorial. Thanks for sharing.

Thanks so much for posting this. It really makes it a lot clearer for me. I have been wanting to do this for some time now! I do have one question, how come the file names end in .inc rather than .php? If you could clear that up for me I think I can do this.
Thanks Again!
Angie

Got you through a linkback. You seem very much like myself in your venture for the "right fit" webdesign and style. Lovely site, I'm not so much of a graphics maniac but I do like what you've done with the place ;)

Actually, the question that I have is having to do with MT. I've been dying to install, so I can run my whole site with it, unfortunatly, I cant use my ftp program to Chmod it. Which ftp program would you recommend for setting up Moveable Type?

I am sooo thankful for this! This has indeed helped me in my site. :)

Can someone tell me how stupid I am? I am lost on getting MT installed. I don't have a 100 dollars to fork over for the license fee.

thank you Eka! This helped out so much! *squishes*

I am not sure if this does exactly the same thing as the PHP includes, but have been experimenting with:
MTInclude to pull additional templates into the main page,
when coded it looks like this.


will see how it all falls together... now if only i can get the pesky colour scheme to come together. ;o)

thanks again. lots & lots of squishes. m. :oD

oops i should say the code looks like this $MTInclude module="yourtemplatename"$ [all in between the triangular brackets which i have forgotten the ascii codes for...]
:o}

Erika,
I don't know why I am having such a hard time with this? You have gone to great lengths to make it simpleto understand and yet I don't get it.

I was wondering if you would send me a text file of what your top.inc code looks like. Is that the HTML or is it the header tags ()? And the bottom.inc. A screen grab would work too. I just don't understand what part of the page to put in top.inc and bottom.inc. For a long time I thought I had to cut the HTML up in to postions which broke tables and didn't work. Then I assume your using the 'link to a file' option and linking to the templates?

I am sorry, I hate to be a pain.
It's just that I have spent countless hours trying to figure this out.
Thanks for any advice you can offer. I'm sure you get loads of people asking for help.
Angie

I figured this out today so please feel free to ignore my earlier post.
Thanks!

Posted by Angie | October 28, 2004 5:36 PM

How do I get it so that when someone clicks on one of the archived months the posts show up where the regular posts are. I was also wondering about how to get it so the comments don't show in the pop-up window, but below the post like you have it here. Thanks hope your thanksgiving went well.

You may find it interesting to visit some information dedicated to online gambling online gambling http://www.onlinegambling-4u.net/ flowers flowers http://www.flowers-4u.net/ ... Thanks!!!

You are invited to check some information about... Thanks!!!

Posted by Anonymous | January 2, 2005 2:46 AM

Thanks for the great resource! It really came in handy!

Hi Erika,

I was just wondering how one goes from a design in photoshop to the html. Is there a program that will convert a design to html?

Please advise.

Thank you,

Jumoke

 

See all the moblog pictures
Twittering
Refer A Friend using Revolution Money Exchange

Little reminder

My name is erika-renee, but call me eka - pronounced "eh-ka." I'm suddenly somehow 32, though I still love pigtails and overalls and silly, happy things. I live north of Boston, and I'm happily married to him - we met 15 years ago in high school in NY. I blogged at snazzykat.com for almost 6 years before deciding to make the switch to this domain in Dec 06.

Other important pieces of me: liberal . teacher of at-risk youth . fiercely vocal on issues I care about . pro-choice . equal marriage . CVS sufferer . designer . MA in poetry . lover of all things red sox . raspberry margaritas, on the rocks . yoga. mashed potatoes on biscuits . eddie from ohio . falcon ridge . still want to know more?

100 things | aim | wishlist | pictures

I'm a mama! SleepydoodleLittle Samson Daniel was born on February 24th, 2006. Sammy was born with a congenital heart defect called Hypoplastic Left Heart Syndrome (HLHS). He underwent his first open heart surgery at 4 days old and his second at 5 months old. He will need another surgery when he's between 2 and 3 years old. His mama and daddy, however, think he's absolutely perfect. You can read all about his birth here, or all about him on his site, baby samson.

eComparison - compare travel insurance online

all this cheesy goodness is mine, mine, mine. don't steal - instant karma will get you. john lennon said so.