I’ve been mulling over the current status and the direction of GrandmasterB.com for awhile now, and it’s been a bit of a battle for me. I’ve contemplated weeding out content, starting over from scratch and at one point scrapping the entire blog for something different.

After careful consideration, I’ve decided that I took the site in the wrong direction trying to make money off of the site in the wrong manner. I tried to pump up the stats and page views with irrelevant content and compromised the integrity of the great content that I already had.So What’s Next for GrandmasterB?

What I didn’t realize is how quickly I would make a name for myself in the blogging community as a Wordpress theme designer. In the past year and a half I’ve cranked out twelve different Wordpress sites (not including this one) and I’ve learned a ton about what you can do with Wordpress. With every new site, I’ve tried to push the envelope and make something better than before.

I now feel that I have a firm grasp on how I can use Wordpress, not only as a blogging platform but as a content management system for small business applications. My plan for this site is to use it as a platform for building up my client base further, and eventually developing my own premium themes to offer to the masses.

Spring Cleaning

I have gone through all of the content on the site and removed all of the content that wasn’t relative to where I want the site to be. For instance there will no longer be posts about Kim Kardashian or monthly recaps about the site traffic appearing here. From now on, it will be graphics related content only:

• Design Reviews (mostly my own work)
• Web Development Tools
• Tutorials (Photoshop, Illustrator, Wordpress, etc)
• Freebies (icons, graphics, etc.)
• Mac Tricks
• Q&A with GrandmasterB

I really enjoy writing this type of content and that seems to be what keeps the readers coming back. To give you an example, my killer metallic text tutorial has consistently been the top article since being published in June of 2008. It’s obvious that readers enjoy that type of content.

I hope you all continue to follow the adventures of GrandmasterB and the new direction the site is taking. I’ll be interested to see where it all goes from here.

~ GrandmasterB

The task at hand with this project was first and foremost a clean, professional new look for their corporate website. The second requirement that they had was the site had to be easy to update and add new content. We found that using Wordpress as the platform for the site would work perfectly for TSI’s requirements.

The Design Process

TSI wanted the new site design to have a similar color scheme to their existing site. The existing site was flat and the colors were a bit too muted, so I took the colors and tweaked them a bit to come up with something a little more bold and striking. I decided to also add silver/gray to the color scheme to add something more to the design.

I put together a new background and header that added a little bit more to the design to make it stand out more. The old design used a drop-down menu, which I wasn’t a big fan of. I opted to make a sub menu that would only appear when sub-pages existed. The main body of the site was rearranged to make the sidebar part of the content area.

The Layout

I’ve been using the 960 Grid System framework for awhile now, and I’ve found out it takes a ton of time off developing and laying out the structure of a site. The framework allows for you to layout the site within a 960 pixel wide container, and within that container you can have either 12 or 16 columns with which to create your layout. This particular layout uses the 12-column styles and is broken into a standard two-column layout.

If you’d like more information on using the 960 Grid System, check out these tutorials:

• Prototyping with the Grid 960 CSS Framework
• A Detailed Look at the 960 CSS Framework (video)
• 960 Grid System Toolbox & Resources

Featured Content

The existing TSI website had a clunky Flash animation in the header and the client wanted to keep that same type of element in the new site. I decided to use a jQuery slideshow animation that allowed for easy editing as well as optimizing the content titles for search engines. The end result was very well received by the client and should help their search engine rankings.

The Final Result

Below are links to screen captures from both the old and new design. I’m pretty happy with the way the the site turned out. I would have liked to have made the featured slideshow more dynamic and use custom fields to populate the images. The client chose to make the titles different from the page titles, so in the end we decided a static solution would be best. I hope you like the final result…I’d love to hear your feedback.

Holy Cow! It has been a long time since I’ve written any new posts on the site. I don’t know if any of you are still out there, but if you are I’m sorry it’s been so long. I know we all get busy and have a hard time finding the necessary time to write new posts, but I’ve been SUPER BUSY! The blog design/development business has really taken off and I have a lot of finished projects to add to the portfolio and a lot to show off. I have been working on a lot of projects simultaneously, and two of them are fairly close to 100% completion…but I’m not ready to close the book on them quite yet.

My latest project just finished up today, and I must say it is a huge improvement over the previous design. The sports blogging community has been kind to GrandmasterB and in turn, I have been turning out some of my best design work. Jesse from PistonsNationBlog.com contacted me around mid-June to work on a new theme design for his site. Before I go much further, I must mention that this theme is not a GrandmasterB original. Jesse purchased a template theme called “Bright” from ThemeForest.net and I added some of my flair to the design to incorporate his new logo and color scheme.

