Regarding "Giving Sugar Labs Website a New Look"

[geekrypter]

Hi,

I am new to the sugar labs community and I am really looking forward to contribute to this community. I have come across the "Giving Sugar Labs Website a New Look" idea posted on "https://wiki.sugarlabs.org/go/Summer_of_Code/2017". Being a UI/UX designer and developer, I am really excited to draft my proposal based on this idea for GSOC 2017. But I have few queries which I wish would be answered.
1.Should I be posting the UI mockups in form of Issues on github or is any preferred way?
2.As mentioned on https://github.com/sugarlabs/www-sugarlabs/blob/master/STRUCTURE.md, is there any particular design aspects that is being looked into adopting from {https://learningequality.org and http://haxe.org}?
I hope my queries will be answered as soon as possible so that I can start contributing to this exciting community.
Thank you.

[samswag]

Thanks for reaching out, i am one of the mentors of the project. Here is how you can get in touch with the community of developers http://lists.sugarlabs.org/listinfo/sugar-devel I don't really understand the other questions you asked. Hoping to hear from you soon. Samson G

…

On Thu, Mar 2, 2017 at 2:22 PM, GeeKrypter ***@***.***> wrote: Hi, I am new to the sugar labs community and I am really looking forward to contribute to this community. I have come across the "Giving Sugar Labs Website a New Look" idea posted on "https://wiki.sugarlabs.org/ go/Summer_of_Code/2017". Being a UI/UX designer and developer, I was really excited to draft my proposal based on this idea for GSOC 2017. But I have few queries which I wish would be answered. 1.Is there a mailing list which I could join for communication?[I was not able to find it.] 2.Should I be posting the UI mockups in form of Issues on github or is any preferred way? 3.As mentioned on https://github.com/sugarlabs/www-sugarlabs/blob/master/ STRUCTURE.md, is there any particular design aspects that is being looked into adopting from {https://learningequality.org and http://haxe.org}? I hope my queries will answered as soon as possible so that I can start contributing to this exciting community. Thank you. — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#63>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AFxLWQD2ePG0fg9UFjnYnPTmeu-SsN_0ks5rhsKDgaJpZM4MQ-lT> .

[geekrypter]

Hi @samswag,

I apologise for not phrasing my queries in a proper way. Below the rephrased queries:

1. As per the requirement of "Giving Sugar Labs Website a New Look", one has to redesign sugar labs website, so should I be providing the UI design mockups which I have in mind in this issue thread [so that you or any other mentors can have a look at it and provide feedback] or is there any other platform where I could share my design mockups to get feedback?
   2.As mentioned in https://github.com/sugarlabs/www-sugarlabs/blob/master/STRUCTURE.md, your community is looking to adopt some design principles from your peer websites like {https://learningequality.org and http://haxe.org}, so is there any particular design principles or aspects which needs to be taken into consideration from these 2 websites to design sugar labs website?

Thank you.

[samswag]

You can share your designs here. Maybe send images from screenshots.

