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

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

Re: fixed position sidebar and small screen/mobile devices?

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

This discussion starts older than the indexed window; earlier articles aren't shown. The article labeled Started by below is the oldest one visible, not the original post.

Contents

  Re: fixed position sidebar and small screen/mobile devices? John Stumbles <john.stumbles@ntlworld.com> - 2011-02-11 19:48 +0000
    Re: fixed position sidebar and small screen/mobile devices? Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2011-02-11 21:49 +0100
    Re: fixed position sidebar and small screen/mobile devices? dorayme <dorayme@optusnet.com.au> - 2011-02-12 10:41 +1100

#21552 — Re: fixed position sidebar and small screen/mobile devices?

On Sat, 12 Feb 2011 03:58:43 +1100, dorayme wrote:


> 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/>

Sorry, my bad: that's what comes of changing things at 2 o'clock in the
morning :-(
Fixed now.

> 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.

Yes, practically the whole page was inside an un-closed comment. Somewhere
I'd picked up an open comment <!-- after my initial <style ...>
declaration and lost the matching close comment --> before the </style>.

> 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.

I'm planning to shrink it ...

> 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?

It's not text any more: it's a graphic of text. Yes, I know: yuk. But I
couldn't find how to have the banner scale down with the browser window
when it was 'real' text, the way a graphic does. If there is a way I'm
happy to learn it. But that's why the banner was so large in the first
place: to accomodate the text if one shrunk the viewport moderately.

> 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>)

OK: *I AM A BEGINNER AT THIS*
Someone recommended that particular DTD. I am willing - nay eager - to
learn what the pros and cons of that versus other DTDs are.
As for the W3C valid logo: why not? And it's a handy way for me to check
the page (as long as I remember!)

> 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).

I've set it to width="100%" for the moment. Maybe not so elegant but quick
as I already know how to do that and I haven't yet got my brain around
floating images and that stuff.

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

Any specific help gratefully received.


-- 
John Stumbles

I used to think the brain was the most interesting part of the body
                        - until I realised what was telling me that

[toc] | [next] | [standalone]

#21557

John Stumbles wrote:

> On Sat, 12 Feb 2011 03:58:43 +1100, dorayme wrote:
>> 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/>
> 
> Sorry, my bad: that's what comes of changing things at 2 o'clock in the
> morning :-(
> Fixed now.

For some values of "fixed".  You are still serving XHTML as text/html even 
to XHTML-supporting clients, causing it to be parsed as erroneous tag soup, 
forfeiting many of the advantages of using XHTML.  (But you are not alone 
there.)
 
>> 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.
> 
> Yes, practically the whole page was inside an un-closed comment. Somewhere
> I'd picked up an open comment <!-- after my initial <style ...>
> declaration and lost the matching close comment --> before the </style>.

In XHTML, the `style' element MUST NOT be commented out that way at all (and 
it does not need to, considering XHTML's history), unless you also declare 
the element content CDATA (which you probably should, although the better 
alternative is to move it to a referred resource).

>> 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>)
> 
> OK: *I AM A BEGINNER AT THIS*

No need to SHOUT around here.

> Someone recommended that particular DTD.

Perhaps you want to review your decision-making process.

> I am willing - nay eager - to learn what the pros and cons of that versus
> other DTDs are.

Do not use XHTML until and unless you know what you are doing.  As long as 
you consider yourself a beginner, stick with HTML 4.01.  As for the rest, 
subscribe to and read comp.infosystems.www.authoring.html (and watch out for 
wannabes).

> As for the W3C valid logo: why not?

Because you had not provided as advertized, and you are unlikely to in the 
future without basic markup knowledge.  And because Validation alone is no 
sign of software quality; even the W3C Validator tells you that.

> And it's a handy way for me to check the page (as long as I remember!)

That would be a sound argument if you were the only person to visit that 
site and read that document.  But then you would have used a local 
webserver, yes?

>> Forget for quite a while browser sniffing, see what you can do without
>> first.
> 
> Any specific help gratefully received.

No need to reiterate that.  Read the c.l.js FAQ Notes, referred from 
<http://jibbering.com/faq/>.  Probably you also want to read the FAQ and all 
the resources referred to there.


F'up2 ciwa.html; keep in mind that mindless crossposts are usually going to 
earn you stony silence from regulars, the people that could help you best.  
I am making an exception here.  See also 
<http://www.catb.org/~esr/faqs/smart-questions.html>.

PointedEars
-- 
Danny Goodman's books are out of date and teach practices that are
positively harmful for cross-browser scripting.
 -- Richard Cornford, cljs, <cife6q$253$1$8300dec7@news.demon.co.uk> (2004)

[toc] | [prev] | [next] | [standalone]

#21558

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

> I'm planning to shrink it (http://reading-skeptics.org.uk/home/...
> 
> > 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?
> 
> It's not text any more: it's a graphic of text.

Viewers can have their browsers set to zoom everything, or just 
text. In your case, either way your banner is in trouble. Not 
helped by specifying 100% width.

> Yes, I know: yuk. But I
> couldn't find how to have the banner scale down with the browser window
> when it was 'real' text, the way a graphic does. If there is a way I'm
> happy to learn it. But that's why the banner was so large in the first
> place: to accomodate the text if one shrunk the viewport moderately.
> 

Good web design involves compromise, no doubt you would like folk 
to be able to read the image text on your drinking Rodin. But why 
set yourself the unnecessary problem of this beer drinking 
thinker being too tall for a banner? You have already made this 
text plain in the rest of the banner. Black the bottom in an 
image editor and the problem goes away, the amber fluid in the 
glass will still catch the eye of the would be pub intellectual.

As for html text in banners, study sites that employ it and look 
good. Experiment. Here is a quick initial thought to be improved 
upon:

.banner {padding-left: 2em; padding-bottom: 1em; max-width: 40em;}
.banner h1 {margin: .1em 0 0 2em;}
h1 span {display: block; font-size: 40%; max-width: 40em; 
font-style: italic;}
.banner img {float: left; margin: .4em 0 2em 0;}

<div class="banner">
<img src="../drinker+plinth.160x222.png" alt="I think best when I 
am pissing on" width="40" height="55" alt="">
<h1>READING SKEPTICS IN THE PUB<br><span>Thinking and drinking, 
humour and debate. Monthly talks and challenging discussions for 
people who enjoy science, reason and critical 
thinking.</span></h1>
</div>  


> > 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>)
> 
> OK: *I AM A BEGINNER AT THIS*
> Someone recommended that particular DTD. I am willing - nay eager - to
> learn what the pros and cons of that versus other DTDs are.

Stick around. It comes up all the time. 

> As for the W3C valid logo: why not? 

Because it looks foolish if you produce invalid markup, because 
none of your readers would be the slightest bit interested, 
because it wastes space, because it is not modest (like me).

> And it's a handy way for me to check
> the page (as long as I remember!)
>

There are other just as easy ways.
 
> > 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).
> 
> I've set it to width="100%" for the moment. Maybe not so elegant but quick
> as I already know how to do that and I haven't yet got my brain around
> floating images and that stuff.
>

The two things, width attribute and css floating are separate 
issues. The 100% width has the disadvantage of enlarging a 
picture too much. And it is too much if it becomes a nuisance.

-- 
dorayme

[toc] | [prev] | [standalone]

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

csiph-web