A list of short Design, Communication, Innovation Book reviews

Author	Title	Ranked	ISBN
Wolf Schneider	Deutsch für Profis	*****	3442161754
The best book on good writing I know. Highly entertaining. German.
Donald A. Norman	The design of everyday things	*****	0465067107
This is THE insightful classic about design that works for humans. Affordances, making things visible, mapping, conceptual models, feedback, constraints and forced functions, and lots of beautifully obesrvant little examples.
Steve Krug	Don't Make Me Think	****	0321344758
A blissfully well designed book about web interface design, slim, with a bucketload of useful tips, and entertaining to boot. Covers how to set up a cheap usability testing rig, too.
William Strunk Jr. and E. B. White	The Elements of Style	****	020530902X
This is a classic little gem on how to write good English. The German 'Deutsch für Profis' is better, better structured, more detailed, and cites more powerful examples, however.
Roger von Oech	A Whack on the Side of the Head	***	0446674559
The best way to get a good idea is to get a lot of ideas (L. Pauling). This book tries to make you more creative. The premise is: mental rut blocks your creativity. Here are ways to breach it: 1. Find the second right answer. It might be better than the obvious first one. 2. Brainstorm, forget about logic, imagine and associate. 3. Play. 4. Explore into areas where you are not a specialist, if you have a trail leading there. 5. Break rules. Chances are, there is no good reason for them anymore. 6. Allow ambiguity. 7. Do not be afraid of errors. Learn from them, and improve. Finally, judge and organize the results of your creative process. If you came up with a good idea, put work into it and fight for it since everything new will hit a wall of opposition. This book is chock full of nice quotes, with Heraklitus' aphorisms at the end.
Isabel Garcia	Ich rede	***	3981284909
It probably does not have to be this one, but you should read one book on communication. A book on rhetoric also would be useful. Being able to communicate well is fundamentally helpful in so many ways, the time invested here is probably better invested than any reading of technical or management books. The most helpful advice I took from this was: 1. Do not interrupt. It is rude and offensive. 2. Speak slowly. Reduce what you want to tell, but don't rush trough it - you would not say 'I love you' quickly, nothing important should be rushed. 3. Use silence and pause, so your listeners have time to digest what you said, and believe that you took time to consider what they just said. It also gives them a chance to talk or say something else. 4. Breathing deep may help ground you before public speeches.
Gene Zelazny	Say it with presentations	***	0071472894
Zelazny was the guy at McKinsey responsible for presentation training. This book about holding a presentation and is presenting it's material surprisingly bad. The most interesting point for me was that you should present your take home message first, the evidence later. Much of the rest is about soft areas like using humor, and the advice is wish-wash, a la 'Use humor when it fits; Use humor that matches your personality'.
Wolf Schneider	Deutsch fürs Leben	***	3499196956
50 rules for good, understandable and interesting writing. Solid. Not as good as his excellent 'Deutsch für Profis' by splitting the smaller number of real rules arbitrarily into 50.

CSS

Using CSS is a clean way to separate the formatting of your web pages from the logical content, which is written in html paragraphs and headings.

Including CSS information

You can include CSS stylesheets in three major ways:

• You define them in an exterior CSS file, and include it with the line <LINK REL=STYLESHEET TYPE="text/css" HREF="your/url.css"> in the header. This helps you to get a consistent style in all your pages, by including a single line. The URL can be fully qualified to a css file somewhere on the web, so you do not need to worry about relative paths.
• You define the style for the page in the head section of the page. Enclose it in a multi-line comment for older browsers. This approach has the advantage that you do not need access to a separate CSS file, but only helps you get consistent style for one page:
  <style type="text/css">
  <!-- /* ... Style-Sheet-Directives, eg */
  p.nice { font-family:font- familiy:"Century Schoolbook",Times,serif; }
  p { font-size:10pt; }
  //-->
  </style>
• You define mini-style sheets for single elements, with the STYLE attribute. If you don't have an element for your text, use the SPAN pseudo-element (which doesn't linebreak like DIV does): <SPAN STYLE="color:#FF0000">Like this!</SPAN>

CSS syntax

If you define styles in the head or a dedicated CSS file you have to define which elements to format. The syntax is simple: you just name the lowercase element name, or a comma separated list of them, and, enclosed in braces append the semicolon separated list of name:value pairs. If there are several values for a name, separate them by comma. You can quote strings with spaces with quotation marks. It doesn't hurt to append a semicolon after the last name:value pair. For example:

p, th, td { font-family:"Courier New",Courier,monospace; font-size:10pt; }

Often you do not want all your paragraphs or table cells to look the same way. For this, you can define subclasses, by following the element name with a dot and a subclass name you invent, for example:

