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.
426
questions
18
votes
4answers
3k 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 ...
1
vote
1answer
43 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 ...
2
votes
1answer
55 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 ...
0
votes
0answers
31 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 ...
0
votes
1answer
16 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 ...
2
votes
1answer
40 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?
3
votes
4answers
99 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 ...
2
votes
1answer
78 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 ...
3
votes
1answer
169 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 ...
0
votes
1answer
76 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 ...
2
votes
1answer
86 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-...
1
vote
2answers
57 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 ...
-2
votes
2answers
94 views
Are there stats about height of browser windows worldwide / by industry?
I wonder because I'm working on the design of trade platform and found that a lot of moments need improvements due to the different viewports on different devices and so on. The platform does not need ...
2
votes
1answer
37 views
Wcag 2.1 Success criteria-1.3.6
I am unable to understand the examples available on w3.org, which are:
The links in the navigation of a website are marked up so that users can add their own icons.
Icons on a website are marked up ...
3
votes
3answers
107 views
If I have 24 categories with sub-categories in my shop page, where would be the best place for them?
The design is specifically to Desktop, on Mobile and Tablet I'm planning to have a drawer window with the list of categories and its sub-categories. The idea is to make the category visible in the eye ...
2
votes
1answer
95 views
Nested Cards on mobile
I've come across many good nested/hierarchical data on mobile, problem is they often only include one line of information.
I'm looking to include more information than just a card title, so I'm ...
1
vote
1answer
89 views
Can I put a select button on the header of this dashboard?
I have a dashboard using balsamiq, which having a list of doctors and I want to put them on the sider sorted alphabetically, and I want to display, for each doctor, different pages like Gestion de ...
1
vote
1answer
87 views
Need opinion on this web design FOR UX/UI/CX - Beginner in designing [closed]
Hi, first of all, sorry if I'm posting in the wrong section. I want to get an opinion about the design of an event management system. I've google on UX example design but most only show for simple ...
1
vote
1answer
36 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 ...
0
votes
2answers
88 views
When to hide a sidenav
I have in my app a sidenav which is by default visible. Now I got a feedback from users, that in lower resolutions (mobile, tablets) the sidenav covers a lot of space from the app. My question is: on ...
2
votes
1answer
114 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 ...
1
vote
1answer
94 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 ...
5
votes
10answers
3k views
Is 320px wide designs still relevant? (responsive web)
For a couple of years the smallest design I make for responsive websites is 375px wide. Now our new frontend developer eats my brain that I should provide 320px wide. And even if I will not she will ...
2
votes
1answer
57 views
Consistency Within vs. Across Devices
I have a question geared more towards UI/UX Consistency rather than Branding Consistency.
We have an ability to "Save to Lists" on our website. On our desktop site, it is a dropdown. On our mobile ...
2
votes
1answer
136 views
Responsive table with many text inputs
I have a table of this type:
So I need to make it responsive, look good on mobile devices.
Several notices about table:
1) Yeah, there definitely should be some tips for every text field, it's ...
1
vote
4answers
206 views
Incorrect iframe implementation
Some context, we are using a third party authentication platform where ecommerce sites can choose to display this platform within an iframe during their checkout process. We have media queries that ...
0
votes
1answer
158 views
Solutions for responsive data tables? [duplicate]
We have a client who is FINALLY convinced to convert their site / web-based application to responsive. Our biggest issue right now is how to handle their extensive data tables. The biggest offender ...
2
votes
3answers
678 views
Web application Design - using full screen width [duplicate]
With today large screen resolution (1920 screen width rules now), I need to decide between using the full width of the screen (liquid) versus fixed with (padding with white margin over 1366px for ...
2
votes
2answers
793 views
Example Lateral, Forward & Reverse Navigation in Desktop Applications
I'm researching Material Design in how it's related to layer based navigation.
Navigational directions Based on your app’s information architecture,
a user can move in one of three navigational ...
2
votes
3answers
129 views
Redesign a page for mobile, while keeping a “similar” layout to the desktop view, desktop uses a table
Well I have a page that looks decent on desktop, and most of the site is working responsive as well. The website has as goal to provide people to sign up for (sport) tournaments, and allows users to ...
1
vote
1answer
2k views
Font scaling from desktop to mobile
I am a designer and an issue I run in to all the time is how to scale font sizes down for mobile, and how to communicate that to a developer without 'just eyeballing it'. For instance, in my style ...
0
votes
1answer
78 views
Which mobile devices do you NOT optimize mobile responsive for?
Which mobile devices do you NOT optimize mobile responsive for?
For example chrome dev tools no longer has Pixel 1.
Which is the industry standard to create for or leave out ?
10
votes
3answers
2k views
How to deal with an excess of white-space in a CRM UI?
I'm designing a CRM-style interface for nurses to help them manage their workflow, and I'm running into a UI issue where, in most use cases, there's kind of an awkward excess of white-space in the "...
3
votes
2answers
95 views
Best way to create a responsive prototype? [closed]
Are there any platforms or tools to create a responsive prototype?
0
votes
2answers
471 views
How to decide max-width in XD? [closed]
I have seen old questions about this subject but they are quite old. I guess things change so that is why I ask this. I want to be updated.
I am about to design a web page mockup in Adobe XD. I will ...
0
votes
1answer
31 views
Suggest Visualization for Control line & Waning line
I need to show 100's parameter & its current value with respect to Upper/Lower Control value and warning value. Each parameter has different Control/Warning line.
If value is close to warning ...
0
votes
2answers
88 views
Where should the illustration go on this wireframe UX wise?
I'm making a wireframe of a responsive website and the landing page will have text field and a cta beside an illustration. Like in the image.
Where should the illustration go ux wise in mobile ...
0
votes
2answers
143 views
Full width of the textbox on the screen or not [duplicate]
Apologies if this comes as a naive question.
From design point of view basically a textbox control (or any control) in a grid container, does it makes sense to have a textbox in fullwidth of the ...
2
votes
2answers
287 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 ...
7
votes
2answers
136 views
What should the summary count on an “active filter” button be representing?
Often, in facetted filtering experiences, on mobile, the filters are tucked offscreen. To indicate that the current view is being filtered, often the filter button is presented with a number ...
2
votes
3answers
597 views
How to adapt text and/or elements size while designing to smaller screens?
I have a layout I made some time ago on Adobe XD (that was just a personal project) and now I wanna put it on Behance. To do so, I need to duplicate/adapt that layout (designed for desktop) to smaller ...
0
votes
1answer
112 views
Absence planner - UX thoughts and recommendations
I hope you all have some nice Christmas days.
I'm currently working on a new and responsive version of our company absence planner using Googles Material Design. As I build it from scratch I would ...
1
vote
3answers
1k views
In Responsive Design, how do you trigger Tooltips? mouse hover isn't there anymore
A tiny disclaimer, not looking for tooltip alternative for mobile as in another UI Pattern, i'm looking for a different interaction that could trigger the tooltip, i hope this makes it clear.
The ...
1
vote
2answers
173 views
responsive two-column layout
This might be a really basic question, but I am trying to figure out how to best create a responsive two-column layout. Let's say you have two sets of data. For example, latest departures and arrivals ...
1
vote
2answers
485 views
Responsive feature comparison layout / grid
I have a list of applications (~120 items).
Each application on the list has the same features (logo, name, OS name, price range, short product info), so basically this is a table with 120 rows and ...
0
votes
2answers
294 views
What are components more important in a Login interface - System?
I made a system web for administration information and my customer solicit me a interface elegant and professional and like he is a people older and he doest not knows a lot about how to workings ...
1
vote
1answer
62 views
What should I do to get user know about scrollable content in the project/course
The project I am making has tables in it. I am working on responsive now. Big tables that do not fit in a small device, I have given them vertical scroll.
So my tables look like this in desktop
and ...
2
votes
2answers
80 views
Is it a good practice to extract some menu items from the main navigation on medium sized screens?
A designer I work with often creates a navigation for websites that looks like this on different screen sizes (mobile, tablet, desktop):
On small screen sizes (mobile):
there's a burger menu holding ...
1
vote
2answers
98 views
Is there a particular name for this design element?
I have seen a lot of magazine/news templates that basically stick a set of posts together and they usually span 2 rows and 3 or more columns.
The best I can think of is maybe calling it a collage, ...
3
votes
4answers
212 views
Why web apps do not consider high resolution screens in their designs? [duplicate]
Have a look at the image below, this is how Youtube will look when someone opens on high resolution screen.There are empty space on both sides and I have checked this with many popular web apps, same ...
