Revised Google SEO Guide 2012 Edition: Big Changes in Algorithm


h2 { font-size:18px;}

Everybody is buzzing all around now, how latest changes Google did affected their search traffic greatly! Chances are if you monitor your own properties on Google Analytics, you will see significant drop in your traffic in March!

1WD was seriously affected as well from March 20! Besides Google Panda release, there were 2 rounds of changes Google did, hurting almost every site search traffic:

Panda 3.3 – Search quality highlights: 40 changes for February
Panda 3.4 on March 23 – Search quality highlights: 50 changes for March

So what exactly do these changes mean? Do you need to be worried and what can you do to be prepared and be more likable in Google’s eyes?

In this Google SEO guide I will show you the behind the scenes on how 1WD was affected, explain how to monitor your traffic better and how to be more prepared in the future. A lot of websites were hit hard, even high authority websites. We always have been focusing on high quality content here, never used spammy link building techniques and we believe our social presence is very strong as well.

Revised Google SEO Guide 2012 Edition: Big Changes in Algorithm

So what the hell is happening here?

Which sites were affected, which were not?

After asking around, I found out that mostly new websites ~1 year weren’t affected, but a lot of sites which had some very high-ranking keywords, felt a big decrease there.

It seems if you have average links, new website and haven’t done spammy SEO promotion, you are doing great. However if you have something to lose as old, stable top keyword rankings, you got hit.

I compared several top web design websites on Alexa and here are results for the last month March 15 to April 15:

  • 1WD – 6% drop (it was more like 15% drop in reality for me, which means everybody was hit much harder as Alexa shows)
  • SmashingMagazine – 6.5% drop
  • Sixrevisions – 2% drop
  • WebDesignerDepot – 5% drop
  • Css-Tricks – 4% raise
  • Designm.ag – 12% drop
  • TutPlus sites – 3.7% drop
  • SpeckyBoy – 4% drop
  • SpyreStudios – 7% drop
  • Hongkiat – 9% drop
  • UxBooth – 5% drop
  • WebDesignerWall – 3% drop

You can check Copyblogger with 15% drop  and Quicksprout 16% drop in other niches! Crazy right? And those are just Alexa’s inaccurate stats, if I compare with 1WD Analytics, then I believe all of these sites in reality got 10-20% drop in traffic!

All of these blogs are very popular and always focus on high quality articles. This really doesn’t make sense and it shows how we need to rethink what we are doing online, what we are writing and how we need to promote our websites.

The most visible and buzzed topics about Google changes were:

  • Big link networks taken down
  • Duplicate page content
  • Over Optimization
  • Too many ads above the fold
  • Social signal importance

What mistakes should you avoid doing? And how to fix them?

Its time to list down the most popular mistakes we all probably have done before, but should avoid now! Interesting that a lot of these mistakes aren’t new, but before all of those techniques were really working. Most mistakes are easily found because they do not look real and Google has raised his eyebrows to search everything unnatural.

1. Obsessing about exact-match anchor text

Everybody who has done link building anywhere has been working to target perfect term for their website. Wherever you could, you try to include your term, for example: web design blog.

You can include this term while:

  • Commenting on other blogs
  • Writing guest posts
  • Getting paid links, advertising
  • Writing your forum comment, Yahoo Answers, Quora, including term in signature
  • Using link building tools, blog networks

Previously this technique was really working even if there were people warning about over working, but there weren’t so many drawbacks. Until now.

Such obsessing do not look natural for Google and it’s easy to spot it!

How to fix this mistake?

Do your keyword research again and choose 5-10 terms you would like to rank for and mix them in wherever you can. Change your signatures to be different. Instead of working for one term, when guest posting for example, include related article you have on your blog, not your home address anchor text.

While working on your brand awareness be as helpful as possible, don’t just link back to your site, link to others, link to very specific posts if you have, which are related. The same is about comments – if your comment is valuable and you have high quality article written about the same issue, include it, but don’t obsess about always mentioning your brand!

Good practice is also to check how others relate to your brand! Usually if they will want to share your website to others, they won’t tell – check out this web design blog. Instead they will tell to check out 1stWebDesigner (it helps to have related keywords in your domain, of course as we have – web designer).

2. Ads Above The Fold

Google has announced that pages with too many ads above the fold are now penalized by Google’s page layout algorithm. Strangely Google itself is not following their praised best practices.

Ads above fold google

These news completely make sense in order to ensure the best reading experience, however it’s hard for blogs who want to earn some income to remove those top ads, without loosing money.

We are doing bad work on 1WD ourselves, but we are working on removing those ads slowly and once our own Labzip product will be ready, we plan on having just one banner ad on sidebar for better experience.

How to fix this problem?

Easy answer – just remove those ads! Every blog owner knows it’s not so easy to do that, as it removes any income! What you can do instead is to move some of those ads below the first page, put them on the middle or bottom of sidebar or at the end of the blog post.

