[Buildroot] [RFC] Responsive Design Website

[Buildroot] [RFC] Responsive Design Website

[Angelo Compagnucci]

Hello List!

As a sign of gratitude for my recently committed mono patches, I
thought having a responsive design website could be a nice addition to
Buildroot.

With this in mind, I updated to the latest bootstrap3 and jquery
versions, fixed various unbootstrapness everywhere and made the
website responsive!

The website is very similar to the old one, the most difficult task
was to clean it to let conditional css rules make their job.

You can try it (also with your mobile phone) at:

http://buildrootrd.idea-on-line.it/ (WARNING: dns is stil propagating)

I'm open to suggestions and if you like the work I'll continue to fix
the entire website and I'll send a patch in the next few days.

Sincerely, Angelo.

-- 
Profile: http://it.linkedin.com/in/compagnucciangelo

[Buildroot] [RFC] Responsive Design Website

[Thomas De Schampheleire]

Hi Angelo,

On Mon, Oct 27, 2014 at 10:56 PM, Angelo Compagnucci
<angelo.compagnucci@gmail.com> wrote:
> Hello List!
>
> As a sign of gratitude for my recently committed mono patches, I
> thought having a responsive design website could be a nice addition to
> Buildroot.
>
> With this in mind, I updated to the latest bootstrap3 and jquery
> versions, fixed various unbootstrapness everywhere and made the
> website responsive!
>
> The website is very similar to the old one, the most difficult task
> was to clean it to let conditional css rules make their job.
>
> You can try it (also with your mobile phone) at:
>
> http://buildrootrd.idea-on-line.it/ (WARNING: dns is stil propagating)
>
> I'm open to suggestions and if you like the work I'll continue to fix
> the entire website and I'll send a patch in the next few days.

Many thanks for this work, this is very much appreciated!
This has been (somewhere) on my TODO list for a long time, and I'm
glad you picked it up.

Some comments:

- the 'Buildroot' button top-left should link to the home page,
currently it links to #.
- for some reason, the website does not support zooming on Android
with Dolphin Browser. I haven't checked other browsers. Is this
expected?
- on a desktop, the Sponsors page does not look the same way as the
original. (Firefox 29 on Linux)

Best regards,
Thomas

[Buildroot] [RFC] Responsive Design Website

[Angelo Compagnucci]

Hi Thomas!

> Some comments:
>
> - the 'Buildroot' button top-left should link to the home page,
> currently it links to #.
> - for some reason, the website does not support zooming on Android
> with Dolphin Browser. I haven't checked other browsers. Is this
> expected?

Yes, it's expected, I disabled zooming due to the responsive layout.
If you want, I can re-enable it, but it's a little bit in contrast
with RD principles.

> - on a desktop, the Sponsors page does not look the same way as the
> original. (Firefox 29 on Linux)

As stated in the original email, the work is not complete, I started
with the homepage and included header and footer just to show
something. Obviously, if you love the result, I can commit a full set
of patches.
In the next few days, I'll update my copy of the website, when it
looks as expected, I'll send a PR.

Angelo

-- 
Profile: http://it.linkedin.com/in/compagnucciangelo

[Buildroot] [RFC] Responsive Design Website

[Thomas De Schampheleire]

Hi Angelo,

On Tue, Oct 28, 2014 at 2:31 PM, Angelo Compagnucci
<angelo.compagnucci@gmail.com> wrote:
> Hi Thomas!
>
>> Some comments:
>>
>> - the 'Buildroot' button top-left should link to the home page,
>> currently it links to #.
>> - for some reason, the website does not support zooming on Android
>> with Dolphin Browser. I haven't checked other browsers. Is this
>> expected?
>
> Yes, it's expected, I disabled zooming due to the responsive layout.
> If you want, I can re-enable it, but it's a little bit in contrast
> with RD principles.

This is arguable. Here is an interesting link on this topic:
http://ux.stackexchange.com/questions/37511/should-users-be-able-to-zoom-in-a-responsive-webdesign

From the top answers it seems the consensus is that zooming should be possible.


>
>> - on a desktop, the Sponsors page does not look the same way as the
>> original. (Firefox 29 on Linux)
>
> As stated in the original email, the work is not complete, I started
> with the homepage and included header and footer just to show
> something. Obviously, if you love the result, I can commit a full set
> of patches.
> In the next few days, I'll update my copy of the website, when it
> looks as expected, I'll send a PR.

I definitely like these changes. Of course I cannot speak for the
entire community, but I do not expect anyone to object against a
better mobile experience of the website, provided that the desktop
experience remains good.

Looking forward to the result!

Best regards,
Thomas

[Buildroot] [RFC] Responsive Design Website

[Thomas Petazzoni]

Dear Angelo Compagnucci,

On Mon, 27 Oct 2014 22:56:10 +0100, Angelo Compagnucci wrote:

