==============================================================
Raster: are Pixel-based images and graphics that will lose quality as scaled up.
==============================================================

JPEG, PNGs and GIFs are the main raster-based file types and generally what you will find as graphical elements on the web. Each of these files are comprised of small colored dots when put together will make an image. You can make raster images larger by using photo manipulation software like Photoshop, but in the end there is little you can do to enlarge them without degrading quality. Pixels can not be created (without great manual lengths of reconstruction) if you resize a photo from small to large the software is simply faking those pixels into place based on the surrounding pixel information. Just like the old days, as you made copies of copies of a cassette tape or VHS, that same basic principle can be applied to resizing raster images. By resampling the image too much it starts to create halos around contrasting elements limiting your ablity to go any larger.

Above you can see the degradation you could expect from zooming in or blowing up a raster image to larger than its original size.

Above is zoomed in much more, showing how that picture is made up of the dots or pixels. As the size goes up the larger those pixel become, making it look worse and worse. This can be avoided somewhat by controlling the distance someone can view the image at. But when you’re saving for the web people are inches away from the image, not feet or miles. So, quality play a huge role into it.

==============================================================
Vector: are mathematical relationships to individual points in a path that can scale to
any size without loss of quality.
==============================================================

AI, EPS, are all generally vectored artwork but can contain raster elements, so beware. While raster images cannot be scaled without losing quality, vector art have the unique ability to look nice and clean on a business card or up close on a billboard. I would recommend vector for ALL graphics that do not include a photo. Using photoshop to create a logo or text graphic with or without text will ultimately box you into a corner and as your large scale needs increase you’ll find yourself either

1. redoing your logo or design (which could hurt your brand recognition) or…

2. living with a poor-looking graphic that reflects badly on the company.

Above, I’ve taken the exact same image and instead of zooming or blowing up using photoshop I used Adobe Illustrator and scaled it. This kept all the quality and didn’t create any pixelation. However, as I write this I want to remind you that the image you see had to be saved as a rasterized PNG to display in this post so there is some pixelation between that converstion and the difference between the screen and what is truly there.

Like above with the raster examples I continued to scale it up even more. This really show the difference, and this could be scaled infinitely and still look just as clean.

==============================================================
Summary
==============================================================

1. Raster = Images (difficult to scale)
2. Vector = text, graphics, text (scale to any size without losing quality)
3. Use vector-based files for all graphics and text
4. Use Photoshop for just that: photos! Then import into a vector program to manipulate the vector elements. Photoshop is not a design program but a tool to assist in the design process.
5. Comment below to ask me questions, as all I do is work in these programs.

I heard the story a few days ago on NPR and was taken aback by AT&T’s approach to their data plans. Citing that 2% of their users use more than 2gb of 3G bandwidth a month, which is bogging down their system, and that justifies limiting the “unlimited” plan for everyone. Now don’t kid yourself, 3G across all companies has always been capped at 5gb, but that’s high enough to not count bytes every day. Remember the days of getting upset that your conversation didn’t end at 4:59 instead of 5:03, charging you 6 minutes? Well, say hello to that stress again!

I’m on T-Mobile so this change doesn’t affect me… yet, but AT&T being the 800lb gorilla with 71.3 million users, what they do sets the stage for the industry. Which brings me to why this could impact websites.

My wife and I used a shocking ~700MB of bandwidth last month and we don’t stream episodes of “Lost”, or spend all day checking out viral videos on youtube. That 700megs is just normal checking email, stocks, tweeting, surfing the web and using the GPS navigation systems. The trend was leaning away from mobile sites because it can be frustrating to re-learn a new site and with smart phone browsers being full-featured and user-friendly it’s easier to navigate the real site. But full sites burn significantly more bandwidth, so to combat that I think you’ll stop seeing the flat, watered down sites and start seeing “mobile” sites that have been significantly sized down and compressed but still operate identical to the real one.

Here’s how it all works:

====================================================================
Sign up and fill out the normal info. From there, you choose topics that you “know” about.
====================================================================

====================================================================
Then you can Ask a question and people who have tagged your keywords will respond…
====================================================================

====================================================================
…or you can Answer questions.
====================================================================

Questions like the one above have infested Aardvark and are downright blatant attempts to gain my information. This type of search engine won’t fully function in mainstream if anyone can be an “expert” in anything and fill the site with mindless noise. Does “Arthur” really want me to believe that a less-than-computer-savvy user signs himself up for an account on Aardvark, uses emoticons and is an avid Google Earth participant (which doesn’t require a password) needs my help to find his password by having me email him? For six months my phone beeps every 10 minutes with a notification to answer a question from Google Chat (which I signed up for, but when it serves little purpose to their core function, it’s irritating).

