Wednesday 12 March 2008

Blog setup notes


Blog setup notes

Introduction

Please note that these notes are irrelevant to those who are only interested in standard diary-type blogs, which are really quite simple to set up.

I don't know of anybody else who has ever tried setting up a website within the Blogger framework. Remember that Blogger was intended for diary-type entries and was never intended to be used the way that I do. It's certainly tested my ingenuity. The result is not perfect but has its advantages and it certainly shows employers what I can do using only HTML and CSS. If I learn other aspects of web design, I'll incorporate them, too. In the event, I quickly realised that one giant blog would be impractical on a number of levels, hence I set up a series of blogs, each with a different theme. Many of these blogs have only a small number of pages, sometimes only one.

Coding philosophy

As a former computer programmer, I learned that technical wizardry is only useful if it works and if it is easy for somebody else with a reasonable knowledge of the coding language to understand. That also means that I'll understand it easily if I return to it years later and need to change it. As such, I am not impressed by those who use technical tricks or fancy code just for the sake of it. I try to keep things as simple as possible, especially as things always get complicated anyway. Building in unnecessary complications merely causes confusion. I won't use any aspect of HTML and CSS purely for the sake of it although I won't miss suitable opportunities to use as many aspects as possible. Thus, I haven't used frames (though I use iframes supplied by Amazon) because frames are generally more trouble than they are worth. However, if a situation arises where fancy code is necessary, I'll use it, but I'll support it with comments to explain what it does.

HTML tables - advantages and disadvantages

When web pages are displayed, the display normally appears gradually as it is downloaded, but tables work differently. When a table is being downloaded, nothing is displayed until the entire table has been downloaded. This explains why there are often long pauses followed by mass displays during page downloads. It also explains why some people disapprove of their use. However, HTML tables are often used for things that they were never intended for (but see next paragraph), while the alternatives do not always provide adequate replacements, especially when it comes to the kind of stuff that tables were actually designed for.

