TE
TechEcho
Home24h TopNewestBestAskShowJobs
GitHubTwitter
Home

TechEcho

A tech news platform built with Next.js, providing global tech news and discussions.

GitHubTwitter

Home

HomeNewestBestAskShowJobs

Resources

HackerNews APIOriginal HackerNewsNext.js

© 2025 TechEcho. All rights reserved.

Web Fundamentals: A handbook for best practices

379 pointsby isopodabout 11 years ago

24 comments

aresantabout 11 years ago
I don&#x27;t find this site to be a fundamentally good example of usability.<p>It&#x27;s not TERRIBLE, but given that they&#x27;re speaking from a position of high-authority, it should be better.<p>Three examples:<p>(1) <a href="https://developers.google.com/web/fundamentals/documentation/user-input/index" rel="nofollow">https:&#x2F;&#x2F;developers.google.com&#x2F;web&#x2F;fundamentals&#x2F;documentation...</a> - What am I supposed to click? The &quot;2 guides&quot; thingy looks like a button. No. Not clickable. But then just below are two identically colored &quot;Create Amazing Forms&quot; and &quot;Add Touch to Your Site&quot;. Easily solvable with (a) buttons (b) underlined links (c) consistent navigation colors<p>(2) Click on &quot;Getting Started&quot; in the top navigation section. Would you expect that the text should now be bold, as it was on the home screen indicating which page &#x2F; section I&#x27;m on?<p>(3) Back to this page &quot;<a href="https://developers.google.com/web/fundamentals/documentation/user-input/index&quot;" rel="nofollow">https:&#x2F;&#x2F;developers.google.com&#x2F;web&#x2F;fundamentals&#x2F;documentation...</a> - why is there a cookie-crumb nav element in Documentation that&#x27;s not present on other subs like <a href="https://developers.google.com/web/fundamentals/resources/styleguide/markdown-guide" rel="nofollow">https:&#x2F;&#x2F;developers.google.com&#x2F;web&#x2F;fundamentals&#x2F;resources&#x2F;sty...</a><p>In their defense, I understand that their audience is &quot;developers&quot; who are going to be able to solve poor UX and find what they want.<p>But still feels like a moment to eat your own dogfood . . .
评论 #7676490 未加载
yaixabout 11 years ago
Its a giude about web UI best practices, and the icons symbolizing the different topics are not clickable?<p>Besides, I didn&#x27;t even notice that some of the headlines&#x2F;h2s in the subsequent pages are actually clickable.<p>Then, they actually enlosed their &lt;video&gt; elements inside a &lt;a&gt; tag. So now, when I click on the controls of a video, it will open the linked page. No way to use the video&#x27;s controls without leaving the page I am reading.<p>Three basic errors found in under a minute on a simple text site. I don&#x27;t think I want to take any UI design advice from that person.
评论 #7679825 未加载
ispiveyabout 11 years ago
The advice on min-width vs min-device-width strikes me as controversial:<p><pre><code> Therefore, you should avoid using *-device-width, since the page won’t respond when the desktop browser window is resized. </code></pre> GMail, Facebook, New York Times, and lots of other smart folks don&#x27;t show their mobile-web versions if you make the browser viewport very small. Their sites have min-width ~980px when viewed on desktop.<p>I imagine this is because (a) their mobile sites use different interactions that require different DOM and JS, not just different CSS styles, and&#x2F;or (b) those different interactions might not be appropriate on desktop even if you shrink the viewport and&#x2F;or (c) it&#x27;s confusing for the site to work differently when you resize your window and&#x2F;or (d) they don&#x27;t want to send unused JS&#x2F;DOM to devices that aren&#x27;t going to use it.<p>Any thoughts, kinlan?
评论 #7677692 未加载
评论 #7679742 未加载
Braunbartabout 11 years ago
The icons are broken in firefox because you used a webfont wich is hosted on another domain.<p>Edit: Just saw that you already know about this: <a href="https://github.com/google/WebFundamentals/issues/13" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;google&#x2F;WebFundamentals&#x2F;issues&#x2F;13</a><p>--- Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at <a href="https://web-central.appspot.com/web/essentials/icons/icons.woff" rel="nofollow">https:&#x2F;&#x2F;web-central.appspot.com&#x2F;web&#x2F;essentials&#x2F;icons&#x2F;icons.w...</a>. This can be fixed by moving the resource to the same domain or enabling CORS.
评论 #7676692 未加载
评论 #7679465 未加载
dmanabout 11 years ago
a) How is one supposed to know what is clickable on that webpage?<p>b) Why are the circles not valid click targets?<p>c) If you say this -&gt; &quot;To deliver the best user experience, we must deliver content as quickly as possible (&lt;1 second)&quot; then why does your section on Critical Rendering Path show the optimized page load in 1.5 seconds?
评论 #7676703 未加载
评论 #7676828 未加载
评论 #7677403 未加载
评论 #7679847 未加载
kinlanabout 11 years ago
Repository for filing issues: <a href="https://github.com/google/WebFundamentals/issues" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;google&#x2F;WebFundamentals&#x2F;issues</a>
taternutsabout 11 years ago
Most of the responses are somewhat negative (although helpful), but as a back-end&#x27;ish guy trying to learn full stack, CSS is the one thing that is nails on the chalkboard for me to learn properly. I&#x27;ve got this bookmarked as a reference to succinctly explain these basics; Thanks!
评论 #7679501 未加载
评论 #7677981 未加载
评论 #7678953 未加载
turarabout 11 years ago
I really hope this design pattern of huge fonts across the screen is a fad and will go away sometime soon. That and parallax scrolling. It&#x27;s bugging me to no end for some reason. Am I alone in this?
评论 #7676940 未加载
snomadabout 11 years ago
Note &#x2F; is valid in street address (e.g. Unit 22 1&#x2F;2). I believe the provided regex [a-zA-Z\d\s\-\,\#\.\+]+ would reject that.
untilHellbannedabout 11 years ago
Kinda strange I&#x27;m the first to compliment them on a very nice resource. Would&#x27;ve loved to have had this when I was starting out. Google can do some good things people.
coreymgilmoreabout 11 years ago
I see the performance stuff as the most useful. Otherwise, the general layout&#x2F;responsive design pointers are pretty much common knowledge at this point (or so I think).<p>Great starting point, would be nice to integrate with Pagespeed.
评论 #7676542 未加载
theycallmemortyabout 11 years ago
This thread is full of people nit-picking design concerns with this open source resource, however the actual content in this seems to be top-notch!
userbinatorabout 11 years ago
While there&#x27;s good advice contained within, the phrase &quot;best practices&quot; in the title may already be off-putting to some, because of how overused it&#x27;s been to describe anything that anyone at one time thought was a good idea, leading to assuming that there is always only <i>one</i> &quot;best&quot; way to do something. In my experience, there never is.
OWazabout 11 years ago
I&#x27;d suggest not to use a condensed typeface for the editorial header. It makes the paragraph look weird and is difficult to read.
thousandeabout 11 years ago
Was a bit surprised by how they managed to display my full name from my Google account in the example videos. Then I remembered ;)
contingenciesabout 11 years ago
Frankly, on so many levels, <i>this site is just fucking terrible</i>. It would not be particularly hyperbolic to suggest that it actually summarizes much of what is wrong with the internet today. Let&#x27;s see:<p>(1) &#x27;Web&#x27;. There is more to the internet than web. When writing content for aspiring developers, can we not accept broader and more accurate terms in their education?<p>(2) After clicking through to a page entitled <i>Web Fundamentals: A handbook for best practices</i>, and then <i>Get Started</i> (WTF? I thought this was a reference, not a process!) I get &#x27;Your First Multi-Screen Site&#x27;. What? I was presented with &quot;handbook for best practices&quot;, and I got &quot;hand-holding simplified idiot guide aiming for feel good first outcomes&quot;. How could anyone think this is semantically justified?<p>(3) The produced page screenshots are near-on unreadable with shitty contrast and few realistic elements (forms, small social or content-suggestive icons, etc.)<p>(4) The text under &#x27;What will I learn&#x27; is so small as to be unreadable on a 17&quot; laptop (~latest Firefox, Linux).<p>(5) The fundamental structure of the &#x27;course&#x27; (not a handbook anymore, eh?) makes little sense given the tiny number of lessons (ie. 2). An alternate overall approach to content organization would be been more intuitive.<p>(6) There are Chinese characters all over the site, because someone&#x27;s nappyJS framework figured nobody would ever interpret them has having any meaning. Well, here&#x27;s a wakeup call from China. <i>There&#x27;s more of us than there are of you.</i> (and I say that as a westerner who learned Chinese ... I believe <i>tptacek</i> and others here also have strong Chinese reading skills).<p>(7) Separation of concerns fail: <i>create a skeleton view of the page with content but without styling</i>. Design is secondary to content. Figure out what you communicate before dreaming up methods to achieve it.<p>(8) Use of terms without introduction, eg. <i>IA</i>, <i>padding</i>. Does wonders for intelligibility! Any editor from the old-school print and paper world would have caught this in a flash, if the author got off their high horse, recognized the lack of novelty in fundamental communications processes, and accepted some criticism while espousing &quot;the fundamental way to be just like them&quot; (for idiots edition; paraphrased from original page title and ridiculous semanting hoop-jump that led to this cesspit).<p>(9) Contrast of prescriptive &quot;As a web developer, you are expected to...&quot; stuff and hand-holding present continuous pronouns (&quot;We will...&quot;) comes across as condescending and pathetic. While this may be normal amongst certain segments of US communications, the rest of the world just laughs along ... at you, not with you.<p>(10) Use of terribly US-centric and verbose expressions such as &#x27;judgement call&#x27;. Heard of &quot;making a decision&quot;? Well, it&#x27;s a huge improvement: <i>for the majority of its global users, English is a second language</i>. (Hey, look at that! A useful fundamental!) And guess what? It&#x27;s even more concise when you use the word &quot;decide&quot;, which has the secondary benefit of using even simpler grammar! (As in &quot;Decide how to integrate Dogecoins&quot;, or &quot;Decide when to write authoritatively&quot;)<p>(11) Ridiculous gaps in lists due to poor styling that cannot degrade if Javascript has been disabled or is not present, eg. in partially loaded pages, accessibility-oriented consumers, text-only browsers, security-conscious browsers.<p>(12) Despite claims to be part of a larger, mobile-focused course (Hey, I thought this was an authoritative best-practices handbook? Oh wait...), nowhere is there mention of <i>the reality of mobile: the network is slow, the network is unrealiable.</i> Cache-control? Forget it. Emerging standards for offline, open web applications? Forget it.<p>(13) Why the hell would you use a link to a second page to &quot;show full sample&quot; when on mobile? You&#x27;d clearly want to load that as part of the main page (Oh wait, you did! Why not load it again?), as round-trip times for page loads are terrible. (Oh wait, it seems the author has never written an actual mobile website outside of shiny blingphone-optimized first-world 5G always-on-wifi environments. Like, Chai latte with skim, baby. Is that cocoa organic? Oh, you don&#x27;t know? No thanks. Where was I?)<p>(14) Use of flash? 2014? What? Use of flash? What?<p>(15) Calling software features &#x27;technologies&#x27; is about as transparent as how much I would like to physically accelerate an extremity of my body towards the upper frontal portion of the author, particularly when people from outside of your ... <i>cough</i> ... culture try to comprehend it. (Easy rule: technology&#x27;s physical, software&#x27;s not)<p>(16) Inconsistent capitalization.<p>(17) Use of video on mobile-targeted sites without discussion of pitfalls? Really?<p>Not sure about others here, but frankly I&#x27;m sick of Google trying to be the be-all and end-all of the internet (+1!), and polluting it with touchy-feely-device content (&quot;CONSUME! CONSUME!&quot;) like this holier-than-thou idiotville garbage that tries to gloss over the ugly-as-butt reality of web content authorship and network connectivity problems. Just... fail.
评论 #7679015 未加载
评论 #7679605 未加载
carrotleadsabout 11 years ago
I am not sure of the tip to associate labels with every form input.<p>In many cases placeholders and surrounding text by itself is sufficient.<p>Most launch pages doesn&#x27;t have a email address label associated with each including the avocode example posted on HN today.
skeletonjellyabout 11 years ago
Do people still use form autocomplete client side? I thought there was a terrible &quot;bug&quot; in sites stealing your address and email by putting in a hidden inputs with these autocomplete attributes?
EC1about 11 years ago
The requested URL &#x2F;web&#x2F;fundamentals&#x2F;resources&#x2F;samples&#x2F;getting-started&#x2F;your-first-multi-screen-site&#x2F;addvideo was not found on this server.
评论 #7677181 未加载
kylemaxwellabout 11 years ago
Somewhat surprised there&#x27;s no discussion of security going on here - even at a design level, there are some useful considerations.
评论 #7677165 未加载
auvrwabout 11 years ago
i like graphic design of the site, especially the hanzi interspersed throughout. i&#x27;ve no idea what the &quot;remember&quot; boxes say, although it might sound like 记 from &quot;to remember,&quot; based on it looking like 迹?
dvfurlongabout 11 years ago
There are errors in this.
评论 #7676649 未加载
felipesabinoabout 11 years ago
why no +1 button?
评论 #7677495 未加载
评论 #7677461 未加载
graycatabout 11 years ago
With the title &#x27;Web Fundamentals&#x27;, from Google there might be something good there to learn. Butm three points:<p>(1) &quot;Multi-screen&quot; is not in my Funk and Wagnalls and, thus, has a specialized meaning, is a &#x27;term&#x27;, and needs at least a definition and likely also motivation, explanation, and examples. So, the author of this course on writing Web sites doesn&#x27;t know how to write.<p>(2) He says that the course will end with a &#x27;landing page&#x27;. I don&#x27;t really know what the heck that is. Once again he is long on obscure terminology and short on definitions.<p>Apparently he likes his own jargon. Bummer.<p>(3) His page has a black background with faint type that is nearly impossible to read. In addition he has some &#x27;swaths&#x27; of light across the text making the page next to impossible to read. Maybe if I &#x27;selected&#x27; the text from the page or got the HTML and extracted the text I could read it, but what he has is not good.<p>Bummer.
评论 #7676836 未加载