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
100
votes
4
answers
38k
views
Should users be able to zoom in a responsive webdesign?
When it comes to a responsive design: should users still be able to zoom in or out?
We are currently working on a responsive design and one of our testers found it awkward that he wasn't able to zoom ...
- 1,324
92
votes
6
answers
176k
views
What is the smallest screen size you design for [closed]
I'm looking to make my website responsive, however this is my first foray into responsive design, and I'm pretty clueless at the moment.
I have no idea what the current state of play is with regard ...
- 1,015
69
votes
8
answers
20k
views
Responsive Web Design - what should happen when the mobile device is rotated?
Currently, the standard behaviour for viewing web pages on a mobile is that:
If viewed in portrait the text is smaller because the width of the device is small and the whole page width needs to fit ...
JonW♦
- 37.2k
67
votes
7
answers
97k
views
What is the exact difference between fluid and responsive design?
What is the exact difference between fluid and responsive design?
I am bit confused about fluid and responsive design. Fluid is the one where we give width in percentages so that design will look ...
Reena
60
votes
11
answers
6k
views
Should users be forced into a responsive design (without the ability to opt out)?
There is nothing worse than getting automatically redirected to a mobile version of a site, and not having (or not easily finding) a "view normal site" link. It's not just that the mobile site is a ...
- 6,264
59
votes
12
answers
85k
views
How should large table columns be handled on a responsive design?
Related to This Question, I'm interested in what I should do with a responsive design theme where the users have control over the columns which are displayed in a tabular, data rich page. Users are ...
- 807
45
votes
8
answers
51k
views
Responsive Design - How to deal with wide HTML Tables
I am doing a proof of concept with responsive design. One web page that I am modifying has some extremely wide tables. I really don't know how to shrink the tables width so there is no horizontal ...
- 553
44
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,435
31
votes
3
answers
122k
views
responsive website min-width?
In my experience most responsive websites don't have min-widths so when resized to a tiny size (say a 100px window) the content screws itself up and becomes illegible.
example: http://alistapart.com/...
- 457
29
votes
4
answers
4k
views
Responsive design: Should I go bigger than 1024px?
I have 6 responsive variations for a web app, from 916px to 320px wide. While running some internal tests, 2 out of 6 people mentioned that they would prefer if the app responded to bigger screens too,...
- 3,069
29
votes
7
answers
35k
views
Responsive Breakpoints?
Twitter Bootstrap uses these break points for responsive design:
Large Display: 1200px
Default: 980px
Tablet: 768px
Mobile: 480px
A client said they are using 1280px for their Large Display ...
- 960
26
votes
5
answers
2k
views
Why is that the most popular sites don't use responsive design (and choose to use a mobile version instead)?
I think I don't have post screenshots. Most popular sites don't have responsive design (in fact I haven't seen any single one that does): Facebook, YouTube, Quora, Twitter, and the list goes on. With ...
- 1,595
24
votes
3
answers
45k
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,676
23
votes
5
answers
5k
views
Mobile friendly way for explanation why button is disabled
For desktop browsers the title attribute is an easy way to explain why a button is disabled:
<button disabled title="this is disabled because ...">disabled button</button>
But ...
- 403
23
votes
9
answers
8k
views
What techniques can I use to wireframe sites with responsive/fluid layouts?
How do you make wireframes for responsive or fluid layouts? Typical wireframing techniques are static and aren't well suited to showing how designs scale. What techniques exist to capture the dynamic ...
- 4,872
23
votes
9
answers
6k
views
Responsive web design Vs Separate website for Mobile
Responsive Web design is buzzword these days. which means to create a same website and optimized for all devices.
There are also some website which convert the desktop websites into Mobile website
...
- 4,872
22
votes
5
answers
15k
views
How to adapt your website for TV browsers?
Many home electronic brands have presented new television sets with built-in browsers and apps. Even though not many of these have enjoyed widespread adoption, the responsive web design movement talks ...
- 7,294
20
votes
6
answers
141k
views
What is the generally accepted resolution for mobile design?
So, I am a week and a half into a new project, and I've been designing for a resolution of 320px * 480px. I am new to the game and I've just found out that that resolution is too small considering the ...
- 303
20
votes
4
answers
24k
views
How should modal popups and tool tips be handled in responsive websites?
I am reviewing some website wireframes from a client and have decided to make the new site responsive. I've had pretty good luck so far with responsive theming and design from a few past projects and ...
- 303
20
votes
2
answers
6k
views
Why is the Google Search Results page not responsive? [closed]
As every web developer/designer, I read many articles about why responsive web design is important. We are also often told, that you can learn a lot by observing the UI (and optionally the code itself)...
- 303
19
votes
5
answers
19k
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 ...
user108483
17
votes
5
answers
6k
views
What's the reason behind fixed (position) navbars?
It's becoming almost customary for responsive designs to have fixed-position navbars, where the navbar is fixed to the top (usually, or even bottom sometimes) of the viewport of the browser.
Don't ...
- 415
17
votes
4
answers
8k
views
Why do very few e-commerce websites use full-width and fluid layouts?
Looking at some of the top e-commerce 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 ...
- 426
16
votes
3
answers
940
views
Is breaking established web conventions in order to be consistent across multiple devices an unexpected (and therefore harmful) user experience?
As a good working example: The standard convention is for mega menus to appear on hover (see sites such as play.com and next.co.uk).
This fits with Jakob's Law of the Web User Experience which ...
JonW♦
- 37.2k
15
votes
3
answers
4k
views
What does Responsive Web Design actually mean....? [duplicate]
I've gone through with many articles to understand exact difference between Responsive and Fluid web design. But couldn't make my understanding differentiate between these two.
Can anyone help me to ...
- 151
14
votes
1
answer
15k
views
What is a good alternative to drop-down menus for site navigation on touch-screen/mobile devices?
We're in the process of redesigning our website, and one of the design goals is to make the site more mobile/tablet friendly.
Our current site is very large, and the navigation is somewhat ...
- 241
13
votes
5
answers
10k
views
Responsive Menu that has a LOT of menu items
We have a responsive menu that on mobile just shows the top-level menu items (x8), but on desktop also shows hover dropdowns with service areas within the parent menu item.
The problem is we need the ...
- 133
12
votes
4
answers
8k
views
What does "mobile-first" mean?
So I've been trying to find a legitimate answer to this question for a couple days. I read an interview in Awwwards recent publication Trends Web and Mobile 2013 with the following answer in regards ...
- 223
12
votes
8
answers
4k
views
Web design workflow without Photoshop
There is more and more talk of web designers moving away from the idea of spending an incredible amount of time wireframing and then designing in Photoshop and I wanted to get everyone's opinion on ...
- 221
12
votes
5
answers
4k
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)...
- 1,813
12
votes
1
answer
11k
views
How to use breadcrumbs in a responsive layout?
I would like to use breadcrumbs on my responsive site. Breadcrumbs become less recognisable if the links wrap as the layout is then less recognisable. This creates an issue for my site as the width ...
- 425
12
votes
3
answers
2k
views
Usability testing and responsive web design
What are your take on usability testing and responsive web sites? The flow of page objects, hiding and showing different types of menus or the resizing of objects could have a big impact on ...
- 7,294
12
votes
2
answers
5k
views
Are there any stats on browser widths as opposed to monitor size?
Our analytics across several sites are all showing a marked increase in 1440px+ monitor size, but has anyone seen any stats about what browser size people with large screen tend to use?
Do people ...
- 121
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
11
votes
2
answers
25k
views
What are the ideal widths a website should be designed for on a phone/tablet/computer?
What are the ideal/typical widths that an adaptive/responsive website should be designed for in order to accomodate the most devices possible?
- 503
11
votes
4
answers
2k
views
Responsive Nav: How to show user login status on mobile phone width?
I building a responsive navigation, and I'm trying to get a nice clean simple mobile portrait menu.
In the enclosed illustration, we have a standard nav. The business requirements state that the ...
- 24.6k
11
votes
3
answers
3k
views
Should a UX Designer design in Pixels, Ems, or another unit of measurement?
I'm getting reading to set up my wireframe file for a responsive site. But after reading more about CSS pixels vs. pixels vs. ems, I can't decide how best to design the site and then communicate the ...
- 185
11
votes
2
answers
5k
views
Responsive Secondary Menu
I have a layout similar to the below screenshot. Where the top nav will get collapsed using hte Twitter Bootstrap Nav Collapsed. Also i have a secondary menu below the nav bar on the left hand side ...
- 517
11
votes
4
answers
485
views
Best Approach for Responsive Linked Images from Desktop to Mobile?
I am redesigning a website from the early 90's and trying to make it more "responsive". An issue came up that involves two images on the homepage when viewed on mobile devices. These images are linked ...
- 1,803
11
votes
1
answer
277
views
50% of the site responsive / 50% old vs. the whole site is old
This may sound like a daft question, but here it goes.
Faced with a challenge of turning a really old hand-coded website that is left-centered and feels/looks 1990s into a responsive site (using ...
- 211
11
votes
4
answers
2k
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 ...
- 343
10
votes
3
answers
3k
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 "...
- 533
10
votes
4
answers
2k
views
Using aspect ratios for responsive design breakpoints
I am trying to figure out what the best way to make my site responsive would be. It seems a lot of people base responsive design off screen pixel dimensions, but I feel breakpoints in aspect ratio ...
- 113
10
votes
2
answers
475
views
Why is responsive web development primarily portrait based?
Take a look at the images below. You will notice that the form is responsive when resizing the browser horizontally. However, when resizing vertically, instead of the form trying to re-layout (if that'...
- 153
9
votes
10
answers
24k
views
Is 320px wide designs still relevant? (responsive web)
For a couple of years the smallest design I make for responsive websites is 375px wide. Now our new frontend developer eats my brain that I should provide 320px wide. And even if I will not she will ...
- 91
9
votes
7
answers
31k
views
What is the meaning of responsive design?
I have heard of many websites using "responsive design".
What is this and why should somebody use it?
- 221
9
votes
2
answers
5k
views
Responsive text or truncated text in Mobile devices?
I was reading this very interesting article on the use of responsive text to show only critical content on mobile devices by the use of responsive text to show one version for the web and one version ...
- 43.8k
9
votes
3
answers
1k
views
Should I reduce the number of menu items when showing on smaller devices, or use a 'hamburger' responsive menu?
So I was thinking about how I could make a responsive menu a better experience rather than just firing it into a drop down on mobile that has a hamburger as an icon.
Would it perhaps be a better user ...
- 93
9
votes
3
answers
5k
views
What's the best approach for header/footer in responsive web design?
I'm an IA doing a responsive site, as part of a much larger scale e-commerce site. Our pages are the only responsive parts of the overall site, so 90% of our site will not yet be responsive. Part of ...
- 91
9
votes
3
answers
1k
views
Design guidelines for a multi-screen or multi-device ecosystem
Since the article that was published by Precious about Multiscreen Patterns or patterns for multiscreen strategies back in 2011, there has been an increase in the amount of IoT devices and other ...
- 26.7k