Skip to main content

Questions tagged [css]

CSS, short for Cascading Style Sheets, is a language used to control the presentation of HTML and XHTML documents.

Filter by
Sorted by
Tagged with
120 votes
9 answers
22k 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 ...
Brody McKee's user avatar
  • 1,305
106 votes
9 answers
50k 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;...
Édouard Lopez's user avatar
83 votes
8 answers
99k 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, ...
JoJo's user avatar
  • 10.9k
75 votes
12 answers
38k 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:     —    ...
John's user avatar
  • 975
51 votes
7 answers
22k 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 ...
kensen john's user avatar
47 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 ...
Yuval Pruss's user avatar
43 votes
4 answers
37k 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?
David's user avatar
  • 601
32 votes
4 answers
12k 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 ...
user131683's user avatar
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 ...
Xtian's user avatar
  • 960
28 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 ...
Danger14's user avatar
  • 601
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? ...
ewooycom's user avatar
  • 815
26 votes
7 answers
63k 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 ...
Tintels's user avatar
  • 261
22 votes
5 answers
17k 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 ...
Gn13l's user avatar
  • 323
21 votes
3 answers
14k 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 ...
Josh Johnson's user avatar
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)...
Vince Varga's user avatar
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 ...
user avatar
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 "...
turtlefish12's user avatar
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 ...
benhowdle89's user avatar
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?
Mel's user avatar
  • 243
14 votes
4 answers
24k 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 ...
Kevin Burke's user avatar
  • 2,367
14 votes
1 answer
14k 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 ...
theorise's user avatar
  • 1,383
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, ...
user avatar
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....
jffgrdnr's user avatar
  • 1,634
11 votes
2 answers
13k 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 ...
Thirteen's user avatar
  • 166
10 votes
6 answers
679 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?
Mark Boulder's user avatar
  • 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 ...
seyelent's user avatar
  • 113
9 votes
7 answers
630 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 ...
Ricket's user avatar
  • 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 ...
Navneet's user avatar
  • 93
9 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-...
ricksmt's user avatar
  • 193
9 votes
4 answers
2k 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 ...
kettlepot's user avatar
  • 583
8 votes
4 answers
478 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 ...
Rahul's user avatar
  • 23.8k
8 votes
6 answers
27k views

Recommended button sizes on web pages

What are the current usability guidelines for the size of buttons (or anything clickable) on web pages?
Tony the Pony's user avatar
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 ...
aames's user avatar
  • 83
8 votes
3 answers
13k 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 ...
John's user avatar
  • 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 ...
Rath_Er's user avatar
  • 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 ...
Kees Sonnema's user avatar
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 ...
Joe's user avatar
  • 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 ...
Bernhard Hofmann's user avatar
6 votes
2 answers
596 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 ...
dotmartin's user avatar
  • 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 ...
Julian's user avatar
  • 167
6 votes
2 answers
939 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 ...
Wololo's user avatar
  • 219
6 votes
1 answer
4k 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 ...
PEC's user avatar
  • 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?...
Mr. Jefferson's user avatar
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 ...
Yuval Pruss's user avatar
5 votes
4 answers
281 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?
jiggy's user avatar
  • 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 ...
Eddie Prislac's user avatar
5 votes
4 answers
2k 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 ...
majimekun's user avatar
  • 1,074
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. ...
MrDevel's user avatar
  • 51
5 votes
2 answers
529 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 ...
donovan's user avatar
  • 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....
Mark Boulder's user avatar
  • 1,886

1
2 3 4 5