A design approach that delivers elegant user interfaces regardless of the size of the user's display or the limitations of the device.

learn more… | top users | synonyms

1
vote
0answers
13 views

Why is there a slight lag between native apps and “desktop” apps? [migrated]

So I'm not really sure how to explain this but I will try my best. I created a jsfiddle: https://jsfiddle.net/xghar755/2/ As you quickly hover over each text, you can see that the background color ...
1
vote
2answers
94 views

Why are websites center aligned instead of stretched to fit?

Trying to figure out the exact reasons why websites or web applications on wider screens 1. have space on either side (aligned center as a container) 2. instead of being left-aligned or 3. stretched ...
3
votes
1answer
51 views

How to find and fix image breakpoints when designing to a HTML template [closed]

When working with a responsive design framework it is easy to specify the breakpoints based on the viewport and resolution that you are designing for. However, in situations where a generic HTML ...
3
votes
1answer
69 views

How many breakpoints for mobile devices in responsive design and mobile native apps? [closed]

In a browser based app with responsive design, how many breakpoints are needed? Have you done any projects as an example, and what are the best industry practices? I normally see only 3 breakpoints; ...
1
vote
0answers
42 views

Best way to create responsive sidebar content [closed]

I'm working on a project that I would like to be responsive so it can be used on mobile devices. A major part of this project is a content-design area that has a lot of "tool" options and parts that ...
1
vote
0answers
53 views

How to organize this screens in my project. Which is the better experience for users, Lists or TableData? [closed]

I have a list with categories and other with my articles or posts (something like that), a menu in accordion if show two options to navigate: (- ALL ARTICLES - CATEGORIES) All articles has showing a ...
1
vote
2answers
36 views

How to transition users from a mobile-optimized to non-optimized area of a site with minimum confusion?

My team is working on a fairly large site that will be slowly transitioning (finally) into a mobile-optimized/responsive site. Since it is impossible to convert every page at once, there will be some ...
1
vote
2answers
88 views

A list of buttons seem to appear as a group on mobile device

I was providing some feedback on a peers design. And what kept jumping out at me was the fact that these buttons seem to blend together and appear sort of as a block of text to me. This is a native ...
5
votes
2answers
208 views

How to present a wide chart on mobile devices?

I have a big chart which, by its nature, needs quite a lot of horizontal space. This is an example: I'm having troubles finding a way to present it on mobile devices. While I could find a way to ...
0
votes
2answers
63 views

Implementing different levels of drag/drop functionality?

I'm working on a tablet app for a motel. Initially, the app was going to be tested on one floor. Essentially, the app would be used to move guests from one room/bed to another room/bed. As you can ...
1
vote
1answer
25 views

Usable field type for date of birth on devices

I have a question about what kind of form input needs to be used to provide the best experience for date of birth field on mobile devices..I have tried to use the device specific native spinners. The ...
0
votes
1answer
78 views

Pavination Vs. Infinite Scroll in Datagrids

Pavination Vs. Infinite Scroll in Datagrids Are there any research findings or papers or usability testing findings on Pagination Vs. Infinite scroll in a datagrid. I am trying to define UX patterns ...
0
votes
0answers
18 views

Viewport size design methodology versus responsive design approach

Lots of new CSS features are allowing designer to implement viewport unit size typography and images, but I am wondering if these types of features are in common use and if we should be moving from ...
1
vote
5answers
118 views

Handle responsive images

I have a web page where the users can sell their houses. They can also upload multiple images to make a carousel to show the house's images. The problem I'm facing is to decide whether or not to use ...
1
vote
2answers
51 views

mobile view of a wizard

I've got a wizard as given in the following mockup. download bmml source – Wireframes created with Balsamiq Mockups What would be an appropriate way to make this wizard mobile friendly. ...
0
votes
0answers
39 views

Any alternative to responsive autocompleters?

I'm working on a responsive web app form which contains more than one autocomplete fields. I don't quite like how the autocompleters work in mobile when is not in the top of the screen. When you edit ...
0
votes
1answer
76 views

Inline or modal dialog for responsive filters?

I need to filter a large list of items in a responsive web app. I'm working on two different approaches: A) Filters open in a modal dialog. In small screens, it would open taking full screen. B) ...
0
votes
0answers
28 views

How to integrate blogging into an existing one page portfolio site and keep it usable

The one-page portfolio site in question is based on the Bootstrap Freelancer theme: a responsive, one page theme with a home, portfolio, about, and contact section. I currently have a blog section ...
0
votes
3answers
61 views

User Group Assignment Layout

I have a UI that allows admins to manage what groups a user is in. Currently the list of groups are listed as columns in a grid, stacked horizontally, and the list of users are stacked vertically. ...
0
votes
1answer
66 views

