You have an opportunity here to maintain flexibility while emphasizing the known priority of data elements and adding some scan-ability and visual interest.
The nice thing about card layouts (compared to tables) is that you can use the space to lead your users through the expected flow. Your whitespace is a blessing!
I might even add ...
I don't see an issue with the white space. Card-type interfaces are prone to having white space.
Maybe you can condense the details into the global components, like the header, and dedicate the body area for the notes only.
I believe 320 points wide is not an unreasonable width in 2019 because:
Desktop users can still resize their browser windows to small widths.
iPad apps in split view (including Safari) can be 320 points wide.
iPhone SE (which was sold new within the last year) has a 320 points wide screen.
I think this is missing the point.
The idea of being responsive means that the site/app adapts to clearly display its contents at any reasonable size.
Designing for each individual device vastly increases the development and testing effort required for no real benefit, is unsustainable and impractical given the sheer number of new devices being produced, ...
I can only speak from personal project experience for a multi million pound website re design.
We're designing with 320 mobile in mind as a worse case scenario for mobile screen sizes. It may be a bit small for 2019 but it's a resolution that will catch all and work.
This is one of the reasons some designers prefer to use the mobile first approach, as it forces you to fit everything you design in the tiny screen estate you do have. If you start with desktop, you may end up with something that cannot be scaled down. Your table for example is OK for desktop, but far too information heavy for mobile.
You could go back to ...
I think the best way to answer this would be from the Aesthetic-Usability Effect perspective
In the page design system that the textbox control is situated in, what would be the best alignment and positioning that it would keep/enhance the pages aesthetics.
You could also follow these guiding ...
Actually most modern wireframing tools offer this option (in different ways).
Using constraints & “magic numbers” to build responsive layouts in Figma
Figma is great for building with responsive constraints — you can stretch your layouts and see how they will respond to changes in screen size. (If you’re new to constraints in Figma, check out ...
Here is a guide for scaling responsive-text (considering body font-size is set at 16px).
Desktop font-size:1em (16px), line-height:1.375em
Phone font-size:1em (16px), line-height:1.25em
Desktop font-size:3em (48px), line-height:1.05em
Phone font-size:2em (32px), line-height:1.25em
Desktop font-size:2.25em (36px), line-...
How about changing the Cards layout!
Top card does not have a free-text area, so all info could easily fit in the horizontal space. This way you can utilize the available space for Task Notes card.
download bmml source – Wireframes created with Balsamiq Mockups
Is it a web app or a mobile app? Either way, on mobile phones in portrait orientation it is abnormal and inconsiderate to reserve so much screen real estate for a fixed menu. In landscape it might work, but generally and as James Coyle says, a side-navigation can typically be hidden from view with a toggle.
Tabs and Bottom Navigation work well in portrait ...
Consistency is of course important, but it isn’t the main factor in UX. Ultimately, whatever solution is the easiest for the user to understand, in the channel they are in, is best.
With this in mind, I’d never try to make a desktop convention “fit” on mobile solely in the name of “consistency”. Rather, I’d find the best convention for mobile and then ...
This is easy to target using your application/site analytics. If we consider the screen-resolution analytics in the image below, we can understand that if we keep the page-width between 1280px and 1920px, it will cater to all users and more than 50% visitors are using screens wider than 1440px. Considering this, we can ignore how the screen looks like on ...
Navigation is normally designed based on the information architecture of your application, so I think you'll find that there are plenty of examples used in desktop applications due to the more complex information hierarchy afforded by the different types of interactions possible (e.g. mouse, touch, keyboard) and the larger screen space to cater for the ...
This could be broken up into two pages. A category page for the book listings and a single page view for the book details with a back button at the top left.
You could maintain the category scrolling component as a carousel at the bottom/top of the details view for quick access to another book. This could be used to show related books or books customers ...
Speaking for myself, using a 27″ 4K monitor for Windows, a Mac laptop Retina display, as well as other external monitors at workplace, I usually set the OS scaling to approximate 1 HD resolution.
Sometimes I change the effective resolution by zoom (zoom out to fit more windows onto screen or zoom in for reading when leaned back), but in the last 10 years I ...
Trying to use a pixel width for a standard size has been a losing battle for years and no web developer or designer should have that as a goal. You do not know, and cannot reliably determine, the size of anyone's display size. So don't do that.
The best response I've ever read about this question is, start with the smallest possible display width--which is ...
Give the user the visible values. Show them the range, and show how much when the violate the range.
I'm not totally clear, but here's a shot.
You have a series of parameters. Right now you indicate a range, but without the values visible it's hard to know how close to the thresholds I am in exact terms. You may have one range from 100 – 500, and another ...
It of course depends. Personally I try to avoid full width controls on mobile. I like to leave a gutter that allows for a safe scrolling gesture space. It can be less appealing aesthetically but it keeps users feeling in control, e.g. less accidental input focus.
It also depends how much information you want from the user. Bigger inputs ask for bigger ...
I have faced the debate, this is my conclusion thus far.
Slide Out vs Modal
In an application, it is important to make the distinction between information that requires immediate attention/action and those that do not but need to be in context.
Helps keep a consistent design by size/height vs a modal that could
have various width and height ...
If you are ok with having your text truncate, there is something really dubious about the value of that text, particularly if that is a label. And the web was designed to scroll and expand vertically, and this should be leveraged to your advantage rather than obscuring or completely hiding vital information from your designs and applications.
There are some ...
Google Analytics now records a dimension called "Browser Size". It doesn't appear to be suggested by the UI anywhere, but it's available for use in e.g. custom reports, secondary dimensions, and custom segments.
A team at Mozilla has written guidance on extracting this data to plot a histogram of browser widths.