January 10, 2009

Why I Hate AT&T

And I do, I really, really, really hate them.

We left for Ohio last Friday in something of a rush. After returning home Sunday afternoon, the DSL modem/router glared its evil red middle eye upon us. In addition, the land line was intolerably static-y. Like to the point where you'd never be able to hear someone, should someone actually call us.

Also, let me point out that me without internet is a scary, scary thing. I am online constantly. It doesn't matter if I'm processing photos in Photoshop or reading a book ... the internet is my constant companion in the background. Without the ability to check IM or email or Twitter ... my brain begins to shut down, cut off from the world.

So I went to an undisclosed location, logged into the internet and attempted to file a trouble report. But AT&T wants you to do so from your home line. Ummm. Can't. Can't hear on the landline. Can't get internet. I dinked around on their wretched help site which kept sending me back to a page which was supposed to help diagnose my DSL ... assuming that I was doing this from my DSL. Umm, if your DSL is DOWN and NOT WORKING, then your stupid ass web page won't help! Good lord.

I finally found a "generic question" form which let me post our landline & DSL problems. I told them I could pick up email between 8 and 5, but to PLEASE call my cell number after 5 eastern time, because I could NOT get internet after 5 because THEIR damn DSL service was DOWN.

They emailed me at 5:15 p.m., so of course, I didn't get the email until Tuesday. Grr. All it said was we'll send a tech out by the ninth at 8 p.m. Wednesday there was a message on the answering machine which said we'll be there between 8 and 5 on the 9th. Way to leave it until the last minute, AT&T. I emailed them back and reiterated that the tech was to call me on my cell if he needed access to the house and I would be there within 15 minutes. (They thought the problem was outside the house, but I wanted this FIXED.)

Oddly enough, after attempting to use the landline Thursday night (someone called the house), the DSL miraculously started working. WOOHOO! Of course, the landline was still screwed up and needed repair and I wanted to make sure that the line was properly fixed so the DSL stayed up and running.

I eventually got a cell call Friday that I thought might be AT&T, but when I picked up, the person on the other end was speaking in Spanish. And it was a recording. Definitely not an AT&T technician telling me he needed access to the house. I get ready to leave for home after work and called the other half.

"You're gonna be pissed," she announces. "The DSL is out again and I've been home since 2. I can see that someone pulled into the driveway, what with all this snow, and they walked around the house to the back. So I guess they were here. But they didn't leave a note or anything."

The entire way home I began plotting my call to AT&T. It began with "Let me talk to your supervisor because I doubt they pay you enough to deal with me right now." It rapidly went downhill from there. A week without internet at home does not do good things to me.

I get home, picked up the landline - the static wasn't completely gone, but it was somewhat better. Hmm. I turned around, walked back to the living room (that's like three steps from the phone line) and went to glare at the eVile red glowing eye on the...

Three green lights.

WOOHOO! The internet was back.

A few hours later, in the middle of attempting to fix the mess I'd made of the blog configuration and database, it went out again. I called AT&T.

Have you ever seen The IT Crowd? Practically the first words out of the Help Desk woman's mouth were: "Have you tried turning it on and off again?" Grrrrr. Yes, that didn't help. It's been out for a week. The phone line is effed up as well and is probably screwing up the signal. It came up Thursday for no apparent reason, but went out during the day Friday.

In the course of her going through the questions they have to ask according to their scripts but which I had already dealt with (is it within 5 feet of your DISH receiver? No, the DISH receiver is in the basement. So that's more than 5 feet away from the DSL modem? YES! The receiver is in the BASEMENT, which is FAR away from here. - yes I was a bit testy.), the damn green light came back on.

So of course, after I say that, she says, Our tests indicate you are getting a weak DSL signal now.

Here's the deal. I don't pay an exorbitant monthly fee for a service that is giving me a weak signal. I want the damn thing to WORK. The lady hems and haws around for a while and finally says "I'll put a trouble ticket in and the techs will run a remote test tonight."

Of course it was working then. Of course they want to close out the ticket.

So, I'm attempting to download a copy of my blog's database (something I do not do often enough, stupid me), and at 185 mb of a 200mb DB, the DSL goes out again. Download is destroyed. Crap, crap, crap.

Thinking I might sense a pattern now, I pick up the landline and call my cell phone. Sure enough, within about 10-15 minutes of making that 15 second call, the DSL is up again. Intriguing issue.

I start the download again and go to bed. Upon getting up? No middle light (at least it wasn't red again). Luckily the DSL crapped out AFTER the download was done, so I do have a good backup of the db. (Of course, I now know that it's a corrupted db and that's why the blog was screwed up, so I have to delete it anyway ... but that's another long story). I call my cell phone again. Other half points out the internet is still down and tell her to wait about 10-15 minutes.

What do you know? The internet comes back up within that time frame. It appears that using the landline somehow "activates" the line enough that the DSL picks up a signal again. I have no idea why or if that's what's really happening. Maybe it's a coincidence, I don't know.

At any rate, I'm going out today to pick up a cheap wired phone to see if perhaps the cordless phone is somehow sending out interference now. (It's worked fine for the last 5 or 6 years since we've lived here. Maybe it's just degraded, who knows?)

In the course of writing this post? DSL went out, I used the landline ... it came back. After I get a new phone and make sure the cordless is not the issue, hopefully I'll be able to keep the DSL up long enough to file an update to the trouble ticket at AT&T and let them know what I think of their "fix" this week ... and crappy service.

By the way, if you're a Help Desk employee somewhere, don't ask me to give you a good survey review about your service calling yourself excellent ... that's kinda presumptuous. The woman who read her script with me was good, a little attached to her script, but good. Until she ended the phone call with "God Bless." Umm, you do not know my faith belief so let's not get a bit ahead of ourselves, okay?
(I don't know why that always bugs me, but it does.)

So, anyhow, I'm kinda back online. And apparently the blog is fixed now.

Phew!

Posted by Red Monkey at 8:57 AM | Comments (45) | Blog | Never Underestimate the Power of Human Stupidity | Stumble

January 8, 2009

test

Well, well, well. We appear to have internet again ... and whatever has been freaking out with the blog when I was trying to publish a fast "I have no internet" post, has also apparently been fixed. Now if the CRON Daemon will stop emailing me about a config error on line 322 (there are no variables, there dammit, Mr. CRON Daemon, so shut up!), then I'll be a happy camper.

'Tis nice to be back online.

Real posts sometime this weekend ....

Posted by Red Monkey at 8:45 AM | Comments (0) | Blog | Stumble

December 23, 2008

House Made of Web (segment five)

House Made of Web is a series of posts explaining the web design process. Many seem to think it's a kind of arcane, magical process ... but it really shouldn't feel like some secret thing. This series of posts should help the non-designer and non-coder understand the process by which a website comes to life without getting too terribly techincal.
The previous posts in this series are:
House Made of Web - the backstory
House Made of Web (part dos) - Information Organization
House Made of Web (chapter tres) - Beginning Mockups
House Made of Web (numero cuatro) - Beginning Mockups

House Made of Web (segment five) - Development of the Mockup

In my last post, I spoke about the problems inherent in giving a client two mockups and how that can be a good thing or a bad thing. In the case of my client, Sherry K, this worked out well and I came up with a more refined design that she really liked.

The process of building the mockup is, for me, the really fun part. Generally speaking, I start out in Photoshop and begin building the various pieces of the site. I tend to start in one of two places: either the themed colour palette for the site or I go looking through the client's images searching for something to build around. In this case, I started with the splash of lime, thinking about pianos and her Kirby Lu Productions logo. I flitted around on iStockPhoto to get some ideas ... but I found a nice vector piece which I thought I could adapt to help create a really nice banner piece for her.

Using a stock piece is a risky thing in design. Anyone can buy a stock piece (vector or photo) - which means you often wind up with a design that looks a lot like every other design. There's not enough style which speaks of the client because it's something that was created specifically to be general (and thus the most use to the most people).

You'll notice in the mockup that the banner has a piano which is kind of grainy, fuzzy and has iStockphoto's watermark across it. Mockup 1c

When you're building a mockup, you do not want to purchase stock photography (or, in this case a vector graphic) before you know if the client likes it. Instead, you take a "comp" version of the image and insert that into the design. A comp image is one that you are allowed to use for a mockup in order to sell that image to the client, but it's provided in a smaller format to protect the copyright owner from theft. Obviously, I wouldn't want to use that comp image in all of its graininess - I want a sharp, clean look which I can only get from purchasing the image.

In this particular case, the stark white piano with the dramatic angle was something I thought could work really well with Sherry's site - and I thought I could add that splash of lime to the piano to further personalize it to my client. After getting approval from Sherry, I purchased the image and began editing it in Adobe Illustrator, adding the bit of green to the black keys and a hint to the front of the piano as well.

The Sherry K branding to go across that piano was also created in Illustrator.

For those who don't know much about graphics, you've probably been wondering about "vector graphics" and Illustrator. Why not just use Photoshop?

An image in Photoshop is essentially a lot of little pixels. It's great and you can do a lot with it ... but only if you have the right size image. You can't really enlarge the image much ... because there are only so many pixels.

A vector graphic sounds complicated, so hang on whilst I explain it. A vector graphic is a series of points and a mathematical formula to determine the lines and fills and shading. But a lot of artists are definitely NOT math majors - so how do they do the formula? Illustrator does it for us. We draw the image with our mouse or a graphics tablet ... and Illustrator does the math. What this means is we're not limited to a set number of pixels. We're only limited by our own precision. A vector graphic can be made larger almost infinitely.

So, I built the treble clef/Sherry K branding in Illustrator so I could continue to use it in multiple sizes and not have to re-create a large version in Photoshop later.

I also knew that the logo designed by Cary Zartman at Z Factory was not just important branding for Sherry K, but also personally very important to her, so I wanted to use the Kirby dog in the banner as well. Like most great designers, Cary had created the logo in Illustrator, so using Kirby was easily done. (Most logos are vector graphics so that they can be printed on a banner or billboard as well as they are printed on business cards.)

Also in Illustrator, I created the lime for the background image and the little juice drops. Then, I brought everything into Photoshop and began laying the pieces out and fine-tuning details. By the time I was done with Mockup 1c, I was pretty happy with it.

So was my client.

The next step for a small web design house is a complete flip in thinking. The pure design is done at this point. Next up is coding the thing into a real website - right brain/left brain flip time. Larger design houses will hire a designer for the design segment and a coder for the second (and possibly a programmer as well depending on what the site needs). Tiny places use one person for everything. I wind up spending a fair amount of time researching different nuances of code so I can make the design come to life.

Next time ... the fun of coding!

Posted by Red Monkey at 5:03 AM | Comments (0) | Blog | Design | Stumble

December 21, 2008

House Made of Web (numero cuatro)

House Made of Web is a series of posts explaining the web design process. Many seem to think it's a kind of arcane, magical process ... but it really shouldn't feel like some secret thing. This series of posts should help the non-designer and non-coder understand the process by which a website comes to life without getting too terribly techincal.
The previous posts in this series are:
House Made of Web - the backstory
House Made of Web (part dos) - Information Organization
House Made of Web (chapter tres) - Beginning Mockups

House Made of Web (numero cuatro) - The Problem with Mockups

In my last post, I spoke about creating two mockups for my client, Sherry K. I had planned to spend this post talking about some of the drawbacks of submitting two mockups (which I alluded to in the last post) ... and then I got a tweet from the delightful Mike Rohde, who was pointing out a fantastic article on Fadtastic about the perils of the industry standard (submitting 2-3 mockups).

Despite the fact that the industry standard is to offer clients multiple mockups in order to better allow them to make choices ... it often doesn't work very well. As Darren Hoyt (in this Fadtastic article) states, allowing the client to pick bits and pieces of your designs can mean that the client "settle[s] on a mishmash Frankenstein product" and that they get "bogged down with a maze of choices" rather than the unified design you intended.

In my case, I've worked with clients who were single entities - a website for one person. Generally speaking, offering a single client two to three mockups and asking them to choose or to mix-and-match is often not quite as dangerous as when dealing with a larger entity with multiple people who will be making the final decision.

The few times I've worked with large e-commerce companies, my fellow designers and I generally pitched only a single design at a time - or two variations of essentially the same design. Design by committee - the default when you have multiple people making the final decision based on several mockups - almost universally yields a Frankenstein design.

The key in both the case of a single-person site and a company's website is listening to the client BEFORE the design process begins so that you really understand what they're looking for. If they can't tell you, it's your job to elicit responses from them before you begin the mockup process. Darren states they show clients "select sites from CSS Beauty or Most Inspired or Best Web Gallery" and they pay close attention to aspects of various sites (colour, layouts, mood, etc) that the client responds to.

Basically, I'm saying you've got to adjust your process to your client and know the pitfalls of working with a group approval (as well as the benefits) and the same for single clients. The key to both is to spend a fair amount of time in the beginning really getting the feeling for them, who they are and what they want.

In the case of my working with Sherry K, for the first mockup I spent a tremendous amount of time creating a workable e-commerce style site for her. I then spent some time working on a second mockup which worked with her personality a bit more and played with color. I was pretty sure that neither mockup in their entirety was precisely what she was looking for. Even with as much time as we'd spent going over her needs, I'd not been able to get a good sense of what she wanted in terms of look - and we ran out of time before we could look at a site like CSS Zen Garden or Most Inspired. That fact, combined with the fact that I was working with a single person led me to offer her two mockups - I needed a better idea of what she wanted and since she couldn't spare the time at that moment, I took the time that I would have spent discussing design with her and made a second mockup.

Flexible. Particularly as a freelancer, you've got to remember that there is no one, right way to go through the design process of a website.

So, last time, I showed the two mockups - both of them quite rough. Sherry loved the use of colour inherent in the second design, but liked the layout of the first ... but she didn't want either design as it was. That's okay, neither did I. From having her look at those designs and answer some very specific questions, I got a much better feel for what she wanted.

First off, a better green was fine with her. She wanted some colour and didn't mind the green. If I hadn't been so fearful about using my favourite colour on her website, I might have nailed the look and the layout with the first mockup. D'oh!

The next version changed up the look in some places, adding accents and refining ideas. For one, I swiped the nav bar from the second mockup and included it in the tweaked version of the first mockup. I changed up the backgrounds of the major elements ...

... and I decided to use a splash of lime for real.

No thumbnail this time, but the full image will pop up in a new window (or tab, depending on your preference set). Mockup 1c

This version energized the client. She really liked the splash of lime (and I still need to work in a shaker of salt somewhere). Her favourite part, I think, was the bright green gloss button in the promo area.

Next time ... an overview of how the mockup was concepted and created.

Posted by Red Monkey at 7:54 AM | Comments (1) | Blog | Design | Stumble

December 19, 2008

House Made of Web (chapter tres)

I've spent the last two posts getting into the backstory of my history in web design ... and then the beginnings of design process - the information organization. In order to walk you through the process of site design, I'm taking you through the re-conception of Sherry K's website.

I really like the kind of lengthy tag line she uses in her emails and newsletters: Sherry K: piano with spirit, piano with soul, piano with a hint of lime and salt. Since she originally had no direction to give me in terms of iconography, colours or the like, I actually had a bit of a harder time coming up with a concept. I knew I liked the lime and salt piece and wanted to use it. I spent a lot of time thinking through where I wanted various pieces of the site to go ...

She's got three CDs for sale, each with a CDBaby and iTunes option for purchasing. I wanted to have some kind of promo area to advertise her availability for booking. She has a paragraph she's fine-tuning to let people know who she is - and for SEO purposes. Then of course, there's the navigation which took a little tweaking to make manageable ... an MP3 player and she wanted her email list sign-up to be very prominent.

A bit of terminology before I explain the next step I took. A mockup is an image of a website. For me, I'll open up Photoshop and begin building pieces of the site in the places I want them to be. I'll mess with the font (staying within the realm of the "web-safe" fonts) and sizing and begin choosing colours, images and different effects to get close to the look I want. This gets saved as a plain image ... just to give an idea what the site can look like.

So as I began working on the first mockup, I did what I always do - spent too much time perfecting the layout of the first design. The aesthetics of the first mockup I forced myself to not spend too much time making exactly perfect. The whole idea of a mockup is that it WILL change. It's an approximation and both you and the client (and if you're working with company, chances are there are several people who need to approve the mockup) - you're all going to change bits of it. Spending time making it exactly perfect is mostly a waste of time.

On the other hand, you want it to look good enough that with minor tweaking, you could publish it as is and be happy. It's not an easy balance and I know a lot of designers who pour their heart and soul into a single design ...

... and then don't want to change a single pixel. (Which always reminds me of the Cyrano deBergerac quote: "my blood runs cold,/ To think of changing even one small comma.")

In most cases, you want to present a client with two or three designs to choose from - different takes on their needs. Then, either one design can be tweaked, or some mixing and matching can go on. (Or, you've completely missed the mark and have to start over completely.)

My first take on Sherry's new site was one I really liked the layout ... but I was still wavering on the execution of the aesthetics. My hesitation was over a very simple matter ... I seized on the "lime and salt" and wanted to work that into the design. I love green. I also love virulent lime green. Most people ... not so much.

So, I wound up with this for the first mockup: (click to bigify)

I was trying not to make the site overwhelmingly green - after all the tag line is a "hint" of lime and salt, not a nuclear explosion of neon green. My love of green led to a fear of overdoing what I liked instead of what the client wanted. Because I was fearful of overdoing it ... the colours here were, frankly, just all wrong. I did like the use of Kirby (the dog in her Kirby Lu Productions logo - designed by Cary Zartman at Z Factory).

And, of course, I overdid it on the layout. This, I was sure, was darn near the perfect layout for her site. So, when I went to do the second mockup ... I was stumped for a bit.

And then I decided I was really tired of the boxy look so many websites have. Sherry's music kind of bursts some boundaries ... maybe her website design should as well. Also, while the white with hints of lime was a nice look, I wasn't happy - Sherry's a colourful person and that design just didn't fully encompass that.

So this was mockup number two:

I liked some aspects of this ... but the layout just wasn't as good. The whole design was just not very coherent, although I did kind of like the border of the top banner being broken open by Sherry's music. I had a LOT of tweaking to do on those lime eighth notes ... but I was pretty sure this design was not going to cut it, so I forced myself to not waste time perfecting it.

What I did really like was the navigation bar. Several ideas suddenly popped into place there.

I wrote up an explanation of each design and sent that text plus the two designs over to Sherry, explaining positives and negatives of each design, different aspects of the layout, difficulties we might have in the coding process and so on. Then I invited Sherry to spend at least a day or two thinking about the designs and my explanations before getting back to me.

Some of the issues I pointed out included critiquing the use of gradients on the first image (the green fading into white at the top & bottom of the various boxes). I wasn't convinced of that shade of green ... and I didn't think the promo area was quite right yet. I pointed out the colour flaws in the first mockup and felt that the second one could be made MUCH less boxy (particularly since the original idea had been to disrupt boxiness) if that was a feel or look that she liked overall.

Next time I'll go into the changes we discussed ... which design was picked, tweaked ... and where the project stands now.

Posted by Red Monkey at 6:43 AM | Comments (0) | Blog | Design | Stumble

December 18, 2008

House Made of Web (part dos)

While I said I was done with the back story last time I lied. But this will be short. Wanna see an UGLY 1998 website: here's my old syllabus. Key word - OLD. Web.archive.org has loads of old gems. Scary stuff.

At any rate, I said I would discuss how a website is conceived and constructed today. This is obviously my process, although I'll also be talking about how other professionals work as well.

Generally, the conception starts out as the easy part. It gets a little more complex, but of course, they all start with something like: I want a site where I can show off my talents, career, thoughts, hobbies, whatever. I want to tell people something or I want to sell something. (Sometimes it's selling people what you want to say!)

I'll use one example to walk us through this process. I happen to go to church with an extremely talented musician, Sherry K. She recently decided that she wanted to completely revamp her online look. She wants a website similar to what she has in terms of content, but she wants something that will really reflect her personality and style of music. We sat down one day and discussed her needs in terms of what the website should be able to do, what her goals were for the site ... and what her level of computer and website skills were.

In Sherry's case, one of her goals is to be able to update the site herself - and not just in a "content management" kind of way, but she wants to be able to understand at least some HTML and CSS (the most common and basic "languages" that websites are written in) herself so she can apply that to MySpace as well as her website. Like many people who want to advertise themselves, she doesn't want to have to rely on others to fix every little thing or make every tiny adjustment.

Most graphic designers and web designers have a "creative brief" they use to understand the creative project - be it a website or a company logo. David Airey has a short form he uses on his site, which you can read here. A portion of it gives the designer the feel for the customer/company requesting the work - who their competitors are, what their company is about, project timeframe, colours, icons ... various little details that the customer might not have thought about beforehand.

In my case, Sherry had some distinct ideas about marketing and SEO (search engine optimization) ... and she knew a few sites that she liked their marketing techniques - but she hadn't given a lot of thought to the aesthetic component of the site. I took a couple of pages of notes during our discussion - and she sent me another few pages of marketing notes that would affect the design process in some way or another.

My first goal was to organize all of these notes. Sounds like studying for a test, doesn't it? A great deal of web design revolves around information systems. How do you organize your information to meet a certain goal?

Sherry has two major goals: sell her music and get people to book her for gigs.

After looking through the notes, I listened to her music again, looked over the design of her CDs and her MySpace, and studied the language of her current site and some of her email newsletters - all to gain a mental picture of who Sherry K the performer was.

Now, depending on the complexity of the site, a designer can do one of two things - build a wireframe or actually begin both the organizational building and the aesthetic design all at the same time.

A wireframe is essentially just a map of where different elements of the site will be and how everything fits together. On the e-commerce sites I've worked on, this was an absolutely crucial element of the design process. Different people in the company had distinct ideas of what information should be seen "above the fold" on an 800x600 sized monitor - although many sites now design as if 1024x768 is the smallest (and most common) size monitor. On an e-commece site you want the logo and tagline, search feature, the most important shopping buttons, the cart button and at least one "specials" or "ad" area to show within the top of the page so they're seen first.

When you have several people who need to approve the design, it's best to figure out this information puzzle before adding the complication of aesthetics to the issue. So a wireframe generally is a series of boxes - here's the area for our promotion, and it's going to be this size. Another box shows where the navigation will be, another the exact space for the logo and tag line. The barest of wireframes won't include colours or fuss over font - it's literally just a jigsaw puzzle map.

Once that wireframe has been approved (likely things have moved around and changed sizes during the approval process), then comes the thematic design.

Sherry's site was simpler than an e-commerce site and I had some pretty good ideas from her excellent organizational notes where things were going to need to go. So, I decided to work both the wireframe and the design all at once. I latched on to the line she uses in all of her newsletters and emails: Sherry K: piano with spirit, piano with soul, piano with a hint of lime and salt.

I had a pretty good idea what I wanted to do ...

... and I'll get into that next time.

Posted by Red Monkey at 7:00 AM | Comments (0) | Blog | Design | Stumble