Google does the right thing about the Blogger Nav Bar

It's a time for rejoicing, not only in less sketchy CSS code needed but also in the reaffirmation of Google's intentions for us: it wants us to use its software, even if others don't know we're using it.

So now, let us bid farewell to all that is old and broken:

Now, we can chill out and work with this:

"Will Be Added Soon..."

Just don't do it. Don't make someone think something's there, then try to open it, and revise their idea of its status. If it's not there, just let it be not there.

This is the backwards way that many people add content to a site:

1. Make the section.
2. Make the content.
3. Add the content to the section.
4. Adjust the section to match the content.
5. Rewrite the content.

Do this instead:

1. Write all the content and get the pictures together, and do it on a page that's hidden from public view.
2. Publish the page and content.
3. Link to the page and content.

If it really needs to be expressed that something is in the works, then it warrants a blog/news post.

Make your Blogger Tabs more robust with CSS

Whenever I set up a horizontal set of tabs under a header for a Blogger site's menubar, I want to be able to tell those tabs to center themselves, and be about the same width as my blog's header.

A few things tend to get in the way:

• Blogger won't just let you center the tabs with a setting.
• When the page displays with fonts other than the one I'm specifying as the preferred font, the differences in sizing can widen the tabs and make them wrap to the next line. It reminds me of those awful Windows 95 control panels!
• Even if you force them not to wrap, they get clipped by the edge of the list container!

So here's some CSS to fix those things:

.tabs .widget li, .tabs .widget li {float: none; display: inline;}

.tabs-inner .widget ul {

text-align: center;

white-space: nowrap;

overflow: visible;

}

By making the list items show up as inline objects instead of floating ones, we can force them to act like words in a sentence instead of like blocks, and that allows us to tell them not to wrap. If we don't tell them that they're words instead of list items, then we can't tell them to obey our wrapping commands.

The most basic site layout ever - maybe it should be used more often?

How do you make a site without really having to make a layout or a navigation system? Just by having your index or mainpage as the navigation page. This is one of those options that's fallen out of popularity, but shouldn't be forgotten about.

You could make a really simple, easy-to-navigate, usability-oriented and standards-compliant site ever like this:

1. Organize your information into an outline as in the other day's post.
2. Put your outline in as the index page, arranged in columns using CSS so all the information can be on one front page with brief text explanations of the content where appropriate. Either through the subsection headers or a single info paragraph and logo, the purpose of the site is summarized. Each link takes the user to its page, and each page has links to the site index so that incoming users can find the index page.
3. Differentiate between in-site and off-site links.

Benefits:
Users get an immediate look at not only the types of information on the site, and by showing them nested menues all at once, they can understand the depth of detail in each section and don't have to click around as much.

Google's Blogger Template Designer + Chrome: The love, the love, the love

Guess what folks? Web design has changed again. This time it's for the better.

RIP (gradually):

• Dreamweaver
• Coda
• FTP

Don't worry, long live: HTML & CSS.

Hello and welcome to my new favourite web publishing environment:

• DOM inspector with editable CSS + preview
• Blogger Template Designer

Here's how you (ANYBODY) make yourself a website from now on:

1. Get Google Chrome.
2. Start a Blogger Blog.
3. Use the Template Designer (pictured above) to pick a template, background images, colours, fonts etc.
4. If you know CSS, right/ctrl-click on something you want to change, and pick "inspect element."
5. Because you're in preview mode, Blogger will select the "clicktrap" thing. Make it go away by unchecking the "height: 100%" or something on the right. Now you're free.
6. Do it again: right-click on whatever you want to change, use the DOM inspector to select what you want to select, then try double-clicking on one of the CSS attributes. It will apply your edits in the browser! If you double-click just to the left of the attribute list, it inserts a new property or whatever it's called, and you can throw in a new value. So you can preview and code CSS at the same time.
7. When your CSS for that element is perfect, go to "add css" at the bottom of the list in the "advanced" thing in the Template Designer, copy and paste the selector of the element you're editing, and copy and paste the CSS from the DOM inspector!

This changes the price point of basic websites! Now they're actually affordable to the people who need them made. This is a big turning point in cheap websites.