Questions tagged [css]
CSS, short for Cascading Style Sheets, is a language used to control the presentation of HTML and XHTML documents.
220
questions
117
votes
8
answers
21k
views
Is "user-select: none" bad UX?
I was having a discussion today with a colleague. I showed her "user-select: none" - a CSS property that stops a user from selecting text.
To me, this property allowed a more app-like experience to ...
- 1,275
104
votes
9
answers
48k
views
Why don't <button> HTML elements have a CSS cursor pointer by default?
A friend was asking me why <button> HTML elements don't have a CSS cursor pointer by default?
It is the default behavior for links, and can be achieved on a button with
button { cursor:pointer;...
- 2,562
82
votes
8
answers
98k
views
Default cursor on mouse over of a button is not a hand pointer
Why is the default cursor an arrow when you hover over an HTML <button>? I always thought that arrows let you select stuff, but hands let you execute an action. Since buttons execute actions, ...
- 10.8k
74
votes
12
answers
37k
views
Is clockwise or counter-clockwise rotated text easier to read?
When rotating text with css, should it be rotated clockwise or counter-clockwise? Is one more readable than the other?
Counter Clockwise: — ...
- 965
50
votes
7
answers
21k
views
Why do websites not use entire width of browser?
What reasons might a website not use the entire width of the browser, like Gmail does?
For example, StackOverflow does not use the entire width — it has left and right margins. This means the ...
- 603
46
votes
8
answers
11k
views
How to enable users to insert an infinity number
I am designing a web page which give admin users the opportunity to manage the users below them. in one section of this admin page, the admin user is required to fill out how many queries he permits ...
- 677
42
votes
4
answers
36k
views
Is Helvetica considered a "web safe" font?
Should I consider the font Helvetica to be a web-safe font, i.e. is it a reliable source to set in my CSS that will be accessible on any device?
- 591
32
votes
4
answers
11k
views
Why rounding odd font sizes to even?
Today I started implementing a design that had some copy text with font size 17px. My fellow web developer told me that we should round that to 18px and more in general that we should not use odd font ...
- 321
29
votes
7
answers
35k
views
Responsive Breakpoints?
Twitter Bootstrap uses these break points for responsive design:
Large Display: 1200px
Default: 980px
Tablet: 768px
Mobile: 480px
A client said they are using 1280px for their Large Display ...
- 960
27
votes
2
answers
4k
views
What value does :focus CSS state add for buttons?
We all know that :hover is required if you want to create sophisticated user experience. It allows users to recognize a click option on an element.
I wonder what value does :focus add for buttons? ...
- 805
27
votes
3
answers
10k
views
When to use grab vs move cursor?
I am making an app with a drag and drop UI. I plan on changing the cursor when hovering over the draggable elements.
What's the difference between the move and grab cursors?
Can they be used ...
- 591
26
votes
7
answers
59k
views
What are the rules of thumb for margins in web design?
My web designer tells me that in a web page, the empty margins or padding should always be multiples of a standard. For example 6 px, 12px, 18px. This should produce nicely balanced lay-outs. I would ...
- 261
21
votes
5
answers
16k
views
Can text shadow enhance readability?
CSS font shadows are often used to help make text stand out (or in, or colorful, or many other fancy things.) I'm wondering if it can be used to aid readability.
I know finding the right amount of ...
- 313
21
votes
3
answers
13k
views
Should :focus and :hover styles be the same or distinct?
I'm in the midst of redefining a cross-application style guide, and I want to make sure we're accounting for accessibility in the design, including contrast ratios, text sizes, and focus states. One ...
- 351
20
votes
2
answers
6k
views
Why is the Google Search Results page not responsive? [closed]
As every web developer/designer, I read many articles about why responsive web design is important. We are also often told, that you can learn a lot by observing the UI (and optionally the code itself)...
- 303
18
votes
4
answers
4k
views
Why are CSS cursor types so rare on the web?
Coming across this handy CSS Cursor tool I wondered: why are the CSS cursor types other than default, pointer and text so rare on the web? Even most web applications don't go further than these three ...
user12741
15
votes
3
answers
3k
views
Make Optional Buttons More Clickable
I currently have a UI where I have three optional buttons. By clicking on a button, it will go to another user flow and the button is "completed". Unclicked buttons are considered "...
- 369
15
votes
7
answers
14k
views
iPad/iPhone alternative for hover states
I've recently updated my personal portfolio with some CSS3 and jQuery magic. I'm extremely pleased with the results and yes, it's fully responsive. But i have an issue. I've structured my portfolio ...
- 479
14
votes
6
answers
3k
views
What is more pleasing to the eye fade in or suddently appear
I have a pop up menu. What is said to be easier on the users' eyes? Should I just have it appear immediately using visibility = true or should I have it fade in using opacity animation?
- 243
14
votes
4
answers
23k
views
Table usability/Readable font for a data table
What's the best font for a data table? Monospace is good but takes up more room, so you can't have as much whitespace between the items. Similarly, what are some good usability principles for data ...
- 2,317
14
votes
1
answer
13k
views
Tooltip CSS cursor
I am at a bit of a loss as to what cursor I should be using for tooltips that have no click through behaviour. I have a hover only tooltip are I currently use the CSS cursor:
cursor: pointer
However ...
- 1,373
14
votes
5
answers
2k
views
box-shadow hover effect when box isn't necessarily clickable
It isn't a secret that giving the user feedback on a link hover (image swap/sprite, link color/decoration change, etc.) is a necessary practice for optimal UX.
In css-tricks.com's recent redesign, ...
eknown
11
votes
7
answers
4k
views
Do you consider the "960 Grid System" one of the "Holy Grails" of User Experience layouts? [closed]
Is there a "Holy Grail" of layout?
I recently redesigned a website for a client (University of Connecticut Coop), where I happened upon a link in their old code to this article:
"http://www....
- 1,644
11
votes
2
answers
12k
views
Need a font with unambiguous letters for commonly confused characters [closed]
Must-have
A few stipulations for an unambiguous font:
- It must be easily legible.
- It must have a slashed zero (so as to distinguish it from
capital O).
- It must sufficiently differentiate ...
- 166
10
votes
6
answers
676
views
Should I style my buttons?
Are there any major advantages / disadvantages in styling ones buttons like Facebook, Twitter and StackExchange - vs. not styling them like Craigslist and 4chan?
- 1,886
10
votes
4
answers
2k
views
Using aspect ratios for responsive design breakpoints
I am trying to figure out what the best way to make my site responsive would be. It seems a lot of people base responsive design off screen pixel dimensions, but I feel breakpoints in aspect ratio ...
- 113
10
votes
2
answers
2k
views
Anchor tag accessibility on SO
I noticed this question on SO Meta, and I was curious what the best solution would be. I understand the accessibility concerns, and I would like to see the need met, but I'm not terribly fond of text-...
- 203
9
votes
7
answers
621
views
Bridging the gap between color palettes and CSS
I'm familiar with sites such as kuler, I'm well-versed in HTML/CSS/JavaScript (as a programmer), and I know what sort of content I want in my website. I can figure out how to lay out my content ...
- 193
9
votes
4
answers
4k
views
Where does Business Analyst fits in core UX/UI technology flow
User Experience (UX) Designer = Research + Design
UI Developer = Design + HTML/CSS/JS
Application Developer = HTML/CSS/JS + Back-End coding
With reference to above diagram i would like to know ...
- 93
9
votes
4
answers
1k
views
How can I display forum paging on a mobile UI in a more pleasant way?
I am having a problem trying to find out how to display the page numbers on a forum in a pleasant way.
Please look at the picture below:
As the picture shows, the page numbers appear to the right of ...
- 583
8
votes
4
answers
477
views
How to optimise the space used by tags in the right column of StackExchange sites?
In this meta question about what the StackExchange UI site should look like, I'm working on (read: messing around with) a design for the site. I'm using a web-based tool to edit the page's CSS, which ...
- 23.8k
8
votes
6
answers
26k
views
Recommended button sizes on web pages
What are the current usability guidelines for the size of buttons (or anything clickable) on web pages?
- 925
8
votes
3
answers
2k
views
How practical is the accessibility requirement to view pages with CSS disabled?
As a practical matter, aside from what Section 508 states about web documents being readable without relying on an external stylesheet, do vision-impaired users really try to browse the web with css ...
- 83
8
votes
3
answers
12k
views
Display input text that exceed input width
I'm having some issues when the user types extensive text in a small input field.
I need some good way to display data that will be cut off.
I tried to use a Bootstrap based Tooltip or Popover on ...
- 153
7
votes
2
answers
1k
views
Why should I use em, and not % for fonts?
If ems essentially give you a result that is a percentage of the base font, what advantage is there to using it, rather than % for font sizing? I have looked around, and haven't really seen anything ...
- 453
6
votes
8
answers
24k
views
How wide should a responsive-designed website be?
Maybe this is a stupid question but I wonder if it changed.
Websites used to be 960px wide so all screen resolution could easily see all the content.
But with the new 'responsive-design' and html5 ...
- 578
6
votes
3
answers
1k
views
Is a raised-looking textbox appropriate or confusing?
I'm working on a website and the client is asking for raised-looking textboxes to match the look of the rest of the site. However, this makes the textboxes look like buttons that could potentially ...
- 163
6
votes
7
answers
3k
views
One website for multiple client resolutions
I keep thinking that although creating a single website for multiple client resolutions or screen sizes might be hard work, it's far more maintainable than creating a separate website for each device ...
- 1,005
6
votes
2
answers
563
views
Measurement to use when designing for desktop and mobile
I am currently working on a web based administration interface which has a lot of controls, such as sliders, check boxes, input fields, etcetera. The interface should work on desktops, tablets and ...
- 643
6
votes
2
answers
2k
views
Accessibility color difference best practices
I was planning on using #663399 and #f8f8f8 as a foreground and background color.
The Color Contrast Tool, like others, is passing the contrast ratio as described by WCAG, but is failing color ...
- 167
6
votes
2
answers
935
views
How to style a button - AJAX vs Hard Refresh?
When I'm casually surfing the internet, I stumble upon random buttons that I'm not really sure if they're going to open up a modal or just slide down a div so I just get scared of clicking them in ...
- 219
6
votes
1
answer
3k
views
how to represent disabled cells into a table with alternate row color
I'm creating an editable html table with alternate row color with a focused row highlighting .
When a cell is clicked, the user can modify its content.
Considering all of these, I need to indicate ...
- 161
6
votes
3
answers
2k
views
Guidelines/best practices for CSS hover animations in web UI
What, if any, are the accepted guidelines and/or best practices for using CSS animated transitions on hover in a web-based user interface? When does it start to simply become annoying and distracting?...
- 391
5
votes
4
answers
4k
views
Marking box as expandable box intuitivly
I designed a site with several boxes (which located one under the other).
Each box contains information about a specific topic- a title (the name of the subject) and a text (the explanation of this ...
- 677
5
votes
4
answers
278
views
What are some things to consider when optimizing a web page for a projector? [closed]
I'm guessing I should plan for low resolution and big fonts? Any good examples out there?
- 313
5
votes
2
answers
3k
views
How big is too big for a modal dialog?
My devs are currently working on a form that appears in a modal dialog- it was pretty big to begin with, but now they've added some fields and it's hanging off the screen- now they want to adjust the ...
- 147
5
votes
4
answers
1k
views
Lowering opacity on hover. Isn't it totally wrong?
It's a common practice to highlight an element on hover state.
By highlighting it, I obviously mean making it more visible than other elements.
But lately, I've witnessed the opposite trend on a ...
- 1,064
5
votes
4
answers
2k
views
Why should "cancel" and "confirm" button have the same size?
A lot of UI Frameworks provide 2 different types of buttons:
a sort of confirmation button
a "cancel" button
The UI of the two buttons could be different: different colors, background, borders, etc. ...
- 51
5
votes
2
answers
505
views
Science behind spacing
I'm aware that this question will be very vague, but I'll put it out there at the chance that someone will know what I'm talking about.
I recently read an article about the science behind spacing and ...
- 51
5
votes
4
answers
3k
views
User-friendlier dropdowns with hoverIntent?
Is it a good idea to use hoverIntent (which introduces a slight movement-predicted delay to prevent accidental hover-offs) for user-friendlier dropdowns?
http://cherne.net/brian/resources/jquery....
- 1,886