JFlip Fix for IE Browser

Have you ever used the cool jquery plug-in called jflip? This plug-in developed by Renato Formato simulates page flipping for image gallery. 

If you are not cautious in using the plug-in, you may notice that internet explorer (IE8 in my case) does not display the images along with the supposed cool flipping effect. You may notice that the browser yields an error like 'G_vmlCanvasManager' is undefined with reference to the query.jflip-0.4-min.js.

You may get suggestions like use <!--[if IE]><script type="text/javascript" src="js/excanvas.js"></script><![endif]--> in the HTML header tag. That might solve the problem for some, but if you get another error, try using the excanvasX.js to fix the browser bugs further. Just place it your site directory and don't forget to reference it in the header, before the jflip script. It may look like this: <!--[if IE]><script type="text/javascript" src="js/excanvasX.js"></script><![endif]-->, it depends on your directory structure.

Check again your flipping image gallery in IE to see if that fix really works.

Social Awareness Campaigns Through Facebook and Other Social Media

Social networking (sites) has found its massive role in making connections among people across the globe. We get reacquainted to many of our long lost friends, found new pals, shared interests, exchanged thoughts, participated in discussions and many other social activities. These of course are done in-front of your computer or mobile gadgets with the power of internet.

Another important usage of social medium like Facebook is that it's becoming a popular outlet to create awareness or raise funds for a cause. I have seen some Facebook pages that seek to raise funds for the operation of children suffering from deadly diseases. The campaign for raising funds can become viral across social spectrum because tagging of friends is just a click a way.

There was also an awareness campaign before that was supported by women Facebook users. It was made known in their status messages! You probably seen it from your newsfeed the kind of posts that starts with "I like it on".  Yes, it was an awareness campaign, about breast cancer, that is. It went viral very fast!

Just recently, another awareness campaign virally popped up on Facebook! This time it is an awareness Campaign to End Violence Against Children. Facebook users who support this campaign had their profile picture replaced by cartoon images. This has something to do with the right of children to enjoy childhood, and life itself, safe and far from violence.

The putting up of a space for campaigns for a cause is one of the greatest achievements of the social media over the internet. It is a rather subtle, convenient and speedy way to advocate great causes. One of the reasons why Internet was nominated  for Nobel Peace Prize this year.

Image Replacement Through CSS and its SEO Issues

In our web design training, we were taught about the importance of providing alt attributes to images embedded using the <img /> tag. This is for providing some kind of description to the image when the browser has its display image turned off or so that those visually impaired people can have access as to what the image is all about. And for the logo or banner images (wherein they are embedded in CSS and not through img tag) where the company name and its business tagline is etched, we were taught to provide text equivalent to the lines of text in the image.

The CSS technique of replacing the image with text can be accomplished by using the display:none attribute-value or by making the text-indent equal to outside of the screen display (say, -9999px). Basically, what these techniques do is hide the html text from appearing in the browser (remember that those text are already in the image) yet still providing accessibility  for readers (intended for blind). Those hidden text are not visible in the browser but in the source code they can be read by search engine spiders or crawlers.

When I gain some knowledge of SEO, especially on-page, I came to understand that this technique has been tagged as black hat SEO technique because one can then put hidden keywords in web pages. It is admonished to provide text content (keywords) not visible to users but visible to search engines (cloaking!). Putting invisible keywords may result into getting banned from search engines when they discover it.

In todays websphere, some website owners are struggling to rank their site on major search engines. Ranking keywords for your site requires tremendous amount of effort and patience. It is better to adhere to white hat seo practices than to get yourself banned by search engines.

Redirect Moved or Renamed HTML Pages Using 301

In the previous post, we discussed the overview of the importance of creating a customized 404 html page so as to provide visitors a way to navigate back to your site through the links provided in the notfound page.

There are instances where we need to rename some URLs of our indexed web pages, other times, move them to different locations or directories, or even transfer them to totally different domain. And consequently, visitors may encounter not found page. To avoid losing visitors and search engine rankings, you can point the old indexed urls to the newly updated urls by using redirection.

The redirection process can be done by inputing some line of directives in .htaccess. To open the .htaccess, see the instruction in the previous post. Here's what to put in the .htaccess file: redirect 301 /old/old.html http://www.yourdomain.com/new.html. The old.html page under old folder is really the old filename, without the "http://www"  and next to it, sepatated with a space, is the complete url of new file. As simple as that!

After that final touch on .htaccess, you can then upload it and check whether you did it successfully. Enter the old url in the address bar and see if it is redirected to the new page you pointed to. If a page not found is displayed, you probably made some wrong inputs in the .htaccess. Just make sure that urls inputted are valid and the format of the directive line is correctly followed.

Creating Customized 404 File Not Found HTML Page

Okay, you enter a url of a site in the address bar of your browser or you navigate from one page to another and what your browser displays is an error: page not found. And you just hit the back buttom to your disappointment. File not found errors are encountered when a url is typed incorrectly or the file has been removed or renamed.

For webmasters, creating a customized 404 file not found page is helpful to maintain the focus of visitors on your site. If the site is hosted on Apache servers, a simple tweak on the .htaccess file does the magic. For sites hosted on non-Apache servers, it is advisable to ask help from the hosting provider about 404 error page customization.

To create a customized 404 file not found page, locate the .htaccess file in the root directory of your site and add the following: ErrorDocument 404 /notfound.html. The "notfound.html" is the page that is going to be displayed when the typed url is not found. This page must provide some sort of links going to your site, it can be a link to the home page or to the sitemap.

When the customized error page is done, it must be uploaded along with the .htaccess file to your site. Make sure that the created customized notfound page works as expected, with all the links on it.

In summary, a customized 404 page may prevent losing of visitors by providing links relative to site content. It is a good practice to save visitors and giving them ways to discover your pages.

Online Portfolio and Presentability

Most portfolio sites in the internet are flash based. The reason perhaps why many web designers put their sample works in a flash is because of the "coolness" effect of flash websites. And it is a way of making an
impression for potential employers.

With the proliferation of flash folio sites, some ojectives of having the your sample works showcased online are often overlooked. Some sites are so sophisticatedly cool that records of accomplishments or gallery of
artworks are barely noticeable. Complex animations and rocking audios gets more attention than the list of clients they have serviced.

Flash websites have the tendency of loading very slow in many browsers. Though the site may look cool, the loading speed may suck up and may take away impressive points from the reviewer. It is best to have just enough balance between visual presentation and good usability.

You may opt for other web technologies and techniques in presenting your works. A nice javascript gallery may suffice for your need if you are not feeling those moving visuals created in flash. With good design and
layout, your folio page may look impressive and elegant even with just a lighbox gallery.

It is important to keep in mind that a folio site is a showcase of your  worth as designer. Making it a kick-ass page is not at all admonished, so long as there's a way for your works to speak for themselves in the page,
and the usability of the site is not in ruin. The presentability of your site may reflect your disposition as a career person, so furnish it with right elegance, creativity, and passion.  

Online Portfolio 101 for Web Design Applications

Almost all employers in web development industry today require that applicants who wish to become part of their company have to showcase their sample works through live links online. This is essentially important for aspiring candidates who are fresh graduates or career shifters who want an entry level position in web development industry.

For web and graphic design outputs, it is now preferred that they are showcased in a web gallery or similar web pages. Gone are the days when they are just contained in a flash drive or a colorful CD.

It is not uncommon that many applicants today are just copying the works of other people. They claim total ownership of other people's output. They trick potential employers about their real measure of their talent or laziness. Other applicants, to make the stealing less obvious, make some minor modifications on the existing artwork or design.

Some employers demand records of clients from the applicants. They want to see the actual service the applicants have rendered to their clients. They want to assess professionalism of work through scrutiny on clients satisfaction or finished outputs. It is for this reason that applicants must provide honest and professional-looking sets of their works.

Examinations are often provided for applicants and if the folio is nothing but steals from other peoples' effort, credibility maybe put under scrutiny. To put your name into the shortlist of employers, you must showcase the output of your creativity with utmost confidence. Not any form of deceit must come to mind when applying for an opportunity in creative industry. If not that confident in diving into competition, an applicant may consider more practice of his craft and devout more time in honing his skills.

We are going to examine the existing trends in online portfolio making in the upcoming post.

Blog Commenting Best Practices - Part 2

In the previous post, I talked about the importance of sensible and relevant blog commenting. Granted that you already prepared your sensible comment/s, what would be your approach in the insertion of links?

You can put your name in the name text field and the url of your site in the website text field. Some say that it is not a good practice in link building because you are making efforts to rank your name instead of your keywords. But the point of doing this is either you really want your name to get ranked by search engines so that you will get some web exposures along with the services/products associated with you or you want the site owner to trust you (even if your name is fictitious) in your comments.

After creating a relevant and substancial comment, you can then proceed in the insertion of links in the body of the comment with your keyword in anchor text. You just have to be reminded that you have to do it naturally and not spam-looking. You can make it more natural and easy to make comments if you only do it on blogs with articles related to your keywords. For example, you are commenting to a meditation-related article and you are inserting your keywords related to machineries. The site owner if not dumb enough will only delete your comment for the simple reason of irrelevance.

You can put your keyword in the name text field and the url of the page from which your keyword resides in the website text field. Then at the bottom of your sensible comment, you can put your name, without attaching a link. That way, you are making your comment credible and sincere, and if somebody wants to react on your comment, he can address you by name and not through keywords you are trying to link build.

In summary, just make your comments go natural. Make it a practice to comment with a sincere reaction in mind first and not your selfish link building goal go ahead of weight. Always put your name in every comment you get into.

Blog Commenting Best Practices - Part 1

Blog commenting if properly executed can be very effective in getting links pointing to your site. Link building through blog commenting is easy if you know the seamless way of doing it.

Today, many blog comments are pretty spammy and really out of sense. You can see comments that are totally out of relevance to the post. Those "comments" do not even deserved to be called comments at all, you know what I mean. Comments can be agreement or disagreement to a certain idea, thought or statement and not anything that has no sense, whatsoever.

Some of the spammy comments I've observed include just a plain, effortless and insincere thank you to a post. Other comments are even nonsense mentions of themes, the design of site, the subscribability of the page. Some stupid questions like "how did you do that?" are also common, along with "I subscribe to your RSS", "you helped me in my assignment", etc, etc. One thing these "comments" have in common? Irrelevance! Some site owners are inteligent and they knew that those kinds of comments are nothing but garbage spams. And these comments are just thrown by the site owner in the thrash.

In order to gain respect in link building, be respectful in commenting. Comment sensibly. Post sincere comments, or at least close to being really involved in the post.

The New Twitter: A Quick Review

It was just recently that I was able to make a first hand review of the new twitter. Out of curiosity on what the new twitter has to offer, I tried it and took some little efforts to compare it against the "old" minimalist design of twitter.

Here is the lay-out of the new twitter: On the left side of the screen, retweets, @mentions, searches, and lists are being positioned side by side just above the timeline. The list of your followers, persons or entities that you are following, your favorite tweets, trending topics,people/entities suggested for you to follow are being placed on the right side of the screen.

Direct messages are now being accessed through the tab link at the topmost part of the screen, alongside home and profile tabs. The search form is now also at the top.The copyright information, privacy policy and other footer-related links are being placed at the bottom of the right pane.

One of the cool features of the new twitter is the display of the  details pane when a tweet is clicked. It displays tweets, replies and retweets in relation to the tweet that was clicked. This pane also provides an enlarged format of the tweeet-- good for those who are still not comfortable reading tweets from the timeline.

Embedding photos and videos directly on twitter became easy as partnerships with photo and video distribution entities were made. The video or photo can be viewed or previewed right in the details pane.

Another good feature of the new twitter is the preview of a tweep's profile, account info, bio and his recent tweets when a tweep's username is clicked.

The twitter team claimed that the new twitter provides an easier, faster and richer experience... and I can't help but to agree. :)

Interactive Web Banners in Corporate Web Pages

Commercial and corporate web sites used to be very clean, no complex design elements, colors are not varied and typography is consistent.These sites are very professional-looking and are really serious in promoting business products and services. They are also serious intargeting people who might be interested in their line of business.

The look and feel of corporate websites must be engaging. The first fold of the page
is very important. It must contain primary information or messages that presents the goal of the site.It must usher the reader to dig more pages on the site and eventually creating a lead.

sample web banner

It is with this reason that the design of web banners is essentially important. The message must be clearly expressed in the banner. The typography that outlines the tagline must be easy to read. It must also be positioned in the area that is not cluttered with many colors or jungled by other design elements.

Before, it is already enough for websites to have just a static banner. Logo, few characters for the tagline, a picture of a product,corporate background image, blend of colors and other design elements. Not even clickable banners. It was the advent of flash banners that websites got additional "coolness" and better look and feel. Animated text and images, all formed to persuade, to introduce new services and products, to present a glimpse of what the visitor is searching. Some web banners today are powered by javascript. They are in the form of sliders or mini-galleries. Some are automatically scrolling under preset time, others need users' action to get visible. These interactive web banners are usually linked to some pages of the site--providing the user some kind of navigaton of site exploration.

But not all corporate websites need the interactive banner kind. It really depends on the overall look and feel of the site and the scope of content. Interactive banners can be an option to a website with many related pages. The interactive design must not override also the main message of the banner; there must be enough time for every transition so that the reader can scan the text and can have the time to click it.It is not all bout coolness. What is important is good usability.

A Quick Look on HTML Email Design

Designing for browser indeed requires a different approach of execution compared to designing for inbox. HTML email design necessitates the use of old-fashioned table-based layout for it to display across different email clients. Many CSS styles are not well supported and if any style is supported, it is imperative to place it inline with HTML tags.

Some designers even regarded designing HTML email as more tedious and more painful to the ass than working with web pages for browser display. As stated, designing HTML email involves layout with the use of tables and nested tables and the process is like creating web pages during  the 90s. If testing a web page into different browsers and their different versions makes you scratch your head, testing an email newsletter into different email clients and their various versions could make you lose hair. Imagine the number of email clients in existence today, and the version of each also render differences in the display of an HTML email. In addition, some newer versions of email clients even have poorer support for CSS.

sample html email newletter 

Email marketing is still a very effective way of promoting products over the net. It is still the preferred method of presenting product offers and sales invite by some marketers. And the effectiveness of the campaign depends, for the most part, on the presentation, reliability, and attractiveness of the newsletter. And those attributes should be carefully considered during the design process.

HTML emails are here to stay. Their importance in internet marketing arena cannot be understated. And as to their design, rules are to be strictly followed to keep the structure intact and more presentable. And designers can only hope that one day, the process of creating HTML emails can be more forgiving, with the support for newer web technology by the different email clients.