"Mobile-friendly" Explained
It's getting more important by the day to have a web site that works well on phones and tablets. Back in May of last year, Google announced that for the first time ever, more searches were originating from mobile devices than laptop or desktop computers. At the same time, it announced that it in search results on mobile devices, it would be prioritizing web sites that are mobile-friendly. In other words, if your site works well on mobile, you'll rank higher in search results on phones and tablets.
So when it comes to mobile, there are basically three types of sites.
First, basic "fixed-width" sites simply shrink all the content proportionally to fit on a given screen size. When you look at one on a phone, you see exactly the same thing you do on a computer — just really, really small. That means lots of pinching and scrolling to use the site. Here's a good example. Looks good on a PC, but tough to navigate on a phone.
Second, sites that have an associated mobile-only version detect when a user is on a mobile device and send them to a companion site that's designed specifically for mobile. It's usually a stripped-down version with just the basics, often with a link at the bottom that says "Full Site" or something like that. This approach is fine for contact information, business hours, and so on, but not ideal if you're trying to make the case for your product or service. It's also problematic since it means maintaining two separate sites. Here's a good example. And for comparison, take a look at their full site on a computer.
Third, so-called "responsive design" senses the user's screen size and adjusts the size and layout of text and photos accordingly. You see all the same content as you would on a computer; it's just arranged in a way that's easy to read and navigate on a phone. Although still not perfect (the shifting of content means some design compromises), it's by far the best approach at the moment. Here's an example. It retains the look and images of the desktop site while automatically rearranging and re-sizing content for easy navigation and reading on smaller displays.