Graphic Design Hell

Next Level, get on my level.

Seriously?
I suggest you design and build your website before looking like idiots. 

It seems like this isn’t every item, but this still reflects poorly on them.
There are better placeholders out there, I’m sure. I wonder if someone placed “test2” on a template and things got built out that way.
A more wise decision would be to use a placeholder that doesn’t print. Span comes to mind immediately, though I’m sure there are other options.

With Span as a placeholder, you could give it a class “placeholder” and even more specific classes “placeholder primaryNav” “placeholder secondaryNav” “placeholder primaryNav homePage” and so on.
That way, you have an element that doesn’t print and won’t make you look foolish. You can easily find+replace these terms. 

Way worse offender after the break.

Read More

Drive-by Critique

Introducing a new segment: Drive-by Critique.
I find a website that irritates me, critique them, and vomit my critique into the ceramic basin of baseless credibility. 
Up next: pissing into the wind, shouting into the void, and head-against-wall slamming. It’s design talk-therapy, I guess.

Drive-by Critique: TriTown USA

My problems:

1. The URL of one of this site is a redirect. 
   This is fine if you’ve got a gimmick URL (which is (never say never) RARELY a legit “strategy”), but main content of a website should obviously not be on a redirected URL. 
2. Zero Content
   If you’ve got a website that you want humans to read, you’ve got to allow robots to read it. If you have a website that consists of (literally) 6 image links (3 of which are redundant), a © statement, and 3 (REDUNDANT AGAIN?) text links… you have no quality content to index and your site is absolutely inaccessible to anyone using a screen reader (there isn’t even alt tags for the pics!).
   When I see websites like this, either a) someone did a REALLY good job for not knowing html, web best practices, or accessibility standards (which are part of best practices, but important separately—it also fills my list to three items) or b) they did a half-assed job that looks “great” (not my style, but whatevs—certainly not crappy looking). If it’s the latter, it’s a great 1-day website. But c’mon! The pieces of this site that are lacking should be part of building your website and don’t take that long!
   No meta tags? None? That’s why your google result lists your text links (your only text on the page!) as your description. Sloppy.
   Why title your page “Blahblah | Home” if it’s a splash page? YOU CAN’T LEAVE HOME. Well, we wouldn’t want to ET ourselves.
   To add insult to injury, all the links open in new windows. Shoot me. Your splash page is that important that you have to make sure I don’t kill it?

What would I have done?

1. Take some time to set up the website. HTML text is accessible and indexable. Rather than set up the page as only pictures, there should be background pictures with text on top.
2. It’d also be nice if the active links were contained within the button area, so users see their mouse change states and know they’re clicking on that button. In this case, it is less clear what’s going to happen because the mouse state doesn’t change from one area to the other (it’s always in the pointer state). An isolated button area makes it clear you’re clicking something to “find out more” when mousing over the button changes the mouse state. 
3. Details are important: images need alt tags, links need purposeful targets (or none, thanks), and a favicon makes a site look polished (and is EASY!).
   
   Even half of the above would be a significant improvement. 

Also, in the same family of websites is NationsTri.com.

Obvious fail: slideshow code snafu.

Easy code is easy. Easy code is still code. When you get some copy+paste code it’s easy to think you’re done when… you’re not done. It’s easy to mess things up, especially when you fail to check browser compatibility.

Which brings me to some handy-dandies:
W3C’s Validator - for validating HTML (etc)
W3C’s Validation Jam - miscellaneous validators for css, links, etc
JSLint - for validating JS
And a handy article with tips for JSLint by a man with a beard. (The rest of this blog is packed with tools, links, tips, and fun. Too agreeable and optimistic, perhaps, but certainly a resource.)

JS ooh-ahh Expose!

Lucky for you: I pressed backspace while not in a text area and my browser went back, deleting the delicious rant about an unqualified Webmaster and my own insecurities.

Anyway:
Check out this nice use of jQuery TOOLS’s .expose action at The Sketchbook Project.
Click on the “Participate” form or menu tab at The Sketchbook Project to see it EXXXPOSED!

The grey is a bit too dark for my taste, but it is certainly a noteworthy effect.

