Tag-Archive for » Website «

How To Make The Right Keyword Analysis For Your Website (Part-2)

In my previous post “How To Make The Right Keyword Analysis For Your Website” I have shared my experience in choosing the best sweet keywords for the website. We have ended up with an xls table with the list of pages names and the keywords breakdown for these pages. As promised, today I’ll be speaking about On-page search engine optimization- that is how and where to use the keywords on your website page to get higher positions for the given keywords and key phrases in search engines results yet keeping the page organically readable for your website visitors.

Though I’ll be mentioning Google most of the times, the principles of the On-page SEO are same for all search engines.

First of all and before we get into details, let me emphasize that the valuable/interesting/unique information presented on your website is what matters most. You have to write your texts for website visitors and not for the search engines. The aim of SEO is not just to get on top of search results and get some additional traffic to your website, but rather convert this traffic into sales, new members, subscribers whatever. Even if Google or other search engines won’t penalize your for keyword stuffing and you get’ll somewhere close to top 10 results (just theoretically) and people will be clicking on your website name, if you don’t offer the qualitative content they will leave. So please be very careful when using the tips I’m going to give you today and do not spend your time on something that is not going to work. Remember that it’s people who are visiting your website while On-Page SEO is a technique meant to help people find your amazing products.

On Page Keyword Characteristics

There are several characteristics that can be applied to the keywords and key-phrases in the context of on-page SEO:

  • Prominence
  • Density
  • Frequency
  • Proximity

Prominence

Prominence is how close your keyword/key phrase is to the beginning of the analyzed area on page. Speaking about introductory text on your home page, 100% prominence is when you use your keyword in the first sentence of your first abstract and start your sentence with this keyword.

Density

Keyword density is a number of keywords to the rest of content on page, usually measured in %. For example, if you have a text area of 150 words, and use the keyword “development” 5 times on a page, the density will be calculated as 5/150X100% and that is 3,33%. If the keyword consists of a single word, obviously its density within some context will be lower than if it consisted of two words or a phrase.

Frequency

Frequency is simply the number of times you use the keyword in the analyzed area of a page.

Proximity

Proximity is how close the keywords that make up your key phrase are to each other. For example if your key-phrase is “website design” but you don’t want to repeat it (and don’t have to!) twice in that same short sentence, you may finish the sentence with “website” and start the new one with “design” or something like cool “design”. The closer they keywords in your key phrase are to each other the better.

SEO important page elements

Page Name

Let’s start from the very top of the page. When you create the page you give it the name something like services.html (or php/asp whatever). This is the first place to use your keywords. If you’re a design studio offering logo design and corporate identity design, use the according keywords to name your website pages- something like logo-design.html. Do not use blank spaces (logo design.html) or underlines (logo_design.html) in the name of the pages, always use hyphens to separate the words and Google will recognize it as 2 separate words and yeah, you’re telling Google that this page on your website is about logo design.

Page Title

Website Title is the part of the page coding located in the

<head>

section of your HTML file and looking like:

<title>My title goes here</title>

. The title of the page is the second characteristics Google will see when indexing your page after its name. This is also the Title that will be shown in Search engine results and that people will consider as the general title covering in short what’s the page and website is about.

Before optimizing your title with the keywords don’t forget that we focus on people not on search engines, and if they don’t like your title, find it overstuffed with keywords or just think it’s not relevant to what actually they have been looking for your optimization efforts will be absolutely useless.

As a rule website title consists of about 5 to 12 words, and character length up to 75 symbols. Do not compose huge sentences for your title as the title might get cut and will look weird. If you own an established brand – be sure to include the name in the titles. If you target some certain geographical region be sure to mention it as well.

Meta Description

Meta description

<meta name="description" content="description goes here"/>

is also the part of the page code located in the head area and not visible to website visitors when they open the page, it’s solely used by the search engines. Meta description is a brief summary of the information you provide on page and thus it should be sharp, descriptive and contain your targeted keywords. In some cases meta description may show up on the search results pages below the Title of your page- the so-called “snippet” so do not forget that people making the search are likely to see this description and judge on your company and services based upon it. It will also influence their decision to click on the link to your website or not.

Nice meta description usually contains about 25-30 words. The best keywords should be placed closer to the beginning (100% prominence). It’s better to start with the most sweet keywords, while organically including just nice ones in the rest of the summary.

