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


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

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

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

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

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

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

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

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

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


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

how often are people printing pages outside of 8.5 x 11? I have never printed at 8.5 x 11. I assume this is a U.S. paper size and is in inches. I print at A4, it is the standard printer size in the UK. It is 210mm x 297mm. Don't try to assume what sizes people are printing at, instead make your print styles flexible enough to cater for everyone ...


1

I would suggest that you focus on 2 areas for this project: Searchability - Users of the system will want to find exactly what they are looking for as fast as possible. Type to filter, where the filter is *< search string >* works great for searching names, as it is easy to search based on first or last name from the same search box. Rapid Editing - The ...


1

I agree with JonW - you're essentially asking for a responsive website that doesn't respond. Equally, providing technical advice is not what this type of forum is for. The ideology behind a responsive website is that it optimises content applicable to the users resolution and prioritises it accordingly. One thing I would question if I were you is, not ...


1

There are statistics available, but they vary. This site says 88.9% of users have 16px as their default, this site says 99.7%. But it shouldn't matter. If you design a web page, you have two options: either leave the user's preference intact, that is, don't change the font size at all, or choose your own font size. That's it. If your decision depends on ...


1

I've seen a very nice implementation of this idea in Adobe Lightroom and in case you don't have the app, I can try to explain it to you. Internally, we are also in the process of implementing this idea in one of our applications to make more room for the user. Below you will see the Lightroom screenshot. Look at the middle left of the screen at the ...


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

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

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



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