How to make pixel perfect wires frames for responsive site?

I apologize if this question seems rudimentary... I've been doing UX work for just a bit of time and I have typically provided wires that gives the designer guidelines, but offers them creative ...
1
vote
1answer
115 views

Showing Bootstrap Buttons on mobile device [closed]

I am interested in learning about designing for mobile websites. Right now, I have a webpage with a bunch of bootstrap buttons ---------- Header --------- ...
1
vote
2answers
98 views

Name of the interface?

What is this kind of interface called? Moreover , it'd be a great help if someone tells me the application/environment which would help me implement such kind of interface best.Carefully note the plus ...
0
votes
1answer
86 views

Responsive design approach

Mostly I am using bootstrap for my website and I keep it pretty responsive. However some of my pages are hard to adjust with media queries. I have a size limit 769px for mobile. Is it a acceptable ...
0
votes
0answers
48 views

Responsive layout standard for table layouts

Currently I am working on Enterprise layout wherein material design cards that are pretending like tables. I started of UX design for first hand screen flow with 1280 x 1024 to showcase how the ...
0
votes
0answers
39 views

Responsive complex page - compare bundles and detailed bundle

I'm working on a product page. User can choose between 3 bundles and each of those can be customizable. I'm wondering what is the best UX approach to show these data and minimize the UI complexity. ...
1
vote
1answer
96 views

Is there a best practice for alignment of nav bar content - with grid or not?

Looking at various site's nav bars I see some sites spread their content wide across the bar, anchoring their logo to the far left and login to the far right, navigation in the middle (examples: ...
1
vote
1answer
122 views

Responsive design for a suggestion/toolbar

In this software a user can enter a query and the system produces an image or an output. Attached to the output is a toolbar that modifies The output based on user input. however with the current ...
14
votes
5answers
1k views

Why do very few e-commerce websites use full-width and fluid layouts?

Looking at some of the top e-commerces websites (Flipkart, Etsy, Amazon, Bestbuy) , I could find that only amazon utilizes a full width layout, and that too isn't fluid. While I understand the ...
3
votes
3answers
217 views

Responsive sidebar sub-navigation

We're working on a new, responsive version of a large website and need to support the main navigation and sub-navigation that changes based on the department. Below is a mockup of how we are ...
0
votes
2answers
159 views

Two Color Progress Indicator

I'm interested in any examples of a two color progress indicator. The user will be looking at a web page consisting of a list of reports that are a combination of approved reports and reports pending ...
0
votes
3answers
174 views

Grid with cards

I want to create grid withs cards that looks like on photo, every card have text in it. What would be better to make , all square or rectangular cards ?
1
vote
1answer
143 views

What's the best way to implement a search bar in the mobile view of a responsive site?

I'm currently working on a site that is content heavy and want to add FAYT (find-as-you-type) search. In the desktop view I have a regular search field in the top right hand corner with a magnifying ...
2
votes
1answer
84 views

Best way to stop a navigation from wrapping by changing design?

Didn't know whether this was a UI or a UX issue but I have been asked to change our header section so that the navigation items don't wrap to a second line when the user views our site on a smaller ...
2
votes
0answers
84 views

Any good presentation examples on why minimal + responsive design is a good approach for a website redesign? [closed]

I am making a presentation on responsive design and minimal design. Would be catered towards more elderly or less technical coworkers and stakeholders that do not yet know about this type of design ...
3
votes
1answer
130 views

Very complex responsive navigation

I'm working on a redesign project that has a complex navigation, especially in the case I have to make it full responsive. There is a navigation bar to go to several section of the site. Each section ...
10
votes
5answers
734 views

Tabs design pattern, solving for “N” tabs

I've seen many design patterns that help solve different content presentation issues by leveraging "tabs". Assuming I do want to display grouped content on a page (complex content or simple) and ...
6
votes
2answers
189 views

Why should I use em, and not % for fonts?

If ems essentially give you a result that is a percentage of the base font, what advantage is there to using it, rather than % for font sizing? I have looked around, and haven't really seen anything ...
41
votes
5answers
3k 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 ...
1
vote
1answer
180 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 ...
1
vote
3answers
163 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 ...
0
votes
3answers
376 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 ...
0
votes
2answers
142 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 ...
1
vote
2answers
296 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 ...
2
votes
2answers
166 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 ...
0
votes
2answers
578 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 ...
1
vote
3answers
81 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 ...
1
vote
2answers
263 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 ...
1
vote
2answers
69 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 ...
1
vote
1answer
52 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 ...
0
votes
3answers
125 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 ...