53
votes
What is the smallest screen size you design for
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 ...
13
votes
What is the best max-width content container in a website?
The "best" max width is going to depend on your content. The Web Accessibility Initiative suggests aiming for a maximum line length of 80 characters. Depending on your content's layout, design, font ...
12
votes
Accepted
Why are monitors landscape and books portrait oriented?
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 ...
5
votes
Where do I place a side navigation panel for wide screen displays?
It's not possible to choose an option without knowing what the real content of the page is. Other options to consider:
C – Responsive content
The sidebar on the left and the responsive content ...
4
votes
What's the reference screen resolutions to start preparing mockups for desktop?
Design for the most common screen resolution in your userbase. If it's an internal company application then you can hopefully find out the various devices being used boy contacting the internal IT ...
JonW♦
- 37.6k
4
votes
What is the best max-width content container in a website?
This is my absolute favorite site to reference for max resolutions: https://www.hobo-web.co.uk/best-screen-size/
The key takeaways are to look at the following:
1. Flexible Max. A bit of a side note,...
3
votes
What is the best max-width content container in a website?
What principle/rule can we use to determine what is the best max width following standards and screen resolutions?
You can provide multiple versions for different screen resolutions so that every ...
2
votes
For mobile app developer, which screen size is the most common one?
What's your product for? Do you have targeted an audience of users yet? Where do they live, what do they do, how are they interacting with your product?
I wouldn't necessarily decide on this upon "...
2
votes
Accepted
How to simulate screen resolution realistically when testing responsive Web UI?
If you are interested in testing for different screen sizes and features, I recommend to test with Device mode of Chrome DevTools which I think you are commenting in the question. You can set up your ...
2
votes
Accepted
Horizontal vs. Vertical centric email signatures
The short answer would be based on saving vertical space: chose the horizontal one. Emails can take a lot of vertical space and a vertically long signature can make the email seem even longer. (...
2
votes
How representative is the number of people who resize their browsers?
I don't know your breakpoints but you may be over thinking it.
Responsive design works for a range of sizes. Say your break points are 480, 640, 720, 1020 and 1400.
Would it really matter if someone ...
2
votes
Accepted
Question about Material Design dp and screen sizes
You're absolutely right. However, it seems that this is done on purpose — Google itself lists the physical density for the device as 132 dp/in and calculates a different dp touch size range than for ...
2
votes
Which screen resolution is best for reading in 13 inch laptop?
The higher resolution the better it is for your eyes. Looking at pixels is not good for your eyes so you can limit that with high res.
The higher is always better, but if you can’t find a 4k ...
2
votes
What is the best max-width content container in a website?
What principle/rule can we use to determine what is the best max width following standards and screen resolutions?
If your max-width is too large then you will very likely create a horrible ...
2
votes
What is the relationship between screen size and application design? Is it a two-way street?
You are close to a philosophical question here 😁
I think there is kind of a two-way street idea there indeed. Clearly there are several things to take into account, I think.
To illustrate this ...
2
votes
What is the best max-width content container in a website?
I think 1366px is best according to statistics.
1366px – 27.81% – Rising
1024px – 14.3% – Falling (includes both landscape and portrait views for 1024 x 768)
1280px – 13.26% – Falling
...
2
votes
Are there any stats that show screen WIDTH instead of DIMENSION?
W3 counter posted this information Jan. 2017:
> Top 10 Screen Resolutions
> 1. 640x360 - 26.54%
> 2. 1366x768 - 13.00%
> 3. 1920x1080 - 5.73%
> 4. 1024x768 - 5.52%
> 5. ...
2
votes
Accepted
What screen dimension would you choose to design your wireframe width?
1920px is far too wide.
Remember that pixel density plays a significant role here. For example, my large laptop's display is 3024px wide, but when I inspect websites that take up my whole screen, they ...
2
votes
Accepted
maximised vs full screen
I use "maximized" to refer to a windowed display mode and "full screen" to refer to a display mode that excludes all normal desktop functionality. Thus when watching YouTube I ...
1
vote
Screen resolution stats and responsive design
That's a common question, and unfortunately I think there is no real common answer, despite the one that tells you "it depends" 😅 (I'm sure you hate me right now 😁)
Statistics to the ...
1
vote
Accepted
Vector or raster graphic for UI elements?
If you are designing UI elements use vector graphics.
Use raster only for photos.
If you use vectors the elements you design will maintain their sharpness at any resolution.
EDIT: (I thought it would ...
1
vote
How should my design resize according to the screen size?
Observe how other platforms are designed, ideally ones that operate in your same business area.
I recommend you create an account on a web application similar to the one you are designing and see how ...
1
vote
Accepted
Android UX/UI guidelines for smaller vs larger screen size and pixel densities
"so for that bigger screen size and density, I should be making controls larger right?"
NO. It depends. If you are hellbent on achieving the same ratio of whitespace then yes, but that is a stupid ...
1
vote
Web application Design - using full screen width
A lot depends on exactly how your site is designed (a bunch of wide tables might benefit from the extra width, but something like Google Forms may not).
Use as much screen space as possible until it ...
1
vote
Web application Design - using full screen width
This is easy to target using your application/site analytics. If we consider the screen-resolution analytics in the image below, we can understand that if we keep the page-width between 1280px and ...
1
vote
Web application Design - using full screen width
A lot depends on the overall structure of the application for example, use a hybrid is possible. I notice the trend that modern sites are more flexible
Full screen resolution:
Arguments:
greater ...
1
vote
Accepted
Is it common practice to use separate identical images of different resolutions for different screen sizes?
The first approach is the best for the user experience as it saves energy, time and sometimes money.
Also its a common practice.
Energy consumption: The overall energy needed to download, process, ...
1
vote
Menu sidebar height on small screen resolutions
Well, Joao, scroll-ability is always a great option to fall back on when dealing with a fairly large amount of items which you want your prospective customers to be aware of on mobile view.
Remember ...
1
vote
Mobile design and images sizes problem
Unfortunately for you there's nothing you can do if all images that were uploaded in the past have max width of 480px.
There's no way to upscale an image without loosing image quality.
If the users ...
1
vote
Horizontal vs. Vertical centric email signatures
I would add another consideration to Caê Penna's answer. Gmail Workspace allows me to remove images in emails from unknown senders. In this situation, the vertical layout is likely to show up better, ...
Only top scored, non community-wiki answers of a minimum length are eligible
Related Tags
screen-resolution × 91responsive-design × 17
website-design × 16
mobile × 8
gui-design × 6
image × 6
android × 5
web-app × 4
layout × 4
mobile-application × 4
forms × 3
terminology × 3
mobile-web × 3
size × 3
viewport × 3
navigation × 2
user-expectation × 2
design × 2
ios × 2
usability-testing × 2
material-design × 2
scrolling × 2
research × 2
guidelines × 2
grid × 2