In alphabetical particular order:

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

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.

Blogcritics

Blogcritics is a great source for all sorts of topics, from TV, Music, Culture, Books, Sports, Politics, to Gaming, and Science/Technology.  Blogcritics consists of a collection of writers from all over and has an open policy on who can write for them. You or your neighbor could be their Writer of the Day.

Gizmodo

Gizmodo is your must visit blog for all your gadgetry needs. Want to find out the latest about that smart phone app that will increase your productivity 10 folds? Well Gizmodo says there’s already one that will increase it 20 folds, so how about that?

Kotaku

OK, we admit, we have a bit of the geek-side in us and we like to get our gaming fix in every now and then. Kotaku is great way to keep up-to-date on that fix when we’re not actually gaming.

Logo Design Love

Logo Design Love is a blog focused around, you guessed it, logo design. It’s a great source for getting an interesting look at or getting inspiration from logo design.

Matt Mullenweg

In case you haven’t figured it out yet, we, here at iSynergy WebDesign, love WordPress. We use it for our own blogs and for some of our clients who want to run blogs or a light-weight CMS. As such, we like to follow Matt Mullenweg, who bears the title of being the founding developer of WordPress.

Slickdeals Blog

We, here at iSynergy, are bargain hunters and we love Slickdeals for feeding us our regular dosage of deals. Slickdeals also has a blog, beyond their deal posts, and it’s often an insightful and entertaining blog in the world of financials, employment, and bargain shopping.

Smashapps

Smashapps provides the latest news and discussion on things related to blogging, web design, and generally, any internet-based tools that can help you get a leg up in the industry.

The Onion

The Onion has been around for quite some time and is still a great source for hilarious fake news. Love the parodies and the absurdity of some of the articles, especially when they hit a note where they’re saying what the real news is actually afraid to say.

Vandelay Design

Vandelay Design blog is a great resource for various tidbits on anything pertaining to design, be it inspirational imagery, interesting photography, admirable artwork, or technical web design.

Web Design Ledger

Web Design Ledger is a great resource for tips, tools, and tutorials for web design. You can often find some controversial but informative topics. Also, their posts can get technical, but it is a web design blog after all and part of web design is in the implementation.

Web Designer Wall

If for anything else, the Web Designer Wall is one of the more gorgeously designed blogs out there. It has a chaotic feel but yet elegant. Besides the visual beauty itself, though, the content within it is great for web designers, including tutorials, tips, and general ideas on web technology and design.

Website Magazine

Website Magazine is a great place for news and information on the latest and greatest on anything pertaining to the website design and success.

Yoast

At iSynergy, we do a lot of work with WordPress (this blog uses it) and Magento (an e-commerce platform). Yoast is a great place for tips, plugins, and general information for both of these things.

What are some of your favorite blogs? Let us know in the comments. 

No related posts.

The question is how does Instant Preview affect web design? It does in how you can present your website/web design in a manner that makes full use of Instant Preview. These are some of the things to consider for Instant Preview when designing a website:

Flash

Although Google says they are working on it, the current Instant Preview does not properly display flash objects. Instead of displaying the flash, it replaces it with a puzzle piece icon. This wouldn’t be much of a problem if you used flash sparingly as a complementary element to a design, but if your site is designed completely in flash, it will show up as a page with a puzzle piece icon on it and nothing else. There are some ways around this, of course.

The best way is probably to use javascript to embed the flash object, such as swfobject. It validates for W3C and it allows for graceful degradation. swfobject allows you to create an alternate display for the flash object if flash isn’t available and this is the part that is essential for Instant Preview. Whatever content you place within the alternate display will show up in Instant Preview. As such, you could show an image of what that flash object would look like and it will show as such in Instant Preview.

HTML5

HTML5 is all the rage thanks to Apple’s ongoing fight with Adobe, but it hasn’t been finalized by W3C and isn’t fully supported by all the main browsers. While HTML5 can perform some amazing tricks, sadly, most of it does not show up in Instant Preview. Anything done in HTML5 (canvas, etc…) doesn’t even get replaced by any sort of puzzle icon like for Flash but rather just shows up as blank space in the preview. So if your page is made up entirely of HTML5 content, the page will just appear to be blank in Instant Preview.

jQuery

Here’s some actual good news. Page elements and objects that utilize jQuery appear to show up in Instant Preview just fine. We’ve checked image cycling and jQuery-based navigation menus and they seem to be fine. So it seems to be fairly safe to utilize this web designer/developer tool.

Of course Google Instant Preview is still fairly new for wide-spread usage and Google is making innovations to it all the time, but for the moment, the verdict for designing for it is fairly in sync with designing for SEO. Mainly, use Flash sparingly, jQuery is great, and HTML5 is still a work in progress.

No related posts.

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.

In this example, we’ll be rotating 3 CSS files (style1.css, style2.css, and style3.css). To start off, we’ll need to set our first CSS onload.

<link href="styles/style1.css" rel="stylesheet" id="stylesheet" />

For the above code, please note that I added an id attribute. This is important because this will be the anchor reference for what we’ll be doing in a little bit.

