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
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?
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 http://m.karmasnack.com
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
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.
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 WebSiteOptimization.com’s Web Page Speed (http://www.websiteoptimization.com/services/analyze/), 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
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 Schema.org or Google (http://support.google.com/webmasters/bin/answer.py?hl=en&answer=34648) for more information.
Microdata – Rich Text Snippets
Microdata (http://support.google.com/webmasters/bin/answer.py?hl=en&answer=176035) or Schema.org
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 (http://www.google.com/webmasters/tools/richsnippets
) 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 Schema.org is going to be crucial for the survival of online businesses in the coming weeks.
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: http://googlewebmastercentral.blogspot.com/2012/04/another-step-to-reward-high-quality.html
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) Schema.org 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
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.