March 23, 2011

SEO Friendly Content

SEO Friendly Writing Does Not Mean Writing for Search Engines

The first and foremost thought in your mind when working on content for your Web pages is that you're writing for people not for search engines. If you have to choose between a technique that is good for your readers but not so good for search engines or vice versa, choose that which is good for your readers. Search engines ultimately want to provide content that is interesting and informative for their customers too, and a page that is too optimized is no fun to read.

Luckily, most of the techniques that make good Web writing make for decent SEO as well.

  • Write relevant content. Search engines have ways of recognizing when a page is not really about what it might seem to be about. If you're playing games with your content to try and fool search engines, it will eventually be found and you'll lose rank or even be banned. It's much better to write content that is relevant to your topic.
  • Put conclusions at the beginning. Another way to think of this is that you want your keywords to be denser towards the top of your article. If your page is about snow leopards, then the first mention of snow leopards should be in the title and first sentence. Don't start using synonyms for your keyword phrase until the second or third paragraph.
  • Use lists instead of paragraphs. Lists are easier to get your seo content into without your repetition seeming strange.
  • Make your links part of the copy. This is especially important if your links include your keyword phrases. If you've linked to the Snow Leopart Trust on your snow leopard page, make sure that you link the words "Snow Leopard Trust" and not something unrelated like "click here".
  • Include internal sub-headings and they should include your keyword phrase. Use heading tags for your sub-heads, and repeat your keyword phrase.
  • Proofread your pages. It doesn't do any good to focus on the keywords "snow leopard" if you spell it "snow leopart" once or twice on the page. Plus, the spelling and grammar errors make your content look unprofessional, so people are less likely to link to your page.

Other Considerations for SEO Friendly Content

Repetition is very important for SEO friendly content. Once you've chosen your keyword phrase, you want to repeat it several times throughout the page. For instance: 2 times in the first paragraph, in every sub-heading, once in the main heading, twice in the meta title, 2-4 times more throughout the document, and at 2-3 times in links and image alt text on the page.

Don't forget to use bold, heading tags, and other emphasis HTML tags to highlight your keyword phrases. But don't overdo it. If someone can tell exactly what your keyword phrase is without doing more than opening the Web page, you've probably included it too often or made it too emphasized. Remember, you're ultimately writing for people, not a search engine.

Don't forget less obvious locations for including your keyword phrase - like image alt text and title text on images and links. These are not hidden from your readers - anyone can see them who wants to. They are just not obvious at first glance, so they are less annoying to your readers but search engines still see them.

SEO Friendly Should Not be Bad Writing

As I said above, you should never sacrifice good writing for SEO. Most of the best ranked articles on nearly any topic you can name (Wikipedia notwithstanding) are written for customers first and SEO is at best a second or third thought.

March 22, 2011

WordPress CSS troubleshooting

With the introduction of the new Themes in WordPress v1.5, boring and commonplace website layouts have become a thing of the past. With a few clicks, you can change your layout instantly. With a few more clicks and tweaks, you can screw up your layout instantly as well. Welcome to the exciting world of web page design.

When you encounter a screw-up in your layout, many people come running to the WordPress Forums. While the willing volunteers can do what they can to help you, there are some steps you can take to get to the solution, or at least a better idea of where the problem may lie, before you get to the Forums.

Know Before You Go
We have a list of things you need to know before you go to the forums with layout design problems, and tips on solving the problems yourself.

Examine Your HTML and CSS
Take a close comparative look at your HTML and CSS and make sure that all the references match.

Isolate Your CSS Challenges
Below we'll show you a couple of techniques to help identify the areas that are causing your problems in an effort to narrow down the problem to a specific area and code.

Common CSS Errors
You are not the first to have this problem. We have a list of some of the most common CSS errors to help you fix the little details that can mess up your layout.

Pest Control - Watching Out For Browser Bugs
we will help you identify some of your CSS challenges, a lot of them come from bugs and conflicts between browsers, so we'll give you some tips on how to work around the various browser bugs.