Website Content

HTML headings h1 h6

HTML heading tag indicates to the search engines that this is the main title of your page, secondary title of your page and less important subtitles. It’s a good practice to include keywords into the headings with the 100% prominence as this is the other time that we tell the search engines that this is what our page is about. It’s important not to repeat the same level tag more than one time.

Text on page

After all the preludes we have finally come to the most sweet part – the text content of the page. That is where you your imagination and creativity have no boundaries. You can write as much text as you’d like to (of course, this should be a unique text) but there should be at least 100 words. Keywords prominence should be 100% – that is your best keywords should be used in the first abstract (as Google indexes the content from left to write, from bottom to top- exactly the same way that we read), just a bit in the middle and mentioned a few times closer to the end. Do not forget about proximity, it’ll help you to use your keywords close to each other yet escaping the keywords stuffing. The keyword density should be around 3-7%, if it’s higher than this you can just add some more text.

Search engines may also use a few lines of text from your page and show them as snippet on the result pages instead of the meta description.

Once you’re done with the text, show it to your friends. You have to make sure that it’s easily and nicely readable by human beings.

To emphasize your keywords, use the bold tag, but don’t over use it as the content presentation can become pretty irritating.

If you have so graphics/or photos on page be sure the include the and tags for your images. Adding a keyword there would be nice as well, as the text will show up in case images are disabled, while texts from both and tags are used by Google for their images search. We shouldn’t lose any opportunity so lets invest some efforts into this.And finally, when linking to a page use the keyword as the anchor text for the link, this will also tell Google the page is relevant to this query.

That’s it! Good luck with the on-page SEO and I hope that it’ll be of some great help to you guys!

20+ Online Tools for Website Validation and Testing

As you probably know already, it’s important to check and test your Website to help ensure that it looks great and works beautifully regardless of the browser or platform used. Testing a website before launch is one thing that you cannot afford to take lightly. Just like a minor negligence while constructing a building can cost life of millions of residents , the same way a small error left unnoticed can prove to be fatal for your website.

Therefore, this implies that we must run our website through all necessary tests. This includes CSS Errors, HTML Errors, Cross browsing Errors, WAP Errors (if your site is WAP enabled) and various other tests.Below is the list of Online Tools for Website Validation and Testing. So make it sure that you go through this post and run all the necessary tests on your website before making it live.

Validation tools

1.W3C markup validation service

This validator checks the markup validity of Web documents in HTML, XHTML, SMIL, MathML, etc. This is an exclusive standards check for the document, so other checks are not available.

Checks done on:

  1. Syntax and style analysis Yes
  2. Source code – Yes

2.CSS validator

Check Cascading Style Sheets (CSS) and (X)HTML documents with style sheets.The important thing is if you want to validate your CSS style sheet embedded in an (X)HTML document, you should first check that the (X)HTML you use is valid.

3.Checklink

Check links and anchors in Web pages or full Web sites.This Link Checker looks for issues in links, anchors and referenced objects in a Web page, CSS style sheet, or recursively on a whole Web site. For best results, it is recommended to first ensure that the documents checked use Valid (X)HTML Markup and CSS.

4.Feed

This is the W3C Feed Validation Service, a free service that checks the syntax of Atom or RSS feeds.You can validate by URL or Validate by direct input.

5.Mobile checker

This checker performs various tests on a Web Page to determine its level of mobile-friendliness. The tests are defined in the mobileOK Basic Tests 1.0 specification. A Web Page is mobileOK when it passes all the tests. And find Is your Web site mobile-friendly?

6.Unicorn

Checks your site for all the general standards and see if there are rooms to improvement. It checks for the XHTML and CSS compatibility.

7.HTML Validator

The WDG HTML Validator is similar in many ways to the W3C HTML Validation Service. Most of the previous differences between the two validators have disappeared with recent development of the W3C validator. The errors reported are the same in virtually all cases.

8.Dr. Watsons site validation check

Dr. Watson is a free service to analyze your web page on the Internet. Just give the URL of your page and Watson will get a copy of it directly from the web server. Watson can also check out many other aspects of your site, including link validity, download speed, search engine compatibility, and link popularity. It rolls many features into one, so if you are looking for a single stop for checks, this one is the place to be.

