I finally finished building a mobile site for Salsa Vida SF, which was definitely a learning experience. Since responsive design sucks I used dynamic serving for the mobile site (using the Any Mobile Theme Switcher plugin), and basically rebuilt the site from scratch, allowing me to completely re-optimize the site experience for mobile.
One of the things that Google recommends is adding the Vary HTTP header, which helps Google figure out that you serve different content based on the user-agent. This is something I’ve never had to do in all my years of web design, but luckily WordPress makes it super simple.
All you need to do is paste the following code into the funcions.php file of both your mobile and desktop theme:
function add_vary_header($headers) {
$headers['Vary'] = 'User-Agent';
return $headers;
}
add_filter('wp_headers', 'add_vary_header');It took me a while to find the code snippet, but I was finally able to add it here.
Anyway, hope this is helpful to you and should be enough to get your dynamically served mobile site up-and-running!
Hi Takeshi,
Thanks for the post.
You mention the Any Mobile Theme Switcher plug-in allowed you to have a different mobile version of your website be served to mobile users. How did you create the mobile site? Did you have a mobile theme? If so, was it tricky creating content for two themes and audiences (i.e. desktop vs. mobile)? Were both themes on the same WP Install?
If so, I thought the content/html is the same regardless of the theme so I’m confused how you can have 2 different themes on the same install…
Thanks.
Hi Tyler,
Any Mobile Theme Switcher comes with a mobile theme. I used that as the basis for my mobile site, and customized it to fit my needs. Basically what Any Mobile Theme Switcher does is switches the theme in use on the site based on the device being used. So it’s switching between two separate themes for the same site.
As far as content, the content on the mobile & desktop are nearly identical since it is being pulled from the same database. However, the presentation of the content is drastically different, since the mobile site is using a completely different theme. For some sections of my site, I have changed the functionality completely so that the site works better on mobile.
Hope that makes sense!
Hmm, the plug-in FAQs say:
“Do i get a pre build mobile theme with this plugin ?
No, this is just a theme switcher plugin and we don’t include any mobile theme like other plugin does.”
So, maybe they’ve gotten rid of that…?
My mistake! I used the theme from WordPress Mobile Pack:
https://wordpress.org/plugins/wordpress-mobile-pack/
This theme is great Takeshi.
Thank you!