hfg-gmuend / openmoji.org Goto Github PK

"old bullet point 3"

Not sure. Do you want to stripe out the normal headings of the pages then and display the pages name in the heading then?

What about a "←" (back arrow) + "Subpage Title"? I would find it better to have the title of the subpage in the header instead of a pretty redundant OpenMoji all the time.

This could be implemented, should we therefore take the pages name e.g. "Participate" or "Samples" for this? with a back arrow ? pointing to the start page? or the previous page (more complicated).

Yes. Take the page names e.g. "Participate" or "Samples" and add an arrow icon. Link could either bring you back to the last page or home. Both is fine. Pick the easier one in terms of effort.

Add avatar image and description of myself to the about site

• improved guidelines
• a step-by-step design tutorial
  • Sizes, Colors, Line Widths, Shadows …
• a step-by-step technical tutorial
  • Curve quality, Anchor points, Layer Structure, Do's and Dont's …
  • Export and production from various sources
• an improved illustrator file that already contains some basic shapes / components / examples to start with
• how to find comrades-in-arms outside Github
  • Hopefully there is some /r/programmingrequests for graphic design we can ask
• how developers can contribute

Any issues with the submission section should go here #57

Tiny detail :) @felixhaeberle

We would like to use this Github repo in the future for hosting the website ...

Problem:
Any url with a '?' yields 404 e.g.
https://hfg-gmuend.github.io/library.html?emoji=1F4E6

Fix:
Refactor url parameters to be using '#' instead of '?'

Hi @PaulRaschke, Hope you've had a nice Easter weekend!

There is one more task which we could use your help!
Could you implement based on the Samples.zip another (sub) page?

Basically:

• add to sticky header a nav element "Samples" (before "About")
• create a samples.html page based on the contents of the zip
• add the sticky header and the footer to samples.html

Possible within the next 10 days?

The page needs an SSL certificate to ensure a secure connection. This will especially become a requirement with the changes introduced in #21

Layout and spec:

• Participate https://www.figma.com/file/fAAK2wyIqmSa9jvQ7MAMYZMZ/OpenMoji-Website?node-id=0%3A3142
• About https://www.figma.com/file/fAAK2wyIqmSa9jvQ7MAMYZMZ/OpenMoji-Website?node-id=0%3A3623
• Elements https://www.figma.com/file/fAAK2wyIqmSa9jvQ7MAMYZMZ/OpenMoji-Website?node-id=0%3A17

todos:

• Double check all paddings as defined in layout/spec
• Add mini footer for imprint link, credits link, HfG Schwäbisch Gmünd etc.
• Remove licence in footer (for now)
• Add imprint link and add modal for imprint "Impressum" text
• Add scrollbars to About and Participate

spec and layout:
https://www.figma.com/file/fAAK2wyIqmSa9jvQ7MAMYZMZ/OpenMoji-Website?node-id=0%3A2775

library overview:

• Finetune existing layout
• Expose search via URLs for direct links e.g. openmoji-website/library.html?author=first%20lastname&group=symbols or openmoji-website/library.html?search=dog so that we can direct link e.g. all emojis of an author
• Generate entire side nav dynamically from data/openmoji.json
• Extend and add subcategories to side nav
• More exact fuzzy search (tweak fuse js parameters): "sodass zb bei “People” die Menschen nicht erst ganz unten auftauchen"
• Fix: Scroll up on category change
• Fix: Don’t hide and show scroll bars
• Add social media sharing feature

detail modal

• Finetune existing layout
• Expose emoji detial modal via URLs for direct links e.g. openmoji-website/library.html?emoji=1F17F
• Preserve the color or black switch state from the overview in modal

Currently we use URLs like the one below for the "Get OpenMojis" downloads:
https://github.com/hfg-gmuend/openmoji/releases/download/12.0.0/openmoji-72x72-color.zip

Should be (would like to get rid of the version tag in the url):
https://github.com/hfg-gmuend/openmoji/releases/latest/download/openmoji-72x72-black.zip

@felixhaeberle

Could you add "FAQ" to the main navigation (external link: https://github.com/hfg-gmuend/openmoji/blob/master/FAQ.md and in between "Samples" and "About")

We get over and over the same questions especially around the license etc. At a later point we might integrate the FAQ into the website ... but as a quick work around the external link is good enough.

E.g. click "project intent"

... jumps to below the headline :(

Here is the layout and spec:
https://www.figma.com/file/fAAK2wyIqmSa9jvQ7MAMYZMZ/OpenMoji-Website?node-id=0%3A146

We decided to go for v2 with the blue background

Hi @PaulRaschke, Daniel Utz just created new social media icons ... please add to site: svg.zip

Website looks mega horrible on mobile :( Part of the problem is that you even can't have it 100% on your mobile.

@jodunkel (or anyone else) any chance to gently improve this e.g. show the website as on desktop or at least style the landing site for mobile?

Hi @felixhaeberle, I have trouble with the emojis of author" and "emoji detail" views on mobile (Safari and Firefox). Hard to explain ... basically

• "emojis of author" link are only working if opened in a new tap
• "emoji detail" link is only working once

please see Video:
RPReplay_Final1585638265.MP4.zip

This is quite bad ... as the core feature of the website is too browse the emojis ... and it is live.

Could you have a look on the issues tagged with bug and double check everything?

@felixhaeberle

Please

• load data/package.json and get the OpenMoji Version number from there
• strip the ".0" end of the version number. "12.1" is enough and "12.1.0" feels like overkill

https://openmoji.org/styleguide/#submission

• This should detail the workflow for inkscape
• and affinity designer.
• This should contain the same information as https://github.com/hfg-gmuend/openmoji/blob/master/CONTRIBUTING.md or should link here
• Realistically this section should be called Style Guide or something similar

Hi @PaulRaschke, many thanks for this!! Here is my feedback:

Landing/Header

• header, emojis should be slightly bigger (e.g. 125% or give me pointer where I can tweak the size)
• header, every emoji should be clickable and link to the emoji detail view
• sticky nav, can you hide the nav until user has scrolled to it? Or at least hide the search field in the nav area until the user has scrolled down. Looks strange to have the big search field (header) and small search field (nav) visible at the same time

Landing/Explore

• Every emoji should be clickable and link to the emoji detail view
• Can you stop the jumping automatically to the categories once the user has clicked on one? Kind of strange to loose the focus on a category after you deliberately decide on one.
• UI Design, please fix blue line and center icons in relation to title better
  
• Size of button should be way bigger. Please double.
  

Nav

• Arrow in download button ... use plain css for this, no need for an icon. See Howto - CSS Arrows
• Get OpenMojis button, please increase width to align with options menu
  

Footer

• Change link in footer from "legal" to "Imprint"
• Can we get nicer styled scroll bars in the modal?
• I can confirm that the share on twitter link works
• Yes the email icon doesn't fit will ask Daniel (Utz) to make one

Library

• Please add in title "Author: Sofie Ascherl" for queries like this /library.html?author=Sofie%20Ascherl
  
• Detail view, make everything clickable and link to our related searches. Unicode link to http://www.decodeunicode.org/en/u+1F42A
  
• decrease the height of the white space underneath the title to have more usable scape to display the results
  

About

• Add underneath the name the "teams" ... see layout for the infos
  

Today I checked the current website with the famous Google Lighthouse test and got some pretty bad stats, there is room for improvement.

Tested with throttling enabled. On Desktop.

Tested with throttling disabled. On Desktop.

To test this by yourself, open the Chrome DevTools and go to "Audits", after, run the test of your choice. The test result provides some guidance on how to solve these problems.

Hover effects should be added to the social media icons in the footer in the pages :

• Library
• Participate
• Samples
• About

Will open a PR soon for this.

More padding after buttons SVG and PNG

Couldn't reproduce, which browser / OS is that? Can you look this up if it's a caching thing? :)

Firefox. Works on Chrome for me though.

add hint "beta-version currently Firefox only"

hfg-gmuend/openmoji#53 (comment) cc @AstroGD

A Smart App Banner may help drive downloads of the app. More Info here:

https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/PromotingAppswithAppBanners/PromotingAppswithAppBanners.html

Hi @PaulRaschke,

As discussed ... here is the new layout of the OpenMoji Website:
https://www.figma.com/file/IPDkZy9bolQiXRGGnzIVHDDD/openmoji_website_v2

@johannawe Many thanks for this!! 🙏

cc @dnlutz

e.g. https://hfg-gmuend.github.io/openmoji-website/library.html#emoji=1F1F1-1F1F0

@PaulRaschke Could you have a look on that bug?

@PaulRaschke as discussed :)

Hi @jodunkel could you add it?

In order to get OpenMoji listed at the https://emojipedia.org we agreed to enhance our emoji detail modal with the following infos:

• emoji description from Emojipedia pulled via their API http://api.emojipedia.org/emojis/👍/?api_key=XXX (will post the API key private)
• next to the description text a read more link to the corresponding Emojipedia detail site e.g. https://emojipedia.org/👍/

cc @Sam0711er @dnlutz

Many thanks!

@felixhaeberle style/main.css.map creates sometimes merge conflicts. Can we put to gitignore?

Also you don't have to do all the time for "small things" PRs. Just push to master and ping me ... seems an overkill to do a PR for this in our working relation :)

When you hover over a link, the page scrolls back to the top.

How to reproduce:

1. Open http://openmoji.org/about.html
2. Scroll down
3. Hover over a link (like Twitter Icon below a profile)
4. The site scrolls back to the top

Used configuration:
Browser: Safari 12.0.3 (14606.4.5)
System: macOS Mojave 10.14.3 (18D109)
Enabled plugins: None

Tried installing and starting the repository using node v10.8.0. Some errors are thrown during install and also when trying to run parallelshell throws some errors. I found this issue.

I think an .nvmrc file should be added to this repo to specify a version of node that works with the current set up. I tried with v8.9.1 which seems to work. Also, the readme should be updated to remove the line about using latest version of node.

It's good practise to have http requests respond with a 301: Moved Permanently to the https version of the site

@PaulRaschke as discussed :)

