Traffic Analysis, the New Marketing Strategy

Throughout time, internet advertising has taken many forms both good and some even, not so great. Advertising in general I could say is part of our human nature; the same which has forced our species to make strategies for a victory over our competition. With that said, good advertising in the true sense of being “good” advertising, should really be beneficial to the audience rather than just the advertiser, furthermore it is that which will win any company, organization… brand following. Brand loyalty should be a top priority for any organization, thus once again, as it is natural, advertising should be beneficial to the audience.

Internet advertising has gone through many stages, yet unfortunately, not all stages are what I am referring to as good advertising; I never met any person that finds spam or constant popups beneficial. Fortunately, however, it seems the days of popup attacks are done as every free modern browser seems very good at blocking popups, yet spam seems like a never ending trend. Spam works for some, but completely turns off many candidate customers from following a company. It is because of all of this, that the most modern and successful trends for advertising involve non-intrusive methods, that don’t negatively get in the way of the possible future users/customers.

Now, finished with my long introduction for this article, I feel its time to talk about the latest trend of “good” advertising. This trend is of course, studying what people like and dislike about your site. This is completely unobtrusive, and allows the advertiser to adapt to his/her customers/users which is the way good business is supposed to be.

How does one study one’s clients when all is done usually programmatically by the website code? The answer to that is through traffic analysis. Google, Microsoft, and all the big companies in the search and web marketing business provide many tools free of cost, for anyone who wishes to track the traffic of their websites. The best of these tools tell you much information as to what words the client searched for which lead them to your site, their loyalty in terms of revisiting, and the bounce rate which could be a good indicator of when you need to add fresh content. Other things included which are a huge aid for marketing include tracking of the user’s geographic location, their monitor resolution and more. These tools will allow your customers to become a loyal following, rather than forcing them to visit your site as was the case in the days of spam. A lot of people have a sour taste from AOL’s old methods of marketing for example, which I doubt they still do.

All, in all, this are all great tools to help expand any websites exposure. It is a good idea, however to use two of these tools. One client side, and one server side, to keep up the tracking even in the cases in which client scripting is turned off.

Share this:

Share this page via Email Share this page via Stumble Upon Share this page via Digg this Share this page via Facebook Share this page via Twitter

The Business Card

In the past few days I have been working on a business card that will be very important to me. This, of course is my own business card which I carefully planned through out to show part of my personality as a designer through its simple yet bold use of texture and weight. Having started my studies as a print designer I know the design involves more than the look, including many more senses than just that of sight. The web has trained me to think of when to invite users to an experience of sight and sometimes sound, but what it never did, however, was to allow for a tactile experience. My idea to provide such experience was by thinking ahead about what types of paper I could use. It turns out, however, that the cost of printing into the recycled type of paper I wanted to use was way higher than expected. At this time, I decided to go for another approach that would give visual texture as well a tactile experience. I photographed various leather, and paper samples I had available, and added a die-cut in an attempt to make the card something different.

The card design is being printed at the moment; on the meantime I will share the Indesign mockups of the card and at the end the final version

Some of the mockups
Business Card Mockup

Business Card Mockup
Business Card Mockup

Final Design
Andres Gallo Business Card Front

Andres Gallo Business Card Back

I will post photographs of the card once it arrives, as there are some details that will look nicer with the physical version of the card

Share this:

Share this page via Email Share this page via Stumble Upon Share this page via Digg this Share this page via Facebook Share this page via Twitter

Streamlining and structuring workflow (Response)

Reading the article titled “20 ways to streamline your web business ,” at aext.net by mike Smith, was an interesting educational experience which I highly recommend everybody in the business to take a look at, furthermore, the same principles explained in the article may be applied to other businesses. A lot of the points made throughout the article are very helpful, though some I can’t fully recommend for those new to the field. The first point they make in the article, for example is to have premade XHTML, and CSS files. These “templates” are a good idea once one has acquired a certain level of experience, however, in the beginning I always found myself learning new techniques by experimenting with different structures that would make coding a lot easier in the long run of the project. By these structures, I am referring to structures that would allow me to control elements based on their cascading relationships, rather than having to assign classes for my control. The advantages don’t stop there as another advantage of using unique structures for different jobs is semantic code for example. Working with semantics in mind the code will make more sense in relationship to its function. I’m just nitpicking however, for I understand creating templates is a great idea in the case there are different templates for different jobs.

The article also includes some other ideas that had not crossed my mind but which make lots business sense. The best ones I can think of out of them are the file cabinet, and project outsourcing. File cabinets will prevent the chaos one could have, especially if one deals with many clients, while outsourcing parts of a project can provide one with extra time to acquire more clients.

Other points mentioned here, which are also the focus of the article “Putting Architecture Principles into Practice,” at developer.com by Jeff Ryan, include the use of frameworks, and content management systems. The architecture article makes no mention of Frameworks (in the same sense at least), nor Content Management Systems, however it’s all about creating a structured workflow in an IT environment which are the goals of using frameworks and content management systems. It is common knowledge that one way to ensure a great architecture for project development is through the use of libraries to ensure consistency. There is no need to reinvent the wheel for those things that have already been done and work well. With the same idea in mind for most projects, a Content Management System will probably have already built in all of the features one may need to build all sorts of sites, and the same applies for a framework. Using both can cut down work time dramatically.

Streamlining Business is a great idea to get more clients, and to work more efficiently. With that said, here is the link to the article once again. I found it to be very educational…Enjoy!

Share this:

Share this page via Email Share this page via Stumble Upon Share this page via Digg this Share this page via Facebook Share this page via Twitter

Coding multi-browser consistency

Internet Explorer is the most popular web browser in the world, and at the same time perhaps also the buggiest of all the popular browsers, making our jobs much harder throughout the creation of a website. In fact IE6 which is three generations behind the current IE, is still immensely popular (stats ). For the last two years, I have been working for a company whose user-base is for the most part IE6 based, and though it may sound like a terrible burden, I have felt forced to learn many tricks that make working with IE6 a breeze…well almost. This rather than a burden, however, has been an educational blessing.

With that said, here is a short list of some of these tricks I have learnt, furthermore I would appreciate feedback.

Multiple IE:
Multiple IE is a freeware software which may be downloaded here. The advantage of having multiple IE is that you will be able to use various versions of IE on one machine. (WARNING: I have had some issues on some computers, in which multiple IE affects the functionality of IE8 input boxes). In spite of the big warning, uninstalling and reinstalling IE can fix the problem. This program is definitely worth a try for the time and pain it can save. I use it only to have a version of IE6 to test sites in, while simultaneously I upgrade the real IE to IE8 which has an IE7 rendering mode. It’s beautiful…It’s like having IE6, IE7 and IE8 in a single machine.
Conditional comments:
I avoid using these as much as I can, the reason being, they make the code look really ugly. These are useful however if the only way to fix something is by adding special content only IE can read. They may also be used for the oppossite, so you can actually use these to add open and close comments within the conditional comments forcing IE to instead ignore the content. I can’t remember the last time I used this. I don’t recommend this method, but I am sure in some cases it could be useful.

Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!--[if IE]>
  Read if this is IE
<![endif]-->

<!--[if IE 5]>
  Read if this is IE 5
<![endif]-->

<!--[if lt IE 6]>
  Read if this is IE but a previous version to IE 6
<![endif]-->


<!-- the last example has an "lt," which may be replaced
with "gt," "lte," or "gte" for different scenarios -->
 
<!-- "lt" is for a version previous to that which the
number indicates -->

<!-- "gt" is for a version greater to that which the
number indicates -->

<!-- "lte" is for a version previous to that which the
number indicates or that version indicated -->

<!-- "gte" is for a version greater to that which the
number indicates or that version indicated -->

Example where we make IE ignore content

1
2
3
4
5
6
7
8
<!--[if IE]>
  <!--
<![endif]-->
    <p> IE will ignore this paragraph
     tag while other browsers read it </p>
<!--[if IE]>
  -->
<![endif]-->
HTC Files:
I have a love and hate relationship with these files. I really dislike that using these my CSS won’t validate, as they require the IE only CSS property, “behavior.” If CSS validation is important to you, you can use a separate CSS file just for this, and have it inside conditional comments. The reason I love these, is because they give IE6 and above some of the features it misses that I use the most in modern browsers, while modern browsers which don’t need the fix, completely ignore the fix file. The fixes these files bring include:

  • Hover, focus, and active pseudo class abilities up to standars
  • Ppng transparency for IE6
  • Rounded corners

The HTC files I use on almost everything are this hover fix file for IE and this transparency fix also for IE. There is also an HTC file for rounded corners which I have never used, so I don’t know how well that one works. The benefits these files bring should help developers avoid the need for unnecessary markup.
The hover HTC brings the hover and active pseudo classes up to standards for IE6 and above, furthermore, version 2 also adds focus up to standards. I have to admit however, I noticed a drop in performance using version 2,while using the hover pseudo class in the input fields in large forms; versions 1 and 3 are seamless.
The IEPNGalpha fix HTC brings transparency to PNG images. It works perfectly for the most part. I say for the most part because one time I had a big div to which I applied this fix. I wanted a transparent image in the background, and though it worked it rendered the links nested within it useless as if there was an invisible layer over them. Making the links “position:relative” fixed the problem however. I however recommend using this only, when png transparency is really needed. In many cases a transparent GIF will do and needs no hacks.
When using HTC files, do understand that these work relative to the page, rather than relative to the CSS in which they are called. It is for this reason, that I recommend using root relative paths when using HTC files.

