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.)
biodamped: (Default)

[personal profile] biodamped 2014-06-10 12:55 pm (UTC)(link)
This is probably one of the most trivial comments you'll get but - I'm using the tropospherical purple site skin, and the new link colour for the header links (post/reading page/inbox etc) and options links (is that even what they're called? The ones under settings: profile/style/setting etc for each community) are actually a lot harder for me to read. They were formerly a very dark grey; now they're a mid-purple. And actually, squinting at it, the top header links seem to be a lighter purple than the others.

This is a really common problem for me, but judging by the amount of sites that use a complementary (but low contrast) palette in their site layouts, I get the feeling I'm a minority.

The log out button is also significantly smaller - not an issue for me as I rarely log out, but maybe for some?

As far as the font size issue goes - my first response was "oh, big links", but they're not obnoxiously huge on my screen (1366 x 768) and not something I'd be bothered fiddling with browser settings to change.

And it's probably not overly helpful here, but just so you have it for your records, I'm on Win7 / Waterfox 28 (the 64-bit Firefox), and my dimensions are window width: 1366, window height: 613, screen width: 1366, screen height: 768, screen color depth: 24.

I'll test this out on my iThing tomorrow to see how it behaves in that. Thanks to the design team for all their work so far - I'm looking forward to seeing how this eventually turns out. You guys do excellent work!
minkhollow: (leap of faith)

[personal profile] minkhollow 2014-06-10 04:24 pm (UTC)(link)
Well, hey, that's two of us who don't like the new visited-link color. I think that's the kind of feedback they're after before a full rollout happens.

ETA: Just spent a little time logged into an account that's still set to Tropo Red; those visited links are also too light. I personally don't mind the default link color on either of these new site schemes, but the visited links? No dice.
Edited 2014-06-10 23:36 (UTC)
biodamped: (Default)

[personal profile] biodamped 2014-06-10 11:59 pm (UTC)(link)
I actually just switched to Tropo Red to see if I preferred that, but it's pretty nasty on my eyes unfortunately. (And yes, the links are still too light. For me, both visited and unvisited require squinting, even with my laptop screen set to highest brightness - something I rarely do due to it triggering migraine.)

ETA of my own: Thought I better reply with my actual journal and not an RP one, so as not to confuse the issue ;)
minkhollow: Robert Redford pointing, from Sneakers (sometimes i don't understand myself)

[personal profile] minkhollow 2014-06-11 12:11 am (UTC)(link)
I vastly prefer Tropo Purple myself, and have permission from my co-mods on that account to change the skin... but then I never do. XD

(As for the RP journal, no worries! It happens to all of us sometimes.)
blue_ant: (Default)

[personal profile] blue_ant 2014-06-10 04:58 pm (UTC)(link)
I also don't like the new visited-link color. You're definitely not alone.
tree: a figure clothed in or emerging from bark (Default)

[personal profile] tree 2014-06-10 07:55 pm (UTC)(link)
i also use tropo purple and find the new link colours hard to read.
prototypical: (writing)

[personal profile] prototypical 2014-06-10 09:06 pm (UTC)(link)
Agreeing. The link colors in general are too light for a white background -- darker purple overall would be easier to read.
biodamped: (Default)

[personal profile] biodamped 2014-06-11 12:03 am (UTC)(link)
Additional info regarding link colours: I cleared my history and cookies so I could test the colour of unvisited links and while it's better, it's still not dark/contrasted enough that I can easily read it. Even with my screen set to maximum brightness (something I rarely do because it enhances the likelihood of migraine), I have to squint at it.
ninetydegrees: Drawing: a girl's face, with a yellow and green stripe over one eye (Default)

[personal profile] ninetydegrees 2014-06-11 04:53 pm (UTC)(link)
Not saying the current situation is ideal (I actually use my own site skin b/c of light and contrast issues) but the problem with the very dark gray is that it's close to the text color so some might know they're links, some might not understand they are. And the problem w/ purple in general is that it's very hard to find a different shade which is distinguishable enough. I love this color but it's not easy to use in this particular area of design. /2 cents