The thing about using JS for this is that I cannot, for example, send my friend a link to the “participate” form. (Or can I? I’m not sure, but I’m going to assume I can’t.) Instead of sending to a page where the main content is this form, I have to send her to this site with the form on the right.
My friends are not stupid, but some people are.

If there were a method to link to this page with the participate form already exposed, it would be lovely.
Is there a way to link to a website and cause a JS action?  I suspect this would have to be coded into the site (ie: mysite.com/sketchbook/participate) where the JS action (in this case .expose) is sent on load.
I think I remember that “onload” is not best practice for this, but I forget what is.

I like JS, can vaguely understand it (code is not my forte, though I passed my classes and was told that I had a strong understanding of the concepts… I can’t get the logic of laying out code. For some reason I can’t make the concept-to-practice leap)

The point I’m getting to: I just failed the w3 Schools’ JavaScript Quiz.
Short rant: JAVASCRIPT IS NOT JAVA. It is a different language. I have been told by people getting paid to write JS that it’s “like java”. It is not, and now I know that you don’t know what the fluff you’re talking about AND geh cocken offen yom.
You may be working for the DOD, sir, but you are obviously not hot shit if you can’t even understand what you do on the most basic level. 

Preparing Halftones for Screen Printing

I got an order for screen printing with a mess of gradients and small highlights of color.
I knew when I saw it that this order would be cancelled.

On the off chance that the customer actually wanted a 2/6 shirt, I wrote up a quote for that.
Also included: a 4 color process quote.

Obviously, a 4c print is cheaper than 6 spot colors, so the customer chose this.

This meant I had to remember how to convert to halftones (something I don’t get to do a lot, but enjoy).

Rather than describe it (which would only turn into a rant about who knows what), I’ll direct you to a couple awesome articles by Screensilk.
First, The Secrets that are involved in full color screen printing (watch out, the secrets are closely guarded by wizards) and
a How To complete with throw-back status CS2.

Side note: CS2 was introduced in 2005. CS3—2007. CS4—2008. CS5—2010. CS5.5—wtf.
If any of you are blessed enough to use CS2: wow, that sucks.
I used CS2 recently… it’s incredible to see how crappy it is in comparison to the following iterations.

Anyway, after modifying the provided art and making a simulated 4 color proof I was told the blue wasn’t dark enough.
I told them in the email I sent that the colors do not translate (see previous rant), but whatever.
I set up a proof with a spot blue and sent it.

Naturally, the customer cancels after all this work.

Granted, I couldn’t have provided a 4c process proof without doing all the work, but it’s still irritating that someone who “doesn’t have the money” for the job would get quotes and (after seeing quotes) ask to see proofs.

Luckily, I’m not an idiot and don’t send people working files for proofs, just crappy jpegs.

Superb SEO

Firstly, Superb SEO.
We’ll do a monological Q&A.

All questions, answers, and opinions are the author’s.
As in, I am asking myself questions and answering them. Fun game, why not? 

1. As an SEO provider, do you SEO yourself?
Yes. Superb SEO uses Yoast WordPress SEO plugin v1.0.1.

2. To be honest, I expected the worst when I saw an SEO provider “liked” my tumble basically saying that web designers do not need SEO (ok, it was rambling and unclear, but that was my message).
That wasn’t a question but I’ll answer it anyway with a quote from SSEO: “ …I want to offer SEO to non-technical minds who can grasp and see Internet Search as the most important method of marketing in the digital era.” Word, son.

Well, “most important method of marketing in the digital era” is a bit (very) far.
“Most important aspect of proper website building in relation to visibility” I’d partially agree with. 

He breaks down parts of SEO much more concisely than I ever could.

I got irritated with the broken anchors on the site, but (if you read this, Mr. Clegg) this is simply a misunderstanding of anchors and links.

1. Make your links (to anchors on a different page)
<a href=”TARGET-URL#ANCHOR”>

2. Make your subsections you’re linking to (on page TARGET-URL) named anchors 
<a name=”ANCHOR”> 

3. A man who prefers a shortened version of his full name is your maternal grandfather’s son.

W3Schools has examples of how to do write HTML/CSS/etc if you need a resource.

Also, your “contact” page is a 404, and “blog” is just an empty WP page. It is frustrating when websites (especially one as small as yours) have obvious empty/missing content.

