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.
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
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
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 It’s as simple (or as complicated) as that
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.
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
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.
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.
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
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. (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.
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.