Planning for web re-design
May 5, 2006 12:31 PM Subscribe
How do I separate the content of web pages from the design of those pages?
Because I have been critical of my academic organization's web site, I find myself in charge of the web site. I know I am no design maven, so what I am hoping to do is come up with some simple design (probably from oswd.org) that I can fill out with content. Then, in the fall when students are back, I want to hold a design competition to get something nicer and more unique. At that point, I would like it to be easy to move from one design to the next.
I should say that we have our own server, and prefer to run things that we don't have to pay for, so we are looking at something like php, MySQL and Apache (though I am open to other suggestions). The site itself is relatively small, a few tens of distinct pages, and most are static. We have a few things that will need to be dynamic, like listings of talks and job opportunities.
What can I do now to make my life easier later?
Because I have been critical of my academic organization's web site, I find myself in charge of the web site. I know I am no design maven, so what I am hoping to do is come up with some simple design (probably from oswd.org) that I can fill out with content. Then, in the fall when students are back, I want to hold a design competition to get something nicer and more unique. At that point, I would like it to be easy to move from one design to the next.
I should say that we have our own server, and prefer to run things that we don't have to pay for, so we are looking at something like php, MySQL and Apache (though I am open to other suggestions). The site itself is relatively small, a few tens of distinct pages, and most are static. We have a few things that will need to be dynamic, like listings of talks and job opportunities.
What can I do now to make my life easier later?
You've already mentioned php/mysql/apache, and that's basically exactly what you ought to do.
The only other real option is server side includes of text files, which is kind of archaic and silly at this point because the database stuff will provide you more flexibility for things like event calendars, etc.
I'd recommend picking up a book on php/mysql programming and jumping right in. It's much easier than you'd think.
posted by twiggy at 12:58 PM on May 5, 2006
The only other real option is server side includes of text files, which is kind of archaic and silly at this point because the database stuff will provide you more flexibility for things like event calendars, etc.
I'd recommend picking up a book on php/mysql programming and jumping right in. It's much easier than you'd think.
posted by twiggy at 12:58 PM on May 5, 2006
The ultimate separation of design from content can be found in the creation of XML/XSLT transformations. These can be performed by PHP. Putting your entire site into DIVS and hacking around with a CSS file is not the answer.
You can also get a lot of mileage out of server side includes (another thing PHP would be happy to do for you.)
Congratulations on your forward thinking and good luck with your web site!
posted by macinchik at 12:59 PM on May 5, 2006
You can also get a lot of mileage out of server side includes (another thing PHP would be happy to do for you.)
Congratulations on your forward thinking and good luck with your web site!
posted by macinchik at 12:59 PM on May 5, 2006
Two easy things:
(1) Use only so-called "logical" tags and avoid presentational tags. This means use tags with semantic meaning like h1 and em, and avoid tags like font and b/i. Then use one CSS stylesheet across all your pages to control the look of your site. This will separate content from presentation and will also make it easy to make site-wide appearance changes just by updating the CSS file.
(2) Presumably all of the pages will have a common set of banners, menus, etc. Use a PHP function to generate all of this common stuff and simply call that function on each page. Imagine something like this:
posted by Khalad at 1:01 PM on May 5, 2006
(1) Use only so-called "logical" tags and avoid presentational tags. This means use tags with semantic meaning like h1 and em, and avoid tags like font and b/i. Then use one CSS stylesheet across all your pages to control the look of your site. This will separate content from presentation and will also make it easy to make site-wide appearance changes just by updating the CSS file.
(2) Presumably all of the pages will have a common set of banners, menus, etc. Use a PHP function to generate all of this common stuff and simply call that function on each page. Imagine something like this:
<?php beginPage(); ?>
<h1>Contact Information</h1>
<p>You can reach us at:</p>
...
<?php endPage(); ?>posted by Khalad at 1:01 PM on May 5, 2006
If you're considering a CMS, TextPattern may be worth looking into - it's slightly less user-friendly than WordPress (IMO), but it seems better suited to non-blog use, and is structured in such a way that layout, content, and the style applied to that content are all separate.
posted by unmake at 1:25 PM on May 5, 2006
posted by unmake at 1:25 PM on May 5, 2006
macinchik's suggestion is technically correct -- XML transformed by XSLT is the ultimate separation of form from content. However, it's kind of more of a pain in the ass than just doing XHTML+CSS. I have made a website which is XML transformed by XSLT into HTML+CSS, and while I can do some cool things with it, it really wasn't worth the effort, plus it's slower (though I guess I could speed it up by sending the XSLT down for an in-browser transform).
posted by breath at 2:31 PM on May 5, 2006
posted by breath at 2:31 PM on May 5, 2006
Response by poster: Thanks for all the great answers. Are there any other books you all recommend that I take a look at?
posted by procrastination at 2:41 PM on May 5, 2006
posted by procrastination at 2:41 PM on May 5, 2006
Obviously what you want to do for your competition is something like the Zen Garden site. No presentational tags at all in the HTML, as Khadad says, and make sure you chuck in lots of IDs and classes -- too many is better than not enough.
You'll need some dynamic way to call different stylesheets for the same page.
What you do is have a URL like
yourdomain.com/page.php
which loads a default stylesheet, but that can be over-ridden by adding this:
yourdomain.com/page.php?css=stylesheet1
or
yourdomain.com/page.php?css=stylesheet2
and so on.
Then you can get your students to redesign the site by editing the stylesheet only. Can't get more separate than that.
posted by AmbroseChapel at 3:44 PM on May 5, 2006
You'll need some dynamic way to call different stylesheets for the same page.
What you do is have a URL like
yourdomain.com/page.php
which loads a default stylesheet, but that can be over-ridden by adding this:
yourdomain.com/page.php?css=stylesheet1
or
yourdomain.com/page.php?css=stylesheet2
and so on.
Then you can get your students to redesign the site by editing the stylesheet only. Can't get more separate than that.
posted by AmbroseChapel at 3:44 PM on May 5, 2006
This thread is closed to new comments.
But if you know HTML, then as long as you can create the proper heirarchy of information with no stylesheet, and label all your elements with the proper id or class, then ideally any number of CSS style sheets can be applied to your code with infinite design possibilities...
posted by Robot Johnny at 12:57 PM on May 5, 2006