Mobile friendly websites

Usher · 7 Sep 2015 at 20:30

I have a website I made a while back, Google keep sending messages that my website is not mobile friendly.
It's made with a WYSIWYG editor & although I have access to alter the code both on the server & in the programme itself I can't seem to grasp how to make the pages fit any size screen.

I've viewed instructions ( & there are lots of enquiries as to how to do this) & cut & pasted the given code into my page header but nothing works :confused:

What the heck do I need to put in the page header ?

Usher · 7 Sep 2015 at 20:38

seems overclockers isn't mobile friendly either so perhaps it's not a simple fix?

lsg1r · 8 Sep 2015 at 00:25

Realistically you're not going to be able to make a mobile friendly website using wysiwyg in my opinion. Wysiwyg is fine for fixed designs but most mobile sites change with resolution.

To make a mobile friendly site you either need a 'second version' or go with the more modern/accepted approach of making it responsive via media queries in css.

What wysiwyg are you using?

AHarvey · 8 Sep 2015 at 00:51

What is the url of your site?

antijoke · 8 Sep 2015 at 10:53

You don't put anything in the header (unless that's where your styling is, but that's not a good way of doing it).

You will need to create certain styling rules with media queries in a stylesheet that take effect if a screen is of a certain width.

This will be something that you can sink hours into when you start to think about what breakpoints you want for the site you've made and how that layout fits into a responsive design.

Media query example:

Code:

@media (min-width: 481px) and (max-width: 767px) {
    .site-container {
        width: 100%;
    }
}

Then you have other styling that applies to other screen sizes all the way up to desktops, some schools of thought have a mobile first approach that starts with the default styling being applied to mobile and then more styles are applied when you get to larger screens.

Usher · 8 Sep 2015 at 11:14

Thanks for your imput guys, seems there are counless numbers of websites that currently don't scale down to mobiles inc Overclockers it seems so I'll leave things as they are for now.
I'll probably do a separate site scaled down with a link from the home page, Googlebot will not recognise it however

AHarvey · 8 Sep 2015 at 11:30

look at making your own with Bootstrap, very easy to do.

gord · 8 Sep 2015 at 15:36

Usher said:
I'll probably do a separate site scaled down with a link from the home page

Don't do this, it may sound easier but it's a world of pain that you don't have to endure.

antijoke · 8 Sep 2015 at 16:48

kian.jenn said:
Removed

Is that your site? Because the post you've linked doesn't really contain anything that might even be remotely branded a tutorial....

:confused:

xbenjiiman · 8 Sep 2015 at 17:03

anticonscience said:
Is that your site? Because the post you've linked doesn't really contain anything that might even be remotely branded a tutorial....

They've linked it a few times now, most likely spam.

dacads · 8 Sep 2015 at 22:20

I think what you were looking for is

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

AHarvey said:
look at making your own with Bootstrap, very easy to do.

I can recommend this too, recently used it and was a doddle with a great end result.