Prev: BBC News website redesign
Next: Line wrapping / nowrap in tables
From: TheBicyclingGuitarist on 25 Jul 2010 04:04
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.

My site is at http://www.TheBicyclingGuitarist.net/
The index page stylesheet is http://www.TheBicyclingGuitarist.net/css/index.css
Every other page's stylesheet is http://www.TheBicyclingGuitarist.net/css/style.css

I've had much help from this and sister newsgroups the past ten years
or so, plus putting in hundreds or thousands of hours of my own time
improving the HTML and CSS code of my web site. I appreciate any help
on this matter. Thanks.
From: Andy Dingley on 25 Jul 2010 07:36
On 25 July, 09:04, TheBicyclingGuitarist
<Ch...(a)TheBicyclingGuitarist.net> wrote:
> I see more and more people surfing the internet with handheld devices:

Good fluid design is also good design for mobile devices.

You can go deeper than this, but at the level you're currently working
at, just focus on getting the general stuff (good markup, fluid
design, avoiding layout tables because they're grid-based and pixel-
based) rather than worrying about mobile-specific stuff.
From: TheBicyclingGuitarist on 25 Jul 2010 08:48
On Jul 25, 4:36 am, Andy Dingley <ding...(a)codesmiths.com> wrote:
> On 25 July, 09:04, TheBicyclingGuitarist
>
> <Ch...(a)TheBicyclingGuitarist.net> wrote:
> > I see more and more people surfing the internet with handheld devices:
>
> Good fluid design is also good design for mobile devices.
>
> You can go deeper than this, but at the level you're currently working
> at, just focus on getting the general stuff (good markup, fluid
> design, avoiding layout tables because they're grid-based and pixel-
> based) rather than worrying about mobile-specific stuff.

Thanks for the advice, Mr. Dingley. I think I've done all you suggest.
Still, when I looked at some of my pages through a mobile emulator
they weren't very accessible. I don't have any such devices
personally, but do want to accommodate their users since there seem to
be so many of them nowadays with their use increasing.
From: Andy Dingley on 25 Jul 2010 09:56
On 25 July, 13:48, TheBicyclingGuitarist
<Ch...(a)TheBicyclingGuitarist.net> wrote:

> Still, when I looked at some of my pages through a mobile emulator
> they weren't very accessible.

Simplest mobile emulator is to just resize your browser window.

Looking at your homepage, it's obsessed with keeping the three columns
side-by-side, even when this has become impractical. If you have a
narrow window, you just can't have three columns: it's time to let
things linearize themselves. Let the masthead pop to the top and the
nav go below it, then the right-hand look after itself somewhere down
the bottom.

If you're building a site that's really targetted at mobile use (i.e.
timetables etc.) then worry about download baggage too. Get the
navigation up first, don't rely on images to make that work, and allow
the users to navigate to the first target page they really need, even
before the images have arrived.
From: TheBicyclingGuitarist on 25 Jul 2010 10:14
On Jul 25, 6:56 am, Andy Dingley <ding...(a)codesmiths.com> wrote:
> On 25 July, 13:48, TheBicyclingGuitarist
>
> <Ch...(a)TheBicyclingGuitarist.net> wrote:
> > Still, when I looked at some of my pages through a mobile emulator
> > they weren't very accessible.
>
> Simplest mobile emulator is to just resize your browser window.
>
> Looking at your homepage, it's obsessed with keeping the three columns
> side-by-side, even when this has become impractical. If you have a
> narrow window, you just can't have three columns: it's time to let
> things linearize themselves. Let the masthead pop to the top and the
> nav go below it, then the right-hand look after itself somewhere down
> the bottom.
>

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? Is it a matter of a separate stylesheet for mobile
devices, or do I need to redo the HTML too? The home page has had the
same basic layout since 1997, but the other pages on the site don't
have that three column layout.
 |  Next  |  Last
Pages: 1 2 3 4 5
Prev: BBC News website redesign
Next: Line wrapping / nowrap in tables