Great solution is responsive websites, where on smaller screens you remove those ads completely or leave just few of them. On Codrops website, you will see ads following to the bottom of page in that way cleaning up above the fold section (scale that site resolution down, to see effect in real life).

Very good example is SmashingMagazine website:

This is the screenshot from website on 1000px width:

Smashingmag ads

This is the screenshot with 1024×768 resolution:

Smashingmag 1024 resolution ads

As you can see on the first image, you can see just 2 ads, while in second one there are 8 ads above the fold. Even then though SmashingMag also saw decrease in search traffic. My guess would be that too many people on 1024×768 still see those ads, but the trending is right. A lot more people are using tablet devices and mobile phones to browse internet and they will see little ads there.

The same is true about big resolutions, I have Macbook Pro with 1680×1050 resolution, and while browsing SmashingMag on full screen those sidebar ads do not seem to be hurting readability.

Suggestion – create a responsive website and remove as many ads as possible on smaller screen sizes. In dream world, people with 1024×768 and less shouldn’t need to see sidebar ads.

Summary: going responsive and removing some of the top ads and a lot of links from top could definitely help improve readers experience and also will make Google like you more. Removing clutter from top navigation is top recommended while planning your design.

3. Duplicate page content

This is a very popular technique used by spammers, who just copy other site content and publish it as unique. Don’t do that. Ok, I bet if you are reading this blog you aren’t doing it anyway, but also check your site for bad code, which makes your site content to be duplicated. For example I checked my SeoMoz pro and saw I have a lot of page duplicates, where on WordPress writers use images, but don’t remove default link from them. For my layout it created one more page with that image, which was taken as duplicated content for Google.

Be sure you don’t make such silly mistakes, which can hurt your rankings and make experience for your visitors worse.

If you want to read more about duplicated content and check if you aren’t making any mistakes visit those links:

  • Virante – This tool diagnoses common causes and effects of duplicate content penalties;
  • Check your Google Webmaster tools to improve your site;
  • 7 Ways to Tame Duplicate Content – read this old, but still relevant post from SEOMoz.

1wd duplicated content

Here you can check more common SEO mistakes from official Google Webmaster Central blog, check this video ( created on March 19,2012):

What should you do now to improve your search rankings?

Okay, you heard about a lot of mistakes, but what exactly do you need to do now to be friends with Google, to improve your traffic and brand?

A lot of fundamentals have never changed, Google’s changes just encourage you to work on best content, real relationships, best user reading experience and be quick to change and improve.

1. Don’t chase the algorithm, create content for users

You might be hearing top SEO advice all the time, people talking how to help you promote your content, get easy way to huge traffic and high-ranking. The truth is even if some of these spammy techniques work, they won’t work in short future. Blackhat SEO guys, make it their job to search for the holes and change all the time, but it’s a hell of the work and they must be very careful. Just very few guys are so smart, so experience that they can really work on gaming the system.

I would suggest to work on long-term white hat techniques, which will do a lot of good for you in long run. With online business it’s important to feel safe about it and know that you will earn approx the same or more money each month.

2. Track everything

Use Google Analytics, KissInsights, Kissmetrics, Seomoz Pro, Webmaster Tools to be able to keep up with trends, get information about your visitors and make sure your site follow the best techniques, check if links are working.

3. Be aggressive and quick on changes

  • If you are interested on being friends with Google, you need to be friends with your visitors. If all the sites are going mobile and on tablets, you need to create your website to be accessible on those new devices.
  • If everybody is implementing HTML5, CSS3 then use it  so your code becomes cleaner and shorter.
  • If browsers are stopping to support Flash, then you better start focusing on new techniques.
  • Responsive designs help for site to be supported on all those different resolutions, use it!

4. Social network importance

Google is pushing its social network Google+, Facebook is working together with Bing search engine, Twitter search results appear real-time. The future is in social networks, Google are getting better and better on indexing such information very quickly, they listen to social signals.

Actually those are great news because before Twitter, Facebook was completely different traffic sources, now they complement each other by showing up in search results as priority. If you want to work on search engine optimization, work on social networks! We have quite a lot of them, I didn’t mention Pinterest and LinkedIn even yet!

5. Update Your Old Content

This can take a lot of time if you have a lot of articles, pages, like we have on 1WD, but encouraged to do. If you have old posts which rank very good, its worth updating them, checking for broken links, up to date information. You will get huge benefits from that like more social signals, new comments and your posts will be kept ranking very well.

If you have written very poor content in past, then consider editing it, don’t delete those posts, but invest in quality.

6. Implement SEO basics and good on-site strategies

The most important thing is to use very simple and clean code, validate HTML and CSS to prevent any crawl errors. If you will keep your code clean, pages will load faster – load speed also affects search rankings!