It is the goal of this article to help you solve your layout design problems within the CSS file, not within the HTML or PHP files. For help on modifying those, check out Using Themes for more information.

Web, Graphic Designing SEO in Indore: Choosing Website colors

Web, Graphic Designing SEO in Indore: Choosing Website colors

CSS clearfix property

The problem happens when a floated element is within a container box, that element does not automatically force the container’s height adjust to the floated element. When an element is floated, its parent no longer contains it because the float is removed from the flow. You can use 2 methods to fix it:

Use it
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}

.clearfix {
display: inline-block;
}

html[xmlns] .clearfix {
display: block;
}

* html .clearfix {
height: 1%;
}

December 22, 2010

CSS 3.0 Features & Generator

While the the W3C seem to be taking forever to implement new web standards and seem happy sitting on their butts forever without moving forward. Here are a bunch of CSS 3.0 proposals that Web Designers would go nuts over if ever they are implemented. I give them time till 2999 to implement them, at the rate things are going in the W3C. I saw the original post here on anieto2k blog but since I don’t understand what language it is written in, I decided to translate it. By the way Opera 9.5 has full support for CSS 3.0

Multi Columns

Currently when you create a multi columned layout i.e 2 column or 3 column layout you need to specify individual and separate DIV HTML elements to achieve the desired effect. But in CSS 3.0 you can achieve this with a single CSS declaration like this



DIV {width: 400px;column-count: 4;

column-width: 100px;

column-gap: 10px;column-rule: none;

}

This is actually possible in FireFox but it is not Standard CSS 3.0 you’ll need to use FireFox Specify code in your CSS to achieve the effect. Example is given below.

-moz-column-count: 3;

-moz-column-gap: 1em;

-webkit-column-count: 3;

-webkit-column-gap: 1em;

Multi-Background

Currently it is not possible to put multiple background Images to the same HTML element but in CSS 3.0 you can easily do this.



background: url('http://www.clazh.com/images/body-top.gif')

top left no-repeat,

url('http://www.clazh.com/images/banner_fresco.jpg')

top 11px no-repeat,

url('http://www.clazh.com/images/body-bottom.gif')

bottom left no-repeat,

url('http://www.clazh.com/images/body-middle.gif')

left repeat-y;

Zebra Tables

You can easily do zebra table without the need for JavaScript or putting CSS Classes on individual Table Rows to give alternate colours.

tr:nth-child(2n+1) /* represents every odd row of a HTML table */;

tr:nth-child(odd) /* same */

tr:nth-child(2n) /* represents every even row of a HTML table */

tr:nth-child(even) /* same *//* Alternate paragraph colours in CSS */

p:nth-child(4n+1) { color: navy; }

p:nth-child(4n+2) { color: green; }

p:nth-child(4n+3) { color: maroon; }

p:nth-child(4n+4) { color: purple; }

Rounded Corners

How about the ability to render the ever popular and so called Web 2.0 rounded Corners for a box(html Element) with just a single line of CSS.

-webkit-border-radius: 5px;

-moz-border-radius: 5px;

-khtml-border-radius: 5px;

border-radius: 5px;

Opacity

Currently almost all browsers support their own version and syntax for opacity. Here is the CSS 3.0 Standard code for opacity

/* IE 8 */

-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";

/* IE 5-7 */

filter: alpha(opacity=50);

/* Netscape */

-moz-opacity: 0.5;

/* Safari 1.x */

-khtml-opacity: 0.5;

/* Good browsers */

opacity: 0.5;

Resize

Ability to resize a HTML Element automatically

div.resize {width: 100px;

height: 100px;

border: 1px solid;

resize: both;

overflow: auto;

}

Text Effects

Text effects like drop shadow and Text Overflow.

color: #fff;background-color: #fff;

text-shadow: 2px 2px 2px #000;

text-overflow: ellipsis-word;

For more visit: www.cssgenerator.com


Enjoy :)

June 8, 2010