> As a sign of gratitude for my recently committed mono patches, I
> thought having a responsive design website could be a nice addition to
> Buildroot.
> 
> With this in mind, I updated to the latest bootstrap3 and jquery
> versions, fixed various unbootstrapness everywhere and made the
> website responsive!
> 
> The website is very similar to the old one, the most difficult task
> was to clean it to let conditional css rules make their job.
> 
> You can try it (also with your mobile phone) at:
> 
> http://buildrootrd.idea-on-line.it/ (WARNING: dns is stil propagating)
> 
> I'm open to suggestions and if you like the work I'll continue to fix
> the entire website and I'll send a patch in the next few days.

Definitely looks good. And it's nice to have someone interested in
working on the web site. If you're interested, I have a TODO list of
things to do on the web site :-)

However, one thing that I find weird in your new version is that the
"Recent commits" and "Recent discussions" are placed in a weird way
from a horizontal point of view. On the original web site, they look
nicely aligned with the gray block containing the few words of
introduction about Buildroot. But on your new version, they are placed
in a weird way.

In case I'm not clear, here are the screenshot before/after:

  http://free-electrons.com/~thomas/buildroot-org-before.png
  http://free-electrons.com/~thomas/buildroot-org-after.png

Thanks!

Thomas
-- 
Thomas Petazzoni, CTO, Free Electrons
Embedded Linux, Kernel and Android engineering
http://free-electrons.com

[Buildroot] [RFC] Responsive Design Website

[Maxime Hadjinlian]

Hi Angelo, all
> On Mon, 27 Oct 2014 22:56:10 +0100, Angelo Compagnucci wrote:
>
>> As a sign of gratitude for my recently committed mono patches, I
>> thought having a responsive design website could be a nice addition to
>> Buildroot.
>>
>> With this in mind, I updated to the latest bootstrap3 and jquery
>> versions, fixed various unbootstrapness everywhere and made the
>> website responsive!
>>
>> The website is very similar to the old one, the most difficult task
>> was to clean it to let conditional css rules make their job.
>>
>> You can try it (also with your mobile phone) at:
>>
>> http://buildrootrd.idea-on-line.it/ (WARNING: dns is stil propagating)
>>
>> I'm open to suggestions and if you like the work I'll continue to fix
>> the entire website and I'll send a patch in the next few days.

Really nice ! Thanks a lot for this, as Thomas, said, if you are
interested in working on this, there's a lot that can be done :).
I have the same issue as Thomas for the alignment.
Regarding the zoom, it's only from my users perspective but I would
really like to be able to zoom on the web page, it's really usefull.

[Buildroot] [RFC] Responsive Design Website

[Angelo Compagnucci]

Hello List,

Here me again! This time:

* Major upstanding bugs resolved (wrong css alignment)
* Zoom-able content
* Fully reviewed, each page adapted to bootstrap3
* Fully responsive everywhere!

Hope you like it!

Sincerely, Angelo.

2014-10-29 15:24 GMT+01:00 Maxime Hadjinlian <maxime.hadjinlian@gmail.com>:
> Hi Angelo, all
>> On Mon, 27 Oct 2014 22:56:10 +0100, Angelo Compagnucci wrote:
>>
>>> As a sign of gratitude for my recently committed mono patches, I
>>> thought having a responsive design website could be a nice addition to
>>> Buildroot.
>>>
>>> With this in mind, I updated to the latest bootstrap3 and jquery
>>> versions, fixed various unbootstrapness everywhere and made the
>>> website responsive!
>>>
>>> The website is very similar to the old one, the most difficult task
>>> was to clean it to let conditional css rules make their job.
>>>
>>> You can try it (also with your mobile phone) at:
>>>
>>> http://buildrootrd.idea-on-line.it/ (WARNING: dns is stil propagating)
>>>
>>> I'm open to suggestions and if you like the work I'll continue to fix
>>> the entire website and I'll send a patch in the next few days.
>
> Really nice ! Thanks a lot for this, as Thomas, said, if you are
> interested in working on this, there's a lot that can be done :).
> I have the same issue as Thomas for the alignment.
> Regarding the zoom, it's only from my users perspective but I would
> really like to be able to zoom on the web page, it's really usefull.



-- 
Profile: http://it.linkedin.com/in/compagnucciangelo

[Buildroot] [RFC] Responsive Design Website

[Angelo Compagnucci]

Hi Thomas

> Definitely looks good. And it's nice to have someone interested in
> working on the web site. If you're interested, I have a TODO list of
> things to do on the web site :-)

Yes, sure! Share with me something to work on!

Sincerely, Angelo

-- 
Profile: http://it.linkedin.com/in/compagnucciangelo

[Buildroot] [RFC] Responsive Design Website

[Angelo Compagnucci]

Hello List,

Another slightly update (minor fixings), now it should be ready for production!

Hope you like it!

http://buildrootrd.idea-on-line.it/

Angelo


2014-10-30 8:14 GMT+01:00 Angelo Compagnucci <angelo.compagnucci@gmail.com>:
> Hi Thomas
>
>> Definitely looks good. And it's nice to have someone interested in
>> working on the web site. If you're interested, I have a TODO list of
>> things to do on the web site :-)
>
> Yes, sure! Share with me something to work on!
>
> Sincerely, Angelo
>
> --
> Profile: http://it.linkedin.com/in/compagnucciangelo



