Josh Can Help updates…

I meant to use this blog as a place to update information about my business and maybe some relevant personal stuff but I’m so boring that all I write about is work and coding! I’m a hoot! So, here’s what is going on with Josh Can Help.

Letterpress cards are on their way soon

Thanks to Preston Grubbs for a great deal and awesome customer communication. I’ll be giving him official props on here once my cards show up and he gets his website up. Needless to say, I’m very excited. If you’re interested in cards like mine, I can design them and get them printed for a great price.

Client Success!

One of my recent clients was chosen to appear in a featured artists section the magazine she was advertising in. I created her print ad for the magazine…

Could my ad have had a hand in her success? I’d like to think so but plausible is that she has a great talent with a niche artistic style and her paintings can’t help but to make you smile. Good job Elise Nicole!

HTML emails

I just spent a few days researching and exploring the best practices for sending HTML emails. It’s a bit of a P.I.T.A. but once you know, it makes a bit more sense. Look forward to a big post on this.

On that same note, I was asked to do a live video training on building HTML emails next month. This is very exciting for me because I love training (particularly over the net) and I really wanted to spend some time perfecting my email-creating skills. It’s nice getting paid to do what you like to do!

In the meantime, here are some excellent references:

How To Code HTML Email Newsletters

Sitepoint gives a great break-down of how to create HTML emails that most people can read. It covers the necessary table layout, how to use CSS, best-practices, and information on Gmail (which, surprisingly, doesn’t support very much CSS at all).

HTML Email Tips for Web Designers

MailChimp (my new favorite little company) has a great blog that shows off interesting email campaigns and shares best practice information. The link above goes to an entry that gives some great tips for people coding emails. Also check out their template library for some free templates (they need a little bit of work, in my opinion but they’re free and work very well for the most part).

Word 2007 HTML and CSS Rendering Capabilities in Outlook 2007

A bit dry but that’s to be expected from MSDN and Support pages from Microsoft. Incredibly useful as well, another characteristic of their pages. If you want to know what will and what won’t fly in Outlook, check this article out. If you stick to this, it would be hard to go wrong in other clients as well.

I’m Older

I got officially got older on Tuesday. No outbursts, drunken debauchery, or mental breakdowns. I think those come next year.

Screencasts: recording on-screen training videos

As internet connection speeds get faster and video file sizes get smaller, we’re seeing more and more on-screen training for products and processes that typically would only have a written manual (or nothing at all). This videos are an excellent way to learn a product, especially if you have trouble reading text on a screen or get bored easily. Additionally, videos provide another ‘visual’ layer for people who learn that way.

I recently had my first experience with Lynda.com watching some of their free videos on Illustrator. After watching only a couple of them, I was totally sold. I’m also in the process of making a series of videos showing people how to use a certain functionality of a software program I’m working on. Working with both the consumption end (watching) and production end (making), I’ve learned quite a bit about what works and what doesn’t when recording these on-screen videos. I’ve also learned that they are a lot harder to make than they look.

I want to share a few tips that a colleague and I came up with while making these videos. For reference, we’re using the Camtasia 5 software to record and edit the videos. While it isn’t perfect, there isn’t too much more to ask for and I’m not considering a different solution at the moment. Thanks to Mark Otis for a few of these ideas.

What’s the point?

Video training is a great way to show complicated steps or describe potentially confusing theories. Video training, however, is not great for short, easy tasks. If I wanted to show someone how to recover a file from their recycle bin, it is easier to simply say “open the recylce bin, find the file, drag out of the recycle bin” than it is to make a video.

The point being that not everything lends itself to being taught in a video format. To make a successful video, be sure to think about it from the student’s perspective. Do they gain anything by seeing it on a screen? Are there complicated steps that work better shown than told? Even better, do these types of videos already exist out there? Before you start, it might be a good idea to run a quick Google or Youtube search for your subject matter.

Start with an outline

Off-the-cuff demonstration is VERY difficult to pull off properly. By that I mean it’s pratically impossible to effective teach people without a guide to tell you what is next. Watch a presentation without a clear, concise outline or a script and you’ll notice that the presentation jumps around, misses topics, and ends up somewhat to extremely ineffective.

Even if the video is short, have precise steps to take on-screen available and print out or write down the points you want to make. It is FAR more important to have an effective video than it is to sound casual. Be clear beforehand what you will be showing and communicate that to the viewer within the first ten seconds. Stay on task, follow your outline, and err on the side of conciseness.

Test it out

Take it from someone who spent over four hours just to come out with one six-minute video: test your equipment. It takes 5 or 10 minutes to record a piece, run through the steps, make sure all the necessary files are there, and watch a finished product. This will save you hours! Listen for puffs of air on your “Ps” and “Ts”and adjust the mic accordingly. Make sure that the finished product can be heard clearly and that there are no problems with your powerpoint or the demo software. Produce a video all the way to the end and watch the finished product. Sound problems are the most common issue with on-screen demos and can be very frustrating to someone watching the video. Witha  bit of preparation, you can avoid headaches for yourself and your viewers.

Consider screen resolution

Screen capture video programs let you modify the size of the capture window you are using so if you’re going to shrink the capture size down to a small size, then your resolution is not terribly important. If, however, you’re wanting to capture the entire screen (from, say, a Power Point presentation), you’ll want to modify the size of your screen display (the resolution). To change this in Windows XP, right click on your main desktop window, select Properties, then the Settings tab. Try 800 x 600 first and, if that’s too distracting, then try 1024 x 768. Remember that what it looks like on your screen is different from what it will look like once it is produced. Reducing the screen size will cut down on the raw video file size and make it easier for the program to shrink the size when it is finished.

