Paul Segsworth: April 2010

Monday, April 26, 2010

Building a great portfolio website

What are the basics needed on a portfolio website? I started to compile such a list and, in my research came across this great list at smashingmagazine.com (article by Lee Munroe). I've modified and re-worded it a little to fit my needs. But look up the original. It's a well thought through article.

1. First of all and most obviously, the site should be artistically outstanding and professional-looking with perfectly validated HTML and CSS. It should render well on all major browsers and be easy to navigate.

Which, of course, is why so may designers (like me for instance) tend to put off doing their personal portfolio site. It's intimidating. Our personal goal is probably higher than what we can achieve. Still, if everyone waited until we could achieve perfection, I guess nothing would ever get done. So, jump in.

2. Name/Logo: The name(and/or logo) should be the first thing the viewer sees. The name should be large, easy to read and in the upper left corner. The viewer should not have to search around to identify who the site is about.

3. Tagline: After the name, this should be the first thing the viewer sees. Answer the question: "Who are you and what do you do?"

4: Portfolio: If this is a portfolio site, it should predominant and easily accesible. Obviously, your strongest projects should be displayed. Less obviously, the projects should be what viewers would need to see and not necessarily your personal favorites. Usually just a cropped portion (a "teaser") is shown. Both the small cropped image and the title of the piece should be linked to the larger screen version. If websites, link image to the live version.

5. Services: List concisely what you have to offer - your skills. This isn't a full resume, just your main skills and strengths. Answer the question: "What are viewers be looking for?"

6. About me: This is often a neglected feature on many sites. The tendency is to think that "my work will speak for itself". But people are always more trusting and willing to do business if they feel they know someone. One website said this is the 3rd most popular page on their website, after Home and Contact. People want to know who's behind the site. An introduction should be on the Home page with more in-depth information on the About page.

The personalization can, of course, be overdone. I've seen some sites that look like recent college graduates with home pages dominated with a large personal photo and dialog something like this: "Hi, I'm Lenny, and I'm the answer to all your needs. Hire me"

7. Contact: The contact page is also often neglected. The contact page should be easy to find and inviting to use. Use a well-thought through form to gather as much information from the view with the least amount of work from him (or her).

8. Blog: Blogs are kind of new to me and this year I've been pushed to keep a blog going. Blog about your expertise. Use an RSS feed. The more readers your blog gets, the more potential links to new business you have. Frequently updating blogs keeps viewers returning to your site.

9. The site should emphasize a "call to action": Individual pages should have prominate "next step" "view my portfolio" "get in touch" "hire me" links.

10. Social networking sites: have prominent links to twitter, facebook, linkedIn etc pages.

Labels: Portfolio, Web Design

Tuesday, April 20, 2010

Spam-Proof emails

My email ad/newsletter is basically finished (at left). There are, as always, still a few bugs to figure out.

One of the things I had to deal with when working on this project was avoiding getting caught by all the spam filters out there. Spam filters apparently work using a scoring system. Specific word or patterns in an email add negative points to a score. You get too many of these points, and the whole email gets labeled spam.

What do you need to avoid to pass the spam filters? Here are a few of the biggest issues:

1. What's in the Subject Line. This is one of the most sensitive areas. Some things that get flagged are: words in all caps, the word "free", name or email of the recipients, and many other things that sound unprofessional or "spamish"

2. Spam-like content. Avoid words and phrases that seem to be in all those spam emails you get. Avoid things like: "Click here!" or "Once in a lifetime opportunity!" In fact, you need to avoid overuse of exclamation points, especially repeated, like: "!!!!!!!!". Certain words tend to be "trigger words" to a spam filter - obvious words like: "free!", but even words like: "trial", "sample", "quote" and "access".

3. Don't send attachments. Attachments often carry viruses and are usually weeded out by filters.

4. Avoid too much colored text. Spam filters look suspiciously on colored text, especially red, which tends to be associated with questionable emails. Keep the text black on white for the most part.

5. Small file size. Most spam emails are less than 20K, so keeping the file size larger than that avoids being suspect by the spam filters. Of course, if you get it too big, people will have trouble downloading it.

6. Unsubscribe line. Make sure the email contains an easy way for recipeints to remove themselves from the distribution list.

For more information, look at this article at subhub.com.

Monty Python and SPAM

In doing the work on my email campaign project, I came across the origin of the word spam as meaning "unwanted emails".

The word apparently originates from a Monty Python sketch back in 1970. The sketch is set in a cafe where nearly every item on the menu is SPAM-based. As the waiter recites theSPAM-filled menu, a background chorus of Vikings drowns out all conversation with a song repeating “SPAM, SPAM, SPAM, . . . lovely SPAM”, hence “spamming” the dialog.

In the very early days of internet, some users, apparently fans of Monty Python, sent messages comprised solely of the word SPAM, repeated multiple times. Some of these messages even contained the dialog from Monty Python sketch. These messages, in the days of slow server speeds and slower hard drive speeds, were labeled "spam mail". The term eventually broadened to include any unwanted or abusive email. More at Wikipedia.

Labels: Spam, Web Design

Tuesday, April 6, 2010

Designing Email Spam

So our next assignment will be to design HTML e-mail. Which is a fancy way of saying we're designing e-mail spam. I get a half-dozen or more spam e-mails every day, most of which look pretty pathetic with every other word misspelled. Though a few, from MacMall, Apple and various software companies I actually don't mind too much and these few look like someone spent at least a little time and thought on them.

Designing HTML e-mail is very different from HTML web design. Designing for email is apparently like HTML design 20 years ago. Everything is table-based and the list of do-nots is a whole lot larger than the list of can-dos.

The first and biggest difference is with CSS. No CSS can be put in the head or linked document, so all CSS must be placed inline. There is fortunately a automated way of moving the CSS from the head to inline, using free services like Premailer.

In addition, a lot of CSS properties are not supported. Many things, like colors, need to be placed within the HTML rather than using CSS. Most common CSS shortcuts (like the font shortcut list) don't work either.

Second, the layout is done almost entirely with tables. Width, margin and padding are not rendered consistently in different e-mails, so widths and spacing have to be set within each cell.

Images are going to be the biggest problem. Since many email users have images turned off by default, then a possible majority of viewers may not see the images. The overall design has to make sense without images, include background colors, and don't forget the alt image description. Also, PNGs don't work for all email clients, so images need to be jpeg or GIF.

This is just an quick summary of the basics. A very in-depth (and very readable) article is at: 24ways.org.

Other useful references on the web are:

http://www.mailchimp.com/articles/how-to-code-html-emails

http://www.campaignmonitor.com/

http://htmlemailgallery.com/

Labels: Web Design