Andres Gallo Web Designer

HTML5 experimentation and logo for “the Lilt”

Other than graphic, another thing that is a passion of mines is music, along with the whole world of multimedia. With that said, I decided to play around with HTML5 with the help of some friends of mine as my first take into a “completely different” type of website. Before I got started in this experiment, I was working on a logo, and business card for new New York City rock band, the Lilt. The Lilt’s music, is a strange mix of melancholic, upbeat, and rough melodies which called for a mix of grunginess and cleanliness at the same time. The focus of the experiment was also based around this band. I will be working on their official website in the future, once the material is recorded and ready. On the meanwhile enjoy the experiment website which was a fun project featuring one of the Lilt’s songs.

The experiment can be viewed at www.lilt.andresgallo.com.

The experiment runs on HTML5, so it requires a modern browser for the best performance. I have optimized it so it works on even IE, although the experience is not the same as it is on a better browser.

You can see a lot of my workflow as I designed their logo, here. I like to try different things, such as letting my imagination run wild, or mimicking another design and later distorting the original idea to create something unique. As you can see, I like to start with sketches.

This is the final logo. As you can see, it is a combination of various of my concepts. It has all the rock and roll vibe of the band, with the simplicity that makes it stand out.

Here is their business card, which like the logos was a merge of other concepts.

Once again the experiment can be viewed at www.lilt.andresgallo.com.

Share this:

Interview: Andrew Hoyer

HTML5 is a wonderful new technology which allows many new possibilities in a web standards context. Working on a paper, about this wonderful technology and its possible effect on the future of the web, I decided to interview Andrew Hoyer.

Andrew Hoyer is a technical and experienced javascript (amongst many other languages) developer, known for various web experiments. I learned about him looking when researching the possibilities of HTML5, and found a really cool and realistic simulation of cloth, in the web.

…And the interview is here

Share this:

Branding Homemade Bites

I love cakes especially when they are homemade. One of my recent clients is starting a business doing home made pastries as well as other delicious desserts, furthermore, they have a great name for their business. They are calling their business homemade bites, and they selected me to work on their delicious logo. Their specifications called for a design that is both, cute, and clean. The specification closely reminded me of the cliche 2.0 style, however I its understood that copying trends is a bad brand identity idea. With that said, I made some sketches, in paper first, as I find doing so allows me to think better in terms of concept, furthermore once I’m happy with a concept i’m set to start creating the logo, if not a few logos.

To arrive to concept ideas, I write down keywords, and sometimes I chose to sketch as I think of things. I think most of the ideas in the following image could make a pretty logo, but only a few of the ideas fully captures the essence of the business.

It is important to always take a second look, to see what is just not going to work, and what is. The logos with the pie, are such an example…Homemade Bites does not do pizza, but it almost seems to be the case based on those logos with the pie shape. With that said there were some helpful sketches that led to this final logo.

Next is their web design, which is supposed to be blog based, but needs something special so it is not just another blog.

Share this:

Simple gallery without javascript

I have noticed a lot of client-side script blocking lately, which is something of an issue for us web designers and developers. To make matters worse, IE doesn’t fully support the basic pseudo classes, hover, active, and focus making our lives harder than they need to be. Let me now stop complaining about IE, and begin this awesome tutorial which I think is ideal on these dark days of script blocking. Even I myself block scripting from most sites, using nifty firefox addon no-script.

Lets start by creating a small div which will hold the thumbnail. Its nice to use thumbnails for web galleries. For the sake of accessibility, we will use a CSS background image for the thumbnail’s graphic, while we use a real HTML image when the thumbnail is activated, as we want to avoid having two images should the client not support CSS, or have it disabled.

Inside of that div or anchor we then place an IMG tag which holds the larger image. You could even add a caption if you wanted inside a paragraph tag, furthermore we can hide and show the caption using the same technique we will use on the images.

So this leaves us with the structure that is a div/anchor tag which is the thumbnail, and which within it, holds the elements you want to show once its clicked. I advise you use the anchor tag instead of the div, if the content that is inside is nothing but natively inline tags. Anchors have better CSS support for what we are about to do in IE6.

Place all the above structure inside a div that will hold the entire gallery and give this new parent div a class. For the purpose of this demo I will give it the class “Tutorial”

I will also use the anchor tag method rather than the cleaner div method as it works in IE6. If that is not a concern, using divs will be cleaner code.

HTML Sample

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

<div class="Tutorial">   <a onclick="return=false" class="thumbnailA" href="javascript:void(0)">       <img src="/wp-content/uploads/2010/03/WeddingSketch1.jpg">       </a> <!-- end Image1"-->       <a onclick="return=false" class="thumbnailB" href="javascript:void(0)">       <img src="/wp-content/uploads/2010/03/WeddingSketch2.jpg">       </a> <!-- end CssGallery"-->   </div> <!-- end Image2"-->

As you can see i added some javascript there as well. If you use an anchor, you want to make sure the browser does not follow the link, otherwise it will go somewhere else or to the top of the page. Using a div instead of the anchor tag prevents this issue, but as mentioned before, it is more limited in IE6 as IE6 supports pseudo classes ONLY on anchor tags.

The CSS

Since the large image is inside of something much smaller, it breaks the laws of physics. Seriously however, what you need to do, is extract it from the thumbnail by positioning it absolute, while the greater Div which we called “Tutorial” is positioned relative to ensure all the images pop up in the same place. Positioning the image absolute is awesome as it looks like its outside of the thumbnail, yet, still allowing us to use nested logic on css.

Once you have figured out where the larger images will show its time to create the CSS responsible for showing and hiding the image. To create this functionality we will be using the pseudo classes hover, active, and focus. IE6 can do hovers to a certain extent, but the newer versions of IE and the other browsers are quiet capable. IE6 is an ignored browser by new web designers, but its a huge market, therefore one which cannot be ignored. We can fix IE6 with javascript, while the modern browsers enjoy an interactive gallery even without it.

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 35 36 37

div.Tutorial {   position:relative;   /*ensures consistent placement of images*/   /*also set the size of area for gallery here*/}   div .Tutorial a {   display:block;   /*since im using an anchor I need to convert it   to a block type element so I can set the size of   the thumbnail as well as other properties*/   /*widht, height and properties for all thumbnails   should be set here*/   }   div.Tutorial a#ThumbnailA {   background-image:url(Path/Of/ThumbnailA.jpg);   }   div.Tutorial a#ThumbnailB {   background-image:url(Path/Of/ThumbnailB.jpg);   } div.Tutorial a img {   display:none;   position:absolute;   top:0px;   right:0px;   /*Positioning depends on how you wanna   lay it out of course*/}   div.Tutorial a:hover img, div.Tutorial a:focus img, div.Tutorial a:active img {   display:block;   /* you may not need all three pseudo classes   The hover class for example maybe annoying /*}

Share this:

Designing a wedding photography site

Weddings mark one of the happiest days of the live’s of most people, meanwhile photography, can be used to hold a record of such day in an elegant manner. Assigned to design a layout for a wedding photography company I thought I would keep both things in mind.

It was a photography site after all that I was supposed to design, and so I began to write down the things that are important for the layout. For one, I did some research on the ratios most cameras output. The web page “photo sizes and image ratios” for example, at http://www.frogprints.co.nz/help/ratio.cfm was of huge help for this, as I want my design to look good regardless of what camera takes the image. Different cameras take their images at different ratios, and it makes no sense to design a great design for a photography site, if the images don’t work with it. Something else which I thought necessary for the site was to design the area for image display as big as possible keeping in mind the standard resolution of 1024×768 pixels. I think it makes sense to have the photos take over most of the screen, as it is good photography the clients will be looking for, furthermore, such a bold decision will show the photographer, as one confident in his/her great skills. I for one would have a hard time hiring someone with a lack of confidence, especially if it’s not someone I know as that well be my first and only impression, which now that I think about it, is the reason why blogs are good.

A blog is near necessity nowadays and so it was necessary for me to keep in mind that the design should fit a blog with minor or no adjustments. Blogs allow the web viewers a closer view upon the subject of the site. Most sites I see don’t have a “brand” consistency with their blog, which I thought would be a good thing to have. Not only would it create a greater sense of togetherness, but it would show a much more professional transition between site and blog, emphasizing the brand identity of the photographer. This of course is not just for photography sites, but for just about everything. This makes things a bit more interesting as the design would now need to be able to handle a bold looking photo gallery as well as a clean blog all at once. If one looks around one finds that the layouts for most photo galleries are incredibly different from those of blogs, however no matter the type of site it is always more comfortable to read lots of copy over light backgrounds.

With these clues in mind, I first began sketching on paper some ideas that would allow me emphasize the photos as I desired while keeping the blog text clean. It may seem senseless to sketch on paper to start, but I always have a different mindset when working with paper, which I use as a device for new ideas. My ideas are usually based around more organic less metrically perfect layouts.

Feel free to move your mouse over the following thumnails for a bigger image

These are some of the ideas I came up with sketching on my sketchbook.

Following those sketches and the idea of warmth and elegance associated with matrimony I created these on the computer with a better idea for the color and structure I would use.

I have decided to go with the tonality of the first digital layout, but with a little bit of a stronger background, as shown in the red layout. The beige tone in the layout with the red accents has much more character

Share this:

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:

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

Final Design

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:

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:

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:

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: