Hot answers tagged responsive-design
112
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 ...
18
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
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
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 ...
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
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
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
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 ...
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
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
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
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.
...
7
First option, if you do not wish to change any other parameters, you can implement a horizontal scroll bar. It's not the best option, but, it does get you to show(?) the entire table with consistent size without exceeding the 940 pixel width.
Second option, make the columns movable. You wrap/crumple up the out of bound columns so as they only expand when ...
6
To my knowledge there is no convention to communicate this. When I've developed mockups where I want to show static widths I've used the same approach which is also used when showing widths in blueprints.
download bmml source – Wireframes created with Balsamiq Mockups
Experience has showed me that this is understood well and the viewer has ...
6
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 ...
6
I used to assume most Windows users don't resize their browser; that it'd be maximized and that's that; however, from some studies that I've done over the years, more and more people are not maximizing it for a number of reasons (Windows 7/8 Snapping, hi-res monitors, task changing using a mouse are the top 3). Also, a number of college students that I've ...
6
This is going to depend on what content is within each of those areas, and how big a priority you want to give those items. However a rule I use with Responsive Design is based on screen widths.
Therefore the first step is to determine which content elements take up the whole screen width. In your example there are two elements taking up the whole width ...
6
To answer the last part of your question first: how uploading an image works on different devices depends largely on the support for and implementation of HTML5 features such as the File API and file form input fields. On iOS, for example, a prompt appears asking whether the user wants to take a picture with the camera or upload an existing file (see this ...
6
This is a difficult one to answer but there quite a few myths out there. For example the previous answer says...
"For example, you may want people to use the mobile site to view all the products, but not necessarily to purchase or rate/review the products."
This is based upon the idea that people browse products but don't go through the whole checkout ...
6
Firstly, mobile first and responsive don't present an either / or choice.
Mobile first is a methodology that you use to approach your design, where you constrain yourself to the limits of mobile. After working that out, it is much easier to modify that design for pc - usually with a better, more focused end product.
Responsive design is a behaviour ...
6
Why don't you try the usual responsive solution? When displaying the images on mobile, switch from a side-by-side to a stacked view. The same images are there which the web users see and they can click whichever one they want.
Regarding the issue of clicking image to visit page: The visual cue problem is similar on both platforms. You can add a hyperlink or ...
6
Websites typically don't alter their font based on display size, and I don't think you should, either. Why not?
Other websites don't do it. Your site's behavior will be unexpected.
You can't really do it accurately. There are at least three key variables here: screen size, screen resolution, and distance of viewer from the screen. You only know screen ...
5
You could replace the arrows with a simple swipe control, implemented via JS. You could hint that more pages are available by providing 'peeks' of the two extra pages outside the viewport (so it appears the far edges of the previous and next images are just within sight).
The big advantage of the swipe control is that it gives the user a large touch area to ...
Only top voted, non community-wiki answers of a minimum length are eligible
