implement website redesign from Rob #1570
Comments
|
fyi @robagreda Will committed to this |
|
Note: Website design file from Rob can be found here: https://www.figma.com/file/ORaT1T0Ywfbm0sIjwy5Rgq/Damus-iOS?type=design&node-id=3372-28372&mode=design |
|
Yesterday I spent a few hours drafting the new website to match Figma design. I was able to get the Hero section (Top section) about 75% done! Here is a preview of the work so far: https://nimble-jelly-180649.netlify.app Notes:
I set it up using Next.js + Tailwind. I think it could be a good choice of tech because we can benefit from:
I made a fork of the Damus website repo and started a new branch here: https://github.com/danieldaquino/damus-website/tree/%231570; I also added some documentation to I paused development at the Hero section for now to check and get some feedback. @jb55, do you think this is going in the right direction? Do you have any other thoughts on this? Thank you! |
|
Fyi this is what I see on mobile |
|
@alltheseas, thanks for letting me know! Yeah, I haven't fully optimized the layout for mobile yet. Admittedly there is still a lot to do, this draft is quite rough 😅 |
|
Maybe @jb55 has the stats - I'm assuming the Damus users are heavy mobile relative to desktop |
|
@alltheseas for sure, yes — I agree that we will need to make sure that the mobile version works perfectly before publishing. At the moment this is just a (very) early draft I put together in a few hours, it's not meant for publication yet. I'm sharing this draft only as a "status update" of progress I made on it yesterday, and to check with @jb55 if he has any objections/comments to the way I am implementing the code for the website. Don't worry, the final product will be a lot better than this draft, and 100% mobile-friendly! |
|
On Sat, Oct 14, 2023 at 11:25:18AM -0700, Daniel D’Aquino wrote:
I paused development at the Hero section for now to check and get some feedback. @jb55, do you think this is going in the right direction? Do you have any other thoughts on this?
I don't have any issues. As long as we get it up and running I'm happy.
Does nextjs depend on vercel or server code? I would slightly prefer if
it was just a static page you could host anywhere, but if it's too much
to change then it's fine for now.
|
Yes and no:
|
|
Will continue working on this, to hopefully get it published before Nostrasia |
|
I am currently focusing on making each section as "publishable" as possible, to make sure that we can publish easily even if I don't have time to implement all sections. I made several improvements today:
Here is a preview:
@jb55 please let me know if you have any preference on which sections on the figma design should be a higher priority (i.e. that I should implement first, in case we don't have time to get to all of them). |
|
I just asked a Japanese gent to review the site. Are there any other strings that are not on the site that you want translated?
…On Tue, Oct 24, 2023 at 1:22 AM, Daniel D’Aquino - notifications at github.com ***@***.***(mailto:On Tue, Oct 24, 2023 at 1:22 AM, Daniel D’Aquino - notifications at github.com <<a href=)> wrote:
I am currently focusing on making each section as "publishable" as possible, to make sure that we can publish easily even if I don't have time to implement all sections.
I made several improvements today:
- Disabled Portuguese support for now
- Enabled Japanese support and translated to Japanese using ChatGPT (probably not perfect) due to Nostrasia. ***@***.***(https://github.com/alltheseas) or ***@***.***(https://github.com/jb55), do we have any Japanese translators that can help us?
- Added meta tags
- Improved responsiveness and mobile-friendliness vastly
- Temporarily disabled full menu since we do not have all sections yet
- Added animations for added quality
- Added real links to almost everything, except "promote bounties page" which I do not know the URL for. ***@***.***(https://github.com/robagreda), do you happen to know the url?
- Lighthouse score was measured at 98% performance, 88% accessibility, 100% best practices, 83% SEO. Not quite there, but decent
Here is a preview:
- English version: https://65375f8b38ef6d0008270466--nimble-jelly-180649.netlify.app/en-us
- Japanese version: https://65375f8b38ef6d0008270466--nimble-jelly-180649.netlify.app/ja-jp
***@***.***(https://github.com/jb55) please let me know if you have any preference on which sections on the figma design should be a higher priority (i.e. that I should implement first, in case we don't have time to get to all of them).
—
Reply to this email directly, [view it on GitHub](#1570 (comment)), or [unsubscribe](https://github.com/notifications/unsubscribe-auth/APLE3KJCHVLGBE3DFTUSXGLYA5NDJAVCNFSM6AAAAAA5PW5IACVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTONZWGYYDAMZUHE).
You are receiving this because you were mentioned.Message ID: ***@***.***>
|
|
@alltheseas, I am currently defining the Japanese strings in this file: https://github.com/danieldaquino/damus-website/blob/%231570/content/locales/ja.json However, not all strings are defined there yet. Most of the strings we are going to use are in the Figma design: https://www.figma.com/file/ORaT1T0Ywfbm0sIjwy5Rgq/Damus-iOS?type=design&node-id=3372-28372&mode=design There might be more (such as image alt descriptions that are "invisible" in the design), but the Figma design should cover probably 90% of them. Please let me know if there something I can do to make this more convenient for the person translating it. |
|
Thanks for the reminder. Working on this |
|
On Mon, Oct 23, 2023 at 11:22:44PM -0700, Daniel D’Aquino wrote:
@jb55 please let me know if you have any preference on which sections on the figma design should be a higher priority (i.e. that I should implement first, in case we don't have time to get to all of them).
I think most important are:
* Banned in china
* Damus in the media
* Damus around the world/store
|
|
On Thu, Oct 26, 2023 at 08:44:18AM +0800, William Casarin wrote:
On Mon, Oct 23, 2023 at 11:22:44PM -0700, Daniel D’Aquino wrote:
***@***.*** please let me know if you have any preference on which sections on the figma design should be a higher priority (i.e. that I should implement first, in case we don't have time to get to all of them).
I think most important are:
* Banned in china
* Damus in the media
* Damus around the world/store
I kind of like all the sections though. I don't mind taking extra time
to get them all in.
|
|
@jb55, sounds good, I will try to get them all in, but prioritize those sections mentioned! Status update: Website in progress
I still need to refine some small details in those new sections (e.g. add animation, etc), and to create the missing sections. Latest preview:
@jb55, I will keep going at it, but please feel free to intervene if something is not evolving as expected 🙏 |
|
@danieldaquino WOWWW! This is amazing!!! This is coming along pretty nicely, I love how it loads and the interactions it has! Simply amazing work Daniel. 😍😍😍 |
|
On Wed, Oct 25, 2023 at 07:29:48PM -0700, Daniel D’Aquino wrote:
@jb55, sounds good, I will try to get them all in, but prioritize those sections mentioned!
5. Added only "follow on nostr" for team section since I am not sure if there is an easy way to implement zaps directly on the website. I was thinking about integrating with NDK, but that might be a rabbit hole.
yeah let's not do that. keep it simple.
**Latest preview:**
- English: https://6539cd3f7cc11900089ef196--nimble-jelly-180649.netlify.app/en-US
- Japanese: https://6539cd3f7cc11900089ef196--nimble-jelly-180649.netlify.app/ja-JP
@jb55, I will keep going at it, but please feel free to intervene if something is not evolving as expected 🙏
Looks great! maybe we can change "developer bounties" to just
"contribute to damus" and link to damus.io/code until we have a better
contribution page.
Let's move it somewhere else instead of the top of the hero which seems
like an odd place for it. It shouldn't be the main focus.
|
|
Hi, Damus team, I am here to help with Japanese translation. I will share what I noticed: Damus or ダムスIt is not wrong, but it may not be necessary to use katakana（"ダムス"）. I think "Damus" is better beacuse the name of the app is not written in katakana. Line break position of H1Line break position of あなたがコントロー is not very natural. More natural break position in Japanese is あなたが (You) (FYI, https://github.com/google/budoux/ helps doing this but it need some work to integrate with the site) But even using that line break position:
We usually say "SNS" (Social Network Service / System) in Japanese, so あなたが should be possible:
But it is not that cool in visial appearance. If we insert "新しい" (new), it might looks better:
Or, overall..., the original one can be acceptable. I'm not an expert in web design (and typography), so I'm not sure if it's appropriate from that perspective. home.hero.subheadline"あなた自身の友達やビジネスのためのソーシャルネットワーク" (The translation of "Your very own social network for your friends or business.") does not seem to reflect the intent. In the original, "very own" qualifies "social networks", but in the translation, it qualifies "friends and business". I think "友人やビジネスのための、あなた自身のソーシャルネットワーク" (or something) is better. s/MacOS/macOs/"MacOS" would be better written as "macOS" (in en/ja both). home.hero.promote-bounties"開発者報酬" (for "Developer bounties") is quite difficult to imagine what it says. "懸賞金つき開発課題" (delopment issues with bounty) or "開発者向け懸賞金" (bounty for developers) might be better, but is not very good (and I have no other idea at this moment). "懸賞金" can be "報奨", "報奨金" or "報酬". "contribute to damus" is easier to translate: "Damusに貢献する" banned_in_china.headline"中国では禁止されています" might be slightly more natural than "中国で禁止されています". damus_on_media.headline"メディアにおけるDamus" is more natural than "メディアでのダムス". Japanese websites often have the heading "メディア掲載" (Media Coverage) for this kind of contents. meet_the_team.headlineIn Japanese, "チームに会う" (meeting the team) literally means meeting the team, rather than introducing the team. It is not that we don't understand, but "Damusチーム" (Damus team) is more natural. I have made a pull request for these suggestions: |
|
ありがとう @darashi san 🙏 |
|
@darashi さん、本当にありがとうございます！ Thank you very much for your suggestions and for explaining the rationale behind them in detail. This is great! I will merge your PR 🙏 |
Thank you @robagreda, I am glad you like it! It's your design that's really great, it wouldn't be possible without you 🥇 |
Sounds good, I will move it the contribution link somewhere visible but not on top of the hero. For that button on the top, I am thinking of "Follow us on Nostr", which would link to the Damus Nostr profile. Would that be a good action item for this button? |
|
Daniel's idea to follow us on nostr i consider it good, I can make the changes in design if needed. @danieldaquino @jb55 do you think creating a small section to highlight contribute would be a good idea? I can design something small, icon, title, secondary text and a button linking to Gihub. Something like this: |
|
@robagreda I think this is a good idea. I would always welcome inviting contributors. The question is where to send them. @jb55 mentions
The issue with above is I think the damus.io/code does not show all the dev activity that takes place via email (unless I do not see it in github). We have https://github.com/damus-io/damus/issues but this is not a prioritized list. We can filter according to 'good first issues' https://github.com/damus-io/damus/issues?q=is%3Aopen+is%3Aissue+label%3A%22good+first+issue+%F0%9F%98%8C%22 I am also happy to receive DMs from new contributors, and point them to the best place to get started. How does a combination of 'good first issues' link, and DM elsat sound? |
|
@robagreda what do you think? Btw there is a small spelling error in "contribute"
|
updated based on your suggestions, thanks for the spelling check.
|
|
Love it! I will get this implemented asap |
|
Implemented various new sections and small changes. Here is the latest version preview: https://653c7d9e93d6e800081f5c55--nimble-jelly-180649.netlify.app Mostly complete, a few smaller details pending. I will provide another version soon |
|
I'm happy to help 😄 |
|
Hello this is awayuki. I heard from darashi about the Japaneseization of the Damus website and saw this thread and the site under construction. If the expression is based on a literal translation, I think it will give a slightly stiff impression as a promotion. H1I agree with darashi about line breaks. じぶんで In Japanese, the subject "あなたは(You)" is often omitted, so I changed the expression without changing the meaning. home.hero.subheadlineI made it easy to read by creating a flow that invites site viewers by conveying what they can do and what goals they can achieve. SNSをあなたに合わせて、友だちやビジネスともっと繋がろう "Personalize your social network to connect with friends and business." home.hero.promote-bountiesDamus開発に協力する banned_in_china.headlineThis is a point that cannot be overlooked when talking about Damus. This is why we put "free" in H1 at the beginning. 中国も認めた自由度 damus_on_media.headlineI use expressions that arouse the curious feelings of Japanese people. 多数のメディアで話題 That's all. I hope for your reference. I have arranged some expressions to give an impression that Japanese people can relate to easily, so if there are any parts that feel strange, please let me know. |
|
@awayuki Thank you so much! I totally agree with you. I’ll make another PR of these suggestions later so that we can put them into the codebase easily. |
|
I think that more work needs to be done on the translation of the newly updated sections. However, I do not have enough time to work on it. For now, I have made a pull request for a suggestion from @awayuki san. |
|
Small contributing section cut off on mobile view |
|
@alltheseas, thanks for pointing out the layout issue. The latest version fixes this! I also added a new "benefits" section last night which I think is crucial for answering the questions "What is Damus? Why use it?" for visitors who might not be familiar with it. Unless there are any issues/objections, the English version is complete. Here is the preview of the latest English version: https://653d3e75f39cf70008e6e133--nimble-jelly-180649.netlify.app/en-US Please let me know if you find any issues, and if you like the new benefits section! |
|
Good suggestion @danieldaquino I shared with the team. Let's see their feedback |
|
Ok, I got some help from another volunteer to translate some other remaining strings. Unfortunately we did not yet have a chance to translate all the strings. So, to make the Japanese-version publish-ready for Nostrasia even if we don't have a chance to translate other strings, I did the following:
With that, the Japanese version should be ready to go (unless there are objections). Here is the current version preview: https://653ff82d5789650008c7cba9--nimble-jelly-180649.netlify.app/ja-JP I am preparing the PR to merge all website changes! |
|
Sent all information necessary to merge all new changes in this ticket (code change info, testing coverage, etc) via email to [email protected] The email can be viewed here: https://groups.google.com/a/damus.io/g/patches/c/Yb0UfWxiQXY |
|
I updated the translation of the remaining parts. It is not perfect, but I believe it got better. There does not seem to be time to explain the reasons for the changes. My working branch is here, but it needs rebasing with conflict resolution. I'm working on it. |
|
I mean that my branch get better than the previous one. It might be better to update some parts based on https://653ff82d5789650008c7cba9--nimble-jelly-180649.netlify.app/ja-JP than rebasing |
|
Sorry for the late posting. I really wish we could discuss things, but I sent a pull request danieldaquino/damus-website#3 . This is all I can do for now. Just one point, since it's the most important part, "あなたが管理する自由な世界 It sounds really impressive to me, though, might be a little too strong. "管理" and "コントロール" have slightly different nuances. "管理" is harder and we tend to have a negative image. And I think avarage users do not strongly want to take the initiative "主導権", they just want to be free. I tried to put it in a mild way. |
|
Thank you so much @darashi! I have reviewed and re-tested the layout of the Japanese version on various screen sizes. Looks good, merged! The most important fix has been merged and applied. I noticed you also provided translations for some other strings as well, I will work to unhide the relevant page elements soon, after I finish handling a few other urgent issues I am working on in parallel. |
|
Update for other stakeholders of this ticket: @jb55 and I deployed the new website successfully on Monday (We are probably all aware, but I am writing just in case someone in this ticket is not aware yet 😜) Some notes:
@jb55, @alltheseas, is there anything else we need to address (or tickets we need to create) before closing this one? |
|
I think it's a nice upgrade. The business team needs to come together, and discuss which benefits we want to display on the site. Other than potentially changing some copy, I don't see a need for other changes. |
|
On Fri, Nov 03, 2023 at 01:42:08PM -0700, Daniel D’Aquino wrote:
**Update for other stakeholders of this ticket:** @jb55 and I deployed the new website successfully on Monday (We are probably all aware, but I am writing just in case someone in this ticket is not aware yet 😜)
https://damus.io
**Some notes:**
- We also had to make some last minute changes to the code to allow it to export into a completely static site and make it work under the current nginx server (which contains other important config and functionality)
- The Apple app banner had an issue. I sent a patch which should fix it.
- I still need to unhide some of the recently translated Japanese elements. I opened a separate ticket to make sure we don't lose track of it. (#1682)
I just pushed these fixes, should be live now. Looks like the app banner
is working now.
@jb55, @alltheseas, is there anything else we need to address (or tickets we need to create) before closing this one?
I think we can close this and continue on other tickets.
|
No description provided.
The text was updated successfully, but these errors were encountered: