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)
flick: (Default)

[personal profile] flick 2015-01-18 04:57 pm (UTC)(link)
The new beta update page is *huge*. Could we get an option to reduce the font size, and maybe also to reduce the amount of screen space taken up by the text entry window and the settings?

On the previous version, all the useful bits of the update page fitted into one screen height for me, now the text entry window is a full screen height and the options below are another one. I can /maybe/ see the point of allowing a full screen width for tags, but does anyone really have icon names so long that they need a full-width drop-down to choose between them?

(I appreciate that you've probably done that to make it easier for people using small screens, but could it be an option, maybe? A bit of experimenting shows that the cut-off for "Side column only available in wider windows" is over 1000px wide, which is pretty huge imo. Even if I increase the window size to get that, it still looks huge and full of white space!)
biichan: (Default)

[personal profile] biichan 2015-01-18 07:29 pm (UTC)(link)
When I try to use the new create page, it doesn't actually make the journal. It just takes me to a page that isn't there.
biichan: (Default)

[personal profile] biichan 2015-01-18 07:45 pm (UTC)(link)
https://perlbal/create

That's the url for the page that isn't there.
random_xtras: The words Tam I am on a purple background (OOC)

[personal profile] random_xtras 2015-01-18 08:42 pm (UTC)(link)
I'm sorry. This is nearly unusable-the create entry page. All the modules for icon and such are a whole page across, and they won't stay where they're moved. Very awkward and unpleasant!
flick: (Default)

[personal profile] flick 2015-01-18 08:59 pm (UTC)(link)
I've changed it by shrinking that page, but I'm afraid that I still think there's way too much white space. Your site, though! ;)
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).
cesy: "Cesy" - An old-fashioned quill and ink (Default)

[personal profile] cesy 2015-01-18 09:37 pm (UTC)(link)
So, I've reduced my browser font size to something sensible, but the create entries page is still not fitting on my large screen. I think the problem is actually the wide variety of font sizes within the page. If there was less variation, I could just set the default lower or higher and it would work. But there are several bits that appear to be a certain percentage smaller or larger than the default, so if I lower it, they become unreadable or stay too large. And, of course, entries in site scheme haven't switched over, so are unreadably small if I put the size too low for the create page.

For example, in the Icon section, "Browse" and "Random" are several sizes smaller than the keywords drop-down.

The tags bit that says "Characters per tag: 40" has the 40 significantly bigger than the other text.

All the modules seem to have a lot of padding - 1.25rem (how does a rem differ from an em anyway) on fieldset seems to be the issue.

Here's a photo to illustrate: https://www.flickr.com/photos/jennyst/16126096249/

Latest Chrome, Windows 7, 1920x1080 resolution, maximised browser window, 14pt default font size, 8pt minimum font size, Tropo Purple, laptop with external monitor.
Edited (more system details) 2015-01-18 21:38 (UTC)
cesy: "Cesy" - An old-fashioned quill and ink (Default)

[personal profile] cesy 2015-01-18 09:40 pm (UTC)(link)
In the meantime, if you use Stylish, you can reduce the whitespace significantly by altering fieldset margin to about 0.5em on that page (instead of the current 1.25). Let me know if anyone needs help setting that up.
effingunicorns: four hellebore flowers in a dusty dark blue, two shades of pink, and white (Default)

[personal profile] effingunicorns 2015-01-18 09:40 pm (UTC)(link)
The new entry page is super squished for me on Gradation Vertical since the code push. I'm viewing it in Firefox 35.0, Chrome 39.0.2171.99, and Opera 26.0.1656.60 on Mac OS X Mountain Lion (10.8.5) and having the same behavior in all three browsers, and in Safari, where everything is wider as I presume it should be.

I've tried disabling the extensions I have in common between the three browsers having problems (AdBlock Plus and Greasemonkey/its equivalents) and all extensions period in Chrome and Opera, but doing so hasn't had any effect. The only other difference between Safari and the other browsers is that I can't figure out how to change the font size in Safari, and when I change the font size in my other browsers it expands to look the same as in Safari.
random_ooc: The words Tam I am on a purple background (Default)

[personal profile] random_ooc 2015-01-18 10:13 pm (UTC)(link)
Trophospherical purple.

The very newest Firefox. It updated this morning.

Windows 8, the glitch.

It's a desktop computer with a small widescreen monitor.

...And Firefox swears it can't find the server at that site. *headdesk*

I've got some Autistic symptoms, which is no excuse for being so dumb, but an explanation as to why I'm not being sharper. I've stressed and am hiding.

Ahah! Browser window width: 981
Browser window height: 629
Screen width: 1366
Screen height: 768
Screen color depth: 24
Edited 2015-01-19 04:36 (UTC)
turlough: Frank Iero asking a question, art by theopteryx ((mcr art) excuse me?)

[personal profile] turlough 2015-01-18 10:17 pm (UTC)(link)
Yes, please?
turlough: branches with red leaves against a blue autumn sky (Default)

[personal profile] turlough 2015-01-18 10:28 pm (UTC)(link)
1) Why are the tags in the tag browser now ordered in columns instead of lines like they were before? It's extremely irritating having to scroll up and down all the time.

2) The modules doesn't stay put when I re-arrange them. Every time I open the page again they've reverted to what I presume are the default.

3) Why isn't it possible to put all the modules on top and the entry text at the bottom?

4) Why have the security and destination module become part of the entry text instead of being a module of their own? (They at least be at the TOP of the entry text, not at the bottom. It took me ages to even find them at first.) And has the ability to post as another account disappeared completely? It used to be part of the security/destination "module" but now I can't find it anywhere.

I'm using Firefox 35.0 on MacOSX 10.6.8. My site skin is Tropospherical Red. I'm using a desktop with a screen display resolution of 1680x1050 and my current browser window width is 1350 and window height 880.
Edited (forgot a couple of stats) 2015-01-18 22:35 (UTC)
stormy: βͺ ππŽπ“πˆπ‚π„ ❫ 𝑫𝑢 𝑡𝑢𝑻 𝑻𝑨𝑲𝑬 𝑴𝒀 𝑰π‘ͺ𝑢𝑡𝑺 ⊘ (Default)

Create Entries + Associated Pages

[personal profile] stormy 2015-01-18 10:42 pm (UTC)(link)
SITE SKIN: Tropo Red
BROWSER: Chrome Version 39.0.2171.99 m
OS: Windows 7
DEVICE: Desktop
RESOLUTION: 1680 x 1050 and BROWSER: 1680 x 892

β€Ί The padding on elements in this page is excessive and just seems to take away usable screen space. I would consider that browsers really only need 5-10px of padding. Take a look at a standard submit button, for example. If you can clearly see the text on a browser's standard form field button, then that's a pretty good rule of thumb on the padding that'd be good for your forms.

β€Ί I know Dreamwidth wants users to take control of their web font size so they can use reactive measurements, but is there a reason why the new CREATE ENTRIES page is overall larger than the Tropo design and the old create entries beta page? It feels like you're actually increasing browser size at this point to make it larger. I'm not just talking about fonts, but the entire page margin is larger than Tropo Red. Likewise, the confirmation page for a posted entry is also larger than the current site scheme.

β€Ί Entry Link Module β€Ί The entry link module no longer displays the link preview if you enter text. Is that intended?
β€Ί Post Button β€Ί Odd request, but can we get that moved back to the right hand side? I realize that on comment forms and such the SUBMIT, PREVIEW, OPTIONS is on the left, but it was established that POST was on the right and DELETE was on the left when posting a new entry. I could definitely make some accidental posting mistakes by clicking this on the 'wrong' side.
β€Ί Form Fields β€Ί When you click into a textarea, you get the textarea shadow that I recommended once, however you lose the white background. There isn't enough contrast between the elements when you do that. I recommend including the white background when the element is active.
β€Ί Browse Icons β€Ί When the page is shorter than the icons, it stretches beyond the footer of the page and is quite long to navigate. It's not a pressing matter, but it looks sloppy. I can see the benefit of having the Browse Icons window not scroll, but remember that you can have up to 500 icons and even on the smallest icon setting - that's quite a scroll!
β€Ί Browse Icons β€Ί Meta Text β€Ί The boxes around the red meta text links can get broken up into separate lines. They don't serve any purpose other than to make things even harder to read, especially with the large font sizes.
β€Ί Tags β€Ί Tags are now read top to bottom then left to right instead of left to right then top to bottom. Before they were ordered in rows rather than columns. Many users specifically label tags to make their most used tags show up at the top of the row order. If you're going to have tags ordered by rows, the overall tag box feels too long.
β€Ί Tags β€Ί When you entered tags into an entry there used to be more visual contrast between tags and their background, as well as a different color for brand new tags. It's all completely gone. Intended?
β€Ί Browse Tags β€Ί Tags that are long now show on multiple lines because the text is larger. Even if I override the text or change the font sizes on the page, the tags that can't fit on one line don't align with their check boxes. This serves as a definite usability problem because I don't know if the random lone check box above or below the text is the correct one.
β€Ί Browse Tags β€Ί No Confirmation for once you've selected tags? We just select and then exit out of the page with an X. This goes against intuition where you assume if you X out of something - you aren't saving it.
β€Ί The Good! β€Ί I do like the transition when you click on the entry page module settings.
Edited (Added one part I forgot.) 2015-01-18 22:45 (UTC)
musyc: Silver flute resting diagonally across sheet music (Default)

[personal profile] musyc 2015-01-18 11:20 pm (UTC)(link)
From [personal profile] stormy's comment: Browse Tags β€Ί Tags that are long now show on multiple lines because the text is larger.

Confirming, with screenshot. http://i.imgur.com/c8SjjxR.jpg Doesn't matter how big or little my font is, the checkboxes do not align. In a couple of cases, the checkbox for a tag at the top of a row is actually located at the bottom in the previous row.
musyc: Silver flute resting diagonally across sheet music (Default)

Re: Create Entries + Associated Pages

[personal profile] musyc 2015-01-18 11:39 pm (UTC)(link)
The top to bottom tags rather than left to right was something that a lot of people, me included, asked for some time ago. I was surprised to see it finally implemented!

Everything else you noted, though, agreed.
sraun: portrait (Default)

[personal profile] sraun 2015-01-19 03:38 am (UTC)(link)
I found the same issue. The previous create entries page was about 2.5-3 screens high, I could get the subject & a good chunk of the entry text in one screen, then I could carefully scroll down and get all the entry info selections on a second screen. PageDown did not work, it went a little too far and cut off tags.

Now subject + text is about 1.5 screens, all the rest of the stuff is another 3 screens.

Browser window width: 987
Browser window height: 432
Screen width: 1024
Screen height: 600

Skin: Tropospherical Purple

Firefox 34.0.5 on Windows 7 Starter w/ Service Pack 1 on an ASUS Netbook EEE PC 1001p.

ETA: I just upgraded to Firefox 35.0, and it did not change the appearance.
Edited 2015-01-19 04:02 (UTC)
highlander_ii: Danno Williams holding a cane across his chest as he sits in a chair ([Danno] w/ a cane)

[personal profile] highlander_ii 2015-01-19 04:32 am (UTC)(link)
Yes - I have this issue as well.
musyc: Silver flute resting diagonally across sheet music (Default)

[personal profile] musyc 2015-01-19 04:33 am (UTC)(link)
Couple more screenshots, font-size related:
Browser font-size at 16, minimum font-size at 12 - http://i.imgur.com/KOJlcuq.jpg - Biiiig, but aligned.
Browser font-size at 14, minimum font-size at 12 - http://i.imgur.com/PjYUPDz.jpg - Icon is overlapping, drop-down menu background is larger than search box background.