Lastly, “I started Serperb partly because I enjoy food and heating.”
Fine hobbies both.

If you are angry or would like to write me, Mr. Clegg, please do so. I believe I have an “ask” function here, so you can use that.
If you have any interesting tidbits you wouldn’t mind sharing, that’s fun.

That was too long-winded to also discuss analytics.
It’ll happen soon. 

Web Analytics, SEO, and Wasting Time

Do you know what “SEO” means? (It means “Search Engine Optimization”)
Do you care? 

Honestly, I’m not sure why you should. 

Keep this in mind:

1. I am not an obsessive website owner
   1. I don’t own a website that makes money
   2. I’m not trying to scam people and/or convince myself that my websites are useful
   3. IDGAF about my websites, they’re just toys to play with (have you read this blog?)
2. I am not trying to prove anything.
   1. No one pays me to SEO their shit.
3. I have little, if any, experience in SEO.
   1. I have read about it… but:
      1. I don’t know current best practices.
      2. I have never had before/after experience with implementing SEO
      3. I don’t give it much credence.

If you are someone whose panties are already bunched, you’ve already left.

If your panties are not crammed with SEO garbldy-gook, hear me out:
SEO is good. SEO is a significant piece of your website.

Ever read a book?
SEO is like the printed title on the spine, index, chapter titles, and appendix.* 
Can you read a book without the aforementioned?  Certainly.
Is it easier to read a book with these? Certainly. You’ll be able to find it on the shelf and find the content you’re looking for on the inside.

What is SEO?**
Search engines look for websites using the text that makes up a website. 

If you’ve never experienced this, check out the skeletal makeup of this website.
This is usually a combination of HTML, css, and javascript (which is not the same as java, believe it or not).

I won’t go into how computers work… (rant about how computers work deleted)

For our purposes, websites consist of text. Quickly summing this up, this text jumble (see above***) tells the browser how to display the website and interact with the elements that make up the website.

Generally, more sensible the text that makes up your website, the better your SEO.

SEO begins at your address. Do you own a website about custom wood tables with the address of “www.gothslayer.edu”? THAT’S STUPID.

The easiest way to improve your SEO is to use a url that makes sense.
If I cared more about my SEO, I’d buy a domain name (say… “graphicdesignhell.com”) and rename my blog. I’ll keep it in mind.
Nevermind, GraphicDesignHell.com coming soon. (Ha, serious.) 