While working on your website design, remember to keep your top navigation simple and short ( something we are not doing!) We were thinking that detailed navigation will help users to browse around, but in fact it’s only creating clutter, as people just want to read the latest, then most popular posts and if they want to find something they use search anyway.

7. Work on good link building techniques

These include writing guest posts, working on real relationships with influencers, with your peers where you can help each other by linking on relevant posts, writing comments and leveraging from those relationships.

Actually the same way you need to work on social relationships with goal to get more social signals, the same way you work on link building indirectly just working together with people helping each other. For example, if you would own 1WD, you would connect with similar web design blogs, interact with blog owners, link to their sites – they will return the favor one way or another just because they will consider you friend.

Tools to use for better SEO on your own site:

WordPress SEO by Yoast (free)

In past I have always been using All In One SEO, but now transferring to Yoast plugin, because it is very complete, everything in one place, easily explained and once you setup it, you can forget about it, just add what’s required to new posts and enjoy the best SEO practices.

If you invest time in researching all of this plugin features, it will be enough for you on-site SEO efforts!

Some of the popular features include:

  • Post titles and meta descriptions
  • Robots Meta configuration
  • Google webmaster tool verification, Bing webmaster tools
  • XML sitemap
  • RSS enhancements
  • Edit your robots.txt

WordPress SEO Plugin  Search Engine Optimization Plugin  Yoast

SEO Smart Links (79$ for 3 months)

SEO Smart Links – Premium Edition enhances your search engine rankings by automatically inter-linking your posts. In this way you are working on link building magically while writing new posts, which is very useful as each links also counts as vote for search engines. Start with your own site!

This is premium plugin created by Vladimir Prelovac, there are some free plugins around like this, but I cannot vouch for them.

Some of the features:

  • Enhanced content parsing algorithm
  • Advanced automatic interlinking options
  • Advanced custom keywords options
  • Advanced control over number of created links
  • Support for link redirection/link cloaking

SEO Friendly Images (free)

This plugin will come really handy for your image optimization, also created by Vladimir Prelovac.

SEO Friendly Images is a WordPress SEO plugin which automatically updates all images with proper ALT and TITLE attributes for SEO purposes. If your images do not have ALT and TITLE already set, SEO Friendly Images will add them according the options you set. Additionally this makes the post W3C/xHTML valid as well.

Seo friendly images

CommentLuv Premium (free to 67$)

Comment section is where you should spend a lot of time as blog owner, if you work on regular content then you must encourage comments. Your visitors are actually helping you to add more good content to the post by leaving valuable comments. But in order for them to do that, you need to encourage them by rewarding your visitors. How about the link back to their recent post?

Some of the best features:

  • 10 post incentives – if visitor share post on G+, Twitter or like, he can choose which post to include there
  • Control over do follow, nofollow attributes
  • Built in tracking system
  • Beautiful anti spam plugin GASP built-in, to eliminate spam. Actually a lot of options to take care of spammers wanting to just get their links.


If you want to read more benefits of using this plugin, check this awesome plugin review made by Ana, her blog posts usually get from 20 to 100 comments. Only thing missing in this plugin is beautiful design, but planning to take care of that by manually redesigning it.

Google WebMaster Tools

Must use tool where Google will directly inform and help you know what sections of your site needs to be improved, what problems it may get or is getting.

Google webmasters tool

SEOMoz Pro (99$ per month)

SEOMoz is a proven tool created by SEOMoz experts, their expertise and great blog leaves no doubt they know what they are talking about. I am using their software to get detailed analysis what kind of most common errors and warnings I have on my site, manage keywords, keep eye on search traffic where data is driven from your Google Analytics account ( ah, you should have Google Analytics installed of course).

It is quite expensive, but I really feel it is helping me to simplify SEO and social monitoring on my own website. If you take SEO seriously and want to make your life easier, consider getting this tool.

Remember they have a big team and they are regularly improving, crawling your site each week, notifying you about issues that might impact your performance.

Seomoz pro seo optimization

Xenu Link Sleuth & Screaming Frog SEO Spider (free)

This tool is helpful for checking web sites for broken links, analyze all of the SEO basics, store information locally and then if any problem arise you can check on history to help you diagnose which changes may have affected that problem.

Link verification is done on “normal” links, images, frames, plug-ins, backgrounds, local image maps, style sheets, scripts and java applets. You can download this software for Windows, Mac and Ubuntu.

Additional features:

  • Simple, no-frills user-interface
  • Can re-check broken links (useful for temporary network errors)
  • Simple report format, can also be e-mailed
  • Executable file smaller than 1MB
  • Site map

Xenu link sleuth checker

Sites to read to check on further Google SEO changes and discoveries:

Here are the blogs, video channels and articles to read to check on what’s happening behind the scenes on Google and to find further proven explanations and solutions for problems you may have.

Google Webmaster Central

