mobiles, screen size, responsive and all that.

[Tim W]

Obviously any new website I make I need to think about how it will
display on a phone and a tablet. This is my very simple thinking on the
matter:

I need to make the width of the design variable down to about 620 pxs,
640 being the width of an iphone screen and there isn't any reason to
think that screen pixel sizes are going to get even smaller again.
Keeping a careful eye on how my layout is constructed with floats,
positioning, tables and lists I want to make sure that it remains
readable and coherent, with elements falling below one another as
necessary as the width is reduced.

Then I need to make sure that text sizes can be raised a bit to
compensate for the high resolution of a phone screen without

making
the text
into a
sort of
cummings
type
poem
like
this

is that all there is to it, this 'responsive' design lark? I am totally
teaching myself so I worry I may be missing something. I have seen
sometimes a different css for a different screen size but that looks a
bit unecessary for my simple sites.

Tim w

 

[Jukka K. Korpela]

Obviously any new website I make I need to think about how it will
display on a phone and a tablet.

Or on any other device.

I need to make the width of the design variable down to about 620 pxs,

No, you don't need to do that. There's fluid design that adapts to any
width. But it does not apply to all situations. Without any idea of your
overall design and content, it is impossible to recommend a specific
approach.

640 being the width of an iphone screen and there isn't any reason to
think that screen pixel sizes are going to get even smaller again.

There are loads of reasons to know that rendering area widths can be
much smaller. Just think about using a normal desktop computer with a
dozen windows open on the screen.

Keeping a careful eye on how my layout is constructed with floats,
positioning, tables and lists I want to make sure that it remains
readable and coherent, with elements falling below one another as
necessary as the width is reduced.

"Floats" sounds ominous. It is difficult to get robust layout with floats.

But if the current design works, say, in a rendering area that is at
least 1024 pixels wide, you could simply decide a different layout for
areas narrower than that, implement it with a style sheet, and just use
@media rules to select between the two styles. Or you could soup up
several alternate styles, but two is certainly much more than one, when
done properly.

Then I need to make sure that text sizes can be raised a bit to
compensate for the high resolution of a phone screen without

making
the text
into a
sort of
cummings
type
poem
like
this

I suppose you mean *decreasing* text sizes. "Phone" browsers use rather
small sizes by default, though this depends on settings and some fancy
tags. The point however is that there is not much room for columns on
the screens. Two columns might work, and people just might turn to
landscape position if there are three columns, but then the vertical
space gets rather limited.

is that all there is to it, this 'responsive' design lark?

Surely not. You haven't really got started yet. A good starting point is
http://www.alistapart.com/articles/responsive-web-design/

 

[Idle]

Obviously any new website I make I need to think about how it will
display on a phone and a tablet. This is my very simple thinking on the
matter:

I need to make the width of the design variable down to about 620 pxs,
640 being the width of an iphone screen and there isn't any reason to
think that screen pixel sizes are going to get even smaller again.
Keeping a careful eye on how my layout is constructed with floats,
positioning, tables and lists I want to make sure that it remains
readable and coherent, with elements falling below one another as
necessary as the width is reduced.

Then I need to make sure that text sizes can be raised a bit to
compensate for the high resolution of a phone screen without

making
the text
into a
sort of
cummings
type
poem
like
this

is that all there is to it, this 'responsive' design lark? I am totally
teaching myself so I worry I may be missing something. I have seen
sometimes a different css for a different screen size but that looks a
bit unecessary for my simple sites.

Tim w

Here's some reading.
http://www.smashingmagazine.com/responsive-web-design-guidelines-tutorials/

http://spirelightmedia.com/responsive-design-device-resolution-reference
http://webdesignerwall.com/tutorials/css3-media-queries

 

[Andreas Prilop]

I am totally teaching myself so I worry I may be missing something.

<LINK rel="StyleSheet" media="handheld" ...>
http://www.htmlhelp.com/reference/html40/values.html#mediadesc
http://www.w3.org/TR/CSS2/media.html#media-types

 

[Tim W]

My wife always has only one window open at full size. I may have more
windows open at the same time, but most of the time all at full size.
It's probably a small minority of techies who uses a dozen of open
windows.

Yeah I am not sure I see the need to design for that. You can just use a
scroll bar, or buy a wider screen.

Tim w

 

[Tim W]

Here's some reading.
http://www.smashingmagazine.com/responsive-web-design-guidelines-tutorials/

http://spirelightmedia.com/responsive-design-device-resolution-reference
http://webdesignerwall.com/tutorials/css3-media-queries

thanks, i will be looking at them

Tim w

 

[dorayme]

My wife always has only one window open at full size. I may have more
windows open at the same time, but most of the time all at full size.
It's probably a small minority of techies who uses a dozen of open
windows.

Most people on Macs have lots of windows open on the desktop. There
was once an uneducated beggar down the road from me with an old Mac he
picked up that had lots of windows open; even if he didn't know much,
he knew to do the natural thing on a Mac. I talked to him once and he
said he liked picking his nose and seeing how many windows he could
open and see on the stage (as he called it). Takes all sorts to make
this world.

 

[Jukka K. Korpela]

Yeah I am not sure I see the need to design for that. You can just use a
scroll bar, or buy a wider screen.

Or move to a friendlier page, which is what people tend to do.