Prev: BBC News website redesign
Next: Line wrapping / nowrap in tables
From: C A Upsdell on 25 Jul 2010 10:29
On 2010-07-25 10:14, TheBicyclingGuitarist wrote:
> 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.

See "Media Queries" in the CSS3 spec, which are honoured by the more
capable browsers.

See also
http://developer.apple.com/safari/library/documentation/appleapplications/reference/safariwebcontent/usingtheviewport/usingtheviewport.html

From: Sherm Pendley on 25 Jul 2010 10:58
TheBicyclingGuitarist <Chris(a)TheBicyclingGuitarist.net> writes:

> On Jul 25, 4:36 am, Andy Dingley <ding...(a)codesmiths.com> wrote:
>>
>> 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.

Inaccessible pages are a symptom of *not* doing as Andy suggested.

sherm--

--
Sherm Pendley <www.shermpendley.com>
<www.camelbones.org>
Cocoa Developer
From: Jeff Thies on 25 Jul 2010 11:39
TheBicyclingGuitarist wrote:
> 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.

What pages would those be?

I don't see anything that should cause a problem.

Your whole site is fluid, which works reasonably well for a personal site.

Why not just hijack a friend with a browser phone and check? You
should be in good shape.

The main problem with fluid design is what to do with large images,
complex headers and multiple column mixed content. You really don't have
any of that and neither do you need it. Worry less!

Jeff




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: dorayme on 25 Jul 2010 18:24
In article <m24ofnboc2.fsf(a)shermpendley.com>,
Sherm Pendley <spamtrap(a)shermpendley.com> wrote:

> TheBicyclingGuitarist <Chris(a)TheBicyclingGuitarist.net> writes:
>
> > On Jul 25, 4:36 am, Andy Dingley <ding...(a)codesmiths.com> wrote:
> >>
> >> 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.
>
> Inaccessible pages are a symptom of *not* doing as Andy suggested.

You make it sound like a disease!

It sure raises the bar if one has to make pages so they are
*very* assessible on tiny screen mobile phones without any
special CSS targetting. It would unnecessarily punish all those
comfortably ensconced at home near a cosy fire with their big
modern monitors.

--
dorayme
From: Sherm Pendley on 25 Jul 2010 19:38
dorayme <dorayme(a)optusnet.com.au> writes:

> In article <m24ofnboc2.fsf(a)shermpendley.com>,
> Sherm Pendley <spamtrap(a)shermpendley.com> wrote:
>
>> TheBicyclingGuitarist <Chris(a)TheBicyclingGuitarist.net> writes:
>>
>> > On Jul 25, 4:36 am, Andy Dingley <ding...(a)codesmiths.com> wrote:
>> >>
>> >> 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.
>>
>> Inaccessible pages are a symptom of *not* doing as Andy suggested.
>
> You make it sound like a disease!

That wasn't my intent! Feel free to think "indicator" if you'd prefer
a less loaded word.

> It sure raises the bar if one has to make pages so they are
> *very* assessible on tiny screen mobile phones without any
> special CSS targetting.

Quite the opposite, IMHO - cell phone makers are drastically lowering
the bar, by improving their browsers. The days of needing a "lite" or
"mobile" version of a site are gone. Modern smartphones have full-
blown browsers that are capable of handling sites that follow industry
standard best practices of the sort that Andy refers to.

One caveat that comes to mind, though, is menus that unroll when the
pointer hovers over them. I'm not sure how that would work in a touch-
based environment with no pointing device. Even in this case, one need
not develop a mobile-specific site to work around the issue; menus that
unroll when clicked will work equally well for desktop browsers.

sherm--

--
Sherm Pendley <www.shermpendley.com>
<www.camelbones.org>
Cocoa Developer
First  |  Prev  |  Next  |  Last
Pages: 1 2 3 4 5
Prev: BBC News website redesign
Next: Line wrapping / nowrap in tables