2

I work with a graphic designer, she was asked to create a full width slider images, she asked me about the screen width, I said I don't know it varies, she wanted a number to use when designing I google and most websites say that 980 is the standard width.

This is nothing new for me, 10+ years ago when I started create websites, they used to teach that the standard with is 980px.

I tell her that, we test her design, it becomes pixelated, 980px true size is barely 3/4 of the screen.

Is the 980px width rule still a thing? If not what's the defacto width that we should ask designers to use when designing for PC.

Is there another for mobile? I know we can make everything responsive but in case we need a number. Like say we have a slider with text on it that doesn't get resized nicely.

  • I will say 1280 is the minimum and 2560 an ideal one to cover all types. Naturally the image quality should be lowered for large images to keep the file size under control. It also depends on the image - an image of clouds will look alright even after slight stretch, but a daylight cityscape with sharp edges of the buildings will show pixelation very easily. – Ren May 17 at 17:52
4

The UX answer would be to provide the best experience for your customers.

If full-width is your solution then you will need to create and implement designs for multiple break points.

To answer your question directly. No.

980px is useful as approximation for a desktop users. It works on designs for 1024 and above. Example: a design with side margins.

2

IMHO, I don't think 980 is a good rule of thumb for anything fullwidth on desktop or tablet anymore, especially because of "retina" displays. If I had to choose one resolution to rule them all, I'd probably go 1440 or 1920, but you're still going to be shooting in the dark there and adversely affecting users with poor connections.

Some of this depends on what the slider imagery is (can it be solved with SVG?), whether it's being implemented as img tags or with CSS, whether text in the slider is actually in the image (not accessible), how apparent degradation would be, and how confident she can be that her users will be on high speed connections.

Ideally, she could ask for google analytics data (if it exists), but here are some stats for worldwide desktop screen resolutions in current use. As you can see, 1366/1440/1920 combine for almost 50% of usage. You could find some mobile stats on that site too.

I also think that this would be a ripe case for responsive images (dev-heavy link) and CSS backgrounds, if possible. It would require some closer developer collaboration, which she may or may not have access to.

2

Devices in the wild are too diverse for a single size to work well for everything.

  • Design for the widest monitor you'd expect, likely around 4096.
  • Create differently sized variants for smaller monitors. Could be via rescaling or cropping or other means.
  • Use javascript to detect monitor/window size to choose an appropriately sized image.
1

Trying to use a pixel width for a standard size has been a losing battle for years and no web developer or designer should have that as a goal. You do not know, and cannot reliably determine, the size of anyone's display size. So don't do that.

The best response I've ever read about this question is, start with the smallest possible display width--which is 320px for mobile devices but you could start at 280px--then widen it out until it looks like $#%&. That's your breakpoint.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.