homepage Welcome to WebmasterWorld Guest from 54.211.73.232
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Mobile Internet / Mobile Web Site Design and Development
Forum Library, Charter, Moderators: not2easy

Mobile Web Site Design and Development Forum

    
Scrolling and stylesheet problems
Linked pages come up ready scrolled. Stylesheet not implemented
UK_Novelist



 
Msg#: 4617935 posted 10:57 am on Oct 20, 2013 (gmt 0)

Dear All

I am not only new to this forum but also new to designing web sites for mobile devices, so please be gentle with me. I do, however, have many years experience of web site design for standard PC browsers.

I have been trying to make my web site "mobile friendly" but have hit a number of quite basic problems, listed below.

Note that I am currently redirecting users to the mobile version of my site using the following JavaScript on my home page:

if (screen.width <= 1000) {
document.location = "phone/index.htm";
}
Is that OK?

Here are my main questions:

1. My mobile home page is taller than a mobile screen, so I need vertical scrolling, but when I first go to my site (using the standard packaged browser on my Samsung S3 running Android), I cannot, initially, scroll the window. However, if I turn the device on its side, to switch to landscape mode, then back again, magically scrolling is now enabled. Any ideas why?

2. I have a link that's a little way down the home page so I have to scroll to reach it. If I then click on the link, the correct new page is displayed BUT it's scrolled down the same amount as the page I just left. In other words, on following the link, vertical scroll isn't being reset to zero. Again, any ideas?

3. Final question. I have a page where I want to display the same content on both PC and mobile devices but using different font sizes etc. I have a separate style sheet for mobile. I therefore tried the following in my <head>:

<link REL="stylesheet" TYPE="text/css" HREF="Panel.css">

<script type="text/javascript">
if (screen.width <= 1000) {
document.styleSheets= "phone/ps.css";
}
</script>

Unfortunately this seems to have no effect. It doesn't switch to the ps.css style sheet and the text comes out using the font sizes from the PC style sheet (Panel.css). Is there a standard way to use the same page, but with different style sheets, for pc/mobile?

For your reference, in case you want to look at the site, it's [writerman.org.uk....]

Thanks in advance
Keith Sheppard (children's author)

 

SevenCubed

WebmasterWorld Senior Member



 
Msg#: 4617935 posted 4:39 pm on Oct 20, 2013 (gmt 0)

Welcome to Webmaster World Mr. Sheppard! No doubt a member or two will be along to try to help you with your dilemma. The most likely one lives across the pond from you on the left side of the same rock as me. Probably still asleep right now too, or just pouring first cuppa java.

Offhand I know there is a bug in one of the mobile devices that is characteristic of item #1 you described above, I just can't remember which one and I don't have it recorded anywhere. I do have a snippet of code here that I was experimenting with so I'll just throw it into the mix, it might help for others assessing this.

<meta name="viewport" content="height=device-height, width=device-width, minimum-scale=1.0, user-scalable=yes|no" />

I also noticed you are using frames. That might be complicating things too.

I think that is what I used to overcome the issue you are experiencing but I don't have a mobile device handy to test it on (I still use one of those "beam me up Scotty" types of mobile devices).

UK_Novelist



 
Msg#: 4617935 posted 5:42 pm on Oct 20, 2013 (gmt 0)

>>I also noticed you are using frames. That might be complicating things too.<<

Only intending to use frames on the PC version of the site. On a mobile device it should switch to the phone version which is non framed.

lucy24

WebmasterWorld Senior Member lucy24 us a WebmasterWorld Top Contributor of All Time Top Contributors Of The Month



 
Msg#: 4617935 posted 8:32 pm on Oct 20, 2013 (gmt 0)

Hey, 343, are you planning to beat me to every thread? :)

if (screen.width <= 1000)

I have been learning about screen width recently-- see nearby thread, possibly even in this same forum-- and it turns out to be a much ickier and messier subject than you would think. But you shouldn't need to do any scripting; the basic format is

:: shuffling papers ::

<link rel = "stylesheet" type = "text/css" media = "screen and (max-width:960px)" href = "two.css">

... and then it gets messy. For starters, iOS devices lie through their teeth* about their width, so you need

<meta name = "viewport" content = "width=device-width">

to cover all iOS devices-- in fact almost everything, of any kind, using webkit. Some non-webkit devices may also respond to

@media screen and (min-resolution: 192dpi)

(adjust numbers to taste). See that other thread, if you can find it.


* Some will argue that the device isn't really lying. Sure, if you've got 500/20 vision...

SevenCubed

WebmasterWorld Senior Member



 
Msg#: 4617935 posted 8:40 pm on Oct 20, 2013 (gmt 0)

Hey, 343, are you planning to beat me to every thread? :)

Naw, just throwing a log on the fire to get things warmed up for you. Just so you'd feel the warmth while peeling back the koshas as you're stretching and wiggling your toes.

graeme_p

WebmasterWorld Senior Member 5+ Year Member



 
Msg#: 4617935 posted 5:40 am on Oct 21, 2013 (gmt 0)

Using media queries and the viewport metatag, a few things to add:

1) You can use the media queries within a style sheet: you have common elements outside the media query and size-specific stuff inside, or desktop outside, overrides for mobile inside at the end), etc.

2) You can measure screen width in any unit you want to use. I advocate the use of em units as it avoids issues with small but high res screens (e.g. retina) etc.

UK_Novelist



 
Msg#: 4617935 posted 4:49 pm on Oct 21, 2013 (gmt 0)

Thanks for all the helpful and (to this newbie) slightly baffling responses. I shall sift my way through them and hopefully work out what to do.

SevenCubed

WebmasterWorld Senior Member



 
Msg#: 4617935 posted 5:15 pm on Oct 21, 2013 (gmt 0)

I advocate the use of em units as it avoids issues with small but high res screens (e.g. retina) etc.

Agreed very much. When you consider that google has 200+ items of criteria to measure worthiness of a website and bing claims 2000+ it's obvious one needs to pay attention to something like ems as units of measurement due to rise of mobile popularity.

I've recently had to rework some of my older websites and used the opportunity to revamp everything to ems for units of measurement. It has strong mobile benefits. Got last one scoring 100% on both desktop and mobile as per google Page Speed Insights tool.

The website optimization results in a universal site with a uniform experience across all devices and there is benefit in that (as one of many onsite factors) for boosting SERPs.

@UK_Novelist your website isn't overly complex, it might be worth considering bringing it up to standards of HTML5/CSS/SPRITES/EMS-FOR-MEASUREMENT/RESPONSIVE-FOR-MOBILE.

If you're attached to the effect of frames you can substitute it with CSS Layers for an equivalent user experience.

Throughout that process you'll probably resolve your other dilemmas that you pointed out too.

There are sources of basic free responsive design templates out there that you can learn from and adapt for your need.

Overall it would be a worthwhile effort because you'll gain higher placement in search results.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Mobile Internet / Mobile Web Site Design and Development
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved