• Five Reasons Your Website Should Be Mobile-Friendly

    Five Reasons Your Website Should Be Mobile-Friendly

    1. Your Visitors Are Mobile Currently, between 5% and 10% of your website or blog visitors are accessing your site via a mobile device. Mobile web traffic has increased immensely within the last year and will continue to rapidly expand. Every day, more and more smartphones are being purchased, sold, and repurchased by consumers. How easy is it to navigate your website on a mobile device? 2. Keeping Up With The Competition Big brands have already...

HTML 5: The New Standard

HTML 5: The New Standard

Look out folks, because it’s coming, and developers need to take notice.

After years of cross-browser catastrophes and CSS styling hacks (Internet Explorer) that sought to render design and development projects uniformly across all browsers, it seems as though a solution is finally on it’s way.

HTML 5 is still a DRAFT, meaning that open issues are still being discussed and the use of this mark-up across all major platforms is not fully supported yet. While this new core language is still getting all of it’s quirks worked out, it is already being used to develop functional websites with a variety of new features available.

In this article I would like to take a look at some of the new <tags> offered to designers and developers in HTML 5. In no way is this a complete list of the tags available to HTML 5, but I wanted to look at some that, as a developer, I found interesting:

 

The DOCTYPE

<!DOCTYPE html>

Before we look at the new tags, I felt it necessary to reference the new DOCTYPE used to declare an HTML 5 document. It’s simple, effective, and downright sexy.

 

The <article> tag

<article>This is some article text.</article>

The <article> section is new to HTML 5 and is used to specify independent, self-contained content.

 

The <audio> tag

<audio controls="controls">
  <source src="intro.mp3" type="audio/mp3" />
  <source src="intro.ogg" type="audio/ogg" />
  The 'audio' tag is not supported in your browser
</audio>

The <audio> tag is used to play streaming audio, music and sounds. In the example above, both the ‘.mp3′ and ‘.ogg’ formats are specified to allow for cross-browser compatibility. You will also notice that ‘controls’ are added to the player via the ‘controls’ attribute.

 

The <embed> tag

<embed src="myintro.swf" type="application/x-shockwave-flash" height="250" width="250" />

The <embed> tag defines a container that is used to serve interactive content and content from external applications. In the example above, I have used the ‘type’ attribute to specify the MIME-type of the content I wish to embed. I have also specified the ‘height’ and ‘width’ attributes to set the dimensions of the container.

 

The <footer> tag

<footer>Copyright 2012 YourWebsite.com All Rights Reserved</footer>

The <footer> section is used for defining the footer of an HTML 5 document or section. Footers historically contain information such as copyright declarations, website authors, contact information, and navigational links. Footers have been traditionally placed at the bottom of a document, however this placement is not required in HTML 5.

 

The <header> tag

<header>
<h1>This is an h1 heading but it could be an h5 or h3 heading</h1>
<p>This is some information. This is some more information.</p>
</header>

The <header> section will typically contain the section’s heading (h1-h5 element) text, but is not restricted to this specific content. This section can contain logos, forms, and navigational elements.

 

You can find lots of other useful information on HTML 5 HERE

 

23 Jan, 2012  Posted by admin   Comments Off
Read More

jQuery Mobile: The Standard Boilerplate

The jQuery Mobile Framework has given developers a nice tool to develop attractive, mobile-friendly websites very quickly by doing most of the hard stuff for you. The following is the standard boiler-plate template used to create a website on the jQuery Mobile Framework:

 

<!DOCTYPE html>
<html>
	<head>
	<title>Page Title</title> 

	<meta name="viewport" content="width=device-width, initial-scale=1"> 

	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
	<script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
</head>
<body> 

<div data-role="page">

	<div data-role="header">
		<h1>Page Title</h1>
	</div><!-- /header -->

	<div data-role="content">
		<p>Page content goes here.</p>
	</div><!-- /content -->

	<div data-role="footer">
		<h4>Page Footer</h4>
	</div><!-- /footer -->
</div><!-- /page -->

</body>
</html>

 

For more information on the jQuery Mobile Framework, click HERE

 

23 Jan, 2012  Posted by admin   Comments Off
Read More

The WordPress Loop

The Loop is used by WordPress to display each of your posts. Using The Loop, WordPress processes each of the posts to be displayed on the current page and formats them according to how they match specified criteria within The Loop tags.

 

The loop starts here:

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

 

The loop ends here:

<?php endwhile; else: ?><p><?php _e('Sorry, no posts matched your criteria.'); ?></p><?php endif; ?>

 

23 Jan, 2012  Posted by admin   Comments Off
Read More

Five Reasons Your Website Should Be Mobile-Friendly

Five Reasons Your Website Should Be Mobile-Friendly

1. Your Visitors Are Mobile

Currently, between 5% and 10% of your website or blog visitors are accessing your site via a mobile device. Mobile web traffic has increased immensely within the last year and will continue to rapidly expand. Every day, more and more smartphones are being purchased, sold, and repurchased by consumers. How easy is it to navigate your website on a mobile device?

2. Keeping Up With The Competition

Big brands have already invested thousands of dollars in order to create a mobile-friendly experience for their web visitors who are on-the-go. Find an iPhone, Blackberry, or Android and visit Nike.com, Walmart.com, or Target.com on your desktop and then on your mobile device. You will notice that the mobile version loads fast and is much easier to navigate on a mobile phone. This type of ease leads to people staying on the mobile site longer, and the longer that people stay on a website, the more likely they are to buy or click on an advertisement. At the end of the day, there is something to be learned from where large brands are spending their money.

3. Speed and Convenience

A website designed for mobile will load in about 4 seconds, while a desktop or laptop site can take up to ten times longer to load on a mobile device. Do you want to keep your visitors waiting that long? Today’s consumers are more impatient than ever and making them wait will cost you money. Speed is only one aspect to consider. What about convenience? Think about why someone is visiting a website on a mobile phone. Are they more likely to read your “About Us” section on a mobile device or are they looking for something more immediate (e.g. phone number, directions, hours of operation, etc.)? Mobile web users have different needs than someone sitting at a desk casually browsing your site or blog. Catering to these needs will result in happy visitors and happy visitors will result in money.

4. The World Is Changing

Morgan Stanley’s analysts believe that mobile web traffic will out-weight desktop and laptop internet traffic by the year 2015. Others believe that this will happen much sooner. Regardless, this information is tough to ignore and must be acted upon sooner rather than later. If your bank is not allowing you to deposit anymore money because you have too much, ignore this inevitable web transformation, you will be fine. However, if you want to keep up with the web, it’s time to adapt.

5. The Price Is Right

Creating a mobile website can be overwhelming and sometimes quite pricey. However, with the advancements in technology, you can use a service like Moably to create a mobile version of your website or blog without having to write a single line of code and without paying a dime for development. At this point in time, there is no excuse a website owner can give for not catering to their mobile visitors.

 

23 Jan, 2012  Posted by admin   Comments Off
Read More

How To Treat Duplicate Content With Canonical Links

How To Treat Duplicate Content With Canonical Links

Duplicate content is a serious concern with website owners. It need not be then case when someone else steals your content and places it somewhere else on the web. In fact, you yourself may be unknowingly feeding duplicate content on your own website.

Often it happens that a certain page of your website, say the homepage itself has more than one URLs. For example, the home page of your website can be

www.website.com
website.com
www.website.com/
website.com/
ww.website.com/index.html
www.website.com/Home.aspx
website.com/Home.aspx

These are like 8 different variations of the same web page. This means that the web servers would return the same content for all these eight different URLs. This causes several problems in the search engines because instead of having all your backlinks go to one page, it now split between 8 different versions of the same. This distributes the credibility of the web page and as a result, the search engines have a difficult time indexing it.

Solving Content Duplicity Issues

Prevention is always better than cure. Therefore, its is better to follow certain principles in order to make sure you don’t face any duplicate content issues instead of battling it afterwards. There are lot of things you can do to fix problems at the very beginning. Here are some…

Have Standardized URLs

Standardized URLs mean that there is only one way to reach the web page. Make sure your content management system generates consistent URLs that are completely uniform. This way, you would not have to worry about having 8 different versions for the same page.

Link Consistently

Often webmasters link to more than one versions of their website URL. For example, they sometimes link to www.website.com while at other times they link to website.com. This only serves to confuse the search engines. Therefore, make sure you select one canonical URL and link consistently.

Use 301 Redirects

If you have more than one URLs for the same web page, you can use a permanent 301 redirect and make all the other URLs redirect to a single permanent URL.

Specify in Google Webmaster Tools

Use Google Webmaster Tools and specify a permanent URL there. It is a really easy setting and can make a whole lot of difference to your duplicate content issues.

Submit the preferred URL in your Sitemap

Google prefers the URLs that you specify in the sitemap of your website. If it sees another of the same URL elsewhere, preference goes to the URL that is specified on the sitemap.

Using Canonical Pages

Canonical pages are the preferred version of web pages that have same or similar content. For example a web page may have more than one URL. Or it may display certain products that repeated when sorted by different parameters. Google when faced with multiple pages having the same content, indexes only one page that is most relevant to the users’ query.

You can also specify a canonical page to the search engines by adding a element with the attribute rel=”canonical” to the section of the non-canonical version of the page. This informs the website owner about identical content and make suggestions to Google about which one to prioritize.

 

22 Jan, 2012  Posted by admin   No Comments »
Read More