It is necessary to bear in mind that the vast majority of websites are designed using packages to generate HTML, such as Dreamweaver and FrontPage. These packages are very convenient but offer less flexibility, although some of them offer the chance to change the HTML after it has been generated. In practice, I suspect that very few users of such packages do this, except perhaps to make minor cosmetic changes. The main point to remember about these packages is that they often generate tables and most of the people using them, even if they are aware of this fact (and most aren't) don't understand the implications. Even if they learn, they often find that the packages offer no alternative way to lay out a page while still presenting an attractive appearance. I can't imagine anybody laying out a table using (say) Dreamweaver then re-writing it using HTML. Why bother with Dreamweaver or any other package if you're going to do that? However, by the very nature of these packages, they often use HTML for things that they were never intended for.

Because of the way that tables are displayed, they are particularly unsuited to displaying large pictures, which take a long time to download especially on old dial-up connections. As far as possible, pictures should be kept out of tables although I realise that this is sometimes easier said than done. If you have a lot of pictures to display and you don't know how to display them without using tables, you should at least try to limit how much you put in each table. It is better to have a lot of small tables than one giant table if pictures are included. In the worst cases, I've seen web pages where the entire page is set up as a table, so I sit in front of a totally blank screen wondering if something is ever going to appear. Sometimes, I abandon the attempt and that is surely not what the designer intended. Yes, tables can be a powerful tool if used correctly, but don't use them unnecessarily.

The big advantage that tables offer is that the software behind them is very reliable and copes well with a variety of window sizes. Tables are therefore ideal for displaying text and numbers, which don't take long to download even on old dial-up lines. With tables, re-sizing screens is easy - if an individual element (cell)
within a table has to be split over an extra line, all the cells within that row are allocated an extra line. With the alternative methods recommended to me, this does not happen. Of course, there are situations where you may want a mix of pictures and text. I'd need to carry out research into this before coming to any firm conclusions, but I can see that the quantity and size of the pictures would be a major factor.

My conclusion is that tables are great for displaying text and numbers but bad for displaying large pictures. None of my tables contain any pictures so I feel entirely justified in using them in my blogs. In a different situation, I'll look at other methods. Of course, if I ever get a paid job in which I have to create or maintain a website, I'll do the job according to orders. If an employer insists that things are done a certain way, so be it. If I haven't already mastered the techniques at that point, I hope that I'll get the necessary guidance, but I'm a quick learner. I've made clear my preferences as they are now. Future experiences - and software developments - may cause me to revise my preferences.

Fonts on screen

This is another contentious area. Some fonts that look attractive are not easy to read if there's a lot of text. Fancy fonts are great for special occasions like wedding invitations but don't work so well when there's several paragraphs. I prefer standard fonts and use a sans-serif font (Tahoma, Arial or Verdana) for displaying on screen.

Colors on screen

I'm not keen on white as a background color for screen displays. In some light conditions, it can cause too much dazzle. It works OK on Amazon because most of the pages don't have too much background. My pages (as I set them up on a website) have plenty of background so I tested various pastel shades before settling initially on pale yellow for screen displays. It has the advantage that it works well with the standard colors used for hyperlinks. However, I later decided that I wanted to use yellow rather than pale red for table detail lines, so I switched the background color to pale blue. In 2011, I decided to change the yellow table entries to pale green, as that goes well with the template I chose. However, I retained yellow for block quotes. Later that year, I set up some ancestry pages, one of which uses pale yellow stripes in a limited way, but pale green remains the standard.

I also don't like pale or bright text on a dark background as a main color scheme. On this blog, I've used bold white on a black background for captions. This provides (I think) a nice contrast, but I certainly wouldn't use white on black for large blocks of text even without the embolding. If I come across web pages that have a lot of pale or bright text on a dark background, I may paste the text into a word processing document and change the color scheme so that I can read it without eye-strain. Then again, I may decide that it's not important enough to be worth the effort, so I just won't bother.

One important thing to remember is that you are likely to look at your pages more frequently than anybody else does. It is therefore important that you set up a color scheme that you are comfortable with.

If you wish to explore colors further, it's worth looking at Bagism color maker. Alternatively, just google for HTML colors. If you are interested in shades of a specific color, you could instead replace the word colors by the specific color, such as HTML brown.

Printing

When I set up my original website, I set up a separate CSS file for printing. I cannot do this in Blogger. I can achieve the same effect by other means although it requires more effort, but see section on testing. Apart from suppressing my own navigation, I haven't bothered doing anything special for printing yet. Serif fonts such as Times New Roman are ideal for printing although they don't work so well on screen. Also, black typeface on a white background works perfectly on the printed page. I have set up some CSS to limit colors to screen only, and to print using a serif font, but not yet installed it on a live blog. I still have to work out how to limit printing to my own stuff without the extra Blogger stuff.

Tip - when you want to print text from a blog, it's a good idea to copy and paste that text into a word processing document and print from there. This means that you don't waste paper printing all the Blogger stuff or any images.

Testing

Because of the period I spent with a computer but no home internet connection, I developed a method of testing offline. I have a version of the standard style sheet at home that simply has a <STYLE> line at the start and a <STYLE> line at the end, but is otherwise identical to the one submitted to Blogger. This allows me to update pages offline, whether or not I have an internet connection.

It would be easy to create a version of this style sheet for printing Blogger pages how I want, but I haven't done this. Another way to achieve the same effect would be to create a private blog with a print style sheet, and copy any page I want into it, although that would still mean printing all the other stuff that Blogger generates besides my stuff. Actually, I very rarely print anything but I know that other people do, so I put these ideas out there anyway.

Style sheets used in this website

Those who are interested (and who have some knowledge of HTML and CSS) can more easily understand how I set up this blog originally on the page devoted to Blog template and settings.

No comments: