Introduction
For a long time I have needed to rework this front page, for its styling was a long time work in-progress, but stalled for lack of time.. The Superstition Amateur Radio Club site consumes much of my spare time. But I have an article on bowling scorekeeping that I wanted to share once I finally understood the art of scorekeeping in the game. It does not fit on an amateur radio-oriented site, so what better place to put it than here on my own site.
Then I have some Web styling ideas that will be discussed here, with each page serving as a demonstration of another style. There is also my favorite browser arrangement that I will share. That may take on another page.
Web design concepts on display
I have here three pages, each with a totally different style, an experiment with cascading style sheets and Web construction. Before we delve into the details behind each page design, I should touch upon some web design pitfalls to avoid:
Avoid clashing colors. I have encountered pages where someone used a very dark background with light-colored text. Except the links were nearly impossible to read in their default blue or purple color. Better to stick with pastel background colors and contrasting text colors.
Avoid using Internet Explorer as your test browser when building a page. Use instead a standards-compliant browser such as Mozilla Firefox instead, and THEN work out the issues you see in Internet Explorer. It's a damn shame that Microsoft is incapable of producing a browser users can be proud of before associating it with their brand. Either that, or they want to force their standards on the world. Regardless, Microsoft Internet Explorer always has been, and probably will be for some time to come an inferior browser.
You want to use the HTML Markup Validation Service at www.w3.org to ensure that your HTML is compliant before you start trying to figure out why your CSS (Cascading Style Sheets) is not working as expected. You also want to check against Safari for Windfows, Google Chrome and Opera to make sure they all see your work as intended. Oh, you need to be using at least HTML 4.01, XHTML 1.0 or HTML 5 for best results.
There are other standards-compliant browsers besides Firefox; I just know Firefox has some good web developer add-ons, and it comes standard with my version of Linux.
This page layout
This front page markup layout contains just two lines of text between the top of the page and the article heading, if viewed with styles turned off, and what you see at the top of the page with styles on is actually the last item in the unstyled page.. Put differently, if styles are turned off, the article starts right near the top, whereas, on many sites one must scroll down through a lot of links and such before the unstyled article appears. Those links are usually in the left column of the page, with the article positioned near the top of the page in the middle or right column via style sheets.
If my reader turns off the page style here, the page will fill the width of the browser window and words wrap on the right edge of the screen no matter how the zoom is used and no matter how wide or narrow the browser window happens to be.
It is said that the higher something is in the document, the more important it is seen to be to a search engine. This page should score well, for the actual article heading is just the third line from the top.
One improvement would be application of styles to the top navigation menu to make it neater. That and removing the style sheet from the head of the source and placing it in a linked style sheet is work to be done later.
A newspaper layout design
I have another layout that utilizes narrow columns and the total width of the page is two or three times the width of the screen. Use the horizontal scroll bar to scan all the different articles on the page, their headlines topping the story's column. Use the vertical scroll to read the story from beginning to end, then use a link to return to the top of the next column.
The page may not shift to the right upon return to the top if the next column is fully visible. Disable styles to make it a linear page, with each column's article following below the end of the previous column. Without styles there are no columns.
The bowling page's styles
This design uses a header, a footer and two columns in between. It is the style I designed for the club web site, the seed of which is from A List Apart. Their Example 4 template uses image files to ensure the two columns' background colors reach the bottom of the column, regardless of which column has the shortest text. I redesigned the CSS to avoid the need for image files many years ago. I was researching Google to see if I could find the article that links to this Example 4, so that I may cite it. Another work in progress.
By placing only brief links at the top of the document, to the navigation found on the right side panel and at the bottom, there again is minimal amounts of stuff above the article if the style is turned off.
Turning off styles in your browser
Since I have made several mentions of disabling styles, I should speak of how to accomplish that, at least in the Mozilla Firefox browser. Go to the View menu, find "Page Style" on the menu and click the "No Style" option. I'm sorry I am not familiar with other browsers' menus to be able to advise you of them.
Optimum Browser Setup
My idea of an optimum browser setup is to use Mozilla Firefox, and a series of add-ons that enhance the product. I will share my setup here.
First, it is sometimes necessary to accept cookies, including third-party cookies, in order for a site to work properly. Cookies issued by the site you are visiting are first-party cookiies, and may allow you to save log-in preferences or user settings for that site. Third-party cookies are those cookies inserted by other web sites, usually advertisers and affiliate or partner sites. A "third-party" is any site you did not specifically visit, but instead were shuffled off to then returned from in the background.
So, what I do is set Firefox to accept cookies for the session, third-party included, then erase them when I close the browser. This becomes the default action.
Next, I install the Cookie Monster add-on, which lets me deny cookies from a site, accept cookies from a site or perform the default action, set above. Neat thing is, I can configure Cookie Monster to dump all cookies from the site if I change that site's cookie permissions to "reject." Supposing I have a lot of forums that I don't wish to manually log in on each time I visit, instead I am already signed in. Each forum site is set to accept cookies until they expire. But my bank web site is causing issues, and they want me to "dump all my cookies." OK, I am set to accept cookies from the bank site, I just tell Cookie Monster to reject cookies from this site then set it again to accept cookies. Existing cookies for the bank site are deleted.
Next add-on I use is BetterPrivacy (words run together). This add-on will do away with the "super cookies" that Adobe Flash saves to the computer, and which are beyond the browser's cookie-handling realm. As I am running Linux, I have another option available to me, that is to locate the Flash folder which stores thes "Local Shared Objects," as tery are called, delete them by hand and then set the folder to be read-only through the Permissions property tab. No more saved objects and no need for the BetterPrivacy add-on.
Oh. There is one most important add-on, called AdBlock Plus. I was SHOCKED at the amount of crud I was seeing in flashing ads and pop-up and pop-under windows that came up when i visited the Web on someone else's computer, using Internet Explorer, the standard browser used on a Windows machine, because it's already there. AdBlock Plus is a free add-on, but not available for that browser, which does have some pricey alternatives.
I have just been so used to there being no ads in my Internet browsing, or at most, a very benign banner or two.
AdBlock Plus is available on most browsers, and really does clean up the Web browsing experience. AdBlock Plus does cut into the web site owner's ad revenue, and the developer has reached agreements with various web sites to permit less obtrusive forms of advertising to be displayed.