Mobile friendly site advice

[CaptainSalad2]

I’m converting a site for the first time to be mobile friendly, I’m using server side code to detect if the device being used is mobile and if so to deliver

1) A different style sheet
2) Leaner HTML markup surrounding the page content

I’m not using any redirects nor am I using goggles recommendation of “@media only screen and (max-width: 640px) {...}”

My question is this, if I don’t use “@media only screen and (max-width: 640px) {...}” or some variation in my CSS will google still know it’s a mobile compatible responsive design? Or do I have to use “@media only screen and (max-width: 640px) {...}” for google to recognise this and not apply a penalty in the upcoming update?

[khemraj7]

Don't you think creating separate website for mobile and desktops will cost you bit higher.

You'll have to make it compatible to palmtops, laptops, desktops, tablets, iphone, android, etc. even will have to make your website cross browser and operating system compatible which can increase your cost substantially.

Instead, you can go with Responsive website. Responsive websites are capable enough to adjust the layout as per the screen size and platforms

Due to their cost efficiency, cross-browser/OS compatibility feature, Responsive website are getting popular at very fast pace.

But you'll have make sure while hiring anyone for converting your website into responsive and also check at the time of delivery that all the functionalities are working fine

[CaptainSalad2]

khemraj7 I thought this was a responsive design? Responsive to delivering a different stylesheet/html markup depending on the device used? But while still using the same URL (no redirects) and page text content. Isnt that responsive?

As for costs im a web developer so just my time, the mobile version is just a scaled down version with less images/css/JS and flashy effects that work on desktop but are pointless on mobile.

So far I have it score 97/100 on google insights page speed test so believe its the right move, but my question still stands, will google know its a mobile version without “@media only screen" syntax?

[netmeg]

Responsive design delivers based on the viewport, not the device type. Hence you would use the media queries. Personally, I prefer that method (that way I don't have to keep up with all the device types or browser strings, but YMMV)

You're not going to get penalized - but how exactly Google detects a mobile friendly site, nobody knows. Part of it might be based on mobile user behavior. So there's no guarantees, but if mobile users can and are navigating your site, you're probably okay.

[CaptainSalad2]

I understand what you’re saying in terms of keeping up with the devices and going on viewport via CSS BUT isn’t the responsive web design that I’m using (server side responsive) more effective (granted more work) because it can reduce download times of pages as unnecessary images and scripts can be cut out for mobile using server side.... where as using CSS you still send these images/scripts that work well on desktop but are unnecessary for mobile?

Am I missing something?

[CaptainSalad2]

put it this way, testing both server side responsive design and CSS responsive design on

[developers.google.com...]

I couldn't score past 80-83 using CSS Responsive, but switching to server side responsive approach has my site at 97-98 score wise, I can get 100 with a couple of hosting tweaks to-do with cache, my thoughts are (Naively), if googles own product tests and rates my sites at 100 out of 100 for mobile surely speed, surely that's a quality signal of some kind?

[netmeg]

I dunno, I have a 99/100 on most of my responsive sites. And I don't have anything on the desktop version that I don't want to serve on the mobile (I have 70% mobile traffic at peak); everything I've read recently points to the users not wanting a stripped down version on their phones.

Ideally, you probably want to do what your users want - so you might ask em.

[Sally Stitts]

https://developers.google.com/speed/pagespeed/insights/

What kind of a URL is that?
It briefly flashes something on the screen, too fast to read, then goes blank. Every time. Over and over again.
The status bar says "waiting for analytics", forever.

It also breaks my back button.
Two (or three) very rapid back button clicks are required to get out.

UPDATE - Only bad on Firefox. Works great on Safari.

Suggestions Summary
Eliminate external render-blocking Javascript and CSS in above-the-fold content (as in, AdSense?)
Your page has 1 blocking script resources. This causes a delay in rendering your page.

Leverage browser caching
Setting an expiry date or a maximum age in the HTTP headers for static resources instructs the browser to load previously downloaded resources from local disk rather than over the network.

Enable compression
Compressing resources with gzip or deflate can reduce the number of bytes sent over the network.

[CaptainSalad2]

netmeg again I know what your saying, I personally don't like cut down versions but some of my clients have been scared by sales people from the MAIN directory (cant mention the name but you know who the biggest directory is) and they have told my clients if you don't have a mobile friendly FAST version of the site google will be "issuing a penalty". So im forced to deliver some fast cut down versions of very what are very flashy desktop sites.

Don't know how this company gets a free ride with google when their own sales reps scaremonger in order to sell there crappy plain sites but nevermind.

I think responsive CSS would best for non or lean JS/JQuery sites maybe? Sites that are mostly CSS/HTML? Unless there is a non server side way to block JS/JQ scripts from being sent I may not know of?

[netmeg]

I dunno what to tell you. Me, I try to educate the clients so they don't fall for that, but I only have a few of them and they've all been with me more than ten years.

If you think a stripped down site will do the trick for the users, then by all means that's what you should do. But I wouldn't call it responsive design if it's not using media queries (because I think that would be misleading to your clients)

[nomis5]

if you don't have a mobile friendly FAST version of the site google will be "issuing a penalty"

I'm all for different content for mobile users because in many circumstances they want it. But I'm definitely not in favour of scaremongering. In fact, this is your big chance to prove the "MAIN" directory wrong and earn some brownie points with your clients.

Ask them for proof of their assertion that penalties will be issued - they won't have a shred of evidence to back that up. It's simply another case of people inflating the capabilities of G for their own ends.

But you can provide some evidence of sites in their sector thriving on average speeds - loads of sites doing that. Use Alexa to prove the basic point.

Remember this, in most cases the G mobile serps contain exactly the same sites as the main serps. Proof that G really has no algo that can detect a mobile optimised site without a manual review. They might be able to detect code which indicates mobile optimization may be occurring but they simply don't know any more than that.

[ColourOfSpring]

What CaptainSalad2 is describing is delivering content based on user agent string. I use this method because my sites are quite complex (fully featured e-commerce sites). I prefer to have full control over every element of the page, and strip-down the content to the bare minimum, and include some extras into the page too (e.g. click to call buttons). Not saying you can't do this with the other method, but it's just easier for how I work to do it this way - and as with most web developer "is B better than A?" dilemmas, it will come down to what works best for you.

Google's "mobile bot" will likely detect different content/layout for the same URL when using their small screen user agent (no bad thing), but you can send a stronger signal that this is the case by changing the VARY parameter in the page header to VARY: User-Agent. This explicitly states that content will vary depending on user agent. Some people say this can lead to extra bandwidth usage if you use content delivery networks though (not the case for my own hosting).

As to keeping up with user agent strings, it's only a pain depending on how you work. I like to template my sites (have developed my own template) and one update will update all sites. Having said that, it will rarely need updating (haven't needed to update in a year) - if you catch all the main small screen user agents - this site : [detectmobilebrowsers.com...] has regular expressions to catch all popular small screens.

[lucy24]

Eliminate external render-blocking Javascript and CSS in above-the-fold content

They seem to be absolutely obsessive about this. Every external stylesheet is a red exclamation mark. And I don't have nineteen. I have two, max. So they're working on the assumption that visitors on mobile devices will only view a single page. Is this a valid assumption overall? How would they know? No chrome on iPhones, afaik.

The present page comes in at 74/100 mobile, 90/100 desktop. It is not every day that my personal site scores higher than WebmasterWorld :)

Has anyone ever figured out why g### needs three separate mobile UAs?

[edited by: aakk9999 at 9:37 pm (utc) on Aug 8, 2013]
[edit reason] Corrected spelling on poster request [/edit]

[CaptainSalad2]

Lucy24 it is a pain as best practices are to separate CSS from HTML so it goes against the grain, I put my mobile CSS inline but refuse to on desktop version out of point.

My only other problem is with "Remove render-blocking JavaScript:http://platform.linkedin.com/in.js" for a linkedin like button, can find a workaround for this yet but as social is so important to google cant not have this included.

thanks for the replies on this thread they have genuinely helped me, ColourOfSpring really appreciate the tip on "VARY: User-Agent"

[Robert Charlton]

For more on Vary HTTP header, see this discussion...

Mobile friendly - vary http header question
updated May, 2013
http://www.webmasterworld.com/google/4522975.htm [webmasterworld.com]

The thread also contains links to several other threads that might apply to various concerns.

(If any of the links to WebmasterWorld threads are broken, please advise, as we've been moving some threads to our Mobile Internet section [webmasterworld.com...] and it's likely that some haven't been properly redirected.)