Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Regarding "Giving Sugar Labs Website a New Look" #63

Closed
geekrypter opened this issue Mar 2, 2017 · 127 comments
Closed

Regarding "Giving Sugar Labs Website a New Look" #63

geekrypter opened this issue Mar 2, 2017 · 127 comments

Comments

@geekrypter
Copy link
Contributor

geekrypter commented Mar 2, 2017 •
edited
Loading

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
Copy link
Member

samswag commented Mar 2, 2017 via email

@geekrypter
Copy link
Contributor Author

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
Copy link
Member

samswag commented Mar 3, 2017

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
Copy link
Contributor Author

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

@samswag
Copy link
Member

samswag commented Mar 3, 2017

Sure, may the force be with you.

@quozl
Copy link
Contributor

quozl commented Mar 3, 2017

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
Copy link
Member

samswag commented Mar 3, 2017 via email

@geekrypter
Copy link
Contributor Author

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

@geekrypter
Copy link
Contributor Author

geekrypter commented Mar 8, 2017 •
edited
Loading

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
Copy link
Contributor Author

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
Copy link
Member

samswag commented Mar 12, 2017 via email

@samswag
Copy link
Member

samswag commented Mar 13, 2017

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
Copy link
Contributor Author

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
Copy link
Contributor

quozl commented Mar 13, 2017 •
edited
Loading

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.

1

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
Copy link
Contributor Author

geekrypter commented Mar 15, 2017 •
edited
Loading

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.

@geekrypter
Copy link
Contributor Author

geekrypter commented Mar 15, 2017 •
edited
Loading

@quozl and @samswag, should I start working on my GSOC proposal too?

@samswag
Copy link
Member

samswag commented Mar 15, 2017

First, i am going to send you better pictures for the website.

In my end, I tested the website using the updated version of Chrome from my Macbook, it pretty fine here but not too good with safari. But have some issues about the logo of the website. If you look at the current website, you will notice that the logo changes also with the favicon. We intend to keep that in check. Also speaking the color of the website it will be nice if one scrolls down it logo changes to a different color same with the favicon and the current page color.

For example, this current website you hosted has blue and white background color same with the
Sugar Labs logo but the favicon is orange.

Secondly, Sugarizer is our newest project that is basically the future of sugar because of it easy installation process. Currently it is hosted and maintained by our team down in France, but we want to make new comers feel welcomed and get more like a "trailer version" of Sugar.
screen shot 2017-03-15 at 9 35 38 pm

Above is a screenshot from the current website, it is an image of Sugar interface, but we want to replace that with a frame of Sugarizer (http://try.sugarizer.org/). It will be like a frame of a space of a youtube, but instead of a video it will be a live JS version of the try.sugarizer.org (sugarizer).

I will reach out to the other mentors for comments, but use https://github.com/sugarlabs/www-sugarlabs/blob/master/STRUCTURE.md as a guide.

Samson Goddy

Sent from my Android

@quozl
Copy link
Contributor

quozl commented Mar 15, 2017 •
edited by samswag
Loading

Well, if you are deprecating the Sugar desktop environment in favour of Sugarizer, because of ease of installation, then I've no further need to be involved in the web site design. You can also;

  • remove downloads,

  • remove activity library (these are only compatible with the desktop environment),

  • remove social help (it is a desktop environment feature only).

@samswag
Copy link
Member

samswag commented Mar 15, 2017

Nope don't get me wrong, i was only making some suggestions. There is no point for you to leave, i am speaking based on this line "Leads: Consideration, Try Outs, Action Flows" based on the https://github.com/sugarlabs/www-sugarlabs/blob/master/STRUCTURE.md, there is a plan to add "try now" on the website since Sugarizer is the taste of Sugar (not full Sugar experince like that of the Python version).

@samswag
Copy link
Member

samswag commented Mar 15, 2017

I was giving a glance on how the "try now" which is the "Sugarizer" for people(new comers) who knows nothing about sugar. Your work is really helpful especially in the area of testing the site on Ubuntu and xo browsers.

@davelab6
Copy link
Contributor

davelab6 commented Mar 15, 2017 via email

@davelab6
Copy link
Contributor

davelab6 commented Mar 15, 2017 via email

@samswag samswag closed this as completed Mar 15, 2017
@samswag samswag reopened this Mar 15, 2017
@quozl
Copy link
Contributor

quozl commented Mar 15, 2017

@geekrypter, to answer your questions;

  1. Other occurances of "One Laptop Per Child" were mostly in the posts, should I change them too?

It would depend on the context; you decide. Where the context is referring to the organisation, the registered name of the organisation has been "One Laptop per Child Association Inc", and is now "OLPC, Inc". We use "One Laptop per Child" in new source code copyright statements. Where the context is referring to an idea of one laptop for every child, it may be better to use a more common education market term such as one-to-one computing.

  1. Are there any other images I could use for background images or should I continue with the images that I have used?

I've no opinion. I ignore the images unless they cause a problem. Such as page load time.

  1. Some of the images used previously for the website includes PNG versions. Should I change them to their JPEG versions?

Not necessarily. Don't respond automatically. Whether to use PNG or JPEG depends on the type of image and the use to which it is put. My reason for mentioning use of JPEG was that a photograph will be smaller, and so download quicker, yet you had used PNG for the photograph. On the other hand a UI screenshot will be smaller as a PNG. Please use appropriate tools to convert images between formats, choose an appropriate JPEG image quality, and then compare the file sizes between PNG and JPEG. The size in bytes should be minimised, so that page load times are minimised, yet without degrading appearance. You will also notice that SVG is a special case; it can scale, and can be very small.

  1. 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.

You may have misunderstood what I was saying; I'll try again. There were produced roughly 2.6 million laptops, and we still produce them on demand, and the laptops have Sugar on them, and the Browse activity when launched has a default starting page with a link to activities.sugarlabs.org. When you visit activities.sugarlabs.org, you will find a link to www.sugarlabs.org. My purpose in mentioning this was to give you an idea of the impact to the installed base of changes to www.sugarlabs.org, and the potential for bad experiences if the site is difficult to use.

@samswag
Copy link
Member

samswag commented Mar 15, 2017

+1 @quozl for the clearance

@quozl
Copy link
Contributor

quozl commented Mar 15, 2017

Only mentioned copyright statements because that's where I fix it most. But for this new work, any copyright can be either yours, or assign it to Sugar Labs. License should probably be one of the Creative Commons.

@davelab6
Copy link
Contributor

davelab6 commented Mar 16, 2017 via email

@geekrypter
Copy link
Contributor Author

geekrypter commented Mar 16, 2017 •
edited
Loading

Thank you @samswag, @davelab6, @quozl, for spending time in involving in the discussion and helping me. Since it was a long and interactive discussion, I would like to break it up and respond in parts.

1.Thanks @quozl for giving clarification to my queries.
2. @davelab6 and @quozl, I have added the following license related information to the footer of the website.(Screenshot below). I hope this was what was expected.
licenseimage
3. @samswag and @davelab6 , I would try to develop the website further by following the requirements as stated in "https://github.com/sugarlabs/www-sugarlabs/blob/master/STRUCTURE.md".
4.@samswag, I have changed the favicon icon to blue to match it with the logo and I was not able to understand what was mentioned by you stating "Secondly, Sugarizer is our newest project that is basically the future of sugar because of it easy installation process. Currently it is hosted and maintained by our team down in France, but we want to make new comers feel welcomed and get more like a "trailer version" of Sugar.Above is a screenshot from the current website, it is an image of Sugar interface, but we want to replace that with a frame of Sugarizer (http://try.sugarizer.org/). It will be like a frame of a space of a youtube, but instead of a video it will be a live JS version of the try.sugarizer.org (sugarizer)." because from the discussion that followed afterwards I was not able to understand what is expected to be done. Could you please help me out.

Thank you.

@samswag
Copy link
Member

samswag commented Mar 16, 2017

i will come up with a better explanation later.

@geekrypter
Copy link
Contributor Author

geekrypter commented Jun 17, 2017 •
edited
Loading

Hi,

Made few changes:

  1. " Please center "GLIMPSE OF SUGAR..."" - made the change.
  2. "Please increase the distance the between the navigation dots and the activity name buttons." -made the change.
  3. "Increase space between the text and images." - made the change.
  4. Added the "about us" page. Which can be accessed through the below button or the footer or at "https://geekrypter.github.io/sugarLabsWebsiteRedesign/about-us/".
    screen shot 2017-06-17 at 7 48 33 pm 2
  5. Now, the header logo is clickable and it links to the main page.
  6. Minor padding and margin given for few elements for proper spacing.

Please provide your feedback.

Thank you.

@geekrypter
Copy link
Contributor Author

geekrypter commented Jun 20, 2017 •
edited
Loading

Hi,

Made the following changes:
The main focus was to solve issues and the below 2 issues were handled.

To solve issue 65, made the below changes:

1.Changed the navigation bar:
2017-06-18 1
2. Shifted the downloads section towards the top.
2017-06-18
3. Changed the title of "Downloads" section on main page to "Get Sugar".
4. Changed the "Get Sugar" section content.
capture8

To solve issue 22, made the below change:

1.Added a new page called "libre software culture" which can be accessed through the footer or at "https://geekrypter.github.io/sugarLabsWebsiteRedesign/about-libre-software-culture/"
2. Added a separate list item under resources section of footer to link the above "libre software culture" page.
capture7

Optimization:

  1. Before there were nav.html, nav1.html but now removed the nav1.html
  2. Before there were base.html, base1.html but now removed the base1.html
  3. Before there were main.js, main1.js but now removed the main1.js
  4. Removed jquery.flexslider-min.js
  5. Removed style.css and added the code to airspace.css
  6. Removed responsive.css and added the code to airspace.css
  7. Removed flexslider.css
    The above 7 files were removed to reduce the number of requests on the website.

Please provide your feedback.

Thank you.

@geekrypter
Copy link
Contributor Author

geekrypter commented Jun 28, 2017 •
edited
Loading

Hi,

I apologise for not updating what I was working on for the past 8 days. (I was working on the changes but did not post them here) I will list out all the changes I have worked on below based on dates.

20th June to 26th June:

Changes:

  1. The left padding for footer for mobile screens has been reduced.

  2. drop-down in footer for mobile screens was not working and it was fixed.

  3. Back-to-top button removed as floating button and fixed to the footer for both desktop and mobile screens.

  4. Chat window for both desktop and mobile screen shifted to the right.

  5. Social media icons have been removed for smaller screens on the side and for both desktop screen it has been shifted to the left.

  6. Added a new "IRC" page which gives a basic introduction to IRC.

  7. Chat window for mobile screens has been changed.
    capture4

  8. Solved the below problem.

  9. Chat window for both desktop screens shifted more towards the right.

  10. Added reflection to the images in the "Glimpse of Sugar" section of main page.

  11. Changed the images in the "Glimpse of Sugar" section of main page.

  12. Changed the captions below the images in the "Glimpse of Sugar" section of main page.

  13. New list items were added to the "Resources" section of the footer.
    capture3

  14. Corrected grammatical mistakes and other minor mistakes in the "IRC" page.

  15. Linked as many list items in footer and header. Some are to be decided on where to be linked to.

  16. Added license information of all the dependencies present in the code. It is present in the "LicenseInformation.txt" file.

  17. Added more content to the documentation(README.md file)

  18. Cleaned up the code base by removing unnecessary code.

Optimization:
  1. Instead of using iframe and calling the youtube URL to host the video in the main page, replaced it by using the video tag of html and using a convertor to use the mp4 converted version of the video. This reduced the number of requests from the website.
  2. Removed the below files:
    (i) css/font-awesome.min.css
    (ii) js/jquery.counterup.js
    (iii) js/float-panel.js
  3. Instead of calling both js/vendor/jquery-1.10.2.min.js and //ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js, now only calling from //ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js
    1. Instead of calling js/modernizr-2.6.2.min.js, now calling from js/vendor/modernizr-2.6.2.min.js

27th June:

Changes:
  1. Changes to the "LicenseInformation.txt" file.
    (My concentration was on optimization so did not do much changes)
Optimization:

  1. Replaced few stylesheets and scripts with their CDN versions for faster loading of resources.

  2. The below 2 images were resized to for more optimized loading.
    capture
    capture2

  3. Replaced the below image with its optimized version.
    capture2

  4. Not calling the style sheet - css/jquery.floating-social-share.min.css .

  5. Placed the below 2 scripts from head region to end of body region because it increases the page load.

Thank you.

@geekrypter
Copy link
Contributor Author

geekrypter commented Jul 13, 2017 •
edited
Loading

Hi,

I will list out all the changes I have worked on below based on dates.

28th July - 4th July

Changes:
  1. Added a loader screen with animations.[The main concentration was this in this period]
  2. Created a new page which can be reached at
    "https://geekrypter.github.io/sugarLabsWebsiteRedesign/booting-soas/" or through the "downloads section".
  3. About link in the header has been linked to the "about us" page of website.
  4. Maze image screenshot in "Glimpse of Sugar" section has been changed.
  5. There was an issue for the device animation in the loader screen so tried different solutions to fix the issue.
  6. For the desktop, added an info icon next to the + button and on clicking it, the user is directed to the about irc page.
  7. For the mobile, added an info icon next to the title and on clicking it, a popover will prompt the user if he/she would like to know more about irc and on clicking it the user is directed to the about irc page.
  8. Fixed the below line issue.
    capture

5th July - 11th July

Changes:

  1. Header color for mobile changed to a bit lighter color accent.

  2. The "Glimpse of Sugar" slideshow has been changed.

  3. (Chat window for desktop):
    a. Title font increased
    b. The info icon placed next to the title instead of close button and its size is also increased.
    c. The hover text will appear on top instead of left side.

  4. (Chat window for mobile):
    a. Title font increased.
    b. Info icon size increased.

  5. Added a thumbnail for the video in the main page.

  6. Added a new page in the attempts of redesigning this page https://developer.sugarlabs.org and the result can be found at https://geekrypter.github.io/sugarLabsWebsiteRedesign/developers/

  7. Added a new page in the attempts of redesigning this page https://developer.sugarlabs.org/what-can-i-do.md.html and the result can be found at https://geekrypter.github.io/sugarLabsWebsiteRedesign/developers/what_can_i_do.html

  8. A lot of mini changes were made to the main page of the website.

  9. Also instead of the long quote of walter bender, replaced it with a simpler quote.

  10. Fixed the below line issue.
    screen shot 2017-07-08 at 11 55 41 pm

  11. The chat window for desktops was not that responsive before, now it is better.

  12. The background image was not scaling properly before, it is better now.

  13. The buttons in the developers page was not properly rendering to the correct section of the website, now it is working properly.
    14.Decreased the height of the background image section and it now looks neat.
    15.The buttons section of developers page is more neat with clearer white text color and background color.

Optimization:

Changes were made for optimization but did not note them down.

Please provide your feedback.
Thank you.

@davelab6
Copy link
Contributor

davelab6 commented Jul 14, 2017 via email

@geekrypter
Copy link
Contributor Author

@davelab6 , thanks a lot for the information. :)

