changed styles of home page to be responsive #90

o-t-w · 2017-09-09T13:22:55Z

I noticed there was an issue for making the homepage responsive.
#59

annevk · 2017-09-12T11:49:48Z

Could you maybe put this live somewhere in some form for ease of review? Unfortunately we don't have preview functionality for PRs in this repository.

I'm a little concerned with all the added inline SVG. Seems that would make this much harder to maintain.

o-t-w · 2017-09-12T15:29:48Z

Preview on Codepen
https://s.codepen.io/cssgrid/debug/50554e6ae6f9a57e5d566b73edcbca37

domenic · 2017-09-12T21:05:33Z

Wow! This is a bold redesign. It's been a while with our current one though, and after my initial shock, and I think I like it!

I have a number of review comments, but I will save them until we get agreement that we want to go in this direction. (And maybe some of them I can fix myself.)

One thing I think we'd need though is help adapting the other pages which currently use the tabbed pages style, e.g. the FAQ. With this homepage redesign I'm still not sure how those would look.

tabatkins · 2017-09-12T21:09:20Z

I like this quite a lot!

My only nit is that I think the GitHub font is jarring; it looks out of place when surrounded by the other buttons just using normal text. I think it should just be ordinary text as well.

Otherwise, A++++, this look dramatically better than the current homepage to me!

annevk · 2017-09-13T10:11:11Z

Thanks @o-t-w, I like this direction as well.

domenic

Great, sounds like people are on board! Let's go through with this. I left some code review comments; my other comment about needing to see what this would look like for other pages like faq also stands.

domenic · 2017-09-13T10:15:02Z

whatwg.org/index

@@ -1,39 +1,93 @@
 <!DOCTYPE HTML>
 <html lang="en">
 <head>
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <meta http-equiv="X-UA-Compatible" content="ie=edge">


Please don't add this; we don't need to help old-IE

domenic · 2017-09-13T10:15:19Z

whatwg.org/index

-  <a href="mailto:ian+whatwg@hixie.ch">Ian Hickson</a>, who is acting as a spokesperson for the
-  WHATWG.</address>
+ <body>
+<div class="wrapper">


Stick with one-space indent please

domenic · 2017-09-13T10:15:55Z

whatwg.org/index

+<div class="wrapper">
+            <div class="flex">
+                    <img class="main-logo" src="https://resources.whatwg.org/logo.svg" height=100 width=100 alt>
+                    <div class="titles">


Let's stick with hgroup/h1/h2

domenic · 2017-09-13T10:16:36Z

whatwg.org/index

+                     <h2>The Standards</h2>
+                     <a class="standard" href="https://html.spec.whatwg.org/multipage/"><svg class="arrow" width="77" height="44" viewBox="0 0 77 44" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+                          <title>Group</title>
+                          <g id="C" transform="translate(202 164)">


Can you extract these out into separate .svg files?

domenic · 2017-09-13T10:17:25Z

whatwg.org/index

+               </div>
+               <hr>
+               <div class="grid">
+                     <a href="/faq"><h2>FAQ</h2></a>


These aren't h2s; they are just links. (They are not headings for a section or article.)

domenic · 2017-09-13T10:18:23Z

whatwg.org/index

+                  <h2>IRC</h2><p class="irc">Chat with other members of the WHATWG community</p></a>
+             <a class="span4" href="https://checker.html5.org/">
+                <svg width="101" height="101" viewBox="0 0 101 101" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><title>noun_974826_cc</title><use xlink:href="#w" transform="translate(21.45 29.35)"/><use xlink:href="#b" transform="translate(.004 .005)"/><use xlink:href="#c" transform="translate(21.45 29.35)"/><defs><path id="w" d="M21.48 44.74L0 23.25l11.4-11.4 10.31 11.21L49.49 0l8.3 8.44-36.31 36.3z"/><path id="b" d="M85.356 14.645C78.363 7.652 69.454 2.89 59.756.96 50.055-.97 40 .023 30.865 3.807S13.92 14 8.426 22.22C2.933 30.445 0 40.11 0 50s2.932 19.556 8.427 27.78C13.92 86 21.73 92.41 30.867 96.193c9.135 3.784 19.19 4.775 28.888 2.845 9.7-1.93 18.608-6.692 25.6-13.685 4.664-4.632 8.365-10.14 10.89-16.207C98.77 63.08 100.07 56.572 100.07 50c0-6.572-1.3-13.08-3.825-19.148-2.525-6.067-6.226-11.576-10.89-16.207zm-5.53 65.18c-7.95 7.732-18.62 12.024-29.71 11.948-11.088-.077-21.7-4.516-29.542-12.356-7.84-7.84-12.28-18.454-12.356-29.542-.076-11.09 4.216-21.762 11.948-29.71 7.948-7.732 18.62-12.024 29.71-11.948 11.088.077 21.7 4.515 29.54 12.356 7.842 7.84 12.28 18.454 12.357 29.542.077 11.09-4.215 21.762-11.947 29.71z"/><path id="c" d="M21.71 23.06L11.4 11.85 0 23.25l21.48 21.49 36.3-36.3L49.49 0 21.71 23.06z"/></defs></svg>
+                <h2>HTML checker</h2>


