67

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 to scroll and tap when using touch screen devices. This pattern is also not a bad thing to do on desktop also. Personally, I don't usually expect a disabled ...


45

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 into making your site/app work for that <0.1% of users below your determined screen-width threshold. That said however, unless you are running an obscure site/...


30

First of all, since it's your site, don't guess; know! It's very simple. If you haven't already, add Google Analytics to your site (it's FREE). From there, you can actually see what Mobile Device, Browser, OS, Screen Resolution, etc. that your visitors use. Lastly, after you have what you consider enough data, make your decision on what resolutions you ...


17

Responsive Design is a design philosophy where in the design of the system (the representation and the layout) responds/adapts depending upon the layout of the device. The primary reason to keep your design responsive is to increase the reach of your application to a larger user base using an array of devices. Improving Usability and accessibility: A ...


17

Had to deal w/a similar issue last year. Our task, which we couldn't change, was to convert an 11-section, 120-question "learning style" survey PDF into an interactive quiz. The original PDF is a daunting 10-pg list of questions & checkboxes, much like your example, which no student really wants to complete. Our solution was to break it up by ...


17

I have used the following listing to justify a minimum of 320 wide: https://viewportsizes.mattstow.com/ While it's not completely exhaustive, it's expansive enough to make the point that there are only a few phones in the last few years that have <320px screens, and I have never had anyone argue that the number isn't de minimis. If you're doing this ...


16

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 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 ...


16

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: Simply put all the text on the screen. The users will see it's a TOS screen, see the scrollbar and will scroll down. At the bottom of the screen, await them ...


14

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 design your web property once, get a good experience anywhere. But responsive design has its drawbacks, and is arguably a compromise solution that works best ...


14

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 320 points wide screen. Desktop users can still resize their browser windows to small widths*. ^ iPhone SE 1st generation, not the iPhone 8 style SE announced ...


13

Well you can easily do it in Mozilla Firefox. Try pressing Ctrl+Shift+M Then you can choose from varieties of resolutions, also for your custom resolutions. You can drag the sides to increase and decrease the resolutions. Some links here on keyboard shortcuts and responsive design view Keyboard shortcuts on Mozilla Responsive Design View on Mozilla ...


12

The answer you are looking for is the difference between responsive and adaptive web design. Simply said, responsive is where you can resize your browser window and the website/app resizes with it. Adaptive is exactly as you said: designed for a couple of viewports, so maybe for an iPhone, a tablet, and 15" computer screen. However, adaptive might not be ...


12

There are practical limits on either end of the spectrum IRT max and min screen dimensions. What those are may vary from project to project. However, on the low end, 320px is pretty much common these days (mainly due to iPhone and Android devices in portrait mode). There are always exceptions, however, and if your audience fits into one of those ...


11

Paddi MacDonnell wrote an interesting article on the hamburger menu and related mobile-first approaches to design a few days ago: It outlines some of the problems of hamburger menus, and concludes with the observation that the device is something of a way to brush the navigation of a complex app under the carpet of the hamburger icon (my carpet analogy, not ...


11

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 simply wasn't visible and there was no way to increase its size because of this particular meta-tag. This is far and away the most useless tag. I wish it had ...


11

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 possible to delay displaying anything to the user until all the assets were ready (a lot of old-school Flash sites did this for instance, with a loading screen ...


11

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 are clearly related to the tables. I would also try lightening the colour between the tab containers to separate them more clearly. Because of the colour scheme, ...


11

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.


10

Strikes me as very problematic. Adapting to a device's width is much more useful than adapting to it's aspect ratio. In most cases you wouldn't want the same layout on a 4 inch (diagonal) device as a 10 inch device, even if they have the same aspect ratio. Another problematic issue here is that, when dealing with text on the web, it's too hard to control ...


10

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 about their viewport? And who might you leave out when your target is everyone (like Amazon)? Older users often have their browser zoomed and don't even realize ...


9

Break the header into two. Yes, you can change the website header across devices. However, the example shows what looks like a logo on top of a background image. Consider breaking the header into both a raster image (the background) and a vector image (the logo). This will allow the background to scale down to a mobile device while allowing the logo to ...


9

We need to quit thinking "mobile friendly" and start thinking "device independent". Even mobile devices have resolutions and physical sizes once only found on desktop computers and some cannot be detected as mobile or not. You cannot point to any one width based on resolution where you can be sure it will fit most devices and, even then, that may all change ...


9

You have a few options. I like the responsive "where am i?" breadcrumbs as demonstrated here. This option has the full breadcrumb trail in large windows and shrinks to only show custom text (such as "Where am I?") in narrow windows and on mobile devices. Example: Full screen: Home > Section 1 > Section Title That is Longer Becomes: Where Am I? &...


9

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 your scrolling columns are dates, I'd use some graphic effect to make these dates scroll and pass below the static variables. This way you improve visibility ...


9

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: the font you use and the device that the website will be viewed on. Different fonts have different characteristics when it comes to readability, while each ...


8

Responsive Web Design is a term coined by Ethan Marcotte to describe techniques that use CSS media queries, a fluid grid, and other techniques to adapt a web page to various screen resolutions (usually based on width breakpoints). Typically there will be 3-4 breakpoints as you describe (mobile, tablet, desktop, extra large desktop) in a given design, but ...


8

"Profile" "Account" "Settings" Any of these or anything similar if you're worried about users inputting long names. Possibly with an icon in front that corresponds to it, be it a silhouette, gears, or anything else you deem fitting. If that doesn't fit, just the icon, or even replace it with a user's avatar/user-icon. That probably fits best with your case,...


8

Amazing how I've never thought about this 'conundrum' before, but it's intriguing. Here are the possible solutions I could come up with: Two menu buttons My first thought was to put the sub nav off-canvas to the left. Leaving you with a menu button on the right for a dropdown menu of the main nav and a menu button on the left for the off-canvas sub nav. But ...


8

In my personal opinion, it is not a good idea to populate the whole big screen with more content as it would strain the user's eyes and neck having to see from one corner of the screen to the other. So, its crucial to kind of limit the focus of user to a certain area of the screen. Of course, to populate the empty space of the screen, you could employ ...


Only top voted, non community-wiki answers of a minimum length are eligible