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.

Filter by
Sorted by
Tagged with
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 ...
Nick S.'s user avatar
  • 183
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 ...
HNeue's user avatar
  • 31
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?
maali's user avatar
  • 21
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 ...
Mritunjai Kumar's user avatar
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 ...
Iris Green's user avatar
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 ...
paul23's user avatar
  • 207
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? ...
Runnick's user avatar
  • 1,731
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-...
Michelle's user avatar
  • 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 ...
Ben Davis's user avatar
  • 123
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 ...
Michael Riley - AKA Gunny's user avatar
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 ...
changetheworld's user avatar
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?
Shivam Pandya's user avatar
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 ...
Tony Bolero's user avatar
  • 7,294
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. ...
Benny Skogberg's user avatar
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 ...
user35153's user avatar
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 ...
Anon's user avatar
  • 463
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 ...
Raye Keslensky's user avatar
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 ...
Alec Schmidt's user avatar
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. ...
iuuiuui's user avatar
  • 23
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?
Kelly's user avatar
  • 21
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 ...
Jeff S.'s user avatar
  • 223
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 ...
Mojimi's user avatar
  • 95
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 ...
Ben Racicot's user avatar
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 ...
nuuse's user avatar
  • 21
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,...
alessadro's user avatar
  • 175
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 ...
user48147's user avatar
  • 121
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 ...
Nodnin's user avatar
  • 642
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 ...
Spicerjet's user avatar
  • 1,138
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 ...
Amit Jain's user avatar
  • 3,899
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 ...
DasBeasto's user avatar
  • 15.3k
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 ...
Harsha M V's user avatar
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 ...
eeklipzz's user avatar
  • 411
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 ...
itayk's user avatar
  • 21
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) ...
horen's user avatar
  • 121
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 ...
Jerry Huang's user avatar
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 ...
user28168's user avatar
  • 101
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 ...
Hoops Martin Jr. 's user avatar
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 ...
Dodo13's user avatar
  • 35
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 ...
vaibhav Kothari's user avatar
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 ...
lstefani's user avatar
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 ...
joaogdesigner's user avatar
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 ...
I am the Most Stupid Person's user avatar
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 ...
Alex Rivera's user avatar
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. ...
Jitendra Vyas's user avatar
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 ...
Prasanth K C's user avatar
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 ...
Panagiotis's user avatar
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 ...
user avatar
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 ...
Bharat Sati's user avatar
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....
Runnick's user avatar
  • 1,731
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 ...
Harshith's user avatar
  • 1,731

1
3 4
5
6 7
10