[Date Prev][Date Next] [Thread Prev][Thread Next] [Date Index] [Thread Index]

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 <dmn@debian.org>
Commit: Damyan Ivanov <dmn@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 {
+@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;

Attachment: signature.asc
Description: Digital signature

Reply to: