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
5 votes
2 answers
848 views

Creating an accessible, animated, and responsive navigation system

I've been struggling for the past couple weeks to design the perfect navigation (menu) system for my personal website which I am designing. First, I need a system that is completely accessible as I am ...
1 vote
1 answer
29 views

strike-through a good indicator for removed values in a list

Is a strike-through a good indicator for removed values in a list? Currently, the background of the removed values is red, but we need another grammar indicator to show that the value has been removed ...
2 votes
2 answers
248 views

Cursor usage in different application elements

I am working on an application that is mostly used by desktop users. So I am trying to perfect the use of the cursor css-rules. First of all, I have read and tried to follow the practice of having ...
2 votes
1 answer
216 views

How do I know which measurement units to use for which elements in CSS?

My question why would I ever NOT use percentage for sizes? got some good feedback, some good comments and some good answers. They told my why not to always use percentages, and even when certain ...
2 votes
1 answer
914 views

Is it a good practice to mix filled and outline badges?

The theme I'm using for my website has two different badge versions: filled and outline (like the image below). My question is: Should I mix these styles at the same page/theme, or should I use only ...
1 vote
1 answer
64 views

Why does Google use `user-select: none;` on the text in their google meets web app?

Whenever I'm reading a webpage, I often double click text to orient myself on the page (and for something to do I guess). I recently landed on https://meet.google.com/ after a meeting and was ...
51 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 ...
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, ...
3 votes
1 answer
279 views

How do I design a mobile table with multiple headers?

I have the following table design for PC. How can I make it easier to see that "ddd", "eee", and "fff" are groups of "CCC" in mobile view? 【PC】 【MOBILE】
0 votes
1 answer
67 views

Software that works like Google Chrome's "view page source"

I've only been using Google Chrome "CTRL+U" Tools to check my web design's responsiveness and edit styles or elements, however it started to get so freaking laggy which slows me down ...
1 vote
1 answer
497 views

Screen resolution stats and responsive design

I'm working on a new website and there's some debate regarding what width should be picked as maximum for the main, fixed-sized, grid (it won't be a 100% width layout). (Should it be 1100px? Should it ...
1 vote
2 answers
104 views

How to do loading animations when at certain times the application is too fast for them?

I am facing a strange "catch-22" like problem, while developing an application for a mobile browser. My problem is that, some inner-app screens are fetching data from a back-end server, and ...
1 vote
2 answers
72 views

Studies of the impact visual design has on user engagement

My intuition is that well-designed sites are more pleasing for us to navigate, which means well-designed sites receive more user engagement. Are there studies that test this hypothesis? A/B tests of ...
2 votes
1 answer
1k views

Using text-shadow for accessibility

I'm interested in understanding whether there has been any research or confirmed values for using the text-shadow property with the goal of meeting WCAG minimum colour contrast values. In my ...
4 votes
1 answer
121 views

Who should manage CSS colour variables in a web project? Design or Front-End?

We're working on a multi-brand project where the site must switch between company branding. To do this we have CSS colour variables in place switching between styles depending on what brand is using ...
0 votes
3 answers
2k views

How to make the switch from full stack dev to UI/UX developer? And, do UI/UX devs exist? [closed]

Some background info: I am a junior .Net MVC developer who is great at nothing but good at everything. All my development experience up to this point has been full stack which is great because I ...
2 votes
3 answers
96 views

Styling a hint for relative numerical value

Background: I have a list of elements in a browser which each are a numerical distance away from the same origin point. I want to give a visual hint to quickly give a feeling for how far a list-item ...
0 votes
1 answer
79 views

How do I space or size HTML text so that blurriness is mininized? [closed]

The image below are examples of two different methods that the letter,"J" is rendered: When rendering text, letters seem to be, "warped", or offset by a fraction of a pixel. This ...
0 votes
1 answer
398 views

Is there a css @media query that can identify a landscape or portrait display? [closed]

I am trying to create a media query to identify if a screen is landscape or portrait so that I can change the CSS styling when a screen is rotated. Is this possible and how would i do it?
1 vote
2 answers
148 views

How is this UI called (multiple pages with settings, dots on bottom marks progress, usually after install of app)

On mobile phone when I install some app it shows few pages with basic settings, at the bottom are dots indicating progress, sometimes back/next button. How is this thing called? I want to find and try ...
0 votes
2 answers
182 views

Web design practices to minimize browser refresh [closed]

The design of our website is such that whenever we make some changes in CSS & JavaScript files we require the user to clear the browser cache and get the latest version of these files from the ...
2 votes
1 answer
2k views

(Accessibility) - Back button placement on the page in SPA

I am working with an SPA with Angular and the designs indicates that there is a back button and it is before the Page level heading usually the H1. For SPA, it is a general practice that we place the ...
2 votes
1 answer
71 views

How important is zooming in and out (cmd + , cmd - ) for websites (Desktop view) in terms of accessibility?

I am working on a website at the moment and someone else is in charge of the HTML/CSS side of things. I've noticed it's not possible to zoom in and out with the browser function of cmd and + or -. The ...
118 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 ...
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 "...
1 vote
1 answer
75 views

When making a website that is font-size responsive, are there any guidelines to what font-sizes authors blow text up to?

It seems an opinion whether or not, as web-developers, we should design websites taking into account the user increasing font-size (e.g. on Chrome: Chrome>Settings>Customise fonts). (Although it ...
4 votes
2 answers
2k views

How to deal with extra spacing with line-height when spacing between elements should be consistent

We want to design our website so that all elements are spaced 24px apart (paragraphs, form groups, header & content, etc.) and "related" elements (label & form field) are spaced 8px apart. We ...
-1 votes
1 answer
57 views

What design changes will improve visual appearance of the calculator [closed]

This is the HTML code for a very basic calculator. I am at beginner level on bootstrap and definitely beginner level designer. what are some changes i can do to make the visual appearance better. i ...
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. ...
106 votes
9 answers
49k 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;...
1 vote
2 answers
156 views

How do I convince my boss that too many link colors are bad for accessibility?

I work at a really small company making websites for a specific clientele, an older female audience. My boss, also the lead Art Director, uses lots of different colors for links across an entire ...
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?
1 vote
1 answer
108 views

Need opinion on this web design FOR UX/UI/CX - Beginner in designing [closed]

Hi, first of all, sorry if I'm posting in the wrong section. I want to get an opinion about the design of an event management system. I've google on UX example design but most only show for simple ...
1 vote
1 answer
39 views

Similar color groups for HTML

I start my adventure as a front end developer and I wonder about the easiest way to choose the color groups used in css for my projects. For example, I have a group of grayscale colors. How large ...
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 ...
0 votes
1 answer
130 views

Spacing out a Headline, body, and CTA button

Is there a standard on what is the better way to space out a Headline, body text, and button link? Using a margin-bottom on the headline and body? Or using a margin-top on the body and CTA button?
0 votes
1 answer
446 views

Number incrementers and accessibility

How are number incrementing arrows for accessibility? I would think they would be bad for keyboard users, but is there any study to back that up?
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 ...
2 votes
1 answer
273 views

Custom scrollbars in websites - do they make any sense?

Are custom scrollbars still needed today? The only reason they were needed so far is because they are fugly on Windows. They are always visible and don't autohide and they just look bad. But I've see ...
0 votes
3 answers
246 views

In the holy grail layout of web design why is the navigation menu vertical and not horizontal?

i am a beginner with web design, while studying i came across the "holy grail layout" and i was just wondering why is it that the menu is vertically aligned while most modern websites tend to use a ...
2 votes
2 answers
809 views

What makes Reverse scrolling a sign of Bad UI?

My client needed to design a fully SVG animated website with reverse scrolling. But, I heard some people say things like: Try avoiding Reverse Scrolling, It's a sign of Bad UI design etc... What ...
3 votes
3 answers
853 views

Modal button positioning on mobile

I am designing a design system for my company and am currently looking at designing the modals and dialogues for both desktop(tablet too) and mobile. I have placed the primary action to the bottom ...
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?...
3 votes
3 answers
20k views

Back button look bootstrap which one to use?

I have a multi page web app where the user first selects some information and uploads a file to import, then the file will be sent to the back end for processing. After that the results will be ...
2 votes
1 answer
130 views

Is there any reason not to change the style of web radio buttons and check boxes?

It's still very difficult to change the visual look of HTML radio buttons and checkboxes using CSS. For example, changing the check box's border-color does nothing on major browsers. Is there a UX ...
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)...
0 votes
1 answer
115 views

What is the best way to start designing this website? [closed]

I am new UI(ReactJS) Developer, I want to develop this webpage from scratch, however, I am not that experienced, hence, confused how to actually start. Should i start with logo or header or sidebar or ...
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 ...
2 votes
0 answers
109 views

Different border-radius in different field. Is it a good practice? [closed]

Using different border-radius for different fields (e.g. textboxes, buttons, cards) to make the curves looks similar. Curves on the large field doesn't look similar to small fields. Expected: What'...
1 vote
2 answers
308 views

Is there a standard for indicating a high contrast style? [closed]

I am working on a web app and have developed both a normal stylesheet and a secondary high contrast stylesheet. I am coming unstuck when it comes to allowing a user to switch between styles. Is ...

1
2 3 4 5