Review of https://hfg-gmuend.github.io/openmoji-website/

• fix broken imprint #23

• fix missing github icon in header
  

• fix broken menu links in header and use relative paths only. The menu links should work on local host and with github hosting (hfg-gmuend.github.io/openmoji-website)
  

• find the two "Multi-channels" and "Unicode Version 12.0" with this content too big. Please get rid of the section in terms of layout and integrate the "Unicode Version 12.0" point into the other ones (below headline)

• make both headlines/titles wider, break in two lines on a big screen. (also try two lines for "Special Interest Categories for Technologies and IX/UX/IoT Design")
  

• content "bullet points" under headline:

1. Free to use
2. 3000+ Emojis
3. Unicode Emoji v12
4. Consistent
5. Colored/Outlined
6. Skintones
7. 250+ Flags (From Andorra to Zimbabwe to Pirates)
8. Special Interest Categories
9. Handcrafted

E.g. https://openmoji.org/library/#author=Daniel%20Utz ... Only working on desktop. cc @felixhaeberle

1

• Lazy load all images and svgs http://jquery.eisbehr.de/lazy/
• Prepare/add updated data and latest emoji of OpenMoji v1.5 dev branch
• Add a skintones feature to the emoji detail modal
• Sorting default should be according to Unicode
• Sorting feature by contribution data
• Reflect categories "extras-openmoji" and "extras-unicode" in lirbary side nav ("HfG" has been removed)
• Scroll anchor bug (cc @Sam0711er can you report plz here)

2

• Optimize for mobile
• More love for the general design of the site

cc @johannawe

The page currently lacks a favicon

@felixhaeberle

Please:

• load data/openmoji.json
• use the length of the array to populate the emoji counter

Hi @carlinmack! Could you add the "Inkscape Export Instructions" of hfg-gmuend/openmoji#113 (comment) to https://openmoji.org/styleguide/#submission?

This change will make sure pages don't have URLs like openmoji.org/about.html but rather openmoji.org/about

OpenMoji-Black.ttf
proof of concept version,
some glyphs are broken,
not intended for production use!

OpenMoji-Color.ttf
beta version, works in Firefox / Edge / Adobe CC,
see discussion,
not intended for production use!