143

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 ...


73

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 ...


41

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 ...


33

What is the smallest screen size you design for 320px But, as others have answered it, for best results you actually need to measure your audience and consider how much resources you want to pour into making your site/app work for that <0.1% of users below your determined screen-width threshold. That said however, unless you are running an obscure site/...


31

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. ...


31

First of all, since it's your site, don't guess; know! It's very simple. If you haven't already, add Google Analytics to your site (it's FREE). From there, you can actually see what Mobile Device, Browser, OS, Screen Resolution, etc. that your visitors use. Lastly, after you have what you consider enough data, make your decision on what resolutions you ...


30

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 ...


30

Web design has always been about choosing an audience you care about. You could care about every single browser in use and either rely on the minimal set of common functionality or use progressive-enhancement/graceful-degradation techniques to take advantage of modern functionality where it's available. The later approach takes much resources. Personally ...


23

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 small ...


22

Let me add a late answer: after the content has loaded, do not let rotations trigger breakpoints. If the user rotates the device accidentally, their most immediate task is to reorient themselves and re-find the content they were viewing or reading at the time of rotation. But a breakpoint trigger, the user is suddenly presented with an interface they don't ...


21

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 ...


21

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 ...


19

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 The basic point? The desktop user interface platform differs from the mobile user interface platform in ...


19

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 ...


18

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 ...


17

Responsive Design is a design philosophy where in the design of the system (the representation and the layout) responds/adapts depending upon the layout of the device. The primary reason to keep your design responsive is to increase the reach of your application to a larger user base using an array of devices. Improving Usability and accessibility: A ...


17

Had to deal w/a similar issue last year. Our task, which we couldn't change, was to convert an 11-section, 120-question "learning style" survey PDF into an interactive quiz. The original PDF is a daunting 10-pg list of questions & checkboxes, much like your example, which no student really wants to complete. Our solution was to break it up by ...


16

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 ...


16

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 ...


16

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 ...


16

Visualize hierarchy You have an opportunity here to maintain flexibility while emphasizing the known priority of data elements and adding some scan-ability and visual interest. The nice thing about card layouts (compared to tables) is that you can use the space to lead your users through the expected flow. Your whitespace is a blessing! I might even add ...


15

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 ...


15

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 ...


14

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 ...


14

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 ...


14

I have used the following listing to justify a minimum of 320 wide: https://viewportsizes.mattstow.com/ While it's not completely exhaustive, it's expansive enough to make the point that there are only a few phones in the last few years that have <320px screens, and I have never had anyone argue that the number isn't de minimis. If you're doing this ...


13

The current trend is to design breakpoints with content in mind. At some width the content will appear either too squished (or stretched out) and that's when a breakpoint should be used to rearrange things, even if it doesn't correspond to a common device width. The content should look well laid out at any device width (within reason, no need to fill ...


12

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 ...


12

Below are the sizes I like to design for; not all of these may be ideal for your needs, however I find this tend to provide the cater to the most common configurations of devices out there. When I refer to device width, it is in "device independent pixels" :P 1024px This is the typical device width of 1:1 scale tablet in landscape mode, which also lends ...


Only top voted, non community-wiki answers of a minimum length are eligible