What is the smallest screen size you design for

  • I'm looking to make my website responsive, however this is my first foray into responsive design, and I'm pretty clueless at the moment.

    I have no idea what the current state of play is with regard to screen sizes for phones, hand-held gaming machines et al, so I'd appreciate some advice on what the smallest devices are that you currently design for (in pixels). I know that there are more variables to it than this but it would be a start.

    Answers in pixels aren't going to be good enough. A design which resizes gracefully between a 320 [email protected] dpi phone and 720 [email protected] dpi tablet (both in portrait orientation) is going to work badly on a 720 [email protected] dpi phone (which is physically narrower than the first phone mentioned).

    Ok fair point. I also presume that we're going to have to throw orientation into the pot too.

    @RumiP. said phones should be translating the virtual pixels into device pixels. (true on iPhone and, I believe, on newer androids. BlackBerry didn't do this in the past, though) -- In other words, pixel dimensions *should* be valid with the note that we're talking virtual pixels--not device pixels.

    I have designed for 1x1 pixels. It was a led indicator for internet connectivity...

    I'm voting to close this question as off-topic because it's just a survey. And a very old one.

    I was hoping to find height as well as width answers here.

  • What is the smallest screen size you design for

    320px

    But, as others have answered it, for best results you actually need to measure your audience and consider how much resources you want to pour into making your site/app work for that <0.1% of users below your determined screen-width threshold.

    That said however, unless you are running an obscure site/app for embedded 60px monochrome displays, essentially every single one of your users will have a device screen-width support at least 320px in width. We've been using this number as our threshold and there hadn't been any negative feedback about it.

    (source)

    I understand that the original question is subjective, but all things considered your answer is very true. You really have to struggle to find a device under 320px, although many phones do have exactly a 320px resolution.

    The source doesn't say anything about 320px though.

    @Muz it's been likely updated since then, but in my experience, 320px still holds the ground as a good minimum threshold for low-end phones.

    OP didn't ask for smallest screen width - size has 2 dimensions - where's the height?

  • First of all, since it's your site, don't guess; know!

    It's very simple. If you haven't already, add Google Analytics to your site (it's FREE).

    From there, you can actually see what Mobile Device, Browser, OS, Screen Resolution, etc. that your visitors use.

    Lastly, after you have what you consider enough data, make your decision on what resolutions you want to translate into CSS media queries for your new responsive site.

    Though do be careful in analyzing the stats. For example, a company without a responsive site may not have many mobile visitors...not because they don't want to visit, but because they don't because your site doesn't work for them.

    @DA01 - I would say ***thorough*** would be a better word to use in that case. You can figure out your scenario by analyzing the mobile device, browser, os, screen resolution, etc. against return visits and pages that they bounce on.

    Your media queries should not be based on screen resolutions.

    @moss - I really meant browser widths, but I think you can easily figure that out from the screen resolutions in Google Analytics.

    @CodeMaverick One of the principles of responsive design is that your design needs to be blind to device size. You should be designing for all viewport widths. Start small then increase the browser width until something breaks, then you put in a media query for that design element. Then repeat. This gives you the benefit of "future proofing" against shifts in popular device sizes. Creating media queries based on what device sizes your site is currently viewed on the most is a flawed method.

    That being said, if you're unsure how small to start your design, existing metrics are a good starting point for figuring this out. I generally just start at 300px and call it good unless there is some edge case which requires me to go smaller.

    @moss - I'm right there with ya on that principle. The point in the post was simply *know* your audience so you can build media queries based on that and grow/go from there. It's an ever-evolving thing, responsiveness.

    This answer is only useful for existing sites with an established user base. It's not useful for a new site, sites under development, or for sites re-launching aiming to reach a new range of users.

    @user568458 - I would agree to a point. You _should_ know your _target audience_, at least. What would you suggest instead for those first months?

    I'd want general figures, equivalent to general browser share figures. What devices exist below 320px, and how common they are. That's what I came to this page looking for, actually, and I was surprised to find nothing.

    While the advice to look at data is good, this answer is harmful because if you haven't designed your site to work on smaller screens, that fact will be reflected in your site stats.

    IMO, the recommendation in this answer is to reinvent the wheel. The assumption that each website should find out the answer for their own use-case is false... users don't change their mobile on a per-website basis... conducting such an experiment is expensive, especially if you want a thorough analysis... I cannot see why designers can't use the data from other websites who have already invested in such as experiment?

    @HoomanBahreini - You are right in that designers should most definitely use all the data they can find to help them make an informed decision for new and existing sites. You are wrong about the assumption in my answer, though, but that's because back when I wrote it, my answer simply assumed the OP already had an existing site that they wanted to transform into a responsive site, which makes my answer valid in that use-case scenario.

  • There are practical limits on either end of the spectrum IRT max and min screen dimensions.

    What those are may vary from project to project. However, on the low end, 320px is pretty much common these days (mainly due to iPhone and Android devices in portrait mode).

    There are always exceptions, however, and if your audience fits into one of those exceptions, then that is what you need to take into consideration more than anything.

  • On this website it gives some info about screen resolutions http://www.websitedimensions.com/

    According to that stats the smallest mobile resolution is 320px - however as mentioned in the third table, the actual width(excluding browser's interface) in that case can be 310px

    in case of the link expires in the future, here is web archive link: http://web.archive.org/web/20160330034016/http://www.websitedimensions.com/

  • I'm with @DA01: User data is an important point, but sometimes the decision of going responsive is about the visitors that you want to get, not necessarily about the ones you currently have. I know the web is open to everyone, but you might want to target an specific audience that might not be accessing your site because it is not mobile-friendly yet.

    But to answer your question, as a rule of thumb I would target a screen widths of 320px and up.

  • Rumi's comment above pretty much sums up the reality of the challenge very well.

    However, acknowledging that you can't make an ideal experience for every single device, just like you can't make an ideal experience for every single person from every single background with every single need, you'll want to prioritize what to make the experience ideal for. Then, make the experience acceptable and as good as possible for everyone else.

    Look at the purpose of your website and the possible uses. Why would someone want to view your site on a mobile device? What would they be hoping to do? How might that be different than what they'd do/expect from the desktop experience? There are several camps as to if and how you should give a degraded experience for mobile, and I won't get into those here.

    Also, look at your website analytics. Are people actually trying to view your website on small devices? What pages are they going to? How small? What percentage of traffic is from tiny devices?

    In my case, I'm working on a set of applications that integrate together. Mobile is a very important part of this, so even though only about 4% of traffic to the web-app component is from 320px (100dpi) devices, we make it work well for them. However, my longer-term plan is to optimize for down to 480px-ish devices while making things still work (with zooming) on the tiny resolutions. I know some people will disagree with this, but I feel it's better to give a great experience for the largest number of people instead of making sacrifices that affect everyone.

    That probably doesn't give you the answer you're looking for, but hopefully it's enough to get you pointed in the direction that's right for your situation.

License under CC-BY-SA with attribution


Content dated before 7/24/2021 11:53 AM