google / webfundamentals Goto Github PK
View Code? Open in Web Editor NEWFormer git repo for WebFundamentals on developers.google.com
License: Apache License 2.0
Former git repo for WebFundamentals on developers.google.com
License: Apache License 2.0
browsers set 40px left and right margins as advised in the HTML spec, which makes the table at the bottom of CS256 example hard to read its content.
In rwd-fundamentals the paragraph reads:
"In order to attempt to provide the best experience, mobile browsers will render the page at a desktop screen width (usually about 960px), "...
Actually, it's exactly 980px on just about every smartphone with a WebKit based browser (aka most of them), and 1024px on IE mobile and Blackberry. See http://www.quirksmode.org/mobile/metaviewport/
iPhone | iPad | Android Samsung | Android HTC | Chrome | Opera Presto | Kindle Fire | BlackBerry | IE |
---|---|---|---|---|---|---|---|---|
980 | 980 | 980 | 980 | 980 | 980 | 980 | 1024 | 1024 |
It's a small, but important detail.
On the Create Amazing Forms page the list items for the lesson are difficult to read. The size and weight of the font suggest that the content is of secondary importance.
"His page has a black background with faint type that is nearly impossible to read"
The text says "Follow these guides and build web content users can access on any device they choose."
Are the blocks really guides? Isn't "Follow these guides and build web content users can access on any device they choose." the general advice for the content under "Documentation" ?
Back to this page "https://developers.google.com/web/fundamentals/documentation... - why is there a cookie-crumb nav element in Documentation that's not present on other subs like https://developers.google.com/web/fundamentals/resources/sty...
Much of the interesting information on the home page is below, and it's not obvious that there's a fold :(. The end result is page that appears, at least initially, to have much less content than it does.
table example uses <td> for col headers should use <th> http://www.w3.org/html/wg/drafts/html/master/tabular-data.html#the-th-element
<tr>
<th>Age Index</th>
<th>Receptive Quotient</th>
<th>Happiness</th>
</tr>
Learn how to integration navigation patterns into your site and get users to complete the actions you want them to.
Grammar Check: Learn how to integrate..
The banner should look like a "Fork us on GitHub" banner (colored background, wayyyyy more prominent) and the text should read: "This site is still a work in progress! Report an issue or submit a pull request."
"
A note on min-device-width
In addition to *-width, it is also possible to create queries based on *-device-width; the difference is subtle but very important. min-width is based on the size of the browser window, where as min-device-width is based on the size of the screen.
"
Much worse, actually. In some browsers, including Android WebKit, it's the screen size in device pixels. In other browsers, including Chrome, it's the size of the ideal viewport (the one you get with width=device-width). So you'll never know what you'll get.
See also http://www.quirksmode.org/blog/archives/2013/11/screenwidth_is.html , which is about screen.width/height, but device-width/height is ALWAYS, in all 50 browsers I tested, equal to screen.width/height, so the conclusions are valid in this case as well.
Advise users NEVER to use device-width/height.
Consider the heading/subheading markup patterns suggested in the HTML spec http://www.w3.org/html/wg/drafts/html/master/common-idioms.html#sub-head rather than advising multiple headings
example: current
<h1>Mobile Web Development </h1>
<h2>Building Mobile Web Experiences </h2>
suggested:
<header>
<h1>Mobile Web Development </h1>
<p>Building Mobile Web Experiences </p>
</header>
"Responsive Web Design Fundamentals
Much of the web isn't optimized for those multi-screen experinences. Learn the fundamentals get your sites everywhere from a Mobile device to a TV."
Note: "experinences"
What I'm missing here is a mention that :hover styles will only be applied after the click event, and thus after the 300ms delay. If I'd do a bgcolor change myself I think I'd do it with JS and touchstart - maybe. Touchscreen CSS hover is a bit janky for this purpose.
https://developers.google.com/web/fundamentals/documentation/user-input/touch-input/touchevents/index
"
if (window.navigator.msPointerEnabled) {
point.x = evt.clientX;
point.y = evt.clientY;
} else if (evt.targetTouches && evt.targetTouches.length > 0) {
point.x = evt.targetTouches[0].clientX;
point.y = evt.targetTouches[0].clientY;
}
"
Detecting MSPointers is not necessary here. I do the following, because your example doesn't work with the mouse, and mine does. Also, checking if changedTouches has a length is unnecessary since it will always have a member if a touch event just fired. (OK, the length won't hurt, either)
if (evt.changedTouches) { // touch events
point.x = evt.changedTouches[0].clientX;
point.y = evt.changedTouches[0].clientY;
} else { // pointer and mouse events
point.x = evt.clientX;
point.y = evt.clientY;
}
From HackerNews:
Click on "Getting Started" 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 / section I'm on?
currenly nested lists inside the toc look it's not right; see https://developers.google.com/web/fundamentals/getting-started/your-first-multi-screen-site/responsive for example.
putting something like .toc__list ol { padding-top: 0 }
in the stylesheet will solve the issue (not sure if I'm choosing the right selector here).
I would add touch-action: manipulation, which is specifically for removing the 300ms click delay.
Much of the web isn't optimized for those multi-screen experinences. Learn the fundamentals get your sites everywhere from a Mobile device to a TV.
Spell Check: Experiences
I was expecting to click on the circles. :)
https://developers.google.com/web/fundamentals/documentation/user-input/index
The link click area is offset below where it should be for the "Add Touch to Your Site" link.
It's not informative, as it just says 'Related Information'. Also, it's out of context from the actual section that it's in.
If you say this -> "To deliver the best user experience, we must deliver content as quickly as possible (<1 second)" then why does your section on Critical Rendering Path show the optimized page load in 1.5 seconds?
The preference for targetTouches is not explained anywhere, and I think changedTouches is preferable because it will also work ontouchend, when touches and targetTouches are empty. This is especially important for scripts like drag and drop where the touchend event contains important information. As far as I know there is no drawback to using changedTouches as long as you're working with one touch at the time.
On this page at /html/body/div[2]/div[2]/div/ol/li[3]/p the word integration should be integrate.
<p class="g-wide--push-1 g-wide--pull-1">Learn how to integration navigation patterns into your site and get users to complete the actions you want them to.</p>
while HTML5 structural elements are not fully supported in older browsers their use should be considered 'best practice' as they convey useful document semantics(see http://www.html5accessibility.com/) unlike divs
Icon sprites seem to be broken in latest Firefox on Mac OS.
couldn't see any info on providing appropriate alt text for images, suggest looking at Requirements for providing text to act as an alternative for images http://www.w3.org/html/wg/drafts/html/master/embedded-content.html#alt
Seems to be some spacing issues with this + if you hover it does not underline the number, just the text.
Image below
(if it doesn't show, link is http://imgur.com/2i5geZQ)
From hackernews. https://developers.google.com/web/fundamentals/documentation... - What am I supposed to click? The "2 guides" thingy looks like a button. No. Not clickable. But then just below are two identically colored "Create Amazing Forms" and "Add Touch to Your Site". Easily solvable with (a) buttons (b) underlined links (c) consistent navigation colors
Development is spelled incorrectly in the first paragraph.
Just had a few quick notes on https://developers.google.com/web/fundamentals/documentation/introduction-to-media/images/index#responsive-images, having written up the “responsive images problem” like a thousand times now.
An image that is 50% width may work just fine when the browser is 800px wide, but will use too much real estate on a narrow phone.
This kind of implies the “big enough for wide-screen layouts will be too big for small screens” problem, but it might be worth adding something to the tune of “an image large enough to be appropriate for a wide-screen layout comes with all the same bandwidth overhead when scaled down to suit a small-screen layout.”
Also, might be worth mentioning the upcoming picture
element in the content images section?
https://groups.google.com/a/chromium.org/forum/#!msg/blink-dev/vuLeAM9fJww/UHnMz7QLRWgJ
http://picture.responsiveimages.org
Great stuff, guys—looking forward to reading through everything!
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.