You are viewing a plain text version of this content. The canonical link for it is here.
Posted to notifications@apisix.apache.org by GitBox <gi...@apache.org> on 2021/02/26 15:33:37 UTC
[GitHub] [apisix-website] 1502shivam-singh opened a new issue #212: Enhancement: fix visible breakages in website UI on mobile, PNG logo is pixelated and other changes for better UX.
1502shivam-singh opened a new issue #212:
URL: https://github.com/apache/apisix-website/issues/212
<h3>Actual behaviour</h3>
Currently the website looks fine, but I have some changes to recommend. Currently the animation text in top hero section overflows to 2 lines when “high-performance” (image 1) comes up, and leading words have some margin from left breaking alignments (image 2 and 3)
<br></br>
<strong>image 1</strong>
<br></br>
<strong>image 2</strong>
<br></br>
<strong>image 3</strong>
The PNG logo on navbar is pixelated and can be replaced with a SVG logo. (image 4)
<br></br>
<strong>image 4</strong>
Also the button sizes and spacing on mobile are not appropriate as a bigger size button would be better on mobile for touch and the buttons stick together vertically, here some spacing would be better. (image 5)
<br></br>
<strong>image 5</strong>
<h3>Expected behaviour</h3>
The expected result in the text animation in top hero is to keep the animated word in one single line, because overflow could break the text animation’s grey background leading to not so good results.
For the logo, as I have said above a SVG logo would be better as its modern, doesn’t pixelate and saves file size.
The buttons should be little bigger, than the current variant with some more padding. Also there should be proper spacing between the buttons to prevent mistouch.
<h3>Steps to reproduce</h3>
The text animation can be kept in one line by changing the word “high-performance” to a word with same meaning and smaller lexically. I recommend using “Performant” as it’s a synonym of “high-performance” ([source](https://www.wordhippo.com/what-is/another-word-for/high-performing.html)). I personally have tested this word and it fits properly (check image below). For the extra margin a blank space after the space character did the trick.
As far as the logo is concerned, I have designed three versions of your org’s logo as a SVG, you can check them here ([Figma link](https://www.figma.com/file/LeICU6ikwITGemfw8lBRs3/APISIX-Apache-swf?node-id=0%3A1)) and tell which one you like.
CSS changes will do the trick for the buttons. Appropriate margins and padding.
<h3>After change screenshots</h3>
Fixing text animations (image 6) and alignments (image 7) (due to margins) -
<br></br>
<strong>image 6</strong>
<br></br>
<strong>image 7</strong>
After changing logo to SVG in one of the given options and changing title font-size to match logo size (image 8)-
<br></br>
<strong>image 8</strong>
Changing button sizes, paddings and spacings (image 9) -
<br></br>
<strong>image 9</strong>
@juzhiyuan I would like to take up this issue, as I have already done the necessary work to solve this issue. Also, if the figma link doesn't work in your country (maybe) for some reason, then please tell me I will share them here as images.
----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
[GitHub] [apisix-website] 1502shivam-singh commented on issue #212: Enhancement: fix visible breakages in website UI on mobile, PNG logo is pixelated and other changes for better UX.
Posted by GitBox <gi...@apache.org>.
1502shivam-singh commented on issue #212:
URL: https://github.com/apache/apisix-website/issues/212#issuecomment-786746827
I feel the size in image 9 is fine. Making them full width would pull way too much attention to them and it breaks hierarchy and layout. As of hierarchy we should have focus hierarchy like this according to me : "Apache Apisix.......Gateway" > buttons > "Provides rich.........etcd."
----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
[GitHub] [apisix-website] qier222 commented on issue #212: Enhancement: fix visible breakages in website UI on mobile, PNG logo is pixelated and other changes for better UX.
Posted by GitBox <gi...@apache.org>.
qier222 commented on issue #212:
URL: https://github.com/apache/apisix-website/issues/212#issuecomment-786778030
This is my solution: I add a ` <br />` element between "Dynamic" and "Cloud-Native", only on mobile devices.
<img width="448" alt="CleanShot 2021-02-27 at 01 13 37@2x" src="https://user-images.githubusercontent.com/68148142/109332433-0db18800-7899-11eb-9d26-65b9e15a0ae4.png">
<img width="389" alt="CleanShot 2021-02-27 at 01 13 56@2x" src="https://user-images.githubusercontent.com/68148142/109332484-2326b200-7899-11eb-8099-f8ad0b87e725.png">
----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
[GitHub] [apisix-website] 1502shivam-singh commented on issue #212: Enhancement: fix visible breakages in website UI on mobile, PNG logo is pixelated and other changes for better UX.
Posted by GitBox <gi...@apache.org>.
1502shivam-singh commented on issue #212:
URL: https://github.com/apache/apisix-website/issues/212#issuecomment-786859648
Okay, so you also reduced the font-size for the heading (looks like to me) for high-performance to fit in, I am looking at keeping the original font size as it's better suited for hierarchal difference between the hero text and main heading.
The idea of using the `<br/>` tag only on mobile is a good idea 😄 to solve that small gap issue and incidentally I also used this method 😂😂, before stumbling over the fact that a leading space did the trick too.
Regarding the full width buttons as I said, usually it's preferred that CTA (call to action) buttons should be less than 70% of the actual mobile device width, specially when you have more than one CTA buttons. Full width buttons are recommended when they are the only action that the user is supposed to take on the whole screen (example - App onboarding screen, you would have seen this too, buttons on bottom are full width).
The less than 70% because consider the situation of a miss-tap when scrolling on mobile. Having some free space with no interactive elements around helps in scrolling.
And thanks for attending my small lecture on button user experience design 🤣🤣🤣
----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
[GitHub] [apisix-website] juzhiyuan closed issue #212: Enhancement: fix visible breakages in website UI on mobile, PNG logo is pixelated and other changes for better UX.
Posted by GitBox <gi...@apache.org>.
juzhiyuan closed issue #212:
URL: https://github.com/apache/apisix-website/issues/212
----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
[GitHub] [apisix-website] qier222 commented on issue #212: Enhancement: fix visible breakages in website UI on mobile, PNG logo is pixelated and other changes for better UX.
Posted by GitBox <gi...@apache.org>.
qier222 commented on issue #212:
URL: https://github.com/apache/apisix-website/issues/212#issuecomment-786742266
How about we make "View on GitHub" button and "Download" button as wide as screen width on mobile devices？
----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
For queries about this service, please contact Infrastructure at:
users@infra.apache.org