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
100
votes
4answers
36k 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 ...
81
votes
6answers
130k 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 ...
67
votes
8answers
17k 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 ...
64
votes
7answers
91k 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 ...
61
votes
11answers
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 ...
51
votes
12answers
79k 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 ...
44
votes
5answers
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 ...
41
votes
8answers
45k 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 ...
30
votes
3answers
109k 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/...
29
votes
4answers
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,...
29
votes
7answers
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 ...
26
votes
5answers
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 ...
24
votes
2answers
33k 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, ...
23
votes
9answers
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 ...
21
votes
5answers
13k 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 ...
21
votes
9answers
5k 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 ...
20
votes
6answers
140k 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 ...
20
votes
4answers
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 ...
17
votes
5answers
5k 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 ...
17
votes
2answers
4k 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)...
16
votes
5answers
7k 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 ...
16
votes
3answers
920 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 ...
16
votes
5answers
13k 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 ...
15
votes
3answers
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 ...
14
votes
1answer
14k 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 ...
13
votes
5answers
9k 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 ...
12
votes
4answers
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 ...
12
votes
8answers
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 ...
12
votes
1answer
10k 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 ...
12
votes
5answers
3k 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)...
12
votes
3answers
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 ...
11
votes
5answers
5k 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 ...
11
votes
4answers
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 ...
11
votes
3answers
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 ...
11
votes
2answers
4k 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 ...
11
votes
4answers
466 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 ...
11
votes
1answer
274 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 ...
11
votes
4answers
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 ...
10
votes
3answers
2k 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 "...
10
votes
4answers
1k 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 ...
10
votes
2answers
24k 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?
9
votes
2answers
4k 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 ...
9
votes
3answers
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 ...
9
votes
3answers
4k 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 ...
9
votes
3answers
855 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 ...
9
votes
2answers
4k 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 ...
8
votes
7answers
30k 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?
8
votes
4answers
2k views

Best way to indicate that a image gallery can be swiped left-right on mobile/tablet

I'm in the process of adding responsive design to our website and one of the main features that users interact with is our image gallery (we are an editorial-based website). At normal viewport sizes, ...
8
votes
8answers
2k views

Icons vs. Dropdown for primary mobile navigation

I am working on a responsive design in which there are 5 selections in the primary navigation. I'm thinking because there are only 5 I could use icons instead of a dropdown for the primary navigation. ...
8
votes
6answers
430 views

What are the strengths and weaknesses of dynamic responsive typography?

By dynamic responsive typography, I mean a system where the type changes in real time based on an external attribute of the environment or the user, without the user explicitly setting it. Here is an ...

1
2 3 4 5
9