Design

HTML CSS and Graphics

If my old memory is correct, I never owned books on either HTML or CMS when I started on web building. Between free low-cost editors and on-line tutorials, I never needed them.

After several years, I wanted better understanding of such things as Layouts without TABLEs (using DIVs), adjusting style.css files, and web usability. Here are a few titles I own, with links to sources.

html-css

Designing Web Usability by Jakob Nielsen (Paperback Dec 30, 1999, Peachpit Press)
While everyone wants to design cool web sites, no one wants to think simple and consider whether the design actually accomplishes its goal, which is usually to sell, teach, or entertain.


Homepage Usability: 50 Websites Deconstructed by Jakob Nielsen and Marie Tahir (Paperback Nov 15, 2001, New Riders Press)
Collaboration of Nielsen, the accepted industry expert in Web usability, and Tahir, an expert in user profiling, has produced a guide practical benefit.

I value both Nielsen books as well as his on-line site http://www.useit.com/.


Here are some other titles I have found useful.

  • Pro CSS and HTML Design Patterns”, Michael Bowers, from Apress
  • The Principles of Beautiful Web Design”, Jason Beaird, from Sitepoint
  • The Art Science of CSS”, C. Adams, J. Bolton, D. Johnson, S. Smith, J. Snook, from Sitepoint.

These three include coverage of such topics as layouts without TABLES, fluid design, et cetera. For raw lookup references, standards, tutorials on HTML code, don’t overlook www.w3.org.

All three book titles are available from amazon.com in paperback, the first also in Kindle format. If you prefer to copy and paste, go to the publishers on-line for PDF versions. Your copies will use your purchase email as your password. On the other hand, the paperbacks are available at deep discount.

Bowers does a good job of explaining how layouts can be made with DIV, not TABLEs, even to having sections which float over each other if the browser window is shrunk.

html-css

Not too surprisingly, Beaird goes further into optimizing graphics to content than most webmasters will bother. On the other hand, he is an antidote to graphics designers who get entirely too caught up in look what I can do!

Snook et alii include the mysteries of making rounded corners, which I think receives way too much attention on the web. www.w3.org and browsers like Firefox are working on making that bit easier, for those who care a lot more than I do. But other issues are well worth reading or using as reference.

Blog Design, Design

Fixed Width HTML vs Fluid Web Layouts

In the bad old days, connection to computers usually involved keyboard and line printer or a typewriter. Then visual monitors were developed from CRT technology, which was crude by current standards. Initially, if my memory is correct, the Personal Computer came with monochrome 80 characters per line. IBMs first attempt at a color monitor for PCs was 40 characters wide, fat and ugly.

Soon came the 800 pixel wide monitor, then progressively higher resolutions.

Early web designs tended to assume 800 pixel widths. With newer monitors, designers often used fixed widths, with higher resolution screens wasting space. Then operating systems were made to recognize the current resolution of the attached monitor, with the option for page designers to auto switch to that current display width.

liquid

Possibly the majority of page layouts were made with TABLEs, dimensioned in pixels. With auto sizing, people learned to set widths in percent or em (equal to the point size of the current font).

Then HTML and CSS evolved to use DIV block elements, which also can use relative, instead of absolute, dimensions. Layouts could then be made with no use of TABLES. Design with DIV can be both more difficult and far more flexible. For example, DIV elements can be set with minimum pixel widths and heights, but no maximums. Also, DIVs can be stacked in the third dimension, so that decreasing the browser width can cause pieces to overlap in controlled fashion.

I have even stuck DIVs inside TABLE cells to set minimum dimensions. Images, if any, also set minimum cell sizes.

Other than cuteness, what is this good for?

1. Users have the freedom to adjust browser size and screen resolution, or change monitors.
2. Users can increase text size without overlap to graphics or other text. This can be a huge benefit to folks with tired and/or aging eyes.maxresdefault

The difficulties of making designs work with different browsers can be major, especially because Internet Explorer still does things differently from nearly everyone else. Fortunately, WordPress and most WP themes take care of browser differences by detecting which one is in use and switching code branches.

Thus, the webmaster using WP as a contact management system (CMS) can focus on content, and ignore most of what HTML designers had to cope with.

Blog Design, Design, Wordpress

How I Learn WordPress

I have seen many offers for how to WordPress videos. They are not my favorite thing. Heres why. I had already built some web sites in HTML, a few with add-on scripts for this or that function, by the time I took a hard look at blogs. However, the basic installation is well automated by the WordPress designers, whether you use an automatic installer provided by your web hosting company, or you get the source zip from wordpress.com and upload the contents to your web site.

goran-ss

Even if you have a built in fear of tech stuff, standard WP installation should not scare you. After the first time, the next ones are even easier.

Of course, doing things beyond the basics, to enhance site security or add custom pages takes a bit more effort, but such topics are seldom discussed in the how to videos.

I think videos are great for awesome entertainment, can be good for motivational (i.e., brainwashing) sessions, can have some value for teaching some subjects. For teaching web design and html code, I think the best medium is eBooks or HMTL pages which are not locked against copy and paste of words. Image inserts are quite adequate if visual aids really are appropriate. I hate video tutorials which lack text transcripts in printed or electronic form.

A recent example of a video tutorial took over 12 minutes to say what could be presented in a 60 word text paragraph. And I read about 20 times as fast as I can go through videos. Text files let me search for specific words, and to jump around, which videos do not.

For technical subjects, I also hate Kindle books and other eBooks which cant be opened on my computer. If video is the only available presentation of material, but still viewable on my computer, I open a text file so I can take notes. Unfortunately, some of the newer web videos lack pause/resume buttons.

If I have purchased an eBook which is locked against highlight and copy, I seek out unlocker programs. I don’t care to resell the authors work as my own, but I dang well believe I am entitled to copy parts into my text file.

Note that manual keyboard transfer of code from video or locked eBook into usable applications is very prone to error. It only takes one wrong character to kill it.soundboard-music-wordpress-theme

Often presentations on WordPress are just variations on typical Internet Marketing. Do as we say and make huge income. For such infomercials, vocal descriptions, perhaps with music background, can be a key part of convincing the viewer to send money. I have learned to be a skeptic and allergic to manipulation. In fact, if a web page tries to block me from exiting without signing up to a list, or chatting with a sales person, or any other hijacking of my browser, I will usually abort the browser. I most definitely will not buy.

New tech exit pop ups and pop unders can get past my browsers popup blocker, but I still control the power switch.

I admit that web pages and eBooks include some clear and compact tutorials for learning WordPress and other topics on building websites. I have even written a few of my own. But locking technical information inside videos with no transcripts is not really the best way to educate.