Debian Bug report logs - #654205
Please optimize the site for handheld devices

Toggle useless messages

Message #5 received at submit@bugs.debian.org (full text, mbox, reply):

From: Francesca Ciceri <madamezou@debian.org>

To: submit@bugs.debian.org

Subject: Please optimize the site for handheld devices

Date: Mon, 2 Jan 2012 13:53:46 +0100

[Message part 1 (text/plain, inline)]

Package: www.debian.org
Severity: wishlist
User: www.debian.org@packages.debian.org
Usertags: design

----- Forwarded message from Martin Zobel-Helas <zobel@ftbfs.de> -----

Date: Fri, 18 Nov 2011 18:21:04 +0100
From: Martin Zobel-Helas <zobel@ftbfs.de>
To: debian-www@lists.debian.org
Subject: www.debian.org website optimization for handheld devices

Hi,

i played around a bit with our main page today, to have it better
viewable on handheld devices like cell phones.

The change i did was quite trivial:

--- index.html.1        2011-11-17 15:41:29.000000000 +0000
+++ index.html  2011-11-18 16:00:48.000000000 +0000
@@ -7,6 +7,9 @@
   <meta name="Description" content="Debian GNU/Linux is a free
distribution of the GNU/Linux operating system. It is maintained and
updated through the work of many users who volunteer their time and
effort.">
   <meta name="Generator" content="WML 2.0.11 (19-Aug-2006)">
   <meta name="Modified" content="2011-11-17 15:41:19">
+  <meta name="viewport" content="initial-scale=1.0;maximum-scale=1.0; minimum-scale=1.0; user-scalable=0; width=device-width">
+  <meta name="mobileoptimized" content="300">
+  <meta name="HandheldFriendly" content="true">
 <link rel="alternate" type="application/rss+xml"
  title="Debian News" href="News/news">
 <link rel="alternate" type="application/rss+xml"


You can view the results:

before the change on a HTC Desire
http://people.debian.org/~zobel/screenshot-1321635013272.png

after the change on a HTC Desire:
http://people.debian.org/~zobel/screenshot-1321634995114.png

before the change on a Nexus:
http://people.debian.org/~corsac/www/portrait-old.png
http://people.debian.org/~corsac/www/landscape-old.png

after the change on a Nexus:
http://people.debian.org/~corsac/www/portrait-new.png
http://people.debian.org/~corsac/www/landscape-new.png


If you want to try, my slightly modivied version is available on 
http://people.debian.org/~zobel/mobile-www/

Cheers,
Martin
-- 
 Martin Zobel-Helas <zobel@debian.org>  | Debian System Administrator
 Debian & GNU/Linux Developer           |           Debian Listmaster
 GPG key http://go.debian.net/B11B627B  | 
 GPG Fingerprint:  6B18 5642 8E41 EC89 3D5D  BDBB 53B1 AC6D B11B 627B 

----- End forwarded message -----


This are my thoughts about it (quoted from a mail sent to debian-www):

As MJ Ray pointed out, also on my Samsung Galaxy search box and download
box overlap the logos but apart from that the page looks a big
improvement.
IMHO we could create a mobile.css in which remove the left and right
margins from the content (which on a smartphone sounds like a waste of
space).
I also think that for the mobile version of the homepage we'd need to
remove some of the current content: as the space is less (and the screen
is smaller) we need to list only the essential parts of the page.
For example, I'd cut off the spacefun banner.
But we need to identify the essential parts (what the user is searching
on our website while browsing it with a smartphone?).

What do you think about it?


Cheers,
Francesca
-- 
"People assume that time is a strict progression of cause to effect,
but actually from a non-linear, non-subjective viewpoint is more 
like a big ball of wibbly wobbly, timey wimey... stuff."
							The Doctor

[signature.asc (application/pgp-signature, inline)]

Message #10 received at 654205@bugs.debian.org (full text, mbox, reply):

From: Damyan Ivanov <dmn@debian.org>

To: 654205@bugs.debian.org

Subject: Re: Bug#654205: Please optimize the site for handheld devices

Date: Sun, 8 Jan 2012 21:45:30 +0200

[Message part 1 (text/plain, inline)]

