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_beta2015-01-18 08:58 pm

Responsive-design Create Entries page, joining/leaving communities, subscribing/granting access, etc

This code push included responsive redesigns of:

* the beta create entries page
* joining/leaving communities
* subscribing or granting access to people
* many of the site admin areas
* everything in the /tools directory
* and many more.

If you have problems with any of these pages, this is the place to report the problems!




There are several purposes behind our responsive site 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 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 whatsmy.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
ninetydegrees: Drawing: a girl's face, with a yellow and green stripe over one eye (Default)

[personal profile] ninetydegrees 2015-01-18 01:05 pm (UTC)(link)
I think the save/post button on Create and Edit Entry moved from the right to the left. I wish it was the other way around. I almost clicked on Delete by accident when editing an entry because I didn't expect it to be there.
ninetydegrees: Drawing: a girl's face, with a yellow and green stripe over one eye (Default)

[personal profile] ninetydegrees 2015-01-18 03:38 pm (UTC)(link)
Icons:
Misaligned in the icon browser if one is narrower, and you opted for large images and no meta text. Narrower icons are not downsized when you opted for small images meaning there is no space between this icon and the one below it (don't know if that can cause overlap in some cases).

White space/padding:
Why so much when displaying meta text or in pop-up boxes in general?
I also agree that there is too much padding/margin in general. It's particularly obvious in the Currents module.

Message box:
Very, very high by default. I don't mind it being large but wish it wasn't that long so I can at least see the options without having to scroll down (on laptop, 1600x900, 17px font).

Flat look/font sizes:
I like flat design is nice but this is a little too flat for me. I seem to remember the module titles being more distinguishable at least. And the title text is smaller than normal text which is odd.

Subject field:
Doesn't make sense to me that it forms one block with Poll and Settings. It made dismissed it at first.
Edited 2015-01-18 21:27 (UTC)
ninetydegrees: Drawing: a girl's face, with a yellow and green stripe over one eye (Default)

[personal profile] ninetydegrees 2015-01-18 09:02 pm (UTC)(link)
The community administration module cannot be moved or hidden (FF 35). I think this is an old issue but mentioning it again just in case.
ninetydegrees: Drawing: a girl's face, with a yellow and green stripe over one eye (Default)

[personal profile] ninetydegrees 2015-01-18 09:24 pm (UTC)(link)
Contrast:
There is very little contrast between existing tags and new tags and the background (it's white on almost white). I think there was better contrast before (borders were colored?). Here the borders are very hard to see, especially when dashed.
Same things for buttons in this module and other ones. To me they're the same color or almost the same color as the module background.

Different buttons:
Preview and spell check don't have borders; I find the different design odd.

Date/Calendar:
Date is cut off for me on the right and so is the calendar (I can barely see the last day on each row).
shyfoxling: Ravenclaw crest (Default)

[personal profile] shyfoxling 2015-01-22 11:56 pm (UTC)(link)
There is very little contrast between existing tags and new tags and the background (it's white on almost white). I think there was better contrast before (borders were colored?). Here the borders are very hard to see, especially when dashed.

I agree. I preferred the light shading of new tags. It made them much easier to distinguish.
fu: Close-up of Fu, bringing a scoop of water to her mouth (Default)

[personal profile] fu 2015-01-31 02:11 am (UTC)(link)
Hey, with the text size/padding adjustments from last round of tweaks, is the date / calendar any better for you now?

PS thanks for all your feedback <3
ninetydegrees: Drawing: a girl's face, with a yellow and green stripe over one eye (Default)

[personal profile] ninetydegrees 2015-01-31 12:57 pm (UTC)(link)
Date and calendar are perfect!

(Just noticed tags are now one long vertical list, going beyond the viewport as for icons, which makes browsing harder imo; don't know if it's on purpose so mentioning just in case.)

You're most welcome! <3
Edited ((I was making the scrollbar appear!)) 2015-01-31 13:00 (UTC)
arethinn: glowing green spiral (Default)

[personal profile] arethinn 2015-01-21 10:00 pm (UTC)(link)
I agree with this. Moving it to the other side was very confusing.
ninetydegrees: Drawing: a girl's face, with a yellow and green stripe over one eye (Default)

[personal profile] ninetydegrees 2015-01-23 06:43 pm (UTC)(link)
--Tags: I do like the new sorting (column vs rows which, to me, make it usable). However, there's a lot of space between the columns. Also the search bar takes the whole box width, unlike the one for icons. Why?

-- Browse icons: I agree that removing the scrollbar may not have been the best choice. It feels odd to have the box display beyond the bottom of the viewport and to have to scroll fovever to get to your last icons.

--Pop-ups: I agree that clicking on X to confirm our choices is counter-intuitive. I thought the pop-up was broken and my selection wouldn't be saved.

-- 'Post' line: I don't know if there's an extra border or padding or what but 'post' is slightly bigger than the drop downs it's aligned with. Also there's a double border between the two drop-downs. It makes the whole thing look a bit sloppy.

-- Are 'characters per tags: 40' and 'characters left: 38' more readable than '40 characters per tag' and '38 characters left'?

-- The line-height for some phrases is so high it's hard to connect the first line and the second one and realize it's part of the same thing ('crosspost this entry', 'use the time when entry is posted'). The leading between these phrases and the items below them is normal so it looks even stranger. Also wouldn't 'crosspost this' and 'use the current time' work as well?

-- Don't think pages need to be capitalized in Reading pages.

-- How about 'Crosspost to:' instead of 'Crosspost Accounts'? It has its own style and doesn't match the way other modules list their options. I think Settings would also fit better at the bottom.
ninetydegrees: Drawing: a girl's face, with a yellow and green stripe over one eye (Default)

[personal profile] ninetydegrees 2015-01-23 06:44 pm (UTC)(link)
Why two different settings icons?
ninetydegrees: Drawing: a girl's face, with a yellow and green stripe over one eye (Default)

[personal profile] ninetydegrees 2015-01-23 06:45 pm (UTC)(link)
And can we also 'save' on the right?
colorsnap: (Default)

[personal profile] colorsnap 2015-01-23 08:42 pm (UTC)(link)
Agreed.
jb_slasher: melissa mccarthy (Default)

[personal profile] jb_slasher 2015-01-27 05:36 am (UTC)(link)
This is probably the most disturbing change for me. I'm so used to the Post button being on the right, I always click Delete instead. I'm glad they are separated, though, so I don't accidentally try to delete my post when I want to save it but first I need to learn that Post is no longer on the right.