New Blog Design

While I'm not fluent in many other languages, sometimes lost in even english, I do know web code in the form of Javascript, CSS, and mostly HTML5 and XHTML.

Starting back when I still thought Myspace was hot stuff I reverse engineered the basics like embedding images, font colours, font sizing, line breaking and how to use tags.

Examples:

Example 1: using what I learned a couple years ago

Example 2: using what I've learned since 2008

Over time, after playing with Microsoft Frontpage and teaching myself I've figured out most of what I need to know to create a website, which I tried for a while but never kept it up.

I'll wait till I find a need then go to SquareSpace.

So when I decided to start using blogger as my primary blog I was unhappy with the layout designs they had went straight to the HTML template and reverse engineered it till I knew what was what and VIOLA! This my blog!

Now I've revamepd this a couple times, and if you're reading on Facebook or an RSS reader you're probably wondering what I'm talking about.

My blog, *\^_^/*, is hosted at "http://behindhungryartistsaku.blogspot.com/" and that's where I design my own style for the structure and colour. I prefer back end work to WYSIWYG editors or Moo Tools.

Anyway I spent forever trying to perfect this layout as far at the page structure goes, because that's the most important part besides a minimal (or over the top, if that's your thing) colour scheme.

You see, the standard blogger layout I think is like 700 pixels in width and, although that works for some people, that's not my thing. I like room for the picture I include from time and I'm just not a fan of thin web pages. I like to take advantage of at least 900 pixels of screen real estate. I often have Chrome open at around that width anyway.

But I understand that some people like to use some extra screen real estate for other things, as do I.

So, I work it out in the code to get the page structure to shrink with the window. That's easy.

Example:

#main-wrapper {

width:80%;

}

#sidebare-wrapper {

width:20%;

}

The results are simplistic and get the job done, however due the code involved in the original HTML template I based this one off of there were some issues.

As you shrunk the width of the page down the main wrapper would shrink as did it's contentswhile the side bar's contents ended up vanishing...

Yeah...

That took some more working out.

So finally after some trial and error and work out how to get it to shrink down properly. I also set a maximum width for the page at 1000 pixels so if the window maximizes the contents of the pages stops growing and stays on the right side of the window leaving a nice 280p of buffer space on the left side.

Go ahead, try it.

But anyway, I've also set the colour scheme to a more minimal dark and pink scheme which was easier set because I've gotten a handle on hexadecimal colour code.

I have to admit I got some inspiration from DestroyToday, Jonnie Hallman's blog, for it's minimalist and "easy on the eyes" dark design.

Anyway, enough geeking out, thanks for reading!