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.
455
questions
2
votes
3
answers
1k
views
I have a large list (100+) of items to be listed on a landing page. What's the best way to do this?
As the title suggests, I need to list over 100 items on a landing page. I'm hoping to make the page as responsive as possible. I don't think a table is the best option, and I'd also like to stay ...
2
votes
5
answers
4k
views
Responsive Websites on tablets: portraits or landscape first?
I'm designing a responsive website for my master degree thesis.
It's my first experience in this field, so I'm wondering, when I'm designing for tablets I have to consider the portrait or the ...
2
votes
1
answer
52
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?
2
votes
1
answer
55
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 ...
2
votes
3
answers
2k
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
3
answers
181
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 ...
2
votes
2
answers
523
views
Remove swipe action from responsive carousel on desktop?
I have a carousel on the site similar to Airbnb. It can be swiped on mobile as expected:
On desktop though they add arrows and remove swipe.
The question is should you remove swiping on desktop? ...
2
votes
1
answer
3k
views
Best practices for filter in responsive web app?
I'm working on a responsive web app.
When a user searches for something they have the ability to set filters. Would it be best to keep them in the context of the page with a drop down/accordion-...
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 ...
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
1
answer
693
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 ...
2
votes
3
answers
190
views
Is Responsive Design good for web based software? [duplicate]
I am developing an email software/service similar to gmail and thunderbird, but I am wondering if it is a good idea to have a responsive design or also have apps for different devices?
2
votes
3
answers
401
views
Good touch-based equivalent to the hover tools pattern?
When you have a long lists of items and you want to let the user interact with one of the items contextually - a common solution is to use the hover-tools pattern in a desktop browser environment. The ...
2
votes
2
answers
761
views
Responsive Intranet Design - Changing order of elements between views?
I'm currently implementing a responsive design on an intranet, which has the following view in desktop width equal to or greater than 1024 px. The tablet view is anything less than 1024 px width. ...
2
votes
3
answers
208
views
Adapt site to be responsive [closed]
I need to adapt a web site to be responsive. I used bootstrap 2.3 for the navigation bar, carousel slide, thumbnails gallery, etc.
My question is how do I adapt the site shown in the picture to be ok ...
2
votes
2
answers
2k
views
Should I replace radio buttons with buttons on a responsive form?
I'm designing a responsive form and wondering about the use of radio buttons.
It would make a lot more sense for me to use buttons on mobile forms e.g.
are you married? [YES] [NO] ...instead of making ...
2
votes
3
answers
373
views
Navigation for a Web Comic - Icons, or Thumbnails?
The typical webcomic navigation is usually:
First | Previous | Next | Last
Which is about how my comic's current navigation looks, give or take some wingding icons for good measure:
There's plenty ...
2
votes
2
answers
2k
views
Responsive Layouts: Can they respond to *on-screen* keyboards? (i.e. Tablet / Mobile keyboards)
This question is fairly simple, though I'm not sure the technology exists yet. I'm building a responsive version of a website to be optimized for use with a tablet device. This is one challenge ...
2
votes
2
answers
2k
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. ...
2
votes
2
answers
70
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?
2
votes
3
answers
1k
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 ...
2
votes
1
answer
349
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 ...
2
votes
2
answers
2k
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
2
answers
444
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 ...
2
votes
1
answer
3k
views
Best way to show tables on mobile and tablet common dimension
I have a visual problem that breaks usability in my opinion.
I'm using Twitter's Bootstrap V.3 and I have a web form.
I must show a table with this information:
City, Address, Latitude, Longitude,...
2
votes
1
answer
2k
views
Full-width dropdown vs left sidebar on mobile
I'm in a fairly early stage of creating a responsive Wordpress theme. I have a basic fixed header bar and I'm working on a left-hand navigation panel right now. I'm taking some inspiration from the ...
2
votes
1
answer
281
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 ...
2
votes
3
answers
257
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 ...
2
votes
3
answers
3k
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 ...
2
votes
4
answers
848
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 ...
2
votes
2
answers
523
views
Responsive Grid View with Hover layer
I have a grid layout which has an hover state which reveals information that are crucial as below.
The Content of each Grid Item
Dish Name
Dish Photo
Rating
Chef Name
Chef Photo
Chef Location
...
2
votes
1
answer
204
views
How do I design a web page to use, but not abuse parallax scrolling?
There seems to be a lot of hype around parallax scrolling now-a-days. I'd like to know if there is a best way, or at the very least, a good way to design a web page that uses parallax scrolling, or ...
2
votes
3
answers
673
views
Responsive design for big resolutions
I would like to design a one-pager site which will be responsive and will be presented well in huge resolutions, such as 2560 width. One method of doing this is design the site with a maximum fixed ...
2
votes
2
answers
824
views
How to make fluid web site consistent
I am redesigning my fixed-width web site to be (more) responsive and ran into some problems:
For one, I really like using a fluid width layout since a lot of visitors are using my web site in (much) ...
2
votes
3
answers
681
views
How can I display really long content pages on a responsive site?
What are some of the better UX techniques to deal with really long static content pages? We are talking about 4-5 printed pages on a single URL of a site (meaning that if you were to print these ...
2
votes
4
answers
6k
views
carousel in responsive site - should I keep or remove the navigation arrows?
I'm designing a responsive website and I have a question about the carousel element I have in the site:
the carousel has right and left arrows < content_content_content > that reveals previous and ...
2
votes
2
answers
237
views
Responsive vs Full Mobile Solution... with a twist.
Most people see the pros of responsive design being one codebase with a variable visual layer via CSS media queries, and the pros of an adaptive, mobile specific site being able to use a mobile ...
2
votes
1
answer
168
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 ...
2
votes
2
answers
405
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 ...
2
votes
1
answer
104
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
3
answers
1k
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 ...
2
votes
1
answer
130
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 ...
2
votes
1
answer
1k
views
Responsive secondary and tertiary navigation
I'm working on a responsive Product Customization feature for an e-commerce website that has a hamburger primary nav, but will also need a secondary navigation for selecting the main Customization ...
2
votes
2
answers
112
views
How to show this long input with prepend in Mobile which allows user to choose url name?
I'm working on a responsive website where I need to inform users that information he will fill in input will be used to create url for his campaign he is going to create.
That input looks like this.
...
2
votes
2
answers
2k
views
Better position to place slide in/out icon for a horizontal slide menu in responsive theme?
As my attached screenshot, I have a primary menu set at the top that scrolls horizontally even in smaller device-width. The items in secondary menu set at the left sidebar will change according to the ...
2
votes
1
answer
784
views
Responsive web vertical scrolling design and elements [closed]
I have been trying to implement a vertical scrolling site that is also responsive.
For that purpose, I have not used a responsive grid, only media queries. But I do have some blanks to be filled and I ...
2
votes
1
answer
80
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 ...
2
votes
1
answer
112
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 ...
2
votes
1
answer
1k
views
Hide content under toggle on mobile, show on desktop by default
Is there any design pattern to hide content under the toggle / accordion on the mobile and to show it fully on the desktop?
I have a list, that I'm hiding on small resolutions and showing on desktop....
2
votes
2
answers
285
views
How Far is it recommended to show large table content on mobile browsers [duplicate]
Is it good practice to show all content that is in desktop version to mobile browser.
Can mobile browser handle this kind of data,With low bandwidth.
How far is it legible to read with that huge ...