Buddy Press is go

Today, I downloaded BuddyPress ( http://www.buddypress.org ) and spent a good chunk of the day trying to apply it to my existing theme on this website. I wasn’t very successful, but I learned a lot about BuddyPress in the process. Then, I found a page in the instructions that I should have read first that explained how to install it in a secondary site so that it does not affect your primary site.

Ten minutes later, I had BuddyPress up and running with its default theme on my server here:

http://brandonmoeller.com/bp/

Feel free to register as a new user and take the system out for a spin, and be sure to kick the tires.

The August redesign

The new BrandonMoeller.com launched quietly on Sunday. It was redesigned using the same color palette and, similar to its predecessor, was created as a child theme on top of the new TwentyEleven parent theme that ships as the default theme with the latest and greatest version of WordPress. I previously wrote about how much I liked the new TwentyEleven theme.

The static pages of the previous version are archived here:

http://brandonmoeller.com/old_design1107

Previous version

This is the previous design.

WHY I DID IT

Here’s an example of what my new responsive Hire Me page looks like when you adjust your web browser to a skinny sliver (or view it on a smart phone).

Smart phone view

The responsive style of this page was achieved with media queries and alternate content and style for thinner widths.

What really made me take the plunge and do the redesign was the responsiveness built into the new TwentyEleven theme, and the web standards community’s recent embrace of a responsive design philosophy, probably best articulated by Ethan Marcotte in his book, Responsive Web Design. His book was the first e-book I have ever purchased (it was cheaper than a physical copy!) and by the looks of the way things are going these days – it won’t be the last.

I’ll put the “responsive” philosophy in my own words here. Websites should look great on all devices, and by great, I mean you should be able to easily read the copy and see the crucial images and most importantly, use the website as it is intended to be used.

I think the new default TwentyEleven theme does just that, and I’m happy to develop my own style on top of it with a child theme I’m calling ….

Bmo Two 1.0.0 Child Theme for TwentyEleven Theme for WordPress 3.2.1 (Download it.)

WHAT CHANGED

I’d like to say not much changed, but the new background image and the desire to switch the body content of the page to white from the previous blue make the redesign look more involved than it really is.

iMac screen cap

This is what the new homepage looks on a 27" iMac, when the browser window is expanded to fill the whole screen.

I ditched the “about” page, because, you know. Who cares? (It was also getting depressing changing the age that I am every year on that page).

Besides, I’m not really who I say I am, am I? I’m who you think I am. And to that end, I want you to see a lot of pretty photos, and a lot of hard work and that way, you may draw the conclusion that I am blank or perhaps blank, or maybe even blank. But! I’ll let you figure it out … instead of me telling you.

Oh no, I’ve told too much. . .

So, with the redesign, I now have four items in my main navigation menu. “Home,” “Hire Me,” “Photos” and “Blog.”

For easier navigation, and to drive more traffic to them, I made the subpages of the “Hire Me” appear in the menu when one passes their mouse over it. This freed me from having to create a new navigation box on the subpages.

And now, all pages on the website are built into the WordPress system, the more elaborate of which like the main “Hire Me” page, were created by using WordPress page templates that I hand-coded.

I also removed most, if not all, of the Facebook integration. I might bring this back. Or, I might just integrate Google+ instead.

WordPress 3.2

I like WordPress 3.2. There are a lot of improvements, and as you’d expect, everything looks better.

I’d write more, but I’m too busy working on customizing the new default template, which I think is the best default template yet.

See what I’m up to here:

http://brandonmoeller.com/twentyeleven/

New child theme work

My first stabs at customizing the new Twenty Eleven WordPress theme, by creating a new child theme.

 

Why hire Brandon Moeller?

Today, I published an animated design that I created using Adobe Flash to my Hire Me page.

Get Adobe Flash player

The animation starts off with the question, “Why hire Brandon Moeller?”

I believe the animation answers that question well.

Hire animation 01

I imported many of the words into Adobe Flash from Adobe Illustrator.

Hire animation 02

I coded the page to look for iOS devices, which are directed to the flash-free page I created using an QuickTime movie version of the animation that I exported from Flash.

Hire animation 03

New design template

I have zipped up all of the main website files – except for the web fonts, of course – and now have them available for download in case anyone would like to take apart my newly redesigned website and tweak it to their own heart’s content.

BrandonMoeller.com template

There’s also a folder in there with the template files I created in Adobe Photoshop and Adobe Illustrator CS4.

I’ll post my WordPress child theme of the new Twenty Ten default theme when I’m done perfecting it.

A new header and more Facebook integration

On Sunday, I retired the first banner which graced the top of every page from July 11-25 on my new website.

Here’s the retired one:

Banner 01

Banner 01

Here’s the current one:

The current banner

The current banner

Also, I added Facebook comment boxes to all pages on the website, as well as embedding it into the WordPress template single.php, which now adds the comment box underneath every post in this blog.

Bran Moe

I created a favicon for my newly redesigned website.

When I tried to jam my whole name into 16 pixels by 16 pixels, it didn’t look too swell. Just cramming seven letters looked better.

My new ico

My new ico

A favicon.ico is a small icon that browsers use to add some flair to the window tabs and bookmark links. It’s the closest I’ll ever come to corporate branding.

I also modified my functions.php file in my WordPress theme to include the code to call the .ico on every page within the blog.

Here are some helpful web pages I found that helped me accomplish these tasks.

How to create a favicon.ico” from PhotoshopSupport.com

Child Themes” from the WordPress Codex

The July redesign

BrandonMoeller.com

BrandonMoeller.com

It has been two weeks since my last redesign.

My redesign project for BrandonMoeller.com began on July 5 and ended a week later on July 11, and I’m very happy with the results.

The previous design had served me well for a number of years, from Feb. 6, 2008 to July 5, 2010.

It was time for a change.

COLORS

The Good Friends color palette, used on the new BrandonMoeller.com

The Good Friends color palette, used on the new BrandonMoeller.com

I started by deciding on a color palette. I chose “Good Friends” desgined by Colour Lovers user Yasmino.

FONTS

Next, I chose Franklin Gothic FS by FontSite Inc. to be my official font, so I bought the whole family from FontSpring.com, and unlimited licenses to put it on as many websites as I please. The two fonts currently used on the site are Franklin Gothic FS Medum Condensed and Franklin Gothic FS Book. I even incorporate these fonts in my blog.

A picked a (free) secondary font from FontSpring called Merge Regular from Philatype. I really like this font, but I just don’t have many places to put it at the moment. Currently, it makes the text in my sidebar on my “Hire Me” page stand apart.

A SIMPLER DESIGN

I wanted a simplistic design that would allow the content to shine. So, I spent a lot of time revising my content, consolidating pages and reducing clutter. I got it down to five pages, and developed intuitive titles for the pages: “home,” “about,” “hire me,” “photos,” and “blog.” I wanted my homepage to be free of the boring introductory text that — for whatever reason — everyone else is convinced they must have. However, I think visitors to my website are aware that they’re at my website, and I’d rather have graphics and the content to do the talking.

A sample vector-based icon as it appears on the homepage.

A sample vector-based icon as it appears on the homepage.

Being a fan of the social media, I wanted to maintain my previous website’s homepage feature that listed all of my other pages out there on the Internet. But, instead of a list, I decided to make vector-based graphics for my 10 favorite external sites. Hovering over these images reveals a splash of color and movement. Soon, I’ll probably use the jQuery javascript library to add more icons in a slider format for the other websites I didn’t have room to mention.

FACEBOOK + PICASA

Also, I wanted to tap into the Facebook API on the homepage. At launch, I added the famous “like” button to the homepage, and future plans including a Facebook comment box on every page. That’s coming soon. I want more people to hit that “like” button, first, though — before I go to the trouble. Ahem. I’m talking to you.

I also created a new section for my photos using a javascript that embeds my Picasa Web Albums right onto my website, making it appear as though the photos are housed on BrandonMoeller.com. The JavaScript I used was written by Jesse Berman and works just like he promised it would on the open source website SourceForge.

THE NEW BLOG

Last but not least – certainly not least because it probably took up most of the time I spent during the redesign — I updated my WordPress blog from version 2.6 something to the brand new WordPress 3.0 “Thelonious.” I then took the new standard WordPress theme of Twenty Ten and built on top of it, customizing it to look like the design I created for the new BrandonMoeller.com, allowing for a seamless experience for my blog visitors. When I get around to it, I’ll likely make the new BrandonMoeller.com into a template file that can be publicly downloaded for anybody who wants to mimic my design, as well as make my WordPress theme build-on available.

I’m also now tracking the traffic of my website with Google Analytics — I’m very impressed with what the tool allows me to discover about my visitors.

If you like the new website, please let me know what you like — and why — in the comments below.

Typekit makes the heart grow fonder

TypeKit is here and as more browsers start to adopt the @font-face rule, I decided to take it for the old free trial spin for BrandonandKimberly.com.

It was easy. I went to their website, signed up, chose two fonts from the free trial selection and specified what domain I will be using them on. The free trial only allows for the use of two fonts on one domain. I then copied the two-line Java call and pasted it into the head of all the site’s pages, then configured the easy-to-use TypeKit editor to specify which font corresponded to which selector in my HTML/CSS of the site, and after a few minutes, I was done.

I chose FF Enzo Web

I chose Scrivano

But it doesn’t work in all the browsers I use. Here’s the results of my survey:

Go

MAC
Firefox 3.5.5
Safari*

PC
Firefox 3.5.5
Internet Explorer 8

No Go

Mac
Camino
Google Chrome
Opera

PC
Chrome 3
Internet Explorer 6+7

* Though BrandonandKimberly.com keeps crashing Safari. Doh! Man, I hate that browser.

Also, I’m kind of disappointed in the way that various browsers display the fonts I chose.

Check out these screen shots. Discuss.

Firefox 3.5.5 (PC): This is how Typekit displays our wedding Web site on the browser of my choice.

Firefox 3.5.5 (PC): This is how Typekit displays our wedding Web site on the browser of my choice.

Internet Explorer 8 (PC): It doesn't display as nicely, but, maybe that's just my opinon. Notice how the weights of the headlines between this one and FF are inconsistent.

Internet Explorer 8 (PC): It doesn't display as nicely, but, maybe that's just my opinion. Notice how the weights of the headlines between this one and FF are inconsistent.

Firefox 3.5.5 (Mac): It looks pretty good on Firefox for Mac.

Firefox 3.5.5 (Mac): It looks pretty good on Firefox for Mac.

Our wedding coozie designs

Today, I finished the designs for the coozies that we will give away during our wedding.

I designed them using Adobe Photoshop and Illustrator CS4.

Here they are:

blue coozie

The blue "formal" coozie.

Photos taken for the blue coozie were shot by Pin Lim, from our engagement photo shoot. The background of this coozie will be blue, so the ink needs to be white, and so the white ink is black above – which means it’s kind of hard to tell what this one will look like. I’m confident it will be awesome.

white coozie

The white "fun" coozie.

One of the photos taken for the white coozie was shot by Pin Lim (see the one on the far right). The others were shot myself, holding the camera out at a decent distance. This coozie was white with blue ink, so it’s not hard to see what it will look like, since the black ink above will be blue.

UPDATE: See a photo of the finished coozie, printed by Kustom Koozies, from Pin Lim’s wedding photo shoot:

The coozies

The coozies came out great. Our guests loved them!