@geekrypter
Copy link
Contributor Author

geekrypter commented Jul 24, 2017 •
edited
Loading

Hi,

I will list out all the changes I have worked on below based on dates.

12th July - 17th July

Changes:
  1. The chat icon window that appears for mobile screens now appears for tablet screens.
  2. The chat icon window has been changed in terms of the icon itself, different styling for tablet and mobile screens, etc.
  3. One of the fun facts "20,000 cups of coffee" has been removed for now.
  4. The fun facts area on the main page has been rearranged to be responsive for 3 fun facts.
  5. The colors of social media icons floating have been changed.
  6. The colors of social media icons in the footer have been changed.
  7. The padding for chat icon window that appears for mobile screens was readjusted.
  8. The padding for chat icon window that appears for tablet screens was readjusted.
  9. Floating Instagram logo background color changed.
  10. Footer Instagram logo color changed.
  11. Footer Youtube logo color changed.
  12. The "Glimpse of Sugar" section slideshow was made more neater and proper transition between slides.
  13. Errors have been captured from the Chrome console and have been solved.
  14. Scroll bar design alteration has been set back to original.
Optimization:

Changes were made for optimization but did not note them down.

18th July - 24th July

Changes:
  1. Integrated the feature of adding subscribing to newsletters through emails.
  2. Integrated Google Analytics into the website.
  3. Changed the instagram logo colour to white in footer.
  4. Addition to license information file.
  5. Added the normalize.css library.
  6. Added the html5shiv library to support the latest css3, html5 for older browsers version.
  7. Added the type="text/css" to all stylesheet links so that browsers can properly identify them as css files.
  8. Walter Bender wrote great content on certain topics. I read the content and broke the content for categories like students, school administrators and parents.
  9. Integrated the above categorized content into the website by creating 4 new pages which can be accessed through the below links:
    a. https://geekrypter.github.io/sugarLabsWebsiteRedesign/students/
    b. https://geekrypter.github.io/sugarLabsWebsiteRedesign/parents/
    c. https://geekrypter.github.io/sugarLabsWebsiteRedesign/school-administrators/
    d. https://geekrypter.github.io/sugarLabsWebsiteRedesign/sugar-stories/
  10. Also integrated the sugar lesson plans from previous Google Code-In archive and created a seperate page for that which can be accessed through the below link:
    https://geekrypter.github.io/sugarLabsWebsiteRedesign/sugar-lesson-plans/
  11. Added the relevant links of new pages in the footer.
  12. Minor typographic changes on all the pages
  13. Added a condition to render the analytics code only when the website is in production and not on localhost because it disturbs the analytics report.
  14. Added the "approx. mins to read content" feature to few pages.
  15. Code clean up by removing unnecessary code.
  16. Addition to documentation(README file).
Optimization:
  1. Used the optimized version of the maze activity screenshot.
  2. Removed @import syntaxes from the main css file.
  3. Combined all fonts css into a single file css.
  4. Other changes were made for optimization but did not note them down.

Please provide your feedback.
Thank you.

@quozl
Copy link
Contributor

quozl commented Jul 24, 2017 via email

@geekrypter
Copy link
Contributor Author

Hi @quozl , I did not quite understand the context of your comment. Could you explain more?

@quozl
Copy link
Contributor

quozl commented Jul 25, 2017 via email

@samswag
Copy link
Member

samswag commented Jul 25, 2017

Hello @quozl i didn't also understand the message. You mentioned "When will this reach production" do you mean hosting the website?, so i believe @geekrypter question is related to mine.

@quozl
Copy link
Contributor

quozl commented Jul 25, 2017 via email

@geekrypter
Copy link
Contributor Author

Hi @quozl,
I sincerely apologise for the late response. When we host a Jekyll website using Github pages, the Jekyll environment is changed from "Development" to "Production". So, there was a confusion on whether you meant deployment or something related to the Jekyll environment. Thank you for clearing the doubt. Answering your query, we will be discussing with the Walter Bender regarding the deployment.

@quozl
Copy link
Contributor

quozl commented Jul 31, 2017 via email

