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

Groups > comp.lang.javascript > #21558

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

Cross-posted to 3 groups.

Show key headers only | View raw

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

Back to comp.lang.javascript | Previous | Next — Previous in thread | Find similar | Unroll thread

Thread

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

csiph-web