OFPv2 Redesign Notes
Orange Frog Productions hasn't undergone a total rewrite
since I first built it in February, 2003 (Why mess with
perfection?
. <-- That there's a joke, son.) For some time I was
actively looking for job, then had a knee "blow out" (my term),
spent most of my time after that doing family history (genealogy)
research, had a few other problems with my feet, got married
(see Owner Section for more on all of this),, and recently began adding pages which appear
to be used by a number of people from all over (in the
Scams, Shams and
More Flim-Flams section).
During my redesign, I wanted to do and try more than I have before. I also wanted to make this site more accessible, especially since so many people are actually researching those scams, et al.
(WARNING: The following contains Technical Content)
Many of the changes are "behind-the-scenes", though you might notice that the background is a LITTLE brighter. (It IS hard to tell without them being side-by-side... THIS is the original main content background color.) I think the brighter background makes the text easier to see, don't you?
Among other changes:
- I've (obviously, for those who've been here before) split the site into three sections (Main, Owner and Scams, Shams and More Flim-Flams) and added a subweb (LYAO-Online Subweb New Window).
- I've made, I believe, better use of
HTML
divs to separate the page into
distinctive parts. Most pages have a container, two columns
(sidebar and main-page), and each of
those are split into three sections (top, middle, bottom):
- Sidebar Top holds the navigation (site section) buttons you see on the top left. Each button is simply a paragraph.
- Sidebar Middle is transparent. To make the sidebar and main-page container the same size, they are defined as huge. However, the Sidebar Bottom buttons would not "shift down" to the bottom correctly. When tested, if they did, because of the size, they were WAY off the page. This div was designed to provide a blank space between. It will most-likely only be used for such.
- Sidebar Bottom holds images and buttons for a few of the 3rd-party items used in the site.
- Main-page Top holds two (2) divs, one for the banner and any other words I may put there, and the other for the breadcrumbs (see below)
- Main-page Middle holds the page content. Individual pages may have various divs within this section.
- Main-page Bottom holds two (2) div, one for the navigation linkbar and one for the copyright information. The copyright info section also contains a page-counter from www.sitemeter.com.
- If you'd like to see the test documents I used to put everything in the right place:
- I've removed almost all tables used for formatting from this site. There will, I'm sure, be some (one I can think of right off the bat may be the "What's New(s) page"), but most formatting will now be done with divs.
- I've replaced the page-top linkbar with a set of manually edited (per page) "breadcrumb" links that in some places (and even here) show you where you are on the site. If you enter the site via a link, directly to a certain page, the "breadcrumbs" will show you, logically, the section, subsection and (if necessary) division of the site of the page displayed. Each of these "breadcrumb" links will open the "main" page of the section/subsection/division shown. "Home" is the site's Home Page.
- Almost all text on this site is "scalable" using Control-Mousewheel (if you have that type of mouse) or by adjusting the text-size. (In Microsoft Internet Explorer, this is under the View menu). NOTE: If you change the text to the largest size, the word "SECTION" in the sidebar buttons pushes the edge to the right. Originally, it overlaid the first few words on each line in the content section, but I've changed the "layer" level so the sidebar will slip "under" the main content. All buttons still work, and you should be able to tell what they are.
- I've defined a large number of styles and formats in my CSS. I DO plan to use most, if not all of them, and hopefully, I've named them generically enough (I did not use many "semantic" names - those named for the sections. Most of mine are named for the item they modify) I should be able to use them anywhere on the site.
- I will not be using the
HTML
blockquotetag to indent text. This will be handled by indented divs on this site. - I've used SSIs (Server-Side Includes) on this site, rather than Javascripts to add various non-content parts of the page: the sidebar buttons (top and bottom), the banner, the linkbar and the copyright notice.
- I still use Javascripting to set up my email address, for the page title in the breadcrumbs, and for the Page Modified Date (copyright notice); but it's internal to the page, and therefore, hopefully, will not cause those "scripting warning" errors, where you had to click the bar at the top of the page to allow the scripts to run for the site.
- Oh, and one more thing. You may have noticed (and rolled your mouse over) some oddly marked (dotted underlines) links, especially on this page, that do not change color - they change the cursor to a question-mark. If you leave the mouse on the thusly underlined term for a second, a "tool-tip" will appear (much like rolling your cursor over the buttons at the top of your browser does) showing you the expanded name of abbreviations and acronyms, and a short definition (or a "Click for Glossary Entry"). All of these term and their definitions (at least my version of them) may be found in the Site Glossary simply by clicking the term. NOTE: Newer pages may not contain many (if any) terms or abbreviations that should be defined this way. Give me another day or so, and check back. If I miss any, let me know. I may have "overdone" it with these, but then again, to make the site accessible to as many as possible ...
That about covers it. I hope it wasn't technical or "too dry" for you to take. If you see something on the site that's different and that you believe should be here, let me know.
Send email to Bill Sanders
()
with questions or comments about this page or site.
This site, all text and graphics (unless otherwise noted) on it
were designed, developed and published by Bill Sanders of Orange Frog Productions.
It and it's CSS was validated and complies with both the:
CSS and
HTML 4.01
validators from W3C.
NOTE: All CSS validates except the "New Window Buttons"
- Their CSS includes some invalid code (ie: hacks)
and warnings for using transparent backgrounds when color foregrounds defined.
Copyright © 2003, 2004, 2005, 2006 by Bill Sanders / Full site last modified: July 10, 2006
![Welcome to Orange Frog Productions [Banner]](images/main/ofp_banner_main.jpg)




