Ptah Dunbar

After 22 (23 now) blog articles written on ptahdunbar.com, I think I’ve finally got a feel for what I want to write on this blog. See, after choking a couple of times in the past with writers block and other distractions, I didn’t think I’d be able to start yet another blog and stick to it. This is a major milestone accomplished and I’d like to congratulate myself for that :). My articles are bringing in more than 4,700+ page views (since Feb.) according to mint. I’ve only been blogging for about three months which is an all time high!

Same Goals

It feels great staying on task with my original plans for the blog. As far as writing how to’s, practical guides and advice like I originally intended on doing, my focus is a little narrow at this point. Currently, that focus is on WordPress, case studies coming from my projects and the newly, client work. Since this blog is fairly new, I made the decision to focus only on a few topics before I go off and talk about other stuff like web applications and whatnot. Down the road, I’ll be adding new categories to talk about some more interesting things. I’ve got a lot of plans with WordPress and I love writing about my thoughts and processes for projects I pursue. It’s all about the experience! Which is why I like keeping my work as transparent as possible. This will also help me down the road when I become successful trying to figure out what the hell I was thinking when I was younger! Overtime, I’d like to further elaborate more on how I go about creating all these super cool blogs and websites (in the future, applications and more).

Blog Design

It’s only been a few months since I first launched this theme WP Generic and I don’t like it anymore. It just doesn’t feel like me. It feels cold, and unpersonalized. I’m trying not to be too harsh, but I can’t ignore this. Originally, I planned on launching this blog with Ptah Dunbar 2008, but changed my mind during the last few minutes before going live. I thought about this decision a lot which turned into this term I’d like to coin, Grow Theory if that doesn’t exist (more on that in another article). I have a future version of this theme to further enhance how it looks but I’d be going in the wrong direction if I continue with this theme. I’m making adjustments to fix this problem with a new redesign I’m coming up with. After the redesign and adding a few enhancements, I’ll be giving this theme away for those interested. I’ve been getting my design freak on lately reading graphic design books and magazines trying to get these awesome creative ideas out of my head and onto paper and digitally so that should be very apparent in the new design. Hopefully throughout the new design, it’ll express more of my needs and personality while still being flexible.

For the redesign, I’ve been thinking about a dark, clean, vector style, tropical, colorful look if that makes any sense.
Color scheme and possible imagery will be primarily based off my heritage, Puerto Rico (red, white and blue) and Jamaica (black, green, and yellow), and maybe even dab of orange sprinkled all around. The design will be very colorful and awesome looking but not too overpowering on the content. Sounds like an interesting concept eh? Again, this looks awesome in my mind, I just need to communicate these ideas correctly through Photoshop and Illustrator.

Plans for launching the redesign will hopefully be before FOWD because I really want to show off my design skills and what I’ve got when I meet other designers over there (that’s if I can go of course). While the current theme is simplistic and clean, it doesn’t do my design skills any justice and that’s not acceptable.

Trying not to concentrate too much on my blog’s design, I’ve still got a few unfinished projects that I need to finish like the bloggingtips.com redesign, web dev work at my job and some freelance work on the side. Oh, I almost forgot studying for midterms, I was told they’re suppose to be pretty hard.

I’m in the market for a DSLR Camera

Along with a few purchases like a tripod and extra memory which I still have to do some more research on.
I’m currently looking at some top quality DSLR cameras for product reviews (books), self-portraits and capturing quick motion shots. Cannon and Nikon are the only two brands that I’m considering. I’m thinking that a 30-50 prime lens should do the job, but I’m open to suggestions.
The main feature that I’m looking for is crisp picture quality (10+ megapixel) because I’m going to be doing a lot of cropping and editing. My 2.0 megapixel camera on my iPhone (without flash!) isn’t cutting it. So if you have any recommendations, your comments will be rewarded!

Services and Collaboration

With the new design rolling up or before, I plan on adding a “services” page to offer my web design and development skills up for an extremely affordable price. While I still plan on doing some freebies down the road from time to time, I still gotta pay the bills! Included within that page, I want to throw up some copy to inform other web designers and developers that I’d like to collaborate with them as well as I know how overwhelming our jobs can get.

Specialist in Redesigns

As for everyone else, I’ve been doing a lot of thinking. While I probably could offer a broad set of services from creating complete websites to SEO (Search Engine Optimization), I’m only offering redesigns. It’ll allow me to focus more on what I like doing which will ultimately produce better, quality results. Those still insisting on using me for other services can be requested via the contact form.

And finally

Once I get the new design up for this blog, I’d also like to update my about page to reflect the changes.
I’ll be highlighting on my collection of books I’ve got sitting in my room too which should serve as an interesting photo of me. Until then, I’ve got about 8 more or so books waiting to get adding to that stack ;).

When I get some final drafts mocked-up, I’ll be sure to post another update about it. Before then, I’m going to be starting, releasing and collaborating on new projects and client work that I’ve got cooking in the kitchen, I can’t wait!

In this series, I’m going through the process of redesigning a very popular multi-authored blog, BloggingTips.com. Blogging Tips is the first of many websites to receive a special redesign-on me. Part 1 talks about whether blogging tips actually needs a redesign. I raised a lot of unanswered questions regarding how I could go about executing the redesign.

In this article, I’ll go over the goal for this redesign and have it serve as my guideline if more questions arise or if I get lost throughout the whole process, which ever comes first!:)

Goal

The goal for the redesign of BloggingTips.com is to design and develop a WordPress theme that will give readers a chance to read articles about blogging from multiple authors in an elegant fashion. This WordPress theme needs to be fast loading and really highlight on the authors who produce the content.

Designing the Mock-ups

Doing a redesign for a multi-authored blog that brings in around 30,000 unique page views a month (according to compete) isn’t a quick walk in the park. This isn’t a new blog that’s about to start soon with little to no reader base. Blogging Tips has been online for since last year March. I had to keep in mind the fact that they have readers who already are accustomed to browsing Blogging Tips in its current format. With that said, I couldn’t redesign the blog anyway I want so I’ll try to make improvements and adjustments and only if necessary, create something entirely new.

Brainstorming ideas

Not completely knowing what was in a multi-authored blog, I thought about looking at how other multi-authored blogs are approaching this:

These are the typical layout structures for multi-authored blogs, especially ReadWriteWeb. They’re not bad, the huffintonpost and Small Business Branding are the only two that comes close to what I’m looking for. It seems like a lot of multi-authored blogs don’t really focus of the authors a lot do they? Maybe they’re in-house writers, or paid differently. Whatever the case may be, one of my primary goals are to highlight on the authors, so let’s continue.

Things to Do

When I approached Kevin with a proposal to redesign his site, I thought about a few enhancements that could benefit his blog. Here’s a list of what I plan on doing for the new BloggingTips.com:

• A fresh new look with a more professional feel
• Multiple layout views for the content on BloggingTips. (think news/magazine style themes, but different)
• Decluttering the sidebar!
• Restructuring the Author Pages to better promote their work
• Making BloggingTips standards complaint on modern browsers
• Reformatting the content area for more visual clues
• And a lot more minor adjustments and visual enhancements…

In the next article throughout this series, it’s time to get down to the real work and start designing some actual mock-ups! I’ll show you the mock-ups I presented Kevin and the changes made all the way to the final version. It’s a smooth transition I might add.

Don’t want to miss an article in this series? Subscribe to ptahdunbar.com to be one of the first to get the latest insights on News, Case Studies, Web Trends, and more from Ptah Dunbar!

In this series, I’ll walk you through the process I take on redesigning a popular multi-authored blog, BloggingTips.com.

UPDATE: Part 2 is live: BloggingTips.com Redesign - Part 2

Blogging Tips is the first of many websites to receive a special redesign-on the house. With over 650 articles written from multiple authors ranging from topics like how to promote your blog to making money online, blogging tips has truly provided a wealth load of content that can take your blog to the next level! First, were going to see if blogging tips actually needs a redesign and why.