Changing UI Element Of iPhone

Most of you know that i pretty much don’t like iPhone themes, and that is because
1. Most of them are butt-ugly.
2. The ones i like, takes too much RAM and I prefer having my iPhone theme free. I got to admit though, that lately I’m flirting with a slightly modified version of GT theme found in Cydia store.

Well it seems I’m not the only “theme hater” out there, but sometimes there is the desire to customize the look and feel of your iPhone. That’s one of the benefits that comes once you jailbreak your iDevice , right? You still can customize every single UI element of your iDevice, without having to install any theme. If you have some badass graphics , all you need to do is to SSH into your iDevice, and replace the original files.
NOTE: backup everything
NOTE: be aware that some graphics may not be changed back to the original state. If that is the case, your only option is to restore your iDevice..
LockScreen
• Unlock Text – /System/Library/Frameworks/TelephonyUI.framework/bottombarlocktextmask.png
• Slider Bar – System/Library/Frameworks/TelephonyUI.framework/bottombarknobgray.png
Battery Charging Screen
• Battery Background – /System/Library/CoreServices/SpringBoard.app/BatteryBG_1.png-BatteryBG_17.png
SpringBoard
• Calculator Icon – /Applications/Calculator.app/icon.png
• Maps Icon – /Applications/Maps.app/icon.png
• Calendar Icon – /Applications/MobileCal.app/icon.png
• Mail Icon – /Applications/MobileMail.app/icon.png
• iPod Icon – /Applications/MobileMusicPlayer.app/icon.png
• Notes Icon – /Applications/MobileNotes.app/icon.png
• Phone Icon – /Applications/MobilePhone.app/icon.png
• SMS Icon – /Applications/MobileSMS.app/icon.png
• Safari Icon – /Applications/MobileSafari.app/icon.png
• Camera Icon – /Applications/MobileSlideShow.app/icon-Camera.png
• Photos Icon – /Applications/MobileSlideShow.app/icon-Photos.png
• Clock Icon – /Applications/MobileTimer.app/icon.png
• Settings Icon – /Applications/Preferences.app/icon.png
• Stocks Icon – /Applications/Stocks.app/icon.png
• Weather Icon – /Applications/Weather.app/icon.png
• YouTube Icon – /Applications/YouTube.app/icon.png
• Dock – /System/Library/CoreServices/SpringBoard.app/SBDockBG2.png
General
• Ringer background when you use volume keys – /System/Library/CoreServices/SpringBoard.app/hud.png
• Badge (alert bubble for calls, sms, etc.) – /System/Library/CoreServices/SpringBoard.app/SBBadgeBG.png
• Top info bar – /System/Library/CoreServices/SpringBoard.app/FST_BG.png
Carrier Logo ( more details here )
• Lighter one – /System/Library/CoreServices/SpringBoard.app/FSO_CARRIER_ATT.png
• Darker one – /System/Library/CoreServices/SpringBoard.app/Default_CARRIER_ATT.png
Signal Strength
• /System/Library/CoreServices/SpringBoard.app/FSO_0_Bars.png-FSO_5_Bars.png
• /System/Library/CoreServices/SpringBoard.app/Default_0_Bars.png-Default_5_Bars.png
WiFi Bars
• /System/Library/CoreServices/SpringBoard.app/FSO_0_AirPort.png
• /System/Library/CoreServices/SpringBoard.app/FSO_1_AirPort.png
• /System/Library/CoreServices/SpringBoard.app/FSO_2_AirPort.png
• /System/Library/CoreServices/SpringBoard.app/FSO_3_AirPort.png
• /System/Library/CoreServices/SpringBoard.app/Default_0_AirPort.png
• /System/Library/CoreServices/SpringBoard.app/Default_1_AirPort.png
• /System/Library/CoreServices/SpringBoard.app/Default_2_AirPort.png
• /System/Library/CoreServices/SpringBoard.app/Default_3_AirPort.png
Power on Screen
• Logo – /System/Library/CoreServices/SpringBoard.app/applelogo.png
Power Off Screen
• Power off slider – System/Library/Frameworks/TelephonyUI.framework/bottombarknobred.png
Calculator
• Background – /Applications/Calculator.app/CalculatorBackground.png
• Screen Background – /Applications/Calculator.app/LCDBackground.png
iPod
• Rating Stars – /Applications/MobileMusicPlayer.app/star_filled.png
Phone
• Keypad – /Applications/MobilePhone.app/BarDialer_Sel.png
SMS
• Input Field (Bubble where you type you’re text message) – /Applications/MobileSMS.app/BalloonInputField.png
• Balloon 1 (Bubble where sent text messages are) – /Applications/MobileSMS.app/Balloon_1.png
• Balloon 2 (Bubble where received text messages are) – /Applications/MobileSMS.app/Balloon_2.png
• Bottom Bar Background (Background behing the text input field) – /Applications/MobileSMS.app/MessageEntryBG.png
Safari
• URL Bar (Idle) – /Applications/MobileSafari.app/Url.png
• URL Bar (Inactive) – /Applications/MobileSafari.app/UrlInactive.png
• URL Bar (Active) – /Applications/MobileSafari.app/UrlProgress.png
Mail
• Trashcan – /System/Library/PreferenceBundles/MobileMailSettings/trashmbox.png
Other
• Bluetooth – /System/Library/CoreServices/SpringBoard.app/FSO_Bluetooth.png
• Background bar color HomeScreen – /System/Library/CoreServices/SpringBoard.app/FSO_BG.png
• Background bar color Lock mode – /System/Library/CoreServices/SpringBoard.app/FST_BG.png
• Background bar color for all other screens (Text, Safari, Mail, etc.) – /System/Library/CoreServices/SpringBoard.app/default_BG.png
• Window (including status bar) 320 x 480px
• Status Bar 20 px
• View inside window (visible status bar) 320 x 460
• Navigation Bar 44 px
• Nav Bar Image / Toolbar Image up to 20 x 20 px (transparent PNG)
• Tab Bar 49 px
• Tab Bar Icon up to 30 x 30 px (transparent PNGs)
• Text Field 31 px
• Height of a view inside a navigation bar 416 px
• Height of a view inside a tab bar 411 px
• Height of a view inside a navbar and a tab bar 367 px
• Portrait Keyboard height 216 px
• Landscape Keyboard height 140 px
• iPhone app icon size 57×57 px

