Visual Studio Talk Show - Making it mobile friendly

Recently, Google sent an email saying that sites that don't render correctly in mobile devices will be ranked lower in their search results.  My good friend Mario Cardinal tested our Visual Studio Talk Show site hosted on Libsyn and it didn't passed Google test.  Since it is just a simple page with content injected by Libsyn, I was able to quickly modify the HTML and I used Bootstrap to make the site responsive and mobile friendly.

Modifying the page was simple, the only challenge was the width of the images that were too large so I switched divs like this.  I'm not sure if this is the best way so please comment if you have a better way to do this. 

<div class="hidden-xs">
	<p align="center"><img src="http://www.guybarrette.com/VSTS_430px.png" /></p>
</div>
<div class="hidden-sm hidden-md hidden-lg">
	<p align="center"><img src="http://www.guybarrette.com/VSTS_200px.png" /></p>
</div>

To make Google stop complaining about the lack of a viewport, I added:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

I also have hidden the right column because it has too much info for a mobile device.  Anyways, mighty Google now approve the site. 

blog comments powered by Disqus

Page List

Month List