Mobile SEO "Separate URLs" criteria: JQuery, Bootstrap, Foundation, or PureCSS?

[guarriman]

Hi there,

I'm planning to create specific webpages for mobile users, following the 'Separate URLs' criteria provided by Google (https://developers.google.com/webmasters/mobile-sites/mobile-seo/configurations/separate-urls).

The current desktop webpages are made from scratch, without using any framework. However, to build these new mobile-specific webpages, I would like to use a mobile HTML/JS/CSS framework.

I am considering JQuery, Bootstrap, Foundation, and PureCSS. I would like to hear about experiences dealing with different Mobile Frameworks and SEO.

Thank you very much and best regards.

[webcentric]

Save yourself the work and build a single responsive site. Bootstrap makes it easy. Just my two cents.

As for "following the 'Separate URLs' criteria provided by Google" or any suggestion offered by Google, I say,

Whatever! Google has given some good advice about building good sites but most of it is just common sense and I'm not sure any of it will endear you to it's algorithm. Build for your users and let the blessings in the SERPs come as they may, or may not. Just another two cents from the piggy bank.

[guarriman]

Save yourself the work and build a single responsive site. Bootstrap makes it easy.

Thank you very much, webcentric, for your answer. I totally agree with you, and I a big fan of building pages for users. However the desktop design of my webpages was built 10+ years ago, and I do not have enough skills to build a new responsive design from scratch with the same functionalities of the original one.

So the idea of building a mobile design for my mobile users (30%) is more comfortable for me.

Additionally, there are experiences of websites following this approach:
- Wikipedia, with different URLs for desktop (en.wikipedia.org/wiki/Main_Page) and for mobile (en.m.wikipedia.org/wiki/Main_Page)
- EditorialGuy (http://www.webmasterworld.com/google/4729929-4-30.htm)

You could simply build mobile-friendly versions of the pages that matter most in terms of traffic, and use this Google-recommended technique

[developers.google.com...]

We did this with about 300 of our most popular pages, and it's working fine.

If I started a responsive design from scratch I would use Bootstrap. But for a mobile-exclusive design, is Bootstrap the best option (in terms of SEO) as well?

Thank you very much again.

[blend27]

@guarriman

I was in the same boat, well was about a month ago and finally decided to go full speed ahead with Bootstrap3 & JQuery on one of our 12 year old e-com sites.

A few month ago we started getting complains from the users that the site would not work on tablets and mobile phones. Looking at the stats it seems like more and more our visitors on this site are Mobile. We did LOOSE the Holiday Shopping season this time around in Mobile market on this site.

I am a developer by trade. Rebuilding the site from scratch is not an easy task. Takes planning and going thru a lot the old/new code to make sure everything is tested properly.

Converted a few sites to half Mobile Half Desktop and they are much harder to maintain in a long run, just my personal developer's opinion.

Tried to use couple of BS3 templates on the market. Regretted that I did, later. Rewrote them(site layouts) myself later on with much less bloat and much less time from start to Market, if you will.

With Bootstrap 3, as long as you understand how the Grid works, Mobile/Responsive/Desktop is pretty easy to accomplish. There are a lot of tools out there, But the most important tool is on you head, yes, I am talking about that noodle.

...and I do not have enough skills to build a new responsive design from scratch with the same functionalities of the original one.

Yes You Do!

Blend27

[webcentric]

@guarriman

Let's see. If you're planning on building a mobile version of a page, you're pretty much going to have to go through the same process you'd follow to convert your existing page to responsive. You still want the same functionality you already have but in a mobile/responsive design. That's the primary reason I'd say, just convert the existing page. Having two pages to maintain has never made much sense in my book.

My questions for you revolve around how your existing pages are generated and what languages are involved (e.g. PHP, ASP, JavaScript, etc.) and to what extent these languages are used to manipulate the DOM and the CSS on the page. There's a lot of code out there that weaves HTML markup directly into server-side and/or client-side code which is where this can get tricky. If you have a page that's primarily laid out in vanilla HTML and the containers on the page (tables, divs, etc) are simply filled with dynamic content that's one thing. If the dynamic content is also generating your page layout along with populating the page, that's when it gets a bit more complex but not impossible to deal with either.

A simple example would be a div containing an adsense ad. It's already a div and there's some javascript inside that div that loads some content. With bootstrap you'd just need to wrap your content in a container div and a row or rows and then decorate each div in each row with the proper span attributes. Remove any styles that try to set the width of a column, get rid of your floats and see what it looks like on various screen sizes. Tweak from there. BTW, you'll also want to make your adsense ad responsive and this is where it matters what your client-side/server-side code is doing. If that code is generating markup, the markup needs to be responsive as well.

You can get bootstrap/jquery wired into your page with about 3 lines of markup. Just do a Bing search for bootstrap cdn and jquery cdn and make sure the CSS gets loaded first.

I'm getting a bit off topic here so I'll simply say that I believe bootstrap in general to be as SEO friendly as anything else out there these days (if there is such a thing anymore). HTML5, CSS3, jQuery, etc. are the de-facto standards now. Bootstrap is built on these concepts. Bottom line is that Google penalizes sites written with perfect HTML and promotes sites that are written with crap HTML (and vice versa of course). Page structure is certainly a factor buried somewhere deep in that schizophrenic algorithm's gray matter but I doubt it's obsessed over the way external linking strategies or having too many ads on your page are. Only Google is allowed to advertise above the fold don't you know?

Damn, I almost tripped over that soapbox. Cheers.