Archive for July, 2014

Responsive Web Design SEO Benefits

Wednesday, July 30th, 2014

Responsive web design is a web design strategy which makes website layout very responsive to the size of a user’s screen. Responsive web design will gives flexible and responsive web page. There has been many audience using internet through mobile and tab. The responsive web site gives a better navigation to users.

The internet platform changed to smart phones in 2014 and will continued to up coming years. But when it comes to SEO, it is helpful to get traffic through smart phone and tablet. A responsive web design seo is easier to maintain and it eliminate the need of having two SEO services for same business.

Today I will explain some of responsive web design SEO benefits clearly.

Google Likes Responsive Web Design

Google is the top most search engine. Google recognizes that more and more people using through smart phone. The responsive web design reduces the bounce rate. Responsive web sites have only one URL and one HTML.

So Google only needs to index the content of that URL only. Google will also rank the responsive web site than specially designed sites for mobile. So creating responsive web site is necessary to get good result in Google.

Very Easy to Mange One Site

It is more efficient to manage one website than different platform versions. If we have a responsive website, so we can manage the content, and web page designs of one website. Responsive website means, same URL and same HTML for two sites.

So it is easy to do one SEO for the site rather than doing it for different site. And the main advantage is that the traffic of the site cannot be dividing for different site. So responsive web design seo is benefited.

Reduce the Bounce Rate

Let me tell you what is bounce rate first. Bounce rate is amount of visitors to your website who navigate away/leave from your website after viewing only one page.

If website is not responsive, the users experience in mobile will be bad. So the bounce rate will become a big problem. Google will consider these bounce rate and the site ranking will drop down.

A responsive site will overcome this problem. So the users will get the all information through mobile search also. So they will be active in site, it reduces the bounce rate of website. So this adds another point to responsive web design seo.

Users Experience is Enhanced

A user friendly website is helpful to find, absorb and share the content. If visitors browsing through smart phone or tablet, they should be easy to get content like the desktop users. So the Google get a better result about website and the rank will be changed to first place.

Responsive web design gets attracts to modern users, who are changed their platform to mobile or tablet. So the responsive is the most effective way to get more traffic through mobile and tablet, and can give the better experience to users.

 

How to Generate RSS Feed Using PHP

Wednesday, July 30th, 2014

If you own a website or blog which has many posts, then you might need a rss feed for your website. RSS feed helps the reader to grab new posts from any websites or blogs, and display it all together in one easy to read place.

Feeds are like a book. Users read your blog/website posts easily using rss feeds.

RSS feeds are generated using xml structure. When ever new posts or pages added to your website these rss feeds will get updated automatically. So by accessing your rss feed users or readers can get each new posts on single page easily without any annoying designs.

So today I will explain how you can generate rss feed page and generate rss feed automatically. This can be done using PHP simply.

You can try this in your local machine too. If you working on local you might read below article too.

All we have to do is use a while loop and include basic rss feed structure inside that. See below is the normal basic structure of a rss feed.

<?xml version='1.0' encoding='UTF-8'?>
<rss version='2.0'>
<channel>

<title>Your Website Title </title>
<link>Your Website URL</link>
<description>Your Website Description</description>
<language>en-us</language>

<item>
<title>Item/Article Title</title>
<link>Item/Article URL </link>
<description>Items/Article description </description>
</item>

</channel>
</rss>

Creating Table with Post Details

So in order to generate rss feed we need to get post details from database. If you have a blog or website which contains many posts, definitely it will have a database and also a table which contains your post details.

For example I will create a new table 4 fields (id, title, description, link). This is just a basic structure that we need for generating the feed.

Just copy and run below code in your database query console. You can customize it as per your need.

CREATE TABLE posts
(
id INT NOT NULL AUTO_INCREMENT PRIMARY KEY,
title VARCHAR(250),
link VARCHAR(250),
description TEXT
);

Now you are all set to go. Let us see how to generate rss feed page now.

Generate RSS Feed

Just create a new php file. Name it anything. ( Use something related to feed). For example I will name it as feed.php. Please keep this file in your root directory. I recommend it because it can be found easily for everyone. If you don’t want to use it for public the keep it some where else.

Here I will keep this file on my root folder. So it may look like www.mywebsite.com/feed.php. Now just copy and paste below code  and save the file to generate rss feed.

These codes contains some php and xml structure. As I mentioned above rss feeds are generated using XML.

<?php
mysqli_connect("localhost","username","password","db_name");
$sql = "SELECT * FROM posts ORDER BY id DESC LIMIT 20";
$query = mysql_query($sql) or die(mysql_error());

header("Content-type: text/xml");

echo "<?xml version='1.0' encoding='UTF-8'?>
<rss version='2.0'>
<channel>
<title>PerOla Hammar A Creative But Jaded Webgeek </title>
<link>http://www.perolahammar.com</link>
<description>A technology blog</description>
<language>en-us</language>";

