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.
402
questions
1
vote
0answers
13 views
Mobile website redirect to desktop site?
If visiting a page such as https://en.wikipedia.org/wiki/Main_Page on a mobile device redirects you to https://en.m.wikipedia.org/wiki/Main_Page then why doesn't the reverse ever happen? I.e. sending ...
-1
votes
0answers
34 views
How to set correctly a big title which works on desktop and mobile as well? [closed]
I'm working on webpage main title. I want to set a 100% height background image and a big title on the front of it. This is how I did:
In the CSS file:
body, html {
height: 100%;
}
.bg {
...
1
vote
2answers
219 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 ...
1
vote
1answer
67 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 ...
0
votes
1answer
58 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
70 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 ?
9
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 "...
2
votes
2answers
77 views
Best way to create a responsive prototype? [closed]
Are there any platforms or tools to create a responsive prototype?
0
votes
2answers
102 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
29 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
74 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
85 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 ...
0
votes
1answer
88 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 ...
3
votes
1answer
57 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 ...
1
vote
2answers
99 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
97 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
464 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
67 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 ...
0
votes
2answers
248 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
97 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 ...
0
votes
1answer
48 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
77 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
95 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
164 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 ...
0
votes
1answer
96 views
Design was made to look perfect at full and fixed width, how to deal with it on wider screens?
A website design has been provided to me which I should turn into a HTML page.
But here is the catch:
It was made to only look good when taking full width (it has a slideshow, and also a horizontal ...
0
votes
1answer
794 views
Best way to handle multiple navbars for a products site?
I'm designing a responsive website which has different software products (apps) and one main homepage.
Desktop Homepage navbar menu has:
Website name (right side) | Apps | About-us |...
1
vote
2answers
1k views
Is it logical to use tables for responsive web design in 2018?
As the title says I was wondering whether using tables for responsive web design still a thing in 2018?
What are the pros and cons if I do use tables instead of semantic markup apart from SEO?
0
votes
1answer
272 views
Best solution for alert boxes positioning in SPA's (single page applications)
I'm designing my first single page application which is for users to manage their USB dongle for a desktop application and also to create teams and request tech support.
This is the wireframe of the ...
0
votes
3answers
185 views
Best way to represent hundreds of rows - marketing calendar
I am creating a UI similar to a marketing calendar. But it has hundreds of rows, each row showing a bar that represents how long the process took. So the table header represents time (weekly, monthly, ...
0
votes
2answers
236 views
Best practice for responsive vertical side menu
If we have the classical vertical side menu (on the left) for desktop:
then, what is the best practice for displaying it responsively, especially when there's quite a few menu buttons?
To hint you ...
1
vote
2answers
2k views
Best practices for image aspect ratios
I understand my image sizing should be dictated by other factors but I was curious if there were any standards for image aspect ratios in responsive web design. i.e., 1:1 or 3:4 which reflects the ...
3
votes
1answer
336 views
Tables with a lot of data for small screen sizes
It is probably not just me who finds responsive tables barely readable when using small screen devices. In most of cases they look like in example #1.
I find this way completely impractical when ...
0
votes
1answer
85 views
What would I call this element? [closed]
I am trying to create a card that has a position absolute show more div option. I need it to not move any other elements and be responsive. I don't know how to do a search for it because I don't know ...
0
votes
1answer
307 views
How to use anchor tags in mobile?
In the above image top navigation bar and left sidebar is fixed. When I click on the option 6 it will jump to a section 6. So, the problem I'm facing is how do I translate this view into mobile?
5
votes
2answers
699 views
How to avoid the use of scroll bars in dashboard UI?
I have 4 tab container in 1 page and Users have to use scroll bar because lack of the space.
The problem is There is already scroll bars in the grids and the design looks horrible.
1-) I hate ...
1
vote
1answer
87 views
Should a responsive website have the same breakpoints for every page or can they be different for each page?
I'm designing a responsive e-commerce website. I'm wondering if every page of the site should have the exact same breakpoints or not. Since pages like Product detail page, account page, shopping cart ...
2
votes
1answer
74 views
Sidebar Ads in Responsive Layouts - How to make happy both advertises and readers ?
I have a blog and I make money from advertisements.
Currently, Advertisements are displayed on the sidebar only because I don't need to disturb readers when reading articles.
There are two 300*250 ...
1
vote
0answers
198 views
How to display a two column table with limited data on a wide page?
I am trying to create a table with three columns but there isn't much data to display. There will be a select button, the item name, and the item's detail (which will be very short)
What's the best ...
0
votes
1answer
193 views
Forms vs Inline Edition Tables
Before I explain my problem let me give you some background. The way our web application is being built I don't have control at all on the distribution of the inputs of our forms, they are being built ...
1
vote
3answers
211 views
Is it bad practice to direct a user to a mobile friendly side of the site on screen resize
I have an html5 application that consists of two different interfaces. The desktop interface demands a minimum of 900 pixels in width to function properly. The mobile version is built in an entirely ...
0
votes
1answer
155 views
Why are there no large-scale responsive templates for admin sites?
I have to change an old ERP system (typical private admin site) interface to be more modern and responsive. I’m not a designer but a developer with some frontend experience so my plan was to buy a ...
0
votes
2answers
84 views
Difference between mobile site and web responsive? What should be the approach?
There are so many sites that work on m-site particularly like makemytrip
but one the same side, there are products that are web responsive which are manipulated using the CSS media queries.
One of ...
16
votes
5answers
10k 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 ...
1
vote
1answer
454 views
How to display a CTA on mobile
With the CTA on my site instead of just saying 'See More' or 'Learn More' I've tried to be more specific as in it relates to the content.
For example I have this one CTA that says 'Plan your wining ...
3
votes
3answers
254 views
Best wireframing breakpoints to work with new frontend developer
I've searched tons on this topic, e.g.:
https://medium.freecodecamp.org/the-100-correct-way-to-do-css-breakpoints-88d6a5ba1862
https://graphicdesign.stackexchange.com/questions/39433/what-are-best-...
2
votes
1answer
395 views
Responsive Design: How to balance content with uneven column width to arrange itself in horizontal layout
How can I arrange the data in a horizontal layout so that it manages increase in column widths. How can you manage such situations responsive design.
I want to make sure:
Something that is ...
1
vote
2answers
380 views
E-commerce product page thumbnails: Vertical vs Horizontal?
For an e-commerce product detail page, is it better to have the item picture thumbnails laid out vertically to the left side of the main picture, or laid out horizontally to the bottom of the main ...
1
vote
1answer
130 views
Responsive design related to tiles
We have a screen which displays tiles and on each tile there is at least one field. Currently the tiles allow a maximum height of three rows of fields and an unlimited number of columns. The user is ...
1
vote
2answers
181 views
Image size high-fidelity prototype
What is the resolution and image size to use for high-fidelity UX prototypes? I am supply images to someone doing a UX design for smartphones-iphone and android, tablets and desktop--I am wondering if ...
0
votes
1answer
163 views
How can I make a mobile app responsive for desktop? [closed]
I am trying to make a desktop version of a mobile app. But not sure how to fill those full width cards to a desktop app.