====================================================================
In Conclusion
====================================================================
Will I be leaving Google here any time soon for Aardvark? Probably not. And I’d recommend the same for you. But if you do find search engines frustrating, I’ll offer you some quick tips:

Intrigued I clicked on it, thinking, “This could be a useful tool no one knows about yet here it could revolutionize the ways we track time off with our employees,” to be sent this this page!

*close* I was gone, bounced right off… Mainly #7. Seriously, $1500 for a software package you haven’t even sold me or I haven’t seen or experienced. So, I thought it’d be a great example of what not to do when creating your PPC and Landing Pages and so reluctantly I went back and captured a few screenshots.

What They Did Wrong / Right: To Help you in the Future

1. I’m on a landing page and being bombarded with navigation away from this page and its selling tactics. And sometimes that can be the purpose of the page (not this case, its trying to sell me now).
2. See it in Action
   1. Decent idea, if done correctly. I want pretty picture screen shots. Without clicking, make sure with those shots I feel as though I’m heading down a path that will ultimately satisfy my initial reaction to the PPC ad you ran, not another Button (my engagement is too low to ask for another click, we haven’t even gone on a 3rd date)
3. Its not even the same name as was served to me in the ad… What the?!
4. Nice crappy bar graphic screen shot… I still haven’t even clicked on it because I can’t tell if it’s a screen shot of their $1500 software or a stock photo of something… Make me wanna click it
5. This is nice, I liked this and because it’s an expensive software package I’m not going to just buy on a whim. After some of the changes mentioned above my level of involvement is a little higher and now I might wanna chat
6. Too much, I was instantly scared away… copy copy copy, no bullets for me to lazily scan and up my attention
7. PRICE $1500 and I don’t even know what the heck it’s going to do for me. Sell it then hit me up for some cash.
8. Is this an ad? Or an ad for them? Can’t tell, distracts from the message and different formatting than the rest of the site width style… its all wrong
9. Sad….

These are important because if you’re paying for someone to get to your site, based on an ad, you obviously want them to convert into sales – otherwise you’re wasting your viewer’s time and your money. Make the most of it!

My Thoughts on 2010 Design Colors: Don’t be afraid of it. We ran through the “Green” era with large amounts of earth tones and soft warm colors. Mainly, following the trend of “Goin’ Green” that came upon us is still running strong; it’s just that the overall design colors need to be refreshed. Now that the “New Fad Smell” is fading away, you no longer have to brand yourself with Mother Nature’s color pallet to be considered a green and environmentally-aware company. Now, there’s a void left by the burnt-out earth tones that have bombarded people. Try making a change by using bold design colors to help bring a level of calm and happiness.

1. Large Headers

This is in many ways bringing back the dreaded splash page, which is an easy NO for websites today. But at least large headers server two purposes: one’s to inform and the other’s to capture a viewers attention easily without over-powering them. Content can be scary… Keep the length of normal content text less than 3 inches (it can be hard on the web because different resolutions will make text larger or smaller). text will tend to frighten people because they/we/I don’t like to read–we want info now and don’t want to work for it! As viewers land on your home page you don’t want to push them away, but rather keep them and hopefully convert them to a client in some fashion. These larger headers push the bulk of frightening text down on the page to make sure they know what you do. And while these large headers succeed in creating a soothing landing pad, they also make room for a nice tag line; letting them know they’re hot on the trail to finding an answer.

More to come >>>

Ask around your office, post a tweet, facebook update and ask how someone searches for something random like “How would you search if you wanted to make a chocolate cheesecake”. For the most part they’d be slightly different and so will the behavior of a user on your website (but i’ll touch on that in a bit). Back to the cheese cake question. I personally would search
“Recipes Chocolate Cheese Cake” and Google would correct me to “Cheesecake”, but there are a million and a half ways to ask this same thing to the search engines, and we’re finding people DEMAND Google to find their solutions: “tell me how to make a chocolate cheese cake” or “”chocolate”+”cheese”+”cake”+”recipe”" or “How-to make a chocolate cheese cake” or…or… you get the idea. So tailoring you’re website to I or Me doesn’t encompass the purpose of your site getting everyone but you to it…you already know its there–find the other 260 million Americans that haven’t heard of you.

