Opting Out Of Advertising Cookies

The internet is a creepy place, if you haven’t noticed… The majority of people are oblivious to what really goes on behind the scenes. Companies buy and sell information about you more than you could imagine, and they spend a lot of money on it. One of the most common pieces of information about you is your browser history. Advertising companies set cookies in your browser when you visit certain websites, and then they use that information to target additional advertising toward you after you’ve left those sites. Let’s run through an example scenario.

You open up your browser to your homepage of Google and do a search for laptops. Google keeps track of this for their future advertising usage. You click on a link to Best Buy. Now you have another cookie indicating you went to that website to look at laptops. Then say you click on an ad while looking at laptops for a Wii. Now another advertising network knows you are interested in buying a Wii or other video gaming system. So with just a few pageviews, several ad networks know you want a laptop, video game system, wii, and that you were thinking about buying one at Best Buy.

Now, the next hour, the next day, the next week, the next month, you will see ads now targeting those exact things, Best Buy, Wii, laptops. Some people consider this a convenience and prefer that ad networks know these things about you. I however, along with many others, consider this an invasion of my privacy. I will do my own research, and I don’t need some cheap ad on the internet to tell me what to read and what to buy. That’s why I’ve opted out of advertising cookies. It is a legal requirement of advertising networks actually, which shows you how sleazy what they are doing really is. If you want to opt out of every advertising network out there, there is a fantastic non-profit resource available to you. Check out the Network Advertising Initiative to get rid of all those ad networks on your computer so they can leave you alone!

Safe browsing…

Simple JQuery Tooltip

There are some great JQuery tooltip plugins out there, such as qTip2. In fact, I use qTip2 on this site because of how robust I think it is. However, sometimes, on smaller sites, you don’t want to load all that excessive code built to work in hundreds of different configurations just for a handful of tooltips. Well have no fear. Here’s how you can build a simple tooltip. Using a little JQuery, and some CSS3 (for the speech bubble discussed in my previous article and the question mark icon) you can make your own tooltips!

Here’s what we’ll be making:

This sentence needs more of an explanation for the user. ?

Now let’s get into the code needed to produce the example. The HTML is actually very simple. We are going to inject the content for the tooltip using JQuery so we won’t even need anything to target except the link that you hover on that triggers it.
Here’s the HTML:

<p>This sentence needs more of an explanation for the user. <span class="question">?</span></p>

The CSS looks pretty long. But in reality, it is built to my own personal liking. The "question" class applied to a span produces the question mark circle icon. You can easily do this with an image if you prefer, or apply it to a simple link with text or a question mark without any styling. Then there are two items for the "tooltip" class. The first item defines what the tooltip will look like (rounded borders, background color, text styling, etc.). The pseudo class of :before (or :after if you like) inserts an item before (or after) the element it is applied to. In this particular instance, the :before statement adds the tip to the tool, which you don’t need to use if you don’t want, or again, you can use an background image if you prefer.
Here’s the CSS:

span.question {
  cursor: pointer;
  display: inline-block;
  width: 16px;
  height: 16px;
  background-color: #89A4CC;
  line-height: 16px;
  color: White;
  font-size: 13px;
  font-weight: bold;
  border-radius: 8px;
  text-align: center;
  position: relative;
}
span.question:hover { background-color: #3D6199; }
div.tooltip {
  background-color: #3D6199;
  color: White;
  position: absolute;
  left: 25px;
  top: -25px;
  z-index: 1000000;
  width: 250px;
  border-radius: 5px;
}
div.tooltip:before {
  border-color: transparent #3D6199 transparent transparent;
  border-right: 6px solid #3D6199;
  border-style: solid;
  border-width: 6px 6px 6px 0px;
  content: "";
  display: block;
  height: 0;
  width: 0;
  line-height: 0;
  position: absolute;
  top: 40%;
  left: -6px;
}
div.tooltip p {
  margin: 10px;
  color: White;
}

And lastly the Javascript is actually quite simple. You use the hover toggle event (hover, then unhover) to create it. On hover, we simply append the actual tooltip div and it’s content to the question mark icon. Then on unhover, we remove the tooltip element.
And finally, here’s the Javascript:

$(document).ready(function () {
  $("span.question").hover(function () {
    $(this).append('<div class="tooltip"><p>This is a tooltip. It is typically used to explain something to a user without taking up space on the page.</p></div>');
  }, function () {
    $("div.tooltip").remove();
  });
});

It really isn’t that bad, and it can easily be adjusted to work for several tooltips instead of just one. Got any questions? Comments? Just ask!

Creating A CSS Speech Bubble

You’d be surprised how many things you can do with some relatively simple CSS. Even more surprising are the applications of some of the CSS pseudo classes, in particular :before and :after. These pseudo classes might seem foreign because they aren’t very commonly used, but in reality they are quite simple. They are used to add content (before or after, duh!) the class they are applied to. They essentially inject an element that you can then apply additional CSS to. So the speech bubble example below is created using just a div and both pseudo classes.

“This could be a quotation from a customer or use it in an HTML cartoon you've created.

The possibilities are endless!”

Here’s the HTML:

<div class="bubble">
<p>"This could be a quotation from a customer or use it in an HTML cartoon you've created.<br /><br />The possibilities are endless!"</p>
</div>

The CSS is pretty simple, which is good to go along with a very simple piece of HTML. The :after pseudo class creates the blue point, and the :before class creates a smaller white point that makes the blue just look like an outline. The points are actually made using two thick borders on only two sides of a block element that actually has no width or height. It was hard for me to grasp how borders create a filled element when I first saw this, but if you just play with the border widths, you’ll get the hang of it.

Here’s the CSS:

div.bubble {
  display: block;
  margin: 0 auto 40px auto;
  width: 250px;
  background-color: White;
  border: solid 6px #143463;
  border-radius: 20px;
  text-align: center;
  position: relative;
}
div.bubble p {
  margin: 10px;
  font-size: 11px;
  color: #143463;
}
div.bubble:before, div.bubble:after {
  border-color: White transparent transparent transparent;
  border-style: solid;
  border-width: 20px 0px 0px 40px;
  content: &quot;&quot;;
  display: block;
  height: 0;
  width: 0;
  line-height: 0;
  position: absolute;
  z-index: 5;
  bottom: -20px;
  left: 150px;
}
div.bubble:after {
  border-color: #143463 transparent transparent transparent;
  border-style: solid;
  border-width: 24px 0px 0px 48px;
  content: &quot;&quot;;
  z-index: 4;
  bottom: -30px;
  left: 148px;
}

And that’s it! In my next post, I’ll discuss how to use this speech bubble concept to create a JQuery Tooltip. Any questions? Ask away!

Server And Client Side: What’s the Difference?

It’s a pretty simple question if you know how the web works, but if you don’t, it is very complicated. To succeed working in the web world, you’ve got to have a firm grasp on the difference between server-side and client-side interactions. If you want the quick answer, here you go:

Server-Side: Server-side interactions require sending data to a server and the server sending data back to you, the client.

Client-Side: Client-side interactions don’t need a server, and data is exchanged or altered on your own computer browser without sending any information to a server.

Now if you need the longer explanation, you’ll first need a little background on how the internet works. The internet is just a mapping of connections between millions of computers around the world. When you type in a web address–such as http://www.google.com/–your computer knows that means go find the computer somewhere in the world that has the website for Google on it (I’m really simplifying things here if you can’t tell). The computer that has Google on it is called a "server". Servers aren’t typical computers. They don’t necessarily have any screens to view anything on, and for sites like Google, thousands of servers are collectively used to house the website.

So now that you understand the web (at least in a basic sense), we can start to learn about what server-side and client-side means with a more indepth explanation. So say you are on Google’s homepage. As a user (consumer) of Google, you can interact with their homepage in a multitude of ways. To understand each type of interaction, I’ll give an example using the Google homepage.

Client-Side: When you rollover a link in the navigation bar at the top and its display changes, you’ve just triggered the most basic client-side interaction, the pseudo class :hover in CSS. For a slightly more complex client-side interaction, by clicking on the "more" link in the navigation bar, a menu expands with more options. This is a very typical client-side interaction using simple javascript to hide and show something on your screen. In addition to CSS and Javascript being client-side languages, you should also include HTML, the basis of all displays in the web. Without HTML, the internet would be completely different from what we know it as today, and all three of those languages are interpreted on your own computer within your own browser, needing no interaction or data transfer from a server.

Server-Side: Now, after you’ve typed a search phrase into the search bar, when you click the "Search Google" button or click enter, you’ve now triggered a server-side interaction. Your computer doesn’t have the information it needs to conduct the search you are requesting, so it must send your search across a series of connections to a Google server somewhere in the world, that then sends back the results that it found for you. This is the basic concept behind server-side interactions. Typical server-side scripting languages include Perl, PHP, Java, and ASP.NET (I could keep going, but who is it really helping?). The key to identifying a server-side interaction is noting when your browser page reloads. Server-side interactions require reloading the browser window to show the results that were found. There is one exception to this rule.

A Combination Of Both: It is possible to conduct a server-side interaction without reloading the browser window. This requires a combination of both server-side and client-side interactions. Using a subset of Javascript called AJAX, we can send requests to a server, and then load those results into the client browser without a page reload. An example of this on the Google homepage is the suggested search phrases that change as you start typing. You type in a few characters, Google sends those characters to their server which then looks at frequent searches conducted by other people to make suggestions, and then sends them back and fills in the drop down menu for you to make a selection.

Now hopefully you’ve got a firm understanding of the difference between server and client side interactions and languages. If you’ve got any questions, don’t hesitate to ask.

JQuery: Creating a Text Watermark

Update: Read about my JQuery plugin which handles inputs, textareas, and even passwords! It is super easy to implement and very lightweight.

My post on creating a text watermark with javascript has been pretty popular. One comment had to do with being able to implement that watermark without being able to edit the HTML (only having access to CSS and Javascript). The easy solution to that is using JQuery. So as a follow up to that post, I wrote a quick tutorial on a text watermark using JQuery instead of plain old Javascript. Here is an example in action:


To do this, you’ll need the following code:

The HTML:

<input id="inputTextboxId" type="text" />

The Javascript:

$(document).ready(function() {
 var watermark = 'textbox watermark text';
 $('#inputTextboxId').blur(function(){
  if ($(this).val().length == 0)
    $(this).val(watermark).addClass('watermark');
 }).focus(function(){
  if ($(this).val() == watermark)
    $(this).val('').removeClass('watermark');
 }).val(watermark).addClass('watermark');
});

This javascript binds an event to both the blur and focus events of the input field. When the field gains focus (someone clicks in), the JS checks to see if the value of the input field is equivalent to the watermark, in which case it will clear it. When the field loses focus (someone clicks out), the JS checks to see if the field is empty, and if it is, places the watermark back in. The javascript also sets the default value of the textbox to the watermark so that you don’t have to edit the HTML at all. All of the “addClass” and “removeClass” events are only necessary if you wish to style the watermark differently than regular text input. To use this, you’ll need some CSS too.

Lastly, the CSS if you are feeling fancy:

input.watermark { color: #999; }

That’s it! A simple text watermark using JQuery that doesn’t require touching HTML at all.

Email Client Compatibility – HTML Friendly Emails

As a web designer, I actually do not frequently find myself working with email designs. So when my employer requested some HTML email templates, I had to do some research. I found a fantastic article on HTML emails that really helped me out. It was a bit long though, and I discovered some additional things along the way that I thought I’d share.

The first thing you have to do as a web designer when working with HTML emails is forget everything you know about modern coding standards. HTML email is years behind the curve. You’ll find yourself using inline CSS with limited shortcuts, tables instead of divs, and even deprecated attributes that haven’t been used in years.

The second thing you have to do is settle on a simple design. If you thought cross-browser testing was a miserable experience with four to five browsers (Safari, IE, Firefox, Chrome, and maybe Opera… plus mobile if you desire) try the dozens upon dozens of different email clients that all render differently! There are some good resources out there for cross-email-client compatibility testing such as Campaign Monitor or Litmus, but most charge, and if they don’t, they have a lot of restrictions like frequency of checking.

So here are the secrets to making your emails look good across all of your major email clients:

1. Use Tables For Layout because floating and positioning doesn’t work all that well. If you need something to appear next to another item (such as an image next to text) you should still divide that up into two tables. I know I know, it goes against everything you’ve ever known about modern coding standards and practices. But trust me, it’s the best way to go.

2. Use Inline CSS Only unless you don’t want your emails to all look the same. Some email clients will strip out the head tag or any external style sheet references, and others anything within a style tag. Keep in mind, many of these email clients are browser based, meaning they have their own custom CSS. To protect that CSS, they’ll strip anything out that could interfere with it before displaying it. And don’t even think about javascript…

3. Don’t Shy Away From Deprecated Attributes like width and border for your tables. When in doubt, just include it, because W3C standards do not really apply in the same way for emails as they do for websites. I always double my declarations. If I want my table to have no border, then I put that in my inline style declaration, and as a border="0" within the tag.

4. Avoid CSS Shorthand like "font: 14px Arial;" and instead do it longhand like "font-family: Arial; font-size: 14px;". Some email clients won’t read the shorthand CSS, though admittedly a majority do.

Here’s a bare, one column template that you can use with a single h1, h2, p, and a tag. Notice the XX and YY for your own personal preferences. The 98% width on the main table prevents email client bugs that create horizontal scroll bars.:

<html><body>
<table style="width: 98%;"><tr><td valign="top" align="center">
<table style="width: YYpx;"><tr><td valign="top">
<table width="YY" cellpadding="0" cellspacing="0">
  <tr>
    <td style="width: 600px;" valign="top">
      Header Content Goes In Here
    </td>
  </tr>
  <tr>
    <td style="width: YYpx;" align="left" valign="top">
      <h1 style="font-size: XXpx; color: #XXXXXX;
        font-family: XX; margin: XXpx XXpx XXpx XXpx;">Enter Your Header Here</h1>
      <h2 style="font-size: XXpx; color: #XXXXXX;
        font-family: XX; margin: XXpx XXpx XXpx XXpx;">Enter Your Subheader Here</h2>
      <p style="font-size: XXpx; color: #XXXXXX; font-family: XX;
        margin: XXpx XXpx XXpx XXpx;">Enter Your Main Content Here</p>
      <a href="" target="_blank" style="font-size: XXpx; color: #XXXXXX;
        font-family: XX; margin: XXpx XXpx XXpx XXpx;">Enter Your Link Here</a>
    </td>
  </tr>
  <tr>
    <td style="width: YYpx;" valign="top">
      Footer Content Goes In Here
    </td>
  </tr>
</table>
</td></tr></table>
</td></tr></table>
</body></html>

In a future post, I’ll discuss ways to avoid getting your email marked as spam, as well as other best practices for making a good marketing email.

Vector And Rastor: What’s The Difference?

When working as a web or graphic designer, it is very important to understand the difference between "vector" and "rastor". These are two words used to describe the basic structure of a file or program. Take the Adobe Creative Suite for example, some of the programs included within the Suite are vector based, while others are rastor based. In particular, you should note that Photoshop is a rastor based program, while Illustrator and InDesign are both vector based programs.

Now I still haven’t answered the question of what the difference between the two is though. Well here is your explanation. The word raster refers to pixels (or points if you will), while vector refers to lines. When making an image, you can base it off of two things; individual points in the image that are colored in whatever way you want that come together to make an image, or a bunch of lines that define spaces and colors, thus creating an image. Still not getting it? That’s okay… Let me try by talking about what you’d want to use for different types of projects.

Photo Editing: Photos are loaded with tons of information all the way down to the pixel level, thus making them rastor based. If you were to take a photo and try to expand it ten times larger than it already is, it is going to get blurry. That’s because for every individual pixel of information, you are trying to turn that into 100 pixels, giving it seemingly less detail. But without simplifying that image, there is no way to really replicate it using just lines is there? That’s why photos are rastor based, but are also limited in how big you can make them.

Logo Design: Now say you are working on a logo, and you need it to work in a lot of different places (on a website, on letterhead, on a business card, or on a giant billboard). That means you need an image that can shift in size but not lose it’s definition. To do this, you want to use a vector based software. So if your logo has a "+" in it, you can make that as big as you need without distorting it, because it is defined using lines, and no matter how you alter it, it will always be two lines. Now don’t limit yourself to thinking of lines as having to be straight. Vector based software thrives off using curves. This is why vector based software is so much more ideal for making things with writing in them. Letters just don’t do well under rastor based software because you lose the specific curve of a font to aliased pixels.

And really, that’s the difference between "vector" and "rastor". You want to use rastor software when working with photos. But for pretty much anything else you are going to want to stick to vector software so that your copywriting doesn’t lose quality, and so that you can change the image size without losing quality.

Any questions? Ask away!

WordPress: The Best Blogging Software

WordPress is hands down, the best blogging software out there. After using it for my own personal website, as well as several freelance clients, I’m completely convinced there is nothing better out there. Now, it is important to note that there are two different WordPress versions that you can use; the .com and the .org versions. The .com version is not customizable anymore than your average blog software like Blogger. The .org version is the one I’m about to rave about, and is the much more involved and capable option. So, there are a few particular reasons that I believe it to be so wonderful which are outlined below:

It’s Open Source
So in case you don’t know, the phrase "open source" means that the code that runs certain software is made publicly available. With publicly available code, it makes it possible for individual developers to write additional code that can get tacked on to the initial software release in the form of apps, plugins, et cetera. Without open source software, the world would be limited to only what companies manage to come up with and release. But because of the wisdom of the WordPress team, they’ve released their potentially proprietary code to the masses to promote the growth of the software via public participation, and documented all the details in the WordPress codex.

It’s User Friendly
With my background in user research, I like to think that I have a good grasp on user friendly interfaces. I have to say outside of a handful of small issues that I’ve encountered with WordPress, it is really amazingly intuitive. They’ve managed to create an interface that promotes easy usage by developers, designers, and content publishers. Normally this is a very difficult task given that all three of those groups work on such different levels and on different content. From my experience of working on back-end code for WordPress, front-end code for my design theme, and content as a blog author, it is just so easy to use.

It’s Constantly Improving
The team at WordPress manage to release updates on a very regular basis. In addition to that, because of its open source nature, there are new plugins and themes being released for WordPress at an incredibly fast pace. The best part is, if some new technology comes out, you can bet your bottom dollar that within a few weeks at the most there will be a WordPress plugin that incorporates it into the blogging software for public usage!

It’s Incredibly Functional
Going off of my last point, the plugins available for WordPress make it incredibly functional. You can obviously use the software for simple blogging. However, you can also adapt it to maintain your entire website complete with a static homepage that isn’t your blog homepage. Once that’s complete, you can introduce youtube videos, flickr photos, facebook and twitter feeds, contact forms, and pretty much anything else your heart desires. With all of this functionality, there is hardly a reason to ever go build a smaller sized website (<100 pages) without WordPress!

SEO Friendly Two Column Layout

SEO Friendly Two Column LayoutMost website owners, for obvious reasons, want their websites to be highly trafficked. When I build a site for a client, I always make an effort to keep search engine optimization (SEO) in mind so I can help them grow their traffic/clientele/customer base. There are thousands of companies out there claiming they know the secret to landing you at the top of Google search results, but when it comes down to it, there is no one answer… there are a lot. One such item to try for your site is keeping the relevant content of your pages at the top of your HTML code. Sometimes this can be difficult for people working on websites that have a multiple column layout with something like navigation or ads on the left and the main relevant content on the right. Now some might say there are simple solutions to this problem involving using float left and right CSS properties for your respective divs that contain each column, but there are some layouts that require a more sophisticated solution, that is much less prone to break regardless of the actual content.

When implementing this for a website I was working on, I stumbled upon a genius post by Matthew James Taylor who has a series on multi-column liquid layouts that are all cross-browser compatible and SEO friendly in the sense that I speak of above. I adapted it a little bit to account for some specific 10px margins and a specific navigation width of 300px, which you can also adjust. The requirements are quite simple to implement, and here’s how to do it:

The HTML:

<div class="mainWrap">
  <div class="mainSubWrap">
    <div class="mainContentWrap">
      <div class="mainContentSubWrap"><!--All your main content goes in here--></div>
    </div>
    <div class="navContentWrap"><!--Nav content goes in here--></div>
  </div>
</div>

The CSS:

.mainWrap {
  position: relative;
  clear: both;
  float: left;
  width: 100%;
  overflow: hidden;
  margin: 10px 0px;
}
div.mainSubWrap {
  float: left;
  width: 200%;
  position: relative;
  left: 290px;
}
div.mainContentWrap {
  float: right;
  width: 50%;
  position: relative;
  right: 290px;
}
div.mainContentSubWrap {
  margin: 0px 10px 0px 310px;
  position: relative;
  right: 100%;
}
div.navContentWrap {
  float: left;
  width: 290px;
  position: relative;
  right: 290px;
}

Basically you end up using relative positioning to move the navigation box over to the left of the main content box, and visa versa, yielding the main content appearing on the right side of your screen, but appearing first in your code. The benefit to this over a simple float is the ability to assign background colors that you want to fill to the bottom of the screen regardless of whether or not the background colored div is the largest in height. It is also pretty much a sure bet that it won’t break across browsers.

Definitely give it a shot, and if you have any questions, don’t hesitate to ask!

Photoshop, Illustrator, And InDesign: What’s The Diff?

The Adobe Creative Suite is an amazing (albeit expensive) tool. In reality though, it is comprised of over a dozen different pieces of software that all have unique functionality, purposes, strengths, and even faults. For my web and graphic design needs, I think that three specific pieces of software are particularly relevant. I use Photoshop, Illustrator, and InDesign on a daily basis, but for different reasons. Need to know the difference between these three pieces of Adobe software? Want to know what to use each one for? Read on!

Adobe Photoshop
Photoshop is a great tool, but people often use it for the wrong reasons. Photoshop is a raster based software, meaning it works on a pixel based level. Images built using rastor based software can easily become pixelated, but that can be avoided. Photoshop is ideal for editing pictures/photos but not ideal for images with text, or for designing layouts for web or print.

Adobe Illustrator
Illustrator is hands-down my favorite of all the Adobe products out there. You can produce pretty much any type of image or file from it, so I use it to produce all of my web graphics, web designs, and even documents. Illustrator is different from Photoshop in that it is a vector based software, meaning instead of working on a pixel level, it works using lines. You can zoom in and out as much as you want from whatever you make in Illustrator, and it will never lose it’s detail. Now when you output that into a rastor based image such as a jpg, you may end up with some pixelation, but when resizing within Illustrator, you’ll never lose that detail. If you continuously resize your image in Photoshop, you will certainly distort it. So all of this makes Illustrator great for producing web graphics, documents, and full page designs, but not so great for working with photographs.

Adobe InDesign
InDesign is most commonly used for complex book layouts. What I personally tend to use it for is actually to produce pdf presentations. As a designer, I much prefer pdfs over any other document type such as a Word document or Powerpoint presentation as I think they appear more professional. InDesign is a vector based program just like Illustrator, and has much of the same capabilities, but focuses it’s strengths on multiple pages and master pages. This allows you to make a master view for your presentation or book (i.e. logo in the bottom right corner, page numbers, et cetera) while also allowing you to customize each page. I wouldn’t advise InDesign over Illustrator for anything but books and presentations simply because you do lose some functionality from Illustrator.

To help you decide between software options, try out this table:

Project Description Photoshop Illustrator InDesign
Editing Vacation Photos
Editing Photos To Print
Editing Photos To Post Online
Creating An Icon For The Web
Creating An Image For The Web
Creating An Image With Text
Creating A Document For Print
Creating A Document For The Web
Creating A Website Design
Creating A Multiple Page Document
Creating A PDF Presentation
Creating A Book Layout

If you have any specific questions or examples you’d like to ask about, don’t hesitate to ask!