while($row = mysql_fetch_array($query))
{
$title=$row['title'];
$link=$row['link'];
$description=$row['description'];

echo "<item>
<title>$title</title>
<link>$link</link>
<description>$description</description>
</item>";
}
echo "</channel></rss>";
?>

I will explain how these codes works.

First few lines are used to connect to database and get details from database. If you are a web master you might know these steps. These are just basics. Just replace credentials with yours

After getting post details from database table we will need to display them inside XML tags. For that we have to use a while loop. You can see that above. We will give first few details as static values. This could be your website details. Here I have used my website details. You can change it to yours.

Then after that we will display each post details using XML tag by php echo. Each post details comes inside a <item> tag. As you can see there should be a <item></item> for each posts.

Nothing more to do for generate rss feed. Now your rss feed is ready. Just use any rss readers to check your rss feeds, Google reader was the most popular one among rss readers. But Google has stopped it.

 

How to Make Responsive YouTube Video Embed

Monday, July 28th, 2014

Before some days I have explained how to embed a part of YouTube video with specific start / end time. Today I will share you another technique which helps you to make responsive YouTube video embed that can be easily added to any responsive websites.

If you are using a responsive layout on your website, adding external iframes like YouTube videos, form etc will affect your website look and performance. Isn’t that a great idea if we can make those YouTube videos as responsive YouTube video embed? Yes. Lets see how to make a simple responsive YouTube video embed.

I will explain two methods of making responsive YouTube video embed. First case can be used to make every videos including existing video as responsive YouTube video embed automatically. And second method is manually making responsive YouTube video embed.

Making All Videos Including Existing as Responsive YouTube Video Embed Automatically

If your website already has many videos embedded and you want to make all videos as responsive YouTube video embed automatically when ever they added, this method can be used.

It will automatically detects the YouTube video iframes and makes it responsive according to the layout. Before proceeding to our main step please make sure your website already included jQuery library. If not please add the below lines to your website <header> tag. Then only our coming jQuery snippet will work.

Ok. If you are done with this step let us start. We are going to add some simple jQuery codes that will detect if any YouTube video is available on the page then automatically makes it as responsive youtube video embed.

Just add below line also to your <header> tag.

<script src="https://perolahammar.googlecode.com/svn/responsive-youtube.js"></script>

Thats it. Now this code will work on your web page and will make all YouTube videos to responsive YouTube video embed. Just try once 🙂

Still you are not happy? You do not want to add any external javascript to your website? Ok fine. Then just copy and paste this code to your website header. Instead of adding external file you can place code inside your website itself.

<script type="text/javascript">
$(document).ready(function() {
if(typeof YOUTUBE_VIDEO_MARGIN == 'undefined') {
YOUTUBE_VIDEO_MARGIN=5;
}
$('iframe').each(function(index,item) {
if($(item).attr('src').match(/http(s)?://www.youtube.com/)) {
var w=$(item).attr('width');
var h=$(item).attr('height');
var ar = h/w*100;
ar=ar.toFixed(2);
$(item).css('position','absolute');
$(item).css('top','0');
$(item).css('left','0');
$(item).css('width','100%');
$(item).css('height','100%');
$(item).css('max-width',w+'px');
$(item).css('max-height', h+'px');
$(item).wrap('<div style="max-width:'+w+'px;margin:0 auto; padding:'+YOUTUBE_VIDEO_MARGIN+'px;" />');
$(item).wrap('<div style="position: relative;padding-bottom: '+ar+'%; height: 0; overflow: hidden;" />');
}
});
});
</script>

You can also create a small margin to your YouTube videos. Just check the above code. You will see something like we have set margin as 5. We have added a condition to check whether the margin is set for video, if not it will add a default value for margin that is 5. You can change it easily. Just add below code on top of this code. And change the value to to the margin you need.

YOUTUBE_VIDEO_MARGIN=10

Making All Videos as Responsive YouTube Video Embed Manually

Actually this method is also same as we see above. Only difference is you don’t have to add any jquery or javascript codes. Also you don’t need to include jQuery library too. 🙂 But one thing. You need to make all embedded videos inside a DIV element manually. So it will be hard to make changes if you have added many videos previously. Then you could try above method. Let us see how this simple method works.

For this trick all you need is just some CSS codes. Copy and paste below lines on CSS to your style sheet file and save it.

.youtube-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px; height: 0; overflow: hidden;
}
 
.youtube-container iframe,
.youtube-container object,
.youtube-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

After that when you add a YouTube video iframe, just insert those iframes inside a DIV element with a class “youtube-container“. Thats it. See below example how you could add iframe.

<div class="youtube-container">
<iframe width="420" height="315" src="//www.youtube.com/embed/nvtm5FZQ31o" frameborder="0" allowfullscreen></iframe>
</div>

Now using those CSS codes all videos inside the youtube-container class will be automatically resized to match responsive layout. That means you will get all videos as responsive YouTube video embed automatically.