Tag Info

Hot answers tagged

121

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


45

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


38

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


26

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


23

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


19

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


18

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


18

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


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


15

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


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


13

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


13

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


13

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


13

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


12

Good question! As always when it comes to small screen experiences you will have to focus on the core functionality. Ask yourself which columns could be removed and still present a meningful table and let the user select the additional columns that he is interested in. This solution might help you: A Responsive Design Approach for Complex, Multicolumn ...


12

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


12

If you use almost any desktop application - the menu bar will always be visible. e.g. if you Page Down in Microsoft Word the toolbar doesn't disappear off the top. The fixed navbar is replicating that functionality.


12

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


12

As far as I am aware there aren't any industry standards. From experience they seem to differ slightly depending on who you talk to. Smashing Magazine recently did a good article about logical breakpoints for responsive design. Understand what resolutions the potential users of the system will be using. This should help inform your break points. My point ...


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


11

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


11

The answer you are looking for is the difference between responsive and adaptive web design. Simply said, responsive is where you can resize your browser window and the website/app resizes with it. Adaptive is exactly as you said: designed for a couple of viewports, so maybe for an iPhone, a tablet, and 15" computer screen. However, adaptive might not be ...


10

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


10

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


10

Should I advise the client to do away with so many modals and hover windows if we go the Responsive route? I'd restate that question as: Should I advise the client to do away with so many modals and hover windows? And the answer to that is, usually, yes. But not always. If it's a very complex desktop-centric site, maybe modals are a good option ...


10

Paddi MacDonnell wrote an interesting article on the hamburger menu and related mobile-first approaches to design a few days ago: It outlines some of the problems of hamburger menus, and concludes with the observation that the device is something of a way to brush the navigation of a complex app under the carpet of the hamburger icon (my carpet analogy, not ...


9

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


9

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


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



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