ampproject / ampstart Goto Github PK

P1

• High-priority item 1

P2

• Medium-priority item 2

P3

• Low-priority item 3

/to @abeck000 to fill out

P1

• High-priority item 1

P2

• Medium-priority item 2

P3

• Low-priority item 3

/to @abeck000 to fill out

The <link rel="canonical" href="www.ampstart.com"> tag in amp-page-head.snip.html needs updating so that it either matches the current path or points to the absolute URL including the protocol, i.e. https://www.ampstart.com/

P1

• Need indication of what amp-* extensions to include with each component ( @abeck000 to design)
• Need solution for iframe issue on page: currently on mobile it's easy to get stuck scrolling through scrolling iframes within scrolling viewport. /to @abeck000 to work w/ @camelburrito on a solution ( @ericlindley-g as needed) — maybe could put code snippets in accordions on mobile?
• Need way to get back to landing page ( @abeck000 to design — same goes for all non-landing pages)
• Ranged input doesn't appear in chrome mobile emulator:

P2

• Somehow fill in the area below sidebar/header examples so it's clear that there's not an empty space (@abeck000 to design)
• Add padding around text in code snippets (text shouldn't go all the way to left edge of the container (@abeck000 to give designs, but I imagine there's already a standard padding that can be applied)

P3

• Low-priority item 3

/to @abeck000 to fill out

https://ampstart-staging.firebaseapp.com/ has a comment before the doctype. That is invalid and triggers badness in browsers. No need to include the license in the published source like that. Just remove.

The off-center fill-in for the selected radio buttons gives them a kind of googly-eye look:

Is it possible to center the fill-in?

/to @camelburrito /cc @abeck000

Issue: The back button is not working

Steps to reproduce the bug:

1. Launch Chrome browser
2. Access Url:-https://ampstart-staging.firebaseapp.com
3. Scroll down to Page Templates
4. Click 'View Template' in ARTICLE
5. Select 'Read more'
6. Click Back button

Observed result: The back button is not working
Expected result: The back button should redirect to the previous page

Environment:-
Browser: Chrome
IOS Version: 9.2.1

Steps to reproduce the bug:

1. Launch Chrome browser
2. Access Url:-https://ampstart-staging.firebaseapp.com
3. Select UI Components
4. Try Selecting the options :-
   - Disabled Range IP
   - Read more
   - Latest Articles (Related Articles )
   - Follow Icon
   - Share Icons

Observed result : These options are not getting selected.
Actual result : The options should work.

Environment:-
Browser: Chrome
IOS Version: 9.2.1

right now we traverse the snippets directories multiple times for each mustache request which is quite expensive

Issue: The recommendations for the user don't work

Steps to reproduce the bug:

1. Launch Chrome browser
2. Access Url:-https://ampstart-staging.firebaseapp.com
3. Scroll down to Page Templates
4. Click 'View Template' in ARTICLE
5. Scroll down to 'Recommended for you'
6. Click on any recommendations

Observed result: The recommendations for the user don't trigger anything.
Expected result: The recommendations should show the details.

Environment:-
Browser: Chrome
IOS Version: 9.2.1

Screenshot attached

/to @abeck000 (Lucas working on designs)

For @camelburrito:

ALL PAGES

• amp-user-notification to show cookie consent banner and block amp-analytics until accepted
• include "Privacy" link in footer: https://www.google.com/intl/en/policies/privacy/
• include "License" link in footer: https://github.com/ampproject/ampstart/blob/master/LICENSE
• update buttons
• AMPSTART.com secondary page type needs different hero. should match spec: left align, bigger secondary text than currently. "subtitle" text (size 24px, LH 32 px: see folio

LANDING PAGE

• Logo should be linked to /
• "What is AMP?" leading to a different website is confusing as the first nav point. Should be after "How it works" and before "Github"
• The page templates section on the homepage looks empty on 15" screen. Make images smaller, make grey boxes extend full screen
• Fix device preview so it fits on a wide screen
• Templates need "Download Code" buttons
• Update wordpress link (https://amphtml.wordpress.com/) (@ericlindley-g is planning do this, but if you happen to get to it first...)
• Mobile and tablet template previews do not work in safari
• Use final template images (when provided)
• color change to match spec (in mock up)
• remove logo in hero image - MOVED TO NEW ISSUE #244
• left align content in hero
• change text
• update fonts: montserrat and inconsolata

COMPONENTS PAGE

• Put code snippets in accordions (both mobile and desktop)
• Update iframe size to accommodate larger buttons
• Opening sidebar abruptly scrolls user partway down the page in iOS Chrome
• Add dropshadow around nav bar iframes
• Include indication of what amp-* extensions to include with each component (design below)
• UI Components page: Add real images as image placeholders (I believe @spacedino is doing this)
• Checkboxes + text are too close together (per #118)
• Fix overlap issue (per #68)
• Bug with navbar

GET STARTED

• Change page header from "How it works" to "Get started"

HOW IT WORKS

• Change first sentence to match size of rest of text (not large text)

ARTICLE TEMPLATE

• add title to header - MOVED TO ISSUE #252
• swap out instagram account
• add card to instagram - MOVED TO ISSUE #246
• twitter missing - MOVED TO ISSUE #247
• fix social sharing - MOVE TO ISSUE #248
• swap out type "v" for chevron svg in Full Page Hero

BLOG TEMPLATE

For @spacedino (then to pass to @camelburrito)
ALL

• add 2x images
• blog theme needs new icon, not such a drastic descender - MOVED TO ISSUE #249
• add images to instagram (1 or 3 from unsplash)

LANDING PAGE

• When text is final: Provide final template images (updated content, high-res versions)
• make preview header more user friendly - MOVED TO ISSUE #250

COMPONENTS PAGE

• UI Components page: Add real images as image placeholders

For @ericlindley-g

ALL PAGES

• Scrub text

COMPONENTS PAGE

• Add more details about how to use components - MOVE TO ISSUE #251

GET STARTED

• Add more details about how to "deploy". Maybe "upload to your server or CMS" instead of "deploy"?

P1 (High-priority)

• Missing header in preview mode with ability to toggle between desktop and mobile and close affordance

P2 (Medium-priority)

• we need to make sure the image representation of the templates are the right size and match the size in the mobile preview display

Test all templates and main site on

Windows: IE , Edge, Chrome, FF
Android: Chrome, FF
Ios: Safari, Chrome
Macos: Chrome, Safari, FF

• Basscss + Normailze should be body copy
• add bullets
• indent

/to @abeck000 to provide details/assets

/cc @camelburrito

Since we are distributing source code we will need to include both our (the shortened version we use in source code files) and the BassCSS license in the provided CSS on the website.

Short-term:

P1

• find resources to help with images as needed

P2

• Fix images - add drop shadow around them / get new images for whole page.

Long-term:
Feed info from user journey research into this page, considering how people might navigate through this

P1 (High-priority)

• replace hero image with IMG_5386.jpg - MOVED TO ISSUE #315
• "Servings:" looks too small, change to body copy and highlight blue. remove ":"
• "FOOD" category tag should be all caps
• change letter spacing of h2 class = "mb4" to ".02em" - MOVED TO ISSUE #318
• change letter spacing of h3 class ="mb4" to ".01em" - MOVED TO ISSUE #318
• Navbar: heading jump on expand/collapse (animation at the bottom of this doc
• social media icons too big - MOVED TO ISSUE #319
• text in "Meet lola" section too close to image.
• text in "Meet lola" needs a full paragraph of text
• instagram embed looks off, add a card to the background like the mock up
• "Categories" needs margin below. "Fashion"is too close to it
• "the blog" image looks off center with menu bar, may need to change this image
• nav bar should only show drop shadow on scroll
• menu icon and X too big MOVED TO ISSUE #264
• spacing between side bar categories should be 40px
• "About" and "Contact" in side bar should have letter spacing of .01 rem - MOVED TO ISSUE #290
• blue for secondary categories in sidebar is too light. should match highlight blue. rollover can be lighter. MOVED TO ISUE #322
• missing blue line separators from mocks and to match Blog template - MOVED TO ISSUE #316
• "Popular articles" section looks off. Hard to tell which image is linked to which title. We might need to add description text here or add section separators ( /to @abeck000 to design: best would be a solution that works with or without description text)
• Replace comments form with newsletter signup form (Leave a reply becomes an external link /to @abeck000 for designs)

P2 (Medium-priority)

• comments section: name too big "ex: Rachel"
• comments section: time stamp too big and wrong color "ex: 01.27.16 at 5:14 am"
• "Submit" button too small

P3 (Low-priority)

• slight jumpiness when making window smaller on images - MOVED ISSUE TO #323
• replace "Want" section second image - MOVED TO ISSUE #324
• form fields in "leave a reply" section too crowded > we might remove this for v1 though and maybe include in components UI only if its easy...

P1

• High-priority item 1

P2

• Medium-priority item 1

P3

• Low-priority item 1

/to @abeck000 to fill out

Issue:

Steps to reproduce the bug:

1. Launch Safari browser
2. Access Url:-https://ampstart-staging.firebaseapp.com
   3.Click 'Page Templates'
   4.Click 'View Template' in ARTICLE
3. Scroll down to the 'RELATED ARTICLE'

Observed result:There is an extra text under "READ MORE" which does not have a note, what it is about

.
Expected result: Text need to have a note,which says what it is about.

Environment:-
Browser: Chrome
IOS Version: 9.2.1

Totally forgot about the favicon for the site! Maybe just the AMP logo? @spacedino , @camelburrito WDYT?

Top left corner amp icon does not take user to home page.

Includes

implementation for:
baseline blog template
news article template

/to @camelburrito

opinionated templates (pending design) (/to @abeck000 )

P1 (high priority)

• Fix device preview so it fits on a wide screen — TOP PRIORITY

• Templates need "Download Code" buttons — TOP PRIORITY

• update with copy when final

• update footer with privacy and terms ( @ericlindley-g for links when ready, @spacedino for design updates)

• Replace template preview images with hi-res images of the templates (will need to make sure the image representation of the templates are the right size and match the size in the mobile preview display) / to @abeck000 to provide assets

• use correct fonts (right now they are Helvetica)

• "Flexible" has "pb2 caps mb3 h3 relative" class while "Responsive" and "Open Source" have "www-heading pb2 caps mb3 h3 relative" ( @abeck000: which should it be? ... @ericlindley-g no idea. i defer to sriram. i just know they should match the mock ups and be the same.") this is actually just part of the above bug. ^

• Add box-shadow to template images

• rollover should be underline in nav bar, remove current interaction

• "view mobile" and "view templates" should be right and left aligned accordingly (toward outer edge of screen)

• grey boxes for each template should be full bleed

• update wordpress link

• "Built with AMP Start" should link to interactive previews of actual templates (pending implemented designs)

• Address large spacing on page with wide screens (@cramforce's feedback). Restrict column of content to 850px & update design to spec (/to @spacedino and @camelburrito to work together to solve)

• Use hi-res assets for site images (esp templates) (/to @spacedino to provide)

• fix horizontal spacing of page - will need adjustments ( /to @abeck000 to provide specifics)

• X in side bar is too big and spacing looks off ( /to @abeck000 to provide specifics — may just want to use smaller image with large tap-target) - MOVED TO ISSUE #264

• buttons are too small, padding is off ( /to @abeck000 to provide specifics)

• we may need to revisit the 831px tablet break point. The text for the principles section looks odd. ( /to @abeck000 to update design)

• the bottom of the page should scroll up over the gradient area, like a flying carpet

P2 (Medium-priority)

• fix spacing below H2s "Full Page Templates" and "Built with AMP Start"> should be 80px (not 56px)
• external links should open in a new window
• Use motion previews for templates
• Clicking on template images should open preview modal

P3 (Low-priority)

• update footer when design is complete ( /to @abeck000 to provide specifics)
• hide scroll bar in carousel for "Built with AMP Start"
• weird blue outline on buttons on click (@abeck000: this is the default "focus" state for the browser. we can design a different version of this, but some folks recommend not to

Fixed

• add missing line under "FLEXIBLE"
• "view template" on mobile is broken
• "Templates" link is broken

Moving ticket from the main AMP Project repo over here for better tracking

When the time is right, @abeck000 should do a review for UX polish on the site, and file bugs (along with associated severity: P1 (launch blocking), P2 ("should" do), P3 (nice to have), so @camelburrito can make fixes before launch.

I vote that we make the headers in the templates * not * sticky, in part because they take up vertical screen real estate, which is already taken up by a) the browser bar, and (in particular w/ AMP) b) an AMP viewer header. WDYT?

/to @abeck000 & FYI @camelburrito

P1 (High-priority )

• hero image transition from tablet to mobile is jumpy and re-centers the image. we should make this smoother. can we move the center point on tablet to match mobile crop? MOVED TO ISSUE #325
• "photo gallery" tag should match the category class from Article template (smaller, all caps, blue)
• add standard spacing above drop cap section and below the line separator
• line separators should be blue MOVED TO ISSUE #326
• remove links on captions MOVED TO ISSUE #327
• Navbar: heading jump on expand/collapse (animation at the bottom of this doc
• text after carousel is doing something very strange...too small, wrong color, too much space between the elements MOVED ISSUE TO #330
• lines for "Related Article" section should be aligned with the rest of the objects, not extending past them MOVED TO ISSUE #333
• captions should be left align to image on desktop and indented on mobile MOVED TO ISSUE #334
• social icons too big COVERED IN ISSUE #248
• fix black highlight box and spacing around text. make it even and consistent ( /to @abeck000 to provide details)
• missing site title "The Scenic" > maybe we want to change this MOVED TO ISSUE #335
• Update title and images to all animals ( /to @abeck000 to provide assets)
• replace "read more" "v" with caret icon MOVED TO ISSUE #336
• tweak captions, should be black and grey text, no bold MOVED TO #342
• need to fix tablet view "Latest Articles" section MOVED TO ISSUE #343
• Add context to understand difference between "share" and "follow" social icons. OK FOR NOW

P2 (Medium-priority)

• instagram embed should be on a card
• twitter embed should be on a card

P3 (Low-priority)

• can we modify the media loader to a custom loader? ( /to @abeck000 to provide details/asset) MOVED TO ISSUE #344
• add real photo credits

Issue: The user is unable to select the Checkbox3

Steps to reproduce the bug:

1. Launch Chrome browser
2. Access Url:-https://ampstart-staging.firebaseapp.com
3. Select UI Components
4. Scroll down for 'Form Elements'

Observed result: The user is unable to select the Checkbox3
Expected result: The user should be able to select the Checkbox3

Environment:-
Browser: Chrome
Model No: Nexus 6P

Android Version: 6.0.1

Screen shot attached

/to me, @camelburrito @abeck000

Draft is ready to review for accuracy, then will share out with broader group for clarity (then needs mocks, then implementation)

Issue: The alignment of the Check boxes is not appropriate

Steps to reproduce the bug:

1. Launch Chrome browser
2. Access Url:-https://ampstart-staging.firebaseapp.com
3. Select UI Components
4. Scroll down for 'Form Elements'

Observed result:

1. There is no padding for the Check box and the number.
2. Check box 3 is getting truncated.
   Expected result: Alignment of the Check boxes has to be appropriate and the Check box should not get truncated.

Environment:-
Browser: Chrome
Device name: Galaxy Note 4
Model No:SM-N910H
Android Version: 6.0.1

Screen shot attached

P1

• High-priority item 1

P2

• Medium-priority item 2

P3

• Low-priority item 3

/to @abeck000 to fill out

There seems to be a problem with IE11 rendering the slanted header item on the UI Components page. Please view both images for comparison.

Referencing fixed colors in baseline styles means more CSS overrides are needed when themes want to use a different color palette, which not only adds unnecessary CSS but is also more awkward to maintain.

Using byline.css as an example:

.ampstart-byline {
  color: var(--color-dark-grey);
}

There are two ways for themes to override the .ampstart-byline color, neither of which are particularly desirable:

1. Override --color-dark-grey to make it another color
2. Override the color property of the .ampstart-byline class in page.css

Instead of .ampstart-* classes referencing fixed colors, color variables which have names that reflect their intended purpose (or something more abstract) should be used instead.

I suspect this particular example might have just been an oversight given there are color variables like --color-font-primary and --color-font-secondary already available, but it should be fixed regardless.

Issue: The CHECK BOXES 'On' and 'Off' of Form Elements are both enabled.

Steps to reproduce the bug:

1. Launch Chrome browser
2. Access Url:-https://ampstart-staging.firebaseapp.com
3. Select UI Components
4. Scroll down for 'Form Elements'
5. Select Check Box1 (On) and Check Box2 (Off)

Observed result: Both the Check Boxes are enabled.
Expected result: only one Check Box can be enabled
Screenshot Attached

ENVIRONMENT DETAILS:
Browser: Chrome
Device Model: Galaxy Note 4
Android Version: 6.0.1

P1

• “Fullpage Hero” component isn’t used since the markup wasn’t suitable MOVED TO ISSUE #263

P2

• Sidebar uses default styles instead of how it was in the mocks MOVED TO ISSUE #261
• View Menu button needs background color for better contrast OK AS IS

P3

• Reservation form isn’t implemented MOVED TO ISSUE #262

Issue: The Follow Icons take you to the top of the page

Steps to reproduce the bug:

1. Launch Chrome browser
2. Access Url:-https://ampstart-staging.firebaseapp.com
3. Scroll down to Page Templates
4. Click 'View Template' in ARTICLE
5. Scroll down to the end of the page
   6.Click on any of the Follow Icons (or) 'ABOUT, CONTACT ,TERMS'

Observed result: It takes you to the top of the page
Expected result: It has to redirect to the page,which the icon shows.

Environment:-
Browser: Chrome
Android Version: 6.0.1
Model no:Nexus 6P

Screenshot attached

• In sidebar the close X is way too close to the first menu item.
• Logo should be linked to /
• "What is AMP?" leading to a different website is confusing as the first nav point
• Homepage photos need to be reshot. And need to have HiDPI variant.
• The page templates section on the homepage looks empty on 15" screen.
• UI Components page: The grey boxes look like errors. Maybe switch placeholder.
• UI Components page: I think people will need more explanation for how to use this. Link to get started?
• Get started: The images representing the templates need to be linked.
• Get started: Missing an explanation for how to "deploy" it. Deploy is also a complicated BS word. Maybe "upload to your server or CMS"?

Copy pending from UX Writer

/to @abeck000 for designed copy when finished, to @camelburrito for implementation

Matching template names:

blog-photogallery.amp.html -> article.amp.html
img/blog-photo-gallery/... -> img/article/...

blog-recipe.amp.html -> blog.amp.html
img/blog-recipe/... -> img/blog/...

Removing "cropped" from img names

bird_cropped.png -> bird.png (same for all of the images — should just have a simple name unless there's a cropped and un-cropped version)

Make "elephant" plural
elephant_wide.jpg -> elephants_wide.jpg (making it plural, like the other one)

Removing "mojito" language
themohito.jpg -> spritzer.jpg

BTW: @spacedino — is there a reason we have pngs for some of these, and jpgs for others?

/to @abeck000 to review design feedback
/cc @camelburrito (could you also give me access so I can add assignees and labels?)

intsagram posts could be embedded in main content, rather than tagged on at end (at least fiddle with)

NEWS ARTICLE

• Gap between related articles and footer feels too large

• Sidebar: use n-dashes (e.g. "–") instead of hyphen (e.g. "-") for accordion minimize affordance

• Use different images in carousel instead of same flower (question: @abeck000, what images are you planning for this template? Is it these?)

• The hamburger menu icon and close affordance feel a little large

BLOG POST

• Footer height feels too large

• Could we use a newsletter signup instead of an inline comment field? I think the way the commenting flow would work with login is like amp-access, where the user is taken to a separate window to sign-in, before coming back to comment, and I don't think we'd want to put something that complex in this template (yet). On the other hand, a newsletter signup is a more straightforward form

• Instagram feels a little awkward at the bottom, in practice. May just want to embed in the article body, unless there's a design solution to make it look more at-home

Future enhancement:

• Caption carrying with image looks awkward — can't fix it now, but can with Bind soon!

External stylesheet are not allowed . May I know why external stylesheet was used.

Copied from notes:

Need build process to build individual-component-css per template so that we can showcase it along with the copy pastable html. Same thing for individual-component-html

/to @abeck000 for assets, then to @camelburrito for implementation

Currently uses placeholder content for the three template mock-up images.

Should be images of the templates themselves:

e.g.: