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.
463 questions
1
vote
0
answers
17
views
Which aspects of an input should use rem and which should use pixels?
I am currently working on standardizing the styling in an application. As part of the process, I want to switch to using rems instead of pixels (px) where it makes sense. I am planning on changing the ...
- 11
1
vote
1
answer
27
views
How to tweak the mobile version of these custom fields?
This is how the custom fields in my form look like on desktop:
This is on mobile:
The delete button (trash can) is supposed to remove the whole custom field (Key, Type, and Value). But in the mobile ...
- 1,605
0
votes
3
answers
73
views
How can I help developers better understand proportions and harmony between elements in responsive design?
I'm working with developers who are implementing responsive design, but we're struggling with maintaining proportionality and visual harmony between elements across different screen sizes. For ...
1
vote
4
answers
402
views
Why use rem units for spacing and sizing, instead of px units?
It seems that most web designers choose scalable units (rem, based on font size) for pretty much everything, instead of fixed units (px).
But when it comes to spacing and sizing, that doesn't make ...
- 598
2
votes
2
answers
246
views
Web App - Set a Max Width or Let it Expand Responsively?
Hopefully this is an easy one.
I'm designing a web app that contains rows of cards you can horizontally scroll, and a sidebar navigation on the left (think: similar to DoorDash).
I notice on my wide ...
0
votes
1
answer
115
views
Simplifying Matrix UI Approach
I have a current design which is in matrix form where columns and rows can be added and value is added. Is there any other solution for this other than using matrix. I dont want to use the matrix ...
1
vote
1
answer
130
views
Improving readability and optimize space
I develop simple web applications for my hardware projects but I'm neither a web designer nor a graphic guy. Hence my pages are often awful and not useful.
Let's see an example. Here my page to ...
- 113
1
vote
3
answers
722
views
When should the font size adapt to the dimensions of the website?
I tried to search online on whether or not font should adapt with the size of the window and I found a lot of results on how to do it but not many whether I should ever do it. I tested it on multiple ...
- 121
3
votes
2
answers
342
views
Are breakpoints obsolete?
I'm a relatively new designer. All of my courses and training have a focus on breakpoints as a way to achieve responsive design. However I have heard that they are now obsolete and not being used ...
- 91
1
vote
1
answer
126
views
Using an image as a banner, or code the text and CTA separately?
I was wondering what is the better practice for a web platform selling employee benefits. We have a banner up top (not a carousel), and I'm not sure if it's better to keep it as an image, or code the ...
- 217
0
votes
1
answer
247
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 ...
- 39
2
votes
1
answer
86
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 ...
- 181
1
vote
1
answer
647
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://...
1
vote
1
answer
73
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 ...
1
vote
2
answers
270
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 ...
- 71
2
votes
2
answers
8k
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. ...
- 23
1
vote
1
answer
774
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.
1
vote
2
answers
360
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 ...
- 31
1
vote
3
answers
333
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 ...
- 21
0
votes
2
answers
690
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 ...
- 37
0
votes
1
answer
202
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 ...
- 27
0
votes
1
answer
1k
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'...
- 103
2
votes
2
answers
75
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?
- 21
0
votes
1
answer
499
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 ...
- 461
0
votes
1
answer
204
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 ...
- 187
1
vote
6
answers
732
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 ...
- 12.9k
2
votes
3
answers
2k
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 ...
- 223
1
vote
2
answers
9k
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, ...
- 111
1
vote
1
answer
81
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?
- 35
2
votes
1
answer
223
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 ...
- 35
1
vote
1
answer
362
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 ...
0
votes
1
answer
695
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, ...
- 1
2
votes
1
answer
3k
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 ...
- 121
0
votes
2
answers
71
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 ...
0
votes
2
answers
391
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 ...
- 103
3
votes
1
answer
145
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 ...
- 543
4
votes
3
answers
4k
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
658
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 ...
- 111
10
votes
2
answers
556
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'...
- 153
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
1
vote
1
answer
65
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 ...
- 963
2
votes
1
answer
84
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 ...
user141279
0
votes
1
answer
259
views
Previewing breakpoints in Adobe XD [closed]
I am building a responsive prototype in Adobe XD but feel like I’m missing a trick. I have different artboards for different resolutions but how do I preview them in a single preview when I resize the ...
- 1,062
2
votes
1
answer
63
views
page with 2 vertical sections in mobile
I have a wizard which contains 2 sections.
For desktop, the 2 column layout works well, but for mobile, the experience is not very user friendly. Any ideas on how I can improve this?
- 21
3
votes
4
answers
142
views
Should users be prompted to determine bandwidth intensity of a site?
Serving up web content based on user agents alone seems exclusionary to me; mobile devices aren’t always constrained to low bandwidth.
From a UX perspective, would it be a bad strategy to present ...
- 133
2
votes
1
answer
117
views
Responsive Web design [closed]
I am a self taught designer and learning nowadays from IDF. I have a few doubts about responsive design.
As a designer, while I am designing screens to give to to developers, for what sizes I should ...
- 21
3
votes
1
answer
230
views
What's the point of responsive/adaptive design in doing UI?
I apologize if this is such a bad question but I have zero clue about web or UI design. I'm a graphic designer but I was tasked to just design a website using Photoshop cause that's what I'm familiar ...
- 131
0
votes
1
answer
693
views
UX solutions for data tables and alignment on large screens
I see a lot of excellent advice here regarding how to build mobile-responsive data tables. However, when it comes to large viewports, I'm not finding much. In general, I'm lost about what could be the ...
3
votes
1
answer
298
views
PDF alternative, responsive for desktop and mobile
I'm working on an application that exports a PDF file with important information for the user to save, and eventually recover.
The PDF format was chosen because it's adequately portable and non-...
- 176
1
vote
2
answers
84
views
Referring to the position of an element in modern (responsive) design
This is such a common and basic issue that there must be an answer somewhere already, but I can't see it, so I'm wondering if I'm missing something. Should we avoid referring to the position of an ...
- 111