95

High-density screens can be a bit confusing, a pixel isn't just a pixel anymore: the actual pixel count is a multiple of the declared pixel count. That particular resolution is common because it's the simplest math for HD formats: 360x640 pixels, at 200% DPI, is 720x1280 -- which is the viewport size of the HDTV standard (aka 720p). At 300% DPI it is ...


81

It's from print newspapers; back in the day when broadsheets were more common, they were usually presented folded in half vertically, so the most important part of the front page was the portion "above the fold", which is the first thing most people see when they see the newspaper. Analogously, this is the first part of the website you see when a page loads, ...


55

It comes from newspapers which are folded in half. Above the fold refers to content that is visible without unfolding or turning the newspaper over to see the 2nd half. This term was adapted to websites and their content that is visible without scrolling. Here is a picture of a newspaper. Everything you can see is above the fold.


41

The short answer is: if you already account for 6 different mobile screen resolutions, you should also account for many large screen resolutions - keep things consistent. The long answer: You're over-complicating this. There're 28 "standard" resolutions and creating a dedicated layout for all of them takes too much precious time. Instead, you should follow ...


30

what data does the user actually need to see? If only we could get a straight answer to that. Instead of "it depends". I keep on running into this problem, and every time I Google I end up back here at Jason's excellent question. And there are many excellent answers, but I smell a meta-topic that we all seem to skirt around yet I think is worth unpacking. ...


29

Yes, reducing white space does degrade the user experience ,The reason being readability of a site is critical in almost all cases and can influence how effectively your users navigate your site. To quote this article about Negative space (also known as white space) Text on the web is unlike text on any other platform and we all tailor our designs so ...


29

This answer might surprise you, but the reason why 1366x768 is the most common laptop resolution is because a dominant notebook LCD-panel manufacturer called AU Optronics (AUO) makes vast majority of their panels in 1366x768, regardless of the actual size. Many of their 11'6", 12.5", 13.3", 14", 15.6" panels only come in 1366x768. These panels can be found ...


29

This report was generated 05/31/2013 based on the last 15,000 page views to each website tracked by W3Counter. W3Counter's sample currently includes 66,635 websites. The browser market share graph includes data from all versions of the named browser families, not only the top 10 as listed below. Macs are quite costly and their market penetration in the ...


28

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 ...


28

Switch the chart to resolution for mobile only. There's your answer. Mobile Phones (whatever statcounter classes as such) are skewing the results (well, it's not really skewed as it's correct). Mobiles are being used more and more for accessing the web. This just illustrates that. According to this page, Samsung S3, S4 and Galaxy Note are such phones, ...


26

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/...


21

A complete "it depends". You can, of course, use white space effectively to define hierarchy and help us express to the person using the site what is important, what isn't, and guide peoples attention through the page. However it's one tool (and constraint) among many in building a great user experience. You need to balance its use with the size of the ...


21

Instead of designing your UI for a single resolution, you should design it to be resolution-independent. Take a look at how this is handled in Android: http://developer.android.com/guide/practices/screens_support.html The resolution you are using (320x480) is a typical MDPI resolution, so you could basically continue using it, as long as you deliver your ...


17

"...how related are viewport sizes to screen resolution?" This is an interesting question. This answer is probably a good starting point to get the information you're looking for. I don't have any empirical data to support this, but I imagine that viewport size and screen resolution diverge as screen resolution increases. And there's probably a distinct ...


17

I've always found "standard resolution" to be clear when speaking to people, but that is likely to change with time. It is important to know that "retina" is an Apple trademark and not a technical term for a resolution, so I try to avoid the term. Android is more specific by using the terms hdpi (1.5x) and xhdpi (2x or retina equivalent), so when speaking ...


16

The choice of minimum screen resolution all comes down to how many users you are willing to exclude. If you do not have a history of resolution data for your specific users, one option is to use public, global usage statistics as a guideline. Using one such source of global data, I created the following graph to help convey the state of desktop screen ...


16

From a UX perspective - KEEP the bad images. The user will want to know what they're buying and if the image is bad/stretched it still gives a certain % of the total information available. This gives the user an improved holistic view of their order. You may lose sales by removing the images if user's won't order without knowing, for example, what shade of ...


15

The resolution that you design for depends on the resolution that your target audience will be using. Sometimes you know this in advance, but if not, you need to try remain flexible within a set of resolutions. This is one of the reasons that responsive design is so useful. You need to design without a fixed resolution in mind, but design in a way that ...


14

The history of the term "Above the fold" comes from newspapers where the articles at the top were most visible when the newspaper was folded. To quote this Wikipedia article Above the fold is the upper half of the front page of a newspaper where an important news story or photograph is often located. Papers are often displayed to customers folded so ...


12

I wasn't sure whether to post this as a comment or an answer. I faced this problem before, and instead of stretching the images, I re-did them using a light color background (could have a very subtle texture) and leaving the original picture in the middle, at its true size. If you have two instances of the same pic (small for index, big for details, for ...


12

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 ...


12

Well you can easily do it in Mozilla Firefox. Try pressing Ctrl+Shift+M Then you can choose from varieties of resolutions, also for your custom resolutions. You can drag the sides to increase and decrease the resolutions. Some links here on keyboard shortcuts and responsive design view Keyboard shortcuts on Mozilla Responsive Design View on Mozilla ...


11

As we have two eyes one next to the other our horizontal field of view is larger -almost 180 degrees- than the vertical -135 degrees-. In western cultures we read from left to right and top to bottom. We need to keep a good reference of what line we are at so when we finish a line (on the right) and we go to the next one (on the left) we can do it easily. ...


10

I'm a bit surprised, that none has suggested the Master-Detail pattern yet. We have exactly the same problem in several of our own products: Too many columns to fit on a screen, however, every piece of information will be relevant in some use-case. Actually, we decided to do, what you(r boss) ruled out: Cutting the default number of visible columns to ...


10

Clients that complain about 'all the extra space' are usually looking at things from a visual design layout standpoint rather than UX/usability standpoint as if they were printing out the site and hanging it above their fireplace as a work of art. Yes, if you stretch your browser to 1920...a LOT of web sites will have lots of blank space. That doesn't ...


9

There's two computer engineering concepts that you must first understand. Memory The first is RAM (random access memory). RAM is very fast storage compared to the harddrive. Apps are transferred from the harddrive to RAM when you use a app so you can have fast access to it. What happens when programs use more RAM than you have? Well, some pieces of the ...


9

Let your content dictate your decision, not possible devices. Will the site be easier/better to use if you created a larger version or will it just be bigger? If the answer is yes, then how much effort is required to do so and what percentage of users will be able to take advantage of it? Also if you decide to make the additional version, consider that the ...


8

The discrepancy is due to the status bar (where the clock and wireless status is shown) which is 20px high on the regular display (and 40px on the retina display). Whether that is also the size you should design the app UI to depends on whether your app runs full-screen (i.e. hides the status bar) or not. Generally it should not hide the status bar unless ...


8

Completely ignore DPI settings in your image software. It has no bearing on web graphics. All that matters is pixel dimensions. A 100px x 100px image at 300dpi is the exact same image on screen as a 100px x 100px image at 100dpi. DPI only comes into play when you're talking about print graphics. Where you may want to consider a larger image on the web, ...


8

In my personal opinion, it is not a good idea to populate the whole big screen with more content as it would strain the user's eyes and neck having to see from one corner of the screen to the other. So, its crucial to kind of limit the focus of user to a certain area of the screen. Of course, to populate the empty space of the screen, you could employ ...


Only top voted, non community-wiki answers of a minimum length are eligible