PDA

View Full Version : Mobile Unfriendly



lazycarrot
May 9th, 2017, 02:28 PM
Need to make my website fit (width) onto mobile devices.

Currently I have the following meta tags in the head


<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="HandheldFriendly" content="true">

On a small screen mobile (iphone5) the page extends beyond the width of the screen.
On a tablet (ipad) it does not extend to the full width (though this is less of an issue).

Each webpage is wrapped in a <container> with CSS Width:100%

Any suggestions? (please don't be too harsh :p )

VIPStephan
May 9th, 2017, 05:11 PM
First suggestion: never ever set maximum-scale=1,user-scalable=no! That’s bad for accessibility and usability.

Second suggestion: show us your entire code (HTML and CSS). We aren’t psychic.

lazycarrot
May 9th, 2017, 06:39 PM
Thanks for getting back Stephan...

i'm never sure how much code to bombard the forums with!
Was hoping it would just be a case of adapting the meta tags but clearly not...

Had a couple of 'penny drop' moments since posting too - so I'll try them out to see if I can get any closer first
and get back with the results.

Cheers

deathshadow
May 10th, 2017, 02:56 AM
Currently I have the following meta tags in the head
The viewport meta exists to tell mobile browsers NOT to override your style with their own. It has little to do with actually CREATING the media queries in your stylesheet that ACTUALLY makes the site responsive/mobile friendly.


width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no
VIPStephen has it right that you should NEVER set maximum-scale or user-scaleable to 1/no, because it breaks the mobile users ability to zoom in! SOMEONE out there keeps telling people to do that, and I most decidedly need some quality time with them involving duelling pistols at 10 paces.

The best/optimal setting for that meta is to tell it not to lie about width, not to lie about height, and start out with no zoom override.

"width=device-width,height=device-height,initial-scale=1"


<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
You also should NOT need this. The X-UA meta exists to tell IE to render old sites in old modes, NOT for new sites to force the latest mode. If you 'need' that line, there is something horribly wrong with the entire rest of the page.



<meta name="HandheldFriendly" content="true">

Can't say I've seen that one before -- searching about it seems to indicate that it's mostly manufactured bull that only IE11 ever did anything with -- so much like X-UA if you "need' that there's something wrong with the rest of the page.



Each webpage is wrapped in a <container> with CSS Width:100%
That statement is very troubling since there's NO SUCH THING AS A "CONTAINER" TAG!!! This isn't XML, you can't just go wildly making up your own tags -- and if you actually have a tag called that, then I would suspect your entire markup is just plain gibberish. This is consistent with your previous posts where you were also just randomly making up your own tag names (such as graphic, navig and wrapper), then wondering why your code didn't work. HTML you can't play fast and loose pulling random tags of your own creation out of your backside and expecting it to work properly in web browsers.

HTML tags are predefined within the namespace, and exist for semantic reasons related to professional writing norms. If you just make up your own gibberish tags, how does the user-agent know what that is or how to convey its MEANING?

Remember, HTML is about more than just serving the visual appearance, it's for non-visual users too!

... and really since the default behavior of block level elements is to fill the available width, declaring 100% width in all but the rarest of corner cases is a pointless code-bloat redundancy.


BUT -- for all that -- what you've posted actually has little to do with making a website mobile -- or even desktop friendly. As @VIPStephan said, we have to see it -- the full page live preferably.

deathshadow
May 10th, 2017, 03:11 AM
Oh, and if you actually are referring to your site:
What's New at LazyCarrot - T-Shirts: Music, Tv/Film, Literature, Humour, Sci-Fi (http://www.lazycarrot.co.uk/)

Which was hosting your previous snippet about image widths, OF COURSE it's broken. Fixed inner width layout, fixed width design, pixel metric design, and 100% grade A gibberish HTML filled with made up tags that flat out DO NOT EXIST. There is no such thing as <thumb>, <category>, <links>, <contact>, <mrcarrot> or any of the rest of the nonsense that page is filled with! That's NOT HTML...

... and if HTML 5 validation was worth a damn, it would throw an error on each and every one of those! But NO, have to include XML support no matter how badly it screws over accessibility or backwards compatibility.

Of course all that mm_swap JavaScript static in the markup shows a LOT of where you've been led astray, since that's a hallmark of Dreamweaver -- and as I've said thousands of times the past decade, the only thing you can learn from Adobe is how NOT to build a website. Such scripting doing CSS' job being a poster-child for that.

-- edit --

Though pulling up the document inspector, sure you have your fictional made up fairy-tale "container" tag set to 100%, but 100% of what? The uselessly tiny FIXED 520px you declared on BODY.

Which is why it will always be 520px until you get rid of that width declaration that shouldn't even be there in the first place. IF you were to use anything it should be max-width not width, and if you care about ANY of the accessibility stepping stones you should have on the way to making a page responsive, it should be declared in EM, not pixels -- JUST like your fonts.

NOT that you have headings with text in them or images off graceful degradation either... Don't even get me STARTED about what Jaws or my braille reader thinks about your page.

lazycarrot
May 11th, 2017, 03:21 PM
@Deathshadow - Thanks for taking the time to respond... I'm guessing that got an awful lot of pentup angst out of your system :)

No worries - I really appreciate constructive criticism, and although that was constructive to the point of demolition it was a positive read.

It would be true to say I'm a code scavenger rather than a code purist. I've battled my way through online tutorials, read some maukishly inane manuals, (noteably the missing manuals series which just about did my head in), cannibalised what i could find and googled as best i could until I managed to create something that, at least from the outside, looks and behaves a bit like a website.

And that's what I'm after - something that works - it'd be nice to have it looking pretty under the bonnet (sorry hood if your US), but if it gets me from A to B that'll have to do, my budget doesn't run to building a Bentley and my expertise is more in the soap cart race arena.
I thought the <thumb> etc divs were a pretty neat way of writing the coding when i came across them - far less cumbersome than defining class and div - but like I say, I just dipped in and pulled out what I needed and it worked. They certainly seem to be doing their damnedest to exist! :)

You called it right on Dreamweaver! I have an antiquated CS3 version - won't even give me wsysiwig on current html so i just use it as an over-bloated text editor - good for mapping images on the odd occasion I've used them... I think that is where I pulled up the mm-swap stuff from.

So basically - I'm a non-techy with the need for a Website and a budget that won't stretch to paying someone to build it for me...
You guys on the forums are basically a lifeline when I dig myself so far in I can't see a way out anymore.

-----

Anyway I was just coming back to the thread to say that some kind soul has helped me out enormously with my 'mobility' problem
which, as it turns out was nowhere close to where i thought the problem was lying...
So the answer to my problem and the problem as i posted it are, basically, different ends of the universe.

Thanks to everyone who stopped by to have a look

Cheers for now..