![[staff profile]](https://www.dreamwidth.org/img/silk/identity/user_staff.png){kind=small}
![[site community profile]](https://www.dreamwidth.org/img/comm_staff.png){kind=small}
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
* 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
Create Entries + Associated Pages
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.
Re: Create Entries + Associated Pages
Everything else you noted, though, agreed.
Re: Create Entries + Associated Pages
Re: Create Entries + Associated Pages
Re: Create Entries + Associated Pages
Yes; but the textbox automatically updates with what the slug should look like once you're done editing (e.g., "a b c" gets turned into "a-b-c")
Do you mind if I ask you more about this? You mean the difference is that the modal window was a fixed height before and you'd only scroll the area inside instead of the whole page?
Thanks for pointing that out; this should work much better now.
Agreed; I'll fix this.
Thanks! That was fun to do ;)
Re: Create Entries + Associated Pages
Internet is down here and the dream width mobile page is terrible so this initial reply is going too be messy. On browse icons- yeah you got the idea. The pop up window scrolled, but the page behind it was fixed in place. Now the entire page scrolls. I'll try to grab a screen when the internet is back. If you imagine the pop up icons page and scroll down - behind that dw is also scrolling. You scroll passed the site layout and footer. So then i have both foreground and background scrolling. It's a mess.
Also we are not kidding that the site is unusable on android. I just realized i can't even post this comment on the web page. The submit button is gone. Let's try from email instead.
π
Re: Create Entries + Associated Pages
Thank you that's very helpful!
And sorry about the comment pages -- on the list but uuungh. We'll do what we can!