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.)
ruriair: (Қɧ : boogie panda)

[personal profile] ruriair 2014-06-10 08:11 pm (UTC)(link)
Galaxy S3, OS ver. 4.3, Chrome browser ver. 35.0.1916.141
Browser window width: 980
browser window height: 1544
screen width: 360
screen height: 640
site skin: THE RED ONE BTW TOTALLY FORGOT TO MENTION.

The "switch" button is pretty hard to distinguish from the box it's sitting in on the members page. (The box it's sitting in is kind of dark in the browser version too tbh.) "Find" button is also kind of hard to distinguish. Maybe add a border?

Members lists are long, skinny vertical columns that might do better if they had more width where "member" would sit next to the username, then "posting access" and "administrator" is underneath in a row together? Or more like how the invitations page is listed I guess. It's especially awful when I turn my phone sideways and they're these tiny things on the left-hand side.

I don't see a link to the queue anywhere on the mobile Manage Communities page, but it's in the browser version. Turning phone sideways on the Manage Communities page makes the box of everything sit to the left when it's all centered if the phone is upright. On the invitations page, things sit a little to the right when the phone is turned sideways.

Also this happened.

And JUST CHECKING because the hover menus hate me: Nothing appears when hovering over userheads in the browser version of the page (I do have that turned on.), and in the mobile version when I click my username, the box appears but the links are all in an unstyled unordered list of bullet points like what I get usually on the site here.
Edited 2014-06-10 20:13 (UTC)
ruriair: (Default)

[personal profile] ruriair 2014-07-14 05:10 pm (UTC)(link)
I'm sure I would've noticed this before so I think it's the recent update: I'm getting a horizontal scrollbar no matter how I hold my phone. Apparently something is pushing out to the right somehow but I can't see what.