This is no different when designing a website. Navigation placement is extremely important, as is keeping it consistent, but its function may be a last resort for some user. I go straight to it, if Google found the keywords I was looking for in or on your site I go straight to the navigation and look for the end results–if it’s not there, I leave. You get an average of 1/8th of a second to capture a viewers attention and you need to tailor to them all (I know, denoting) but don’t hamper yourself by always looking to “I” would do. My wife goes straight to the bottom footer and if not there, she MIGHT do a little reading because she’s a little more patient than I am;). But, someone in my office will spend the time to read the headers of the topics and/or read the information to ensure the info is or isn’t on the site they are looking for; others b-line it to the most dominate element. So when you’re sitting around brain-storming about how your site will interact and deliver relative content, remember the only I that matters is in cl-I-ent or the MonEy they spend (okay that ones was stretching it), but like I posted last week… TEST TEST TEST

People are lazy by nature, and maybe “lazy” has a bad connotation with it… I’ll expand on that by saying people progressively budget themselves to reduce the time and energy exhausted on one particular task. The internet is no exception, and just as grocery stores pump their fresh bread smells through the ventilation system to increase hunger and drive people to the bakery, your site needs to do the same. Create that trail of scent for someone to follow – if it disappears, the lazy nature in people will infer that the next click won’t result in the solution they are looking for and head down a different path. Users use proximal cues to perceive what will come next and if it’s worth the click – one company that does this well is Gieco.

When this ad is served up on the web it does a few things: one, it shows you their beloved mascot. If clicked you’re taken away to a new page, but you’re comfortable in the feeling that you’re getting closer to your end results.

You now have the option to choose the type of insurance and zip code, then on each subsequent page you’ll see the Geico logo and the little gecko as your guiding light. This is the scent, without it users will abandon their quest and move onto a new search term, or even change sites, heading to somewhere they feel is giving them what they want.

So, when designing your online ads, website, emails, business cards, mailers, etc. make sure you keep the look consistent and carrying a strong scent. As your marketing direction changes do your best to plan for one element to always stay constant.

I would recommend looking at a current site revamp if your traffic isn’t doing anything on your site yet. But if you have decent amount of leads maybe shift right into the minor changes. But if you do a whole site redesign let the site run for 6-8 months depending on traffic rates. After you have a nice benchmark start modifying the location slightly of your weekly sale, change type size, colors, navigation location (and keep it well within the sites look you don’t want to do a massive change to close to each other) but here is where the testing comes into play. Change something small, the size of the navigation font and run it for a few months and if it helps leave it, if it hurts change it back and move onto something else. Slowing adding 1-2% conversion every few months with four or five of these within a year you’ll jump your sales 10%.

Lets see how we can increase your numbers today.

1. Website Speed

2. Cost

3. Compliance to ADA standards

WEBSITE SPEED
Why does speed play a part in this new world of 20mb internet speeds and fiber-optics infrastructure? Because not everyone has it! Websites still need to keep an eye on 56K dialup, as a majority of users have DSL+, there are a significant number of people who don’t have access to anything faster. Rural areas, which you might not consider too far off the beaten path, relay on glorified cell phone towers to get 128K speeds but it’s unreliable and works on direct line of site, leaving standard dial-up as the most viable alternative.

Google now takes your pages’ sizes and load times into consideration when placing you on the search results. And tables, great for tabular data is heavy on the code side, which increases the file size and load times. When designing a website each page needs to be below 150k before CSS, Images, and other attachments.

The speed is also affected by slicing your site into different images to be placed inside each cell. A browser will load one large image faster than 40 smaller images, and it loads all at once instead of populating one at a time making your site look like its having problems while it finishes the remaining images.

COST
You’ve defined the cell sizes, so when it’s loading your site isn’t jumping around like Richard Simons as it pulls in the files one-by-one, but lets talk cost. If your website has 50 pages, all built using your “template”

design, then what happens when you want to change your website using CSS? A simple update can be performed in one location, then tested and implemented in a matter of minutes. If you’re using tables, that same job just got amplified 50-times. When one simple change has to be manually pushed through each page again, one-by-one, that becomes costly and burdensome, and that’s when you begin to avoid changes. This, in turn, hurts your site’s ranking, which hurts your traffic, which hurts your sales… not a good thing.

Compliance
Any company with 15 or more employees is required by law to meet the ADA’s standards for website design, which means not using tables for website layout.

I took this quote from the government guidelines: “Large tables of data can be difficult to interpret if a person is using a non-visual means of accessing the web. Users of screen readers can easily get ‘lost’ inside a table because it may be impossible to associate a particular cell that a screen reader is reading with the corresponding column headings and row names.”

-http://www.access-board.gov/sec508/guide/1194.22.htm#%28a%29

What does this all mean for you? If you’re larger or smaller than 15 employees it’s in your best interest for all the reasons above to start removing tables from your site’s layout.