Bug#654205: Please optimize the site for handheld devices
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 Description: Digital signature
Bug#654205: Please optimize the site for handheld devices
-=| 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 Description: Digital signature
Bug#654205: Please optimize the site for handheld devices
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.
commit 4b14fda966d41b06b596bede313b53c27688bf16
Author: Damyan Ivanov d...@debian.org
Commit: Damyan Ivanov d...@debian.org
mobile-optimized styles - no content padding, separate download button
diff --git a/english/debhome.css b/english/debhome.css
index 558c391..8d96c9f 100644
--- a/english/debhome.css
+++ b/english/debhome.css
@@ -22,6 +22,9 @@
@import url(debian.css);
#splash {
+ background-image: url('Pics/spacefun-bg.png');
+ background-position:top center;
+ background-repeat: repeat-x;
margin-top: 0;
margin-bottom: 1.5em;
text-align: center;
@@ -78,11 +81,6 @@ span.download a:hover em {
color: white;
background-color: #339900;
}
-#content {
- background-image: url('Pics/spacefun-bg.png');
- background-position:top center;
- background-repeat: repeat-x;
-}
#announce {
text-align: center;
float: left;
@@ -206,3 +204,26 @@ div.trans-note {
div.trans-note p {
margin:0;
}
+
+@media screen and (max-width: 50em) {
+#content {
+margin: 0;
+}
+input[name=P] {
+width: 10em;
+}
+span.download {
+left: 0;
+right: inherit;
+position: static;
+margin: 2px 0;
+display: inline-block;
+background: #339900;
+}
+span.download a, span.download a em {
+color: white;
+}
+#intro {
+clear: left;
+}
+}
signature.asc
Description: Digital signature
Bug#654205: Please optimize the site for handheld devices
Package: www.debian.org Severity: wishlist User: www.debian@packages.debian.org Usertags: design - Forwarded message from Martin Zobel-Helas zo...@ftbfs.de - Date: Fri, 18 Nov 2011 18:21:04 +0100 From: Martin Zobel-Helas zo...@ftbfs.de To: debian-...@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.12011-11-17 15:41:29.0 + +++ index.html 2011-11-18 16:00:48.0 + @@ -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 zo...@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 Description: Digital signature
