Create a landingpage for the Global WordPress Translation Day

[CoachBirgit]

The third Global WordPress Translation Day will be held on Sept, 30th 2017. To host this event and use it as information hub it is needed to create a new landing page as 'save the date' announcement on ​http://wptranslationday.org/

Global WordPress Translation Day is 1 full day dedicated to bringing WordPress to more people around the world. 24 hours of live training sessions on WordPress i18n & L10n.

See the proposals attached.

[CoachBirgit]

Landingpage proposal by @nandz

[CoachBirgit]

Landingpage proposal by @zetaraffix

[CoachBirgit]

Related to the landing page proposals we need to be aware of the new style guide proposal #2987

[zetaraffix]

@zetaraffix's proposal for temp landing page GWTD3

[netweb]

Based on the proposed styleguide ​here, the current color contrast of these images have WCAG accessibility issues:

• Here's the proposed "basic color pallet" checks against WCAG 2 Level AA: ​https://accessibility.oit.ncsu.edu/tools/color-contrast/accessible-color-palette.php?&colors=464646,a62878,21759b&main=a62878&level=AA

• The proposed "full color pallet" checks against WCAG 2 Level AA: ​https://accessibility.oit.ncsu.edu/tools/color-contrast/accessible-color-palette.php?&colors=a62878,471530,d5afbb,c14e92,8a1f64,21759b,14455b,9ad9e1,56b8ca,21627e,464647,1a1a1c,c1c1c1,8a8a8a,2e2e2e&level=AA

[franfernandz]

Replying to netweb:

Based on the proposed styleguide ​here, the current color contrast of these images have WCAG accessibility issues:

• Here's the proposed "basic color pallet" checks against WCAG 2 Level AA: ​https://accessibility.oit.ncsu.edu/tools/color-contrast/accessible-color-palette.php?&colors=464646,a62878,21759b&main=a62878&level=AA

• The proposed "full color pallet" checks against WCAG 2 Level AA: ​https://accessibility.oit.ncsu.edu/tools/color-contrast/accessible-color-palette.php?&colors=a62878,471530,d5afbb,c14e92,8a1f64,21759b,14455b,9ad9e1,56b8ca,21627e,464647,1a1a1c,c1c1c1,8a8a8a,2e2e2e&level=AA

interesting. i'm going to work using those links as a guide.

[zetaraffix]

Social Media Profiles avatar

[zetaraffix]

Twitter cover #1

[zetaraffix]

FB event cover #1

[zetaraffix]

Replying to netweb:

thank you, I am familiar with the need of proper contrast, and this will come handy.
Please note that branding colours are generally NOT the colours used to write body text :)

Based on the proposed styleguide ​here, the current color contrast of these images have WCAG accessibility issues:

• Here's the proposed "basic color pallet" checks against WCAG 2 Level AA: ​https://accessibility.oit.ncsu.edu/tools/color-contrast/accessible-color-palette.php?&colors=464646,a62878,21759b&main=a62878&level=AA

• The proposed "full color pallet" checks against WCAG 2 Level AA: ​https://accessibility.oit.ncsu.edu/tools/color-contrast/accessible-color-palette.php?&colors=a62878,471530,d5afbb,c14e92,8a1f64,21759b,14455b,9ad9e1,56b8ca,21627e,464647,1a1a1c,c1c1c1,8a8a8a,2e2e2e&level=AA

[melchoyce]

I see that there are two proposed designs here — is your team leaning towards one or another? Can I give some design feedback on one in particular or both? Also curious about if you have any copy written, since the first mockup includes some but the second one uses some lorem ipsum currently. Drafting up your content first is super helpful, IMO, since then you can design around that content.

[zetaraffix]

PolyglotWapuu.jpg

[zetaraffix]

Replying to melchoyce:

I see that there are two proposed designs here — is your team leaning towards one or another? Can I give some design feedback on one in particular or both? Also curious about if you have any copy written, since the first mockup includes some but the second one uses some lorem ipsum currently. Drafting up your content first is super helpful, IMO, since then you can design around that content.

Good point @melchoyce, though I generally like to get an overall feeling for the space and the main points I need to get across, and then write the necessary content.
It is important we go online asap with a simple "soon online" format conceived to be smoothly integrated with the more complex content we are planning. I would absolutely appreciate all feedback you wish to share with us :-)

[franfernandz]

Replying to melchoyce:

I see that there are two proposed designs here — is your team leaning towards one or another? Can I give some design feedback on one in particular or both? Also curious about if you have any copy written, since the first mockup includes some but the second one uses some lorem ipsum currently. Drafting up your content first is super helpful, IMO, since then you can design around that content.

Hi @melchoyce .
I'm,no particularly fan to use "lorem ipsum". Nothing special, just a work choice :P, so I'd copied the text of thw #gwpt website.
You can give your feedback the way you want. We'll appreciate it really much.

[zetaraffix]

Twittercover_final

[zetaraffix]

Social_Wapuu_Avatar

[zetaraffix]

webdesign_update230717

[zetaraffix]

Here's the text, for comments and inputs :-)

What is GWTD3?

Global WordPress Translation Day is a 24-hour global event dedicated to the translation of the WordPress ecosystem (core, themes, plugins).

It’s a unique and innovative event, a cool mix of digital and phisical: the international community of the WP Polyglots will meet at the same time locally and digitally for a 24-hour translating marathon that will provide inspiration and training to both coders and translators on localising and internationalising through live talks and local meetups.

And this year the celebration is double: September 30 has also been designated as International Transaltion Day by the United Nations!

Where is GWTD3?

Global WordPress Translation Day is ... well, everywhere! In the 24 hours from 00.00 to 24.00 UTC of September 30, 2017 a series of live sessions will be aired live via Crowdcast.

The sessions, offered in the local languages, will provide information, training, inspiration, case studies, Q&A sessions and more on the WordPress ecosystem: a “global Polyglots chorus” that will run from East to West, as the time zones roll out.

The live events (available on this website) are paired with physical meetups that volunteers can join locally, to add conviviality and support to the experience (and, if at alla possible, fall a little more in love with the Community)

Cool! How do I get involved?

So, don’t make ather plans for Saturday September 30 2017 and hop on: your local Polyglots team is waiting for you to get involved and chime in!

If you can, join other volunteers in your local community (usually, this turns into a fun occasion to meet other WordPress lovers and to learn more abou the platform and the Community) or, if you prefer, join us online... but either way: join the fun and help us make WordPress inclusive and accessible to as many people as possible.

Below are the links to our social net presence, to the International Slack channel and to the Polyglots’ page on the official WordPress.org site. Joining the coolest Community in the Universe is only a click away... So don’t wait a second longer!

[semblance_er]

What are the general thoughts regarding the use of the Polyglots logo over the WordPress logo? Is that allowed with the WordPress logo? Perhaps the relationship can be with each logo’s border, almost like a chain? When I see them over each other, it feels like it taking away the identity and meaning of each and not clear enough to make out. Especially for people that are less familiar with each logo type.

[zetaraffix]

Replying to semblance_er:

What are the general thoughts regarding the use of the Polyglots logo over the WordPress logo? Is that allowed with the WordPress logo? Perhaps the relationship can be with each logo’s border, almost like a chain? When I see them over each other, it feels like it taking away the identity and meaning of each and not clear enough to make out. Especially for people that are less familiar with each logo type.

Hey there :) this combination has been used in the past and, personally, I don't see any issues with it (which is why I kept it as an element of continuity from past): the Polyglots are - in this case - the forefront act, and WP in the back provides the context. I am not sure, instead, that we would be allowed to intervene/modify the WP logo (in fact, I'm pretty sure we can't).

You can send your proposals for a different approach if you'd like, just be aware that we have very little time for explorations: the event is approximately 9 weeks away and we need to make decisions very rapidly (at least for this instance)

[semblance_er]

Replying to zetaraffix:

I understand. I did not realised it has been use in the past. Thus in that case and also from a timing point of view it probably make sense to not reinvent the wheel too much.

[dinhtungdu]

There are some accessibilty issues with the design in my opinion:

• First is the line-height. It's too narrow which can cause hard to read.
• The background color and text color of "Where" part may be hard to read.
• Too many bold in paragraph ~> confusion.
• Do we have any link in paragraph? Can we make it more recognizable.
• Lack of Icon and CTA button.

[zetaraffix]

Tigher web layout - 2040717

[zetaraffix]

mobile declination 240717

[zetaraffix]

@dinhtungdu :) as mentioned in the meeting we will fine-tune legibility when online through font and color

I've just updated tighter layouts with secondary font for body text and icons and a first draft mobile version
the only links will be in last section and yes, will be either underlined or indicated in some other way (very tired now, long day) - not totally happy with icons, will work more on this

