preload image preload image preload image preload image preload image preload image preload image preload image preload image
The Official iSynergy Webdesign Blog

Archive for the ‘Web Design’ Category

iSynergy WebDesign’s Favorite Blogs

Working in Web Design and Web Development generally has us using the web a lot (obviously). As such, we come across a lot of blogs and various websites that are often entertaining, helpful, inspirational, and down-right funny. We just wanted to take a little time and share some of our favorite blogs that we frequent as part of our professional habits or on our personal time.

In alphabetical particular order:

A List Apart

A List Apart

A List Apart isn’t so much a blog as a web magazine (they print new content based on issue numbers). However, when it comes to being a helpful resource in the web design industry, there probably isn’t a better place to find cutting edge design and development information focused on web standards and best practices.

Adobe Blogs

Adobe Blogs

Being in the design industry, it is imperative we keep up with the latest when it comes to all things Adobe. Along with news on the Adobe front, it is also a great source for tutorials, tips, and tricks on your favorite Adobe software.

Read the rest of this entry »

jQuery Tutorial: Rotating CSS using setInterval

jQuery is essentially a web designer’s dream. It’s a javascript library that makes it easy to write javascript code for web designers (at least that’s the way I see it). It’s built to be similar in structure to the way cascading stylesheets (CSS) are written. We here at iSynergy Webdesign use jQuery quite often to do many scripting events and effects.

What we’ll be doing today is setting an auto rotating CSS that swaps out after a certain amount of time. This effect can be used for a variety of things, such as changing the background along with some text styles.

See an example of the jQuery rotating CSS using setInterval.

Read the rest of this entry »

HTML Validation for Sociable WordPress Plug-In

Once again, another post about the Sociable WordPress plug-in, which has, apparently, been taken over by a group called BlogPlay. This time, it’s about HTML Validation. If you use the sociable plugin, you’ll notice that it doesn’t validate if you use it on category post lists or any page that compiles a list of posts. This is because the link uses an id rather than a class to identify the link. Valid HTML does not allow duplicate ids. As such, having multiple sets of sociable links on a page invalidates the page. There’s an easy fix to this, which was already incorporated into the previous URL Shortening and Google Tracking modifications we did. However, I forgot to mention that part and how to do it. This post, hopefully, will rectify that oversight.

Using Sociable 3.5.1, if you look within the file, sociable.php, on line 777, note the following string of code:

$link .= ' id="'.esc_attr(strtolower(str_replace(" ", "", $sitename))).'" ';

Simply change the “id” to “class” and voila, it’s fixed. Your final code should look like this:

$link .= ' class="'.esc_attr(strtolower(str_replace(" ", "", $sitename))).'" ';

That should validate now and work just as it did before.

Note: If you modified the sociable.php, then the line number where the code appears may be different, simple do a search of the line of code to find where it is located.

That’s it. You’re done.

URL Shortening – Sociable Plug-In 3.5.1

Back in August, we wrote a little tutorial on how to update the Sociable WordPress plugin by Joost de Valk to use a URL shortener and add Google Tracking. We’ve updated our download for the recent release of 3.5.1.

To download the latest package: sociable-bitly-mod-3.5.1

See the original post here: URL Shortening and Tracking in WordPress: Sociable Plug-in

Fixing WordPress Multibox Plugin

The WordPress Multibox Plugin is another great plugin for WordPress. We don’t use it here on the official iSynergy Webdesign blog, but we do use it in a few other implementations for clients. It’s great because, unlike most lightbox effects, it works with things other than images. It can add overlay effects to videos, pdfs, and any other web-based content.

However, there’s a minor problem with the multibox.js script. It appears to break within Firefox when the overlay effect is placed on only 1 object on the page (which happens quite often in individual posts). It has to do with the playNextButton and playPreviousButton objects that show up in slideshow mode. When there’s only 1 object with the overlay effect, the two buttons become undefined and end up breaking the overlay script.

To fix this, we’ll have to modify the js file within the plugin. Depending on which mootools version you’re using for the plugin, go into the plugin folder and navigate to either mtv111 (for mootools 1.11) or mtv120 (for mootools 1.2) and open either the multibox.js (for mootools 1.11) or multibox-1.3.1.js(for mootools 1.2).

Read the rest of this entry »

URL Shortening and Tracking in WordPress: Sociable Plug-in

The Sociable WordPress plug-in is a great extension and we use it here at the official iSynergy Webdesign blog, but it’s still missing a few key features.


One key feature is the ability to track the data of how many shares are made through sociable. Using Google Analytics, it’s possible to set up event tracking as a means to keep tabs on the data.

To do this, go into the sociable plug-in folder and open the social.php file in a text editor. Go to line 703 or look for the following code (for 3.4.4):

$link .= " href=\"javascript:window.location='".urlencode($url)."';\" title=\"$description\">";

