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

learn more… | top users | synonyms

76
votes
7answers
8k 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 ...
59
votes
12answers
16k 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:     —    ...
54
votes
6answers
65k 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, ...
37
votes
6answers
7k 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 ...
28
votes
7answers
33k 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 ...
27
votes
4answers
4k 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?
24
votes
2answers
3k 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? ...
18
votes
5answers
4k 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 ...
18
votes
4answers
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 ...
15
votes
7answers
11k 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 ...
14
votes
6answers
668 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?
14
votes
6answers
11k 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 ...
13
votes
5answers
1k 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, ...
12
votes
3answers
1k 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 ...
11
votes
7answers
1k 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....
11
votes
4answers
8k 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 ...
10
votes
2answers
1k 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 ...
10
votes
2answers
360 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-...
10
votes
4answers
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 ...
9
votes
6answers
597 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?
9
votes
7answers
532 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 ...
9
votes
3answers
671 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 ...
9
votes
4answers
133 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 ...
8
votes
3answers
2k 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 ...
7
votes
4answers
395 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 ...
6
votes
3answers
928 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 ...
6
votes
7answers
2k 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 ...
6
votes
2answers
304 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 ...
6
votes
8answers
9k 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 ...
6
votes
2answers
240 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 ...
6
votes
2answers
622 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 ...
5
votes
5answers
8k views

Recommended button sizes on web pages

What are the current usability guidelines for the size of buttons (or anything clickable) on web pages?
5
votes
4answers
308 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 ...
5
votes
2answers
227 views

What's the best way to design the web interface which runs the same on almost all resolutions?

With web pages, what's the CSS framework or any other idea, which may show the web pages the same way on almost all screen resolution using div?
5
votes
2answers
154 views

How long of an initial load time are users willing to endure if it means faster access later?

I am creating a website where I output 10 posts when user comes to the website and then I fetch +10 more if they click the button to do so. I output each post in two parts - the main one and the ...
5
votes
4answers
2k 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....
5
votes
4answers
409 views

Should Website “Container” elements reach the bottom of the screen?

I've got a fixed width layout site much like SE and Twitter and it personally bugs me when my "short" pages don't reach the bottom of the page. I've been wondering if this is a purely stylistic issue ...
5
votes
1answer
173 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 ...
5
votes
2answers
885 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?...
4
votes
3answers
601 views

Any evidence of increased click through rates on blue underlined links in html emails?

I'm redesigning our company email template. At the moment links are grey, bold and not underlined. I don't think this makes it very clear that it is a link. My gut instinct tells me that I should make ...
4
votes
3answers
328 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 ...
4
votes
2answers
1k 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 ...
4
votes
2answers
675 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 ...
4
votes
2answers
648 views

What happens when the focus rectangle isn't clear?

I get a lot of clients that comment that the focus box isn't obvious enough in some browsers. Is it common and good practice to make it more obvious? If so, how exactly do people do this?
4
votes
1answer
387 views

How to direct users through a multi-step payment process?

I'm trying to develop a payment process for my users. Here are the steps that are required: User views the page that outlines all the awesome features that you get if you pay for the premium service....
4
votes
3answers
230 views

Advice on website design layout

I have a website that has a menu at the top. On some pages there is a sub menu that is at the left hand side, but this is only on some pages. How then would be best to design the page layout given ...
4
votes
2answers
7k views

User Profile Dashboard Design [closed]

I am trying to create a user profile dashboard for an application I am building using CakePHP. However, I am struggling to wrap my brain around a good layout/design for it. Basically, I am looking to ...
4
votes
5answers
138 views

Are there good practices to verbally describe the animations in your site before coding starts?

Is there a process, tool, prefered method to describe css animations, forwards and backwards, before you start coding them? I lose a lot of time describing the animations and/or picking up feedback ...
4
votes
1answer
125 views

When should I use cursor:default?

On a website, text will by default have the cursor:text type which looks like this: However I've noticed some websites use the cursor:default type on text. When should cursor:default be used on ...
4
votes
2answers
251 views

How can I style an editable text area so that its purpose is implicit?

I considered a skeuomorph using yellow paper with lines but it seemed tacky and didn't fit the overall design of the page. The textarea fills an entire "panel" on the page just like other panels of ...