On Mon, Jan 02, 2012 at 01:53:46PM +0100, Francesca Ciceri wrote:
> As MJ Ray pointed out, also on my Samsung Galaxy search box and download
> box overlap the logos but apart from that the page looks a big
> improvement.
> IMHO we could create a mobile.css in which remove the left and right
> margins from the content (which on a smartphone sounds like a waste of
> space).
> I also think that for the mobile version of the homepage we'd need to
> remove some of the current content: as the space is less (and the screen
> is smaller) we need to list only the essential parts of the page.
> For example, I'd cut off the spacefun banner.
> But we need to identify the essential parts (what the user is searching
> on our website while browsing it with a smartphone?).
> 
> What do you think about it?

Attached is a patch which changes some CSS parameters when the page is
displayed on a "small" device. The definition of "small" is somewhat arbitrary
taken to mean a device, whise horizontal size is no more tham 50em.

On such devices (or when you just shrink your browser window), the download
button becomes a separate item above the spacefun banner, the padding
around the content is removed and the search box is reduced a bit.

I had also to move the spacefun background from the #content div to the #splash
one in order to make the download button independent. The change is active for
wide browsers too, but there is no visual difference.

I hope this is useful.

[patch (text/plain, attachment)]

[signature.asc (application/pgp-signature, inline)]

Message #13 received at 654205@bugs.debian.org (full text, mbox, reply):

From: Damyan Ivanov <dmn@debian.org>

To: 654205@bugs.debian.org

Subject: Re: Bug#654205: Please optimize the site for handheld devices

Date: Mon, 9 Jan 2012 20:36:48 +0200

[Message part 1 (text/plain, inline)]

-=| Damyan Ivanov, 08.01.2012 21:45:30 +0200 |=-
> Attached is a patch which changes some CSS parameters when the page 
> is displayed on a "small" device. The definition of "small" is 
> somewhat arbitrary taken to mean a device, whise horizontal size is 
> no more tham 50em.

The home page can be seen in action with the patch applied at 
http://people.debian.org/~dmn/www.d.o/index.en.html

[signature.asc (application/pgp-signature, inline)]

Message #18 received at 654205@bugs.debian.org (full text, mbox, reply):

From: Francesca Ciceri <madamezou@debian.org>

To: Damyan Ivanov <dmn@debian.org>, 654205@bugs.debian.org

Subject: Re: Bug#654205: Please optimize the site for handheld devices

Date: Tue, 10 Jan 2012 20:06:46 +0100

[Message part 1 (text/plain, inline)]

On Mon, Jan 09, 2012 at 08:36:48PM +0200, Damyan Ivanov wrote:
> -=| Damyan Ivanov, 08.01.2012 21:45:30 +0200 |=-
> > Attached is a patch which changes some CSS parameters when the page 
> > is displayed on a "small" device. The definition of "small" is 
> > somewhat arbitrary taken to mean a device, whise horizontal size is 
> > no more tham 50em.
> 
> The home page can be seen in action with the patch applied at 
> http://people.debian.org/~dmn/www.d.o/index.en.html

Hi Damyan,
thanks for working on this one! 

Your patch is perfect: getting of rid of the overlapping of the Download
and the Search thingies and provide a little more space for text.
On my Samsung Galaxy in landscape mode the page is definitely good, less
on portrait mode but still acceptable.
I'm not completely sure on not enlarge also the footer to use all the
available width, and probably we could drop some links from the "hometoc"
but these are details.
IMHO you can already apply this patch and close the BR :)

Cheers,
Francesca

-- 
"People assume that time is a strict progression of cause to effect,
but actually from a non-linear, non-subjective viewpoint is more 
like a big ball of wibbly wobbly, timey wimey... stuff."
							The Doctor

[signature.asc (application/pgp-signature, inline)]

Message #23 received at 654205-done@bugs.debian.org (full text, mbox, reply):

From: Damyan Ivanov <dmn@debian.org>

To: 654205-done@bugs.debian.org

Subject: Closing #654205: www.debian.org: small devices optimizations

Date: Wed, 11 Jan 2012 16:38:20 +0200

[Message part 1 (text/plain, inline)]

Proposed changes are online now. Closing the bug report.

[signature.asc (application/pgp-signature, inline)]

Message #28 received at 654205@bugs.debian.org (full text, mbox, reply):

From: Mark Janssen <praseodym@gmail.com>

To: 654205@bugs.debian.org

Subject: #654205: regression on iOS

Date: Mon, 16 Jan 2012 14:38:17 +0100

The <meta name="viewport"> tag on the Debian site makes it unusable on
iOS devices: the site is shown completely zoomed out, so content is
not readable and the addition of 'user-scalable=0' means that zooming
in is not possible either. This also happens on iPad where the
'un-optimized' site worked just fine.

