Prev: BBC News website redesign
Next: Line wrapping / nowrap in tables
From: TheBicyclingGuitarist on 26 Jul 2010 08:18
On Jul 26, 3:27 am, Andy Dingley <ding...(a)codesmiths.com> wrote:
> On 25 July, 15:14, TheBicyclingGuitarist
>
> <Ch...(a)TheBicyclingGuitarist.net> wrote:
> > Is there a way for me to code the page so that on wider screens it can
> > have the three columns, but on smaller screens it would linearize as
> > you suggest?
>
> If there's a minimum width at which a menu list item becomes
> unworkable, set a minimum width on it. Browsers will do the rest.

I added min-width: 8em; to the #nav in the index.css stylesheet. I
think it's better than before but would like expert opinions. Does
http://www.TheBicyclingGuitarist.net/ now render better on small
screens? Do I need to change the value or add min-widths to any other
divs? thanks
From: Osmo Saarikumpu on 26 Jul 2010 13:35
TheBicyclingGuitarist kirjoitti:
> I see more and more people surfing the internet with handheld devices:
> cell phones, pda's or whatever. These have tiny little screens. What
> rules should I put in or take out of the stylesheet to make my site
> more accessible to such devices? I'm hoping there are just a few
> general principles I can apply, simple changes that will make the
> content more accessible even if it doesn't look the same as on bigger
> screens.

I guess that first you should add a media attribute to your link element
(if complete redesign is out of the question). Instead of:

<link rel="stylesheet" href="css/index.css" type="text/css">

(that in practice would [against standard] target every media) change it to:

<link
rel="stylesheet"
href="css/index.css"
type="text/css"
media="screen">

Then you would add a stylesheet targeting handheld, e.g.:

<link
rel="stylesheet"
href="css/handheld.css"
type="text/css"
media="handheld">

which would contain the appropriate style rules for small devices. Last
time I checked you could use Opera to emulate media handheld, probably
Firefox also (at least with an add on), if you don't have a suitable
device at hand.

But ISTM that you should probably start with print media
(media="print"). Use your browsers Print Preview command to see what I'm
aiming at.

--
Best wishes,
Osmo
From: C A Upsdell on 26 Jul 2010 14:43
On 2010-07-26 13:35, Osmo Saarikumpu wrote:
> TheBicyclingGuitarist kirjoitti:
>> I see more and more people surfing the internet with handheld devices:
>> cell phones, pda's or whatever. These have tiny little screens. What
>> rules should I put in or take out of the stylesheet to make my site
>> more accessible to such devices? I'm hoping there are just a few
>> general principles I can apply, simple changes that will make the
>> content more accessible even if it doesn't look the same as on bigger
>> screens.
>
> Then you would add a stylesheet targeting handheld, e.g.:
>
> <link
> rel="stylesheet"
> href="css/handheld.css"
> type="text/css"
> media="handheld">

Except that AFAIK "handheld" is not at all well supported: which is why
I referred to OP to media queries, which are supported by most leading
mobile browsers.


From: Osmo Saarikumpu on 26 Jul 2010 15:34
C A Upsdell kirjoitti:

> Except that AFAIK "handheld" is not at all well supported:

I did not know that. I was under the impression that it was very well
supported by modern handhelds.

Anyways, as dorayme knows, I'm an idealist, as in authoring pages for
the future (it's a time saver, believe me).

--
Best wishes,
Osmo
From: TheBicyclingGuitarist on 26 Jul 2010 17:45
On Jul 26, 12:34 pm, Osmo Saarikumpu <o...(a)wippies.com> wrote:
> C A Upsdell kirjoitti:
>
> > Except that AFAIK "handheld" is not at all well supported:
>
> I did not know that. I was under the impression that it was very well
> supported by modern handhelds.
>
> Anyways, as dorayme knows, I'm an idealist, as in authoring pages for
> the future (it's a time saver, believe me).
>
> --
> Best wishes,
> Osmo

Just adding the min-width to the one div in the stylesheet seems to
have helped tremendously. The navigation text doesn't disappear as it
did before. That's the kind of changes I'm looking to make: simple
ones that make a difference. I'm not opposed to total redesign, but
only if it is necessary. Any further suggestions are welcome.
First  |  Prev  |  Next  |  Last
Pages: 1 2 3 4 5
Prev: BBC News website redesign
Next: Line wrapping / nowrap in tables