I had two major goals with this site:

1. Showcase my design and WordPress talents better
2. Make it easier for people to find information about me and what I do

With this in mind, I sat down a few months ago and began writing out the plan for the site. I wanted an area to highlight work I’ve done for specific clients and a better representation of what I do. I wanted a simple, clean layout and to ditch the ever-present blog sidebar.

After settling on a structure, I went to work in Photoshop putting together a design. For whatever reason, I always find it tough to design websites for myself. It’s tough to balance what you want to say with how you want it to look. It was my chance to do whatever I wanted but I was still constrained by business sense and usability. I think the combination of being able to say anything and do anything makes the process harder. Design is about constraint, art is about freedom.

After I had settled on a look, it was time to get in and work with the code. Here are a few of the highlights:

• Certain pages have a template that allows them to be appended with a list of posts from a particular category. For example, the page about Josh Can Help is appended with announcements and information about Josh Can Help in general. This is controlled by entering in a category when I write the page.

• On each individual post page (on the left there at the top) there are share links for Twitter, LinkedIn, and Facebook, my three main social networks. When I create a post, a also create a bit.ly link which I put into a custom field. Then, the WordPress template takes that short link and adds it to share links for each of the services. The twitter share adds my handle and shortened text from the title of the page. Go ahead, try it out… no plugins! It’s also dynamic so old posts without this information won’t show the links. I debated whether or not I wanted to dynamically generate links from bit.ly but I figured this way I could track all shares from each article using that link in my account. I could also just as easily add in a different short link without much hassle.
• Using information from this article, I made a contact form that validates inputs and can sent the user a copy. It basically receives the information from the form then calls the same page to process that info.

Those are the main features with more to come. On the to-do list:

• Add navigation to the footer to make the site a little easier to navigate
• Figure out a way to ditch the post meta information on the search results page when pages match the results
• Straighten out styles for IE6 (sigh)
• Add more links to my network page
• Plug in the Lightbox code for the website images on my portfolio page
• Add bit.ly links to all my old posts
• Add a few more images to the content pages
• Add h1 tags for the main landing pages to improve SEO

Comments are appreciated!

Related posts:

1. Building a homepage from a blog: Part 2: Finalizing the design and planning out mark-up and CSS structure. Introduction Last time we left off, I had put together...
2. New theme up! Exciting… for me at least. There are quite a few...
3. Improving Website and WordPress Performance with Hard-Coded Share Buttons Increasing the page load speed of your website has been...

Step 1: Assess the situation

WordPress is notorious for being a big server resource hog but there is little else out there that provides the kind of flexibility and extensibility on such an easy-to-use platform. I’m sure there are debates to be had but I’m a huge fan of WordPress and that’s not likely to change anytime soon.

In this case, the WordPress core along with several essential but potentially resource-heavy plugins were causing the server to become unresponsive and, at times, crash for several minutes. This happened during short periods of intense traffic caused by the aforementioned temporary Digg.com front page position (called “the Digg effect”).

I ran a simple website optimization test and found several things that needed to be corrected:

• The site was creating close to 90 HTTP requests. This means that the web page asked for 90 different things across the internet before it would be complete. This is really high.
• The images on the page tested were too large
• The page size, in total, was over a megabyte. For very graphics-heavy sites, this might be normal but there was room to improve here.

Step 2: Plan of attack

The first thing was to address images on the site. Several images needed to be decreased in size (read: lower quality) and the images called by the stylesheet, CSS images, needed to be combined into one file called a sprite.

Since page load speed is made worse by an increasing number of server requests (the HTTP requests I mention above), I wanted to cut that amount in half or more. I would do this by concentrating on items that were loaded from the hosting server. If you load 100 objects from other servers, the page may take a while to load but the host for the page you’re viewing won’t crash. Since the primary goal was to avoid crashes, this would be an important improvement.

What happened?

Though the ideas behind the improvements were simple, there was a lot of trial and error involved. Code written by different people sometimes doesn’t play well together so there was a lot of care taken to make sure that the right syntax appeared in the combined files. The plugins themselves were actually written very well and there was rarely any problem removing the references to certain files. A few observations:

• For one reason or another, combining javascript files is a very finicky procedure. I found that any JS that came after the JQuery block did not work. I also found that minifying the code broke it completely so that didn’t work.
• There’s really some hard decisions to be made when you’re combining all of these files. You’re trading a lot of control for load speed in certain cases. The plugins that were modified can’t be upgraded automatically of the changes will be lost. In the case where there was a dynamically altered style sheet or javascript file, I left it alone. This left one minor JS error on the page because of the order that the scripts are called but nothing on the page is malfunctioning.
• Working with a heavily cached site is very difficult because it is hard to figure out if the changes you made went through. Next time around, I’m going to turn the caching off.

In the end…

With the changes made, we saw an improvement of around 36% (from 320 sec 56K load time to 206). The requests are sitting at 48 total (down from 90) and the site is running noticeably faster.

I made a few recommendations for managing the site going forward.

• The biggest thing you can do, as important as the code I changed, is to make sure your images are as small as possible. If you’re in Photoshop, save your JPGs at a 4 or 5 setting. Also, save non-photo images (logos, cartoons, etc) as GIFs. Give this site a try if you’re not proficient with a graphics program: http://tools.dynamicdrive.com/imageoptimizer/
• On the topic of images… if you have the time, you might want to host some of your images offline (Picasa, Flickr, etc). This might increase load times a little bit but it will keep the load off of your server. Check those sites for bandwidth restrictions, though. It wouldn’t be good to have them take down an image that’s getting you a lot of traffic.
• You’re fine to install new plugins on the site but keep it to a minimum. Many plugins won’t affect your load time at all but some will start adding things to your header which is exactly what I worked to remove. I can, of course, do the same modification to any new plugins as well, though.

Next Steps

We’re getting as close as we can get to making the page as lightweight as possible. There are a few dynamic style sheets and JS files that could be combined if the settings never need to be changed but this might be overkill. I’d like to work out the JS minification issue if possible because we can squish 20KB out of that file.

The next big thing to tackle is the MySQL database. I found a few articles that talked about some settings that can be modified to activate caching and a few other things. I’ll try them on my server before his, though!

Related posts:

1. Improving Website and WordPress Performance with Hard-Coded Share Buttons Increasing the page load speed of your website has been...
2. New custom WordPress theme and structure at JoshCanHelp I finally made the time to finish my site’s re-design...
3. Website performance and health reports Google Analytics (GA) and Webmaster Tools (GWT) are used to...

1. What should the website accomplish?

First, we need to start with the goal of the website. It could be as simple as “generate leads” or more in-depth like “improve specific community interaction.” It’s fine to have a primary goal and a sub-goal or two but, just like anything, as the purpose gets broader, the efficacy for each goal will decrease. A specific, attainable goal is key.

Who builds a website without a goal? Why go through the time and effort, why spend the money, and why go through the hassle if there’s no reason to do it? And yet, time and time again, websites are built, time is wasted, money is spent, and hassles are created without a solid outcome at the forefront of this flurry of action. As a thought experiment, think of a popular website. In fact, think of ten of them. Now, think about why they are popular. This should go a long way towards convincing you that a good website needs a goal. I’ll let a few and take an educated guess as to the goal they had.

2. What are the design, content, or technological constraints for the site?

There is no right answer to this; many people start out with no content and no identity which is fine. Other people already have a logo, slogan, content, and color scheme that can’t change. Before building a site, I have to understand what already exists and what my limits are. Here are some of the questions I’m going to ask you and it’s OK if the answer is “I don’t know:”

• Do you have a web host and/or domain name (the domain name is the main name of your site and costs about $10-15 per year depending on where you go. My domain name is “joshcanhelp.com”)?
• Do you have any content that has already been created? This includes product images, marketing copy, articles, company logo, anything.
• Does your company already have a logo? Color scheme? Marketing collateral that needs to be mimicked?
• Do you want to learn how to update content on your site by yourself or will you need assistance? This will depend on the site, your staff, and the amount of involvement you want to have.

3. Do you envision anything for your site?

Are there features, designs, or layout aspects that you’re interested in? This step is optional because you may not have a vision for the site but it’s important to ask. To answer this question, I usually ask people to send me 3 or 4 sites that they like and tell me what they like about them (interaction, usability, aesthetics, layout, etc). It’s good for me to understand your vision of the site so I can create something that you like and something that you’ll be proud to show people. I have worked with many people that come to me with a site that they did not have a lot of creative control over. If I see sites that you like then I can get into your head a little more.

During this step, I also want to explore what you see for the site in the future. Will there be more information later? Additional products? A blog? A gallery? The more information I have at the start, the easier I can make changes later. Having a short-term goal for the site with a vision for it’s future is great and will save you expense and time later.

4. Plan, budget, time frame, and paying Josh

With this information, I come up with a plan of attack for the site. This plan includes:

• A vague idea of the design and layout
• A list of suggested features based on what you want and your goals
• A cost estimate
• A suggested timeline

Once we agree on a budget range, I ask for half up front with the expectation that the rest is paid upon completion. Other payment options can be explored but I don’t release any files until the final amount due is paid.