@geekrypter
Copy link
Contributor Author

Thanks @quozl for the input. For the chat window, we should be clicking on the "+" symbol to expand it. But, I am changing it so that the chat window will be expanded only when a user clicks on the "Chat on our IRC" text. Regarding the cpu usage, its mostly due to the loader animations. We are planning to change the loader and keep it as simple as possible.

@chimosky
Copy link
Member

@geekrypter i think it'll be nice if it expands when you click on any part of the chat, not just on the text, and in a private browser the chat doesn't come up.

@geekrypter
Copy link
Contributor Author

Thanks @chimosky for the suggestion. Will surely look into it. There is a minor problem with the chat window currently which I am working upon. Do provide more suggestions if any.

@chimosky
Copy link
Member

chimosky commented Aug 1, 2017

As for the private browser it's working fine now.

@geekrypter
Copy link
Contributor Author

@chimosky, thanks for update :)

@geekrypter
Copy link
Contributor Author

geekrypter commented Aug 7, 2017 •
edited
Loading

Hi,

I will list out all the changes I have worked on below based on dates.

25th July - 1st August

Changes:
  1. Added material design to buttons of the website.
  2. Whenever a user clicks the chat window, it goes to top. This issue has been solved.
  3. Added material design to few components of website.
  4. Created a seperate page for the rpi which can be accessed at https://geekrypter.github.io/sugarLabsWebsiteRedesign/rpi/
  5. Chat window opens when clicked on text and "+" symbol.
  6. Changed the loader screen.
  7. The content from http://wiki.sugarlabs.org/go/Debian/Raspberry_Pi has been previously created on this page https://geekrypter.github.io/sugarLabsWebsiteRedesign/sugar-for-raspbian/ Now it has been shifted to the developer section at this link https://geekrypter.github.io/sugarLabsWebsiteRedesign/developers/rpi This because as Hrishi pointed out, we are not sure whether we display yet.
  8. However, the content from https://wiki.sugarlabs.org/go/Raspbian has been placed at https://geekrypter.github.io/sugarLabsWebsiteRedesign/sugar-for-raspbian
  9. Footer is made responsive.

