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 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
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!)
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! ;)
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.
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?
cesy: "Cesy" - An old-fashioned quill and ink (Default)

[personal profile] cesy 2015-01-19 09:51 am (UTC)(link)
Okay, make sure you have the extension Stylish installed in your browser.

Then go to and there should be a link to Install with Stylish - let me know if that doesn't work.
turlough: Party Poison making heart-heands, art by askpoison ((mcr art) *heart*)

[personal profile] turlough 2015-01-19 06:57 pm (UTC)(link)
It works perfectly. Thank you!! I usually manage to figure out how to tweak CSS the way I want to in the end, but the Create Entry page is a nightmare!
tree: a figure clothed in or emerging from bark (Default)

[personal profile] tree 2015-01-20 10:15 am (UTC)(link)
oddness. i've installed this but the only thing it does for me is partially hide the default text in the dropdown menus.
cesy: "Cesy" - An old-fashioned quill and ink (Default)

[personal profile] cesy 2015-01-20 11:23 am (UTC)(link)
Which site scheme? Can you share a screenshot, please?
tree: a figure clothed in or emerging from bark (Default)

[personal profile] tree 2015-01-20 06:23 pm (UTC)(link)
i'm using tropo purple. screenshots: without the script and with the script.
cesy: "Cesy" - An old-fashioned quill and ink (Default)

[personal profile] cesy 2015-01-21 08:53 am (UTC)(link)
Try again now - I was trying to shrink the blank space in those boxes, and got the wrong bit.
musyc: Metallicar, the Impala from Supernatural (Supernatural: Metallicar)

[personal profile] musyc 2015-01-21 07:45 pm (UTC)(link)
Looks good to me! Thanks for the script.
musyc: Silver flute resting diagonally across sheet music (Default)

[personal profile] musyc 2015-01-20 08:08 pm (UTC)(link)
I didn't take screenshots, but I tried that userstyle and got the same as [personal profile] tree. The excessive padding was sucked away just fine, but the dropdown menu text got cut off in their boxes.