This is the official YouTube channel for Google Webmaster Central, your one-stop shop for webmaster resources that will help you with your crawling and indexing questions, introduce you to offerings that can enhance and increase traffic to your site, and connect you with your visitors.

Google webmaster central youtube

Seomoz Blog

Seomoz product founders happen to own one of the best SEO blogs out there. It is a great community where you can ask questions in Q&A forum, official blog and then user submitted post blog, where you can get even more great advice and practices.

Favorite posts on Google topics:

Seomoz blog

SearchEngineLand

One more top SEO blog and while doing research on current SEO changes, I found a lot of relevant and up to date articles about this. That’s one big reason to remember checking out this site on regular basis.

Some valuable posts you should read there:

Search engine land

MySEO Community

This is an amazing website curating information about SEO, they work seriously on quality, so if you need one stop place about SEO, don’t go further.

Here is their own description about their site – MySEOCommunity isn’t a run of the mill online community. Because of the increasing popularity of search engine marketing and social media, there is a lot of content written about these subjects on a daily basis. Unfortunately, trying to manually keep up with the best content that’s being written is next to impossible to do.

MySEOCommunity blogs read

Check which links can harm your site rankings:

If you did over optimize before on your site, you should be very worried, so here are some useful articles to read about how to recover from those bad links. Check also which links can be harming your site and remove them.

Is your site affected by Google algorithm changes and how you are solving them? Would love to hear your stories and solutions.

Article Source : www.1stwebdesigner.com

How to speed up your website


h2 { font-size:18px; font-weight:bold;}

Site speed is one of the most important things about creating web content, and web applications.

In fact, it has been noted by various analysts at Google that people don’t often sit through the first 30 seconds of a video, much less the first 15, so it would be wise of you to get the content of your site loaded as fast as you can so that people can make a judgement and agree to either use it or not.

It may be a bit superficial that people judge sites that fast, but it is often the case, and we shouldn’t take it for granted.

Optimizing your site should be a top priority, and often times when using WordPress and other engines they have nice plugins that help. I will assume though, that you may not be using WordPress, because there are a lot that don’t, and I will give you a few of the best ways to optimize any site regardless of where its hosted.

Images

Image optimization can be a tough topic, but one that actually has a lot of aspects from which to choose. There are file formats, image optimization tools, and code/CSS best practices to follow to make sure you are saving and acting with images in the best way possible.

I want to give an example as to why this is important though, so let’s take a recent example. It has recently become apparent to various iOS developers and app creators that apps that use the Retina ready images are taking up 2–4 times as much space on the person’s phone than their previous versions, and it is causing people’s phones to simply run out of space from simple app downloads.

This isn’t as relevant to us web developers and designers, but it does go to show you just how important it is to properly handle your images on any platform. The following are a few of what I think are the most important topics to remember when optimizing images for the web.

Image formats

The formatting of images is a heated topic, and it seems to be because everyone believes a different format will increase speed, but there is a pretty prevalent school of thought on this, and we can always use this as a de-facto standard. JPEG’s are for photographs, GIF’s are for low color images/flat color images, and PNG’s are for everything else. Most web designers and developers that I know of prefer to use PNG’s for just about everything, unless they have a button perhaps that has one or two colors, whereby they find GIF’s to work great.

Now, of course you can play with those specifications but always remember that these are standards for what will save smaller and lighter vs bigger and heavier. If you are doing a photography site though, it will be loading pretty slow regardless compared to other sites — so try out some of these next methods to increase the image optimization overall.

Image code

One of the worst things we can do for server time when loading images is let the code do the sizing for us. Well, that could be said for anything regarding ‘letting the code do ____ for us’. The common saying is, “If you can do it, then do it”, and it is a darn good one. Using things like width='50px' height='30px' can really throw off the server load time as far as that image is concerned, because the server is parsing the page and sees there is a task it has to accomplish – one that could have been done by the creator. So make sure you go ahead and do that with all of your images.

Image optimization tools

Tools are always helpful. Well, most of the time. Sometimes they are a burden and a distraction, but in this case it seems that they are often very useful. If you can find a great image optimization tool, first of all — link it in the comments because we are all on the hunt, but a few of my favorites are following. I love ImageOptim for Mac, and Riot for Windows. These two tools are very different, but perform a similar task.

You can put images in and it will decipher a way and method to optimize them, do so, and then spit back out the final result all the while saving the format you sent them in with. They are really quite nice, and there are tons more out there. In fact, there are a bunch that will analyze an image’s bitmap and tell you what format is best. You can easily tell that these are some of the most useful things in a web designers tool bucket other than a text-editor and design program, and rightfully so.

Image based server optimization

I’m not an expert when it comes to setting up servers, but I certainly have enough background on the small scale to give this advice. Don’t have massive image loads stored locally. That is, don’t leave a database of images stored on your servers that you are serving the other site files from. Take note of the technologies such as Amazon S3 or Flickr’s servers, and use those to serve your files from.