Does Blogging Tips need a redesign?

When Kevin started bloggingtips.com back in March 2007, he was the only author writing for the blog. Two months later, Kevin welcomed his first guest writer, Mani Karthink from Daily SEO Blog to join the team. Fast forward to the present, Kevin now has a total of 16 blogging tip authors writing on a variety of blogging topics. These guys were constantly producing quality content day after day after day, out growing their current wordpress theme.

If you look at this recent screenshot, you’ll see what I’m talking about:

There is a ton of information in the main content area, sidebar, and footer with little visual separation.

New readers visiting Blogging Tips would simply become overwhelmed by the amount of content displayed to them.

How can I change this? Do you think the content can be displayed to the reader in a more visually pleasing way? How do you attract more bloggers to post gigs or request in the Blogging Tips Marketplace? How do you encourage readers to submit links to the Blogging Tips Directory? What could I possible do to make Blogging Tips the best place to go for reading practical tips on blogging from a diverse set of authors?

In the next article throughout this series, I’ll go over the goal of this project and ways to tackle the redesign to better promote the authors.

Don’t want to miss an article in this series? Subscribe to ptahdunbar.com to be one of the first to get the latest insights on News, Case Studies, Web Trends, and more from Ptah Dunbar!

This is part 4 in a series of post, going through the process of building Ptah Dunbar dot Com. If you haven’t read part1, part2 and part3, I’d suggest you go check that out so you can read about the goal, background, and the mockup phase of this project.

Design - Making it come to life (12.5 hours)

Ok, so the final design isn’t completely the same form what I sketched up in my moleskin but that’s the point! It gave me a starting point to build on top of. So once I was satisfied with the final concept for my front and single page, I jump into Photoshop and create those elements digitally.

This is probably the longest part in my entire process because:

• Usually, I’ll make a layout, then tweak it here and there until it meets all the necessary requirements of that page
• Once I’m satisfied with the layout, I’ll let it sit there for a few days.
• Then, I’ll add or change a few things if I thought of anything new during that time away.
• If, after a few days I still like the design I’ll proceed to the next step (html/css).
• Finally, I’ll print out a final copy of the layout, and use it as my blueprint when I get stuck coding the layout.

TIP: Having a design blueprint as a physical reference is perfect if you don’t have dual monitors or a lot of screen real estate. In addition, having some kind of reference for your project allows you to focus solely on the coding aspect for it as a pose to jumping right into the code, then designing on the way.

So here’s how it looks:

Markup - Making browsers happy (~3 hours)

Here comes the fun part. Structuring the layout into semantic xHTML markup and designing it using CSS while having all the big boy browsers duking it out–very time consuming but nevertheless rewarding.

Luckily, I was using the printed layout I made earlier as a blueprint, and was able to code up both, the front page and single page in less than an hour. The rest was fixing browser bugs which sadly took me another 2 hours or so. The navigation went through the most iterations because of IE wanting to stand out from all the cool kids. Whatever.

After all that, everything seemed to be aligning in place. Checked to see if my xHTML and CSS was valid, they sure were! Let’s move on…

TIP: when making your layouts IE compliant, try using margins more than padding since IE treats divs with no width or height set like they don’t exist.

Convert to Wordpress (~4 days)

Ugh. I knew this was going to be a problem. I had about 15 tabs open filled with wordpress codex mumbo jumbo. Reinventing the wheel and creating a theme from scratch really sucked the first time.

To start off, I hacked up Kubrick, the default theme that ships with WordPress. I had a lot of markup errors since I tried to base my code on Kubrick’s structure. Killed that idea. Then, I made a style for K2 which surprisingly worked, but the only thing I was picky about was I had to learn a lot about how K2 does things.

K2 has a lot of advanced features like rolling archives, live search, live commenting, tons of plug-in support, semantic classes etc. A lot of those features were overkill for what I was doing thus adding a lot more weight to my code than needed.

Striping all those stuff out resulted in not really using K2 for what it was made for. So I decided to kill that idea too and really make my theme from scratch now.

