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.

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

Be mobile-friendly #59

Closed
domenic opened this Issue Aug 24, 2017 · 8 comments

Comments

4 participants
@domenic
Member

domenic commented Aug 24, 2017

We need a meta viewport tag, and possible some different header/tabbed pages styles

@annevk

This comment has been minimized.

Member

annevk commented Aug 25, 2017

I tried to shrink the design, but it actually makes it looks worse on mobile than how it renders today (which is reasonable but small, so likely hard to read for some folks). I suspect we'd need a new design and maybe a simplification of the <h1> as it's rather wordy for a small screen.

@domenic

This comment has been minimized.

Member

domenic commented Aug 25, 2017

Agreed. While we're redesigning, IMO it'd be nice to put the logo on each page in a corner or similar.

@zouhir

This comment has been minimized.

zouhir commented Aug 25, 2017

I think this is a good opportunity to slightly improve the current design, colors and overall feels into a more modern color palette and design. I'd break this into 5 tasks:

  • Mobile friendly meta tags with initial scale 1.0 and no max scale so users can zoom.
  • proper layout for home page which will break once we go mobile responsive.
  • solution for tabbed page alternative (important to have).
  • Logo on each page (@domenic comment above)
  • new website color palette (nice to have).

Logo on each page

Do you mean just have an SVG logo instead of the large h1 on the tabbed pages?

options for tabbed page (kind of important to have):

  • off-canvas nav bar to the left side with full page height.
  • same off-canvas nav bar but to the right.
  • off canvas drop from the top with dynamic height (won't cover the page)

options for colors (less important for now)

I quite like the plain white background for content rich websites like this one however we can play with the front page colors as a start.
here's some colors for inspiration:
inspirations

@domenic

This comment has been minimized.

Member

domenic commented Aug 25, 2017

Yeah, definitely a redesign would be welcome. In general for these sorts of things, anyone who is willing to do the work gets to pick how it looks; I don't think anyone here holds strong opinions on nav bar placement or design.

Do you mean just have an SVG logo instead of the large h1 on the tabbed pages?

I don't think I'd get rid of the h1 entirely, but maybe it should be shrunken to just "The WHATWG" on mobile or something.

My main issue was that our beloved logo is just completely missing while you read important non-home pages like https://whatwg.org/working-mode .

@annevk

This comment has been minimized.

Member

annevk commented Aug 26, 2017

In case it was unclear, the logo is https://resources.whatwg.org/logo.svg.

@zouhir

This comment has been minimized.

zouhir commented Aug 27, 2017

thanks @domenic @annevk, I might be able to assist here and the yeah logo is very clear 😅 #beauty

@o-t-w

This comment has been minimized.

o-t-w commented Sep 9, 2017

I've had a go at the frontpage. Merge if you like it

@zouhir

This comment has been minimized.

zouhir commented Sep 12, 2017

Sorry I was busy with university work! thanks so much I'll look 😄

@domenic domenic self-assigned this Dec 21, 2017

domenic added a commit that referenced this issue Dec 21, 2017

Redesign the homepage
Closes #90 by subsuming the work there. Helps with #59 as at least the homepage is now mobile-friendly. Helps with some of the items noted in #149.

Substantive changes:

* "Join" renamed to "GitHub" (see #149)
* "News" renamed to "Blog"
* "Working Mode" replaced with "Policies" (see #149)
* "Twitter" added

domenic added a commit that referenced this issue Dec 21, 2017

Redesign the homepage
Closes #90 by subsuming the work there. Helps with #59 as at least the homepage is now mobile-friendly. Helps with some of the items noted in #149.

Substantive changes:

* "Join" renamed to "GitHub" (see #149)
* "News" renamed to "Blog"
* "Working Mode" replaced with "Policies" (see #149)
* "Twitter" added

domenic added a commit that referenced this issue Jan 5, 2018

Redesign the homepage
Closes #90 by subsuming the work there. Helps with #59 as at least the homepage is now mobile-friendly. Helps with some of the items noted in #149.

Substantive changes:

* "Join" renamed to "GitHub" (see #149)
* "News" renamed to "Blog"
* "Working Mode" replaced with "Policies" (see #149)
* "Twitter" added

domenic added a commit that referenced this issue Jan 8, 2018

Redesign the homepage
Closes #90 by subsuming the work there. Helps with #59 as at least the homepage is now mobile-friendly. Helps with some of the items noted in #149.

Non-stylistic changes:

* "Join" renamed to "GitHub" (see #149)
* "News" renamed to "Blog"
* "Working Mode" replaced with "Policies" (see #149)
* "Twitter" added

@domenic domenic referenced this issue Feb 14, 2018

Merged

Mobile friendly tabbed pages #154

3 of 3 tasks complete

@domenic domenic closed this in 4d34512 Feb 16, 2018

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment