denise: Image: Me, facing away from camera, on top of the Castel Sant'Angelo in Rome (Default)
Denise ([staff profile] denise) wrote in [site community profile] dw_beta2014-06-10 05:55 am

New responsive-design site skins and community admin pages

This code push introduced a few pages as a "test drive" of our first draft of a responsive-design overhaul of the site.

As I said in the [site community profile] dw_news post announcing the test-drive, there are several purposes of this redesign. Aside from the boring technical ones (making it easier for us to maintain and troubleshoot the code, reducing browser incompatability, giving us more options in terms of designing, etc), the two big ones are:

* Improve the way the site looks and feels on small screens (such as on tablets and mobile devices) without worsening the experience for people using large screens (desktops and laptops).

* Improve the accessibility of the site: make it easier to access the site with screenreaders, interact with the site using alternate input devices, interact with the site using only the mouse or only the keyboard, etc.

This is a "first draft"-type implementation, and we're sure that people are going to have a lot of feedback! Usually we would have run this through a [site community profile] dw_beta-style beta test that you could activate for your account, but Boring Technical Reasons means that doing a beta-style test for this would have been difficult if not impossible. So, we've converted the community admin area, including the site skins as displayed on those pages, as a working example. This will let you get a sense of what the site skins will look like, and the sort of "visual vocabulary" we'll be using.

This entry is for two things: reporting any actual display bugs or glitches with the pages (in your browser, whether on your computer or on your mobile device), and providing aesthetic feedback about the look and feel of the design.

If you're reporting display bugs or glitches: Please describe the glitch in as much detail as possible. Screenshots would be really helpful, especially if you're only seeing the glitch in one browser but not another, or only on your phone but not on your laptop. (You don't have to check for the glitch on multiple devices, but if you do, let us know which devices have the problem and which don't.)

If you have feedback specifically about the aesthetics or the look of the redesign (you think something needs more padding, want to suggest a different font/color/color combination/background/what-have-you, think something is in the wrong place, that kind of thing): Please be as specific as possible about what you think needs to be changed, or what's bugging you about the way things look. For instance, instead of saying "the header is so ugly and squished now, change it back", say "On my computer, the links in the header don't have enough space between them, so they look like they're running into each other."

(We know that people definitely have strong opinions about the way things should look -- that's why we're doing this incrementally -- but the most helpful feedback is the kind that's specific, concrete, and actionable.)

With all feedback, include the following:

* Which site skin you're using (you can find this on the Display tab of Manage Settings if you don't know)
* What browser and browser version you're seeing the problem in
* What operating system you're using
* What type of device you're using: laptop, desktop, phone, tablet, e-reader, etc. (And if phone/tablet/e-reader, what make and model.)
* What your display resolution is, and what your current browser size is. To check this if you aren't sure: go to whatismy.browsersize.com and report the following numbers: Browser window width, browser window height, screen width, screen height.

If you're specifically reporting an issue with how the redesign works (or doesn't!) in your assistive technology setup, please also include:

* What assistive technology you're using (name of program, description of setup, etc)
* If it's software, the software version
* If it's workflow related (you find it difficult to navigate using keyboard-only navigation, for instance), a brief description of your workflow and what about the page is making it difficult

A note about font size: if you use Tropospherical Red (the default site skin) or Tropospherical Purple, and your first reaction when you look at the page is that the font size is too big, that's because it actually is larger than it was, and that's deliberate. The existing versions of the Tropo site skins set the font size on the page to be .75em (75% of your browser default size). That's actually an accessibility problem, and we shouldn't have done it way back when we were creating the site. (But we weren't thinking as much about accessibility then as we are now!)

We've tried several times since then to change the Tropo skins so they use your browser's default font size, to fix our mistake, but the way the Tropo skins were coded made it difficult if not impossible. This redesign is making it possible for us to fix that mistake now. So, if you think the font size is too large: it's using your browser's default font size, and you can change that yourself. In many browsers, you can specify a particular zoom level for a specific site, too. (In fact, you may have already changed it to be larger on Dreamwidth, to counterbalance the smaller font size that the site skin was setting; if so, changing it back will help.)
ninetydegrees: Drawing: a girl's face, with a yellow and green stripe over one eye (Default)

[personal profile] ninetydegrees 2014-06-10 01:50 pm (UTC)(link)
Firefox Aurora 31.0a2, Windows 8.1, 1600x900 resolution, 17px minimum font size.

As previously noted:
Love the new design (and functionalities)!
Starting at 15px minimum font size, the menu 'boxes' overlap the menu bar and the little DW twirls are a bit too close to the text (menu items and submenu items).
Also noting: right elements (search) aren't vertically aligned in the middle, the go button overlaps the bottom of the bar.
Below 15px minimum font size, the right elements aren't correctly placed and go under the bar.
I don't know if the go below when too small is by design but if it is I feel it looks very odd where it is and the way it's still displayed like a shorter bar, attached or sometimes not attached to the bar above. Also content below doesn't get pushed down.

In current Chrome, using a bigger font size than the default one (which I think is called medium in English) will more or less have the same effects: swirls being too close to the text, right elements overlapping the menu bar. Also the leading in the submenus gets smaller. Using a smaller font size than medium will make search go below the bar, as in FF.

The 'switch' button background is too close to the background of the bigger box it's in, not providing enough contrast imo. I feel the gray on gray doesn't have enough contrast generally speaking actually. It also looks like it's missing a dark border and is right next to the 'work as' drop down and I think a little space in between these would be nice. Same thing for the 'find' button at the bottom of the page.

http://i.imgur.com/aPQffcu.png
Edited 2014-06-10 14:03 (UTC)
ninetydegrees: Drawing: a girl's face, with a yellow and green stripe over one eye (Default)

[personal profile] ninetydegrees 2014-06-10 05:15 pm (UTC)(link)
Hack: when viewing a moderated entry, there's a line going through the text which is above the optional message textarea.

Samsung Galaxy Note 10.1 2014 edition tablet/built-in browser: same issues as mentioned above if text is set higher than 100%.

Same device w/ Firefox 29: oh I see the 'switch', etc. buttons have a gradient! It didn't show elsewhere. It's pretty but doen't really fit the rest of the design which is flat. My opinion of course. The text on 'save membership settings' is also harder to read w/ a gradient I think.
Text in menus, header and footer is too small for me (I have it at the higher setting): it's bigger in the current design.
The little twirls are cut off.
Log out and go are really, really small.
fu: Close-up of Fu, bringing a scoop of water to her mouth (Default)

[personal profile] fu 2014-06-18 08:08 am (UTC)(link)

Hmmmm, I don't think there's a gradient, or at least I can't see it. Here is what I see:

[1]https://www.dropbox.com/s/41a9ycdx38ssdb5/Screenshot%202014-06-18%20 15.57.11.png

(Any chance it's a user stylesheet?)

ninetydegrees: Drawing: a girl's face, with a yellow and green stripe over one eye (Default)

[personal profile] ninetydegrees 2014-06-18 11:31 am (UTC)(link)
I couldn't open your file but I don't have a custom stylesheet on this device and deactivating the few add-ons I have didn't change a thing. (also this is FF 30.0 now)

Here's a screenshot: http://i.imgur.com/jsbgbE9.png
Edited 2014-06-18 11:32 (UTC)
fu: Close-up of Fu, bringing a scoop of water to her mouth (Default)

[personal profile] fu 2014-06-19 04:12 am (UTC)(link)

Hmmm. that doesn't look like anything I see / in the code.

This is what I see in Tropo Purple FF 29:

ninetydegrees: Drawing: a girl's face, with a yellow and green stripe over one eye (Default)

[personal profile] ninetydegrees 2014-06-19 05:23 am (UTC)(link)
I can't see what you see as I can't see any link in your comment but I guess it's what I see in the non-mobile version of FF. Unfortunately, I don't have any other mobile device to test this on.
fu: Close-up of Fu, bringing a scoop of water to her mouth (Default)

[personal profile] fu 2014-06-20 03:01 am (UTC)(link)

Aha gotcha. Ummmph. I'm not sure what we can do about it looking strange in Firefox (sounds like default styling overriding the website ugh), but I will keep an eye out for any info, thanks.

ninetydegrees: Drawing: a girl's face, with a yellow and green stripe over one eye (Default)

[personal profile] ninetydegrees 2015-01-31 01:24 pm (UTC)(link)
Improvements:
-- the go button no longer overlaps the bottom of the bar in FF 35/17px and Chrome 40/medium (but the drop down menu does in Chrome/big, and so do all boxes in Chrome/very big).
-- the DW twirls are correctly positioned now (FF and Chrome).
fu: Close-up of Fu, bringing a scoop of water to her mouth (Default)

[personal profile] fu 2015-02-02 07:10 am (UTC)(link)

I am sort of worried about that last thing being fixed because I don't think that I did anything to change that, which makes me now wonder if I broke something else or if it's broken on other pages or something!

ninetydegrees: Text: IDK. (idk)

[personal profile] ninetydegrees 2015-02-02 04:23 pm (UTC)(link)
Maybe it's something which was fixed in both browsers or an extension I have which was messing things up. In any case, the twirls look fine both on non-Foundation pages and on F ones, just a bit closer on F ones.
If it makes you feel better, the drop downs are still bigger than the bar. :P
fu: Close-up of Fu, bringing a scoop of water to her mouth (Default)

[personal profile] fu 2015-02-02 04:34 pm (UTC)(link)

Haha yes maybe. Thanks that does make me feel a bit better somehow

ninetydegrees: Drawing: heart in a speech bubble (love)

[personal profile] ninetydegrees 2015-02-02 04:36 pm (UTC)(link)
*mwah*