Message #31 received at 654205@bugs.debian.org (full text, mbox, reply):

From: Damyan Ivanov <dmn@debian.org>

To: Mark Janssen <praseodym@gmail.com>, 654205@bugs.debian.org

Subject: Re: Bug#654205: regression on iOS

Date: Mon, 16 Jan 2012 17:48:58 +0200

[Message part 1 (text/plain, inline)]

-=| Mark Janssen, 16.01.2012 14:38:17 +0100 |=-
> The <meta name="viewport"> tag on the Debian site makes it unusable on
> iOS devices: the site is shown completely zoomed out, so content is
> not readable and the addition of 'user-scalable=0' means that zooming
> in is not possible either. This also happens on iPad where the
> 'un-optimized' site worked just fine.

So what is the fix that you propose? Is dropping 'user-scalable=0' 
enough?

[signature.asc (application/pgp-signature, inline)]

Message #36 received at 654205@bugs.debian.org (full text, mbox, reply):

From: Mark Janssen <praseodym@gmail.com>

To: Damyan Ivanov <dmn@debian.org>

Cc: 654205@bugs.debian.org

Subject: Re: Bug#654205: regression on iOS

Date: Mon, 16 Jan 2012 17:04:58 +0100

On Mon, Jan 16, 2012 at 16:48, Damyan Ivanov <dmn@debian.org> wrote:
> So what is the fix that you propose? Is dropping 'user-scalable=0'
> enough?

After some basic testing I think that changing the meta viewport to
  <meta name="viewport" content="width=device-width">
should fix problems with iOS and still ensure Android compatibility.
My Android 2.3 device seems to ignore any scale settings (and does
allow zooming on the current site).

Message #39 received at 654205@bugs.debian.org (full text, mbox, reply):

From: Damyan Ivanov <dmn@debian.org>

To: Mark Janssen <praseodym@gmail.com>, 654205@bugs.debian.org

Subject: Re: Bug#654205: regression on iOS

Date: Wed, 18 Jan 2012 16:54:39 +0200

[Message part 1 (text/plain, inline)]

-=| Mark Janssen, 16.01.2012 17:04:58 +0100 |=-
> On Mon, Jan 16, 2012 at 16:48, Damyan Ivanov <dmn@debian.org> wrote:
> > So what is the fix that you propose? Is dropping 'user-scalable=0'
> > enough?
> 
> After some basic testing I think that changing the meta viewport to
>   <meta name="viewport" content="width=device-width">
> should fix problems with iOS and still ensure Android compatibility.
> My Android 2.3 device seems to ignore any scale settings (and does
> allow zooming on the current site).

A variant of the home page using only "width=device-width" as you 
suggest is available at 
http://people.debian.org/~dmn/www.d.o/index.en.html

It would be nice if people can test it with as much devices as 
possible for possible problems.

I tested with N900's built-in browser (mozilla-based, I think) and 
Nokia's 5800 and things seem fine (no horizontal scroll bar, seemingly 
good text size) both in portrait and landscape mode.

[signature.asc (application/pgp-signature, inline)]

Message #44 received at 654205@bugs.debian.org (full text, mbox, reply):

From: Francesca Ciceri <madamezou@debian.org>

To: Damyan Ivanov <dmn@debian.org>, 654205@bugs.debian.org

Cc: Mark Janssen <praseodym@gmail.com>

Subject: Re: Bug#654205: regression on iOS

Date: Wed, 18 Jan 2012 16:25:44 +0100

[Message part 1 (text/plain, inline)]

On Wed, Jan 18, 2012 at 04:54:39PM +0200, Damyan Ivanov wrote:
>
> A variant of the home page using only "width=device-width" as you 
> suggest is available at 
> http://people.debian.org/~dmn/www.d.o/index.en.html
> 
> It would be nice if people can test it with as much devices as 
> possible for possible problems.
> 
> I tested with N900's built-in browser (mozilla-based, I think) and 
> Nokia's 5800 and things seem fine (no horizontal scroll bar, seemingly 
> good text size) both in portrait and landscape mode.

Perfect with my Samsung Galaxy in landscape mode, while in portrait mode
the search box overlaps the little logo.

Thanks for your effort on this :)

Cheers,
Francesca

-- 
"People assume that time is a strict progression of cause to effect,
but actually from a non-linear, non-subjective viewpoint is more 
like a big ball of wibbly wobbly, timey wimey... stuff."
							The Doctor

