10 Website Improvements

We are celebrating our 10th year on the net and have updated our website for the occasion. In keeping with our celebration we have added ten new features to the site.

1) Liquid layout design

This three column layout works. From small screen to big screen, From small text to large text. You can zoom in or out without the design breaking (modern browsers Firefox, Opera, IE7). I tested a number of layouts and this one was inspired by Andrew Krespanis presentation site in an hour1 given to the Brisbane, Australia Web Standards Group in February 2005
Note - a recent file upgrade to eliminate an issue with Internet Explorer 6, has cause the layout to break at lower screen settings. We encourage you to upgrade.

2) Goodbye to home

Past visitors will have noticed our side menu bar has been replaced with a horizontal one and with this we have removed the home menu. To get home, just click our logo.

3) Parlez-vous

On every page is a translate box that has a pull down menu with a selection of 8 languages to choose from. If we select French, voilà, the complete page is translated2. Not only that but also the internal links.

4) Find what you want

In the right hand box, we can search for articles in Medicinal Food News with a keyword entry. If we type in hrt which is an acronym for hormonal replacement therapy we get two articles listed. If neither article provides you with the information you are looking for, try our advance search which allows you to select from a number of databases. When we type hrt in the advanced search box and select Google Scholar3 we get over 100,000 results.

5) Sortable database

The first item on our menu bar is our list of articles. This page contains the table of content of all articles written from 1997 to date - over 200. The table has sortable headings listed as no., title and keyword. Clicking on a heading sorts it alphabetically ascending. Click it again and it is a descending sort.

6) Peek inside

In our recommended readings page we have a limited number of selected books. By selecting a book and choosing details, you get more info about that book. If you need to peek inside the book, the bookcover image transfers you to Googles book search. Here you can preview selected pages. On the right hand side near the bottom is a search box for an internal search on this book. If we type yogurt4 we get the occurrence of every page that has the word yogurt in it.

7) RSS what?

Our in the news feature is a headline link list of popular press articles on food for health. These are extracts of Really Simple Syndication (RSS) feeds from news sites posted in HTML format. A daily post and posting from the past 3 weeks are displayed on the page. A complete listing of all postings is on del.icio.us5. News articles are tagged by their health benefit.

8) Casting the net

We started podcasting some of the the articles back in June. We have three so far with more coming. The most popular is on green tea6. Presently, we posted a screencast (a digital recording of computer screen output) for this article.

9) Stay on top -search overlay

Similar to yahoo news search, we have implemented a search of related articles where the search page overlays the existing page. Presently, this is only implement in ths article with the coding from ibegin7

10) Going to print

Before I leave you I just like to point out our print feature. When you print an article from Medicinal Food News , it only prints the relevant stuff ie no menus or ads or banner. Here’s what a print preview would look like.

Other articles on new look §

< previous | index | next >

External Link Index 1 - http://leftjustified.net/site-in-an-hour/site/
2 - http://64.233.179.104/translate_c?langpair=en%7Cfr&u=http://www.medicinalfoodnews.com/vol10/2006/top_10_features
3 - http://scholar.google.com/scholar?q=hrt
4 - http://books.google.com/books?id=0pHBOjhq_P4C&pg=RA3-PA29&lpg=RA3-PA29&vq=yogurt&sig=xKI-_hRo23Vv9KTUunPk6tN_ZUM"
5 - http://del.icio.us/bryanm
6 - http://odeo.com/audio/1102301/view
7 - http://www.ibegin.com/blog/p_ibox.html