2nd August - 8th August

Changes:
  1. For the header menu, instead of using material design, i corrected the current menu. So for the middle screen devices like xo,tablet,etc., the same mobile header menu will be displayed.
  2. The text in the download section is responsive now.
  3. The boxes in the download section are also responsive now.
  4. Removed the delay to wait after the website loads so that the loader will be faded out much more earlier.
  5. The floating social media icons were sometimes overlaped with the content on the main page. Took care of this problem now.
  6. Loader is only now for main page.
  7. Footer problem is corrected.
  8. Back to top button is also made responsive.
  9. There was a glitch with ghe chat window which is corrected now. Currently working to make sure that the chat window should open whenever the user clicks on any part of the window box.
  10. The both pages are mobile responsive now.
  11. Changed the header menu (will completely put all the items in it if it is good but for now its just for feedback on design) for 768px to 1260 px(can be changed)
  12. The chat window will be opened wherever clicked and not just on text.
  13. Changed the title representaion(as shown yesterday) for the pages which have title with background image(as an attempt to reduce usage of images unnecessarily)
  14. Integrated the code for disabling chat and loader on non main stream browser( i will test on browse activity and give updates)
  15. Fonts loading has been changed as the current google font was not loading on IE, browse properly so had to use other technique to load fonts( i will test on browse activity and give updates)
  16. Changed the loader screen.
  17. As suggested by Samson yesterday, gave gap in the particular sentence in About Us page.
  18. Created a page for music blocks and took content from https://github.com/walterbender/musicblocks which can be accessed at https://geekrypter.github.io/sugarLabsWebsiteRedesign/music-blocks
  19. Created a page for turtle blocks and took content from https://github.com/walterbender/turtleblocksjs which can be accessed at https://geekrypter.github.io/sugarLabsWebsiteRedesign/turtle-blocks-js
  20. Added the relevant footer list items for the above 2 pages
  21. Started working on SEO by adding "alt" text for all images.
  22. Corrected typos wherever possible.
  23. Original header list item colours were changed yesterday so corrected them.
  24. New loader text was very big for small screens so reduced it for those those screnn sizes
  25. Removed "No of min to read" feature for "libre software culture" page as that poage hosted external reading links.
Optimization:
  1. Removed certain libraries which were not required.
  2. Shifted a js script to the footer.

Please provide your feedback.
Thank you.

@quozl
Copy link
Contributor

quozl commented Aug 7, 2017 via email

@geekrypter
Copy link
Contributor Author

Thanks a lot for the suggestions, @quozl. I will surely keep them in mind and do the necessary changes :)

@geekrypter
Copy link
Contributor Author

Hi,

I will list out all the changes I have worked on below based on dates.

9th August - 28th August

Changes:
  1. Added search functionality by using the service of Google Custom Search Engine.
  2. Created a new page for searching itself which can be accessed at https://geekrypter.github.io/sugarLabsWebsiteRedesign/search
  3. Few components of the website were affected due to the new header menu. Solved those issues.
  4. Following Quozl's suggestion, I created a new page for raspberry pi which can be accessed at https://geekrypter.github.io/sugarLabsWebsiteRedesign/sugar-for-raspberry-pi/ and also highlighted the recommendation to use fedora(soas) built raspberry pi
  5. Changed the titles for few pages.
  6. Link tags in header were corrected to follow correct syntax.
  7. Ripple affect on buttons on hover removed.
  8. Text in " Search" page has been modified.
  9. All other places where old urls have been mentioned(like blog, github thread) they were modified to new urls.
  10. 404 errors removed.
  11. Added "contribute to website" link in footer
  12. Added required images for "Sugar stories" page which were provided by Walter Bender.
  13. Small internal url errors were solved.
  14. Uniform color theme is maintained.
  15. The background image text in the main page is properly centered.
  16. Small typographic changes.
  17. Line spacing change for a component.
  18. Previously the irc chat connection was not closed when we closed the irc chat window. Fixed this issue.
  19. New header menu changes.
  20. Main page background image content was not properly set in the middle so now fixed this.
  21. Google analytics code changes.
  22. The info icon in the desktop chat window was not working. Fixed this issue.
  23. All sections are properly centered.
  24. Added the code to enable loader and chat for mobiles and tablets which was not working previously.
  25. For IE and for browse, the logo svg was not good. So, for IE and non main stream browsers, I replaced the logo svg with static png logo but for mainstream browsers(apart from IE), the dynamic logo svg remains.
  26. The "Goals" boxes in "About us" page was not responsive. Now, it is responsive.
  27. Minor typo corrections.
  28. "Contribute to website" link in footer is responsive.
  29. Footer code changed to be better for columns alignment.
  30. The quotes section is also properly aligned.
  31. IRC chat window is properly rendered and working.
  32. "Developers" section as part of website integration removed.
  33. IRC chat calling mechanism is properly rendered.
  34. Background image for iphone properly rendering.
  35. New header menu icons changed.
  36. Scrolling to particular section (which is available for few pages) is working properly.
  37. Fonts properly rendered.
  38. Whole code base clean up by 1)Adding comments 2)Proper indentation 3)Understandable names 4)Removing unnecessary code 5)Deleting unnecessary files
  39. Documentation of whole project added in "documentation.md" file.
  40. Changes to README.md file
  41. Changes to licenseInformation.txt
  42. Correction to the disabling code and making sure disabling code is working properly.
  43. Added minimize button for non-desktop chat windows.
  44. Small changes to "suagr for Raspberry Pi" page.
  45. Opacity filter propely added for background image on main page to make foreground text visible.
  46. Removed text present in loader.
  47. Content changes on main page.
  48. Changed footer copyright text.
  49. Added references to images kept on "Sugar stories" page.
  50. Content changes in "For school administrators" page.
  51. Small changes to header menu items.
  52. Linked the header/footer links.
  53. Loader loading mechanism changed.
  54. Loader animation starts only when loader enabled and not before.
SEO:
  1. Changed all internal website urls to search engine friendly urls.
  2. Changed the meta description of website to a smaller description (160 characters). Walter Bender rewrote the description.
  3. Added more keywords to the website meta data.
  4. Changed title tags to mention "Sugar Labs" as much as possible.
  5. Changed the not working url for Software Freedom Conservancy to a working url.
  6. Changed all internal urls references to absolute path callings.
  7. Added alt text to all newly added images.
Optimization:
  1. Added cache control mechanism by adding .htaccess file with the cache control code.
  2. Removing all inline css scripts.
  3. Modified main.js file by removing unnecessary code, reordered existing code.
  4. modified footer by removing unnecessary code, reordered existing code.
  5. Deleted unnecessary files.
  6. Few files are called using their minified versions.
  7. Added cdn request calling for few resources and also added fallback code for them.
  8. Asyncronously calling few css scripts.
  9. Combining few files together.
  10. Removed unnecessary code in other css and js files.
  11. For png version of logo, using the optimized version of logo.
  12. Updating to latest libraries/dependencies.

Please provide your feedback.
Thank you.

@geekrypter geekrypter mentioned this issue Aug 29, 2017
Merged
@quozl quozl closed this as completed Dec 4, 2017
@lovemehta
Copy link

@geekrypter really good work. Congrats on sucessfully completing and becoming a mentor this year!! I am hopeful to get a chance to work on the social website for sugarlabs with all of you!! will share my proposal soon.

@samswag
Copy link
Member

samswag commented Mar 24, 2018 via email

@samagragupta

This comment has been minimized.

Sign in to view
@quozl

This comment has been minimized.

Sign in to view
@chimosky chimosky mentioned this issue Nov 15, 2021
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
8 participants
@davelab6 @quozl @samswag @geekrypter @chimosky @Hrishi1999 @lovemehta @samagragupta