Questions tagged [responsive-design]
A design approach that delivers elegant user interfaces regardless of the size of the user's display or the limitations of the device.
455
questions
2
votes
3
answers
402
views
Good touch-based equivalent to the hover tools pattern?
When you have a long lists of items and you want to let the user interact with one of the items contextually - a common solution is to use the hover-tools pattern in a desktop browser environment. The ...
- 13
0
votes
0
answers
34
views
How to scale typography and UI for different mobile device resolutions?
We have an iOS and an Android tailored application. We noticed that on small devices, the UI becomes very large with texts not fitting properly, either truncating or going to another line (this ...
- 31
1
vote
1
answer
66
views
Switching between Master and Detail on smaller screens?
I have played with a simple draft of displaying master view (normally a table) and detail view (normally a single record).
On bigger screens it may look like this:
But the challenge is to make a good ...
- 18.3k
0
votes
1
answer
56
views
should I scale down for low-resolution devices?
after developing my design, everything is very huge, not messed up, but huge. for example, in 1920px devices, if you make browser smaller everything is alright, but if you use a POS system(with 1024px ...
- 89
3
votes
5
answers
1k
views
What is the best way to display user company role and application role when logged in to the application
An application having two roles i.e Company Role and Application Role based on which different sections of the application are accessible to the person.
Company Role describes either Admin or Users ...
CommunityBot
- 1
0
votes
2
answers
47
views
Users will upload there images should they be 2x to cover retina screens?
I am designing an editor where the user will upload their own images. I have to give requirements to them. In sketch where I am designing the image size is 400x800 should I tell them to upload ...
- 499
0
votes
1
answer
107
views
What are the specific breakpoint sizes that Apple uses and references in their design guidelines? [duplicate]
Does someone know, What are the specific dimensions (primarily width) of the breakpoint sizes that Apple uses and references in their design guidelines, name as the XS, SM.... XXL?
Reference: https://...
- 553
1
vote
2
answers
2k
views
Designing for landscape mobile view
A lot of RWD websites cater for 3 major breakpoints (phone, tablet, desktop) and make the design fluid between that. However, the thing that's hardly ever included is the landscape view. Rotate your ...
CommunityBot
- 1
24
votes
3
answers
45k
views
Are there devices narrower than 320px (and data on their usage for web browsing)?
Most organisations I know of when testing responsive designs (and responders to the question What is the smallest screen size you design for) use 320px as the narrowest device width they test for, ...
- 121
1
vote
2
answers
89
views
When to validate if the set of items selected totally valid for the operation?
Case: enterprise web-client solution for sales orders, the User needs to select lots of items to perform one operation in bulk and not all the items are applicable for this operation (due to hidden ...
CommunityBot
- 1
11
votes
5
answers
6k
views
Revisiting user-scalable=no
Previously, to achieve the effect of resizing for mobile, I have only ever used width=device-width, initial-scale=1 which worked no problem.
I recently discovered user-scalable=no as an option for ...
- 2,676
0
votes
2
answers
193
views
What is the best practice for designing apps for 320px wide?
I'm worried about my content placement on narrow screens.
Should I shrink my fontsize for iPhone SE, for example? Specially when iOS keyboard is so big on 320px small screens.
My layout in Figma is ...
CommunityBot
- 1
2
votes
2
answers
2k
views
What screen dimension would you choose to design your wireframe width?
I'm trying to figure out which is the best width dimension for our designs that will eventually get handed off to developers. Our most popular screen dimension is 1920 x 1080 by like 75% over others. ...
- 510
1
vote
2
answers
3k
views
Minimal height for a responsive design without scrolling
Many posts (e.g. this) are dedicated to the minimal width for the responsive design and the consensus is that 320px is the reasonable minimal width. I understand that minimal height is not discussed, ...
1
vote
3
answers
227
views
Design system – Different font sizes for small an big viewports
everyone! We are currently working in a project team on a design system that is primarily used to develop web applications. These web applications mainly consist of forms. One requirement here is that ...
- 11.4k
1
vote
1
answer
282
views
Is data table better or a card?
in a mobile responsive website is using a table with 9 columns a better idea or a card would suffice?
I have tried using a compact table to make it responsive for mobile but. it just didn't work.
- 624
2
votes
2
answers
407
views
How should my design resize according to the screen size?
I am designing a web based application which should be responsive for width 1366 to 1920 px as it will be only used in this environment. I have designed mock-ups in adobe XD in 1366 screen size how ...
CommunityBot
- 1
0
votes
0
answers
26
views
What is alternative way to show information without tooltip on mobile? [duplicate]
So i am working on a dashboard project. When I finsished this for desktop it's easy to provide information to user, they have just hover it. Then, I realize, it's not so good to have tooltip on mobile ...
0
votes
0
answers
332
views
How wide should my artboard be (Container width)?
I came to a point when I needed to decide what would be the container width for my pages.
My project involves designing a web platform with a dashboard and a side menu for navigation.
I made a little ...
- 27
12
votes
8
answers
4k
views
Web design workflow without Photoshop
There is more and more talk of web designers moving away from the idea of spending an incredible amount of time wireframing and then designing in Photoshop and I wanted to get everyone's opinion on ...
- 1
0
votes
1
answer
131
views
Displaying two column data grid
In my recent application I have to design and implement a data grid which will be having only two columns. This actually use as matrix for reference purposes.
User behavior is like
Railcar operators ...
0
votes
1
answer
371
views
What are the most common screen and browser width/height sizes to handle in order to cover common devices and browsers (i.e. both web and native)?
Question
I have a library that I implemented to use in my frontend projects. (Details are not much relevant, but just in case you may wonder, they are provided below in the Background Info section. I'...
- 14.2k
2
votes
2
answers
70
views
When you are designing for a web browser can you create a different design for mobile than for desktop? or does it have to be the same for both
Would this be considered a responsive design?
- 217
1
vote
1
answer
2k
views
Where to put the table of contents on mobile
I am looking to add a table of contents to my blog's articles, so that users may conveniently skip sections they are not interested in. I feel like a design where the ToC is a sticky element on the ...
10
votes
2
answers
475
views
Why is responsive web development primarily portrait based?
Take a look at the images below. You will notice that the form is responsive when resizing the browser horizontally. However, when resizing vertically, instead of the form trying to re-layout (if that'...
- 37.3k
19
votes
5
answers
19k
views
Font-sizes smaller on mobile, yes or no?
I always have the same question when I am working on a new project and I have to start thinking about responsive design.
What do you think about reducing the font-size of the website content from ...
- 129
0
votes
1
answer
403
views
Best way to Display Responsive Tables on Small Breakpoints? [duplicate]
I have a web-based dashboard with several tables spanning 80% of the page width.
Its a very typical responsive table design. A few columns (3-10), many rows (up to 100+), pagination, search filters ...
- 653
1
vote
1
answer
419
views
Screen resolution stats and responsive design
I'm working on a new website and there's some debate regarding what width should be picked as maximum for the main, fixed-sized, grid (it won't be a 100% width layout). (Should it be 1100px? Should it ...
CommunityBot
- 1
0
votes
1
answer
166
views
Why use borders around dropdowns in a mobile app?
I'm working on a mobile app with a GUI similar to the Gasbuddy mobile app.
The first screenshot is what Gasbuddy looks like now. The 2nd screenshot is the same thing but without the borders around the ...
- 633
1
vote
6
answers
628
views
Too many expanding panels, not enough room
The scenario: An enterprise software platform uses a collapsible left panel for its navigation and a collapsible right panel to show customer info. The customer info panel would be used side-by-side ...
- 16.2k
2
votes
3
answers
1k
views
Full width nav bar vs fixed width
I see a lot of websites where the main content and main menu bar (logo, menu, login/signup) have a fixed max width, even when the user is on a wide monitor (>= 1920px). The logo lines up with the ...
- 53
3
votes
2
answers
349
views
Responsive table with many text inputs
I have a table designed like this:
I need to make it responsive so it looks good on mobile devices.
Some requirements for the table:
There should be tips/hints for each text field. "Tips" -...
CommunityBot
- 1
1
vote
1
answer
80
views
Responsive design for mobile phones looking like mobile app design
What do you think about the use of a bottom menu in a responsive design ecommerce site for mobile devices, resembling a mobile app?
- 16
2
votes
1
answer
170
views
What is the best way to reduce clicks and improve the product list page UX on mobile devices?
I'll be glad if you share your opinions and experience about one interesting case. I have to reduce the clicks and to improve the UX of a product list page. Responsive website, the product list page ...
- 18.3k
4
votes
3
answers
3k
views
Recommended maximum amount of columns in a table? [closed]
When designing tables I am always wondering how many columns are too much.
I commonly have tables that act as an overview of all the items, which can then be opened to show all the details. On one ...
- 148
1
vote
1
answer
188
views
Preventing users from accessing a site on mobile
We have a situation where we develop a very complex data platform and we don't support mobile version of the web app for a reason. Nevertheless, we have a native mobile app that supports most of our ...
- 12.1k
0
votes
1
answer
441
views
Question about Grids and Layouts in UI Design
grids and layouts are something that i've struggled with since starting my design career two years back. I've read books like grid systems and watched several videos and courses but as a UI designer, ...
- 170
0
votes
2
answers
59
views
In responsive design, where to show related content?
I have a question that I would like your help with. I am creating a responsive website with readable content that has an 'In this page' section and 'Related content' section. Is there a best practice ...
- 37.3k
59
votes
12
answers
85k
views
How should large table columns be handled on a responsive design?
Related to This Question, I'm interested in what I should do with a responsive design theme where the users have control over the columns which are displayed in a tabular, data rich page. Users are ...
- 807
1
vote
5
answers
442
views
Is responsive web design worth it (in my situation)?
I've both designed and developed multiple websites where I worked on making the site responsive for mobile/tablet. It's easy work, but it's extremely tedious and lengthy.
Knowing that I am a single ...
CommunityBot
- 1
1
vote
1
answer
191
views
Room Booking & Availability Horizontal Scroll
I'm in the process of designing a room booking / availability web application.
Some of the application specifics are;
there are 30 rooms (across three floors, in the same building)
rooms are of ...
CommunityBot
- 1
0
votes
2
answers
203
views
Why is screen HEIGHT not taken into consideration while designing responsive layouts for mobile apps?
While creating responsive layouts for mobile apps, we take into account WIDTH of screen, and create layouts for different WIDTHS, but why don't we consider HEIGHT?
If 2 devices have a lot of ...
- 12.1k
7
votes
3
answers
4k
views
Displaying a large number of columns in a table
I have a Twitter Bootstrap based table with responsive CSS.
Everything looks good but, when I try to put more columns than the size of the table supports, I have a line breaking.
I tried to change ...
3
votes
1
answer
122
views
Best practice for button layout in responsive survey?
Hi everyone,
I'm designing a survey experience for a healthcare platform in which the user (often on the older side) fills out multiple surveys within a single flow.
To accommodate survey fatigue, I ...
- 18.3k
11
votes
2
answers
25k
views
What are the ideal widths a website should be designed for on a phone/tablet/computer?
What are the ideal/typical widths that an adaptive/responsive website should be designed for in order to accomodate the most devices possible?
- 3,310
1
vote
1
answer
64
views
Feedback - does designing for 2 layouts (mobile plus desktop above 1200px) seems appropriate?
The lead dev in my company suggested designing for mobile and desktop above 1200px. It's a new way of designing for me so I just wonder does one of you heard about this way before? He suggested that ...
CommunityBot
- 1
23
votes
5
answers
5k
views
Mobile friendly way for explanation why button is disabled
For desktop browsers the title attribute is an easy way to explain why a button is disabled:
<button disabled title="this is disabled because ...">disabled button</button>
But ...
- 403
2
votes
2
answers
449
views
How can I show a document preview alongside a form in a responsive way?
My registration form requires the user to input Information A and Information B , which are printed on documents only they have access to.
Since I have to make the form responsive for all kinds of ...
CommunityBot
- 1
2
votes
1
answer
80
views
Non-fullscreen sections overflow handling
The problem
I am creating a website with non-fullscreen-sections at the moment:
I am using a fullscreen-library to "switch" between the section when the user is scrolling. That way the ...
- 4,481
0
votes
0
answers
161
views
Holy grail layout solution that makes complex apps being usable on mobile?
What's the best solution for responsive holy grail layout in the context of complex responsive design?
Some common layouts done in this way
Hubspot CRM
Problem: it doesn't work on mobile as most of ...
- 853