Using * { margin: 0px; padding: 0px; } in my css resulted in having to style every single html tag which was the whole purpose of that code, but it backfires on you if you don’t know all the html tags you have to style in WordPress. I tried making my styles very pseudo so that I wouldn’t have to recreate this part again. Finally, I got stuck formatting the content area of the blog which I didn’t initially design so I decided to just go with what just works for now. I found myself styling my content very similar to the way Paul Stamatiou styled his content on his blog. I’m a frequently “lurker” there so I guess I’ve grow accustom to reading in that style but changes will be made once I get this blog off the ground.

Back to WordPress

There is a lot of important information you should check out before, during, and after the creation process of your WordPress theme. Below is a good list of links to start with:

• http://codex.wordpress.org/WordPress_Semantics - Learn all the WordPress Jargon so you know what’s what
• http://codex.wordpress.org/Blog_Design_and_Layout - Great start to find how to do regular stuff in wordpress
• http://codex.wordpress.org/The_Loop - Learn to love the Loop. Breathe the Loop. Become one with the Loop.
• http://codex.wordpress.org/Templates - This will lead you to everything you need to know about theme development
• http://codex.wordpress.org/Template_Tags - Usually up-to-date reference on all the WordPress template tags and examples on how to use them
• http://codex.wordpress.org/Template_Hierarchy - Explains what happens when a user goes to different types of urls on your blog and what page it pulls up.

TIP: Having a list of html tags that WordPress allows when writing a post is a must when developing your theme. It makes it future proof so that you only have to style it once.

5 valuable lessons I learned from converting a website into a wordpress theme for the first time:

1. Remember that wordpress isn’t all that special. It’s using PHP and MySQL like every other dynamic website.
2. Regardless of what everybody is saying, you don’t have to split up your header, sidebar and footer just yet. Leave that for later.
3. Having a cheat sheet, or just using the wordpress codex for looking up template tags is invaluable!
4. Keep in mind, the template hierarchy. That’s how wordpress deals with incoming URLs (URIs) to your site along with their respective pages a user would land on.
5. Have a list of common HTML tags that you’ll have to style in WordPress.

Conclusion:

Right now, the theme that I designed is at it’s most basic form. Just a regular two column WordPress theme. I decided last minute to start it off like this because of the lack of content. I really don’t have a lot of content right now to present, so my original theme I designed would be overkill. The plan is to slowly phase out all the features over time once I get more into the habit of blogging; I called this idea “The Growth Theory” which I’ll be writing about in the future.

This is the end of the series going through the process of creating Ptah Dunbar dot Com. If you haven’t read part1, part2 and part3, I’d suggest you go check that out so you can read about the goal, background, and the mockup phase of this project.

This is part 3 in a series of post, going through the process of building Ptah Dunbar dot Com. If you haven’t read part1 and part2, I’d suggest you go check that out so you can read about the goal and background of this project.

Mock Up - (30mins)

The images below were the initial concepts of how I wanted the website to look. The first image is the front page showcasing my featured work, and a brief list of articles written on the blog. Below where you see the floating box at the bottom is the footer. I wanted to have my picture posted there on the lower left corner along with a short bio and what the site is all about. Next to that, are two fields where I thought about placing the categories and a tag cloud.

excuse the quality, took it with a flashless iPhone.

If you click on one of the article links on the homepage, you would land on the single page (image to the right).
I sketched up a two column typical blog setup. I didn’t want to try to reinvent the wheel here because this layout just works. It also makes sense in terms of usability so that you (readers) don’t have to get used to a different reading scheme.

After letting the mock up sit in my moleskin for a few days, I didn’t like the homepage anymore. I wanted something a little different. So I tried again.

This image might be a little hard to understand, but it’s pretty simple. I designed the top half of the homepage, kinda liked it, so I designed it again right under it. You can see the darker outlining from the middle going down to the bottom.