or the following (For 3.5.1 and 3.5.2):

$link .= " href=\"".$url."\" title=\"$description\">";

Add the following into the anchor tag:

 onclick=\"pageTracker._trackEvent('Sociable', 'Shared Link', '".$title."');\"

The code should look like this after (for 3.4.4):

$link .= " href=\"javascript:window.location='".urlencode($url)."';\" title=\"$description\" onclick=\"pageTracker._trackEvent('Sociable', 'Shared Link', '".$title."');\">";

Or like this (for 3.5.1 or 3.5.2):

$link .= " href=\"".$url."\" title=\"$description\" onclick=\"pageTracker._trackEvent('Sociable', 'Shared Link', '".$title."');\">";

And that’s it. As long as you have Google Analytics set up on the page already, it should start tracking events for sociable links.

Note: you can find event tracking in Google Analytics under: Content > Event Tracking

Read the rest of this entry »

Signs That Show It’s Time for a Website Redesign

Website Redesign

Creating a website can be a difficult but rewarding process for your business. It takes time, creativity, and dedication to push out that first website and once it’s done, you can just leave that part of the business behind you, moving onto other goals. Then again, nothing lasts forever.

Even if you design a website for your current goals and vision, it’s always difficult to anticipate the entire future growth and expansion of your business. As your business changes, you can make minor updates and keep the website fresh, but at a certain point, it may need a complete redesign. When is this point?

Some signs that show it’s time for a website redesign include:

Business Growth and/or Change

Businesses change over time. Maybe your business’ goals, visions, mission statement, products, services, and/or size have experienced a shift. As a result, your website should change in order to accommodate the differences within your business. The website should always be a reflection of the current state of your business and should be restructured if necessary to represent it.

Website Look and Feel

If your website hasn’t been updated in a decade, it’s highly possible that the look and feel of the website (as well as technologically) could be out of date. Aesthetics change over time. What may seem hip and modern 10 years ago probably isn’t the case anymore. Some signs of an outdated website include:

  • The website is served up in frames (loaded in multiple individual panes within the browser) – Framed websites are not bookmark friendly nor are they search engine friendly.
  • Depending on the website purpose, it uses a splash page with a “click to enter” link in order to get to the main website – In most instances, splash pages only hinder users from getting to the real content that they came to your site to see.
  • It uses a tiled background that obscures the foreground text – If the text is important, it should be as clear and legible as possible.
  • It contains a message that suggests that the website is “best viewed in [insert browser name]” – Most of the time when a message like this is displayed, it is because the website isn’t designed to be cross-browser compatible. Modern browsers still have some incompatibility issues, but modern website design can be made to work in all major browsers with little incompatibility problems.

The majority of the above are signs of an unprofessionally designed website. As such, your business could lose credibility if it appears outdated.

Read the rest of this entry »

5 Best Practices for Landing Page Design

Landing pages are often the neglected parts of an online advertising campaign, but are an essential part of the conversion process. In fact, it is arguable that the landing page could be the most important element in helping conversion rates because no matter how good the outbound campaign is, once a user lands on the page, if there is a disconnect or if they do not find the sought after information in a timely manner, they are likely to abandon the process.

There are many factors to consider when designing a landing page. Some of them include:

1. Headline

This is the most important factor to a landing page. The headline is the first thing a viewer sees when coming to the landing page. As such, it needs to do the following in a concise manner:

  • Tell the user that they are either at the right or wrong place
  • If it is the right place, compel the user to continue the process

Try to keep the headline short, concise, and to the point, while at the same time, informative enough to keep the user within the funnel. Using keywords within the headline can help in both cases.

2. Call to Action

The Call to Action is anything on the landing page that tells the user to take action. Call to Actions should be obvious (if something looks clickable, it should be clickable) and visible above the fold and below the fold. The phrase used within the Call to Action should be active and concise.

Example: instead of “more info”, use, “get a free consultation today!”

It is also important to keep the number of Call to Actions to a minimum. If there are too many Call to Actions, it may become confusing for the user.

Read the rest of this entry »

Search Engine Friendly Web Design – SMX West 2009

SMX West 2009The following is a summary of a session at SMX West 2009 on Search Engine Friendly Web Design presented by Shari Thurow, Founder and SEO Director, Omni Marketing Interactive

5 Basic Rules of Web Design

When centered on the user, there are specific rules that form the foundation of successful web design. These are:

1. Easy to Read

The code and text should be written in a way where it is easy to read. It should continue the “scent of information” (contain relevant keywords from acquisition source) so that a user can easily discern that they are in the right place.

2. Easy to Navigate

The web site should be, first and foremost, designed for users and searchers, not for search engines. All elements that appear to be clickable should be and users should have a sense of where they are at when navigating the site.

Read the rest of this entry »