[signature.asc (application/pgp-signature, inline)]

Message #47 received at 654205@bugs.debian.org (full text, mbox, reply):

From: Damyan Ivanov <dmn@debian.org>

To: 654205@bugs.debian.org

Subject: Re: Bug#654205: regression on iOS

Date: Wed, 18 Jan 2012 17:39:01 +0200

[Message part 1 (text/plain, inline)]

-=| Francesca Ciceri, 18.01.2012 16:25:44 +0100 |=-
> On Wed, Jan 18, 2012 at 04:54:39PM +0200, Damyan Ivanov wrote:
> >
> > A variant of the home page using only "width=device-width" as you 
> > suggest is available at 
> > http://people.debian.org/~dmn/www.d.o/index.en.html
> > 
> > It would be nice if people can test it with as much devices as 
> > possible for possible problems.
> > 
> > I tested with N900's built-in browser (mozilla-based, I think) and 
> > Nokia's 5800 and things seem fine (no horizontal scroll bar, seemingly 
> > good text size) both in portrait and landscape mode.
> 
> Perfect with my Samsung Galaxy in landscape mode, while in portrait mode
> the search box overlaps the little logo.

Right devices 240px wide need that search box more squeezed.

I could throw in a set of media queries that tune the search box width 
at some 50px intervals :)

Thanks for the input!

[signature.asc (application/pgp-signature, inline)]

Message #52 received at 654205@bugs.debian.org (full text, mbox, reply):

From: Mark Janssen <praseodym@gmail.com>

To: Damyan Ivanov <dmn@debian.org>

Cc: 654205@bugs.debian.org

Subject: Re: Bug#654205: regression on iOS

Date: Wed, 18 Jan 2012 18:45:39 +0100

On Wed, Jan 18, 2012 at 15:54, Damyan Ivanov <dmn@debian.org> wrote:
> A variant of the home page using only "width=device-width" as you
> suggest is available at
> http://people.debian.org/~dmn/www.d.o/index.en.html
>
> It would be nice if people can test it with as much devices as
> possible for possible problems.

I can confirm that this fixes the regression on iOS (tested with
iPhone, iPad) and that it still works great on Android 2.3.

Message #55 received at 654205@bugs.debian.org (full text, mbox, reply):

From: Damyan Ivanov <dmn@debian.org>

To: 654205@bugs.debian.org, 654205-submitter@bugs.debian.org

Subject: Re: Bug#654205: regression on iOS

Date: Thu, 19 Jan 2012 13:36:26 +0200

[Message part 1 (text/plain, inline)]

-=| Mark Janssen, 18.01.2012 18:45:39 +0100 |=-
> On Wed, Jan 18, 2012 at 15:54, Damyan Ivanov <dmn@debian.org> wrote:
> > A variant of the home page using only "width=device-width" as you
> > suggest is available at
> > http://people.debian.org/~dmn/www.d.o/index.en.html
> >
> > It would be nice if people can test it with as much devices as
> > possible for possible problems.
> 
> I can confirm that this fixes the regression on iOS (tested with
> iPhone, iPad) and that it still works great on Android 2.3.

Thanks. I have committed the change in the source repository. It will 
be online in some 12 hours.

[signature.asc (application/pgp-signature, inline)]

Message #63 received at 654205@bugs.debian.org (full text, mbox, reply):

From: Martin Zobel-Helas <zobel@ftbfs.de>

To: Damyan Ivanov <dmn@debian.org>, 654205@bugs.debian.org

Subject: Aw: Bug#654205: regression on iOS

Date: Fri, 20 Jan 2012 20:09:10 +0000

[Message part 1 (text/plain, inline)]

Tried today on my HTC Desire and Nokia N810. Looks perfect.

thx!

----- Ursprüngliche Mitteilung -----
: quoted-printable

-=| Mark Janssen, 18.01.2012 18:45:39 +0100 |=-
> On Wed, Jan 18, 2012 at 15:54, Damyan Ivanov <dmn@debian.org> wrote:
> > A variant of the home page using only "width=device-width" as you
> > suggest is available at
> > http://people.debian.org/~dmn/www.d.o/index.en.html
> >
> > It would be nice if people can test it with as much devices as
> > possible for possible problems.
>
> I can confirm that this fixes the regression on iOS (tested with
> iPhone, iPad) and that it still works great on Android 2.3.

Thanks. I have committed the change in the source repository. It will
be onli

[Message part 2 (text/html, inline)]

Send a report that this bug log contains spam.