Working With Responsive Themes

Working With Responsive Themes

With the release of the Default Responsive theme, this site now features two mobile-friendly templates for use in your Associate-O-Matic stores (the other template is Varius). As mentioned in the text for the DR theme, it has passed the mobile-friendly test available at Google’s Webmaster Tools (

But does this mean your site will automatically be mobile/tablet ready if you use this template? Maybe. There are some external factors that you may need to pay attention to in order to make sure you’re really mobile-friendly:

– HTML: The use of custom HTML, with its rigid <table> layouts, can make a site unresponsive. HTML was designed to only look good in desktop displays, usually the bigger the better. With the trend to smaller screen sizes, some of the absolute structuring of this approach can cause serious problems. You may need to find a way to convert your customizations to the friendlier fluid approach of CSS. If you’re using a custom header file, you will need to make sure it contains this command in the <head> section:

<meta name=”viewport” content=”width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no”>

– Ads/Scripts: If you’re using third-party ads or scripts ( like sliders or carousels, etc.) in custom boxes, they might have inbuilt fixed widths. If they give you problems, you may need to contact the content provider for a solution.

– Custom graphics: The Default Responsive theme should resize most header graphics, but because of the wide variety available, it’s impossible to say with 100% certainty that you won’t have any problems with a header or background image. As with HTML, you may need to experiment with different sizes or options to ensure the best possible look on as wide a variety of screen sizes possible.

– Breakpoints: Every responsive website has breakpoints, which are defined screen sizes that determine what behaviour the site will display. So (for example) from 200  to 599 pixels wide, you might get a certain layout. From 600 to 799 another, and from 800 on up still another. This explains why rotating a tablet or mobile from landscape to portrait view (wider vs. taller) can give you a different look. Because there are now so many various devices available with a wide range of screen sizes, you might find that some layouts on some screens may appear odd to you. Years ago, web designers would code on into the night trying to make a site look good (or at least close) on multiple browsers (FireFox, Opera, Safari, Chrome, Internet Explorer 4, 5, 6, 7…). Nowadays they lose sleep trying to determine the optimal breakpoints. The upshot is that users with a first-generation Android device or an old Blackberry or IE7 are not going to see what the rest of the world sees. The lines have to be drawn somewhere.

So if you use the Default Responsive theme to convert your AOM site, be aware of these potential pitfalls. Try to view your site in as many devices as possible and decide if it’s time to redesign that old clunky custom header with CSS, or change out the ads. Then you’ll be truly mobile-ready.

Latest Themes

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.