I like this one and it past the test of time so I stuck with it. So the upper half is the featured spot where I’ll have my latest work looking sexy by itself. For the second half of the page, I wanted to keep the two columns, but instead of just having articles filling the whole 865px space, I wanted to reserve that for “potential clients” needing that extra push to fill out a quote, click on “services,” or contact me. The articles now reside on the right which seemed to fit. So far, looking good.

In the next post for this series in creating Ptah Dunbar dot Com, I’ll go through the design phase, and take a look in converting this design to wordpress.

This is part 2 in a series of post, going through the process of building Ptah Dunbar dot Com. If you haven’t read part 1, I’d suggest you go check that out so you can read about the goal of this project.

A little History
I brought this domain (ptahdunbar.com) back in 2006. At first, its sole purpose was to act simply as a portfolio showcasing my work. Then later on in 2006, I finally settled with a flash portfolio I created in flash, showcasing my latest freelance gigs, projects I’m working on, and if I was available for job inquires.

Year 2007 was the big year of the blog. I scoped out the blogosphere, being conservative about commenting and interacting with social media sites (like digg, facebook, and other web2.0 sites). I guess I didn’t want to follow the hype, as history will repeats itself sooner or later. Instead, I just watched, learning from others, reading hundreds of blogs and resource sites.

At the end of 2007, I started changing my opinion about all things web2.0. Data portability came to the rescue and seems to be gaining popularity. Which is awesome considering the fact I’ll be able to “carry” my online social life where I want which was previously not an option. So I thought that I should just give web2.0 a try but do things my way. Finally, I felt the urge to get my name out there, so what better way to do this then blogging in my niche?

Getting Started
I’ve been messing with WordPress for a few months now. Learning how it works, pushing its buttons, but I haven’t quite developed an actual fully-fledged WordPress theme for it yet. I debated on using freely available themes e.g. Kubrick, or K2 for a starter base (and I did tried them), but I refused learning someone else’s code and how they went about creating their theme. It was simply not my style. Not when I’ll be the one doing all the support and whatnot. So I went solo and glued my eyes to the codex for days, using it as a reference along with some other helpful tutorials found online.

I might be re-inventing the wheel this time around, but by doing so allows me to understand the core functionality in a WordPress theme. I’ll also get to familiarizes myself with the grunt work involved in the slicing (html/css) process, converting a regular site to a WordPress compatible theme so the next time I make another theme or two, I’ll have some sort of automation to speed up the development cycle. Plus, just knowing the fact that I coded pretty much every single line of code, enlightens me every time I think about it! ; P

In the next post for this series in creating Ptah Dunbar dot Com, I’ll go through the mock-up phase and explain the mock up phase.

Note: I’m actually finished with the design for this blog, I’m just fixing out some bugs and formatting issues. The theme is already up and running, you just can’t see it because I’m using Theme Test Drive, but it shouldn’t take much longer anyway. Maybe another week, but it depends on the work load in school.

This is part 1 in a series of post going through the process of building Ptahdunbar dot Com.

Goal

My goal for this website was to build a dynamic portfolio of what I know, what I’m learning, what I’m currently into (interest).

I’ve been a self taught web designer and developer since mid 2005 with a scattered portfolio. Yeah, I probably have a record of all those freelance gigs I’ve done since then, but it’s scattered everywhere on the web and offline I wouldn’t know when I made what and how to organize them.

I wanted a place where I can post my latest freelance gig, write about the process going into creating them, staying on top of web trends, and learning those trends by blogging about them. I’m a visual learner, and I learn by doing, so a majority of my articles will most likely be in a step by step/how-to guided approach (hopefully!).

In the future I’ll do video and screen casting to better achieving this. Ultimately, I wanted to create a website that will host content about the things that I’m interested in, all in a organized fashion.

Breaking it all down into task:

• up-to-date portfolio of my freelance work, and entrepreneurial projects
• articles about my current interest, latest web trends
• Promote my web design and web development services and entrepreneurial web projects

Looks like I’ve got enough information to start a new project! In the part of this series in creating Ptah Dunbar dot Com, I’ll quickly go over a little background behind this.