Mobile Website Design With Mobile Seo

On April 27, 2012, in Mobile, by Adelard

Leveraging Traditional SEO for Mobile SEO

Mobile Website DesignMobile search engine optimization (SEO) is slightly different than traditional SEO but not totally different, so there is no need to reinvent the wheel and create a mobile website from scratch, as long as the traditional SEO services were carried out in accordance with best practices. Using different bots and algorithms causes mobile search engines to evaluate websites as if processed on a mobile phone and ranking is partially based on the type of phone making the query. To improve mobile SEO make sure your mobile website design satisfies criteria used by mobile search engines to determine if your content will process well and load quickly on any mobile phone.

Style Sheets

Follow traditional SEO services best practices as closely as possible to build a mobile website for mobile SEO. Even though mobile bots and indexes are different from traditional web search engines, certain things like tags remain important to make a mobile website. Assuming you have done a good job with the traditional SEO copy the style sheet used for the traditional site and name it “handheld.css.” This will allow formatting of existing pages to create a mobile website for viewing as mobile website design on mobile phones, eliminating the need to create new separate content. Mobile phones should automatically pull the handheld style sheet.

For iPhones copy the handheld style sheet and use it to build a mobile website for iPhones and name it appropriately “iPhone.css”. IPhones are supposed to process the full webpage but people seem to prefer mobile-formatted content on iPhones. .This process also tells how to make an iPhone app out of existing apps, when you make a mobile website.

No Transform Tags

Sometimes the mobile phone tries to read the traditional style sheet which can cause some pages not to load and others to be split where the page loads as different pages. To prevent this from happening add no transform tags to the traditional style sheets so that mobile phones will not try to read them. These tags will come in handy when learning how to make an iphone app.

Mobile Site Maps

The next step is to create a mobile site map. Google has a tool that will help build the mobile sitemap. If you are using multiple markup languages, such as, XHTML and WML, separate site maps are needed for each language. Some browsers do not read multiple languages so only the pages that can be read will be displayed.

Strict Coding

Strict HTML coding for traditional content will help it work on mobile phones, while sloppy HTML coding will cause problems with it being read and also slow the loading and processing of the pages. This will quickly defeat the purpose of Search Engine Optimization and digital marketing.

If the traditional content was not prepared using best practices and the mobile and it does not load properly on mobile phones then separate mobile specific content may be required on a mobile sub-domain. This can cause the links and traffic to split between two sets of similar pages which will negatively impact SEO. But this may be the only way to get adequate usability for mobile devices and digital marketing.

The best case scenario is to strictly follow best practices with traditional content and then leverage that content for mobile SEO. Good luck my friends.

It’s estimated by 2014, mobile traffic will overtake desktop, and getting traction for that now, is more critical. Still there are some businesses that don’t know how or where to get started. Can their current developer handle the conversion? Is it really necessary? Where do they get answers?

Karma Snack Regular Website

Karma Snack Regular Website

I was in the exact same boated a couple months back, until I learned the huge leaps and gains that mobile traffic was getting. Visiting my Karma Snack site on an iphone didn’t have the native feel, and look which I deem critical to the overall brand. We tried utilizing JQuery mobile and even JQTouch, but even though they great for applications (We are developing a quick lead management app utilizing JQTouch), wasn’t the right fit for the Karma Snack experience.

To give you a little background on how difficult the journey actually is for average business owners here is a background on me, a web developer. I’ve been computer programming in C++ and Perl since 1995, and designing websites back when Altavista and Lycos were running the show. I remember when CSS was still brand new, and Google wasn’t even a thought. Creating websites is in my blood, it is what I live for day in and day out. So for me to tell you that I had a difficult time with this task should give a small insight on how difficult it can be for newer website developers to handle. I knew businesses hand to take mobile seriously, so I took a hiatus and learned everything I could about the potential, frameworks, tested out script after script, and setup after setup.

A lot of back and forth with developers, programmers, and designers went into building the Karma Snack Mobile Architect. But just gaining the knowledge needed to answer questions for the perfect user experience standpoint was worth the headaches. After all this time, I can proudly say we’ve got the answers. We’ve already begun the conversion process for our bigger clients, and have stripped down a framework to barebones and usability for designers to have their fun too.

In the past 2 months, we’ve converted several clients’ website to mobile/tablet versions. In fact we made it mandatory for ALL new website development to be mobile friendly or enabled, there is no if-and-or-buts about it. If you get a website from Karma Snack, it’s mobile ready, no matter what.

Mobile Friendly Versus Mobile Enabled

What’s the difference in Karma Snack’s terms of Mobile Friendly or Mobile enabled?

Karma Snack Mobile Website

Karma Snack Mobile Website

A mobile friendly website means each page of the site will self adjust their layout according the device detected. There are several scenarios were this would be the best option versus a new mobile website itself. A website which is mobile enabled, is a website which detects mobile devices, and automatically redirected them to a mobile version of their website. We finally launched our Mobile version at I’m proud of the smooth back and forth between the mobile version and the regular version of the website, which we figured out how to do with cookies, and slight javascript tweaks.

Mobile Website To Regular Website Transition

What I’ve learned so far for Karma Snacks’ user feedback, people love the smooth transition of the website, if a particular page is not mobile enabled, it goes to the non-mobile version without interference, and then it automatically detects, when they go to a page which is mobile enabled, and switches back. This style allows a website to slow or gradually change pages to mobile friendly, over a period of time, because transitioning 10,000+ pages which are not on a CMS would be a hell of a challenge for a project.

I suggest moving the top level pages and 2nd level pages first. Make sure the call to actions exist on the mobile site in a mobile version. I’ve seen too many times where people half-ass their mobile site, and have the call to action, the most important part of your website, in an ugly non-mobile friendly way. Get your designer involved from the beginning of the transition and challenge them. They’ve got about 320 width of pixels to play with, good luck, it will be a true challenge. The goal is to keep the look and feel of the website the same when going from Mobile to Regular. If a user visits your website on their mobile first, and then goes to their desktop for a more vivid experience, They should understand automatically that this is the exact same website. The feel, the navigation, the content, it’s all there. The ultimate goal is for them to not even have to visit your regular site, since all of the functionality needed is on your mobile version, and they can order, fill out form, or quickly get in contact with your business.

The Mobile User Experience

User experience is key for everything, it took us nearly 6 months of trial and error until we got the perfect framework, and created a customized Karma Snack Mobile Architect and launched our mobile site. We had to do research, test speed, and compatibility. The user should be able to scroll, search, and understand intuitively how to use your mobile site. Quick symbols for navigation work where there is not a lot of room for text. Depending on the design, I recommend have a navigation at the top and bottom of the pages, and maybe a subtle mini-navigation when in a particular section. Sitemaps will also help visitors and search engines. I like to keep the sitemap easy and tiered up by specific sections of the website.

Google Map Localization

Google Map Localization

A big thing to take into consideration is location, and quick contact. Usually when someone doesn’t have a direct contact of a business, they Google it on their mobile phone. They either get the phone number directly from Google or go to the website. Make sure your phone number and contact information is visible and intuitive to find. At Karma Snack, our clients come and meet us at our location, like several other businesses. We placed a “red directions” pin for a map location in our navigation. So when a visitor clicks on the Red Pin, it launches Google Maps for them with our coordinates in place, they can take it from there. We attempted to make it very easy for visitors to contact and find us.

Website Speed

Remember speed is very important, most people will be using your mobile site on their cell phone data plans, so I made it a top priority to that each page is under 300K in size and still stylish. All scripts are Asynchronous, and we made sure database calls are done only when absolutely necessary.

Utilizing’s Web Page Speed (, I was able to achieve only 18 http request for the home page, and under 262K size in download speed. I love speed, because it creates a better user experience.

Quick Comparison of speed:
Mobile Karma Snack – 18 http requests at 262K download size
Regular Karma Snack – 28 http requests at 471K download size

Mobile Accessibility

I’ll admit, I’m from the old school, and I go W3C validating crazy. It helps with accessibility for disable person (blind, deaf, etc), and it also helps in making sure your website looks exactly the same on every browser and operating system.

Utilizing HTML5, and our new Architect, and Also using Google PageSpeed test I have the following results for Performance:

Mobile Karma Snack – 92 / 100 score
Regular Karma Snack – 95 / 100 score

These Google+, and Facebook plugins are really killing my 100 out of 100 score, which kinda of irritates me, but I digress.

Search Engines and Search Localization

Another key thing to getting mobile traffic, is getting on mobile search engines. Wait what? Yeah, if you notice Google gives different rankings for mobile and desktop. Google also localizes rankings. There were times I would notice certain web pages were not ranking for the mobile version of the exact terms. I had to do some serious digging, and it turns out there are special sitemap annotations for mobile now.

Regular sitemap Annotations:


Mobile Sitemap Annotations:


Check out or Google ( for more information.

Microdata – Rich Text Snippets

Microdata ( or

Microdata - Rich Media

Microdata - Rich Media

This would be the perfect time to implement your Microdata annotations as well. I found out that you can take it to the max by utilizing Rich Media Snippets to add photos, and your Google + profiles to their search results. Google even has a Rich Snippets Testing Tool ( to help web developers out. You can even add star rating with proper verification and annotations. I’ll discuss this in another topic, but jumping on board of this through is going to be crucial for the survival of online businesses in the coming weeks.


Matt Cutts Google Panda

Matt Cutts Google Panda

People, I need you to understand this, I said in the next coming WEEKS. These are not decisions where you can delay 1 or 2 months because the board of directors has to approve of this and that. If you want to survive Google’s updates you need to implement every single part of the online marketing methodology we give to clients at Karma Snack. Why? Have you heard of Google Panda? Yes, of course you have, well a little kept secret at Karma Snack we kept from the industry is that none of our clients were de-ranked, de-index, or lost rankings when the updates occurred. In fact a majority of them moved up in rankings. It’s pretty simply, you need to have a solid foundation for your online marketing. If you go with Karma Snack or any other company, make sure they give you a solid foundation. Businesses can’t afford to have their rankings lost because their web developer doesn’t know this and that about mobile. It’s important. It helps rankings, and is a critical component for the user’s experience.

Also, there are some Google updates coming up that are going to effect a lot of websites, you should check out:

It’s Not About Just Backlinks Anymore

There is really no more waiting for online marketing. If you are still just thinking about creating backlinks and think that is what’s going to get you results you are completely in 2002 mode. I’ve put together a quick bullet-point guide on what you need to survive the coming Google updates and Internet.

1) Mobile Friendly or Enabled Website – By 2014, Mobile internet visitors will over take desktop computer traffic. You no longer need to be in front of a computer to search or find what you need.

2) Fresh Articles and Content – Search Engines, and especially Google take a strong consideration with website which have fresh content. Indexing your website within 10 minutes of publishing an article happens all the time. Get content, and keep creating quality relevant content. This means content people want to read.

3) Website Speed – Google takes Speed into consideration for rankings! They said they do, so make your choice – do you want a heavy slow website with flash (seriously – Flash???), or fast loading and a better user experience?

4) Usability – Did you know what 80% of disabled people are head of their household? Why are you not W3C validating your website?

5) compatibility – whether it is sitemaps, or Microdata, get with the program if you want traffic from the search engines.

6) Solid Online Marketing Plan – Get engaged, don’t spam website through blog comments, get engaged on social websites, and web 2.0 platforms. Create content, buzz, discussions, and get rankings. 70% of your website traffic should be coming from non-search engine sources.

Social Media Traffic

Social Media Traffic

If a business has over 70% of their customers coming from one source, what happens if that source decides to drop them? That’s what most website owners are doing when they only concentrate on Google rankings, Google this, Google that. Screw Google, get traffic from multiple sources, social media, social networking, social bookmarking, forums, Linkedin, and more. It is very critical to go where you TARGET audiences is online.

If you are a website designer and looking for business, go to small business web forums, find out where business owners are and talk to them. If you sell dolls, go to forums for doll and toy enthusiasts and engage there. Just go and drive traffic back to your site!

7) Take your website and your mobile website seriously! If you create a mobile site make sure it is truly user friendly, and has options for feedback from people!

Good luck my friends, if you have any questions drop me a line or comment below, and I will get back to you as soon as possible.