5. ATTACK!

At this point, it’s time to get busy. First, I’ll come up with a content structure and navigation suggestions. Before we move on, I explain this plan in detail and make sure that everything is up to client expectations. Next, using this structure, we’ll come up with a Photoshop design for the pages themselves. Usually one or two photoshop files can suffice for the site unless each page is different. Tweaks are made, images are shared, and the project moves forward.

If we’re also handling keyword analysis, we’ll walk through the selection process and settle on the words to be used throughout the site. It’s important to nail these down early so they can be build into the site instead of being added at the end (saves time).

At this point, I also ask for all content, images, and logos that will be used. It’s ok for this information to come little-by-little but I need to be aware of everything that needs to created so the project does not go over-budget or far past the deadline.

6. Ongoing…

Throughout the process, I keep in very close contact with my client. I host the site on my URL and email as steps are completed. Tweaks are made, content is added, and everything comes together.

7. In the home stretch

Once the site is build according to specs and I’ve had a chance to scrutinize everything, I’ll ask you to make a very thorough walk-through to make sure the content is what you wanted and that no mistakes slipped through the cracks (we’re all human). You’ll want to look for the following:

• Correct images and content in the right places
• All information provided is incorporated
• Navigation works well
• Aesthetics are what you were expecting

I ask that all changes and modifications be submitted within a couple weeks of finishing the site. Mistakes on my side are corrected no charge (of course) but deviations from the originally supplied content and design will be charged at the regular maintenance rate.

8. That wasn’t so bad now was it?

When the site is completed and approved, I burn all files (PSD, HTML, JPG, everything) to a CD and, once the final payment is made, I upload all the files, send the CD, and test the site one last time. Your sales go through the roof, praise comes from far and wide, and the book/movie deals come rolling in (results may vary).

Sounds good, doesn’t it? If you need a website, blog, or other kind of on-line presence, download my pre-website homework form and let’s get it started!

Related posts:

1. Building a homepage from a blog: Part 2: Finalizing the design and planning out mark-up and CSS structure. Introduction Last time we left off, I had put together...
2. Building a homepage from a blog: Part 1: Conceptualization and Planning I’ve grown bored of my original homepage’s look and feel...
3. Recommended reading for web site owners The JoshCanHelp Recommended Reading list This post is because you...

There is nothing better for search results, returning visitors, and web loyalty than a useful and oft-updated blog feed. Some people aren’t familiar with blogs and what they can do so here’s a quick run-down.

A blog, in it’s simplest form, is just a feed of information in chronological order (the feed itself is call an RSS feed). It can be a personal journal, a list of work completed, an article distribution service, a book in parts, a photography collection, a news source, or anything else that would benefit from constant, up-to-date information.

A great business blog is updated regularly (daily, twice a week, twice a month), provides timely, relevant, useful, and unique information, and relates directly to the company or individual producing it. As an example, my blog is where I collect information about what I do, who I help, and thoughts about my industry and clients. It keeps my up-to-date on what I do and gives me a sense of reputation when people come to the site. It’s also great search engine fodder because Google, Yahoo, and the like look for sites that are updated regularly.

Blog posts can be short or long, include images or not, and be written by one person or a team of people. All you have to keep in mind is this:

• Make sure that the blog has a voice and a reason for being. It might take a few months to find your voice right but the reason for being should be front and center.

• Always think “can I blog this?” Stop sending out links and articles; rather, point your colleagues towards you blog and post them there. Make it the voice of your buisness.

• You don’t have to post everyday but make sure you’re somewhat consistent. Best-case scenario, your posts go out on the same day each week. If not, at least commit to a weekly number of updates.

Here are a few related posts you might be interested in:

• Good advice to a client about building a blog from the ground up
• I learned something today
• Blogging 101: How to Write a Great Blog Post… a Reader’s Perspective

Related posts:

1. Creating a functional, useable, linkable website: write a few articles The reasons for writing articles about your topic of choice...
2. Good advice to a client about building a blog from the ground up I built a blog a couple weeks ago for a...
3. You want to create a website but why? Make sure you can answer that question… The urge to create a website comes from many different...

Please let me know what you think!

Related posts:

1. New custom WordPress theme and structure at JoshCanHelp I finally made the time to finish my site’s re-design...
2. Clearly, I’m having problems with my blog… no theme loading, no CSS The theme has gone missing. I assume it must have...

Last time we left off, I had put together a structure of what I wanted my website to display and what it might look like. After about weeks of stressing out in Illustrator, I finally decided on a design I like.

