New responsive-design site skins and community admin pages

[denise]

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 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 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.)

Comments

[biodamped]

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]

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.)