Friday 1 February 2013
It's ScuttleButton Time!
Tips For Lowering A Mortgage Payment
In Over Your Head - How to Drive Down Your Debt
25 Killer Combos for Google's Site: Operator
Posted by Dr. Pete
There’s an app for everything – the problem is that we’re so busy chasing the newest shiny toy that we rarely stop to learn to use simple tools well. As a technical SEO, one of the tools I seem to never stop finding new uses for is the site: operator. I recently devoted a few slides to it in my BlueGlassX presentation, but I realized that those 5 minutes were just a tiny slice of all of the uses I’ve found over the years.
People often complain that site:, by itself, is inaccurate (I’ll talk about that more at the end of the post), but the magic is in the combination of site: with other query operators. So, I’ve come up with two dozen killer combos that can help you dive deep into any site.
1. site:example.com
Ok, this one’s not really a combination, but let’s start with the basics. Paired with a root domain or sub-domain, the [site:] operator returns an estimated count of the number of indexed pages for that domain. The “estimated” part is important, but we’ll get to that later. For a big picture, I generally stick to the root domain (leave out the “www”, etc.).
Each combo in this post will have a clickable example (see below). I'm picking on Amazon.com in my examples, because they're big enough for all of these combos to come into play:
You’ll end up with two bits of information: (1) the actual list of pages in the index, and (2) the count of those pages (circled in purple below):
.gif)
I think we can all agree that 273,000,000 results is a whole lot more than most of us would want to sort through. Even if we wanted to do that much clicking, Google would stop us after 100 pages. So, how can we get more sophisticated and drill down into the Google index?
2. site:example.com/folder
The simplest way to dive deeper into this mess is to provide a sub-folder (like “/blog”) – just append it to the end of the root domain. Don’t let the simplicity of this combo fool you – if you know a site’s basic architecture, you can use it to drill down into the index quickly and spot crawl problems.
3. site:sub.example.com
You can also drill down into specific sub-domains. Just use the full sub-domain in the query. I generally start with #1 to sweep up all sub-domains, but #3 can be very useful for situations like tracking down a development or staging sub-domain that may have been accidentally crawled.
4. site:example.com inurl:www
The "inurl:" operator searches for specific text in the indexed URLs. You can pair “site:” with “inurl:” to find the sub-domain in the full URL. Why would you use this instead of #3? On the one hand, "inurl:" will look for the text anywhere in the URL, including the folder and page/file names. For tracking sub-domains this may not be desirable. However, "inurl:" is much more flexible than putting the sub-domain directly into the main query. You'll see why in examples #5 and #6.
5. site:example.com -inurl:www
Adding [-] to most operators tells Google to search for anything but that particular text. In this case, by separating out "inurl:www", you can change it to "-inurl:www" and find any indexed URLs that are not on the "www" sub-domain. If "www" is your canonical sub-domain, this can be very useful for finding non-canonical URLs that Google may have crawled.
6. site:example.com -inurl:www -inurl:dev -inurl:shop
I'm not going to list every possible combination of Google operators, but keep in mind that you can chain most operators. Let's say you suspect there are some stray sub-domains, but you aren't sure what they are. You are, however, aware of "www.", "dev." and "shop.". You can chain multiple "-inurl:" operators to remove all of these known sub-domains from the query, leaving you with a list of any stragglers.
7. site:example.com inurl:https
You can't put a protocol directly into "site:" (e.g. "https:", "ftp:", etc.). Fortunately, you can put "https" into an "inurl:" operator, allowing you to see any secure pages that Google has indexed. As with all "inurl:" queries, this will find "https" anywhere in the URL, but it's relatively rare to see it somewhere other than the protocol.
8. site:example.com inurl:param
URL parameters can be a Panda's dream. If you're worried about something like search sorts, filters, or pagination, and your site uses URL parameters to create those pages, then you can use "inurl:" plus the parameter name to track them down. Again, keep in mind that Google will look for that name anywhere in the URL, which can occasionally cause headaches.
Pro Tip: Try out the example above, and you'll notice that "inurl:ref" returns any URL with "ref" in it, not just traditional URL parameters. Be careful when searching for a parameter that is also a common word.
9. site:example.com -inurl:param
Maybe you want to know how many search pages are being indexed without sorts or how many product pages Google is tracking with no size or color selection – just add [-] to your "inurl:" statement to exclude that parameter. Keep in mind that you can combine "inurl:" with "-inurl:", specifically including some parameters and excluding others. For complex, e-commerce sites, these two combos alone can have dozens of uses.
10. site:example.com text goes here
Of course, you can alway combine the "site:" operator with a plain-old, text query. This will search the contents of the entire page within the given site. Like standard queries, this is essentially a logical [AND], but it's a bit of a loose [AND] – Google will try to match all terms, but those terms may be separated on the page or you may get back results that only include some of the terms. You'll see that the example below matches the phrase "free Kindle books" but also phrases like "free books on Kindle".
11. site:example.com “text goes here”
If you want to search for an exact-match phrase, put it in quotes. This simple combination can be extremely useful for tracking down duplicate and near-duplicate copy on your site. If you're worried about one of your product descriptions being repeated across dozens of pages, for example, pull out a few unique terms and put them in quotes.
12. site:example.com/folder “text goes here”
This is just a reminder that you can combine text (with or without quotes) with almost any of the combinations previously discussed. Narrow your query to just your blog or your store pages, for example, to really target your search for duplicates.
13. site:example.com this OR that
If you specifically want a logical [OR], Google does support use of "or" in queries. In this case, you'd get back any pages indexed on the domain that contained either "this" or "that" (or both, as with any logical [OR]). This can be very useful if you've forgotten exactly which term you used or are searching for a family of keywords.
Edit: Hat Tip to TracyMu in the comments - this is one case where capitalization matters. Either use "OR" in all-caps or the pipe "|" symbol. If you use lower-case "or", Google could interpret it as part of a phrase.
14. site:example.com “top * ways”
The asterisk [*] can be used as a wildcard in Google queries to replace unknown text. Let's say you want to find all of the "Top X" posts on your blog. You could use "site:" to target your blog folder and then "Top *" to query only those posts.
Pro Tip: The wild'card [*] operator will match one or multiple words. So, "top * questions" can match "Top 40 Books" or "Top Career Management Books". Try the sample query above for more examples.
15. site:example.com “top 7..10 ways”
If you have a specific range of numbers in mind, you can use "X..Y" to return anything in the range from X to Y. While the example above is probably a bit silly, you can use ranges across any kind of on-page data, from product IDs to prices.
16. site:example.com ~word
The tilde [~] operator tells Google to find words related to the word in question. Let's say you wanted to find all of the posts on your blog related to the concept of consulting – just add "~consulting" to the query, and you'll get the wider set of terms that Google thinks are relevant.
17. site:example.com ~word -word
By using [-] to exclude the specific word, you can tell Google to find any pages related to the concept that don't specifically target that term. This can be useful when you're trying to assess your keyword targeting or create new content based on keyword research.
18. site:example.com intitle:”text goes here”
The "intitle:" operator only matches text that appears in the <TITLE></TITLE> tag. One of the first spot-checks I do on any technical SEO audit is to use this tactic with the home-page title (or a unique phrase from it). It can be incredibly useful for quickly finding major duplicate content problems.
19. site:example.com intitle:”text * here”
You can use almost any of the variations mentioned in (12)-(17) with "intitle:" – I won't list them all, but don't be afraid to get creative. Here's an example that uses the wildcard search in #14, but targets it specifically to page titles.
Pro Tip: Remember to use quotes around the phrase after "intitle:", or Google will view the query as a one-word title search plus straight text. For example, "intitle:text goes here" will look for "text" in the title plus "goes" and "here" anywhere on the page.
20. intitle:”text goes here”
This one's not really a "site:" combo, but it's so useful that I had to include it. Are you suspicious that other sites may be copying your content? Just put any unique phrase in quotes after "intitle:" and you can find copies across the entire web. This is the fastest and cheapest way I've found to find people who have stolen your content. It's also a good way to make sure your article titles are unique.
21. “text goes here” -site:example.com
If you want to get a bit more sophisticated, you can use "-site:" and exclude mentions of copy on any domain (including your own). This can be used with straight text or with "intitle:" (like in #20). Including your own site can be useful, just to get a sense of where your ranking ability stacks up, but subtracting out your site allows you to see only the copies.
22. site:example.com intext:”text goes here”
The "intext:" operator looks for keywords in the body of the document, but doesn't search the <TITLE> tag. The text could appear in the title, but Google won't look for it there. Oddly, "intext:" will match keywords in the URL (seems like a glitch to me, but I don't make the rules).
23. site:example.com ”text goes here” -intitle:"text goes here"
You might think that #22 and #23 are the same, but there's a subtle difference. If you use "intext:", Google will ignore the <TITLE> tag, but it won't specifically remove anything with "text goes here" in the title. If you specfically want to remove any title mentions in your results, then use "-intitle:".
24. site:example.com filetype:pdf
One of the drawbacks of "inurl:" is that it will match any string in the URL. So, for example, searching on "inurl:pdf", could return a page called "/guide-to-creating-a-great-pdf". By using "filetype:", you can specify that Google only search on the file extension. Google can detect some filetypes (like PDFs) even without a ".pdf" extension, but others (like "html") seem to require a file extension in the indexed document.
25. site:.edu “text goes here”
Finally, you can target just the Top-Level Domain (TLD), by leaving out the root domain. This is more useful for link-building and competitive research than on-page SEO, but it's definitely worth mentioning. One of our community members, Himanshu, has an excellent post on his own blog about using advanced query operators for link-building.
Why No Allintitle: & Allinurl:?
Experienced SEOs may be wondering why I left out the operators "allintitle:" and "allinurl:" – the short answer is that I've found them increasingly unreliable over the past couple of years. Using "intitle:" or "inurl:" with your keywords in quotes is generally more predictable and just as effective, in my opinion.
Putting It All to Work
I want to give you a quick case study to show that these combos aren't just parlor tricks. I once worked with a fairly large site that we thought was hit by Panda. It was an e-commerce site that allowed members to spin off their own stores (think Etsy, but in a much different industry). I discovered something very interesting just by using "site:" combos (all URLs are fictional, to protect the client):
(1) site:example.com = 11M
First, I found that the site had a very large number (11 million) of indexed pages, especially relative to its overall authority. So, I quickly looked at the site architecture and found a number of sub-folders. One of them was the "/stores" sub-folder, which contained all of the member-created stores:
(2) site:example.com/stores = 8.4M
Over 8 million pages in Google's index were coming just from those customer stores, many of which were empty. I was clearly on the right track. Finally, simply by browsing a few of those stores, I noticed that every member-created store had its own internal search filters, all of which used the "?filter" parameter in the URL. So, I narrowed it down a bit more:
(3) site:example.com/stores inurl:filter = 6.7M
Over 60% of the indexed pages for this site were coming from search filters on user-generated content. Obviously, this was just the beginning of my work, but I found a critical issue on a very large site in less than 30 minutes, just by using a few simple query operator combos. It didn't take an 8-hour desktop crawl or millions of rows of Excel data – I just had to use some logic and ask the right questions.
How Accurate Is Site:?
Historically, some SEOs have complained that the numbers you get from "site:" can vary wildly across time and data centers. Let's cut to the chase: they're absolutely right. You shouldn't take any single number you get back as absolute truth. I ran an experiment recently to put this to the test. Every 10 minutes for 24 hours, I automatically queried the following:
- site:seomoz.org
- site:seomoz.org/blog
- site:seomoz.org/blog intitle:spam
Even using a fixed IP address (single data center, presumably), the results varied quite a bit, especially for the broad queries. The range for each of the "site:" combos across 24 hours (144 measurements) was as follows:
- 67,700 – 114,000
- 8,590 – 8620
- 40 – 40
Across two sets of IPs (unique C-blocks), the range was even larger (see the "/blog" data):
- 67,700 – 114,000
- 4,580 – 8620
- 40 – 40
Does that mean that "site:" is useless? No, not at all. You just have to be careful. Sometimes, you don't even need the exact count – you're just interested in finding examples of URLs that match the pattern in question. Even if you need a count, the key is to drill down. The narrowest range in the experiment was completely consistent across 24 hours and both data centers. The more you drill down, the better off you are.
You can also use relative numbers. In my example above, it didn't really matter if the 11M total indexed page count was accurate. What mattered was that I was able to isolate a large section of the index based on one common piece of site architecture. Assumedly, the margin of error for each of those measurements was similar – I was only interested in the relative percentages at each step. When in doubt, take more than one measurement.
Keep in mind that this problem isn't unique to the "site:" operator – all search result counts on Google are estimates, especially the larger numbers. Matt Cutts discussed this in a recent video, along with how you can use the page 2 count to sometimes reduce the margin of error:
The True Test of An SEO
If you run enough "site:" combos often enough, even by hand, you may eventually be greeted with this:
If you managed to trigger a CAPTCHA without using automation, then congratulations, my friend! You're a real SEO now. Enjoy your new tools, and try not to hurt anyone.
Sign up for The Moz Top 10, a semimonthly mailer updating you on the top ten hottest pieces of SEO news, tips, and rad links uncovered by the Moz team. Think of it as your exclusive digest of stuff you don't have time to hunt down but want to read!
Thursday 31 January 2013
How To Stand Apart From Your Competition
Tips for Getting the Most Affordable Car Loans
RIM No More: Renamed BlackBerry Launches Overhauled OS, Two New Phones
Staffing Agencies in Calgary to Fill in CA's Labour Shortage
Beyonce Teases Super Bowl Halftime Show in Rehearsal Video
A sneak peek at Super Bowl halftime show performance shows rehearsal footage, revealing dance moves that hint at the songs Beyonce might perform.
More About: beyonce, celebrities, Entertainment, Music, Super Bowl
The Controversy Surrounding Hagel's Confirmation
Game on! | Developer Profile: The Voxel Agents Make Puzzlers
Monitor Your Small Business With These 4 Valuable Tips
FOX Launches Complete Second Screen Experience On The Tablet
LAS VEGAS — Television viewers’ desire for second screen content is on the rise and Fox has embraced this desire with the launch of FOX NOW, a dedicated second screen experience on iPhone, iPad, Xbox, Samsung Connected TVs, Windows 8 tablets and PCs. At the 2nd Screen Summit at CES, Hardie Tankersley, VP Digital Platforms at Fox Broadcasting, spoke with us about the launch of this new app and its functionality. The FOX NOW app currently includes second screen content for six Fox shows every week, incluging New Girl, American Idol, Bones, The Mindy Project and American Dad. Tankersley explains that this second screen content is "customized content produced for that show, by that show," and includes everything from behind-the-scenes photos and videos to fun interviews, polls and quizzes, Twitter streams and more. There is also a dedicated app for American Idol, which allows users to vote for their favorite contestants directly through the application. Tankersley says, "We’re doing lots of different stuff just to see what people are interested in and what we can get engagement with. It’s just a very early step, but we think there’s opportunity here." Megan O’Neill
3 Ways To Activate People's Desire For Your Products
The Pros and Cons of Computerized Maintenance Management Systems
Wednesday 30 January 2013
Best Money Saving Ideas - During Your Time of Debt
How to Resolve Obstacles to Leadership Career Development
Half a Million DVDs of Data Stored in Gram of DNA
What to Look For When You Invest in a Business
Concern Over Bing Crawling AdWords Ads
Why The Referral System Is Valuable For Your Business?
Successful Strategies for Your 2013 Job Search
Build Some "Culture Muscle" in 2013
How to Get a Quick Home Loan Approval
Why You Need to Take a Critical Illness Cover
Mortgage Interest Rates for FHA VA and HARP 2.0 Programs
Sick Of Your Job? Start Making Money From Home!
Tuesday 29 January 2013
Getting a Security System for Your Business
Katrina's scars harder to see as Super Bowl looms
Launching Your Career With a Degree in Computer Science
National Zoo Orangutans Turn High-Tech with Apps for Apes - National Zoo| FONZ
Fitness Wearables: Only 4 Percent of U.S. Adults Actually Want ?Em
Better Business Control By Mastering The 3 Types Of Costs
Sen. Robert Menendez is about to assume a more powerful role in Washington
3 Best Tips for Repaying Off Payday Loans in a Jiffy
'Private Practice' Star Taye Diggs Stops Home Invader From Breaking Into His House!
Don't mess with Taye Diggs! The hot actor just proved he can definitely hold his own!
The Private Practice star and his wife Idina Menzel attended the SAG Awards and then came home to a man breaking into their garage People reports.
OK! GALLERY: SEE WHO WERE THE HOTTEST GUYS AT THE SAG 2013 AWARDS
"The suspect tried to run away, but [Taye] chased him down the street and was able to detain him until police arrived," LAPD spokesman Richard French says. "At this time, I don't know exactly what he did to the suspect to detain him."
The intruder has been identified as Hassan Juma, 20 and was arrested and charged with burglary.
He is currently in custody and bail has been set at $50,000.
What do you think of Taye chasing after the man breaking into his home? Tell us @OKMagazine!
RELATED NEWS:
WHAT A HERO! LL COOL J CAPTURES INTRUDER IN HIS HOME
Utilize Plastic Shopping Bags In Different Ways
Monday 28 January 2013
Facebook Ads 101
Debt Freedom: What To Do Now?
Finding The Right Kind Of UK Business Broker To Sell Your Business
The Root Causes of Credit Card Debt
The Benefits of Payroll Debit Cards for Unbanked Employees
Why Are Forex Forums Important
The SEO of Responsive Web Design
Posted by Kristina Kledzik
Will Critchlow announced back in November that Distilled's blog was updated with a new responsive design, but it occurred to me recently that we never went into the specifics of why responsive web design is so great. Responsive design has been a hot topic in online marketing for the past few months, but is it really going to become an industry standard?
Short answer: yep.
Responsive web design means that you don't have separate mobile, tablet, and PC versions of your site: the site adapts to whatever size screen it's being displayed on. Regardless of what device a visitor is using to access your site, they'll see all of the content you have to offer (no more partial-content mobile versions of sites) and they'll see it in readable way.
With a 55% increase in smartphone subscriptions in 2012 alone, responsive web design is the future of online marketing.
How does it work?
Sounds too good to be true, doesn't it? It all started with a fairly simple theory from Ethan Marcotte in a 2010 article titled "Responsive Web Design." Rather than creating a single webpage that is 800px across and centers itself on the screen, responsive webpages are composed of elements that size, shape, and place themselves based on the width of the browser screen. Elements determine the screen size using CSS media queries.
Let's start with a simple example on a grid, using 9 rectangular elements labeled A–I. On a small screen, like a tablet or an older computer with fewer pixels, the elements would display themselves in a 3 x 3 grid:
.PNG)
When the screen is wider, those elements can spread out:
When it’s narrower, they can stack:
Now, here’s a real life, complex, and, might I say, ingenious example. Microsoft’s website uses these sections:
When the screen gets smaller, elements stack differently:
For a more interactive example, go to www.microsoft.com and have some fun changing the browser screen.
In their design, Microsoft keeps all of the elements from the desktop version of the page to view on other devices. But one of the biggest differences between desktop sites and mobile sites is that mobile sites just don’t have room or the browser memory to have so much content on one page. For example, Smashing magazine gets rid of the extra stuff as your screen size gets smaller:
Here is their desktop view:
The full-sized page has two levels of navigation on the left, the main content in the middle, and search and ads on the right. It centers the main content in the middle, where you’ll be looking, but makes use of the ample width of the desktop screen.
Moving on to the iPad-sized tablet view:
When the screen doesn’t have as much room on either side, Smashing Magazine keeps the ads and search on the right, but it moves the navigation to the top in a clever way that is noticeable, but doesn’t take up too much space.
Here's their Kindle Fire-sized tablet view:
The ads were sacrificed as screen space became too valuable. Search was moved to the top, so that second tier of navigation was moved to the side to make sure the main content didn’t start too low on the page.
And now, onto mobile:
On the mobile view, the ads are still gone, along with the share buttons. The navigation has changed from a constant element on the page to a small drop down at the top. The search bar was put in the space available once the top navigation was gone.
As you can see, responsive web design gives you an amazing amount of control. With some creativity, a responsive web design can convert almost anything from PC-optimized to mobile-optimized, to anything in between.
Why responsive design is good for SEO
So now you know that responsive design is a clever idea that, with the right set up, will cut down on web maintenance and content creation. But how does that help SEO?
Usability
Google wants to send visitors to the sites that they want to see. When searchers navigate to your site and immediately return to search engine results pages, Google makes a note that your site might not be the best choice for that search term.
If you have a mobile site that has less content or looks significantly different than your regular site, you’ll frustrate return visitors who are looking for something they found on the desktop version. If you don’t have a mobile site at all, 61% of visitors will return to Google to find a site that is easily readable. Either way, your bounce rate will rise and your rankings will drop. With a responsive web design, visitors will get all the content they want, in a format they can read.
Duplicate content
Don’t worry, a mobile site with the same content as the main site won’t be hit by Panda. But you’ll still have the same content on two places on the web, which is bothersome for you and could bring visitors to the wrong version of your site. A responsively-designed website means that content is only in one place on the Internet.
Ranking for mobile searches
Google has said that it ranks sites optimized for mobile higher in mobile searches. Google recommends responsive web design, meaning your responsive designed site will rank as well on mobile search as a site designed specifically for mobile. That’s especially useful for...
Link building
With a responsive web design, a link to your main site is a link to your mobile site as well. Mobile sites are still new, so your competition in mobile search is going to have significantly fewer backlinks. A responsively-designed website will have the backlinks of your original site, even while competing for mobile visitors. It’ll give you an instant edge over there. And, as mobile usage rises and webmasters start linking to mobile sites, your backlinks from both mobile and desktop sites will combine for a stronger backlink profile.
Early adopter recognition
Making your site responsive now, when the topic is hot but largely unused, will get you noticed. Here are a few great examples:
- http://blogs.adobe.com/digitalmarketing/digital-marketing/mobile/responsive-web-design-and-web-analytics/
- http://inspirationfeed.com/inspiration/websites-inspiration/60-examples-of-responsive-website-design/
- http://www.clicknewz.com/5984/benefits-of-responsive-web-design-examples/
- And, of course, Microsoft and Smashing Magazine from this post.
Results
As you can probably guess, if your site was previously unoptimized for tablet and/or mobile, you’ll see a decreased bounce rate from those devices. We’ve seen the positive effects spread into the main site as well. On a fellow Distiller’s site, implementing responsive web design increased visits by over 400% in a month:
That’s an extreme example; the switch to responsive web design on Distilled’s blog didn’t have the same effect. However, results like this show that, in the right situation, responsive web design could bring amazing results.
The cons
Responsive web design isn’t the Holy Grail of online marketing, though; there are some disadvantages you’ll want to mull over before you decide to take the plunge.
Set up time
Moving to a responsive web design will take a significant amount of time from both your design team and your development team. It’ll probably take longer than most redesigns you’ve been through since both teams will have to learn a completely new concept before they can implement it. On the plus side, when other sites start upgrading to responsive web design, you’ll be ahead of the curve.
Large pages
If you have a lot of content on your desktop pages, responsive design means that all of that content has to be loaded on mobile pages. Can you imagine a poor phone trying to load all of this?
That’s why sites like NYTimes.com and CNN.com have separate mobile versions that only display a small portion of all the articles and links they have on their desktop versions. If you have a site that’s huge like that – and is meant to be huge like that – stick with separate mobile and desktop versions.
Mobile user experience
Since responsive web design confines you to the same pages and content on the mobile and desktop versions, it could limit your options for enhancing user experience. While I pointed out earlier that mobile users want the same content as desktop users, they’re searching on a tiny screen with their fingers rather than a large screen with a mouse and keyboard, so their journey to that same content will feel completely different. If you have a really interactive or complicated site that needs to have different pathways to content, like Facebook, you might want to keep that mobile version of your site so you can have that control.
So, is responsive web design right for your site?
If your site is too large or too complicated and needs a mobile site, you’re probably aware of it (and probably already have an amazing mobile site that shouldn’t be messed with). But, what if you don’t have a mobile site, or have a simple one and don’t know if the switch to a responsive web design is worth it? You’re going to do a little Google Analytics research:
Do I even need a mobile site?
Start by going to the Mobile Overview report, which is a Standard Report in the Audience section under the Mobile drop down. If the number of mobile and tablet visits is under 5% of your total traffic, you probably don’t need to worry about creating a mobile-specific site (yet: this number is only going to grow).
If it’s more than that, click on the Goal Set or Ecommerce metrics set – whichever you use to track conversions – at the top of the page, under the Explorer tab:
Are your desktop visits converting significantly more than mobile visits? If mobile conversion rate is less than half of desktop conversion rate, your site is performing below industry standard, and you need to optimize for mobile visitors.
How does my mobile site look on their screens?
Go to the Standard Reports > Audience > Mobile > Devices and change the primary dimension to “Screen Resolution.” You can change that right above the table, by clicking the Other drop down to the right of the line of other primary dimensions you could use. Try out the 10 most common screen resolutions that are used by your visitors. How does your mobile site look on them? Use Screenfly to see your site on different devices. You might be surprised by how many tablets or large phones are seeing an overly simplified site that isn’t very compelling. Even if you have a mobile site that looks great on 50% of mobile visits, if it looks bad on the other 50%, you should consider responsive web design.
Does my mobile site give visitors what they want?
Look at the mobile bounce rate under Standard Reports > Mobile > Overview. When visitors land on your mobile site, is something making them leave more quickly than on a desktop? Mobile visitors should have roughly the same bounce rate as desktop visitors.
If you have the time, do a full mobile SEO audit to really identify what the mobile version of your site needs to look like. Aleyda Solis wrote up a great mobile audit guide on State of Search.
Your best option: move towards responsive web design slowly
If you’d like to move towards responsive web design slowly or already have a pretty good mobile site out there, consider making your site responsive so that it’s optimized for desktop and tablet, but not mobile just yet. The design will be easier, but you’ll get a first taste of the technical side, and you’ll get better conversions for tablet users (which you probably haven’t optimized for yet).
Ethan Marcotte explains how the coding works in his original article and developers have been creating themes for popular CMSs (for WordPress, for Drupal, and for Joomla).
Be aware that the technical implementation is fairly advanced, and there are a number of small mistakes you should watch out to avoid:
1. Use compressed images
You might have some gorgeous photos that load fine on the desktop version of your site, but those are going to have to be loaded on mobile versions as well. 74% of mobile users will leave after 5 seconds waiting for a page to load, so make sure that you compress your images as much as possible, and use them somewhat sparingly. Smush.it is a great tool for compressing images.
2. Design for all screen sizes
A lot of designers will want to design for one mobile size, one tablet size, and one desktop size, and just make a “responsive” design that snaps the site into a different layout for those standard sizes. But we have large and small cell phones, tablets the size of Kindle Fires to 10” Samsung Galaxy Tabs, and desktop monitors as big as 30”. A responsive design is more about resizing the elements on a page as you have more pixels than it is about snapping one design into another. As designer Stephen Hay says, “Start with the screen small first, then expand until it looks like sh*t. Time to insert a breakpoint!”
3. Always show all content
It might feel overwhelming to find a way to fit all of the content from the desktop version of a page onto a mobile version of a page, but that’s the point of responsive web designs. In the examples described above, the only content that goes away is ads (which users probably didn’t want in the first place) and some navigation (which is replaced by a simpler version of navigation). No actual content is hidden. Mobile visitors want just as much information and just as many options as desktop users do, so don’t deprive them.
4. Optimize for touch
You probably won’t accidentally include an onmouseover JavaScript event on the mobile size of your site, but be aware that tablets can’t hover with their mouse either, and someone on a desktop might be using Windows 8 and want to use touch. Best practice is to make your site completely accessible with touch-only, regardless of the screen size.
5. Test on all browsers
Remember the good old days, when you complained about having to test your website on IE and Firefox? Now you’ve got:
Desktop:
- IE9 for Windows 7
- IE10 for Windows 8 (which doesn’t run Flash)
- Firefox
- Chrome
- Safari
Tablet/Mobile
- Safari
- Default Android browser
- Chrome beta
- Dolphin
- Opera
- Firefox
And those are only the most popular ones. You’ll have to test on all of those, at different screen resolutions, too.
But it’s worth it
Switching over to a responsive web design will be a big challenge, but with the way the industry is moving, it’ll prepare you for the future, and put you a step ahead of your competitors.
Have any of you made the switch? Any advice for those who haven’t?
Sign up for The Moz Top 10, a semimonthly mailer updating you on the top ten hottest pieces of SEO news, tips, and rad links uncovered by the Moz team. Think of it as your exclusive digest of stuff you don't have time to hunt down but want to read!