First the if you take a look at the proposed plan, you will see that this website mentioned gives you examples of what we would like the website to be or become. Unlike our current website, most of the information have been outdated, birth of new projects like the sugarizer. So we basically need a interactive website where both developers, learners, teachers and possible donors can easily understand. For example Sugar is available on windows, IOS and android (http://sugarizer.org/). Also great footers like the haxe website, we we can add our social media links and other details.

I hope this helps.

Samson G

[geekrypter]

Thank you @samswag, I will start working on the design and keep you updated.

[samswag]

Sure, may the force be with you.

[quozl]

Thanks for looking into this.

Please ensure the web site works with Sugar itself. The Sugar browser; the Browse activity, contains a link to www.sugarlabs.org, and so the result must be successfully rendered and responsive; or the site should identify Browse and redirect to a simpler site. Most users of Sugar are using Browse-157.3 or slightly earlier, upon WebKit 1.10. New users of Sugar will be on WebKit 2.14 or later.

Please also briefly research and understand why several previous redesign efforts have faltered. It hasn't been for lack of ideas, but for failure to achieve a consensus on the design changes. Early functioning pages on web servers that can be tested with Sugar would help. Designs shared as screenshots won't get as much testing.

[samswag]

Duly noted, thanks for the tips.

…

On Fri, Mar 3, 2017 at 7:31 PM, James Cameron ***@***.***> wrote: Thanks for looking into this. Please ensure the web site works with Sugar itself. The Sugar browser; the Browse activity, contains a link to www.sugarlabs.org <https://github.com/sugarlabs/browse-activity/blob/master/data/index.html#L55>, and so the result must be successfully rendered and responsive; *or* the site should identify Browse and redirect to a simpler site. Most users of Sugar are using Browse-157.3 or slightly earlier, upon WebKit 1.10. New users of Sugar will be on WebKit 2.14 or later. Please also briefly research and understand why several previous redesign efforts have faltered. It hasn't been for lack of ideas, but for failure to achieve a consensus on the design changes. Early functioning pages on web servers that can be tested with Sugar would help. Designs shared as screenshots won't get as much testing. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#63 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AFxLWb-j372mKKBUt6Iuq7QkRZHXRl1Wks5riFx4gaJpZM4MQ-lT> .

[geekrypter]

Thank you for the advice @quozl . Will take it into consideration.

[geekrypter]

Hi @samswag,

I apologise for the delayed response. In the meantime, I redesigned the Sugar website and integrated my design into the original Sugar website source code in my local machine. I have considered to use parallax scrolling as a design feature and would like to know if I could get any background images that could be used for the website or should I just take any suitable images?

Note:
Once I get the background images, I just have to integrate them as images and will post screenshots of the redesigned website here. As of now, the integrated source code has been functioning properly under the existing environment set-up of the original source code.

Thank you.

[geekrypter]

Hi @samswag, I have added background images taken from "http://planet.sugarlabs.org" and also logo was taken from "https://wiki.sugarlabs.org/go/Marketing_Team/Logo" for the redesigned website.
If possible do suggest any other background images that I could use for the website.
I took a screen recording showcasing the website and below is the link to view it:
https://drive.google.com/open?id=0B4WvXpWS9zoRYTc2X2VFSVdVaXM

I request you to provide feedback on my website design and would love to modify as required.

Thank you.

[samswag]

Can you host in github? That would be better. On 12 Mar 2017 3:21 pm, "GeeKrypter" <notifications@github.com> wrote: Hi @samswag <https://github.com/samswag>, I have added background images taken from "http://planet.sugarlabs.org" and also logo was taken from " https://wiki.sugarlabs.org/go/Marketing_Team/Logo" for the redesigned website. If possible do suggest any other background images that I could use for the website. I took a screen recording showcasing the website and below is the link to view it: https://drive.google.com/open?id=0B4WvXpWS9zoRYTc2X2VFSVdVaXM I request you to provide feedback on my website design and would love to modify as required. Thank you. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#63 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AFxLWWA-iLNhvvFrBG8hJoK6nfgoIZ_Zks5rk_88gaJpZM4MQ-lT> .

[samswag]

I like the concept of the website, but if you can host it in github pages that would be awesome for me and my fellow mentors to have a better view and possible land some comments and suggestions.
https://render.bitstrips.com/v2/cpanel/10215973-263707750_2-s1-v1.png?transparent=1&palette=1

[geekrypter]

Hi @samswag,

I again apologise for the late reply. Based on your suggestion, I have hosted my redesign of "SugarLabs" website using Github Pages.

URL:
https://geekrypter.github.io/sugarLabsWebsiteRedesign/

I would be looking forward for feedback from you and the rest of the mentors. Would be open to any modifications and keep improving my design.

Thanks,
Raju.

[quozl]

Thanks, very interesting.

On a slow data link the page loaded very slowly; total of 6MB, mostly caused by bg3.png a 3.42 MB image, but also because of the number of requests made (35). There were four (4) bursts of requests. Photographic images may be better in JPEG format. Some assets may be better encapsulated in the HTML to lower the number of requests, as requests add latency over slow links.

On Ubuntu 16.04 with Browse-200.1 the page rendered and scrolled without problem, though on some laptops the fan would start.

• 14% CPU load after initial page load and before scrolling,
• 22% CPU load with carousel visible,
• 140% CPU load on scrolling (dual core).

On XO-4 with Browse-157.3, the page rendered slowly and scrolled slowly.

• 15% CPU load after initial page load and before scrolling,
• 30% CPU load with carousel visible,
• 85% CPU load on scrolling.

On XO-1 with Browse-157.3, the page loaded slowly, rendered slowly, and scrolled slowly.

• 14% CPU load and 41% RAM load after initial page load and before scrolling,
• 100% CPU load and 50% RAM load with carousel visible; and the animation is slow and stutters,
• 100% CPU load on scrolling; and takes about ten seconds for every page step.

Other laptop models not checked, as the above are representative of the range. For your interest, the approximate quantities manufactured by model were;

• 1,145,000 XO-1,
• 965,000 XO-1.5,
• 280,000 XO-1.75, and
• 177,000 XO-4.

Most contained a link to activities.sugarlabs.org, which links to www.sugarlabs.org. By security design, it is not known how many are still in use, but based on anonymized update requests in server logs the number is considerable.

Suggestions:

• reduce the size of the data to be loaded,

• detect Sugar as browser and disable animations, or reduce the animation frame rate,

• study the request pattern, confirm there are 404 errors for jquery-ui.min.css, jquery-2.2.3.min.js, and jquery-ui.min.js, and configure your source to avoid these requests,

• let us know how this design meets the requirement; "making it more attractive and easier to explore".

• let us know the licenses of the dependencies you've used.

• set up a test environment for testing Browse and Sugar with the page, and document your test method; my method was using top(1) over SSH to assess CPU and RAM load.

• fix a minor typo, walter @sugarlas.org should be @sugarlabs.org

• fix a minor company name problem; "One Laptop Per Child" should be "One Laptop per Child"; I'm obliged to mention that because I work for them.

[geekrypter]

Hi @quozl,

Thank you for your feedback. I have made the following changes to improve the website speed and additional corrections:

1.Replaced bg3.png with another image taken from "http://planet.sugarlabs.org"
2.Replaced bg1,bg2,bg3,bg4 images with their JPEG versions.
3.Replaced bg1,bg2,bg3,bg4,logo images with their compressed versions so that it reduces their sizes.
4.Replaced walter@sugarlas.org to walter@sugarlabs.org.
5.Replaced "main.js" and "jquery.countTo.js" with their minified versions so that it reduces the load of the data.
6.Placed all JS scripts present in the header to the bottom of the body section.
7. 404 errors have been resolved.
8."One Laptop Per Child" has been replaced with "One Laptop per Child"
in "index.html".
9.Added license information of the dependencies used, into a text file named "AdditionalLicenseInfo.txt". This file has been added to the repository "https://github.com/geekrypter/sugarLabsWebsiteRedesign".
10.Information regarding to "let us know how this design meets the requirement; "making it more attractive and easier to explore"" has been added to the "README.md" file of the repository "https://github.com/geekrypter/sugarLabsWebsiteRedesign".

Please test the website speed and provide your feedback.

I do have the following to-do list and will inform you once I am done with them:

1."detect Sugar as browser and disable animations, or reduce the animation frame rate".
2."set up a test environment for testing Browse and Sugar with the page, and document your test method; my method was using top(1) over SSH to assess CPU and RAM load".
3.If possible, I will try to reduce the number of requests. (I have tried doing the same for JS scripts and CSS scripts but it displayed undesirable changes so will look into it.)

I have few queries which I hope could be answered:

1.Other occurances of "One Laptop Per Child" were mostly in the posts, should I change them too?
2.Are there any other images I could use for background images or should I continue with the images that I have used?
3.Some of the images used previously for the website includes PNG versions. Should I change them to their JPEG versions?
4.Could not find links which belonged to "Most contained a link to activities.sugarlabs.org, which links to www.sugarlabs.org". Please do assist me if I am wrong.

Thank you.