This is the first time that I have customized a Wordpress template from ThemeForest and I must say…they have some great stuff and the themes are well documented for customization. The new theme incorporated two widget placements in the sidebar and a section for ads to be placed by adding the code in the theme settings…very cool stuff! I decided to do a little modification and added a third widget placement below the ad section to split it up a bit.

Overall, the project was a lot of fun to work on and it was cool to see how other developers build themes. I especially liked that the theme had the Photoshop files included and they were also documented to make customization easier. I would also like to give a shout out to Jesse for trusting me to provide him with a new theme for his blog. If you haven’t already…check out his site at PistonsNationBlog.com.

~ GrandmasterB

BEFORE & AFTER

From time to time, I get questions about how I start designing websites, and how I build custom WordPress themes for my clients. I’ve spent the better part of the last year trying to streamline the process of designing and launching a blog theme. The problem that I have is I tend to get a little carried away with trying to be perfect. Like most designers I start out with the basic tools…pencil and paper. I draw out the layout and figure out the basic positioning of all of the necessary elements before I even think about putting anything down in Photoshop. That drawing stays with me until the very end of the project, and sometimes even after just for reference.

How Does GrandmasterB Layout a Site for WordPress?

Recently, Forest from The Random Forest and Frugal Zeitgeist hit me up on Google Chat to ask me how I build a Wordpress theme and how I go from Photoshop layout to coding everything for Wordpress. Well, I know that I’m not the only designer/developer that works this way, but I build a simple HTML/CSS file that will serve as a template for the coding of the WordPress theme. In my opinion, there’s no reason to mess with all of the WordPress options and variables unless you have already solidified the design in it’s simplest form. I break down the design into the most simplest elements first:

1. Header
2. Content Area
   1. Left Column
   2. Right Column
   3. Any other Columns
3. Footer

In my experience, 99.95% of the websites you visit will be comprised of those elements. I have built a basic HTML layout and copied it over to a Clip in Coda that I can use for every new site and add or subtract items as needed. If you don’t use Coda, you can still make a template file to copy and paste whenever you need. Below is the basic structure of the file that I use…minus the standard HTML code.

Basic HTML Layout

<div id="wrapper"> <!-- wraps everything into one div tag -->
<div id="header"></div>

<div id="content-area"> <!-- houses the columns -->
<div id="left-column"></div>
<div id="right-column"></div>
</div>
<div id="footer"></div>
</div>

I know it looks simple, but that’s the idea…and it is simple! If you were to populate your divs with some content they will all just be stacked on top of each other. All of the detail like column heights, widths and position are determined by CSS. I had contemplated writing my own HTML/CSS layout tutorial, but that has been done a hundred times and there’s no sense in reinventing the wheel. One of the better tutorials that I have found was written by Steve Dennis on Subcide.com. It’s a very good tutorial, easy to follow and has great graphic examples to follow along with.

If you have any questions that you would like GrandmasterB to field hit me up via email or on Twitter.

~ GrandmasterB

This is my first tutorial in what I’m hoping will become a series of easy Mac Tricks. I’m all about customization, and especially when it comes to my Mac and my workspace. When I got my new Mac Pro for work, I spent a good portion of the morning customizing the look from the icons, to the wallpapers and even the Dock. If you’re a fellow design or even a casual Mac user; I’m sure you have a fair amount of launch icons in your Dock. I wanted to find a way to add separators to the Dock, so that I could easily sort applications and make it easier to locate them without hunting.

Well, if you have tried to do the same thing you probably noticed that there’s no way to add dock separators built into OS X. So, how do you solve the problem? Well, with a little research I have found the solution. First let’s take a look at my existing dock:

As you can see, it’s quite a mess of icons and there’s really no rhyme or reason to how they’re laid out. With the addition of a separator between the icons, it would be easier to find the right application rather than scrolling through them all. So, how do you add a separator? As I mentioned there’s no clear cut way to add them from the OS, so you have to do a little tweaking in the Terminal. So if you don’t have the Terminal App in your dock, you can find it under: Applications > Utilities > Terminal.

With the Terminal App open, enter the following code to add a single separator to the Dock (copy and paste the first line to make it easier):

defaults write com.apple.dock persistent-apps -array-add '{ "tile-type" = "spacer-tile"; }'

hit return

Your Dock will disappear and when it returns (a few seconds) there will be a separator towards the end of the Dock…it’s invisible, but it’s there. Now to position it, just click and drag it to where you want. If you want more than one separator, you just need to enter the first line of code again for as many separators as you want. That’s it…pretty easy! Here’s what my Dock looks like after the addition of separators.

Now all of my icons in the Dock are organized by application type. I have created six groups of icons (some you can’t see).

• Browsers, Twitter and IM
• Graphics Programs
• Development Programs
• Administrative Programs
• System Apps
• Games

If you like this tutorial let me know, or if you have tips you’d like to share I’d love to hear them. Until next time…

~ GrandmasterB

It’s been quite awhile since I have put together a tutorial using Adobe Illustrator. I’ve been working with Illustrator a lot more recently and decided to share an easy tutorial that will give your text some depth and make it pop off the page/screen a little more. I’ve used a few of these techniques before in my tutorial “Feature Post Logo” that I wrote last Spring. In that tutorial the finishing touches showed how to use the pen tool to add some shading to the text. This tutorial shows you another technique to achieve a shadow on your text.

STEP SIX – Time to Add a Little Bit of Color

With the top text layer still selected we’re going to copy and paste in front of the last layer.

After you have pasted the text in place, go ahead and change the color and the stroke. Change the stroke weight to 2pt…and you’re done with this step.

As we move along, these steps are going to seem repetitive but be sure you follow along so you don’t miss something.

The thing that sets all of these designs apart from most, is that they all use a great deal of CSS to pull off the multiple layers of images. Take Pixel Criminals for example (#16 on the list), the header alone consists of four or five different images layered together and the main image is over 500K…that’s insane! Many of the designs included in the list of twenty-six creative header designs have a desktop theme, giving the feeling of the site being a workspace. They are really unique designs and feature items like sticky notes for navigation, paper clips, coffee mugs and other workspace essentials. One of the designs has implemented Flash to simulate a steamy cup of Java…BRILLIANT!

If you’re a website designer like myself, or just a fan of creative website design; I’m sure you’ll enjoy my list of creative header designs…ENJOY!

26 Creative Approaches to Header Design

Koko Digital

Revolution Driving Tuition

The Circumfrence

Star Catcher

Kreativa Unlimited

Gary Nock

Klei Entertainment

The Dollar Dreadful

Hoimi

The Piss Biscuit

Bern Unlimited

Point of Entry

Parallax Denigrate

Rames Studios

Outdoor Italia

Pixel Criminals

Yeah Style

Ched Online

Larva Labs

UMEK

Emrahdüzer

Revota

Max Black

Paul Wallas

Gisele Jaquenod

It’s been quite awhile since I’ve posted anything new under the Question and Answers with GrandmasterB category, but today I received a great question in my inbox that I had to share with you all. The email was from my good pal Mike Cusden (you all know him as Cuzzy) from Cuzoogle. He had run his site through the Markup Validation script at http://validator.w3.org/ and it came back with quite a few errors and warnings, his question follows:

Hey GrandmasterB, I ran my site through the Markup Validator and it came back with a ton of errors. Are any of these errors fixable? And is it something that’s relatively easy to fix?

My first reaction was one of surprise, because every theme that I design and develop is run through to make sure that the code is 100% XHTML compliant before turning it over to the client. After taking a look at the output from the validator I could see exactly what the issue was and what needed to be fixed. For reference, I have pasted a copy of the report link here for you to follow along.

The problem that Cuzzy is having is that his theme code isn’t the problem, it’s the advertising code that he’s placed on the site. If you look at the errors that appear on the Markup Validation page, you’ll notice that the first error states the following:

Line 15, Column 107: cannot generate system identifier for general entity “MarketPlace”.
…om/widgets/q?ServiceVersion=20070822&MarketPlace=US&ID=V20070822/US/cuzoogle- 

There are a couple of things to look at here to determine the error. First you’ll notice next to the warning icon the words “Line 15, Column 107″. This is where the line of code is found if you view the source code in a text editor like DreamWeaver or BBEdit. Since this error is found on Line 15, it is going to be found in the header.php file of the WordPress theme. You see the capital ‘M‘ is highlighted in red? That’s where the error is, if you read the description of the error it tells you that the ampersand before the letter ‘M‘ is uncoded. What that means is it doesn’t have the proper code tag. Instead of using just the symbol you would use this code: &

By fixing that one mistake with the ampersand, Cuzzy will be able to get rid of approximately 27 warnings/errors on his Markup Validation! Pretty cool and extremely easy to do. 

How Do I Validate Markup?

I like to pull up my source code in Firefox and then copy and paste it into Coda (or your favorite text editor). I do that so I can see the line count and determine where the error is. I then open the file that contains that piece of code, in this case the header.php file. I don’t edit it though…what I do is “save as” and call it header.php.old and close it. I don’t like to edit working code, in case I have to revert back to the original. Open the header.php file again, make the change and then upload the file to your server. NOTE: If you’re using Coda, you can do all of this to your files that are on the server remotely and don’t have to worry about uploading files via FTP. After you make the change, go back to the HTML Markup Validator and click “revalidate”. The code will then be revalidated and you should see all of the errors for Line 15 disappear.

Markup Validation Tools

There are many tools available for validating your markup, but the good thing is that most of them are free! If you use Firefox, I highly recommend downloading Web Developer Add-on by Chris Pederick. Under the ‘Tools’ menu on Web Developer it has links that will run your site through the Markup Validator as well as a CSS Validator. For editing code, I use Coda (as mentioned before), but you can use whatever text editor you choose. I highly recommend an editor which has a line count display. If you do a Google Search for “Free HTML Editors” you’ll find all kinds of stuff.

Well, that’s it for this edition of Q&A with GrandmasterB. I hope that you all learned a little bit from this post. If anything it should shed a little light on markup validation and show you that it’s really something that you shouldn’t be afraid of. If you have any questions about markup validation or anything else related to web design or development, please shoot me an email. I would be happy to answer your questions…now, I’m off to make double sure my code is all up to par.

~ GrandmasterB

So why buck the system and spice up your footer design? Well, many designer are looking to the footer of the website as valuable real estate to put information that’s not quite top content, but definitely “important”. I have noticed that this trend of creative footer design is especially prominent in the blogging community. With all of the tools available to bloggers from social networking and bookmarking you often struggle to find places to make everything fit and make it look good. Many bloggers are using the footer to place elements like their Twitter updates, FLIKR photos, blog archives, recent comments, latest posts and other elements that are generally left for the sidebar.

I’ve been working on a project for a client that will incorporate a more creative footer design, and eventually when I have time to design version two of GrandmasterB.com; I will be concentrating a lot more time on a creative footer design for the site. I have compiled a list of 26 website designs with stunning and creative footer designs to show you what you can do with your footer. In looking at these sites and their designs, they bring a sense of completion to the site. The entire layout ties the design together and makes for a creative and killer site design.  Each of these designs have a unique and creative approach to utilizing the footer as a place to showcase a number of items. Check them out, comment and let me know what you think.

26 Creative Approaches to Footer Design Gallery

CSS-Tricks

Carsonified – Events

Edgepoint Church

Spoon Graphics

Seed Hunter

Amuki

Komodo Media

Blup

Wire Roses

Boagworld

Drawn to Pixels

Incubus

David Hellman

Flyin’ Web

Ten Thousand Things

Web Designer Wall

National Mechanics

Sam Rayner

CSSAddict

Veerle’s Blog

Tennessee Vacation

Matt Brett

Fling Media

StrawPoll

Legendary Aircraft

I Primi Dieci

Over the weekend, I put the finishing touches on another custom WordPress theme by The BlogFixers. Jeff and I were commissioned by Matt from YepYep to do a complete overhaul of his existing site and create a new theme from the ground up. We worked with Matt throughout the entire process from the brainstorming phase (how many columns, column widths, etc), through the design phase with Photoshop comps and finally the finished product which went live yesterday. The cool thing about this project is this was my first attempt at developing a three column WordPress theme. While I worked on the design with Matt, Jeff worked on getting his server configurations tweaked and dealt with some issues that Matt was having with the WP Super-Cache plugin.

Upgrades and Improvements

As I already stated the new theme is three columns now, as opposed to the previous theme which had only two columns. When designing the new header section I wanted to give the logo a little more flare, so I decided to place it at a bit of an angle and added in some gradient effects. The background behind the logo got a bit of a treatment as well with the addition of a few carefully placed graphic elements. Moving down we created a navigation bar with buttons for the many featured categories of the site. Previously, Matt didn’t have any navigation…this was a big improvement.

I decided to carry of the new look of the logo into other elements like the date badge and the RSS icon. Matt had specifically requested a graphic solution to the date badges after seeing the ones that I created for Cuzoogle’s new theme. The major difference with this version is that we have included the year below the date. Matt had a great idea for displaying the categories as a ‘tag cloud’, so we used the Category Cloud Widget from Lee Kelleher.

Looking Back at the Project

Although, the project took a little longer than anticipate to complete (thank you Holiday Season); Matt was extremely patient and easy to work with through the entire process. We have already received numerous feedback emails regarding the design, and we really appreciate the comments. This was a fun project to work on and I can’t wait to get rolling on the next one.

I really hate to admit it, but I need to buy a cheap PC for testing. No matter how great everything looks in Firefox or Safari…it always needs tweaking in Internet Explorer. We had some CSS issues with the footer not staying put on the YepYep theme in Internet Explorer, but after an hour of messing around I got it fixed.

Thank you Matt for trusting Jeff and I with the redesign of YepYep…we had a blast!

~ GrandmasterB

If you’re getting tired of that free WordPress theme you’ve been sporting, or want to migrate from Blogger to Wordpress; check out the Design Services page to see my portfolio.