This bug is to execute any design required for the Reading List FTU launching with FF38. UX bug 1129536

Hi Mike, Is this just a placeholder for if any design work is needed from the Creative team or are there specific asks for this? I want to make sure we have any potential work on our radar. If there is expected work, can you also provide rough timing? Thanks!

Hi Lee, Wireframes have been posted to bug 1129536. Do you think we can have something to review by Wednesday? Copy is being done by Troy in bug 1144766. Thanks

Quick note that we don't need a visual design for bug1129536comment9. When the user is in reader view, this is what we assume the view will look like.

Hi all, here are some mockups based on Holly's first pass at the Landing Page in the UX bug (1129536) http://cl.ly/3K2X0u3r3x00 Looks like RV creates a column width of 660px, so I optimized the top graphic to fill that width.

(In reply to Lee Tom from comment #4) > Hi all, here are some mockups based on Holly's first pass at the Landing > Page in the UX bug (1129536) > > http://cl.ly/3K2X0u3r3x00 > > Looks like RV creates a column width of 660px, so I optimized the top > graphic to fill that width. Looking good, Lee. In the meeting yesterday we talked about moving that wireframe image of how Reader View renders pages to the top of the page for non-Firefox users. If they're not using Firefox already, showing them where it lives in the browser chrome doesn't make as much sense.

'+' icon for the URL bar - http://cl.ly/code/1u1R110S1R44

(In reply to Matej Novak [:matej] from comment #5) > Looking good, Lee. > > In the meeting yesterday we talked about moving that wireframe image of how > Reader View renders pages to the top of the page for non-Firefox users. If > they're not using Firefox already, showing them where it lives in the > browser chrome doesn't make as much sense. Per a meeting today (habber, lee, alex), let's keep the image the same for non FF. 1) it gives users a preview of what is coming next 2) avoid adding complexity to this page given the fact it will have to interact with Reader View. Lee to provide a new comp with the '+' icon in the URL bar to match the feature.

Hi all, Please review the new comp: http://cl.ly/1O3n0C3d022n - added the '+' icon for Add to Reading List - all copy updated from Troy's latest copy https://docs.google.com/a/mozilla.com/document/d/1YppLD-xD7FWnz8T_eHystEP0DLdrFGH68jHEfnbITcY/edit - browser chrome remains as the hero for both User and Non-User versions - simplified glyph colors that work well for both, styled-page and RV (CSS/SVG overlays TBD by agibson)

Designs in comment 9 are approved. Lee, please upload design file.

I'll post these to the DAM asap, but here's a link to the PSD and icon assets, for the time being: http://cl.ly/13043b2w1i3u

Thanks, Lee! Could you please provide an SVG of the main browser image as well? Thanks

Let me know if you need anything else, Alex. Thanks! http://cl.ly/2Z2q443E1I2m (In reply to Alex Gibson [:agibson] from comment #12) > Thanks, Lee! > > Could you please provide an SVG of the main browser image as well? Thanks

(In reply to Lee Tom from comment #13) > Let me know if you need anything else, Alex. Thanks! > http://cl.ly/2Z2q443E1I2m > > > > (In reply to Alex Gibson [:agibson] from comment #12) > > Thanks, Lee! > > > > Could you please provide an SVG of the main browser image as well? Thanks Hi Lee, Could I please get the browser SVG file cropped and sized as it's seen in the design? Because reader mode will ignore the CSS I specify in the web page, we'll need to make sure it gets displayed consistently in both modes. As it stands, I believe the full height browser image would get displayed in reader mode as provided here. Sorry I don't have the tools to try and adjust this myself very easily.

Lee, some of the other SVG icons also seem to be not quite usable as inline <img>'s. Most seem to be positioned on a very large viewBox, so they all appear really tiny. I'm trying to amend them by hand but for some of the more detailed ones, it may be easier to resize/export them in Illustrator. Can you take a look at those too if you have some time? Thanks

No problem, Alex. I get it. Here's a cropped version of the browser UI: http://cl.ly/0f2i1J0k251T > > Hi Lee, > > Could I please get the browser SVG file cropped and sized as it's seen in > the design? Because reader mode will ignore the CSS I specify in the web > page, we'll need to make sure it gets displayed consistently in both modes. > As it stands, I believe the full height browser image would get displayed in > reader mode as provided here. Sorry I don't have the tools to try and adjust > this myself very easily.

OkOK..please disregard the graphic I posted in Commment #16. Here is a whole new set of SVGs scaled to our webpage designs with artboards set to the same dimensions as the graphics: http://cl.ly/1K1u1Y163z0w Ping me if you have any problems! Thanks. (In reply to Alex Gibson [:agibson] from comment #15) > Lee, some of the other SVG icons also seem to be not quite usable as inline > <img>'s. Most seem to be positioned on a very large viewBox, so they all > appear really tiny. I'm trying to amend them by hand but for some of the > more detailed ones, it may be easier to resize/export them in Illustrator. > Can you take a look at those too if you have some time? Thanks

Lee, an update on our idea for the icons: My original plan was to use inline SVG for the icons in the lower section of the web page, which would allow us to style them a different color in the page using CSS, and have them displayed their original color in Reader View. However, it seems Reader View freaks out when I try to inline SVG this way (I'm still trying to debug why exactly). I think we should probably proceed for now using a simple <img> for the SVG icons, which sadly means I can no longer style them different colors. Lee, could we try your alternate idea where the icons we're blue in a white circle? I think we may need to keep the markup as simple as possible, so the white circle should probably also be part of the SVG.

I'm saving these out as SVG at 80x80px (to display at 40x40px), but AI keeps resizing the artwork and artboards... Let me know if they come out OK on your end: http://cl.ly/3z2p3w3t1L10 (In reply to Alex Gibson [:agibson] from comment #18) > Lee, an update on our idea for the icons: > > My original plan was to use inline SVG for the icons in the lower section of > the web page, which would allow us to style them a different color in the > page using CSS, and have them displayed their original color in Reader View. > > However, it seems Reader View freaks out when I try to inline SVG this way > (I'm still trying to debug why exactly). I think we should probably proceed > for now using a simple <img> for the SVG icons, which sadly means I can no > longer style them different colors. > > Lee, could we try your alternate idea where the icons we're blue in a white > circle? I think we may need to keep the markup as simple as possible, so the > white circle should probably also be part of the SVG.

(In reply to Lee Tom from comment #19) > I'm saving these out as SVG at 80x80px (to display at 40x40px), but AI keeps > resizing the artwork and artboards... Let me know if they come out OK on > your end: http://cl.ly/3z2p3w3t1L10 To get these to size correctly in Reader View, looks like we'll need them without the white circles, sorry Lee :( Could we please try one last time, and make sure they are exactly the same height / size in their original size? I'll have to try and add the white circle styling using CSS in the web page. Hopefully I can do this cross-browser without adding extraneous markup. Also, can you please provide @2x png's for before/after images (plug arrow) which are visible in non-Firefox browsers. Thanks

That should be (plus arrow), sorry.

Just a quick checkin here. I want to ensure we are incorporating the CTA button copy. It wasn't in the original design. It was something we had to add based on product discussions. It should be 'Try it now'

It's also in the copy document.

(In reply to Cory Price [:ckprice] from comment #22) > Just a quick checkin here. I want to ensure we are incorporating the CTA > button copy. It wasn't in the original design. It was something we had to > add based on product discussions. > > It should be 'Try it now' It's in the template ready, fwiw.

Alex, sorry for the delay - Do you still need something from me, or did we cover it out-of-bug? (In reply to Alex Gibson [:agibson] from comment #20) > (In reply to Lee Tom from comment #19) > > I'm saving these out as SVG at 80x80px (to display at 40x40px), but AI keeps > > resizing the artwork and artboards... Let me know if they come out OK on > > your end: http://cl.ly/3z2p3w3t1L10 > > To get these to size correctly in Reader View, looks like we'll need them > without the white circles, sorry Lee :( > > Could we please try one last time, and make sure they are exactly the same > height / size in their original size? I'll have to try and add the white > circle styling using CSS in the web page. Hopefully I can do this > cross-browser without adding extraneous markup. > > Also, can you please provide @2x png's for before/after images (plug arrow) > which are visible in non-Firefox browsers. > > Thanks

I got the icons ok after we talked on IRC, thanks Lee. This page is no longer happening for Spring campaign, so I've just set the assets aside for the time being. Thanks