Margins and small screens

[Hendrik Maryns]

Hi,

Once again I’d like some feedback on the site
http://www.weltladen-tuebingen.de. The situation is the following: I,
as a real computer freak, have a Big Screen. The lady who is
responsible for the content of the page, however, uses DreamWeaver and
has a small laptop. For her, the page doesn’t look so nice because the
last button on the navigation area is wrapped always. This is due to
the margin specifications in body and in #content. If I leave these
out, however, it doesn’t look as nice on my screen. Is there some
standard solution for this? Like, have the margins shrink if the
viewport gets smaller? Maybe I should just do a horizontal centering of
the #content?

I think I want to get rid of those image-buttons and just put some real
text there. Maybe that would help. A test version at

http://tcl.sfs.uni-tuebingen.de/~hendrik/Weltladen%20website/WebContent/

tells me that that would help, but the problem persists.

Grateful for any suggestions!
H.
--
Hendrik Maryns

http://tcl.sfs.uni-tuebingen.de/~hendrik/

=============== ===
Ask smart questions, get good answers:

http://www.catb.org/~esr/faqs/smart-questions.html

[dorayme]

Re: Margins and small screens

In article <gd4a1u$ota$1@n ewsserv.zdv.uni-tuebingen.de>,
Hendrik Maryns <gtw37bn02@snea kemail.comwrote :

Once again I’d like some feedback on the site
http://www.weltladen-tuebingen.de. The situation is the following: I,
as a real computer freak, have a Big Screen. The lady who is
responsible for the content of the page, however, uses DreamWeaver and
has a small laptop. For her, the page doesn’t look so nice because the
last button on the navigation area is wrapped always.

More than one button wraps on my screen at a convenient browser size, it
looks fine!

But best thing to do in this situation is to make the navigation a
horizontal list, to use real HTML text and style for that white text on
orange rectangle look. Your images absolutely cry out to be replaced so,
there is nothing about them much that is essentially graphic. Plus you
gain a lot because you can control the relative text size a bit, the
paddings can be in % terms meaning they shrink the more the window is
shrunk widthwise... and other benefits.

--
dorayme

[Hendrik Maryns]

Re: Margins and small screens

dorayme schreef:

In article <gd4a1u$ota$1@n ewsserv.zdv.uni-tuebingen.de>,
Hendrik Maryns <gtw37bn02@snea kemail.comwrote :
>

>Once again I’d like some feedback on the site
>http://www.weltladen-tuebingen.de. The situation is the following: I,
>as a real computer freak, have a Big Screen. The lady who is
>responsible for the content of the page, however, uses DreamWeaver and
>has a small laptop. For her, the page doesn’t look so nice because the
>last button on the navigation area is wrapped always.

>
More than one button wraps on my screen at a convenient browser size, it
looks fine!

Ah, the thing is she doesn’t like it that it is wrapped!

But best thing to do in this situation is to make the navigation a
horizontal list,

Why? Or do I understand you wrongly, do you mean I should put it in an
<uland style that list to be flat? How would I do that?
display:inline on both ul and li?

to use real HTML text and style for that white text on

orange rectangle look. Your images absolutely cry out to be replaced so,
there is nothing about them much that is essentially graphic. Plus you
gain a lot because you can control the relative text size a bit, the
paddings can be in % terms meaning they shrink the more the window is
shrunk widthwise... and other benefits.

As I did on the test page. You’re right, thanks.

H.
--
Hendrik Maryns

http://tcl.sfs.uni-tuebingen.de/~hendrik/

=============== ===
Ask smart questions, get good answers:

http://www.catb.org/~esr/faqs/smart-questions.html

[Bergamot]

Re: Margins and small screens


Hendrik Maryns wrote:

>>

>>http://www.weltladen-tuebingen.de. The situation is the following: I,
>>as a real computer freak, have a Big Screen. The lady who is
>>responsible for the content of the page, however, uses DreamWeaver and
>>has a small laptop. For her, the page doesn’t look so nice because the
>>last button on the navigation area is wrapped always.

>
Ah, the thing is she doesn’t like it that it is wrapped!

Does she think horizontal scrolling is preferable? If so, please try to
explain that that would be bad usability, and the site is for the
benefit of her visitors, not just her. What would be even better is to
abandon the pictures of text for the navigation and use styled plain
text instead. It's not only better for users, because the text will
scale with the visitor's preferred font size, but also better for search
engines. Plain text rules.

BTW, you have failed to set a page background color. My browser default
background is not white, and it shows.

--
Berg

[Jim Moe]

Re: Margins and small screens

On 10/15/08 01:36 am, Hendrik Maryns wrote:

>
Once again I’d like some feedback on the site
http://www.weltladen-tuebingen.de. [...]
Is there some
standard solution for this? Like, have the margins shrink if the
viewport gets smaller? Maybe I should just do a horizontal centering of
the #content?
>

Yes. Use percentages to set the horizontal margins and padding.
You could also set the width of the buttons using percentage. The
obvious problem, then, is that eventually the size would shrink enough for
text to wrap within the button.

--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)

[dorayme]

Re: Margins and small screens

In article <gd4e20$u7m$1@n ewsserv.zdv.uni-tuebingen.de>,
Hendrik Maryns <gtw37bn02@snea kemail.comwrote :

dorayme schreef:

In article <gd4a1u$ota$1@n ewsserv.zdv.uni-tuebingen.de>,
Hendrik Maryns <gtw37bn02@snea kemail.comwrote :

Once again I’d like some feedback on the site
http://www.weltladen-tuebingen.de. The situation is the following: I,
as a real computer freak, have a Big Screen. The lady who is
responsible for the content of the page, however, uses DreamWeaver and
has a small laptop. For her, the page doesn’t look so nice because the
last button on the navigation area is wrapped always.

More than one button wraps on my screen at a convenient browser size, it
looks fine!

>
Ah, the thing is she doesn’t like it that it is wrapped!
>

Well, she is not the intended user of the site... but never mind, if she
is another she who must be obeyed, then consider the other thing I said
about getting rid of fixed width images for the navigation, take a guess
at what someone who needs to look at websites at one click text size up
from normal and measure how many px or ems are involved till one of the
menu items wraps and specify a minimum width for the menu. That is as
about as good as you can do if she must be obeyed!

But best thing to do in this situation is to make the navigation a
horizontal list,

>
Why? Or do I understand you wrongly, do you mean I should put it in an
<uland style that list to be flat? How would I do that?
display:inline on both ul and li?

Yes, you use display: inline. There are many examples, Google up for
one. key things are perhaps:

li {
display: inline;
list-style: none;
}

Carefully style the li further to suit and especially the link elements
that go inside.

>
to use real HTML text and style for that white text on

orange rectangle look. Your images absolutely cry out to be replaced so,
there is nothing about them much that is essentially graphic. Plus you
gain a lot because you can control the relative text size a bit, the
paddings can be in % terms meaning they shrink the more the window is
shrunk widthwise... and other benefits.

>
As I did on the test page. You’re right, thanks.
>
H.

--
dorayme

[Hendrik Maryns]

Re: Margins and small screens

Op 15-10-08 22:03 heeft Jim Moe als volgt van zich laten horen:

On 10/15/08 01:36 am, Hendrik Maryns wrote:

>Once again I’d like some feedback on the site
>http://www.weltladen-tuebingen.de. [...]
> Is there some
>standard solution for this? Like, have the margins shrink if the
>viewport gets smaller? Maybe I should just do a horizontal centering of
>the #content?
>>

Yes. Use percentages to set the horizontal margins and padding.

Thanks, this works wonderfully.

You could also set the width of the buttons using percentage. The
obvious problem, then, is that eventually the size would shrink enough for
text to wrap within the button.

width: 12.5% on the buttons doesn’t seem to have any effect, but it
looks fine like it is, so don’t bother. I’ll ask again about this if I
get to need it ;-)

Thanks also to all others for the suggestions.
H.
--
Hendrik Maryns

http://tcl.sfs.uni-tuebingen.de/~hendrik/

=============== ===

https://www.lieverleven.be

http://catb.org/~esr/faqs/smart-questions.html

[Hendrik Maryns]

Re: Margins and small screens

Op 16-10-08 05:17 heeft dorayme als volgt van zich laten horen:

In article <gd4e20$u7m$1@n ewsserv.zdv.uni-tuebingen.de>,
Hendrik Maryns <gtw37bn02@snea kemail.comwrote :
>

>dorayme schreef:

>>In article <gd4a1u$ota$1@n ewsserv.zdv.uni-tuebingen.de>,
>> Hendrik Maryns <gtw37bn02@snea kemail.comwrote :
>>>
>>>Once again I’d like some feedback on the site
>>>http://www.weltladen-tuebingen.de. The situation is the following: I,
>>>as a real computer freak, have a Big Screen. The lady who is
>>>responsibl e for the content of the page, however, uses DreamWeaver and
>>>has a small laptop. For her, the page doesn’t look so nice because the
>>>last button on the navigation area is wrapped always.
>>More than one button wraps on my screen at a convenient browser size, it
>>looks fine!

>Ah, the thing is she doesn’t like it that it is wrapped!
>>

>
Well, she is not the intended user of the site... but never mind, if she
is another she who must be obeyed,

Luckily, she is not, and I am teaching her about web design and
accessability, but she is the one whose good taste I trust more than mine!

then consider the other thing I said
about getting rid of fixed width images for the navigation, take a guess
at what someone who needs to look at websites at one click text size up
from normal and measure how many px or ems are involved till one of the
menu items wraps and specify a minimum width for the menu. That is as
about as good as you can do if she must be obeyed!
>
>

>>But best thing to do in this situation is to make the navigation a
>>horizontal list,

>Why? Or do I understand you wrongly, do you mean I should put it in an
><uland style that list to be flat? How would I do that?
>display:inli ne on both ul and li?

>
Yes, you use display: inline. There are many examples, Google up for
one. key things are perhaps:
>
li {
display: inline;
list-style: none;
}

Funnyly, display:inline seems to suffice, the list markers are
automatically hidden then.

Cheers, H.
--
Hendrik Maryns

http://tcl.sfs.uni-tuebingen.de/~hendrik/

=============== ===

https://www.lieverleven.be

http://catb.org/~esr/faqs/smart-questions.html

[Bergamot]

Re: Margins and small screens


Hendrik Maryns wrote:

Op 16-10-08 05:17 heeft dorayme als volgt van zich laten horen:

>>
>li {
>display: inline;
>list-style: none;
>}

>
Funnyly, display:inline seems to suffice, the list markers are
automatically hidden then.

In some browsers, no doubt, but that doesn't mean it's true for all
browsers.

--
Berg

[Ben C]

Re: Margins and small screens

On 2008-10-25, Bergamot <bergamot@visi. comwrote:

>
Hendrik Maryns wrote:

>Op 16-10-08 05:17 heeft dorayme als volgt van zich laten horen:

>>>
>>li {
>>display: inline;
>>list-style: none;
>>}

>>
>Funnyly, display:inline seems to suffice, the list markers are
>automaticall y hidden then.

>
In some browsers, no doubt, but that doesn't mean it's true for all
browsers.

No doubt, but it is true for all conforming browsers.

[dorayme]

Re: Margins and small screens

In article <slrngg6i4f.671 .spamspam@bowse r.marioworld>,
Ben C <spamspam@spam. eggswrote:

On 2008-10-25, Bergamot <bergamot@visi. comwrote:

Hendrik Maryns wrote:

Op 16-10-08 05:17 heeft dorayme als volgt van zich laten horen:
>>
>li {
>display: inline;
>list-style: none;
>}
>
Funnyly, display:inline seems to suffice, the list markers are
automatically hidden then.

In some browsers, no doubt, but that doesn't mean it's true for all
browsers.

>
No doubt, but it is true for all conforming browsers.

If bullets or numbers (especially for an OL) *were* wanted, perhaps use
a float on li instead. Something like:

li {float: left; margin-right: 60px;}

<ul>
<li><a>item</a></li>
<li><a>item</a></li>
<li><a>item</a></li>
</ul>

I mention this because whenever someone is talking about how to avoid
something, there are likely to be some interested in how to have that
very thing. Admittedly, these latter are a bit creepy and watch from the
semi darkness, but I digress...

--
dorayme