I’ve recently implemented an Amazon S3 bucket to server our files from, and it was actually quite easy — so feel free to try that. It is a great method. The main reason is that you don’t want a database bottleneck to happen in an instance that you are serving multiple loads from, because it can be a diagnosing nightmare. It’s good practice to store separate file’s on different servers (if under massive load) unless of course it is just a simple general purpose string storage database or something similar.

CSS and JavaScript Optimization

CSS and JavaScript are really important languages when it comes to web design, and especially when it comes to creating dynamic content. I think that people often forget that they can optimize their dynamic content, and they forget that they can optimize their JavaScript and CSS. These aren’t really the most significant things for smaller sites, but with larger sites it’s really important — especially when it comes to sites that rely on a lot of design. Let’s step through a few of the “CSS and JavaScript Rules” that are pretty standardized when it comes to creating web applications.

First rule of CSS and JavaScript

If you can do it in CSS, then do it

Often times we forget that we have amazing tools right in front of us, and I’d say CSS classifies as one of the most amazing web designers have. I’d also say that designers jump into photoshop too quickly by nature (but it is their job so who can blame them). Do keep in mind though that as you design you have something in your browser that can do quick mock ups too: CSS3. Take advantage of it! Having a place to do quick mockups really helps, and it will lead you away from doing hacked together things in HTML later on. Instead of ” ” I am sure you can find a way to add that space in CSS, so do it!

Second rule of CSS and JavaScript

Minify, minify, minify!

The minification of code is perhaps one of the best and easiest things you can do to speed up your site. Keep in mind, we are talking miliseconds, but still it has a noticible effect — and especially if you are using something like a jQuery library. Remember that if you are ever adding plugins for JavaScript/CSS and you are given the option to download the minified version (and don’t need to edit it), do so. Some of my favorite tools to do this are, Code Minifier for Mac, Minify for Windows, and JSCompress/CSSCompressor for those of you who want some browser-based cross platform solutions. Happy minifying!

Third rule of CSS and JavaScript

In-line is a no-no

It is bad practice to use in-line CSS or JavaScript, but especially when it comes to CSS. The reason for that is not only due to legacy issues, but also because if we leave the CSS within the HTML code (especially in-line) it will read as such: HTML/CSS/HTML/CSS/HTML/CSS/HTML/CSS instead of just a simple HTML => CSS. As you can tell, this is really bad for server load times, and can often lead to the detriment of most web applications should there be a designer who refused to use it in a separate file. It certainly wouldn’t cause your site to crash, but it will cause another employee to go through and extract it — it is that important. So always remember to be the one who is extracting it, not the guy who leaves it for others to extract.

Fourth rule of CSS and JavaScript

Move it down

If you have to put your JavaScript in the page with the HTML itself, and have no way around it, then put it at the bottom of the HTML document. This helps speed up the site load time as well, because we can perform all of those functions and other JavaScript goodies after the page itself has loaded. Another thing is that this decreases the likelihood of a bug squashing the performance of the entire site, because when there is a bug with the JavaScript in a sight it will often eat memory like no tomorrow. So it is good practice to make sure your site isn’t doing that, and to warn against future events in which it may — none of us want people to visit our site and then have their browsers crash.

Fifth rule of CSS and Javascript

DOM optimization

Reduce the DOM if you can. Take for instance an example that you are using a lot of jQuery that points to various DOM elements or reads through all the DOM to find something — it can slow your site down quite a bit. There is a little saying I always loved and it fits here, “If you are doing things because it is the only way you know how, then there are probably better ways to do it.” You could also say, “If you are doing things because it is the only way you know how, then you are doing it wrong,” but that version is a bit harsher.

Research, and find those things out in such a case. If you are working with a div in HTML just because you need it for one little thing and it is the only way you know how to do that then it may not be the best way. Now, of course I understand that using div tags because you need them for your CSS is entirely understandable, but perhaps you can remove a few and find a more broad manner of handling that style issue.

I just recently did this myself, as I am going through a Ruby on Rails project currently. Earlier in the week I nested roughly 5 div’s within each other in HAML of all things, just to do something I wanted (a box in a box in a box inside of something else in this case). And I just looked at it, knew it was crap, but didn’t know a better way to do it, so I scrapped it all to re-do it. Having to re-do that made it much harder but it forced me to learn a new way to handle that issue. And in the end I learned a lot from it, and I would recommend the solution to anyone in the future. Go ahead and grab one of those knowledge nuggets for yourself! They are certainly low hanging fruit.

General optimizations

These are more of the broad topics that really don’t fit in anywhere else, but that I still feel deserve some attention. In fact, some of these may be the most important things you can do to speed up a web application or site.

Slashes on links

This is noticeably important. When a user opens a link without a slash at the very end from a website the server literally has to figure out what kind of file or page is at that address. The server will then include said slash, but if you add it yourself then you are reducing milliseconds of load time. These milliseconds all do add up, I promise. Often times I find designers especially who don’t think about it think that their unoptimized code will not burden anything, but it does in the end. If you save quarters for 10 years you certainly will have a lot of money, and the same concept applies here — just on a smaller or larger scale depending on your site’s traffic.

Favicons

Browsers always do a pull for a favicon.ico file at the root level of your server, so you may as well just go ahead and include it. Even if it is something temporary, it is always good to have. If you don’t, the browser itself will give an ‘internal 404′, and just cache that 404 up on the browser’s favicon.ico section, and we all know reducing 404′s speed up load time.

Reduce cookie size

This one may not apply to all of us, but if you are developing web applications then reducing the cookie size is really important. For instance, in what I am familiar with — Ruby on Rails applications — you can use cookies (or other methods) for authentication from session to session and often times people will prefer to use the other methods because they can decrease user load times with them.

Now, a cookie does imply that it is caching things on your computer so you may think it would increase load time, but typically all they are good for is authenticating user sessions or tracking you around the web (as Google and Facebook have been accused of). If you have to work with Cookies, though, make sure you keep the size low and you use them with your better judgement. If you have to, set the expire date shorter to decrease the load time.

Cache

This is a massive topic, and one that I am not an expert on. Caching though is a pretty simple concept. It is storing files (typically HTML/CSS code) from sites that you frequently visit on your computer so that you don’t have to load them every time you visit.

It is really an incredibly useful technology, and one that a lot of web applications are starting to employ as of the past few years. There have been a number of database solutions for caching and probably the most notable is Memcached. What this does is store a copy of database files to your browser as you are using a web application. So, for instance, if you have various profiles you visit often it may store the profile pictures to your computer, and the beauty of Memcached comes in the next phase. In your code, you can actually call (before you pull from the DB) from the Memcached servers and see if you can pull a cached version of the file(s). And if not it will, of course, pull the file from the Database, and if it isn’t in the cache already it will add it to save time next time. This is a beautiful example of caching on a large scale and it has helped tons and tons of companies speed up servers and databases throughout the past 2+ years.

And that will just about sum it up. Those aren’t all of the ways to speed up your site, of course, but it should start to peak your curiosity and get you looking for all the great things out there that will.

Article Source : www.webdesignerdepot.com

25+ New Examples of HTML5 and CSS3 Websites


h3 { font-size:15px; font-weight:bold;}

In the field of web designing newer tools are invented and introduced in the market very often. HTML is a language that is used to structure and present contents for the websites. This technology have seen many changes and goes through many improvements since its first introduction in 1990.

Now the latest version of HTML that is known as HTML5 is used to create amazing designs for websites. Both HTML5 and CSS3 are now become one of the most trusted and widely used trend of designing websites to the web designers and developers.

There are reasons why website designers and developers like to use these languages while preparing codes for a website. These languages are really very user friendly. You don’t need to be a highly qualified computer engineer to design websites with them. A basic knowledge of HTML coding can make the process an easier one for the novices as well.

Moreover, there are lots of websites templates that are created with the help of HTML5 and CSS3 to make them perfect for any kind of websites. These templates can be downloaded for absolutely free from the internet and use for creating a stunning website or else you can purchase the premium version of HTML5 and CSS3 website templates and develop an exclusive site.

HTML5 and CSS3 Websites Examples

Adobe – The Expressive Web

OrangeSprocket

Har Du Det I Deg

HTC

Beercamp 2012

Suit Up or Die Magazine

Casey Britt

Lois Jeans

Glamour.biz

Bobadilium

Societe Generale

Whiteboard

Ghost Horses

FiftyThree

lend your leg

Marcus Thomas

KRYSTALRAE

Capitol Couture

Air Jordan 2012

Bikes aus Düsseldorf

Nature Valley Trail View

Pulpfingers

Discover Bagigia

Superlovers

Soleil Noir 2012

Guns N Roses

Article Source : http://designmodo.com

A (not so) jilted English professor’s guide to creative web design


h2 {font-size:15px; font-weight:bold;}

a not so jilted English professor's guide to creative web designResponsive design has some definite buzz of late, and with good reason. It promises to simplify the increasingly complex task of adapting websites for the countless new devices multiplying by the minute.

By considering a few common variables like screen size, adapting a site to its visitors’ particular needs becomes a matter of some clever CSS planning and Javascript rather than the detailed design of numerous, parallel sites. For anyone whose faced the logistical minefield of multi-site coordination, responsive design is, to put it mildly, a very good thing.

As you may know, the concept itself is actually borrowed from architecture, another discipline that focuses on the relationship between people and created environments. The crossover makes sense.