(Copying in my comments from the news post so they're in the beta post)

Technical details: Firefox 34.0.5 (at this particular moment, to HELL with their update schedule, god. Ahem.). Windows Vista home premium, SP2. 1280x800.

Create entries beta page: Whoa, whitespace. WHIIIIIIIITESPACE. Way too much. I changed my browser font default to fourteen and it made the headings on the modules a whole lot better, but now I can't read the comments in this page, way too small. ETA: Okay, changing my 'minimum font size' to twelve fixed that tiny text issue for me. It's the site scheme .XXem code that's doing that, right? On the other hand, having my browser font default to fourteen screwed my reading pages, so I put it back to sixteen and the huge headers issue in the modules is apparently unavoidable. :\

The pure size of the modules is massive. The icon selection module is almost (exactly?) half the size of the entry text box, with a ton of wasted space either side of the icon.

I do like the hover-color on the buttons in modules, though the border around the buttons could stand to be a bit darker (or bolder? Or the buttons could be a different unhovered color entirely. Something. Making them fit into the 'flat' aesthetic that's currently fashionable makes them disappear into the background.) The switching of placement for the post button ... ehhhhh. Now there's two 'post entry' buttons that are less than a hundred pixels apart and it seems even more silly to have two than before.

Minor quibble - The public/private/etc drop-down menu goes down, no matter how close it is to the bottom of the screen. The 'post as' drop-down menu goes down if it's near the top of the screen, but if it's near the bottom, it goes up. I don't know what that's a result of, but it's weird. Either all down or all up, but a mixture looks strange.

Also, the preview/spellcheck buttons would look better if left-aligned with the rest of the column.

I also do like that the user menu in the very top bar is spaced out a little better than it is on non-responsive pages, especially the couple of extra pixels between my user name and the log-out button.
Edited (Copying in my comments from the news post so they're in the beta post) 2015-01-20 00:28 (UTC)
inoru_no_hoshi: The most ridiculous chandelier ever: shaped like a penis. Text: Sparklepeen. (Default)

[personal profile] inoru_no_hoshi 2015-01-19 06:31 am (UTC)(link)
Using Tropo Purple in IE9 (9.0.8112.16421 to be super specific and assuming I pulled the right number from the About window) on desktop running Win Vista with SP2. Screen width x height: 1360x768. Browser: 909x647.

--It's really big. I have to either change the font size to what'd be nearly unreadable on any other page (but makes the page about match font size with, e.g., this page), or make my browser window big enough to make me twitchy (I hate having it too big). I understand that neither needs to be a permanent change, per se, but remembering to do it each time I open the page will be the kicker.
--The amount of whitespace makes me feel like there's a ton of unused space for essentially no reason, so it makes me D: at it. Very much a gut reaction. >_>
--Not enough contrast between a new and old tag in the tag entry field. Also you have to click really precisely on the box if you've used the browse feature to add tags and then need to add a whole new one.
--I don't like the long column of tags in the browse feature, but that may just because it looks very... "meh" is the word that comes to mind. Especially when you have enough tags that popping up the tag box makes it essentially 2-3x the size of the main page.
--Also, I agree with [personal profile] stormy that the giant X versus a "Confirm" button in the tags box is very much at odds with experience from +/-14 years of internetting - it makes me feel like I'm losing my choices.
--I dislike that "preview" and "spellcheck" are A) so small and B) nearly visually indistinguishable from, e.g., all the module boxes. They needn't be the same bright shade as "Post", but something that makes them catch the eye would be good.
--The drop-down menus for security level and where you're posting to are wider than the on-page box. "Post to" in specific pops up kind of strangely.
--There's like three different font sizes used for modules with dropdowns and it kind of non-specifically bothers me? In that "I'll get used to it but :X" way?
--I'm usually one for greytone text because it's easier on the eyes, but I think that's actually a drawback in the modules, at least with the shades chosen? It looks vaguely blurry to me in a lot of places.

I think that's all I found re: the create entries page that bothered me on a first pass. But, huge thanks for fixing the thing (whatever it was) on the last beta entries page that meant moving the mouse cursor over the entry text box made the text scroll itself up if there was a scrollbar! :D

I'm aware that I'm running an out of date browser on an out of date machine, can't fix things Just For Me, etc., but more info and feedback can't really hurt!
cesy: "Cesy" - An old-fashioned quill and ink (Default)

[personal profile] cesy 2015-01-19 08:21 am (UTC)(link)
Aha! Gmail uses 80% of the default browser size. So if I put it to something accurate for Dreamwidth, Gmail becomes unreadably small as well. Which is wrong of Google, but I suspect Dreamwidth may lose that battle.

Page 1 of 10

<< [1] [2] [3] [4] [5] [6] [7] [8] [9] [10]
>>