As most SEOs are aware by now, there are three main techniques for serving mobile website content: responsive design, adaptive design (also called dynamic serving), and separate mobile URLs. While it’s easy to identify separate mobile URLs just by looking at your browser’s address bar, telling responsive and adaptive sites apart can take a little more digging around. In my mobile workshops with Shari Thurow at SMX West and SMX Advanced earlier this year, many of the participants were confused as to how to tell responsive and adaptive mobile configurations apart. So, I went through the exercise that I’m going to describe today. Hopefully, it will help some of you make the distinction. If you’re not sure if the site you’re looking at is responsive or adaptive, ask yourself these questions: Does it change shape when you resize your browser from a desktop computer?Responsive sites are meant to change layout based on browser window size (regardless of device), while adaptive sites detect when you are on a mobile device and present different HTML accordingly. Thus, if you know that a site doesn’t use separate URLs for their mobile configuration, you can often tell responsive and adaptive apart by visiting the site on desktop and seeing what happens when you resize your browser window. Want to test this out? Take the following steps:
Can you find the word “responsive” or “@media” in the home page source code?Responsive sites have specific elements within their HTML source code that adaptive sites do not. To check for these elements, take the following steps:
Does the site display different content or a different layout on a mobile device (or when you use a mobile user-agent like Googlebot smartphone)?Adaptive sites generate different HTML for a page based on the user’s device, regardless of screen size. That means that if you are looking at an adaptive site on a mobile device — even one with a large screen — you’ll still be served specific mobile content. We can check for adaptive mobile pages via desktop browser. This is achieved by using a browser extension that allows you to view a site as though you are using a mobile device. Here’s how to test an adaptive page with a user-agent switcher extension on Chrome:
Additional questionsHere are a few related questions I’ve gotten on the subject that may also be of interest: Can you use Chrome Developer Tools to tell adaptive from responsive sites?Yes, but be sure to clear your browsing history before toggling device type from Desktop to Mobile and vice-versa. Then, follow this procedure:
Can a site be adaptive and responsive at the same time?Yes. Sometimes this is called RESS or REsponsive with Server Side Elements. In these cases, the layout is fluid, but server side elements may be used to serve smart banners for app downloads or change the text on the page. Zillow.com is currently like this. If you use a desktop agent to access the site you can resize the browser and the site is responsive, just like merriam-webster.com. But if you access the site from a smartphone user agent detection is used to provide additional device-specific elements like smart banners to encourage app downloads. Likewise, at Vivid Seats our desktop site doesn’t resize, but if you access the adaptive site from a mobile user agent it does. So, our adaptive site is also responsive. You can also have adaptive and responsive pages on the same site. At Vivid Seats, we use responsive pages for event pages, as search behavior doesn’t vary much across devices, but adaptive for certain category pages where we noticed a difference in search behavior that we want to address on the page. The post How to tell whether a site is adaptive or responsive appeared first on Search Engine Land. via Search Engine Land http://ift.tt/2eRbozc
0 Comments
Leave a Reply. |
Archives
April 2024
Categories |