According to Steven Johnson’s book Where Good Ideas Come From (2011), this kind of conceptual cross-fertilization has been responsible for numerous key breakthroughs throughout the history of thought and invention. This insight gave me an idea. Although I’ve been casually designing sites for almost as long as the internet has been around, until about six months ago most would have thought of me primarily as an English professor. A recent career shift to full time developer/designer, in combination with my background in literary studies, has given me a unique and perhaps weird perspective on the world of design.

Now I wish I could pause here to blast the cold-hearted bastards that swore I’d never set foot in a university again, because that would be so badass, but the fact is I actually left teaching on purpose and on good terms. I did it to explore the relationship between technology and culture, something that has fascinated me at least since I first sat down and played King’s Quest II in 1986. When I was asked to write this article, I got to thinking about the productive cross-fertilization between design and architecture. I wondered what — if any — concepts from literary studies might be usefully applied to web design.

After some musing, I’ve compiled a list of six possibilities. These represent only a first pass at the question, but I hope they can at least be suggestive and perhaps provocative. In literary geek terms, I’m doing a little ratiocination. On with the concepts…

1. Metaphor

This one’s almost too obvious, but last I checked metaphor is still largely the expertise of English professors. Brace yourself for one of those annoying zingers people always says about their profession: believe it or not, the web is all metaphor! Burn! (No, not really). Metaphor — a comparison using two items that appear to have no relation — is the chief (and some would say only) paradigm we use to process new technical media.

The idea of a link is a metaphor — it could have just as easily been called an IP transfer node, but that would take the average non-technical user much longer to understand. When Tim Berners-Lee was trying to conceptualize the Internet itself, he explored metaphors of mines and meshes. The Web, Windows, Tweets, Digg, Facebook, Canvas — these are all metaphors (and Reddit’s a pun).

Here’s really the main thing to take away from this one: being aware of one’s metaphors is a great route to successful design. The secret of numerous well-known websites is that they are fully aware of the metaphors they use: they pull ideas down to earth from the ether of code (interestingly, at least to me, the point of comparison in a metaphor is actually called the “ground”). Metaphors appeal to people’s visual and tactile senses, and this makes them much easier to remember, particularly because we live with increasingly visual and tactile technologies.

To make the word more palatable to the executive ear (tsk, tsk), you could introduce it as “visual coherence” or “tactile consistency.” They would eat it up like a dog’s breakfast (oops, simile).

2. Signature

When I used to teach first year composition classes, signature was the single most important concept I worked on communicating. It doesn’t just mean putting your John Hancock at the bottom of something. It refers to the unique trace of the person that peaks through the words and ideas. Closely related is the idea of voice: the vital, unique force that speaks through a particular project.

Best practices can take you a long way, but good design usually has a clear signature and a voice, and again, the best coders are the ones who are conscious of their unique style. While a cranky client may seem to relish nothing more than the thought of destroying your signature entirely, it peeks through in everything from color palate to font to layout to cross-browser solutions (and, yes, even your particular implementation of responsive design). It’s not quite the same thing as brand, because it is always implicit rather than explicit. To look for its traces think about how you’d redesign Google or Facebook.

If that’s all a little too abstract, you can always see how the buzzwords “design subtext” or “sub-theme” or “implicit scheme” or “subscaping” roll off your tongue.

3. Busting the Cycle

Okay, this one’s not strictly from an English classroom. I actually stole it from an episode of The Show with Ze Frank, but I often applied it to lessons on how to write A+ papers. The most brilliant papers are those that not only identify current ways of thinking but also take them a step further.

Although I’m still in love with the curvaceous joys of CSS3′s “border-radius” attribute, for instance, I noticed that Twitter’s new rollout actually did round corners in a scaled-back, toned down, 3px kind of way. Along these lines, very few designers have explored the possibilities for asymmetric curves in an effective way (somebody get on that!).

True creative talent resides in the ability to spot and explode a cliché — to swerve at the last moment away from the creative dead end. If you’re just copying what’s out there, then you’ve already fallen behind. The people who designed current hot sites are already working on their next phase.

There’s only one sure-fire method for spotting the clichés and busting the cycle: research. Before you groan and writhe in agony, just stop and realize that research in this case means surfing a lot of what you consider to be really fantastic websites. Steven Johnson notes that research is so effective because it leads to improved generation of what’s called the “adjacent possible” — the possibilities that lay just beyond the limits of current ways of looking at things.

I’ll term this one “predictive development” or “proactive design” or “tactical border-trashing”, just for kicks.

4. Nonce Taxonomy

What, you may be asking yourself at this point, does this guy have for all these random terms? Let me explain.

The term “nonce taxonomy” is borrowed from a woman who died way too soon, my literary-critical hero Eve Kosofsky Sedgwick. Nonce means “for the once”, and a taxonomy of course is a system of naming. So a “nonce taxonomy” is a system of concepts and terminology that’s tailor made for the project at hand, and disposed of or redeveloped as soon as it becomes cumbersome or meaningless.

