67
votes
Mobile friendly way for explanation why button is disabled
Add the same text as a small label near the disabled button.
This won't rely on any on any additional user action in order to show this additional information, which is good, because users tend only ...
- 19.4k
49
votes
What is the smallest screen size you design for
What is the smallest screen size you design for
320px
But, as others have answered it, for best results you actually need to measure your audience and consider how much resources you want to pour ...
- 591
16
votes
How to deal with an excess of white-space in a CRM UI?
Visualize hierarchy
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 ...
- 21.2k
16
votes
Mobile friendly way for explanation why button is disabled
Do not disable buttons.
Disabled buttons predate modern touch screen usage and don't work in this environment.
Solution 1
For the 'I agree' or 'I have read' required checkboxes, when there is only one:...
- 2,078
15
votes
Is 320px wide designs still relevant? (responsive web)
I believe 320 points wide is not an unreasonable width in 2019 because:
iPad apps in split view (including Safari) can be 320 points wide.
iPhone SE^ (which was sold new within the last year) has a ...
- 594
14
votes
Revisiting user-scalable=no
Stop using "user-scalable=no". Period. In the last 6 years, I cannot count the times that I've had to put away the iPhone and go to a desktop computer to examine something on a website because it ...
- 141
14
votes
Accepted
Why is the Google Search Results page not responsive?
Responsive design is best practice, except for the most high-end websites
Responsive, mobile-first design gets you the most “bang for the buck” for most web sites or applications. Effectively you can ...
- 3,921
11
votes
Accepted
Why Browsers load Websites gradually?
Technically this is caused by the fact that images and other assets are generally hosted separately, and the browser only knows to go fetch them when the document uses them.
It would be technically ...
- 15.5k
11
votes
Accepted
How to avoid the use of scroll bars in dashboard UI?
There's a couple of things going on here:
The scroll bars are too close to each other on the right hand side - there needs to be some separation between them so that the ones associated with tables ...
- 70.9k
11
votes
How to deal with an excess of white-space in a CRM UI?
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 ...
- 5,568
10
votes
Why do very few e-commerce websites use full-width and fluid layouts?
Check your assumptions
There are a few assumptions in your question that require validation (and I assure you that the ecomm giants are testing).
Most people have big monitors now: Maybe. But what ...
- 21.2k
9
votes
Revisiting user-scalable=no
Do not prevent the user from zooming using user-scalable=no or maximum-width=1, minimum-width=1, unless your entire page is an interactive app with its own zoom mechanic overriding default pinch-zoom ...
- 2,676
9
votes
Accepted
How to present a wide chart on mobile devices?
Your best bet in this case is to make the left column fixed and allow scroll on the remaining columns. You can see an example (and script to do it) at DataTables Fixed Columns.
On top of this, since ...
- 36.5k
9
votes
Font-sizes smaller on mobile, yes or no?
Sounds like your coworker is using Material Design guidelines; they recommend not going smaller than 12sp (scalable pixels) for mobile. Whether this is a good practise to follow depends on two factors:...
- 9,841
8
votes
Should iOS native app be distinctly different than the responsive website's mobile version?
The Android could throw the Apple out the Windows
When you provide an Apple-like look and feel on a website, would people visiting the site who use Android phones, Samsung tablets, Windows phones, ...
- 6,386
8
votes
Accepted
Should a UX Designer design in Pixels, Ems, or another unit of measurement?
I hope this answer this question, but this is my personal process: I use the font sizes in my PSD mockups for reference purposes only, almost as a 'relative' size. Then after Design is approved, along ...
- 176
8
votes
Why is responsive web development primarily portrait based?
There simply aren't that many people using their mobile in landscape (or narrow their browser screen). Also, once you're logged in, you don't see that screen anymore, so I guess they focus their ...
- 3,309
7
votes
Responsive design - Most common resolution steps
Rather than thinking about screen widths, think about the content. New devices are released all the time so the best strategy is one that's based on your content rather than targeting specific devices....
- 1,860
6
votes
Accepted
Optimal way to display long radio buttons on mobile
Line wrapping and correct indent / whitespacing
download bmml source – Wireframes created with Balsamiq Mockups
Spacing between options in above example should be a tad tighter, but you should ...
- 8,551
6
votes
Why should I use em, and not % for fonts?
EM and PERCENT are both very similar, the only difference between the two can be observed when changing text size on the client browser.
Summary
In theory, the em and rem units are the new and ...
- 1,813
6
votes
Accepted
Responsive design approach
I would not recommend this approach. The whole point of responsive design is to avoid having to create multiple versions of the same page. There are many reasons why refreshing the page on a ...
- 15.3k
5
votes
How should large table columns be handled on a responsive design?
Responsive/Adaptive Table
I recently created this pure CSS/Bootstrap solution for mobile users. Works best with 4-5 column tables mainly. 3 columns seems to be the max you can show on a mobile device ...
- 1,485
5
votes
What is the smallest screen size you design for
On this website it gives some info about screen resolutions
http://www.websitedimensions.com/
According to that stats the smallest mobile resolution is 320px - however as mentioned in the third ...
- 151
5
votes
Optimal way to display long radio buttons on mobile
This is an interesting question.
Dropdowns: Nope
I would hazard against using a dropdown. In general, they're frowned upon for mobile UX because they require a "tap" to view the options, and another ...
- 2,012
5
votes
Accepted
Tabs design pattern, solving for "N" tabs
Nice question - I am looking for other answers than mine as well!
@ Version 1:
Android introduced this as a more "standard" element for mobile apps (swiping screens that mimic "tabs"), when iOS ...
- 1,681
5
votes
Accepted
Handle responsive images
Let the user see their whole image
As this is out of your control due to users uploading images, you will find people will be more frustrated with having their image cropped off than having some ...
- 2,527
5
votes
Pagination Vs. Infinite Scroll in Datagrids
TL;DR
Good user interface should support user tasks to provide the best UX. Think of UX first, and use an approptiate UI pattern to implement it.
General Tasks
I assume there are some common tasks ...
- 22.6k
5
votes
How to display two sidebars on mobile?
Two usable options come to mind.
1. Accordion menus
2. Sliding panels
- 21.2k
5
votes
Full-screen "loading" overlay in desktop browsers
"Loading" screens, progress bars, spinners, or the like are necessary for operations which take enough time that the user needs reassurance that the program hasn't crashed or become ...
- 4,592
Only top scored, non community-wiki answers of a minimum length are eligible