The second easiest way to improve your SEO is to use a CMS that helps you with SEO. Most blogs do this for you, by giving a human readable address to your posts (ie: http://whenwillilearn.tumblr.com/post/9890746665/testing-this-counter-code).

If you’re not using a CMS (Content Management System), just use common sense for naming your pages.
“/page1.html” is not good.
“/about.html” is better.
“/how-we-carve-your-custom-table.html” is BEST.

Redundancy is a less intuitive aspect of SEO.
Decent SEO considers content. You can’t SEO bullshit.

Reviewing:
1. Sensible domain name.
2. Sensible page titles.
3. Redundancy + content.

On Redundancy:
If your page title is “how-we-carve-your-custom-table”, chances are you’ll be talking about carving a custom table. You’ll use the words “carve,” “custom,” and “table.”
This is good.

Why is this good? Algorithms.

An algorithm has to do with math. Beyond that is beyond me.

However, it used to be that you could write a bunch of meta tags (ie: tables, card, card tables, drawers, wood, ebony, ivory, the sound of silence, beechwood, majestic fabulousoiuous tables) and a bunch of trash text (ie: small text at the bottom of a page in the same color as the background color) and, because of math, your site ranked high on a search engine.
No more! (And thank god)

You may remember the uproarious uproar from Google’s change that caused some (mostly trash) sites to rank much lower. Read the article, and you’ll get a bit of an idea how it is possible to be obsessed with SEO and why.

I lost track of myself:

WHY SEO DOESN’T MATTER THAT MUCH TO ME AS A DESIGNER:

I make websites that are part of a company’s collateral: the website supports the rest of the brand.
A website like eHow (or other “content farms”) are not a design problem. They’re a logistic (SEO) problem. The goal is to get people there, period.

Making a website for a restaurant, artist, local magazine, or local/regional ANYTHING is not something you need to go SEO crazy over.
Your content (which should be well-written and relevant) is its own optimization.

Building your site well is part of SEO.
Construct your website to be accessible. Not only is this nice for people using screen readers, it helps with your SEO.
Use text links, or make sure to use the “alt” property for image links (this is part of accessibility anyway!).

Following best practices and guidelines will make it easy to use your website.
Easier for people to use and easier to crawl for the mathbrains of the little electronic spiders spinning webs in awkward dusty 403 corners.

Shit, now I realize I should have just written about what NOT to focus on during SEO.
Whatever. 

I also forgot the whole point of this post: how much I like the previous post’s analytics over Google Analytics. Crap, another time.

If you’re interested in web design stuff, may I suggest A Book Apart?
I’ve just started the series with HTML5 for Web Designers and it’s damn good. It’s an easy read, understandable, and not too preachy.
Thick, as far as I’d like to remember every little suggestion he makes, but at least ebooks are searchable.

*Oxford commas: I am constantly conflicted if I should use them or not. I grew up on MLA, but I don’t write anything significant (nothing published and/or making me money). Most people I have had the discussion with do not use it, but I don’t know why—they don’t write news and I don’t know anyone that was required to use Oxford style (let alone know anyone that went to Oxford). It seems to be a stylistic thing unless resolving ambiguity… but, shit, I need a rule to go by. I recently decided to drop it, but, thinking more about it, I think I’ll keep it.
I hope no one starts nit-picking my grammar/punctuation. For the most part, it’s not great.

** This link is to the same page. I was looking back at my blog and started to get frustrated at the _blank targets.

*** Can you link to anchors in Tumblr? This is more of a note to myself.

Testing This Counter Code

What analytics do you use?

I impulse-picked this, as is not uncommon for me with new code.
I usually grasp into thin air and see if it works. Obviously, there is more or less research depending on whether I’m getting paid (in this case, the research was the 2 minutes it took me to find the first tumblr-compatible counter that isn’t google analytics (because I’d like to allow the code to be open to show people how to poke at websites, hopefully… just an idea, at this point))…

I usually end up figuring out the bugs from the failure(s) of my first option and either research a better one, integrate another one, or try to hack my way into the problems with the original code.

Coding is easier than you think…
Ok, no… but it is possible to fumble your way through problem solving a bit of code to make it barely work if you have some basic problem solving skills (and a minimal understanding of programming).

Also, I forgot the good part:
The link below will take you to the report for this website. IDK how good it is, this is my first time implementing it… but we’ll all see, I guess. You can also be nosy and see who else is looking at this website.

Code below:

Statcounter.com Statistics

STOP WITH THE CAPS

I can read. When you send me things to read, I read them. This is part of my job.

When I read sentences, I acknowledge that some words are different than others. Even in paragraphs, I can differentiate one word from a different word.

There is no need to bold or capitalize words 

If you would like to qualify something as important, you can say something like “please make sure” or “please confirm” or “this part is very important.”
If you’re telling me what color shirts you want, I can tell the word “blue” from the rest of the paragraph. You don’t need to write BLUE.

While I almost disagreed with myself in the coming paragraph, I decided against it.
I was going to say, should a text’s complexity determine its typography? Sometimes. 
However, in this case, where we are writing a simple email, I need no parlor tricks to glean the meaning of your writing.
If philosophy books can go chapters without an ALL CAPS word, certainly your point won’t be lost on me if it’s formatted plainly.

However, if you want to sound smart in emails:
(how many times will I say this? forever.)

• Start with a salutation
• Write in full but concise sentences
• Sign with a farewell and your signature including contact information

If you want to sound smart in email replies:

• Please read the email you received. Even if you have to take a break in the middle, please read all the way to the end. I pay you the same respect.
• Begin your email reply with a salutation
• Write in full but concise sentences
• Address questions/proof acceptance/confirmation requests
  I can’t believe how many times I get an email back with one question of many answered or no answers at all.**
• Sign with a farewell and your signature including contact information 

** If you do not understand ANYTHING dealing with a printer, ask! They’ve heard it all and probably don’t give a shit. This saves time and trouble, and you can get some good insight just in one conversation.

Also, if you don’t ask about something you misunderstood, and you approve a proof and we print it and you throw a hissy fit, you’ve received what you earned.
However, if my boss allows you to reorder the (large) order that YOU were responsible for messing up, and he prints it for cheaper than your already bargain-basment-ignorantly-negotiated price, you should realize how amazingly nice my boss is for eating a loss of hundreds of dollars rather than have you upset about your order.

Spec Work; or, A Rant (mostly) Avoided

http://antispec.com/

If you haven’t seen that, now you have.

WTF is with this anyway?

Spec work (or solicitation thereof) flabbergasts me. I don’t think this feeling will ever get old.

The most annoying thing I ever had happen was a local artist asked me to design him a website. After giving him a contract, I never heard from him again. I think he expected me to design something between first talking to him and seeing him a second time. Really? Uh, design costs money. 

Allow Me to Blow Your Mind

1. A notepad is made of sheets of paper. We take a stack of paper and swab some glue on one edge of it, let it dry, and BOOM instant notepad.

Ever seen 2 (or 3, or 4) part NCR forms (the white on top, yellow, pink things) that are all stuck together, but just those (two, three) four sheets? We stack all of them up and swab some different glue on one edge, let it dry, and BOOM fan padded.

The above actually blew my mind. HOW DOES THE NCR KNOW TO STICK TOGETHER? Seriously, I smear glue on a stack of 500 sheets of paper and they come out stuck in groups. That shit’s awesome.

2. When a document “bleeds” it means it prints to the edge of the page.
Why is this significant?  Why can’t you just press print and do your damn job? Why do you have to charge me so much more? Bitchbitchbitchbitchbitch In order to print your document to the edge, we print it on a larger size paper and cut it!

This means we’re using paper that costs us more and taking the time to cut it.
If you didn’t get how this works, you pay for the things you’re buying—not us. You’re buying our time and our paper. Pull it together. 

Ok, “crop line” should probably say “cut line,” but, whatever, I was pissed when I made this.

This last point takes me to:
2.5 You Are Not The Printer
Please, I implore you, leave the printing, cutting and management thereof to me. DO NOT put MF’ing crop marks on your documents unless they’re set up properly.

How do you set them up properly? 
1. Have this social security number: 197-65-2343
2. That’s not my SSN.

I started writing how to place crops, but there’s too many specifics for me (our printer’s edge limitations, bleeds or not, double sided…).
Just make sure it bleeds OVER the cut line and have your content within the safe area (or centered if you don’t know what that means, also get your head checked because the example above has a “safe area” labeled) 

The serious pain in the ass that came with printing this asshole’s stupid wedding invitations (REALLY? Plastic texture metallic teal paper? WHAT ARE YOU SMOKING?)
He decided that our printer could print to the edges, so he graciously positioned everything in the corners to save me time and effort when cutting. This botch-job left me with a chopped up file (idk what godforsaken program spits out these chopped up group masked horrors, but they’re frustrating to even move in illustrator) that was infuriating to work with. I ended up printing as many as I could (it wasn’t laser paper, melted in our machine, and frustrated the shit out of me) and cutting them without crop marks because at that point I didn’t give a funk and he received better than he deserved.
Actually, that was all my fault for even taking the job. 

3. Names of Colors
When I tell you our paper is “Goldenrod” I mean the ream says “goldenrod.” When I tell you we have “Canary” 20# text, I mean the company that produces the paper printed “Canary” on the label. When I tell you we have blue ink, I mean the light it reflects falls within the spectrum of visible light that we call “blue.” Others call it “blau” or “azul” or  ”bleu” or…

I WILL NOT stay on the phone for 20 minutes trying to explain what a color looks like.
Explain “blue” to a blind person. Now, explain “red” to an idiot. Exercise in futility.

I already posted a rant about colors, it’s pretty shitty.
Also, I’ve been making all my links target a new window just to piss you off and to freak out any usability (uh) freaks. No, jk: I don’t trust you to remember how to go back to a page.
I’ll help you avoid that confusion.

If you want a SPECIFIC color from me, your printer:
Be a BAMF and tell me a PMS number.
If you’re really baller, you’ll use the appropriate PMS. Don’t tell me an EC color.
Use “solid coated” or “solid uncoated” depending on what type of paper you’d like. If you just drooled, use solid uncoated.

I could go on, but then it’d look like I’m trying to prove that to you.