p.emphasis { font-family:font- familiy:"Century Schoolbook",Times,serif; }

Then, you identify the elements to which this applies with the matching class attribute, for example:
<p class="emphasis">I promise nothing but blood, sweat, toil and tears</p>

If you leave out the element name, you define a general style open to any html element, for example:

.weeny { font-size:6pt; }

When formatting single elements with the STYLE attribute, you do of course not need the tagname or the braces. It's clear you refer to just that element.

IDs and classes

In addition to the class attribute, there is also an ID attribute. IDs are defined using a hash symbol instead of a dot, (like #myid). If an html element is given (like p#myid), then the ID is defined only for this element type. The element to use this formatting is then designated with the ID attribute, e.g.

<p ID="myid">.

What is the difference between the id and the class attribute in html elements for CSS? The id attribute is supposed to be used for elements that are unique in the page, appearing only once. Because of this, it is typically used for div sections that  that occur only once each per page, like navigation bars, sidebars, main text area. The class attribute is supposed to be used for elements that show up multiple times. That being said: if found that browsers uncomplainingly render multiple elements with the same ID attribute, and it is shorter to type.

Borders and colored areas

Styles make it possible to draw borders around a paragraph or tint it's background without having to resort to a table. This is a demonstration of setting the padding between Border and the Box representing the elements content to 10 pt (note there is still space between element content and border). background: yellow; border-color: black; border-style: solid; border-width: medium; padding: 10pt;

Free positioning of Elements on the page

Width together with position can be used to format columns (instead of blind tables). Caution: long words take precedence over width! Use float:left to make text flow around and have the element to the left or use float:right. Default is no float. Normally, the last elemet in the source prints over the ones before. With z-index: you can change that (the higher value, wins the front, works for absolute only!):
float:left; border:none; background-color: #AAEEFF; position:static; width:320px; padding: 5pt;

To position elements you define a DIV element, to which formatting is applied, and enclose your paragraphs and so on in it. position:absolute can be used to absolutely place the box on the page (at top: and left: pixels or cm from the upper left corner. position:relative does this in relation to the last element before and position:static is like a normal sub and is default (but you can use the width-tag).

Here a DIV <div>...</div> has been defined, formated with the following values:
z-index:1; border:none; background-color:#EEEEFF; padding:5mm; position:absolute; top:2090px; left:90px; width:360px;

A second DIV area in front the other one because the Z-Index is higher - independend of the order they appear in the HTML source:
z-index:2; background-color:#FFEEDD; position:absolute; top:1000px; left:400px; width:260px;

Webcolors

steelblue  steelblue  steelblue 4682B4  royalblue  royalblue  royalblue 041690  cornflowerblue  cornflowerblue  cornflowerblue 6495ED  lightsteelblue  lightsteelblue  lightsteelblue B0C4DE  mediumslateblue  mediumslateblue  mediumslateblue 7B68EE  slateblue  slateblue  slateblue 6A5ACD  darkslateblue  darkslateblue  darkslateblue 483D8B  midnightblue  midnightblue  midnightblue 191970  navy  navy  navy 000080  darkblue  darkblue  darkblue 00008B  mediumblue  mediumblue  mediumblue 0000CD  blue  blue  blue 0000FF  dodgerblue  dodgerblue  dodgerblue 1E90FF  deepskyblue  deepskyblue  deepskyblue 00BFFF  lightskyblue  lightskyblue  lightskyblue 87CEFA  skyblue  skyblue  skyblue 87CEEB  lightblue  lightblue  lightblue ADD8E6  powderblue  powderblue  powderblue B0E0E6  azure  azure  azure F0FFFF  lightcyan  lightcyan  lightcyan E0FFFF  paleturquoise  paleturquoise  paleturquoise AFEEEE  mediumturquoise  mediumturquoise  mediumturquoise 48D1CC  lightseagreen  lightseagreen  lightseagreen 20B2AA  darkcyan  darkcyan  darkcyan 008B8B  teal  teal  teal 008080  cadetblue  cadetblue  cadetblue 5F9EA0  darkturquoise  darkturquoise  darkturquoise 00CED1  aqua  aqua  aqua 00FFFF  cyan  cyan  cyan 00FFFF  turquoise  turquoise  turquoise 40E0D0  aquamarine  aquamarine  aquamarine 7FFFD4  mediumaquamarine  mediumaquamarine  mediumaquamarine 66CDAA  darkseagreen  darkseagreen  darkseagreen 8FBC8F  mediumseagreen  mediumseagreen  mediumseagreen 3CB371  seagreen  seagreen  seagreen 2E8B57  darkgreen  darkgreen  darkgreen 006400  green  green  green 008000  forestgreen  forestgreen  forestgreen 228B22  limegreen  limegreen  limegreen 32CD32  lime  lime  lime 00FF00  chartreuse  chartreuse  chartreuse 7FFF00  lawngreen  lawngreen  lawngreen 7CFC00  greenyellow  greenyellow  greenyellow ADFF2F  yellowgreen  yellowgreen  yellowgreen 9ACD32  palegreen  palegreen  palegreen 98FB98  lightgreen  lightgreen  lightgreen 90EE90  springgreen  springgreen  springgreen 00FF7F  mediumspringgreen  mediumspringgreen  mediumspringgreen 00FA9A  darkolivegreen  darkolivegreen  darkolivegreen 556B2F  olivedrab  olivedrab  olivedrab 6B8E23  olive  olive  olive 808000  darkkhaki  darkkhaki  darkkhaki BDB76B  darkgoldenrod  darkgoldenrod  darkgoldenrod B8860B  goldenrod  goldenrod  goldenrod DAA520  gold  gold  gold FFD700  yellow  yellow  yellow FFFF00  khaki  khaki  khaki F0E68C  palegoldenrod  palegoldenrod  palegoldenrod EEE8AA  blanchedalmond  blanchedalmond  blanchedalmond FFEBCD  moccasin  moccasin  moccasin FFE4B5  wheat  wheat  wheat F5DEB3  navajowhite  navajowhite  navajowhite FFDEAD  burlywood  burlywood  burlywood DEB887  tan  tan  tan D2B48C  rosybrown  rosybrown  rosybrown BC8F8F  sienna  sienna  sienna A0522D  saddlebrown  saddlebrown  saddlebrown 8B4513  chocolate  chocolate  chocolate D2691E  peru  peru  peru CD853F  sandybrown  sandybrown  sandybrown F4A460  darkred  darkred  darkred 8B0000  maroon  maroon  maroon 800000  brown  brown  brown A52A2A  firebrick  firebrick  firebrick B22222  indianred  indianred  indianred CD5C5C  lightcoral  lightcoral  lightcoral F08080  salmon  salmon  salmon FA8072  darksalmon  darksalmon  darksalmon E9967A  lightsalmon  lightsalmon  lightsalmon FFA07A  coral  coral  coral FF7F50  tomato  tomato  tomato FF6347  darkorange  darkorange  darkorange FF8C00  orange  orange  orange FFA500  orangered  orangered  orangered FF4500  crimson  crimson  crimson DC143C  red  red  red FF0000  deeppink  deeppink  deeppink FF1493  fuchsia  fuchsia  fuchsia FF00FF  magenta  magenta  magenta FF00FF  hotpink  hotpink  hotpink FF69B4  lightpink  lightpink  lightpink FFB6C1  pink  pink  pink FFC0CB  palevioletred  palevioletred  palevioletred DB7093  mediumvioletred  mediumvioletred  mediumvioletred C71585  purple  purple  purple 800080  darkmagenta  darkmagenta  darkmagenta 8B008B  mediumpurple  mediumpurple  mediumpurple 9370DB  blueviolet  blueviolet  blueviolet 8A2BE2  indigo  indigo  indigo 4B0082  darkviolet  darkviolet  darkviolet 9400D3  darkorchid  darkorchid  darkorchid 9932CC  mediumorchid  mediumorchid  mediumorchid BA55D3  orchid  orchid  orchid DA70D6  violet  violet  violet EE82EE  plum  plum  plum DDA0DD  thistle  thistle  thistle D8BFD8  lavender  lavender  lavender E6E6FA  ghostwhite  ghostwhite  ghostwhite F8F8FF  aliceblue  aliceblue  aliceblue F0F8FF  mintcream  mintcream  mintcream F5FFFA  honeydew  honeydew  honeydew F0FFF0  lightgoldenrodyellow  lightgoldenrodyellow  lightgoldenrodyellow FAFAD2  lemonchiffon  lemonchiffon  lemonchiffon FFFACD  cornsilk  cornsilk  cornsilk FFF8DC  lightyellow  lightyellow  lightyellow FFFFE0  ivory  ivory  ivory FFFFF0  floralwhite  floralwhite  floralwhite FFFAF0  linen  linen  linen FAF0E6  oldlace  oldlace  oldlace FDF5E6  antiquewhite  antiquewhite  antiquewhite FAEBD7  bisque  bisque  bisque FFE4C4  peachpuff  peachpuff  peachpuff FFDAB9  papayawhip  papayawhip  papayawhip FFEFD5  beige  beige  beige F5F5DC  seashell  seashell  seashell FFF5EE  lavenderblush  lavenderblush  lavenderblush FFF0F5  mistyrose  mistyrose  mistyrose FFE4E1  snow  snow  snow FFFAFA  white  white  white FFFFFF  whitesmoke  whitesmoke  whitesmoke F5F5F5  gainsboro  gainsboro  gainsboro DCDCDC  lightgrey  lightgrey  lightgrey D3D3D3  silver  silver  silver C0C0C0  darkgray  darkgray  darkgray A9A9A9  gray  gray  gray 808080  lightslategray  lightslategray  lightslategray 778899  slategray  slategray  slategray 708090  dimgray  dimgray  dimgray 696969  darkslategray  darkslategray  darkslategray 2F4F4F  black  black  black 000000

Homepage design

All I know about home page design I learned from Philip Greenspun, Eric S. Raymond and Steve Krug.

Your page has to be interesting, and the way to do this is: content. Keep the design clear, white background, black ink, blue links. It's tiring to read on dark backgrounds. People are used to blue fresh links and magenta visited ones, so no need to puzzle them with other colors. Nothing is more annoying than a slow loading page full of unneeded images. Keep them to the neccessary minimum - you need some, or the pages look monotone and boring. Use stuff like frames and JavaScript sparingly, only to improve the handling of the page, not to satisfy your play instinct. No flashing stuff. No dead links. No "under construction" sign, every homepage is always under construction.

Use familiar navigation, like a breadcrumb trail, a tabbed menu or side menu, search (with a friendly search button), and if you want other tools like a site map. Navigation and content areas should be clearly separated graphically. Name links after the pages they link to, and have a heading on each page that tells what the page is about.

All of the drawings are my own and were drawn by hand. Usually I use a 2B pencil and a Pelikan Stabilo point 88 fine 0,4 black fineliner on normal copy paper, but some are done with color pencils or ballpoint pens also. None of them were done especially for this homepage, they were just sketches I made during role-playing sessions and such. The drawings are scanned on a bland flat bed scanner. I use The GIMP for working on them, unwilling to shell out for using Adobe Photoshop.

Blogger Version

In 2012, in the age of blogging sites crammed with gadgets and editable from anywhere you are, there was much less justification to maintain an own server for the homepage. So, while I had to retire a few features like bibliography pages dynamically generated from a Bibtex database, I moved to a hosted solution at Blogger, adding individual pages I had as posts. No more coding on this homepage for me. (If I had to do this again now in 2017, I probably would do it on Wordpress.)

I did want to maintain the overall navigation, with pages dedicated to the different areas of interest, showing an index of the posts for that topic. This is not supported by Blogger directly. The common approach to do topic pages is to label your posts, and then define pages as URLs that run a label search, like the following:

http://bioinfoxy.blogspot.com/search?q=label:essay+label:management

which will list out all the posts matching the given labels. However, this does not allow you to customize the content of the resulting page layout, and the posts are dumped in their entirety, without a way to just list the titles as an index.

To get around this, I originally used yahoo pipes. Since they shut down in 2015,  I switched to feed2js.org. You can generate an RSS feed for posts with given labels with an URL like this:

http://bioinfoxy.blogspot.com/feeds/posts/default/-/essay/management&alt=Rss

(add the parameter max-results, if you want more than the default number; I only need that for the table of contents index). Paste your feed URL into feed2js, select how you want the output to look like (in my case, title list only), and copy the resulting javascript snippet into your page where you want the index to appear. Voilá, dynamically generated index pages.

Original Version

What follows is a trip down memory lane, about the way the page used to be built.

I originally designed my pages by hand in HTML and a text editor. Apart from very few exceptions, all the HTML has been written by hand using just SELFHTML and some O'Reilly books. No fancy hompage-design tools, just the text editor. I used GNU Emacs which comes with a built-in HTML mode that does formatting, syntax highlighting, tag completion and other stuff. And it'll do the same for your favorite programming language. Homepage design environments are also good and speed you up, saving you the nitty gritty positioning and table stuff. They also tend to use less deprecated tags, and tell you which attributes you can use with which tags up front. NetObjects Fusion even lets you choose if you want your formatting done with nested tables or with CSS, and chose which pages to publish - pretty impressive. So maybe it would be worth to trade control for convenience.

I used Linklint, a free Perl script, to check my pages for dead links. It's amazing how fast links turn stale. Using a blogging site like Blogger is by far the most convenient way I know of for keeping up a "What's new" log - or any other kind of log. It's easy, comfortable, you can reach it from everywhere, and it's completely free.

The most interesting parts of my page from a technical point of view were the navigation bars. Since my page had to run on any hosted platform (like STRATO, which did not support PHP or SSI at the time), I could not rely on server parsed html or rewrite rules, like I could if I ran my own server, to inline stuff. Also a database back-end and CGI-Perl scripts were out of reach. So the page was produced via perl scripts from my internal version of the page, which pre-calculated all the relative paths and did the inlining.