Jun 15, 2010

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.