Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #21556 > unrolled thread

fixed position sidebar and small screen/mobile devices?

Back to article view | Back to comp.lang.javascript

Contents

  fixed position sidebar and small screen/mobile devices? John Stumbles <john.stumbles@ntlworld.com> - 2011-02-11 12:44 +0000
    Re: fixed position sidebar and small screen/mobile devices? dorayme <dorayme@optusnet.com.au> - 2011-02-12 03:58 +1100

#21556 — fixed position sidebar and small screen/mobile devices?

I've made my first serious foray into css with a web layout that has 
'position: fixed' side and top bars like
http://yaph.org.uk/test/layout-fixed.html
so that the site is always visually identified, and users have ready
access to the menu (in the side or top bar) without having to scroll back
to the top if the content is large.

However on an Android (and possibly other mobile devices, or if one
resizes a conventional desktop-based browser down to a small enough
window) the user can't scroll away from the fixed elements to view the
content. Using absolute positioning on the side and top bars like
http://yaph.org.uk/test/layout-absolute.html makes it usable in small
browser windows, and I can easily enough test which browser the user is on
and switch between the two like
http://yaph.org.uk/test/layout-test.php

Here's a 'real' site I'm working on:
http://reading-skeptics.org.uk/home/

I don't want to make the side and top bars percentages of the screen
dimensions as the menu text would wrap and look a right dog's dinner.

Hard-coding HTTP user agents into my PHP script is going to be fun to
maintain ;-( Could I finding out the screen dimensions and switch from
fixed to absolute positioning below a certain threshold? Maybe in
javascript? But I'm even more of a tyro at js: I can just about say
document.write! (I know many users browse with js switched off e.g. using
NoScript (I do so myself) but if the site rendered OK without js and was
just better with it that would be OK.

Help? Suggestions?

-- 
John Stumbles

I am neither for nor against apathy

[toc] | [next] | [standalone]

#21561

In article <8rkp9eFjhU1@mid.individual.net>,
 John Stumbles <john.stumbles@ntlworld.com> wrote:

> I've made my first serious foray into css with a web layout that has 
> 'position: fixed' side and top bars...
...
> 
> Here's a 'real' site I'm working on:
> http://reading-skeptics.org.uk/home/

Before worrying about what so many different users on different 
platforms and devices will usefully receive, it might be better 
to start with a few basics like checking your html at 

<http://validator.w3.org/>

In my modern Safari browsers, absolutely nothing shows when your 
url is loaded. FF has more generous error correction, but that is 
a mixed blessing.

You are concerned with usability and small screens as well as 
large. So why would you have a banner that unnecessarily takes up 
so much of the vital vertical space at the very top of the 
webpage forcing almost everyone to scroll.

Have you seen what happens even to your banner when users have a 
text size you are not expecting? Small and your banner material 
begins to disappear! Even worse, what happens in terms of screen 
real estate gobbling when text is enlarged?

Why boast the xhtml logo on your site, why would you even if you 
had produced valid markup? (I won't say why use xhtml in the 
first place? <g>)

In general, try to get the habit of making more fluid and 
flexible designs that do not require so much scrolling, 
especially horizontal (your too wide montage on the contact page 
could be redesigned to still work for people who can't or do not 
want to have their browsers so wide. You could float the 
individual pics, position them, all sorts of things that would 
enable wrapping but still get the sense of a jumble of drinking 
discussers). 

Forget for quite a while browser sniffing, see what you can do 
without first.

-- 
dorayme

[toc] | [prev] | [standalone]

Back to top | Article view | comp.lang.javascript

csiph-web