Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > mobiles, screen size, responsive and all that.

Reply
Thread Tools

mobiles, screen size, responsive and all that.

 
 
Tim W
Guest
Posts: n/a
 
      10-11-2012

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
 
Reply With Quote
 
 
 
 
Jukka K. Korpela
Guest
Posts: n/a
 
      10-11-2012
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/r...ve-web-design/

--
Yucca, http://www.cs.tut.fi/~jkorpela/
 
Reply With Quote
 
 
 
 
Idle
Guest
Posts: n/a
 
      10-11-2012
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/resp...nes-tutorials/

http://spirelightmedia.com/responsiv...tion-reference
http://webdesignerwall.com/tutorials/css3-media-queries



--
idle
None of us is as good as all of us.
 
Reply With Quote
 
Andreas Prilop
Guest
Posts: n/a
 
      10-11-2012
On Thu, 11 Oct 2012, Tim W wrote:

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


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

--
Outgoing mail is certified free from defamation of Islam™
and insult of the Prophet™.
Checked by Thinkpol anti-obscenity system v. 6.66.
 
Reply With Quote
 
Tim W
Guest
Posts: n/a
 
      10-11-2012
On 11/10/2012 17:53, Alfred Molon wrote:
> In article <k567lo$3il$(E-Mail Removed)>, 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
 
Reply With Quote
 
Tim W
Guest
Posts: n/a
 
      10-11-2012
On 11/10/2012 16:58, Idle wrote:

>>
>> Tim w

>
> Here's some reading.
> http://www.smashingmagazine.com/resp...nes-tutorials/
>
> http://spirelightmedia.com/responsiv...tion-reference
> http://webdesignerwall.com/tutorials/css3-media-queries
>
>
>

thanks, i will be looking at them

Tim w
 
Reply With Quote
 
dorayme
Guest
Posts: n/a
 
      10-11-2012
In article <(E-Mail Removed)>,
Alfred Molon <(E-Mail Removed)> wrote:

> In article <k567lo$3il$(E-Mail Removed)>, 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
 
Reply With Quote
 
Jukka K. Korpela
Guest
Posts: n/a
 
      10-11-2012
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/
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Gtk2 IRC Client Sluggish and not Responsive deadpickle Perl Misc 0 03-05-2008 10:23 PM
ASPX page un responsive. after opening Modal Dialog =?Utf-8?B?SmF3YWhhcg==?= ASP .Net 2 09-30-2004 01:30 AM
Using wait() but making the gui responsive James Nugent Java 4 05-04-2004 07:37 PM
'D' Drive not responsive Dan Computer Support 1 02-02-2004 01:06 PM
HtmlInputFile control is not responsive!! Frank ASP .Net 0 11-21-2003 10:28 PM



Advertisments