Similarly these are not h2s. They can be <strong>, I guess, like the existing site

domenic · 2017-09-13T10:18:46Z

whatwg.org/index

-</html>
+
+</body>
+</html>


Don't forget newline at end of file :)

jgraham · 2017-09-13T10:19:49Z

This looks great! (well apart from WHATWG green, but that's hardly your fault :)

Some minor issues, that mostly turn out to be issues on the current site too:

Is emailing Hixie really still a thing? Seems like we could remove that from the footer.
"Maintaining and evolving HTML since 2004" seems to undersell what WHATWG does.
Similarly, I feel like the emphasis on linking to HTML is misplaced. It's certainly the most complex standard in the WHATWG roster, but it would be nice to get more onto the front page e.g. something that looks more like

   Standards
   [HTML] [DOM] [URL] [Encoding] [Notifications] [Fullscreen] [Others…]

None of those things should block landing this, but it would be nice to fix them whilst there's some attention on the site.

domenic · 2017-10-12T23:09:41Z

Since the codepen link expired, here is a new preview that is mostly faithful to @o-t-w's work: https://jsbin.com/cijufadebe

I wish we had some ideas on how to adopt this style to the other pages besides the homepage. If we had that, I'd be happy to address all the above comments myself (including the ones I made) and get this merged.

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

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

changed styles of home page to be response

4839a4f

domenic reviewed Sep 13, 2017

View reviewed changes

domenic mentioned this pull request Dec 21, 2017

Update links and layouts to harmonize with revised structure #149

Closed

domenic mentioned this pull request Dec 21, 2017

Redesign the homepage #153

Merged

domenic closed this in #153 Jan 8, 2018

whatwg deleted a comment from pitsana Jul 18, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

changed styles of home page to be responsive #90

changed styles of home page to be responsive #90

o-t-w commented Sep 9, 2017

annevk commented Sep 12, 2017

o-t-w commented Sep 12, 2017

domenic commented Sep 12, 2017

tabatkins commented Sep 12, 2017

annevk commented Sep 13, 2017

domenic left a comment

domenic Sep 13, 2017

domenic Sep 13, 2017

domenic Sep 13, 2017

domenic Sep 13, 2017

domenic Sep 13, 2017

domenic Sep 13, 2017

domenic Sep 13, 2017

jgraham commented Sep 13, 2017 •

edited

Loading

domenic commented Oct 12, 2017

-              </html>
+              </body>
+              </html>

changed styles of home page to be responsive #90

changed styles of home page to be responsive #90

Conversation

o-t-w commented Sep 9, 2017

annevk commented Sep 12, 2017

o-t-w commented Sep 12, 2017

domenic commented Sep 12, 2017

tabatkins commented Sep 12, 2017

annevk commented Sep 13, 2017

domenic left a comment

Choose a reason for hiding this comment

domenic Sep 13, 2017

Choose a reason for hiding this comment

domenic Sep 13, 2017

Choose a reason for hiding this comment

domenic Sep 13, 2017

Choose a reason for hiding this comment

domenic Sep 13, 2017

Choose a reason for hiding this comment

domenic Sep 13, 2017

Choose a reason for hiding this comment

domenic Sep 13, 2017

Choose a reason for hiding this comment

domenic Sep 13, 2017

Choose a reason for hiding this comment

jgraham commented Sep 13, 2017 • edited Loading

domenic commented Oct 12, 2017

jgraham commented Sep 13, 2017 •

edited

Loading