Hot answers tagged responsive-design
109
Yes, you should allow Zooming.
I have changed my mind on this from having worked on RWD projects in the past. Originally my opinion was 'people only used to zoom on mobiles because the site wasn't designed to work on a mobile, but that's not the case with a well designed RWD site' however I changed my opinion, partly from some user testing that was ...
34
The short answer is: if you already account for 6 different mobile screen resolutions, you should also account for many large screen resolutions - keep things consistent.
The long answer: You're over-complicating this. There're 28 "standard" resolutions and creating a dedicated layout for all of them takes too much precious time. Instead, you should follow ...
24
If you building a responsive site that has a couple of trigger widths (one version of the page at 1028px, one at 700px and one at 320px (with flexible widths between those trigger points of course) I suggest you work with two versions of the wireframes. One which is as detailed as usual and one that only contains the layout blocks. That way you could ...
18
Yes, you should allow users to escape it.
The Boston Globe redesign was handled by Ethan Marcotte, who wrote the book on responsive design. Combined with the CMS nature of the site makes it perfect for deployability, usability, and flexibility concerns with responsive designs.
Each viewport has to morph content to promote, demote, and generally rearrange ...
17
Personally I'm a supporter of sites with a mix of the two.
Fonts should keep the same size both in landscape and portrait. It should merely be distributed differently depending on the current screen width. As you've also showed in the mockup for A.
I feel that also scaling the text is like surrendering to a notion that "-ok, we know the text is very ...
16
As Kyle Schaeffer put it:
You should only disable the zoom feature if it enhances users’ ability
to consume content on your site. If you’ve formatted your design
layout so that users don’t need to pan or zoom, the zoom feature
actually impairs the user from navigating your content (which only
needs to scroll vertically). If you’ve incorrectly ...
15
This is delicate, and should be a sound judgment by the designer. There is no right or wrong, neither is there a convention (yet) to rely on. But there are a few things to consider, like zooming in just widening the page, which I feel is useless. If I want to zoom I can snap-in on the text getting it in a more readable form (both in Landscape and Portrait ...
14
The main difference is that Fluid Layouts (also called Liquid Layouts) are based on proportionally laying out your website so elements take up the same percent of space on different screen sizes, while Responsive Design uses CSS Media Queries to present different layouts based on screen sizes/type of screen. For some examples of both kinds of design, see ...
13
The ability to do responsive design is fairly recent and, in many aspects, unavailable in any version of Internet Explorer which is always years behind every other browser. Many properties to implement it work well in any other browser but were unavailable in IE until IE10 or, sometimes, IE9. So writing code that works in modern browsers will still require ...
13
Sometimes different content and structure is desired for a mobile site, not just a different layout and styles. The reasons for this approach are nicely laid out in Jakob Nielsen's article here:
http://www.useit.com/alertbox/mobile-vs-full-sites.html
FWIW there has been significant push back against Nielsens' article by proponents of the single responsive ...
12
Though the left and right icons would give information that you can continue scrolling, another option is use a layout where only part of the images are visible and the user will have to scroll to the right to see them as given below:
Another approach which I am not a fan of would be to use a horizontal scrollbar at the bottom which informs the user that ...
12
Other than the answer provided by @icc97, a fixed navbar allows users to quickly switch to another page without having to scroll all the way up.
This is only exceptionally useful when your page contents may be lengthy (e.g. infinity scroll, blogs or articles) and your users browse through many pages on your site. Facebook, Mashable, ReadWrite and ...
11
Here are some other resources:
Opera TV Styleguide
Interactive Television Design by BBC (this one is made for former IP-TV tech called MHP, but it goes into specific technical details of TV-Screens and how to design for it ie. typosize, screensize)
Several rules can improve legibility on screen:
Body text should not generally be smaller than 24 ...
10
There are different approaches to device oriented design, and you can implement one of several design patterns to choose from. The first one that comes to mind is the fluid design, which (simply put) just reorganize the elements to a better view. Some, less important elements, are hidden as the screen width gets narrower and vice versa.
Next is the ...
10
Instead of designing your UI for a single resolution, you should design it to be resolution-independent. Take a look at how this is handled in Android:
http://developer.android.com/guide/practices/screens_support.html
The resolution you are using (320x480) is a typical MDPI resolution, so you could basically continue using it, as long as you deliver your ...
9
I recommend checking the guidelines given by Google with regards to designing for Google TV. To quote them:
When designing a web page for TV, the viewable area should display less information overall, and what's there should focus on a confined
set of tasks (even consider performing their desired task
automatically or select by default). Try to keep ...
9
Three big issues when you're considering how to deal with content on mobile devices, especially if you're trying to figure out how to re-prioritize content for different screen sizes or device capabilities. I've been calling this adaptive content, as a partner to adaptive design or responsive design.
How is the content written? Truncation might work... if ...
9
Gracefully degrade your subnavigation or drop it by reiterating its contents on the index pages.
It's true. Just look at the evidence below. Two great examples of responsive web design are Smashing Magazine and The Boston Globe. Ethan Marcotte himself was involved in the Boston Globe redesign.
Smashing Magazine: Drop the Subnav
Note in these screenshots ...
9
But UX point of view no end user going to re-size and view as
mobile/tablet.
What makes you think this? People resize browser windows all of the time.
Cant we just disable media queries if desktop browser, what are the
advantages of not doing so.?
What are the advantages of disabling them? It should make the experience better. There doesn't ...
9
The resolution that you design for depends on the resolution that your target audience will be using. Sometimes you know this in advance, but if not, you need to try remain flexible within a set of resolutions.
This is one of the reasons that responsive design is so useful. You need to design without a fixed resolution in mind, but design in a way that ...
8
I think the decision between a single responsive site vs. multiple sites targeting different devices comes down to whether or not you are following LukeW's Mantra of 'design for mobile first'.
If you're designing for mobile first, then it's almost trivial to reconfigure the layout/flow to also accommodate desktop use. There are many other advantage as ...
8
Let your content dictate your decision, not possible devices.
Will the site be easier/better to use if you created a larger version or will it just be bigger? If the answer is yes, then how much effort is required to do so and what percentage of users will be able to take advantage of it?
Also if you decide to make the additional version, consider that the ...
8
Mobile first means that you start your design process off by designing for mobile. Once you have that done, you can easily modify the design for pc.
The main reasoning behind this is that if you voluntarily constrain yourself to mobile, you will be forced to make decisions about what is really important, and what you need to focus on. By doing that, you ...
8
Consider opportunity for better IA:
Instead of just thinking how one could show 150 or even 50 menus on mobile page, I think first of all the efforts should be directed for better information architecture.
Ideally it should be identified by users (Card sorting) but at some level (considering experience and domain knowledge) designer and stakeholders can ...
7
You can't really make a wireframe for something like that.
The best way to show a proof of concept of what layout/UI you intend to create would be with a lightweight HTML prototype. That way you can implement some basic responsive features like liquid layout and alternate designs for different screen sizes just by using basic CSS. If you're competent at ...
7
It sounds like you're taking a purely information architecture approach to the problem by trying to fit your complex navigational structure into a form factor that won't be able to support it. The reason you're having trouble is because the form factor is pushing back; it's not meant to deal with navigation like this.
Take a step back and look at what ...
7
Based on your image above, I would suggest something similar to the mockup below. For a pure mobile (smartphone) I personally believe that you need to reduce the number of images that a user might have to download only to help save on their initial bandwidth. For Tablet user I restored some of the images because of the screen size, it really helps to give ...
7
For the most part the pros/cons of this come back to the classic Adaptive vs Adaptable interface argument, where Adaptive interfaces automatically adjust based on user interaction, and adaptable interfaces allow users to manually tweak them.
A problem with this in particular is that text size is an accessibility issue. Not everyone has the same eyes, so ...
7
You have two ways out of this situation:
Option 1: Group the data, so that instead of presenting data for row 1 in 10 columns, you actually use 1 column with the data printed out in paragraphs, e.g.:
John Doe
Name: John
Surname: Doe
Email: johndoe@johndoe.com
Phone no.: 1234567890
This data usually would be split in 5 columns on bigger screens.
...
6
The goal in designing any artifact is to make the design as useful and satisfying as possible. If you find out that you beaked a convention or two along the way is subordinate to the ultimate goal of usefulness and satisfaction. The goal can never be to break the convention in itself.
Consistency is key but that is within the domain of the particular ...
Only top voted, non community-wiki answers of a minimum length are eligible