also as discussed in meeting, this landing page will grow as more content is implemented and will evolve along with comms campaign :)

Replying to dinhtungdu:

There are some accessibilty issues with the design in my opinion:

• First is the line-height. It's too narrow which can cause hard to read.
• The background color and text color of "Where" part may be hard to read.
• Too many bold in paragraph ~> confusion.
• Do we have any link in paragraph? Can we make it more recognizable.
• Lack of Icon and CTA button.

[franfernandz]

Landing_Page_Proposal_2

[zetaraffix]

inside pages-1

[zetaraffix]

webdesign_update250717-1

[zetaraffix]

(sorry, right file here) webdesign_update250717-1

[zetaraffix]

assets - 250717-1

[xkon]

Making a reply here as I will be gone for some hours to run some errands.

Github is always updated ( wp-content with an .sql dump as well) and has the latest code that goes with a temporary preview at ​https://dev.xkon.gr . We decided to update the custom theme to use _s just in case more people wanted to join the team so they can get around more easily so it was done.

You can see the latest progress there.

What I still have to do:
1) Fix the menu.
2) Refine some css.
3) Make @CoachBirgit form and implement it properly.
4) Fixes here and there that won't alter the design so no need to worry or explain further atm.

What I'm missing at the moment:

1) Social link URLs for the footer icons.
2) Smaller alternative banner for the extra pages.
3) Is the form going to send an email somewhere or saved to database? If email what is the address?
x) General input about changes

After the landing page is done the workload will be divided between myself @dinhtungdu and @dipeshkakadiya to finish the main site as fast as possible, so designers have your creativity jumping and the resources ready asap as well :).

Tomorrow the landing page will probably go live if the design team has no objections or massive changes by tonight.

Hopefully I'm not forgetting something at the moment.

Best regards,
Konstantinos

[xkon]

Hey there. Github repo updated I'm just pasting here for the ones that don't follow it:

gwtd3 theme

Landing Page ( to be continued as a theme :D ) based on _s.

Latest stable: v1.0.3

Currently includes:

Responsive design
Off-Canvas mobile menu
Scroll-to-top
Smooth Scroll on # links.
Customizer - Main Header
Extra custom header for the non-landing page posts.
Dev stuff: .sql export (latest: dev.gwtd3.sql) for easy setup, wp-content folder with all the uploaded files.

Tested on latest: Chrome, Firefox, Opera, Edge, IE11, Android

I would love some MacOS tests.

---

Tomorrow I will start implementing the form you asked as well @CoachBirgit but we can push it on live as well now if there are no other design changes.

I'm only missing the Facebook page link for the social footer menu but that's a minor thing.

Best regards,
Konstantinos

[CoachBirgit]

404 page on Huawei P10 with Android / Google

[CoachBirgit]

Slide-in menu on Huawei P10 with Android / Google

[CoachBirgit]

Private page with Form 404 on Huawei P10 with Android / Google

[zetaraffix]

Latest iterations - landing 270717

[zetaraffix]

Inside pages-2 - 270717

[melchoyce]

Hey @zetaraffix, wanted to give your latest iterations some feedback:

Landing Page

• The color contrast is looking better!
• The only place where I'm worried about contrast and readability is where the text overlaps the icons on each section. I'd recommend lowering the opacity on this images a bit more, and also moving the text over a bit to avoid overlaying the body text. I think the effect is okay just with the section headers.
• Related, I think your line length could use shortening. In general, 45 – 75 characters per line is recommended. More than that makes a paragraph harder to read. (Less can be okay, especially on smaller screens.)
• I also think your line-height's a little low; maybe try bumping it up just a little? I like to use 1.4 – 1.6x the size of my body font.
• In general, I think the content of the site (header, nav, page content, footer content) could benefit from having some sort of max-width when it's implemented so it doesn't get too loose on wide screens. Probably between 800 – 1200px.

Contact Page

• Same issue with long lines of text — narrow that down a bit and I think you'll be better off. :)
• I think the form should also be narrower. I find using the content of a form is a good way to determine the general length of the form fields. So, names and emails are probably okay being 250 – 400px wide.
• I'd recommend combining your "first" and "last" name fields to be just one "full name" field, which is a little more inclusive of cultures that use different name formats.
• You're missing a "submit" button design for your contact form. (That trips me up all the time when I'm designing forms, lol).

Hope this helps! Let me know if I can clarify anything.

[CoachBirgit]

since the WPTranslationDay is bygone also the website and graphics are finished, we can close this task ticket.