Calling an HTC file example

1
2
selector {
      behavior: url(pathToFile.htc);}
Important Hack:
This is my favorite hack, and it is not because it is “important.” The reason I like it, is because it allows us to give IE6 special CSS treatment. In other words, through this, we are exploiting IE6’s inability to understand the !important command. The logic here is targeting different browsers based on what they can see. If you wanted only to understand something for example you could use the CSS pseudo classes only firefox understands which include “first-of-type,” and “last-of-type.” Another great use of the important hack is that it can also be used to mimic “min-height” and “min-width” across the browsers.
IE6 does not support “min-height” or “min-width,” for example. In IE6 parent elements stretch beyond their given height if the child elements don’t fit, while modern browsers in such scenario have their child elements appear beyond the height of the parent element. This poses a problem for pages that have dynamic content, as it is usually impossible to foretell the height of the content. The solution is to not set a height, that way the parent div of the content stretches along with it, but then what if you want a an element to never display shorter than a given height. That’s where “min-height” comes in. IE6 does not understand min height but does stretch its parent elements to accommodate child elements anyways, therefore you can set a “min-height” for modern browsers, a “height” for modern browsers, and a “height” for IE 6.

Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.parentDiv {
    min-height:400px;
    /*Div will always be at least this tall*/
   
     
    height:auto !important;  
    /*modern browsers see this because of the !important*/
   
   
    height:400px;  
    /*same as the min-height, which is good for IE6 as it
    stretches for content.  IE6 ignores !important and
    reads the last declaration of height*/

    }

.childContent {
    height:600;}

Giving IE6, 7,and modern browsers special CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!--As I mentioned, IE6 will ignore the !important
always reading the last declaration of any attribute.
Other browsers will read that which has the !important
declaration over the other repeated attributes-->

<div class="someClassName">
  <img id="img1" src="someImage1" alt="" />
  <img id="img2" src="someImage2" alt="" />
  <img id="img3" src="someImage3" alt="" />
</div>

<!-- this 'trick' does not always work as is the
case for the image in the middle-->

<!--in this example im gonna manipulate #img1, with
different css for each browser-->

<style type="text/css">
  .someClassName #img1{
    width:100px !important;
    /*IE7 will see 100 because of
    important declaration*/

   
    width:200px;
    /*IE6 will read 200 as this is the last
    width declaration*/

    }
  .someClassName img:first-of-type{
    width:300 !important;
    /*the most modern browsers will see this,
    as they support these more advanced CSS
    pseudo classes, while others like IE
    can't make sense of this*/
}
</style>
Zero space position relative:
This hack is very simple. In many cases you may want to move/position an item to a different place. Position absolute may not be flexible enough in some situations, and position relative still leaves a gap where the object should have been originally. A solution is to make a parent tag with no height. If the parent is positioned relative, the child element can then be positioned absolute with the benefits of both absolute and relative positioning. It is not exactly something I recommend for clean code, but I have found this to be a great solution when time is tight and in some cases it can even make code cleaner.

Example

1
2
3
4
5
6
7
8
9
10
11
<style type="text/css">
  .justAddedasParent {position:relative;}
  .childElementtobeMoved {
      position:absolute;
      top:5px;left:5px;}
 
</style>

<div class=”justAddedasParent”>
  <input type=”submit” class=”childElementtobeMoved” />
</div>
Transparency:
This one is very popular. I don’t think I need to explain it. Below is what you need to add some transparency to your elements, and accross all popular browsers.

Example

1
2
3
4
5
.selector{
  filter: alpha(opacity=50);
  -khtml-opacity: 0.5;
  -moz-opacity: 0.5;    
  opacity: 0.5;}
Curvy Corners:
Curvy Corners is an awesome javascript tool which allows you to do rounded corners using CSS3 on IE which has no support for CSS3. This is one tool I use very often, though it is not perfect. It functions perfect for most scenarios, but I have had problems with it not resizing to accommodate for a child element that resizes dynamically; that however, is a rare scenario.
Preload Images:
This is a very useful technique, especially for avoiding those dreadful flickering hover image rollovers. That flicker is due to the time it takes the browser to get the image from the server, however, the dreadful flicker can be avoided if we somehow preload the image before the user “hovers” the element with the rollover image. To preload images, we place a div at the bottom of the homepage that contains all of the images we want to preload. Once the div is added it is hidden so it does not show. Placing the div last in the page means it does not interrupt with the loading of the pages content. Unlike javascript preloaders, this method is quicker and more likely to work as there is no dependency on the user having javascript enabled.

Example

1
2
3
4
5
<div class=”imageContainer” style=”visibility:hidden; height:0px;”>
  <img alt=”preloaded Image” src=”pathToImage” />
  <img alt=”preloaded Image2” src=”pathToImage2” />
  <!--height 0px is placed so the hidden div takes no space-->
</div>
Changing input fields from “text” to “password” via Javascript.
If you are wondering why? the reason is simple; it is those times where you don’t want to have labels next to the login textboxes, but instead have the text “username,” and “password” inside the corresponding textbox. In addition to that, I don’t see who would want their password to be displayed in plain text as they type it, and so that’s why the input field type should be dynamically changed from “text” to “password.” The problem here however is that IE will not change the “type” of an input field after it has been loaded, while on the other hand doing so for all modern browser requires only about one line of javascript. In this scenario having two textboxes is the trick towards meeting the goal in all major browsers. By default you have the fake one hidden, and the password one displaying in the case javascript is disabled. In the javascript the fake text input shows by default, while the real password input is hidden. On keypress or click, the fake text input should be switching to the real password input field.

This is the list of tricks I use most often. I recommend avoiding those tricks that involve extra markup, but I know in some cases those tricks are usefull which is why I included some of them here (conditional comments).

All feedback is appreciated.

Share this:

Share this page via Email Share this page via Stumble Upon Share this page via Digg this Share this page via Facebook Share this page via Twitter

The web and some its social relationships

When we think about the relationship between the web and society, I am pretty sure for most of us, one of the first things to come to mind are social networking sites. While this is true, the effect the web has had on our society goes far beyond that of simple social networking. For designers and their clients, for example it has created a relationship of collaboration, which should bring many benefits to their intended audience, and for the audience it should bring an experience, and an improvement to the way they, the audience, do things. This at least, is definitely the case when the designer and the client work together throughout the entire process of the project, from its concept, to its execution. The article “The battlefield of Design: Designers vs Clients” explains the importance of this relationship. The designer knows the aesthetics, and the client knows what his market/goal is (usually); the end result therefore, becomes something useful and pleasing in use. If such is the case, then the execution is a true success, which is also the reason for my previous post in which I disagreed with the mentality that “the best websites are useful and ugly.”

While the design and client relationship is the smaller scale relationship created by the web, there is a huge social change created by the finished product. The finished product creates a relationship between the company and its audience, which can be a major deciding factor to their loyalty for the brand. This loyalty is perhaps the most powerful marketing tool on the web. In the case of social networking sites like twitter, facebook and myspace, this loyalty brings yet another level of social interaction. With a huge loyal following, these social networking sites become portals of communication between their audiences, and the audiences of other companies, which when you think about it, that’s about everyone. In twitter for example as explained in “information beats sentiment”, users can ask and receive information, should they not simply decide to type a status about what they are doing. The simplicity of communication, in these social websites also encourages more honest and balanced opinions on any aspect of any topic, from the positive to the negative. When communication on the web was more complicated people would only write to seek help, or criticize on their frustration with a product’s cons (for example: “my product keeps freezing”). Better communication on the web, therefore means we now get to see more honest and balanced opinions on the topics discussed by the user-base. With modern phones, and better web design this outcome is no surprise as they add yet another level of ease in communicating online. This is a positive thing for communication, and even allows companies to receive a well balanced customer feedback, that way they don’t only know what to improve, but also what they have been doing right.

The social networking websites are interesting as they all seem to appeal to different age groups as explained in this article. The article also mentions that the age differences between the different social networks seem to be diminishing lately, and offers various possible reasons. Going back to the ease of communications, it seems to me that part of this age grouping is the result of advertising. Companies want to market through the young, which creates less age differences between the social networks. It seems everyone is benefiting from the growth of the web. After all, the web is one of those things we have always been most optimistic about, since its birth.

Share this:

Share this page via Email Share this page via Stumble Upon Share this page via Digg this Share this page via Facebook Share this page via Twitter

Usefulnes vs Design

For my first blog post, I thought I’d respond to an article I read recently on the importance of usefulness over design. You can find the article at www.cmswire.com. The article has a point with which agree, which is many of today’s websites feature great designs in the visual sense, which are unfortunately hard to use. While, that is true, I find it to be a gross simplification of the real world scenario. Many websites do look beautiful, but fail to group together related elements into groups, or destroy consistency throughout for the sake of beauty. At the same time, however, there are beautiful designs that keep their consistency and hierarchy of elements throughout. These types of sites tend to be gorgeous looking as well as easy to use, as they kept it all in mind during the design process. Sure, there are some lightly designed sites that work perfectly, and in some cases I am grateful for their simple design, or lack thereof (eg craigslist). But then on the other hand there is always www.apple.com, www.ibm.com and www.wacom.com amongst many which I find to be very beautiful in terms of structure, and message, as well as easy to read.

Share this:

Share this page via Email Share this page via Stumble Upon Share this page via Digg this Share this page via Facebook Share this page via Twitter