mobiles, screen size, responsive and all that.

Discussion in 'HTML' started by Tim W, Oct 11, 2012.

  1. Tim W

    Tim W Guest

    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
     
    Tim W, Oct 11, 2012
    #1
    1. Advertising

  2. 2012-10-11 12:57, Tim W wrote:

    > 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/

    --
    Yucca, http://www.cs.tut.fi/~jkorpela/
     
    Jukka K. Korpela, Oct 11, 2012
    #2
    1. Advertising

  3. Tim W

    Idle Guest

    On Thu, 11 Oct 2012 10:57:30 +0100, Tim W wrote:

    > 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



    --
    idle
    None of us is as good as all of us.
     
    Idle, Oct 11, 2012
    #3
  4. Andreas Prilop, Oct 11, 2012
    #4
  5. Tim W

    Tim W Guest

    On 11/10/2012 17:53, Alfred Molon wrote:
    > In article <k567lo$3il$>, Jukka K. Korpela says...
    >> Just think about using a normal desktop computer with a
    >> dozen windows open on the screen.

    >
    > 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, Oct 11, 2012
    #5
  6. Tim W

    Tim W Guest

    Tim W, Oct 11, 2012
    #6
  7. Tim W

    dorayme Guest

    In article <>,
    Alfred Molon <> wrote:

    > In article <k567lo$3il$>, Jukka K. Korpela says...
    > > Just think about using a normal desktop computer with a
    > > dozen windows open on the screen.

    >
    > 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.

    --
    dorayme
     
    dorayme, Oct 11, 2012
    #7
  8. 2012-10-11 23:46, Tim W wrote:

    > 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.

    --
    Yucca, http://www.cs.tut.fi/~jkorpela/
     
    Jukka K. Korpela, Oct 11, 2012
    #8
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Frank
    Replies:
    0
    Views:
    333
    Frank
    Nov 21, 2003
  2. =?Utf-8?B?SmF3YWhhcg==?=

    ASPX page un responsive. after opening Modal Dialog

    =?Utf-8?B?SmF3YWhhcg==?=, Sep 29, 2004, in forum: ASP .Net
    Replies:
    2
    Views:
    495
    Lau Lei Cheong
    Sep 30, 2004
  3. James Nugent
    Replies:
    4
    Views:
    820
  4. Priyanka
    Replies:
    1
    Views:
    339
  5. deadpickle

    Gtk2 IRC Client Sluggish and not Responsive

    deadpickle, Mar 5, 2008, in forum: Perl Misc
    Replies:
    0
    Views:
    180
    deadpickle
    Mar 5, 2008
Loading...

Share This Page