Web Design in Kent: March 2014

Friday, March 14, 2014

How to do On Page SEO for Wordpress?

WordPress is the most used CMS in the world. According to Wikipedia It’s actually powers around 17% of all "top 1 million sites". By using Wordpress, you can do your on page SEO works very easily.

Check out the points below for your pages to make proper SEO.

Permalink structure:

At first you need to change your permalink structure.

You can change your permalink structure under settings.

Settings ---------------->Permalinks

After clicking Permalinks you can see the default permalink is set to?p=<postid>, but I suggest you to use /%postname%/

http://webdesignkent.co VS http://www.webdesignkent.co:

Before domain name www and non www are not same. So you need to think that what you want to show up.

Go to your General Settings, Under Settings ------------> General then Setup your desired url.

------------------->You can see many free SEO plugin over WP plugin directory but I prefer you to use YOAST SEO plugin. So now click on your Plugin options Add new plugin. Then you can see a search box over there. Search by typing YOAST SEO Plugin then install & activate it.

How to optimize your Article or What is the most powerful factor of an Article?

For your content, write more than 300 words, title should be 70 chars and meta-description should be 156 chars long (max.)

Title: <title> is one of the most important factors to rank of your search results. So, your targeted keyword / phrase at the beginning of your title are considered to improve rankings.

Use your Keyword the first paragraph of the copy.

H1 to H6 Tag: You can use H1, H2…., H6 tag into your article. In your H2 tags, you can use your KW or phrase. It will rank your article.

Meta Description: Meta description tags are not so important for search engine rankings but extremely important for gaining user click-through from SERPs. So, you have to write a good description for your content, containing the target keyword / phrase.

URL: Use your keyword / phrase in the URL section.

Images: You can include some images for your content and must use meaningful alt tag for your images.

XML sitemaps: By setup a xml sitemap you can tell Google or other search engines that your website has been updated. So, you can use yoast xml sitemap or other xml sitemap plugin. If you have like to use other xml sitemap plugin then must uncheck yoast xml sitemap square button.

Webmaster tool: Google Webmaster Tools provides you with detailed reports about your pages visibility on Google. So you need to create a web master tools account from www.google.com/webmasters/tools then add your site. After that you need to verify your account. So you need to copy your verify code and paste it under yoast seo ----------------------> Google Webmaster Tools.

I think, now you guys can optimize your site properly through this guide. Wish you the best of luck. Thanks!!

Wednesday, March 12, 2014

Simple Drop Down Menu

At first you have to copy all the html and css code then paste it to your desired location.

HTML:

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel="stylesheet" href="style.css"/>
</head>
<body>
<nav>
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">web design kent</a>
            <ul>
                <li><a href="#">Photoshop</a></li>
                <li><a href="#">Illustrator</a></li>
                <li><a href="#">Web Design</a>
                    <ul>
                        <li><a href="#">HTML</a></li>
                        <li><a href="#">CSS</a></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li><a href="#">Articles</a>
            <ul>
                <li><a href="#">Web Design</a></li>
                <li><a href="#">User Experience</a></li>
            </ul>
        </li>
        <li><a href="#">Inspiration</a></li>
    </ul>
</nav>
</body>
</html>

CSS3 :

nav ul ul {
    display: none;
}

nav ul li:hover > ul {
    display: block;
}
nav ul {
    background: #efefef;
    background: linear-gradient(top, #efefef 0%, #bbbbbb 100%);
    background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%);
    background: -webkit-linear-gradient(top, #efefef 0%,#bbbbbb 100%);
    box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
    padding: 0 20px;
    border-radius: 10px;
    list-style: none;
    position: relative;
    display: inline-table;
}
nav ul:after {
    content: ""; clear: both; display: block;
}
nav ul li {
    float: left;
}
nav ul li:hover {
    background: #bbbbbb;
    background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
    background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
    background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%);
}
nav ul li:hover a {
    color: #efefef;
}

nav ul li a {
    display: block; padding: 25px 40px;
    color: #757575; text-decoration: none;
}
nav ul ul {
    background: #5f6975; border-radius: 0px; padding: 0;
    position: absolute; top: 100%;
}
nav ul ul li {
    float: none;
    border-top: 1px solid #575f6a;
    border-bottom: 1px solid #575f6a;
    position: relative;
}
nav ul ul li a {
    padding: 15px 40px;
    color: #fff;
}
nav ul ul li a:hover {
    background:orangered;
}

Monday, March 10, 2014

What is Infographic and How Infographic Works for SEO?

What is Infographic?

Infographic is a visual image such as a graph or diagram used to represent information or data. We can easily understand the topic at a glance from infographic design. Now, many people use infographic to communicate messages quickly.

How Infographic Works for SEO?

Instead of writing an article or blog post you can put all your info to create an infographic design and readers can easily get an answer to any specific questions from with the help of visual information without having to read a lot of text. But the question is – “Is it Good or Bad for SEO?” or “How can you make it work well with your SEO efforts?”

Many people think that Google won’t read images, so infographic is not good for SEO. Well, this is true but if you make an awesome infographic and host on your site with embed code then it is very beneficial for you. As people who want it on their site can simply use the embed code which contains a link back to your site/blog. Every web users want to know their information quickly. For that reason infographic are so great.

For more details about latest SEO technique you can visit our main site: http://www.webdesignkent.co/

Here is an Infographic sample on Responsive Web design.

Monday, March 3, 2014

Horizontal Menu Create

Copy the Html and Css Code and Paste it to your html and css file.

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
    <title></title>
    <link href="css/qc_j&c.css" rel="stylesheet" type="text/css"/>
    <style type="text/css">
    </style>
</head>
<body>

<div class="menu_container">
    <div class="main_menu">
        <ul>
                  <li><a href=”#”>Home</a></li>
                  <li><a href=”#”>About Our Company</a></li>
                  <li><a href=”#”>Mission</a></li>
                  <li><a href=”#”>Our Projects</a></li>
                  <li><a href=”#”>Customer Order</a></li>
                  <li><a href=”#”>Web Design Kent</a></li>
                  <li><a href=”#”>Ticket</a></li>
                  <li><a href=”#”>Corporate profile</a></li>
                  <li><a href=”#”>Career Build</a></li>
                  <li><a href=”#”>Career</a></li>
                  <li><a href=”#”>Contact Me</a></li>
        </ul>
    </div>
</div>
</body>
</html>

CSS Code:

.menu_container {
margin: 0;
padding: 0;
}
.main_menu {
height: 42px;
background-color: #000;
background-position: left top;
background-repeat: no-repeat;
padding-left: 2px;
}
.main_menu ul {
margin: 0;
padding: 0;
}
.main_menu li {
list-style: none;
float: left;
}
.main_menu a:link, .main_menu a:visited, .main_menu a:active {
color: #537234;
text-decoration: none;
padding: 0 16px 0 15px;
line-height: 42px;
display: block;
font-family: Arial, Verdana, Eurostile;
font-size: 14px;
}
.main_menu a:hover {
color: #FFFFFF;
text-decoration: underline;
padding: 0 16px 0 15px;
line-height: 42px;
display: block;
font-family: Arial, Verdana, Eurostile;
font-size: 14px;
-webkit-transition: all 2s ease; /* Safari 3.2+, Chrome */
-moz-transition: all 2s ease; /* Firefox 4-15 */
-o-transition: all 2s ease; /* Opera 10.5-12.00 */
transition: all 2s ease; /* Firefox 16+, Opera 12.50+ */
}