Hot answers tagged css
8
Use the em unit of measurement. That way you can easily scale between various devices based on the base font size that you're using. That way you can achieve a lot of what you need in terms of sizes simply by changing the default font size with media queries.
Different devices have (or should have) different base font sizes with the default size order ...
7
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 ...
6
The problem with customized buttons is that they risk not being recognized if they break key styles and metaphors. In particular, buttons that are not rectangular and do not provide hover states could be perceived as non-interactive.
Otherwise, custom buttons are a good way to give an interface strong branding and a sense of polish. Unstyled (or rather, ...
6
Stylize buttons
Advantages:
Buttons are more consistant with other parts of your design (provided your ui has style)
The overall look and feel is improved (provided your buttons don't look stupid)
Buttons can have more meaning (express different contexts)
Users are very accustomed to styled buttons, as most of the major websites use them : google, ...
5
Note that in terms of semantics and accessibility, there is a difference between a label and a placeholder
The key is to not assume a placeholder can take the place of a label on a form field.
Where it gets debatable is how to actually implement that. Prior to HTML 5's placeholder attribute, there were two common methods:
Hide the label with CSS, add ...
5
A button should look like a button, but beyond that the important thing is that the style the buttons (and all the elements really) fit in with the style of the page/site as a whole. This is the area of visual design or graphic design and involves color theory, typography, principles of contrast, repetition, etc.
Craigslist.org is very utilitarian and ...
5
This is a "Steps Left" pattern:
The Steps Left pattern is used when it is critical to maintain the user’s focus throughout the process of filling in data to the system. This is for instance critical in web-shops, where the checkout process is often guided by this pattern. In web-shops, the checkout process is the most critical part of the site, as this ...
4
It depends on the kind of event you're helding.
Usually, an event like this needs a one-off design - it's not that it cannot be done procedurally (like with a jQuery plugin), but as it's unlikely to be modified after the initial upload, it's fine to create it as a static page.
A simple table or even a list would do, depending on the breath of a conference.
...
4
I would say this is a perfectly reasonable action in terms of UX - Provided you make it clear to the user that a drop-down is available, of course.
If you fail to make it obvious then a quick hover with the mouse will provide the user with no visual feedback due to the delay, and as such the user will miss the drop-down entirely.
Whilst instant drop-downs ...
4
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.
...
3
Users on general wouldn't know the difference between a javascript-library-enabled partial undisclosure of an element and a refresh of the page. There are no conventions around for letting the user know the difference. And I agree, with todays heavy web apps which takes three four seconds to load, it really would be useful to know the difference. Or not.
...
3
It appears that the icon they're referencing with content: "\f002" is intended to be a normal magnifying glass, per the FontAwesome docs: http://fortawesome.github.com/Font-Awesome/#icon/icon-search
The FontAwesome site shows a blank spot in the WOFF file that loads:
3
This question probably belongs on StackOverflow. Which, by the way, does exactly that...it has CSS just for formatting markup and code. StackOverflow uses Google Prettify to format and style code blocks http://code.google.com/p/google-code-prettify/
2
There's no ideal size or de facto limits to the size of images (or any asset).
Actual testing on various devices with various connection types is the best way to understand the impact of file size, and actually showing it in action to your client is the best way to make him/her understand the issue.
Barring realistic testing, you can get more info on ...
2
Yes - nothing in Foundation will prevent you meeting 508 (or whatever) accessibility standards.
No - you can still produce inaccessible sites using Foundation.
Basically - this question is a category error ;-) Framework choice orthogonal to accessibility. It's how you design and build the site using the Framework.
Accessibility is a design issue. Not a ...
2
I believe one way to enable "hover" on a touchscreen would be with a sequential double touch. By this, I mean touch and hold the screen on an inactive part (e.g., not on a link) and then 'tap' (and release) the area with the hover info while maintaining the first touch. The hover info remains visible until the first touch is released.
2
It's a short way to invalidate cache or caching proxies, without actually changing any filenames.
For static files and unless some specific processing is taking place, you can usually rather safely add a question mark, "?", followed by any arbitrary string.
The web-server that has these static files will ignore everything after and including "?", but the ...
2
I'm assuming when you say unstyled, you mean the default buttons your browser uses.
Unstyled buttons are generally easy to recognize due to their familiarity to most users. However, it appears very unprofessional and leaves your site looking unfinished.
Styled buttons on the other hand would most likely follow the branding of where it is used. As a ...
2
The HTML/CSS portion of your question is better suited to another of the SE sites, but I'll answer the interaction design portion of it.
If you only need the user to respond to one of the fields, try something like this:
download bmml source – Wireframes created with Balsamiq Mockups
Once the user has clicked on one field, grey out the second.
...
2
Some UI hints that may help:
Ellipses and Arrows
Historically, Ellipses have been used to indicate the presence of a modal popup. Example: File->Print... indicates that a dialogue box will open for the user. Ellipses would probably suggest an AJAX action.
Submenus are usually hinted using arrows.
Tabs
If the page is meant to represent a single record ...
2
A fairly simple solution would be to create an image div, a border div, and the dynamic content.
Here is an example: JSFIDDLE
This method also allows you to see the square corner tag. I think you're right, a triangle would be a more finished look over the square. Circles look too much like the typical screw, which works in some UI designs, but might not ...
2
I had came across this issue a few months back and I tried to find its solution. To me the best and most inexpensive solution is to place the text underneath the input field and only do so if entered text gets longer than the width of input text. This shouldn't be done unless entered or displayed information is important and there is risk of mistake if ...
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 ...
1
I can think of a few things that may give you direction:
Identify Audience
Your first problem is to identify the audience, and with it, the exact goal of the aesthetic design. Why does your client wants something futuristic? What is the client trying to accomplish? Who is the audience --who does he want to impress? Could it be potential users (i.e., to ...
1
If your most important requirement is to look futuristic, then your best option is to look into the future and copy some of designs they will have been using.
And by "look into the future" I mean, of course, sci-fi movies and tv series, and possibly anime cartoons as well. Find the titles which depict interactions with computers, and see if that interface ...
1
Use radio buttons for eMail and Phone Number with input box by the side. If eMail radio is clicked, e-Mail input is enabled, focus is set to eMail input and phone number is disabled. If phone number radio buttion is clicked, clear eMail input, disable it and enable phone input with focus in it.
1
The tooltip adds CONTEXCTUAL information to the element that spawned it, right? (It may even have an arrow pointing to the hover element)
So it belongs to the reference element not the mouse. I suggest once it's spawned leave it where it is.
Not only is it distracting and makes the tip harder to read when its moving. It will disappear if you mouse out. ...
1
In general it is best to show the information where the person is looking. If they are looking at a particular element (say the Employee class) then you should show it where they are looking. Otherwise you have a separation between the target and the information.
Think of a wide table where you have to look at name on the left and some other information ...
1
its a method of versioning the otherwise stored static files. Essentially browsers can store various files / filetypes locally for any amount of time as it is dictated by the enduser. The purpose of adding / appending these values is to juke said cache without creating a file nightmare on the server.
thats at least my assumption in this situation.
...
1
On every (newer) browser there is always the option of using custom CSS. In chrome there is even an extension called Stylebot, which let you use different custom CSS on different sites:
Stylebot allows you to quickly manipulate the appearance of any website (using custom CSS).
You pick an element and choose any changes you want to make from the ...
Only top voted, non community-wiki answers of a minimum length are eligible
