Google mobile requirements?

Hello. Going to attempt to make my site responsive for mobile. Mainly for google since it otherwise is a simple site and otherwise looks pretty good on mobiles. On ipad it’s perfect. So I have two questions to start here…

Using css queries if I only wanted to adjust the way the site responded to phones (leaving tablets the way it is) then what is the max width I target? For all phones.

Two if I only made the site mobile friendly for phones and not tablets would that suffice for google? FYI site won’t say under search link “site is not mobile friendly”, and I won’t get the seo ding.

The first thing you need to know is to stop thinking about individual devices or types of devices and targeting them specifically.
The key is fluidity. Make the design fluid, adapting to any and negate the need for too many queries.
The right width to add a query is: Where it is needed.
Drag the edge of your browser window, or use a simulated mode to do it. Where the layout breaks is where you need a query to alter something.

7 Likes

There is no ‘width’ these days as phones, tablets, laptops and desktops have hundreds of overlapping variations in their width. Some tablets are bigger than laptops and some phones are bigger than tablets. Tomorrow there will be 10 new phones of different widths so you have to stop thinking about devices.

As Sam said above the only thing you really need to do (once you have added the meta viewport tag) is to grab the edge of the browser window and make the window smaller/wider and if the design breaks or looks odd then throw in a media query at that point and make it fit.

With a few well chosen media queries and a fluid design approach you can manage to cater for all devices and not just the ones you think you know about :slight_smile:

It’s the only way these days.

7 Likes

Thanks guys. I guess I was only using those devices as a example. I know not to target devices. That’s all I know. So let me reword it… in order to css query I have to use break points. Not wanting to pick my break points at random, I thought I’d start with picking a phone width break point and going from there.

It’s only one column site. So aside from accounting for text size there isn’t much more to do.

I read that the css queries are referring to css pixels and not the actual width in pixels of the phone. So not targeting phones what css width should I choose as my break point to include all handheld devices? Thanks

That question was fully answered in both posts #2 and #3. :rolleyes:

I would suggest that you carefully re-read them. :winky:

coothead

4 Likes

Don’t pick them at random! Pick them at points where the design needs to change.

The only constant is the design - everything else is variable.

Look at the design, close the browser window slowly and if the design looks awkward, or a horizontal scrollbar appears then apply the media query at that point. It’s all about the design and not the device.

In this way you automatically cater for devices now and in the future without having to know about any of them.

All designs are different and adding media queries at say 768px because that’s a common device size makes no sense if your design is fine at that width. On the contrary if the design breaks at 820px width then a device centric media query at 769px is useless.

It’s all about the design :slight_smile: It’s as simple (or as complicated) as that :wink:

2 Likes

Thanks Paul. For whatever reason the idea is not very intuitive for me. I’m sure once I start messing with it it will start to reveal sense to me.

There seem to be many different variations of max width and etc queries. Can you save me some hours on google and show me the simple version you use?

Hi there PicnicTutorials,

Here is one example…

A recent post

…which has three @media points.

coothead

1 Like

Maybe it would also help if we could see the page that you want to convert?

Then we could suggest something specific to your site. (I’m probably away Friday but I’m sure the others in this thread can take you forward ).

1 Like

With for example a double density retina display, the query applies to CSS pixels. So if the screen has 640px in width, the query sees it as a 320px wide screen. For ordinary screens, they are what they are.

It does not sound like you have much to do. In fact if a design is fluid enough you may not need any break points.
When it comes to text size, usually that will be left alone, as text naturally wraps to new lines on narrower screens. The only problems with text may be if you have some very large headings which won’t fit on a small screen, but that can be sorted with a simple query. And where does the query go? At the point (just before) where the text no longer fits or looks uncomfortably tight.
You can drag the browser edge to test this, but using simulated modes like “Responsive design view” will give you a read out of the screen size as you alter it which can be useful in identifying break points.

1 Like

Here is the site in question. goo.gl/tho6jm

Thanks Sam. Yeah google mobile tester tells me the issues are - the viewport not set - the text size too small - and links too close together. So basically I’m thinking I’m just going to drop the form links below each file name, increase the text size of the form links and file name and space them out, and remove the body background image and just make the single column go 100% width for “a width I don’t know yet”. Cuz on my ipad size all issues listed above don’t really apply. aside from viewport meta