December 7, 2009

Tips For Creating Cool Web Forms

1. Use Labels

You don’t need labels for your form to work, but as one CSS-Tricks reader once put it, it is an accessibility crime not to use them. Labels are what signify what the input box is for and associate them together. The use of the

2. Float Your Labels

This is how you achieve that table-like structure on forms without having to actually use a table. Just set a static width, float it the left, align the text to the right, and give it a little right-margin. Beautiful.

label {
float: left;
text-align: right;
margin-right: 15px;
width: 100px;
}

3. Careful To Not Wreck Your Default Styling

A lot of browsers have default styling applied to input buttons. This provides a nice consistent user experience, so if you choose to interfere with this, make sure you have a good reason. A common way to break this is by using a CSS Reset technique that includes something like this:

* {
border: none;
outline: none;
padding: 0px;
margin: 0px;
}

4. Use the :focus Pseudo Class

You can apply styling to your input areas and textareas that only takes affect when a user has clicked into that area using the :focus pseudo class. For example, you could change the border color on those elements like so:

textarea:focus, input:focus {
border: 2px solid #900;
}
// Will not work in IE

5. Prefill With Hints, But Clear Them Away

It can be useful to prefill your input fields and textareas with little hints or reminders. For example if you have a general contact form and a textarea labeled “Message:”, you may want to prefill that textarea with something like “Your positive comments or constructive criticism here.” Or, you could have a name field which is prefilled with “First Middle Last” so that you can remind users that is the order they should fill in their name. You can do that just by including text within your tags: