![[staff profile]](https://www.dreamwidth.org/img/silk/identity/user_staff.png){kind=small}
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]](https://www.dreamwidth.org/img/comm_staff.png)
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 adw_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.)
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.)
no subject
The menu links in the top header (post, reading page, inbox, etc) have very different colors. a is a much lighter purple than expected, a:hover and a:active are a deep ... plum? There appears to be no a:visited differentiation.
The logout button at the top has lost its decorative elements. No gradient/shiny. It's a couple of pixels further right - which I actually like. I've felt for a long time that it's too close to the user name.
The tiny arrows in the drop-down menus are rather nice! Makes it more obvious there's stuff underneath them.
One thing that bothers me: When the font is zoomed or the screen-area is reduced, the colored bar with the interaction options drops the search box and go button down a line, aligned right. Buuuuuuuuut the color doesn't extend to the left of the screen with it. I have no suggestions and it's something I could learn to ignore eventually, but it tweaks my mental full-alignment!1! preferences.
(And I don't know if it's always been there and I've just never seen it before or if it's a new thing, but the "remove purged members" button on the community membership list? Awesome. That makes semi-irregular list cleanups so much easier. I'd personally like it to take care of deleted members too (I'm picky about struck-out names in my member lists), but purged is totally cool.)
no subject
ETA: also forgot to say: the "remove purged members" button has been there for a while, but it was much harder to see before. Glad the changes have had the desired effect ;)
no subject