Tuesday, July 15th, 2008
Following on my theme for this week, here are the steps to make Wordpress mobile friendly. This assumes you are using a separate URL for your mobile friendly wordpress (such as sitename.mobi):
1 – Buy your domain and park it on your current Wordpress site, so sitename.com and sitename.mobi are generating the same content
2 – Add (or modify) the file /wp-content/themes/yourtheme/functions.php and add the following lines:
<?php
remove_action(’template_redirect’, ‘redirect_canonical’);
function elixir_urlrewrite( $url ) {
if ( strpos( $url, get_bloginfo(”url”,”raw”) ) === false )
return $url ;
$urlparts = parse_url($url) ;
$url = str_replace( $urlparts[scheme] . “://” . $urlparts[host] , “” , $url ) ;
if ( strlen( $url ) == 0 )
$url = “/” ;
return $url ;
}
add_action(’day_link’, ‘elixir_urlrewrite’);
add_action(’feed_link’, ‘elixir_urlrewrite’);
add_action(’month_link’, ‘elixir_urlrewrite’);
add_action(’page_link’, ‘elixir_urlrewrite’);
add_action(’post_link’, ‘elixir_urlrewrite’);
add_action(’the_permalink’, ‘elixir_urlrewrite’);
add_action(’year_link’, ‘elixir_urlrewrite’);
add_action(’category_link’, ‘elixir_urlrewrite’);
add_action(’bloginfo_url’, ‘elixir_urlrewrite’);
?>
This will cause your wordpress installation to rewrite all links to remove sitename.com from them – this stops a mobile visitor always being redirected to the .com site
3 – Modify your .htaccess file and add the following lines (replacing sitename with your site name as applicable):
Options All -Indexes
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteCond %{HTTP_HOST} ^sitename\.com$
RewriteRule ^(.*)$ http://www.sitename.com/$1 [R=301,L]
RewriteCond %{HTTP_HOST} ^sitename\.mobi$
RewriteRule ^(.*)$ http://www.sitename.mobi/$1 [R=301,L]
</IfModule>
This replaces the built in ‘redirect_canonical’ so that it handles .com and .mobi correctly.
4 – modify your template so that it changes the doctype for a mobile device. Modify your header.php fie and replace the current ‘doctype’ line as follows:
<?php
function checkmobile(){
// Always mobile enabled on .mobi
if ( strpos( strtolower( $_SERVER['HTTP_HOST'] ) , “.mobi” ) !== false )
return true ;
if(isset($_SERVER["HTTP_X_WAP_PROFILE"])) return true;
if(preg_match(”/wap\.|\.wap/i”,$_SERVER["HTTP_ACCEPT"])) return true;
if(isset($_SERVER["HTTP_USER_AGENT"])){
$uamatches = array(”midp”, “j2me”, “avantg”, “docomo”, “novarra”, “palmos”, “palmsource”, “240×320″, “opwv”, “chtml”, “pda”, “windows\ ce”, “mmp\/”, “blackberry”, “mib\/”, “symbian”, “wireless”, “nokia”, “hand”, “mobi”, “phone”, “cdm”, “up\.b”, “audio”, “SIE\-”, “SEC\-”, “samsung”, “HTC”, “mot\-”, “mitsu”, “sagem”, “sony”, “alcatel”, “lg”, “eric”, “vx”, “NEC”, “philips”, “mmm”, “xx”, “panasonic”, “sharp”, “wap”, “sch”, “rover”, “pocket”, “benq”, “java”, “pt”, “pg”, “vox”, “amoi”, “bird”, “compal”, “kg”, “voda”, “sany”, “kdd”, “dbt”, “sendo”, “sgh”, “gradi”, “jb”, “\d\d\di”, “moto”);
foreach($uamatches as $uastring){
if(preg_match(”/”.$uastring.”/i”,$_SERVER["HTTP_USER_AGENT"])) return true;
}
}
return false;
}
if ( checkmobile() == true &&
strcmp( strtolower( $_SERVER['HTTP_HOST'] ) , “www.sitename.mobi” ) != 0 &&
strcmp( strtolower( $_SERVER['REQUEST_METHOD'] ) , “get” ) == 0 &&
$_SERVER['SERVER_PORT'] == 80 )
{
header(”HTTP/1.1 301 Moved Permanently”);
header(”Location: http://www.sitename.mobi” . $_SERVER['REQUEST_URI']);
exit();
}
if ( checkmobile() == true )
{ ?>
<!DOCTYPE html PUBLIC “-//WAPFORUM//DTD XHTML Mobile 1.0//EN” “http://www.openmobilealliance.org/tech/DTD/xhtml-mobile10.dtd“>
<?php
}
else
{ ?>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>
<?php
}
?>
5 – view with a mobile device. This is when you will need to change your CSS and page layout to take into account the limitations of the mobile environment. THis was covered in previous posts:
Making Your Site Mobile Friendly – CSS
To see this in action visit http://www.fionndownhill.mobi/
Posted in Accessibility, Web Design and Development | 7 Comments »
Friday, July 11th, 2008
According to the BBC http://news.bbc.co.uk/2/hi/technology/7501321.stm . I don’t own an iPhone but I’ve played with one and they are really cool. I ended up buying a T-mobile Shadow which I like except the keyboard is a multi-tap one rather than a full qwerty and it gets annoying correcting the auto-spell checker (’do’ always ends up ‘dp’)
For those who own an iPhone and want to connect their iPhone to Exchange 4SmartPhone have launched 4iPhone.com – a service to enable just that – check it out at http://4iphone.com/
Disclosure – owners of 4SmartPhone are personal friends.
Posted in Uncategorized | No Comments »
Wednesday, July 9th, 2008
This post is not about ‘how to get more traffic to your site’ its about how to get the right traffic to your site. Once a site is properly optimized some people will see reduced traffic to their site and that’s a good thing overall. The problem with targeting ‘more traffic’ as a goal can be the traffic is the wrong kind of traffic. If you sell widgets and get ranked #1 for ‘viagra’ then the traffic you get will land on your site, see it’s not what they want, and quickly move on – you’ve had a bounce (single page visit) which has eaten your bandwidth and produced no results.
So how do you get the right kind of traffic. First of you need to know what search phrases (keywords) to target. Generally we recommend Wordtracker (free trial), or Google Adwords Keyword Tool. Using these tools you can find terms that are likely to drive targeted traffic.
A good way to test the keywords you find is to set up a PPC campaign around these keywords and see what the traffic does once it lands on your site. If it bounces you’ve got the wrong traffic, if it stays or even converts you’ve got a winner. The budget outlay for this can be small – less than $100 should do it in most cases.
So now you have your search phrase list – around 10 for a non-ecommerce site should suffice, and for an ecommerce site you’ll want at least one search phrase per category and one per product which can run into thousands.
So with these 10 words you decide which are your top priority, either their higher traffic, or lower traffic but convert well. Then run the command ’site:mysite.com searchphrase’ on one of the engines and let the engines tell you which page is most relevant for the keyword. If the page that shows at #1 is in your opinion the best page that’s ok, if it isn’t you need to find the best page and then optimize it.
So optimization. Keyword density checks are old hat. Put your keyword once in the meta title, once in the meta description, once in the meta keywords. Make the headline (h1 tag) include your phrase, then try to insert your phrase about 6 times on the page. You can use Firefox to highlight your search term on your page using the command ‘Ctrl-F’, a search box appears in the lower right, type in your phrase, and click ‘highlight all’
Linking is then key and I’ll hit on that another time.
Posted in Search Engine Optimization | 1 Comment »
Tuesday, July 8th, 2008
CSS is vitally important in making your site mobile ready. I ended up making 3 CSS media sections in one CSS file:
- @media screen – contains all the CSS positioning informaiton, font sizes needed for the screen, etc.
- @media handheld – the CSS for handhelds. This removed a lot of unneeded parts of the screen (footer text), and doesn’t include positioning information.
- @media print – CSS for when the page is printed. This changes the font size for printing, labels links for printing, turns off unnecessary navigation (left hand menus, footer, etc) and anything else to make your site look good when printed.
All CSS for these sections should be contained within curly brackets {}
@media print{
*{
font-size: 12pt;
font-family:Georgia, "Times New Roman", Times, serif;
}
a{
color: #520;
background: transparent;
font-weight: bold;
text-decoration: underline;
}
}
All of these sections can be in their own CSS files and included using the include syntax:
<style>
@import url("print.css") print;
</style>
or
<LINK rel="stylesheet" type="text/css" media="print" href="print.css">
Posted in Accessibility | 1 Comment »
Thursday, July 3rd, 2008
When was the last time you bought a can of cola online? A television? Signed up for legal representation? While internet marketing is a great way to drive traffic to your website to generate sales or leads, there are still many people who either won’t or can’t purchase online. However, many of these people will do research online before going a bricks and mortar store to make their purchase or before picking up the phone to make an appointment. That is one reason why more and more businesses are actively using the internet to get their brand in front of a growing number of targeted eyeballs.
Branding helps because:
- It is your identity
- It communicates your message to others
- It builds reputation and trust
- It separates you from your competitors
Your online brand should be aimed at your target audience and be consistent with your offline brand profile.
Keep in mind that your brand is more than just your website. Consider all the other online avenues that your company and others use to publish information about your brand. Information within your control such as press releases, company blogs, articles, etc., can all find their way into search engine results. Information out of your control such as product reviews and customer opinions can also find their way into the results. Because there are external factors involved, many organizations are now monitoring what people are saying online about their brands.
A growing group of brand advocates – individuals who are inspired spokespersons on behalf of a brand, are rapidly gaining the attention and consideration of many businesses. Businesses are learning to nurture these advocates by feeding them the latest news, providing advance knowledge of updates, and most of all, listening to their opinions and ideas regarding products, services, advertising, and other aspects of the company-client relationship. These brand advocates can make or break the success of online brands.
The development of advocacy creates increased opportunities for the branding message to be passed on virally or by word-of-mouth. Web 2.0 or social networking sites play a pivotal role in the rapid spread of consumer related information about brands. These types of sites were developed so that individuals could communicate with others who shared similar tastes or outlooks.
Branding can no longer be thought of as something that can immediately be transferred from offline to online. Online branding in the Web 2.0 age requires a change of focus away from the company’s branding message towards the message formulated by the consumers of the brand. The strongest online brands are built on a foundation of brand advocacy coupled with a solid, consistent branding message from the parent company.
Posted in Branding | No Comments »
Thursday, July 3rd, 2008
Setting up CSS for mobile phones is easy enough but what about modifying your site to handle these users. Considering the total people using a mobile phone to surf in a business environment is minimal so you want to minimize the additional webmaster time spent supporting this implementation.
I found this script at http://www.brainhandles.com/2007/10/15/detecting-mobile-browsers/ that detects mobile phones. It’s very simple to implement. I call this script and use it to decide what parts of a page to send to the visitor. For example the top nav on our main site is graphics, by checking the visitor is mobile I output an unordered list of navigation links.
Posted in Accessibility | No Comments »