Turn everything off

Before you start recording, consider EVERYTHING. Is the window open, letting in a lot of noise? Is your IM turned off so you’re not interrupted? Is the background picture on your desktop distracting (or inappropriate)? How about the icons ON your desktop? Is your phone muted? Are there any pop-ups happening? A great way to avoid computer interruptions is to make a new login to your computer and remove everything off of the desktop. In Windows XP, go to Start > Control Panel > User Accounts and create a new user. Then, switch users by going to Start > Logoff and selecting Switch Users, then logging into the new account. Keep this second account “clean” by not installing or logging into any programs that cause interruptions.

Update 8/20:

Smashing Magazine just posted an article about screencasting yesterday… check it out.

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 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).

Did your website or blog just crash suddenly? You might have a problem with your permissions…

So I’m still mad at my web hosting company… really mad. Just recently, all the pages hosted on my account began to fall apart. I was getting 403 errors, missing graphics and styles, and pieces of code appearing randomly. It looked about as bad as it could get and I was at a total loss about what to do with it.

Without going too far into detail, my hosting company was of absolutely no help to me whatsoever despite, in the end, this being a problem on their end (as far as I can tell). Long story short, my .htaccess file got messed up somehow and all the permissions on my folders and files were changed. Are you lost yet? I was too before some major Google research.

What are hosted file permissions/attributes?

Each of your files and folders have a code attached to them to tell the server who gets to see them, write to them, and execute them. There are basically nine “yes or no” checkboxes that can be checked for each pile or folder on your webhost. Here is the permissions screen from Filezilla:

If you know what you’re doing, this can be a nice thing to know about. You can set individual permissions based on where the request is coming from and what the request is asking for. In the window above, you can see that the owner can do everything, the group the owner belongs to can to anything but people accessing the file from the outside (through the web page) can only see the file (Read rights) and work it do it’s job (Execute rights); they can’t write to this file/folder.

For your webpage to be functioning properly (I learned), the public permissions for ALL files that are touched by the page have to be at least on read. For a blog, like the WordPress instance you’re reading this on, the public permissions need to execute as well (to run the PHP script that this is written in). I learned a lot of this on the helpful (but not VERY helpful) WordPress forums.

One night, this mystical .htaccess file in my root public directory (the main one) became ill, I guess, and vomited incorrect permissions arbitrarily over my site. The consequences of this were random files unable to be seen from the outside and, hence, broken websites. Files that described how the site looked (CSS files) and images became inaccessible, as did all of the files that make a blog do all the fun things it does. In the end, I went through each site manually and changed the permissions to the numerical value of “755,” the magical number (allows everything except write permissions for Group and Public).

How can you tell if this happens to you?

Here’s what I was seeing…

Your site starts giving “403″ errors

The 403 error indicates that the file you’re trying to view is there but you’re not allowed to see it (it even says something about permissions in the error). If you haven’t done anything to your site and you start to see these errors randomly when you try to access your pages and/or sub-pages, you might be dealing with the same thing I was.

Some things work, some things don’t

You can see your text and HTML formatting (order of text, heading formatting) but no images or colors or style. This means that the site is being accessed but other files are not. This kind of thing combined with a 403 error is a strong sign that your .htaccess went south and you have some work to do.

Along with other weirdness, you’re getting “Internal Server Errors”

If you’re just getting an “Internal Server Error,” it might be indicative of a different problem but, combined with no styles and/or 403 errors all over, you’re seeing exactly what I was seeing and it’s time to take action

Crap, I’m seeing all these signs… what next?

First and foremost, contact your host and get a trouble ticket started. If you have a responsive host, they can change the .htaccess back to what it was and hopefully correct the problem. If they are not responding or don’t know what to do (which is ridiculous, let me just say that) then you’ll need to get in there yourself. Can you FTP into your files on the host? If you don’t manage your own site, contact your webmaster and tell them you might be having permissions issues with your site. If you do, then get to work…

1. Using your FTP client, go to your root directory (the main one, probably named something like “html” or “public_html”).
2. If your hompage is having style/color/image issues, look at the file attributes (in Filezilla, just right-click and select that option) of the .CSS file.
3. What you want to have is read rights for everyone, execute rights for everyone, and write access for the owner only (this is “755″ level). If your stylesheet is not all allowing for the public to read it, you found the problem.
4. As long as everything in the main folder (and all files in all sub-folders) should be seen by the world, then just right click the main directory, type in 755 (or select the right options), pick the option to propagate the changes (or make them “recursive” through everything), and click ok. If there are certain files that need to stay unobtainable, you’re going to have to manually do everything. Just remember you can select all/several fiels at once and change their permissions together or use the recursive option to change the site one directory at a time.
5. If none of this is working, email me at josh (at) joshcanhelp.com and hire me as your webmaster!

Good luck out there!

Building a homepage from a blog: Part 1: Conceptualization and Planning

I’ve grown bored of my original homepage’s look and feel and I’ve been meaning to build a theme of my own for this blog so I’m combining the two projects. When I’m complete, joshcanhelp.com will point to a home page on this blog, directing people to information about me and what I do.

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]).