![[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 is not broken as such, but I enlarged the screen area with the menu button a little before touching it to hit it more easily, and then what opened looked just like empty gray with tiny arrows. I realized only when I zoomed out again that actually there was text just far to the left with a lot of space, but at first I thought the menu wasn't showing. Then to close the menu I had to hit the button again, when I expected it to close also if I touched elsewhere on the screen instead of the menu.
no subject
I'm having a difficult time figuring out what's happening here and unfortunately I don't have a similar device to test on. Would you be able to send me a screenshot by any chance? ([1]fu@dreamwidth.org works)
(no subject)
no subject
(For an example, I'm a dork who likes alliteration, and I'd set the "Custom Access Groups" text to "Tier:"... or at least I thought I had?)
no subject
It is not a dumb question! There's no such thing.
This only touched the community admin area, and while tonight's code push did make some changes to the S2 backend, if the problem was happening to you before last night it's definitely not code push related. My best suggestion would be to try making the change again, and if it doesn't stick, open a support request.
no subject
I can't be much more specific; I didn't have any problems with it before, I don't have any problems now, and I wouldn't have said anything if you hadn't said "positive feedback is good".
no subject
no subject
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!
no subject
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.
(no subject)
(no subject)
(no subject)
(no subject)
(no subject)
(no subject)
(no subject)
no subject
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
no subject
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.
(no subject)
(no subject)
(no subject)
(no subject)
(no subject)
(no subject)
(no subject)
(no subject)
(no subject)
(no subject)
(no subject)
no subject
However, if I change my default font size on my browser, the text size of ALL the text on that page changes, which means the Settings and Moderation Queue text is still larger than the rest of the text on the page. Right now, the difference in text size doesn't really bother me, since it's on an isolated page I rarely use, but if the entire site is headed toward responsive design, should we expect the font issue to affect all of the default design pages?
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)
no subject
I think you all know how I feel about rem, em, px, and percentages, so I'm going to completely ignore talking about that further in favor of some small tweaks.
The "Log Out" button definitely needs some horizontal padding. Likewise, the "Go" search button could probably use the same treatment. For a clean look, I'd suggest a minimal border-radius on both. It'll make the top white highlight on "Log Out" look nicer.
For the manage community page specifically: The Settings links do not show up on a single line. The last link, "Members", is displaying on the line below all by its lonesome. It should go join the others regardless of browser font.
The community titles are currently bold and #111. Can we remove the bold from these? It's the darkest thing on the page in that area and a slight overkill.
In Tropo Red, the page background is #F7F7F7. The community management table is #FFF. The alternating rows with #F7F7F7 feel a little light. That's odd considering I use a custom code for my profiles with #E7E7E7 on the default background of #F7F7F7. I've checked my monitor calibrations and those are fine, but against the white background of the container my eyes strain at the #F7F7F7 sections. It could be the viewing angle of my monitor. If the #F7F7F7 is looking alright everywhere else, a 1px solid #E7E7E7 top and bottom border of the alternating sections would make them pop a bit more.
And last for now, but minor: Is there any way we can lessen the vertical padding in the list of communities? The old design had the benefit of seeing more communities on the page at a glance rather than have to scroll and search. With alternating row colors, you probably don't need as much padding.
no subject
no subject
About the font size: I am using Tropo Purple and so I've been checking my font defaults. My browser is set to 'medium' so it doesn't appear that the text should be so large. Also, I noticed that it's only the text in the middle of the page that is so large. The menu at the top and bottom are in a smaller font.
Additionally, as the person above mentioned, the 'member' option should really be on the same line as the other community management options (if only because it's driving me nuts being on the next line *g*). I thought at first that it was on a separate line because of the larger font size, but playing with the zoom option didn't fix it, so it must be 'pinned' there for some reason.
Also agree that there might be too much unnecessary space between communities in the list.
no subject
(Windows 7, laptop; I think this one's unaffected by browser size, all things considered.)
no subject
(I hope you can make sense of what I'm try to explain).
Everything is in one small asrea in the middle of my screen. It's kinda cramped at the moment.
no subject
(no subject)
no subject
The page itself looks fine to me. I only manage one community, so I'm not sure what it looks like with more.
Navigation on the top right (account, search) is a bit messy. The drop-down box could use more horizontal padding, and the long "Site and Account" title covers the drop-down arrow. Aesthetically, the "go" button to the right of the drop-down box could also use some more padding; and while I could get used to (but do not prefer) a square "log out" button, it might look nicer if the button styles were consistent.
This is what it looks like to me: http://i.imgur.com/ZvxWEqn.png
On iPhone with Safari: The Menu drop-down doesn't close unless I tap Menu again, even if I navigate to a different page and then go back. I'd prefer the menu to close when I leave the page. Aesthetically speaking, the site navigation links at the bottom of the page (Privacy Policy, Terms of Service, etc.) have a broken background: the top half is the same grey gradient as on the full site, but the bottom half is solid (darker) grey.
Overall, I do like where the design is going.
no subject
Basically I don't see the point and it's slightly annoying already.
People have already been commenting some on the link colors, and I'm here to chime in. I have the 'as basic as it gets' just red and white default skin, and although it's possible to tell the difference between 'have clicked' and 'have not clicked' links, it seems a fair bit more subtle than it was before, which could make seeing it on smaller or darker screens harder.
no subject
Also, the table for editing member stuff feels weirdly-aligned, I think because it's stuck under the big grey 'work as $x' box which is full canvas-width while the member table isn't. Either making it full-width as well, or centering it would work I think :|a
no subject
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.
no subject
no subject
Laptop, Windows 7, Firefox 29.0.1; I can't get that site with the browser dimensions to load.
The settings list on the manage communities page is weird: at my default font size (16), Members is on a line by itself; as I zoom in and out, Invitations joins it and then goes back again!
Could the search field you type into be bigger vertically? Regardless of zoom setting, the dropdown "Interest" etc. is in a deeper box than the actual search box. In the original design, they're the same depth, as far as I can tell.
no subject
Oh, as for the what I'm using stuffages: Firefox 29.0 on Ubuntu 12.04 LTS laptop w/external monitor (because the original screen is busted), Browser window width: 1280, Browser window height: 894, Screen width: 1280, Screen height: 1024.
Can't help with other devices as I don't work on my phone, and my tablet is getting rooted (because somebody decided it would be a nifty idea to ship a tablet without an app store or any way to actually add one shy of rooting. No, I don't understand either.)
no subject
Using Chrome on Android 4.4.2, Samsung Galaxy S4. Display info: 980, 1544, 360, 640.
Screenshots: https://imgur.com/a/uNWXK
Under Profile:
Identity and Contact Information forms are tiiiiiny and unusable. Other sections and fields (Mini Bio and Interests) scale better for small screens. the Save Changes button is too small.
Style:
All text is unreadable.
Account Settings:
Text unreadable, fields too small.
Invitations, Members, Queue: All look nice!
The sub menu (last screenshot shows it "open" with a click) breaks with other page elements (the "Switch" button should not interfere with the menu).
I agree with other commenters that the colors are unpleasant and not consistent with DW themes. I use the standard purple site theme for non-journal pages.
no subject
(no subject)
no subject
Community admin area: visual details:
(1) I've set my favourites bar to display in my browser so I like the space between my fav bar and the logout button. But, I'm hoping the logout button and the text "logout" in the final version will be a bit bigger than it is now.
(2) The navigation links in the celerity sidebar are no longer underlined. I'm hoping that that's just a glitch which will be fixed in the final version.
(3) The navigation text in the celerity sidebar are wrapping weirdly or something. I've taken screenshots and I'll try to upload them as soon as I can but just in case I can't, I'll try to describe the problem.
If I go to other pages and look at the sidebar, the indented text like "post entry", "edit entries", etc they're all in one neat line/indentation/whatever. But the "Upload Icons (14 out of 15)" is pretty long so this is wrapping weirdly. Ordinarily, this part: "15)" falls directly in line with the word "upload".
In the comm admin area, this part: "of 15)" is not falling directly in line with the word "upload". It's the same for other links like "manage communities", "test beta features", "buy dreamwidth services", etc.
Commnunity admin area: functional:
It's perfect. Well, two communities is really manageable and all so to me the table looks really neat and clear and concise. I love it.
New Community tab in account settings:
Love this too. The options/language is intuitive. Previously I'd always double-check my community settings. I don't feel the need to anymore.
Invite new members page:
(1) I like the way the account name fields highlight when I click on them.
(2) The switch button needs a little more distinction. Right now the black text colour is the only thing that distinguishes it so maybe it'd be a good idea to darken the background colour a little bit.
I can't really test the members and queue pages, except to say it continues to look neat. Hope this helps.
no subject
I'm not a community admin, so I can just comment on the site skinning - I find that page harder to look at than any of the "old" style. Looking at it, I think it's the paler fonts/reduced contrast. The "Manage Communities" makes my eyes hurt looking at it for any length of time, as do the links in the upper right - and the reduced contrast is the only thing I can think of. The bigger text should help - but doesn't. I really prefer the existing darker text on, say, the "Manage Account" page.
The lack of other content on the page to distract me, and the increased white-space caused by not having other content, probably contributes to that impression, of course.
One thing that isn't changed that I wish was - the links in the upper right are snuggled so close together that I wonder if they need to get a room (and close the door)! There's a ton of space on this screen, but there's nothing done to take advantage of that. Admittedly on a mobile that might not be ideal, but those are some very snuggly links.
I almost never use the log out button, so I'm not sure why it bothers me that it got smaller. It _looks_ like it would be pretty easy to hit by mistake on a touch screen, but I don't know if that's true. I'm tempted to suggest isolating it, but I don't know if that's just because I'm weirded out by the slight differences.
no subject
For me, everything is a bit too large (text especially), which seems kind of strange considering my screen size. When I zoom out to 90%, it looks much better.
My other aesthetic complaint is the overall width (which also applies to the old style). It's fine when using smaller resolutions (netbook that's 1280x720, or a 1366x768 monitor), but on my 1080p laptop everything is too narrow and all of the whitespace gives me a pretty bad headache. It hurts the worst with the new style on tropospherical red; purple hurts less, but I can't put my finger on why. Maybe it's the differing contrast or that tropospheical purple is a bit lighter. Probably the only person with that issue but I figured I'd toss it out there anyway.
Aesthetics/Function
Preview button does not show the post as it will appear on the site, it ignores the command.
Linux Mint; Firefox