Feel like look-and-feel finally set
Wednesday, May 12, 2010 at 2:48PM
Thomas P.M. Barnett in About the blog, What's Tom Up To?

The tale goes as follows:

I start with the "empire" template (don't even comment on that . . .) and first thing I do is create the banner in PPT, using the map, the two globes figure and my fave portrait of me.  Going back to layout design, I decide for wide main column sided by two nav bars where I'll put all widgets (search, archives, Twitter, etc), and top nav bar under the header.  I saved original banner as tiff file (mistake) and eventually shifted to PNG with help of Bradd Hayes.  Over time I cut the pixel width down to 800, which is max size suggested by Squarespace for any web image.  Original one was 1248, and I think the size was mucking up some presentations for people (hoping that's fixed).  I made everything originally to fit my big iMac screen, but now have it shrunk down to point where it comes up on my 13" MacBook with about 1 inch grey margins on each side.  Looks good also on my smart phone (BB Storm).

When I get banner down to 800px today, it was aligned left on page and looked off-center.  After a support ticket query, I was able to center by maxing the internal pad on the left, and then maxing the border and making both the same color, which I approximated to match the bulk of the landforms in the map on the right.  The border approximated the blue ocean on the globes.

Once I got the basic look and feel of the front page set, I imported the old blog.  By doing so, I automatically created a "journal" (blog) inside the site.  When I started making up new posts within the site, I unthinkingly created a second journal.  I have since merged them so the archives would be whole--and singular.  I did this by reclassifying the 50 or so posts as belonging to the larger, archived blog journal, and then I renamed that "globlogization" (it was originally called "imported-20100505########/"--a truly charming URL).  I have since created two additional "hidden" journals (not appearing on the top navigation bar):  one for my Blueprint for Action htm-pages-turned-now-into-simple-posts and one for my Naval War College project pages-now-being-turned-into-posts.  I will likely create one for media, the New Map book, and ultimately for Vonne's poetry (which I made into a series of hidden pages).  Ultimately, I want as few pages as possible and to put as much as possible in hidden journals.  Size doesn't matter much here (except in pricing) because it's all cloud computing (for example, all of my old images are now stored in this manner).

Style-wise, I did make almost everything too big at first (some complaints), which--again--was superb on my big-screen iMac at home but bad on my small laptop.  Scrunching things down a bunch, I've now decided on 16pt text for the body, 14pt for all links (a compromise, because I'm simultaneously sizing the ones in the navigation bars and the posts' body), 28pt for post titles and most everything else (small stuff on margins) 12 pt.  Only two fonts used:  Times New Roman for titles and section headers and Lucida for everything else.  Putting the banner aside, only five colors are used (besides the background white):  

 

  1. True black for top nav bar background, Twitter background, day banner background and basic post text
  2. A dark, navy-ish blue for post titles
  3. A slightly purplish blue for all links, date-stamp on posts and sundry post details at bottom, plus all borders and underlines and dark backgrounds
  4. A dark grey (matching for side background panels) for all highlighted (and backgrounded) text.
  5. An off-white for all text that's highlighted by dark backgrounds and for all light backgrounds.

 

So, basically black, white, grey and blue--sticking with the empire template but altering the colors slightly and then making them uniform throughout (amazing how many little formats you have to alter for true consistency throughout).   So if you forget the extra color in the banner and stipulate that you'll have black and white as basics, the site is really blue and grey, my two favorites colors.

Actually, come to think of it, my entire dress wardrobe (setting aside ties) basically equates to the site's color scheme, right down to the rare use of the tannish brown.

Once I figured out how to do backgrounds for the quoted text, I ditched the terrible idea of italicizing them instead.  I really prefer a light color background, especially when you excerpt at length.

So, that's my story and I'm sticking to it--unless my Aunt Mary still has problems reading the blog on her WebTV, but I'm hoping that's fixed now that I got the banner down to max suggested width.

Article originally appeared on Thomas P.M. Barnett (https://thomaspmbarnett.com/).
See website for complete article licensing information.