Bug 13173 - improper visual formatting on newsletter signup form
: improper visual formatting on newsletter signup form
Status: RESOLVED INVALID
Product: MySqueezebox.com
Classification: Unclassified
Component: Web UI
: MySB
: PC Other
: P2 normal (vote)
: Joplin
Assigned To: Michael Herger
http://test.squeezenetwork.com/download
:
Depends on:
Blocks: 13203
  Show dependency treegraph
 
Reported: 2009-07-31 15:30 UTC by Weldon Matt
Modified: 2009-12-14 00:22 UTC (History)
6 users (show)

See Also:
Category: Feature


Attachments
proposed newsletter signup form (54.09 KB, image/png)
2009-07-31 18:05 UTC, Matthew J. Martin
Details
proposed newsletter signup form illustrating "change" behavior for language (55.12 KB, image/png)
2009-07-31 18:05 UTC, Matthew J. Martin
Details
reference screen (347.37 KB, image/png)
2009-08-26 15:53 UTC, Weldon Matt
Details

Note You need to log in before you can comment on or make changes to this bug.
Description Weldon Matt 2009-07-31 15:30:02 UTC
need a page that prompts signup to our newsletter after downloading Squeezebox Server.
Comment 1 Matthew J. Martin 2009-07-31 15:55:25 UTC
Let's chat about this -- the wireframe on the wiki should probably be re-worked.

Since country / language / first & last name are already known, suggest by default these are pre-filled in disabled elements with text "[ English ] __change my language__" rather than require re-entry of data that is already know.

The trick with "name" is SN only knows a full name string, and we can only guess the order to fill "First name" and "Last name".
Comment 2 Matthew J. Martin 2009-07-31 15:56:51 UTC
__change my XXX__ should enable the form input and allow the values to be overridden from the existing known values.

Also, email should be prefilled in addition to country / language / first & last name.

We can remove "preferred format" since the system sends multi-part and they will automatically get the right version.
Comment 3 Matthew J. Martin 2009-07-31 18:05:30 UTC
Created attachment 5550 [details]
proposed newsletter signup form
Comment 4 Matthew J. Martin 2009-07-31 18:05:57 UTC
Created attachment 5551 [details]
proposed newsletter signup form illustrating "change" behavior for language
Comment 5 Matthew J. Martin 2009-07-31 18:09:05 UTC
"Why do you need this?" would be a simple tooltip appearing on hover that says: 

"We occasionally invite our community members to regional Squeezebox related events, such as our annual open-house here in Mountain View, CA. Providing your postal code helps us send you the most relevant information for your area."
Comment 6 Matthew J. Martin 2009-07-31 18:09:27 UTC
(In reply to comment #5)
> "Why do you need this?" would be a simple tooltip appearing on hover that says: 
> 
> "We occasionally invite our community members to regional Squeezebox related
> events, such as our annual open-house here in Mountain View, CA. Providing your
> postal code helps us send you the most relevant information for your area."

err, rather "Mountain View, California"
Comment 7 Matthew J. Martin 2009-07-31 18:13:32 UTC
Form behavior: 

- User must select at least one checkbox for "Which types of info..." 

- User must enter something in zip / postal code (EXCEPT Ireland.. any others without postal code?)
- JavaScript should detect for valid US (5 or 5+4 using dash or space) & CA zip codes
Comment 8 Michael Herger 2009-08-01 23:22:47 UTC
Can we keep this simple for an initial release? We have way too many things to implement in the next few weeks. No need to go Premium Gold everywhere...
Comment 9 Weldon Matt 2009-08-02 16:04:23 UTC
I was imagining we would just mimic what has been built already for logitechsqueezebox.com?

That's what I was going to design anyway.  A basic "installing Squeezebox Server" section plud the same signup form we use today... it doesn't even have to be a popup, just a static page.
Comment 10 Weldon Matt 2009-08-02 16:08:19 UTC
(In reply to comment #1)
> Let's chat about this -- the wireframe on the wiki should probably be
> re-worked.
> 
> Since country / language / first & last name are already known, suggest by
> default these are pre-filled in disabled elements with text "[ English ]
> __change my language__" rather than require re-entry of data that is already
> know.
> 

Country and mane won't be known.  You don't have to be logged in to get to this screen.


> The trick with "name" is SN only knows a full name string, and we can only
> guess the order to fill "First name" and "Last name".
Comment 11 Matthew J. Martin 2009-08-02 16:51:38 UTC
The problem with the way it works on LogitechSqueezebox.com is that it's not localized (especially the success / error messages when the form posts to newsletter.slimdevices.com).

The localized version will need to use the XML API which is more than just a simple HTML form.

Let's do English only for now and use the existing assets from LogitechSqueezebox.com. We'll make a localization pass on this when there's time to do it the right way.
Comment 12 Matthew J. Martin 2009-08-02 16:55:46 UTC
Michael, the form with validation JS (and some jQuery JS I mentioned) is in SVN: 

/websites/branches/web-refresh/www.logitechsqueezebox.com/subscribe_form.html
Comment 13 Weldon Matt 2009-08-02 21:10:54 UTC
Should I hold off doing any design work on this? 

Theoretically, Matthew, if you know what you want, and I provide assets/styles to Michael soon, my work on this one should actually be pretty minimal, no?

(Another one you might want to take a look at is the "support" page, which is static and mainly contains strings from Angela.  I was just going to provide a layout)
Comment 14 Matthew J. Martin 2009-08-02 21:42:22 UTC
Yes, the design work is minimal. It's the implementation that
complicates things. Basically we need to have the entire interaction
reside on MySB.com ... using the existing method (as seen on LogiSB),
this is not possible and l10n won't work.

To do it the right way (localized), MySB needs to call the XML API
which will take significantly more time to implement and test (yet
another ground-up bit of code needed to launch which will need QA
etc..., not re-using something that is already working).

Given the time-frame, I would propose deferring the "proper"
implementation in favor of an English-only (only appearing for English
users) to put more time on other high-priority stuff needed for
launch. So far the actual newsletters going out have been English
only, so this isn't terrible from a business perspective that we defer
a localized opt-in until we have the mechanisms to support it.
Alternatively, we could display the English-only opt-in for all users,
but that is a sub-optimal experience.

I'll chat about this with the marketing crew tomorrow and see what the
consensus is from Sam, Seth, and team.

On Mon, Aug 3, 2009 at 4:10 AM, <bugs@bugs.slimdevices.com> wrote:
> https://bugs-archive.lyrion.org/show_bug.cgi?id=13173
>
>
>
>
>
> --- Comment #13 from Weldon Matt <mweldon@slimdevices.com> �2009-08-02 21:10:54 ---
> Should I hold off doing any design work on this?
>
> Theoretically, Matthew, if you know what you want, and I provide assets/styles
> to Michael soon, my work on this one should actually be pretty minimal, no?
>
> (Another one you might want to take a look at is the "support" page, which is
> static and mainly contains strings from Angela. �I was just going to provide a
> layout)
>
> --
> Configure bugmail: https://bugs-archive.lyrion.org/userprefs.cgi?tab=email
> ------- You are receiving this mail because: -------
> You are on the CC list for the bug.
>
Comment 15 Michael Herger 2009-08-02 23:41:37 UTC
> The localized version will need to use the XML API which is more than  
> just a simple HTML form.

What XML API?
Comment 16 Matthew J. Martin 2009-08-02 23:44:09 UTC
http://idn.interspire.com/articles/27/1/Interspire-Email-Marketer-XML-API-Documentation/Page1.html

On Mon, Aug 3, 2009 at 6:41 AM, <bugs@bugs.slimdevices.com> wrote:
> https://bugs-archive.lyrion.org/show_bug.cgi?id=13173
>
>
>
>
>
> --- Comment #15 from Michael Herger <michael@slimdevices.com> �2009-08-02 23:41:37 ---
>> The localized version will need to use the XML API which is more than
>> just a simple HTML form.
>
> What XML API?
>
> --
> Configure bugmail: https://bugs-archive.lyrion.org/userprefs.cgi?tab=email
> ------- You are receiving this mail because: -------
> You are on the CC list for the bug.
>
Comment 17 Michael Herger 2009-08-02 23:59:00 UTC
> http://idn.interspire.com/articles/27/1/Interspire-Email-Marketer-XML-API-Documentation/Page1.html

That's the backend on logisb.com we should use from the mysb.com backend  
to subscribe users? Got that.

But then... let's make this P5. Please. We have a working form. Let's  
reskin it as needed and stick it into an iframe. Technically ugly, but  
efficient. And then let's do what mysb.com should do: let the user control  
his Squeezebox.
Comment 18 Matthew J. Martin 2009-08-04 13:24:20 UTC
Sam Feng is OK with english only for now -- per him I will add messaging on that form (the one you'll grab in iframe) indicating newsletter is English only for the time being.
Comment 19 Michael Herger 2009-08-11 04:26:46 UTC
Matthew/Matt - what's the latest news on this feature? What do I need to implement? What are you going to do (reskin existing form)?
Comment 20 Michael Herger 2009-08-19 00:06:26 UTC
Ping Matthew/Matt...
Comment 21 Matthew J. Martin 2009-08-20 00:58:41 UTC
Use this: http://www.logitechsqueezebox.com/subscribe_newsletter.php

I'm opening a new bug that the track skin on confirm / error messages which is broken.
Comment 22 Michael Herger 2009-08-20 01:51:31 UTC
done: http://test.squeezenetwork.com/user/newsletter

we might need some introductiory text at the top
Comment 23 Weldon Matt 2009-08-26 15:51:09 UTC
Finally had time to fully review this.  I actually think the existing page is great.

If we have time, it would be nice to switch to the "long" form layout style (see attached) for the form (so it localizes a little better).  But the existing layout should work OK if we don't have time to make that change.

Also note that I've left in the current "install" instructions (Michael, background box has #e3e3fd background and #999999 border), all we need to do here is change the wording from "SqueezeCenter" to "Squeezebox Server."
Comment 24 Weldon Matt 2009-08-26 15:53:32 UTC
Created attachment 5703 [details]
reference screen

Also added reference image here http://embargo.wiki.slimdevices.com/index.php/Mysqueezeboxdotcom#2b_My_Music_-_Thanks_for_Downloading.21
Comment 25 Weldon Matt 2009-08-26 15:54:17 UTC
Assigned to Michael, not sure if that's right, but my work should be done on this bug, so it's between Michael and Matthew to implement now.
Comment 26 Michael Herger 2009-08-27 04:58:41 UTC
Matthew - could you please provide me with the CMS key for that install instruction box?
Comment 27 Matthew J. Martin 2009-09-08 13:25:42 UTC
Last I looked at this we decided to use an iframe:

> Use this: http://www.logitechsqueezebox.com/subscribe_newsletter.php
> 

If you want to pull this from the CMS instead of an iframe, use:

NEWSLETTER-SUBSCRIBE-FORM
Comment 28 Michael Herger 2009-09-08 13:44:05 UTC
(In reply to comment #27)
> Last I looked at this we decided to use an iframe:

that's what we are apready doing. But Matt wnted to have a "getting started" box. Are you going to handle this too?
Comment 29 Matthew J. Martin 2009-09-08 13:47:25 UTC
Ah, OK I see this, now -- the instructional text on the left. I need to create this.
Comment 30 Matthew J. Martin 2009-09-10 09:21:40 UTC
Matt Weldon -- can you please attach the sidebar as plain-text  or a word doc? Thanks!
Comment 31 Weldon Matt 2009-09-15 16:40:30 UTC
Installing Squeezebox Server

Windows

After downloading, open the installer application and follow the on-screen instructions.

Mac OS X

After downloading, open the DMG file that appears on your desktop and double-click the Squeezebox Server Installer icon to install the software.

Linux, Solaris, & BSD

If you've previously installed SlimServer, SqueezeCenter or Squeezebox Server, you should uninstall it before installing the new version. Your system should be running Perl version 5.8.4 or later. To determine what version of Perl you are running, type 'perl -v' from the command line. You can download the latest version from www.perl.com.

You can read the Squeezebox Server change log here.
Comment 32 Matthew J. Martin 2009-09-20 16:28:12 UTC
Added installation notes, minor copy tweaks on change-log messaging to use Logitech brand voice.

Michael:

position: INSTALLATION-TIPS
title: Installing Squeezebox Server

Note that I have <h2>Installing Squeezebox Server</h2>

Do you want this in the markup, or will you use the title data from JSON? Let me know if you want it removed before I send to SLT.
Comment 33 SVN Bot 2009-09-21 03:39:12 UTC
 == Auto-comment from SVN commit #7395 to the network repo by michael ==
 == https://svn.slimdevices.com/network?view=revision&revision=7395 ==

Bug: 13173 +1
Description: implement "installing server" text block on success page.
Comment 34 Michael Herger 2009-09-21 03:40:53 UTC
Matt - we need to review the color schema on that page. It's currently a mix of new mysb.com colors and logitechsqueezebox.com. Could you please give precise instructions about the font, box background and border colors? Thanks!

Matthew - you'll probably have to implement these on logisb.com for that frame too.
Comment 35 Michael Herger 2009-09-21 03:42:43 UTC
Matthew - one more thing: could you please remove the line breaks from that text block? We should let the text flow as it hardly ever will perfectly match the planned layout.
Comment 36 Matthew J. Martin 2009-09-21 11:08:39 UTC
(In reply to comment #35)
> Matthew - one more thing: could you please remove the line breaks from that
> text block? We should let the text flow as it hardly ever will perfectly match
> the planned layout.

Done. Sorry I missed those.. thought I caught them all. Should be good, now.
Comment 37 Weldon Matt 2009-09-23 09:40:49 UTC
The title of the screen is supposed to read "Thanks for downloading Squeezebox Server!"

The header area (white text over black) should read "Subscribe to our newsletter," and the page title should be "Subscribe to our newsletter - mysqueezebox.com"

All the copy on this screen from the title downwards should be BLACK (including all of the web form), with the only exception being the "Windows," "Mac OS X" and "Linux, Solaris, & BSD" subheaders, which should be #666666.

Paragraph copy (including text in the web form) should be Arial, Helvetica, sans-serif 13px #000000.
Comment 38 Matthew J. Martin 2009-09-24 07:08:05 UTC
Michael, you should be able to do this based on what I have in the CMS. Reassigning to you to finish implementation. Please let me know ASAP if you need modifications to the content.(In reply to comment #37)

Matt,

> 
> The header area (white text over black) should read "Subscribe to our
> newsletter," and the page title should be "Subscribe to our newsletter -
> mysqueezebox.com"
> 

FYI: your reference screen doesn't reflect this -- shows "My Music" as the reverse-type title of the box.
Comment 39 Michael Herger 2009-09-24 09:08:56 UTC
Matt - fixed titles and Windows et al. font color.

Matthew - I'm sorry, I can't change the form's formatting. It's hosted on http://www.logitechsqueezebox.com/subscribe_newsletter.php, the style sheet is templates/LogitechSqueezebox/styles/teal.css from there. These need to be changed.
Comment 40 SVN Bot 2009-09-24 09:09:35 UTC
 == Auto-comment from SVN commit #7419 to the network repo by michael ==
 == https://svn.slimdevices.com/network?view=revision&revision=7419 ==

Bug: 13173
Description: fix heading and sub-title color on newsletter subscription page
Comment 41 Matthew J. Martin 2009-09-24 09:33:24 UTC
Michael: download and store a local copy of this instead of using the iframe. 

The target is already set to http://newsletter.slimdevices.com/form.php?form=8 so it should work fine to use a local copy which would only apply your stylsheets.

Can't change this on LogiSB side since it would break it within LogiSB template.
Comment 42 Michael Herger 2009-09-24 09:59:52 UTC
Only the greyish instead of black color for the form is still open. Considered good enough for this release. Let's review the subscription page post-INXS/7.4
Comment 43 Weldon Matt 2009-09-24 10:02:21 UTC
We didn't actually fix this bug, we just punted it.  Retargeting for Joplin, also I've edited the title to make the bug currently accurate.
Comment 44 Michael Herger 2009-12-14 00:22:11 UTC
no more newsletter