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
45
votes
5
answers
4k
views
Should iOS native app be distinctly different than the responsive website's mobile version?
I was in a training session, where a room full of designers were learning iOS prototyping in Xcode, and there was an individual there who came from Apple to make sure everything in the course was done ...
- 5,525
1
vote
1
answer
533
views
Displaying Master/Detail Panes/Linked Lists
I'm trying to determine what the best approach is for displaying a master/detail list. I've taken the approach where the details are displayed in a pane that is adjacent (to the right) of the master ...
- 198
2
votes
3
answers
267
views
Which navigation pattern to use
We are currently working on designing a Responsive Web Site for a very niche market. The user base (elderly) would be using this site purely from content consumption - reading perspective more than ...
- 1,138
2
votes
3
answers
4k
views
Booking Calendar UX/UI - Approach
I am attempting to think a responsive design for a booking calendar which allows booking of available slots. In general, calendar UI's have time of the day as a vertical arrangement and days of the ...
- 3,939
0
votes
3
answers
496
views
Responsive images for 3 different types of screens : Is this a good design?
Above image is a wireframe layout of my portfolio website. The navbar is at the bottom while the 2 images fill the remaining screen. The left and right picture will be contained in their own DIV (...
- 233
10
votes
3
answers
17k
views
Pane vs Modal vs ?: Across all screen sizes
Pane vs Modal vs ?: Across all screen sizes
I am currently working on a web application that needs to be responsive, accessible, and provide a solid UX across all device screen sizes. We currently see ...
- 2,072
3
votes
2
answers
941
views
Optimal way to display long radio buttons on mobile
I'm working on designing a responsive form, and I'm wondering if anyone has ideas for dealing with "long" radio button options on mobile. For example, take the following image:
I've browsed around ...
- 143
2
votes
3
answers
4k
views
What is the "desktop" alternative for a material design full-screen dialog?
The material design spec for full-screen dialogs says the following about full-screen dialogs:
Mobile only: Due to limited real estate on mobile devices, dialog content appearing in other form ...
- 123
1
vote
3
answers
177
views
Responsive design for sidemenus
I have a website that was designed to have a side menu running along left side of the screen from top to bottom. Works great, looks great, but I'm having some issues when it comes to making it ...
- 111
1
vote
2
answers
945
views
Data Display of Tables: Table Cells with Must-See Values
I have a data-driven web app with horizontal resolution limit of 1280px, yet up to 15 columns (table cell data varying between 0-255 characters). I wouldn't like to display data on multiple rows as it ...
- 173
1
vote
2
answers
374
views
For Wide Display Should Main Content be Centered or Left?
I am confused on how the main content layout should be on a wide screen monitor.
So should I keep my main content on the left or middle? Since I have read many places that content should be on the ...
- 113
1
vote
1
answer
95
views
How to create interfaces in a graphics editor for responsive grid systems considering that they aren't pixel-perfect? [closed]
Any responsive CSS grid system uses long decimal point percentage values for columns' width (e.g. "16.66666667%"). I don't understand how to lay out the grid in Photoshop, because elements of the ...
- 113
0
votes
3
answers
346
views
How to accommodate more items in the same UI
I'm looking into a change request from a client which requires the following.
Have a look at the visual below.
The clients would like to be able to show more then 5 of the blue boxes (these show ...
- 111
4
votes
2
answers
499
views
Should a responsive sticky side menu stay sticky at high resolution?
We have a website/app that has a side menu that sticks to the left side of the screen (see mockup below)
It is a responsive site, so when accessed on higher resolution screens (or if the user zooms ...
- 407
1
vote
2
answers
431
views
How to transform desktop UI to smartphone UI?
I have a live demo here, based on HTML, CSS, JS and Metronic. It's currently planned to be displayed on desktops, yet it's quite responsive (a little bit...) and I'd like to convert it to be displayed ...
- 209
4
votes
2
answers
4k
views
Truncation vs. Wrapping text when designing for responsive page for multiple devices - which is better?
For a ready only form that is also designed to be responsive, some fields are long and some short. Currently, the default behavior is truncating long fields based on the space constraint. And on hover,...
- 41
-4
votes
3
answers
107
views
Should i use a mobile theme or responsive theme for my fashion store? [closed]
I have a fashion store, then I decide to buy a new theme for my store. I am wondering whether to buy a mobile theme or responsive theme.
I know a mobile theme is more fast loading and simple than ...
- 1
2
votes
4
answers
896
views
Should you design for the transition period of resizing the window
The big trend (rightly so) in web design right now is making your website responsive. Meaning that your pages will look good on any size screen. As a ux/ui developer I always initially test my pages ...
- 15.4k
0
votes
2
answers
533
views
How can I show a row of dropdown menu's in mobile
A brief introduction :
Lets say in this web app the user is asked to upload an image. The resultant page will contain the image with a row of dropdown menu's to select from and a final submit button ...
- 642
0
votes
6
answers
527
views
How many mockups do you typically do for a responsive bootstrap design?
I am scoping a responsive project and thinking it will need views spanning from mobile to desktop. I am just wanting to confirm if it is necessary/helpful to do mockups for all 4 sizes (Extra small ...
- 51
0
votes
3
answers
707
views
Icon to request device rotation [closed]
Is there an existing icon that is recognized as a request / suggestion that a user rotate their mobile device?
I am converting an OLD website to be more mobile friendly. (responsive) I have existing ...
- 159
1
vote
2
answers
2k
views
Breadcrumbs for Mobile
We are designing a responsive site and I was wondering if we need to use breadcrumbs for mobile version.
I did some research and most of big brands don't use breadcrumbs on their mobile site but I ...
- 11
1
vote
1
answer
232
views
Which button form is better from a user experience perspective? Rounded or Boxed?
Could either be confused as labels? Any other criteria to consider?
- 1,703
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 ...
- 261
7
votes
2
answers
4k
views
Sub-menu dropdown vs tabs on mobile
I am trying to figure out what a better UX is on a mobile phone. Either having the sub-navigation as tabs, or have it be a dropdown.
Method 1 - Dropdown on mobile
In the following images, the sub-...
- 171
2
votes
3
answers
2k
views
How do you choose between using a Jumbotron or Carousel?
I'm developing my first ever responsive website. This website will be a one-page website for one of my software products. I'm having a hard time trying to decide whether to use a jumbotron or a ...
2
votes
4
answers
6k
views
When designing a website, what screen resolution should I design for?
I have a simple question about the best resolution to consider when developing a website.
Usually I consider the max-width: 1920x1080px, but now TVs are smart and some of them allow you to browse the ...
- 687
3
votes
2
answers
123
views
Best way to represent long sequences in responsive views?
I have this long sequence of elements following a path. They work OK in desktop views, but I was wondering how to deal with the orphan arrows (in green in the mockup) while still preserving the visual ...
- 38.3k
3
votes
1
answer
365
views
Design for an autosave feature
I'm developing a web app that has several text fields that can be edited. I implemented an autosave feature that saves each time there is change in the title field.
I need to let the user know that ...
- 145
2
votes
4
answers
126
views
How can I display a definition to my users on mobile?
I have a client that has some content with pretty intense scientific language. They realize this, and want to offer contextual definitions, on demand.
I can find lots examples of this being done via ...
- 51
7
votes
4
answers
16k
views
What is the best way to allow users select items from a very long list in a responsive web app?
Scenario
I'm designing a web app where the user adds predefined items from List A to a custom List B.
List A is over 100 items sorted alphabetically.
List B can be customized according to user needs.
...
- 121
0
votes
1
answer
116
views
Selecting country in a mobile/tablet landscape mode vs portrait mode on a responsive APP
For selecting country on an APP when it's being opened for the 1st time, On mobile or tablet portrait a 1 column list view is the best option.
However is it better to switch to a 2 column view when ...
- 10.8k
0
votes
1
answer
328
views
Mobile site navigation - Burger menu or not? [duplicate]
Can anyone share some stats on the pros and cons of both using a burger menu (standard drop down or pop out) Vs a simplified navigation for mobile.
Examples of great navigation can be found here:
...
- 101
3
votes
2
answers
6k
views
Responsive design - 3-level navigation
I'm currently working on a site with a quite complex information architecture. The IA has 3 levels and each level can have up to 12 items.
Level 1: 4 items
Level 2: up to 12 items
Level 3: up to 9 ...
user25518
0
votes
1
answer
265
views
Responsive vs adaptive vs fixed size video player
I am thinking to create browser plugin/extension to play videos over the webpage but from user experience point of view I am having doubt regarding size of player.
Shall I keep it:
Responsive : so ...
- 1,226
0
votes
1
answer
1k
views
Why minimum resolution for mobile web design vs. mobile app design is different? [closed]
After a lot of experience with mobile-first responsive design, I recently got a weird question from a visual designer colleague:
"Why do we have to design mobile websites at minimum resolution of ...
- 13
3
votes
3
answers
166
views
Should a conversion to a responsive layout happen site-wide at once, or is incrementally acceptable?
I have a large website that needs to be updated to be responsive.
There are business deadlines that prefer a gradual roll out instead of waiting to be completely finished
Should I apply a responsive ...
- 33
4
votes
3
answers
537
views
Information architecture for supermarket website
I'm working on a website (responsive) for a supermarket. I'm thinking about the best way to provide a structured navigation both on mobile and desktop.
How would you organize the navigation? I've ...
- 963
1
vote
2
answers
5k
views
Responsive 3 breakpoint design
I was given a quote for a website that states:
"responsive 3 breakpoint design, designs for mobile (portrait, landscape), tablet (portrait, landscape), desktop (optimized to 1200 pixels) plus desktop ...
- 11
4
votes
1
answer
117
views
Good names for turning site responsive-ness on and off?
I'm doing work on a website that has been 1900px wide long time, and most of the users aren't extremely tech-savvy and usually +40 years old. To give you an idea of the content of the website, all the ...
- 243
27
votes
3
answers
50k
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, ...
- 2,706
0
votes
3
answers
2k
views
Determine correct breakpoints to wireframe to a responsive website!
My problem is about choosing the right breakpoints for a responsive website as it's wireframing (Not determining in the code phase). I am having trouble about this. Because many people say that choose ...
- 17
2
votes
1
answer
787
views
What are the best practices for responsive images that contain live text on websites?
I am working on a large online retailer website, with a variety of products and we are moving over to a fully responsive website.
One of the major issues we will be looking at are the promotional or ...
- 179
3
votes
1
answer
165
views
How can I display 13 selectable items on a "Mobile First" responsive webpage?
I have a 13 selectable elements list to be displayed in a Mobile First" responsive webpage.
The elements are pure text of about only one line. I have been struggling with my mind to find a solution ...
- 33
1
vote
1
answer
561
views
Responsive navigation menu: With or without animation?
When it comes to responsive navigation patterns, I often find myself using the "slide down pattern":
Source
Now there are at least two ways to build something like that:
With slide animation like ...
- 743
3
votes
2
answers
233
views
How to turn a GridView into a better more responsive user experience?
I have a GridView that needs more adaptive formatting. Something that works well in a responsive context without losing all the valuable points.
What patterns exist in 2015 for presenting tabular ...
- 153
0
votes
1
answer
2k
views
What are the best methods to show a data table in mobile / tablet view? [duplicate]
I'm in the process of redesigning my website to be responsive, and some of my account pages I show some detailed product information in a data table view.
What are some of the best methods to show ...
- 121
3
votes
1
answer
991
views
Second menu on mobile
I have a secondary nav which is related to the content on the current page as opposed to the primary nav which is a global menu. What is the best way to have two menus on mobile. Both have to be ...
- 153
7
votes
6
answers
5k
views
How do I design a user friendly survey with more than 150 questions?
I am designing UI/UX for a survey webapp which has more than 150 questions. Right now they are using 5 radio buttons for each question. Similar to the image below:
So the question is, how to make ...
- 269
3
votes
2
answers
327
views
Partial-Page Responsiveness, or Responsive Elements in a Non-Responsive App
I am working on a project that will add considerable new functionality to an existing application. We were previously limited by a framework that did not (realistically) facilitate responsiveness, so ...
- 453