Not only does this way of thinking about a project allow for a good supply of fresh ideas, it also allows you to tailor each project to the particular (and peculiar) demands of the client. A simple way of inventing a nonce taxonomy is to work for awhile and then whiteboard a list of terms, themes, ideas, recurring patterns, and code elements that seem most relevant to the project at hand. See if these lend themselves to any further patterns or terms, and regularly add and subtract from the list as you see fit. The idea here is to befriend the mobility and flexibility necessary to any creative project.

As a further note, XML and OOP languages are nonce taxonomic systems of sorts, though they’re obviously a little more rule-bound. In terms of more specific practices, nonce taxonomic design can be incorporated into everything from variable names to documentation, and certainly can be used to spice up client interactions (Jargon is sexy). You could say it provides a “soul” for the project, if you’re into that kind of thing. I’d come up with a feisty buzzword here, but I think this one’s a thing of beauty in itself. R.I.P Eve.

5. Contact Zone

This term was developed by a critic named Mary Louise Pratt in response to the idea of frontiers (as in Wild West frontiers). She claimed that frontiers are the wrong metaphor for the situation, because they only suggest that action occurs in one direction from one perspective. The fact is that even in situations of extreme power imbalances, such as that between cowboys and Indians, multiple perspectives and motives from both sides shape the outcome. By acknowledging the influence of these multiple desires, a more realistic assessment can be made of what leads to successes and failures in a given situation.

So what does this little revisionist history lesson have to do with web design? A web site is a contact zone in the sense that you have a designer and a user, and it is generally a very unbalanced interaction. Although Web 2.0 sites offer a bit of theme customization, and of course platforms for communication, they are a far cry from handing over the reins to the code and letting anybody do whatever they want. So why do some fail and other succeed?

The strength of a site like Reddit is that its creators keep its users in the loop of creation and modification. It is as unintrusive of a site as possible in terms of privacy and even layout, and thus the feel of its being a contact zone remains at the forefront. I mean, have you ever really looked at Reddit? There’s nothing there (but thousands of Redditors). The designers and users create a feedback loop that self-designs the site.

Although the term “contact zone” is pretty decent on its own, let’s throw out a few more fun design buzzwords: “permeable interface” or “generative feedback.”

6. The medium is the message

Famous techno-visionary Marshall McLuhan articulated the idea of “hot” and “cold” technologies. If a technology is “hot”, it gives you almost all the information you need, leaving little up to the imagination — think 80 inch large screen TVs or 3D movies. The colder a technology, the more it requires participation and involvement (Reddit is cold…so cold, babe).

When McLuhan said that the medium is the message, he meant that media transform the way we think and know the world. As we become so totally immersed in cold technologies on the web, they literally start to reshape our perceptions. What’s would the world be without Facebook? I don’t want to live in that world. Well, maybe. It’s heated up a little much for my tastes lately.

Before I retreat too far into the rantings of a fuddy-duddy technophobe here, let me get to why McLuhan’s observations matter. It gives us a new terminology for thinking about the impact of a website. For the most part, as the web has developed, it has turned increasingly from a hot technology to a cold technology, particularly with the surge of Web 2.0 design in recent years. Now you can customize much more of what you’re seeing, and interact with and produce content in ways that were unimaginable a short while ago. It’s not over yet. With smart phones in particular, the medium/message changes again, I think for the hotter because the interface becomes so seamless it’s hard to escape.

There will always be those who crave the opposite of the dominant “temperature”, and this is wise to keep in mind when trying to buck old trends with new web design. It’s also worth considering what the comfortable temperature range is for your clients and their clients — do they want a lot of interaction, or are they the kind who long for the good old days when people would just tell them what to buy? Are they the immersive Flash type? Crazy for the dynamic content offered by PHP and others? Or throwbacks to some good old-fashioned static HTML? As you approach design for a new medium, it may also be valuable to consider questions of how the medium itself transforms the user’s expectations and capabilities and how this affects the overarching purpose of the site.

If we need a design concept here, perhaps we could call it something like “media gauging” or “hot messaging” and “cold messaging.”

Parting Shot

All in all, the genius of responsive design is the way it imports a foreign but uncannily relevant concept into a completely new context. When you do this, old ideas spring to life in new ways. The cross-fertilization of ideas is what drives forums like TED, IFTF, and this very eZine. If you spend too much time cycling through the same buzzwords over and over, you stagnate and your work suffers — things must evolve or die. By offering these ideas up here, it’s not at all my intention to try and force unwanted suggestions on a field of already smart and motivated designers. The main aim is just to be a little provocative. If we expanded this type of cross-disciplinary exploration into Philosophy, History, Politics or Psychology — those oft-disdained liberal arts — just imagine the host of new concepts that would become available.

Article Source : http://www.webdesignerdepot.com