List of checks :

  1. Page load time check Yes
  2. Syntax and style analysis Yes
  3. Word counts Yes
  4. Spelling checks Yes
  5. Link checking – Yes
  6. Search Engine Optimization check Yes
  7. Incoming links check Yes
  8. Source code – Yes

9.XML well checker and validator

Use this form to check an XML document for well-formetness and (optionally) validity. External entity references are included, even when not validating.It checks for spaces and syntax errors, while pointing to the line number at which the error was spotted.

10.Robots checker

This tool checks if your Robots.txt file is valid. Thought it may show some exclusions youve done as errors, they are good pointers to check if the commands will be misinterpreted or not. Good one and it is simple,powerful and accurate one.

11.URL checker

While it’s important to know if your website is running and your host is providing a good service, its even more important to be proactive about getting it back online fast so you dont lose search engine position, miss out on possible revenue or blow.InternetSupervision is a service that monitors the availability of HTML, FTP, SMTP, POP3 email servers), supervises the performance of website and e-commerce transactions (including website forms) and provides website content supervision (cyber-attack monitoring).

11.Web page reports

There are various online services offering automated web page checks. pinkjuice.com/check is just a simple tool generating links to the report pages of some of those services, including emulators, validators, and accessibility checkers.And it’s handy to have a list of all the results pages, for example when sending a status report to a client about a website that’s being worked on.

Accessibility and evaluation tools

12.Webaccessibility checker

This tool checks single HTML pages for conformance with accessibility standards to ensure the content can be accessed by everyone. See the Handbook link to the upper right for more about the Web Accessibility Checker.

13.Color contrast

AccessColor tests the color contrast and color brightness between the foreground and background of all elements in the DOM to make sure that the contrast is high enough for people with visual impairments. AccessColor will find the relevant color combination within your HTML and CSS documents rather than requiring you to find each value to input yourself in order to test the contrast between each color combination.

14.Web accessibily evaluation tool-WAVE

WAVE is a free web accessibility evaluation tool provided by WebAIM. It is used to aid humans in the web accessibility evaluation process. Rather than providing a complex technical report, WAVE shows the original web page with embedded icons and indicators that reveal the accessibility of that page.

15.FAE – Functional Accessibility Evaluator

Use this tool to evaluate the functional accessibility of a single web page. It evaluate multiple pages via web crawling,Generate a Sitewide Report that identifies problem pages,Save reports in an account-specific Archived Reports list.

16.Accessibility with style

HERA is a tool to check the accessibility of Web pages according to the specification Web Content Accessibility Guidelines. HERA performs a preliminary set of tests on the page and identifies any automatically detectable errors or checkpoints met, and which checkpoints need further manual verification.

17.Section 508

The Section 508 checking tool automatically compares your HTML code against Section 508 checklist and shows your results quickly. Results are simple to understand too.

18.Adobe PDF conversion

This conversion service will convert to text Adobe PDF files that are in English.By submitting content through these tools, you understand and agree that Adobe may occasionally access the content you submit for purposes of quality control and administration of the conversion service.

Website performance checkers

19.Pingdom tools

The Full Page Test loads a complete HTML page including all objects (images, CSS, JavaScripts, RSS, Flash and frames/iframes). It mimics the way a page is loaded in a web browser.The load time of all objects is shown visually with time bars.

20.Webpage analyzer

Free web site speed test to improve website performance.The script calculates the size of individual elements and sums up each type of web page component. Based on these page characteristics the script then offers advice on how to improve page load time

Cross Browser Testing

21.Browser shots

Browsershots makes screen shots of your web design in different operating systems and browsers. It is a free open-source online web application providing developers a convenient way to test their website’s browser compatibility in one place. When you submit your web address, it will be added to the job queue. A number of distributed computers will open your website in their browser. Then they will make screenshots and upload them to our central dedicated servers for your review.

22.IE net renderer

IE NetRenderer allows you to check how a website is rendered by Internet Explorer 7, 6 or 5.5, as seen from a high-speed data center located in Germany.

23.Viewlike

viewlike allows you to check out how your website looks in the most popular resolution formats. It’s all powered by Ajax & PHP so no need to download anything! To Get started just type your URL in the box above. Free to use!

Which tools do you use for your website? Feel free to share them with us via comments.

Get Inspired: 35+ Warm VS Cool Color Website Designs

A website resembles the identity of a company, a certain community, or even a person. Thousands of websites live out there on the internet these days, and their number increase every single second. Many of us realize how important a website can be, therefore the design for every website has to be unique, and more importantly has to have the right feel to it.

As a designer, we know how to play around with illustrations, typeface, and colors. I’m not going to get in too deep with illustrations or typeface, in this post but color. Some people classify websites from dark to bright website designs. Others classify them into minimalist and content heavy designs. But now let’s see website designs in the new perspective, in warm and cool colors.

Warm Color Website Designs

Hues from red through yellow, browns and tans are categorized as warm color. Other than keeping the same color of an identity on the website scheme, this warm color gives a few associations like energy, cheerful, fun, fresh, active, playful and happiness. This color scheme fits very well on sport related website, a website with kids or the youth as their audience, alcohol drinks website, or other website which wantsto welcome their readers with warm feelings.

1. Some Web by Fedrick

2. Zuzanka Kindergarten by Neilan

3. Yabazz Website by Ee Venn Soh

4.Airport Taxi

5. Termobravo by Pawel Linard

6. Canvas Card Website by Ryan Barlin

7. A RemStroy by IndieStudio

8. Balparmak by Gdnz

9. Fantaby Diogo Parrinha

10. Canderel by Cenk Yilmaz

11. Telecine by Letcia Motta

12. Johnnie Wallker Red Label by Sasha Nilov

13. Imago by JK89

14. Fat Duo Brasil by Baia Studio

15. Bubbaloo Tuboo Connect by Carolina Janovik

16. Kizlar Cognac

17. Vigonne Producoes – Site (2008) by Diogo Montes

Cool Color Website Designs

The cool color are hues from blue green through blue violet, and most grays. The feel of which you will achieve by using this color are relaxing, calm, and focus. Though in certain cases like blue and green could also give you the fresh feel as it is associated with water, sky, and the green grass. In most cases, companies often use this color scheme and applied it on their website design, others applied it to create calm atmosphere for their visitor.

18. WordPress – IcePress Theme by Detrans

19. Sense-design ver 1 by Webdesigner1921

20. Eye for Art by ECP-Pro

21. Personal Portfolio 2.0 by Jonaska

22. Yakovae by Osec

23. EPSON: Exceed Your Vision by Warbiee

24. Ave by MehrD64

25. 2NdFriend

26. Skype

27. Pocari Sweat by Foxstep

28. Twitter Alerts

29. Sanimix by Marcel Pirosca

30. C&C by Igor Barazzetti

31. Carlsberg

32.Our Green Trail by Chad Portas

33. Citrus Marketing Website by Elshafto

34. Tree Nursery by OakmE

35. Intrace Portfolio by MrZielko

36. Beauty Sallon

37. Wonderland Photography by Zee7

Let us know which one get your attention and what feel does it give you when you’re looking at it. And if you have other warm or cool color website designs which you would like to share with us, tell us in the comment section.

How To Make The Right Keyword Analysis For Your Website

Everyone looking to build a website might have heard about SEO- the mysterious Search Engine Optimization. This is a never-ending process that consists of multiple steps and there are always enhancements that can be done to improve website visibility in the search engines.

If you have ever heard about the SEO you might have also heard that one of the basics of successful SEO is the Keyword analysis and that’s exactly what I’m going to speak about today.

Let’s start from the very beginning. The keywords are the words that web surfers use in the search engines to look for the product/service/information needed. This is the “WordPress beginners guide” that you type when you’re looking for the info how and where to start with WordPress and “website design studio” when you’re looking for a company to create a website for you.

1. Define the keywords that people use to find your business.

This step is most important and probably the easiest one and you can complete it in 3 simple steps without any additional software or paid programs offered on the market.

  • 1. Ask your friends and relatives what words and phrases they associate with your business and put them on list.
  • 2. Go to Google and type the keywords and key phrases into the browser and Google will also show you the related searches performed by other people.To make things even easier, you can switch from the Standard view to Related searches view. Just type your keyword to the Google search bar and on the left of the search results page click on the panel “Show search tools” and scroll to the bottom until you see it, and here’s how it looks.

  • 3. Use Google Wonder Wheel- that’s an adorable tool that I love so much. The wonder Wheel is another variation of the Related searches but in a more convenient way and is located right below Related searches view in the left panel. The wonder wheel shows you all related searches and their popularity. You can also click on the related search circle and go even deeper into the search keywords. Put as many related keywords on the list as you can but make sure they are really related to your business, service or product.

2. Find out how many people are actually using the keywords you have selected.

The cool tool you can use here is Google Keywords Suggestion tool. It’s a part of Google Adwords (and is used to find nice keywords for your google ands) but you can use it separately to identify the popularity of the chosen keywords and key phrases. Take a minute to register with Google Adwords and you are ready to use the tool.

Type in your key phrase and Google Keywords Tool will show you the list of related searches (compare it with your list and see if you’re missing something) and the number of Monthly searches for according keyword.

At this stage you can make an excel table with your keywords in the first column and the number of monthly searches in the second one. Now sort your keywords putting the most popular ones on top and less popular ones closer to the bottom.

Delete the keywords that have less that 1000 searches a month except if you offer something really unique and that’s the top number of search engines visitors looking for it.

3. Define your competition and make sure the keywords you have chosen are relevant.

Make yourself a cup off coffee or tee as we’re starting on a pretty boring thing. Now that you have all the possible keywords in your list, we have to find out their relevance and competition.

Let me explain you what I mean for the term “relevance”. Let’s say you produce a software allowing photographers to create cool photography websites easily. One of the great keywords that you might think of is a “photo website” however it is not. If you go to Google and type “photo website” into the search field you will see that the search returned you a list of websites offering stock photography and thus this is not the keyword you should base your website optimization strategy on.

Now back to the competition. This is not really the number of companies offering the same services that you do but rather the number of indexed pages in Google containing your keyword and which you actually have to beat. So type your keyword into the Google search bar, make sure it’s relevant and put the number of indexed pages for the according keyword into your table next to the number of monthly searches.

4. Finding the best keywords

By now you should have a list from about 50 keywords and keywords phrases in the descending order with the appropriate number of monthly searches and competition. If you have a website with the number of pages over 20 you can use all of them, but it you have a simple 5-10 pages website you’ll have to choose the best of the keywords.

The keyword “bestestness” is defined by the ration between relevance, popularity and competition. The keyword which is most close to your business, has the largest number of searches and the smallest competition is the best.

There are lots of coefficients offered by different experts, but if you are not making the keywords analysis every other day you are most likely to forget how to calculate it. So, to keep things simple, you can divide the number of monthly searches to the number of pages indexed for this keyword and multiply by 1000 for example. You’ll get figures like 0,1-0,3, less than 0,1 and much less than 0,01. Small figures mean that there is either a small number of searches for the given keywords of the competition is really high.

You can exclude these keywords, however do check each one individually. If you have the best product in some area, you can easily overcome all the competition and show up in the search engine results for the given keyword.

At the end and having made the ratio analysis you should have around 10 very cool keywords, 10 just cool keywords and around 5-10 nice keywords that also might be useful.

5. Breaking keywords into pages.

Now we’re going to the most complex point. You can’t use all your keywords on just one page. Every page has to be optimized for no more than 2-3 keywords/keyword phrases and of course, they should be 100% relevant to the content of the page.

Choose the best 3 keywords for the home page and spread the rest on the other pages. Now add a few nice keywords for every page. Choose one or two keywords that you can use throughout the pages in the text organically.

Put it all in a spreadsheet. Now you have the list of keywords to use on every page of your website to ensure best visibility for the given keywords in the search engine results. Sorry for the blurred screen but I have to keep my own keyword research results private.

The next step is actually creating the keyword optimized content for the website pages. This is the separate science and I’m going to speak about it in my next post. Stay tuned, make the keywords analysis and check back with us soon!

Add Motion To Website: jQuery Animation Plugins From 2010

In our niche it’s very important to be up to date with latest technologies and features available to impress new clients, show of in portfolio and add functionality more easily – using some advanced code snippets, plugins or hacks.

jQuery possibilities are growing rapidly and there are many people who play with code and discover some amazingcombinationsachieving effects you have never seen before!

You will find here many plugins which will help to add motion, 3d effects and animation to your website! This list will blow your mind away with possibilities – ready?!!!

1. AJAX-ZOOM – Image Zoom – Pan Gallery plugin

AJAX-ZOOM is a sophisticated image zoom & pan gallery plugin based on jQuery and PHP. With over 250 options it is very flexible and can be integrated into any website.

Download Now | View Examples

2. Image Rotator

Simply rotates an image by a certain degree or allows the user to rotate an image by dragging around a central axis.

Download Now | View Example

3. Cloud Zoom

The Cloud Zoom plugin is comparable to commercial image zoom products such as Magic Zoom. Compared to the popular jQZoom plugin, Cloud Zoom is smaller, has more features and more robust compatability across browsers.

Download Now | View Example

4. jQuery Before/After Plugin

Download Now | View Example

5. jQDock

Transform a set of images into a Mac-like Dock menu, horizontal or vertical, with icons that expand on rollover, and optional labels.

Download Now | View Example

6. Visual Lightbox – Create fantastic lightbox-style galleries and slideshows. jQuery LightBox Plugin.

Download Now | View Examples

7. Image Bubbles

Image Bubbles is a cool Flash-like effect that causes an image to bubble up and expand whenever the mouse rolls over it from within a series of images.

Download Now | View Example

8. jQuery Panel Magic

jQuery Panel Magic is a new take on website navigation. Using a matrix or grid style layout for your website, you can easily implement this plugin for small websites and web applications. It gives you more room for your design and provides a cool new approach to a sitemap.

Download Now | View Example

9. iCheckbox

Convert a checkbox or multiple checkboxes into iphone style switches.

Download Now | View Example

10. jqFancyTransitions

jqFancyTransitions is plugin for displaying your photos as slideshow with fancy transition effects.

Download Now | View Example

11. Images In All Size jQuery Plugin

Download Now | View Example

12. Text Effects

Download Now | View Examples

13. jCoverflip

jCoverflip is a jQuery cover flow widget that allows website administrators to present featured website content in a visually appealing manner. The widget is quick setup and is highly configurable, and can run as a Drupal Module or standalone.

Download Now | View Example

14. BxSlider

bxSlider is a jQuery content slider plugin that is light weight and easy to use.

Download Now | View Example

15. jScratchcard plugin

Download Now | View Example

16. jQuery Menu Style 1 – Drop Down Menu with Visual Effects

View Examples

17. Frame Animation Plugin for jQuery

Download Now | View Example

18. Cusor Hover Buttons

This plugin lets you create a two-layer button with one layer that follows the mouse. This method allows you to create some very professional effects on your site.

Download Now | View Example

19. jQuery carrousel

The core allows to create your own controls or effects. This plugin transform an “ul li” into an animated carrousel.

Download Now | View Example

20. 2D Transform

This plug-in utilizes the matrix filter in IE and the new CSS3 transform properties to 2d transform any DOMElement.

Download Now | View Example

21. jPhotoGrid

This plugin displays a list of image thumbnails in a grid and allows them to be zoomed open. It’s a cool and simple effect.

Download Now | View Example

22. jMagnify

jQuery jMagnify, plugin attach a ola effect to some text following the mouse position.

Download Now | View Examples

23. animaDrag: Animating Drag and Drop Plugin

Download Now | View Example

24. jOla

Download Now | View Example

25. Flight Board

This plugin sets a division to flip between text messages like a flight board at an airport. It alternates between two or more messages by flipping individual characters.

Download Now | View Example

26. 3D Cloud Carousel

This is a fast and cross-browser implementation of a 3d carousel – looks very nice, more like a Flash implementation. It can create dynamic reflections underneath the carousel items, is accessible and degrades nicely without JavaScript.

Download Now | View Example

27. 3D Feature Image Carousel

This plugin rotates images in a three dimensional (simulated) carousel. Optionally, all images can have a description element attached to them that pops up on an overlay whenever that image rotates to the center.

Download Now | View Example

28. Smooth Anchors jQuery Plugin

This plugin creates a simple animation for anchor links by quickly scrolling the page to the area where the anchor is at rather than just jumping right to the anchor like normal.

Download Now | View Example

29. HoverAttribute

HoverAttribute is a jQuery plugin that allows you to make (link-)elements more dynamic by making an attribute of that element show up on hovering.

Download Now | View Example

30. Expanding Grid

Creates grid system out of divs. On hover the active grid expands to ratio set by the config, fades out the background.

Download Now | View Example