Matt Jurman’s article, mentioned in the previous post, speaks to a high quality design and says that the following elements should be present for a design to be considered “high-quality:” balance, unity, emphasis, contrast, and rhythm.

I’m new to all of this… how can this article help me?

Welcome to the new format of all of my blog posts (news items and quick ones not included). I’m worried that I might be struggling in a vacant gray area between the “knows” and the “know nots.” This blog is specifically for people who are just starting to explore what technology can do for them and their business. As such, I want to position everything that I write to face towards the novice, not the expert. I feel like a perpetual novice, always learning, and when I share that knowledge, I feel like I know it better in the end.

So, what does this article do for the novice? You’re either someone exploring web design for the first time, a web coder or developer who is trying to improve their design skills, or a complete web novice who wants to come up with a picture of what their business or personal site should look like. Whatever your situation, you want a web site that looks good, does what it should, and isn’t too hard to maintain. I strive as much as possible to build with those goals in mind.

This article walks through some basic aspects of design and shows you how I used them to create a picture of what my site will look like when it is finished. I used to this “design language” and “core elements” were just a bunch of fancy words people used to look smart. I was surprised when I actually took the time to understand them and practice them and found that my designs improved drastically. I want to help explain these concepts to you, show you how they work, and give a few resources where you can read even more.

My web site design in words

Balance … the headings (like “Home,” “Hire Me,” etc. as well as “Contact” and “News & Information”), logo (“Josh Can Help”), light header text (the “tame your technology” at the top), and lion tamer icon all provide the “heavy” while the rest of the text provides the “light.” It’s the interaction and distribution of heavy and light that make appropriate balance.

Balance can be used in several different graphic design elements… Creative Curio explains

Unity … All my freelance-related elements (yellow text) are grouped together on the right and all of the blog content on the left. Also, navigation elements are together, blog sidebar functions are together, and the posts are formatted similarly to come together as one. Groups of objects allows for macro white-space and makes finding the information you need much easier.

A List Apart speaks about white space (excellent article)

Emphasis … The left sidebar is prominent and draws the eyes through the navigation down to the tamer icon at the bottom. On the right, the headlines grab the attention subtly. Though the emphasis in this final design is how I want it, it’s the flow from focus point to focus point that is the most difficult. You want to provide a bold visual element to attract a visitor’s attention and then lead their eyes through the elements you want them to see. I’m not sure if I’m doing that appropriately but it should not be too hard to fix ex post facto.

Contrast … There is the obvious contrast of the left sidebar with the white space on the right. There’s also contrast within the sidebar with the colored navigation items along with the logo at the top. In the white space to the right, the black text on white background is the ultimate contrast. I would like to use a bit more exciting colors but it seems like the more vibrant they become, the more I lose the already minimal vintage feeling the website has. I may need to play with this.

A List Apart (again) with a very in-depth look at contrast. It’s a lot to understand but important.

Rhythm … the blog posts are formatted similarly and the blog widgets on the right will have similar formatting between them. The navigation items also have a rhythm between them. I see visual rhythm in a similar way that I see unity. Each of the different elements should roll from one to the other within the group. As soon as the

Here are a few of the highlights:

>>> I had a little bit of fun with the colors without going overboard. As you can see, there aren’t a lot of colors and the ones that are there are not particularly bright. I’m a big fan of very colorful artwork but I save my own exploration of this for my graffiti. My audience and my potential customers are typically over thirty (possibly far over thitry) and probably wouldn’t have the best reaction to a busy, extravagant design. My own design style concentrates on typography, cleanliness, and simplicity and I think this page reflects that.

>>> One recurring theme you see on the site and in my business in general is the lion tamer silhouette. I really like this symbol and want to use it as one of the few shapes I’m using on the site. You can also see I’m playing with some of the vector decorations that frame my business card. These two elements lend a slightly vintage feeling to the design while keeping it from feeling stuffy.

>>> The emphasis is clearly on the information to the left of the screen. This is (in order) a description of the work I do, a summary of the work I’ve done, and a blurb about me and what I’m all about. The next element are the blog posts which are secondary to the information you need to hire me for your projects. Finally, if you’re interested in reading more on my blog, there is the typical sidebar with information, ads, and more widget fun.

Here’s what might change:

+++ The description in the center might be different or look different. I don’t want it to compete with the “Josh Can Help” logo but it should draw the eye back up from the left sidebar.

+++ The left sidebar color may change. I’ve tried many different ones and I think I like the current one best but I’m not sure.

+++ The menu item descriptions may fall below the main text or appear when the mouse hovers over… not sure yet.

What’s next?

Complete and total destruction. I’m taking the default WordPress theme, stripping it bare, and building back up into something wonderful. I’ll give an overview of what I’m doing and why but I don’t want to get into the nitty-gritty code details because it might be a bit too high-level (la-tee-da).

Related posts:

1. Building a homepage from a blog: Part 1: Conceptualization and Planning I’ve grown bored of my original homepage’s look and feel...
2. New custom WordPress theme and structure at JoshCanHelp I finally made the time to finish my site’s re-design...
3. New new business card design: the process + feedback My last business card ordeal was such a cluster that...

I’ve decided to use WordPress as my page for a few reasons:

• Constantly revolving, current information gets the attention of search engines MUCH better
• Homepage is getting zero hits monthly, this blog gets several hundred.
• I need to spend more time helping people and less time futzing with my own site
• Content management is much easier and I don’t need to think about where new stuff will go
• WordPress aesthetic is attractive

To get through this long process without driving myself crazy, I’m going to use an excellent web site design guide I found a while back. It’s called, appropriately, 12 Steps to Creating a Professional Web Design and it’s by Matt Jurmann. Though I’m new to the web design discipline, I’ve always had an organized mind and like walking through a process step-by-step rather than smashing my way through it. Matt’s article puts all the important steps in a logical order and presents it very accessibly.

So, what does Matt recommend as step 1? A three-stage design process to wring out all of those great ideas out and onto the table. And, with that, we begin…

Step 1: Design (stage 1: The Flow)

I’ve worked almost exclusively with non-designers on the web, email, and print projects I’ve been involved with and this step is always conspicuously missing. Don’t get me wrong, I’m definitely part of the problem, but two people on a mission without a concrete plan or idea of what they’re trying to communicate is a recipe for disaster.

The Pieces of the Puzzle

Let’s nail down what I’m trying to do with this project (keep in mind that I’m writing this as my brainstorming process). It’s of the utmost importance that I vocalize what needs to be accomplished and then stick to these throughout the process:

• I need, first and foremost, a digital business card. The most important reason this website exists is to get me new clients and make new connections on-line. For this reason, the fact that I’m for hire and my contact information needs to be present and somewhat prominent everywhere.
• The clients that I want/expect are not going to be greatly technologically savvy. As such, everything needs to be easy to use and easy to find. Form MUST take a back seat to function; this is not so much a creative outlet as it is a funnel for the technologically challenged.
• Because I like to write and my writing brings clicks and new people, the blog feed needs to be prominent on the site and be an integral part of the process. I want to post news, happenings, hirings, new projects, completed projects, design inspiration, and how-to guides. Anything new added to the site will likely end up being posted on my blog at the same time.
• I need a portfolio to put my completed work and anything extra that I do for myself. There are a few different types of work that I do and each one needs a bit different type of “gallery”
• I need a place for my resume (I have a page for now). This includes experience, qualifications, mad skills, recommendations from LinkedIn, and completed projects.
• The site needs to generally match the style of my business card. Either white or off-white background with a concentration on typography and simplicity. My target audience is not designers or tech-savvy people so I want a layout that’s very easy to use and visually appealing.

Skeleton Styles

I made a quick sketch in the car during a recent trip.

Everything with an underline is it’s own page. You can see that this is going to be a nice, simple website. I don’t want a lot of pages to manage and if I need to add content, I’ll add it as a blog post and link to it. I want my concentration to be on adding posts and blogging about the work I’ve completed. I also want potential clients to be able to scroll through my work quickly and only read more about the ones that interest them (links to posts).

Thoughts on Design

The next step is mocking up the pages and figure out how everything is going to come together. I’m not completely sure but I have a few ideas. Here’s my first draft for the layout. Comments on style and usability are always welcome.

I see a few things to change already but so far so good!

What’s Next?

• Start moving content into the blog before any design begins. I want to get the copy finished and formatted before I move forward with the theme creation.
• This is just the home page; work still needs to be completed on all the other pages, particularly the portfolio pages.
• Start looking through a few inspiration sites to add a bit more personality (light pattern in the background maybe)
• Find a blank or simple theme that I can start working with.

Next post: finished home page and portfolio designs!

Edit: I future-posted this and have completed a few of these items and taken the deign in a different direction (the one above it too “Josh” [if you know me then you know what that means]).

Related posts:

1. Building a homepage from a blog: Part 2: Finalizing the design and planning out mark-up and CSS structure. Introduction Last time we left off, I had put together...
2. Good advice to a client about building a blog from the ground up I built a blog a couple weeks ago for a...
3. Path forward: How Josh Can Help Plans and Approaches Building a New Web Site from Scratch I was contacted recently be someone who was curious what...