Tag Info

Hot answers tagged

9

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


9

Strikes me as very problematic. Adapting to a device's width is much more useful than adapting to it's aspect ratio. In most cases you wouldn't want the same layout on a 4 inch (diagonal) device as a 10 inch device, even if they have the same aspect ratio. Another problematic issue here is that, when dealing with text on the web, it's too hard to control ...


8

With no further information this how you can improve your form: No abbreviation (they can be obscure for the user) No uncommon or useless symbols like [-] or [:] (useless is useless) Clear understanding of what is selected by default and what can be changed (no ambiguity, no over-thinking) download bmml source – Wireframes created with ...


7

You can use Gestalt principles to argue the textboxes can be confused for the buttons. Similarity Principle: "elements tend to be integrated into groups if they are similar to each other." The text boxes are the same size as the buttons, the drop shadow is in the same location and is the same size, there are icons on the left, and there is text inside each ...


6

I believe the very font you're looking for is Consolas. Consolas is the standard font on Visual Studio 2010 and 2012, and Eclipse Indigo (the standard font on previous versions of both these tools being Courier New 10). Consolas has been described (here) as "...a sans-serif font with the same rounded appeal [as Lucida Console], but nevertheless retains ...


5

You could put them next to each other just like on the desktop version, but keep only one in view. Flipping to the left and right would allow switching between the packages and comparing the features. Be sure to clearly delineate each feature. Additionally, it might be useful to be able to look at a comparison of a single feature across the three packages. ...


4

I think Trello has an interesting solution to this which I have copied to one of my own projects. You can scroll the modal without affecting the scrolling of the interface in the background. The width and position of the modal still lets you see whats behind it which gives you a sense of context. This way you can keep the style of your form elements ...


4

This is less of a 'source code' question and more of a visual design question. The answer is that the default button should be the most obvious/noticeable. One way to do that is positioning: +-------------+ +--------------+ | Default | | Secondary | +-------------+ ...


4

I think it's a great idea, and see no reason why you can't implement it. Responsive design is (still) an emerging discipline, and if you manage to show that aspect ratio gives better User Experience than todays viewport width approach, then you may even effect the future path of cross-device and responsive design. Explore, experiement, implement and test.


3

In my company this is how it goes: Interaction Designers are tasked with conceptualizing, and implementing high fidelity wireframes to give to the visual designer. Wireframes are annotated (this means we specify what certain elements do what, like if a modal pops up, we want it to bounce three times for instance). Once we have all the wireframes annotated ...


3

It entirely depend on your organizational structure as to who would be responsible to transform the psd designs to html/css. But in a typical scenario, a designer is expected to take up their PSD files and prepare a set of image assets to be used in HTML/CSS and also create a specification document defining all styles used alongwith sizes. This ...


3

This isn't a UX question. But... These are simply two different ways to go about it. Contrary to the opinion shared by the other two answers, I say the 1st example is a perfectly valid way to go about it and is sometimes a much better way. The term for it is Object Oriented CSS or OOCSS. The concept is to split your CSS styles into smaller 'bits' that can ...


3

Check your analytics and see what your users are actually using and where the trend is then design around that. Not devices but look at resolution and screen widths The idea of designing around content is a great one, but honestly who gets that level of detail upfront? Most of the time the client still hasn't worked out their content strategy and it's ...


3

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


2

Ultimately, the optimum width and breakpoints for a website depends on the content that it displays. That said, the great part about responsive design is that you can cater towards not only smaller screens, but larger displays as well. You can use a 960 breakpoint, but you can also use 1200, 1400, etc.


2

Functional excess is something you deal with on daily basis, especially as the project gets closer to something I call 'climax' (when Client gets wild and wants to put everything s/he did not consider before - meaning 'additional requirements' rather than errors at the phase of analyzing and planning functionality). Regarding modal size itself, I would say ...


2

Use CSS if at all possible. Setting an image to a fluid width (that is, a percentage) makes it react to its container. However, if you're using one image across multiple viewports, you may run into some challenges. For example, if you are designing for a full width layout and using a 1600px width image, that same 1600px image loads on the mobile view. ...


2

What you need to do is implement a filter, which can display only the entries you want to see at this very moment. There may be a time when you want to see all entries, or filter the other way around. An example of this is the implementation of filter in Microsoft Excel (see image below), but also implemented in web environment especially in e-commerce ...


2

Grid as visual alignment and ordering of blocks not only creates layout structure for more easy content perception, but also creates feel of consistensy and solidness, which partly works on subconscious level. It is hard to express by words, but eyes grasp it quickly. Just compare: The full answer will contain a bunch of words like cognitive psychology, ...


2

I suggest you use a combination of styling and symbol for the three states e.g. Active = normal style, no symbol Deleted = strike-through, recycle bin symbol Draft = italic, pen symbol The symbols help users learn what each style means and also help people that don't notice styling. The styling stands out faster when you are looking at a large list and ...


2

Quite a few applications use a coloured circle with the V icon inside with multiple selection (like in the illustration below). So perhaps consider: Active - a green circle with the V icon. Draft - an orange circle with the ? icon. Deleted - a red circle with the X icon. I would strongly recommend you include a legend in the interface.


2

Not only should you accommodate the user wanting to resize the browser window, but users can come to your website with a variety of browser windows sizes in the first place, so yes your site should be designed to cater for a wide range of different window sizes. HTML is inherently capable of describing logical layouts of web page elements, with relative ...


2

I am a junior .Net MVC developer who is great at nothing but good at everything. Welcome to the club. It can be frustrating at times, for sure. But it seems to serve us well enough. :) I am starting to reach a point where I really want to specialize in something If you have the passion for that one thing, then absolutely go for it. That said, I've ...


2

Twitter and Facebook buttons are intended to be different and it would be against either Twitter's and Facebook's branding guides to make them look similarly/the same. I also think it would be a bad idea to modify the original buttons, since people recognize them because they are the same on every other website - so if you change them, it may happen so noone ...


1

Complex interactions need to be built. The best way to ensure that the interactions meet your expectations is to work with the person developing the presentation layer code. In some situations that is the UX designer, in which case they have the luxury of coding up the prototype direction. In other cases, it's a matter of the UXer working with the FED ...


1

As per my point of view, using a premade grid layout is good if you are planning to develop a site or web application that you want to finish in shorted duration of time as you will exempt yourself from writing all the grids from scratch. As you said, there are many things that are not useful, you can anytime delete them and make code ligher. Using the ...


1

A grid layout can create variable height of content areas with a static width. This is great because you can +/- columns depending on resolution of viewing device. The only downside is that for some types of service/site, a grid layout doesn't make sense. It's hard to answer your question without knowing what you're potentially displaying on the site ...


1

In effects the matter is not strictly related to ux but with the web design in general. As stated by W3C in regards the <img> tag: "The img element must not be used as a layout tool" Images mustn't be used to make structural things like menus. You can use media queries in the css files to define a single class for different screen widths. For ...


1

Your first example of using class names that are descriptive of their styles is a bad practice. Ideally you want to code the HTML in such a way that it can be restyled simply by plugging in new style sheets and without modifying the HTML. This ideal is not often achieved but using class names that describe their style tends to the exact opposite of this ...


1

You could put a distinct border on the field, or on the panel that contains the field (use both border width and colour) then place a key somewhere that shows both the editable and uneditable field stylings. Along with this you could tag it as editable, maybe in the label for the field. Remember that styles associated with uneditable, such as greying ...



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