-- 
Profile: http://it.linkedin.com/in/compagnucciangelo

[Buildroot] [RFC] Responsive Design Website

[Thomas Petazzoni]

Dear Angelo Compagnucci,

On Fri, 31 Oct 2014 10:06:48 +0100, Angelo Compagnucci wrote:
> Hello List,
> 
> Another slightly update (minor fixings), now it should be ready for production!
> 
> Hope you like it!
> 
> http://buildrootrd.idea-on-line.it/

Looks great! There's one issue left I believe: on the sponsors page,
when you reduce the width of the browser window, then the width of each
gray block for each sponsor is different. See the screen shot at
http://imgur.com/hw3MaRc.

Can you send the patches for the web site, so we can commit them in the
repository?

Thanks a lot for your work!

Thomas
-- 
Thomas Petazzoni, CTO, Free Electrons
Embedded Linux, Kernel and Android engineering
http://free-electrons.com

[Buildroot] [RFC] Responsive Design Website

[Thomas De Schampheleire]

On October 31, 2014 10:19:32 AM CET, Thomas Petazzoni <thomas.petazzoni@free-electrons.com> wrote:
>Dear Angelo Compagnucci,
>
>On Fri, 31 Oct 2014 10:06:48 +0100, Angelo Compagnucci wrote:
>> Hello List,
>> 
>> Another slightly update (minor fixings), now it should be ready for
>production!
>> 
>> Hope you like it!
>> 
>> http://buildrootrd.idea-on-line.it/
>
>Looks great! There's one issue left I believe: on the sponsors page,
>when you reduce the width of the browser window, then the width of each
>gray block for each sponsor is different. See the screen shot at
>http://imgur.com/hw3MaRc.

Another thing I noticed is that there's a
 considerable delay (about half a second)
 between tapping the menu button and
 the menu starting sliding down. I see this
 on my phone. Is this a configurable option
 or just processing?

Thanks,
Thomas

[Buildroot] [RFC] Responsive Design Website

[Angelo Compagnucci]

Hi list!

@ Thomas Petazoni
> Looks great! There's one issue left I believe: on the sponsors page,
> when you reduce the width of the browser window, then the width of each
> gray block for each sponsor is different. See the screen shot at
> http://imgur.com/hw3MaRc.

Fixed. I'm reworking the patch and plitting in approriate subpatches,
they will be ready in weekend I think.

@ Thomas De Schampheleire
> Another thing I noticed is that there's a
> considerable delay (about half a second)
> between tapping the menu button and
> the menu starting sliding down. I see this
> on my phone. Is this a configurable option
> or just processing?

Cannot reproduce the problem on my really old htc g2. For me the menu
sliding is more or less instantaneous.
By the way, I used the defaults provided by bootstrap, I'll try to look at that.

Sincerely, Angelo

2014-10-31 11:43 GMT+01:00 Thomas De Schampheleire <patrickdepinguin@gmail.com>:
> On October 31, 2014 10:19:32 AM CET, Thomas Petazzoni <thomas.petazzoni@free-electrons.com> wrote:
>>Dear Angelo Compagnucci,
>>
>>On Fri, 31 Oct 2014 10:06:48 +0100, Angelo Compagnucci wrote:
>>> Hello List,
>>>
>>> Another slightly update (minor fixings), now it should be ready for
>>production!
>>>
>>> Hope you like it!
>>>
>>> http://buildrootrd.idea-on-line.it/
>>
>>Looks great! There's one issue left I believe: on the sponsors page,
>>when you reduce the width of the browser window, then the width of each
>>gray block for each sponsor is different. See the screen shot at
>>http://imgur.com/hw3MaRc.
>
> Another thing I noticed is that there's a
>  considerable delay (about half a second)
>  between tapping the menu button and
>  the menu starting sliding down. I see this
>  on my phone. Is this a configurable option
>  or just processing?
>
> Thanks,
> Thomas
>



-- 
Profile: http://it.linkedin.com/in/compagnucciangelo

[Buildroot] [RFC] Responsive Design Website

[Thomas De Schampheleire]

On October 31, 2014 12:06:43 PM CET, Angelo Compagnucci <angelo.compagnucci@gmail.com> wrote:

>
>Cannot reproduce the problem on my really old htc g2. For me the menu
>sliding is more or less instantaneous.
>By the way, I used the defaults provided by bootstrap, I'll try to look
>at that.

Don't bother: I checked using the stock android browser and the delay is not there. Must be a Dolphin issue.

[Buildroot] [RFC] Responsive Design Website

[Peter Korsgaard]

>>>>> "Thomas" == Thomas Petazzoni <thomas.petazzoni@free-electrons.com> writes:

 > Dear Angelo Compagnucci,
 > On Mon, 27 Oct 2014 22:56:10 +0100, Angelo Compagnucci wrote:

 >> As a sign of gratitude for my recently committed mono patches, I
 >> thought having a responsive design website could be a nice addition to
 >> Buildroot.

 > Definitely looks good. And it's nice to have someone interested in
 > working on the web site.

Yes, thanks a lot - Looks great!

-- 
Bye, Peter Korsgaard