Okay, so let me start by saying: PLEASE do not tell me how to create a fluid website or that I should read some statistic from Google on just how much pixel width by height is visible by website visitors as tracked by Google analytics...
As a web designer, certain assumptions about your audience must be made in order to design an effective website. So, what pixel dimensions do you assume are the minimum pixels width and/or height that these users should view your website at?
I understand that with a properly formatted "fluid" design, you should be able to view it at any dimensions - HOWEVER, there is always a target that the designer is hoping for as their minimum and maximum viewing sizes.
So, how about it? I want to hear people's personal experiences. Please do not point me to some obscsure net-article. All of that is great, BUT, I want to hear from those others, like me, who are in the trenches, actually designing websites: what pixel dimensions do you think are the minimum that your site should be seen at?
So, once again, for those in the cheap seats....
WHAT I WANT TO KNOW IS THIS:
What size is the optimal size to view your latest, greatest website design at?
Please, no flaming-weenies telling me what is wrong with my post... if you have nothing constructive to add, please do not respond.
I usually design for 800x600, taking out some vertical space for the browser, so around 800x450 - 800x500. If all of the important information falls in that resolution when viewed with OS-default font size settings, I consider that a good thing.
We had to build a webapplication for users from several systems. We decided that the users will need at least a resolution of 1024x768. the bad part with this page is that graphic designers had too much influence in creating the site. Well, also on bigger screens, everything is in a maximum 1024 pixels wide. We wanted to use the whole screen, but no: "doesn't look cool enough".
At the company I work, we design for a target resolution of 1024*768. This just stems from the fact that the place we are writing an application (GWT) for at the moment have a few old 15" computers lying around, and the application needs to run on their browsers too.
For on-screen viewing, you should trim about 40 pixels off of the width of the screen resolution. The narrower width accommodates for borders and scrollbars.
Think of your target audience:
Are they more likely to have high-resolution monitors (and a 1024x768 or larger display)? If that is the case, keep your width to about 980 pixels.
If your target audience is elderly, or has poor eyesite, they tend to prefer the larger fonts that an 800x600 resolution provides. For this audience, keep your width to about 760 pixels.
Will your audience print out your web pages (or a portion of them, e.g., for order confirmations or instructions/directions)? If so, the page to be printed must fit a 540 pixel width for 8.5x11" paper with .5" margins or 511 pixels for A4 paper.
(HTML5 standards may stray from these traditional guidelines, as pages can grow horizontally and vertically when the user expands viewing areas of the page.)
Related
Just a straight forward question. I´m trying to make the best possible choice here and there is too much information for a "semi-beginner" like me.
Well, at this point, I´m trying with screen size values for my layout (activity_main.xml (normal, large, small)) and with different densities (xhdpi, xxhdpi, mhdpi) and, if a can say so myself, it is a mess. Do I have to create every possible option to support all screen sizes and densities? Or am I doing something really wrong here? what is the best approach for this?
My layouts are now activity_main(normal_land_xxhdpi) and I have serious doubts about it.
I´m using last version of android studio of course. My app is a single activity with buttons, textview and others. Does not have any fragments or intents whatsoever, and for that reason I think this has to be an easy task, but not for me.
Hope you guys can help. I don't think i need to put any code here, but if needed, i can add it.
If you want to make a responsive UI for every device you need to learn about some things first:
-Difference between PX, DP:
https://developer.android.com/training/multiscreen/screendensities
Here you can understand that dp is a standard measure which android uses to calculate how much pixels, lets say a line, should have to keep the proportions between different screensizes with different densities.
-Resolution, Density and Ratio:
The resolution is how much pixels a screen has over height and width. This pixels can be smaller or bigger, so for instance, if you have a screen A with 10x10 px whose pixels are two times smaller than other screen B with 10 x 10 pixels too, A is two times smaller than B even when both have 10 x 10 px.
For that reason exists the meaning Density, which is how much pixels your screen has for every inch, so you can measure the quality of a screen where most pixels per inch (ppi) is better.
Ratio tells you how much pixels are for height as well as width, for example the ratio of a screen of 1000 x 2000 px is 1:2, a full hd screen of 1920 x 1080 is 16:9 (16 pixels height for every 9 pixels width). A 1:1 ratio is a square screen.
-Standard device's resolutions
You can find the most common measurements on...
https://material.io/resources/devices/
When making a UI, you use the DP measurements. You will realize that even when resolution between screens are different, the DP is the same cause they have different densities.
Now, the right way is going with constraint layout using dp measures to put your views on screen, with correct constraints the content will adapt to other screen sizes
Anyway, you will need to make additional XML for some cases:
-Different orientation
-Different ratio
-Different DP resolution (not px)
For every activity, you need to provide a portrait and landscape design. If other device has different ratio, maybe you will need to adjust the height or width due to the proportions of the screens aren't the same. Finally, even if the ratio is the same, the DP resolution could be different, maybe you designed an activity for a 640x360dp and other device has 853x480dp, which means you will have more vertical space.
You can read more here:
https://developer.android.com/training/multiscreen/screensizes
And learn how to use constraintLayout correctly:
https://developer.android.com/training/constraint-layout?hl=es-419
Note:
Maybe it seems to be so much work for every activity, but you make the first design and then you just need to copy the design to other xml with some qualifiers and change the dp values to adjust the views as you wants (without making from scratch) which is really faster.
I have a page with many large fluid images. http://altarjewelry.com/gallery
I want to get a smooth 60fps webapp feel while scrolling. The Chrome DevTools tell me my paint times are the biggest problem (which you can check for yourself while scrolling). I'm assuming this is due to my many large fluid images.
I've read every article on HTML5Rocks about performance. I found many good tips on JS performance but no help optimizing large image paint times other then using small fixed size images, which is not an option for me as I'm building a responsive site.
I'm already serving up responsive images depending on the client.
Thank you for your help.
Not really sure about how your gallery looks because it never loaded from the URL in your post, and I don't know if that's a javascript issue or what--but I'll take a stab at helping you come up with a solution. Image optimization is image optimization, regardless of whether or not you're building a responsive site.
Approach and Design Considerations
Do you really need one large, high resolution image for each item, at the same DPI/PPI and compression, that should be responsive?
Or, should you serve appropriately sized images at differing DPI/PPI and compression, to different displays, all of which are still used in a responsive application?
Popular Convention
You're showing a gallery, and typically, you want smaller representations of the actual image--thumbnails or placeholders, generally of lower resolution, which link to the actual image at a higher resolution. This is an accepted design approach, and if you're going to vary from it, be sure it's with good reason.
The Lowest Common Denominator
If you're building a responsive site, some users will obviously be on mobile devices which may have resolutions as small as 320 pixels wide. Consider things like that, and this: even if someone shows up on a desktop, are you going to have huge, full width images loading? They will take forever to load, and visitors will never see your gallery. How is your gallery to look on a wide screen desktop? If your intention is to have one image full width across the entire page, and load the same image regardless of the device accessing your site, you may be using responsive design, but you'll find that's far away from best or even good practice.
The Flip-Side, Large/Wide Screens
Why not have four gallery images going across a desktop? Or more? And if that's the case, they're likely to have a maximum size in any case. I honestly don't know because I've tried to load your site a few times and get nothing. But consider that if there's a maximum size practically for your gallery images in an initial display, say 6 images at 200 pixels each across a 1200 pixel max layout width (Or, are you using a % based framework and using 100% of the display width? Even responsive sites often limit the max width of the content area, and these things all would help determining a more appropriate answer) solutions begin to emerge.
Since no image needs to be larger than 200 pixels in that case, and on a phone where your columns might be displaying only one image that you want full width, you can work with a maximum initial width of 480px wide images.
Higher Quality, Smaller Files
We'll assume you want them high quality. That's fine. You still need to reduce files size, and you do that with compression. Now, you may feel compressing a photo to 50% or even more makes it blurry, and it certainly will at low ppi (pixels per inch) settings.
The Secret To Better Compression
What you need to do is change default image editor settings from traditional defaults like 72 or 90 ppi, and crank them up to 300, 400, 500, or more--and THEN apply compression. If that image is 480px wide, and you've only got 72ppi, compression will quickly erode quality. However, having several hundred extra pixels per inch will allow more information to be stored. Then, you can apply much higher compression rates, and shrink file sizes down quite a bit more.
The Oversized Image Approach
Another trick is to do the same thing, and slightly oversize the image. If 480px is the max size for your thumbnails/small pics, make them actually 540-600 px wide, with 400-500ppi and compress them at really high settings. The browser will resize to the max width of 480 px...but then you have a performance hit there. Everything is a trade off. You can blur backgrounds in images as well, allowing the foreground/main focus of the photo to be of higher quality while the background requires less information, yielding smaller file sizes.
Not Suitable For Batch Processing
This should be done individually for each image, batch editing does not generally get the most out of this technique, because the color information is so different in each photo. One photo might be best quality and smallest size for your purposes at 300ppi and 50% quality, another at 500ppi and 35% quality. You'll want to do this not just for your gallery thumbnails, but multiple images. No point in serving up a 1400px wide full size desktop to someone who's browsing your site with 480px wide/resolution display after all. Use media queries to serve up the appropriate ballpark sized image, and have a small, medium and large variant. Done right, you don't even need to be serving larger images to those browsing with phones...the gallery images they are viewing are good enough.
The compression setting is not so heavily determinate of the final image quality as the number of pixels you have to compress goes up. More pixels to work with, the better quality at higher compression settings.
Design Considerations and Smart Image Loading
Break It Up Into Smaller Content Chunks
Also, consider the process/design of your gallery. Do you have 20 items? 100? 400? Are you trying to show them all on one page? Break it up into small numbers...12-20 per page. Smaller and fewer images will load faster, and can remain responsive, with links for those who want a larger or higher quality image. No need to show a huge, high quality image to someone browsing with their phone.
Pre-fetching and Loading
Server side scripting, and even some javascript solutions can help with this. You might do things like limiting each gallery page to four rows of four images, and then after page load, have a javascript that pre-fetches the first four images that will display on page 2. If your visitor goes to page two after scrolling through page one, the first four images are loaded in cache, and display quickly while the others load normally, giving the experience of a faster page load.
If the visitor goes to another page in the site, you didn't waste bandwidth on 12 images and only cost you the bandwidth of four. Smart design might be to use those first four images on page two of the gallery elsewhere on the site...so that first gallery page visit actually sped up page load elsewhere and does not in fact give up bandwidth for loading 4 unnecessary images. Think the process through, and solutions will suggest themselves.
Resources
Anyway, here are relevant articles/posts/links you may find helpful in understanding all of this:
Are Compressive Images A Good Solution For High Resolution Displays?
http://www.vanseodesign.com/web-design/compressive-image-tests/
Reducing image sizes (ResponsiveDesign.is)
https://responsivedesign.is/articles/reducing-image-sizes
Search benfrain dot com for this post:
How to serve high-resolution website images for retina displays
And a tool you might find useful...
adaptive-images dot com
hope this question is ok on stackoverflow. I want to use a photo as the background for the homepage of a website. The photo will be take up the entire page. However i don't know what resolution i should make the photo. I was thinking 1920 x 1200px so that people with 24 inch screen don't see the 'ends' of the photo. However is that big enough? I'm worried about the site looking ok on screens larger than 24 inches.
Also anyone know how i should optimize the photo so it loads as fast as possible? Thanks.
Overall, this seems to be a question of trade-offs. The better the resolution, the slower the page load for a do-nothing page. Is it worth the slow-down to have the better resolution and avoid pixellation?
Also, I think you're asking the wrong question, since a 24-inch screen can be in multiple resolutions.
I would approach this in the following manner:
what is the largest resolution you MUST have your photo look "good" on? Then make your photo that resolution. If 24" is your target, look at what resolutions this size monitor "typically" supports and target that.
What number of colors you want? (or perhaps b&w / grayscale). If you reduce the number of colors (preferably to "web-safe" colors), you can load faster with the same resolution.
A program like Photoshop (or Gimp) will probably give you the most power in tuning these parameters.
Do you care if only a portion of the photo displays when your viewer has a smaller window?
I know this isn't a cut and dried answer, but these things seldom are (IMHO).
For a solution that will work on most modern browsers, you will need to place the image in a div with a z-index less than the rest of your page (see: Stretch and scale CSS background)
As far as creating a 1920x1200 photo that will compress to a small size, I would recommend trying a smaller size (e.g. 960x600) and see if it looks okay on your 24-inch screen. There are many programs that will let you specify file size for your compression (e.g. FastStone Resizer) so you can experiment and see what is acceptable. In general, photos with less detail and/or color-depth will compress better.
Another problem you are going to run into is aspect ratio. Even assuming that your web-site is always opened in a full screen browser and not a window, sometimes that screen is going to be 16:9 ratio and sometimes 4:3. You could try to create an photo that has a nice 4:3 ratio "sweet-spot" in the center and adjust your div using some Javascript based on the current window aspect-ratio.
Is there a standard max for the width of the main content area of a web page? I want to maximize screen real estate without affecting usability. I've seen a lot of sites stick to 980px or less. Anyone have any suggestions?
Target either the 800x600 or 1024x768 resolution.
For 800x600 it is around 750px.
For 1024x768 it would be 970px.
I'm assuming you're referring to the wrapper width since you mentioned 980.
The most ideal solution is to not think of pixels at all and instead rely on ems/%s and scaling, be as fluid as possible so your design fits on small mobile devices and your elements heights are not fixed but auto. Example being: http://www.456bereastreet.com/
But if you're stuck with web designers who still think pixel and you know for sure you'll be unable to get them to try making images that are liquid/fluid, I would say shoot for 960 pixels in width so you have enough viewing area in a 1024x768 with scrollbars in IE6/XP, but this really depends on your audience and the majority of your audience's screen resolutions.
Research, such as that referenced here suggests that people have a more difficult time reading long lines of text. That's why I restrict my content width to 800px or so.
You have to first ask the question. Who is my audience?
There's no "standard", especially in this age of PDAs/smartphones/netbooks/smartbooks/kiosks/etc... - while it may sound cliche, the best thing is to design a fluid layout not depending on exact screen size.
The answer may change depending on your intended/anticipated user base, of course (e.g. assume 1024 px screen width leaving you with 980 working px - and consciously decide that you are not interested in supporting anyone with smaller screen resolution).
Another solution is to allow size layout customization by making it into portal-like with user having control of layout of the portlets (ala My Yahoo).
960 is a pretty common standard, and the rationale behind that figure is the fact that fitting on a 1024 pixel wide screen will allow a big majority of your users to see the content without scrolling. See here for one of 100's of sites that give access to browser & user system capabilities statistics for some initial inspiration.
But in the end, it'll up to you to understand the structure of your customer base - if your site targets iPhones, targetting 1024 pixel wide screens may not be your smartest decision.
Not sure about absolute pixel values, but one thing I'd make sure of is that the text columns don't get too wide. There is a number of characters beyond which reading comprehension is impaired.
1000 pixels in width, is what I use which fits into the minimum 1024x768 resolution used these days without a horizontal scroller at the bottom of your browser ....
Most statistics out there for browser stats show you the resolution of the screen.
Thats fine for Windows where browsers typically open full screen and most people leave it as that. So if the browser stats say 1024x768 you just need to subtract a little width for the browser chrome.
On a Mac however browsers typically dont open full screen.
What kind of width is a mac browser likely to be when it opens as such.
I'm thinking of a width of 960 as recommended by what-is-the-best-absolute-width-for-a-webpage. However I'm wondering if this is equally as good width for a mac?
I'm not sure when Apple last made 1280x768 laptops or screens anyway so its probably a non issue. It just frustrates me a little that most places I find statistics on screen resolution dont show you the actual available width.
Design away, my friend. The Apple display packs many pixels.
A window will open to fullscreen on the Mac, no problem. It simply conserves space when it can, unlike the PC behavior, which will fill the screen regardless of how much space the site actually needs.
In other words, the case where the Mac doesn't open the window fullscreen is the case where the user has room to spare. So those are cases you don't need to worry about. If a Mac OS browser has to go fullscreen to fit the site, it will. But when the site is only 960px and the user has a gorgeous 2560x1600 cinema display, it will stop at 960, enough to eliminate the horizontal scrollbars.
The reason people notice this behavior is because apple displays are often too big, so the fullscreen is often not needed. The smallest display Apple ships on any notebook is a roomy 1280x800. The smallest iMac is already 1680x1050. They only get bigger from there.
As far as choosing your dimensions, the normal considerations apply. Play to your lowest common denominator. Simply know that the screen resolution of even a modest apple display will be on par with the industry standard. If you're willing to go 990 or 960 for the PC, it will also be acceptable for the Mac.
(source: akamai.net)
Most of the designers I work with are more concerned with making designs too narrow for Apple users. They design in the 960 pixel realm so that it works for the larger audience, and then they try to find creative ways of showing a little extra love to the owners of that giant cinema display.
Sidenote: #Taylor Marshall asks a good question: "What if the widths are all set to 100%? How big does [the browser window] get..?"
Without any constraints, Firefox will simply go fullscreen, like the MS Windows behavior. Safari will expand up to a width of 800px, unless the width is already greater than 800, in which case it maintains that width and only modifies the window height. Of course, if there aren't any hard width values, then the design is a liquid layout, so the concern about designing for a particular width is somewhat altered. Usually good liquid layouts, despite being displayed correctly at any dimension, are nonetheless designed to be viewed at reasonable window widths.
Instead of fretting about absolute widths, why not do percentages, and give it a min-width so that it doesn't start to look too terribly bad at lower resolutions?
The min-width could be where your 960 or 990 comes into play.
The stats you've read are based on actual screen sizes of visitors. If you're looking for stats on what size the average user's browser is at, you'll need to look elsewhere. Also I never browse full screen on windows or mac OS, and I consider a design that's wider than 960px or so to be very annoying. (it's 2^16+2^17+2^18+2^19)
I'm feeling lucky for browser size. See the second chart.