Now, within the header still, but after the call of the jQuery library script (see How jQuery Works), we’ll start our script.

var interval
$(document).ready(function() {
	var r = Math.floor(Math.random()*3+1);
	$("#stylesheet").attr({href : "styles/style"+r+".css"});
	interval = setInterval("getCSS()", 5000);// 5 secs between requests
});
var currentStyle = $("#stylesheet").attr("href");

First we want to set a variable for the interval via var interval. This will be used a little bit below to call the function to swap the CSS after a certain amount of time.

After that, we’ll want to set the ready event that waits for the document to load before executing the script:

$(document).ready(function() {

//

});

Within that, the next few lines are where the script truly begins. The first line sets a variable to randomize a number. The count used to randomize can be altered by changing the digit that is represented by 3 within our code. We are using 3 in this case because that’s how many stylesheets we have. Feel free to change that for your personal needs.

The next line references the stylesheet anchor (the id we set earlier) and changes the href attribute to our randomized stylesheet. This way, a different stylesheet can be loaded each time the page is loaded.

The last line within the ready event is our timer. It calls a function, getCSS, every 5 seconds (represented by 5000 milliseconds). The amount of time can be changed by altering the milliseconds. We’ve set it on a short timer so it’s easier to see the effect.

After we close the ready event, we want to store the current stylesheet in a variable, which is represented by the last line. This variable will be used later when we rotate the stylesheet.

Now, we’ll write out our getCSS function, which will do the actual stylesheet rotation.

function getCSS() {
	if (currentStyle == "styles/style1.css") {
		$("#stylesheet").attr({href : "styles/style2.css"});
		currentStyle = "styles/style2.css";
	} else if (currentStyle == "styles/style2.css") {
		currentStyle = $("#stylesheet").attr({href : "styles/style3.css"});
		currentStyle = "styles/style3.css";
	} else {
		currentStyle = $("#stylesheet").attr({href : "styles/style1.css"});
		currentStyle = "styles/style1.css";
	}
}

We’ve added in an if statement so that when we rotate the stylesheet, we won’t rotate in a new stylesheet that is the exact one as the current stylesheet (because then, no change will be visible). So we do a check to see what the currentStyle variable (which stores what the current stylesheet href attribute is) is at the moment. If it is style1.css, then we swap in style2.css. After that, we set the new currentStyle variable to style2.css. Rinse and repeat until we’re done setting all 3 instances. That’s it.

The final script should look like the following (nested within a script tag):

<script type="text/javascript">
var interval
$(document).ready(function() {
	var r = Math.floor(Math.random()*3+1);
	$("#stylesheet").attr({href : "styles/style"+r+".css"});
	interval = setInterval("getCSS()", 5000);// 5 secs between requests
});
var currentStyle = $("#stylesheet").attr("href");

function getCSS() {
	if (currentStyle == "styles/style1.css") {
		$("#stylesheet").attr({href : "styles/style2.css"});
		currentStyle = "styles/style2.css";
	} else if (currentStyle == "styles/style2.css") {
		currentStyle = $("#stylesheet").attr({href : "styles/style3.css"});
		currentStyle = "styles/style3.css";
	} else {
		currentStyle = $("#stylesheet").attr({href : "styles/style1.css"});
		currentStyle = "styles/style1.css";
	}
}
</script>

One caveat for IE that is not related to the above script, if you intend on setting a background that spans the entire browser and swapping that background using the above script, you’ll need to add a few lines to your CSS to make sure the swap gets the intended effects. Mainly:

html { height: 100%; overflow: auto; margin: 0 }

body { height: 100%; overflow: auto; margin: 0 }

IE doesn’t seem to understand the dimensions for html and body unless it’s explicitly declared. As such, when the CSS rotation occurs, the effect doesn’t translate to the entire body of the page and only to the parts that have dimensions declared. The above should fix that problem.

Edit 2010/12/01: There seems to be a loading problem on some browsers (notably FireFox) that causes the page to display without any styles when it is rotating to a new CSS file. As such, we can get around this problem by pre-loading the CSS file. One method is detailed here: Preload CSS/JavaScript without execution. We’ve also updated our test files with the preload script.

Download jQuery rotating CSS using setInterval (zip containing all example files from above).

No related posts.

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.

Your Own Thoughts

You should feel proud of your website. If you have to apologize to potential clients or users when interacting with them because you feel your site has out-of-date information, poor design, poor content, is hard to use, or any other reasons, it will reflect poorly on you and your business.

Search Engine Results

If your site is designed poorly, chances are, it won’t rank very well in search engine results. Some signs of a poorly designed site for search engine optimization include:

• The architecture of the site is convoluted and confusing. If you don’t know where to find the pages you are looking for, most likely, search engine spiders are having the same problem. Simplifying and designing a clear hierarchy of links and navigation would go a long way in alleviating this problem.
• Most of the text contents are images. If it’s textual content, it should be displayed as text in the HTML.
• Your site is in flash. Search engines have come a long way in being able to crawl through a flash website, but the jury is still out on how effective it is. To be on the safe side, important content should not be flash-based.

Sales, Leads, and Inquiries

A website should be an informational site for potential clients and users, but it should also be able to acquire sales, leads, and inquiries. A lot of older sites were designed almost as a brochure in a website format. These types of sites weren’t designed to draw in interactions from clients and users. Most likely, these sites lack some essentials, such as:

• Call-to-actions – Call-to-actions are buttons and links that guide a visitor to do something on your website, whether it is to buy an item, submit their contact information, or inquire about something.
• Newsletter, white papers, blogs, and other information – Newsletter sign-ups allow you to gather contact information from your clients and allow you to send them regular information on your updates. White papers, blogs, and other information pieces are just ways to improve your overall website content. Blogs also help to improve interactions on your website through the comments section and keeps content fresh.
• Contact forms – Contact forms make it easier for your users to contact you. No need to fire up their own e-mail client.

These are just some of the signs that hint at the need of a website redesign. The important thing is in identifying all of them before embarking on a website redesign project.

Related posts:

1. Search Engine Friendly Web Design – SMX West 2009

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.

3. Product Benefits

Always list the most compelling offers first. A nice and clean way to provide product benefits is by using a bulleted list.

4. Opening Paragraph

The opening paragraph should follow the headline. The text needs to be able to entice the viewer into finding out more. The opening paragraph should also be relatively short but informative. If more information is required to describe the product or service, do so in the Product Benefits section or on an additional page that can be linked from the landing page.

5. Testing

Always test, test, and test some more. How do you know if the headline you’re using is compelling enough? How do you know if the Call to Action at the top is effective? Which product benefit is the most important to the viewer? All of these can be answered by testing. A landing page can never be set in stone. There are always ways of improving conversion rates.

Related posts:

1. Search Engine Friendly Web Design – SMX West 2009

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.

3. Easy to Find

Being easy to find refers to both the before and after of users arriving on a page. The web site should be found/linked from major search engines/relevant sites. Important elements and contents should be found above the fold (portion of the site that is shown upon initial loading without scrolling). Contact information should be easy to find, usually in the header, footer, about us, or contact area.

4. Consistent layout, design & labeling

Consistency communicates a sense of trust, security, reliably, and branding. Consistency is based on many factors, such as, use of space, color scheme, logo usage, placement of content, etc.

5. Quick to download

Speed is determined by both actual and perceived download. If what users want is hard to see at first, then the download appears to be slower. Larger downloads can be applicable if the important elements can be found easily.

3 Building Blocks to SEO

The build blocks to SEO are centered on how crawlers/robots can index your site. These are:

1. Text Indexing

If the content of a site does not have any text or “indexable” content, it won’t rank well, which in turn, makes it difficult to find.

Some other important factors:

• A site should make use of Primary Text, which includes title tags, visible copy, text within the header, and anchor tags/links as all search engines index these and use them in determining rankings.
• If time allows, a site should make use of Secondary Text, which includes meta tags, filenames/domain names, and alt text, as only some search engines index these.
• Breadcrumbs can help a lot, giving a sense of organization to users, as well as provide relevant keywords to links.
• If applicable, try to use captions for images because visible copy weighs more heavily than alt text.

2. Follow Links

The link component refers to internal liking within the site. These should factor in site navigation scheme, as well as other page interlinking.

Some other factors include:

Navigation menu

From most search engine friendly to least friendly:

Text Links > Nav buttons > Image Maps > Form/DHTML Menus > Flash

If using non-text links, always provide 2 forms of navigation. 1 for target audience and 1 for search engines. The search engine friendly one can be a navigation placed within the footer.

Embedded Text Links

Text links placed within visible copy can help to enhance usability and search engine friendliness. However, it is important to not overdo it. Too many embedded text links can decrease usability and legibility.

Site Maps

Site maps do not refer to the URL list that can be submitted to search engines. In this case, a site map refers to a page that provides users a hierarchy to your site structure. When creating a site map, it should not just be a list of URLs or links. Having annotations great helps with legibility.

Others

There a number of other helpful ways to improve usability and search engine friendliness. Some involved linking to related pages, upselling, and having a horizontal navigation vs. a vertical navigation.

3. Site Popularity (Link Development)

Popularity is based on number of external links, the quality of external links, and click popularity.

Some other factors that influence popularity include:

• Having substantial and unique content
• How other sites link to your site (What is the anchor text being used? What are the annotations?)
• Having keyword rich text on homepage
• Having at least one crawl-friendly navigation (even if it’s the footer)
• Having links to relevant information/sites
• Having a visible site map

Miscellaneous

Some other factors to think about in regard to search engine optimization and web design:

• Always design for searchers, not search engines
• When redesigning a site, SEO should be put into consideration in the initial phases and not after the site is built
• Test the usability of a site to determine the effectiveness of a site. If users can’t find the information, most likely, it’s not good for SEO either

Related posts:

1. Signs That Show It’s Time for a Website Redesign
2. 5 Best Practices for Landing Page Design