Tag Info

Hot answers tagged

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


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

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

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

I would say that although it may not be the worst sin in the world, it is probably bad practice. One problem: If you have everything positioned absolutely and the window re-sizes, the page will probably have to run some javascript to resize the elements.


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

Good question. The general rule of thumb is to show the text cursor when a section of the page is expected to be copied. The text cursor provides visual feedback that the user can highlight text or input text. So it should be displayed when the design calls for the user to interact with text. In your example of the tags text, the user really isn't supposed ...


3

If you want to consider users with special visual and/or cognitive requirements, it becomes quite complicated and there's no single answer. The W3C Web Accessibility Initiative's Web Content Authoring Guidelines (WCAG) provide a good starting point. That's probably the single most thoroughly-researched resource on web accessibility, though it's not totally ...


2

The whole point of responsive design is that you don't start to design from the width of your page. The idea of responsive design is that you start design from the components up. Think about what content you want to display, and then design a scaling system. Something that expands and shrinks along with the width of the screen. Responsive sites do not ...


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

To extend on what some others have said about choosing suitable breakpoints depending on your design, take a look at the Goldilocks Approach. This approach doesn't think in pixels for column widths, instead it thinks in em's, to provide an "optimum" reading experience by not making each line of text too long. This has the benefit that it optimizes content ...


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

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

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

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

To get you up to speed fast, spend your next ten hours reading "Don't make me think" by Steve Krug. When your done, tweet me and I'll be more than happy to guide you through the available literature.


1

any potential disadvantages The primary potential disadvantage is that the aspect ratio provides you with no indication of the size of a device they are using...which is one of the purposes of a responsive solution. I may have a 30" monitor with the same aspect ratio as my phone. But you likely wouldn't want to present the same UI on both.


1

There are so little details in the questions. Nevertheless, there are some usual patterns that goes beyond color (some people are color blind so it is not enough). Really write it down. Put the word somewhere. Icons Locations (e.g. all actives are grouped together). Shades (e.g. draft will have slightly lower opacity , deleted will be grayed out).


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

The main reason to use a pre-made grid is not artistic (e.g. golden ratio, etc.) at all. In fact it is very practical and has real values Asthetically speaking, using the grid will help you achieve the consistency and alignment across your web pages or throughout the web application. It greatly speeds up the layout process by giving the designers 'anchors' ...


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



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