1 Like

Yes add the viewport meta tag. Use this one and no other despite what other people may tell you. This is the one you need.

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

Once you’ve added the above then the text won’t be so small anymore but as a rule of thumb readable body text on mobile should be around 16px and not 14px as per your page but I doubt you will get a google error regarding text once the meta tag is added.

On a mobile links are hard to click to google wants you to give them a bigger ‘hit area’ or at least enough space around so that you can click a single item. Just space them out a little more for smaller screens and may be have them under the text instead of at the right.

You ask where you should add breakpoints but as we have already pointed out that should relate to your design and now that you have posted a link to your page it can be seen that you have a fixed width body of 820px and a 50px margin either side. Therefore your first breakpoint is going to be at 920px (820 + 50 + 50) and you can remove the width and shorten the margin to allow more room.

@media screen and (max-width:920px){
body{width:auto;margin:25px 10px;}
}

Of could if you had used max-width:820px (instead of width) and margin:50px auto then you wouldn’t need that first media query anyway.:slight_smile:

However your facebook comment plugin is a fixed width so you need to make that resize also and that can be added into the mix like so.

@media screen and (max-width:920px) {
	body {
		width:auto;
		margin:25px 10px;
	}
	.fb_iframe_widget span, .fb_iframe_widget {
		width:100%!important;
	}
	.fb_iframe_widget iframe {
		width:100%!important;
	}
}

Now when you close your window the page shrinks as required and you can easily see where the next breakpoint will need to be as your heading starts wrapping. If you want to re-align the heading then throw in a media query before it wraps and make it look better if you don’t like the wrapping effect although I think its almost there anyway.

The next breakpoint will be around 650px and move those pdf doc and web links under the text instead of at the side and give them more breathing room between each link.

Lastly at around 640px move the buy now and satisfaction element to the centre and stack them on top of each other or make the satisfaction image smaller and move the buy now over a bit so that they fit down to a 320px width minimum.

That’s more or less the home page sorted and then you can move to other pages of the site and do similar. Hopefully you have constructed the site methodically rather than a different page for every page of the site otherwise you are in for a long job :slight_smile:

2 Likes

Awesome socks. Thank you very much Paul. That helps out tremendously. I should be able to handle it from here. Take care.

1 Like

As an aside if some content is out of your control (although it shouldn’t be) you may need this specific extra snippet for Safari: shrink-to-fit=no

e.g.

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

That stops safari scaling the whole page if fixed width elements poke out of the viewport. If your page is properly constructed and under your control you don’t need the extra snippet. :slight_smile: (I don’t use it but its worth mentioning as nothing is set in stone these days).

OK! Im good all the way down to @media max-width 415px. Do I need to make a break point less than that for any devices?

And just to confirm - to scale down a background image I can just say… background-size:75px; Is that the equivalent of just giving a width size for a inline image?

The smallest screen you realistically need to cater for is 320px. If the design still works at that you are OK.
Note, that’s not a break point, just a size you need to test to.

I don’t know what you mean. How you resize a background would depend on context. But generally to keep it responsive you may use 100%, contain or cover for a background depending on the behaviour you want.

1 Like

Its just a small 100 x 100 background image. Once I get down to smaller screen I just wanted to scale it to 75 x 75.

Im down to 360px max width now with perfect style. Below that is fine just headings begin to wrap.

Another advantage of RWD is that if you are using css background images you can swap them out as the reduce in size. You don’t really want a 1920x1080 image being loaded for the background of a mobile phone. It is going to take ages to download over 3G etc and will then have to be scaled by a lot.

instead when you do a media query at a smaller size swap that background image for a smaller version and then scale that until the next media query and swap for a smaller one and so on etc… Or even drop the image once you get to a small screen if it no longer helps.

Just incase this was missed. Cause I don’t know this one 100%

And just to confirm - to scale down a background image I can just say… background-size:75px; Is that the equivalent of just giving a width size for a inline image? Meaning is scales the width and height equally automatically.

Using a percentage value relates to the the size of the parent container. So 100% width would be the full width of the containing element, whatever that width be.

You may set sizes explicitly in fixed units like this. But it is generally not considered to be “fluid” or responsive, whereas relative values like percentages are. Though it may be OK at very small (less than a small screen) sizes like this.
But as I already said, the correct method depends on context and the layout you want.