With every responsive website, there's a certain point where it would be unreasonable to allow the width of html to shrink any further (on a computer screen, not mobile or tablet).
Is there a certain standard number in pixels that web developers use as the smallest possible computer screen width, which the html shouldn't be allowed to shrink below?
In other words, it would be the min-width of html, if the width is 100%.
Try and avoid any limits on the responsive design, if you find things to crush up find ways to minimize the amount of data on screen either by removing or collapsing content.
When looking for a min-width, we're looking for the smallest devices we're likely to encounter. So, unless we're targeting smartwatches (as #Tammo) said, in which case we'll be creating an entirely different interface optimized for the smartwatch, the devices we'll likely be looking at are smartphones.
Android: Android compatibility guidelines mean that, at minimum, any Android phone will be at least 240px wide (this question lists those guidelines and a few, relatively rare examples). Min: 240px
iPhone Even the first iPhone was 320px wide, and they've only increased in resolution since then. Min: 320px
Considering those two minimum resolutions, the smallest resolution you're ever likely to see is 240px, though this is so rare that 320px is much more likely to be a better min-width candidate, as it gives more layout options to design a better site.
Related
I'm new to responsive css. I've learnt a lot about media queries, but I still have not figured out which is the best way to catch if the user is using a mobile or not.
The media query to identify a mobile user uses the device-width, but which is the best value to set the breakpoint?
When using my android smartphone with Google chrome, the width of the page is about 400px, even thought the real resolution is full hd, 1080px width. Does this depends form the browser, or what? I saw that someone uses the em mesure to set the breakpoint, is this more accurate? I'd like to know about the handheld property more, too.
Finally, after having read lots of different informations, can you please tell me which is the moste effective way, the best media query to catch if the client is mobile or not? Thank you.
The media query to identify a mobile user uses the device-width, but which is the best value to set the breakpoint?
There are a few theories out there on how to handle this. Some people go and find the most popular device widths and set their breakpoints at those places. This is great if you know for certain what most users on your site use. However, the downsides are that you have to mold your design to those widths and you have to continually update your code as new devices come out.
So your breakpoints would be something like:
// iPhone 6
#media only screen and (min-device-width : 375px) {
// styles go here
}
// iPhone 6+
#media only screen and (min-device-width : 414px) {
// styles go here
}
The other theory is to make it fully scalable at any size regardless of what the device is. The upside to this is that you can insure that your design looks great on all devices. The downside is that it makes your code a bit more bloated. the breakpoints here would be wherever you need them. I personally use this method but start with break points at 1200 and go to 1100, 1000, as needed. If I'm going mobile first I'll start with 320, 350, 400, 500, etc...
When using my android smartphone with Google chrome, the width of the
page is about 400px, even thought the real resolution is full hd,
1080px width. Does this depends form the browser, or what?
The device width has many factors to it. But the device width is basically the number of pixels across that the browser is displaying. There's a little more to it than this, but your best bet is to Google device widths.
I saw that someone uses the em mesure to set the breakpoint, is this
more accurate?
Nope. It's just a way of subdividing from a parent element. Until you have more time to research this, stick with pixels.
Finally, after having read lots of different informations, can you
please tell me which is the moste effective way, the best media query
to catch if the client is mobile or not? Thank you.
The best way to do this is to determine your break points. You cannot target mobile browsers specifically using CSS. You can only target the attributes of those browsers (width, height, orientation) so you can know that iPhone6's are 375 pixels across in portrait. So you can target them using that width. As Allan said, you can target devices with Javascript or server side libraries and add classes that way. But IMO it's better to stick with device widths and save those for situations where you're absolutely stuck.
I have a blog that uses auto width of a screen (responsive design). Most blog posts are long texts, over 1000 words + comments.
My questions is - from user experience (reading comfort) / usability point of view, is it better to:
a) limit the screen width to, let's say, 1024px (by some CSS, like: <body style="max-width:1024px">
b) leave the body width to auto and let user decide when/if to resize the screen by himself.
Responsive design is really intended to allow users on non-PC devices (tablets, phones) to view the content without zooming or manipulating the screen much. It's not really relevant for PCs because of the variety of resolutions, monitor size, and even number of monitors.
Keep responsive if you know your readers are predominately on mobile devices. Those who are reading it on a PC via their browser can typical resize, zoom in/out, and even use scripting to change the font if they are struggling to read your content. Not to mention a number of PCs visitors may use an RSS feed reader rather than visit your site directly.
Good design includes a structured method for reading content such as whitespace, reasonable margins, and a font-size that isn't overly large or miniscule and hard to read.
If you have those things going on then auto-width is prefereable to fixed width where the multitude of devices can render it unreadable.
What are the most commonly used pixel sizes (primarily widths) and what are there advantages and disadvantages?
How can I best find a happy medium to give a good experience to people with a wide variety of monitor sizes?
An answer with an explanation rather than just the size would be greatly appreciated.
the most grids use a width of 960px. (When the design has a fixed width).
When you take a look at global statistics 1024 range resolutions are still the most common: http://gs.statcounter.com/#resolution-ww-monthly-201006-201106
Do not use 1000 width. (You have to count in the border width of the browser and the scrollbar, in certain browsers / OS they are larger then in others)
I don't think there is a ultimate resolution that's why you should check the statistics on the concerned webpage (if the page already exists), to decide what resolution is most appropriate. If you can't do this you can check stats for you target market on http://gs.statcounter.com/
Or even better use responsive webdesign: http://www.alistapart.com/articles/responsive-web-design/
Since max- and min-width attributes in CSS, you can target whatever resolution you want, if you have the time / budget for it of course.
960px width is a good standard, as others have already elaborated on.
However, one should keep in mind that websites are viewed on a lot more than just desktops these days, so the answer could vary based on what the site is being styled for. For example, 960px would be a poor width for a mobile stylesheet.
One resource that could help you is www.resizemybrowser.com. (There is a similar tool built into Firebug.)
At the end of the day, I think 960px is a good standard, but really, "it depends". :)
960 is a standard for fixed-width websites. It is to ensure that 1024x768 resolution will pick it up easily. As for height - it does not really matter.
In general, for a fixed-width website, that is meant to be read on a computer screen, nowadays, I'd say around 1000px (because there's no 800*600 resolution anymore and the least you can find is 1024*768).
You should really aim for an extensible design (generally harder to do though).
Out of experience, for the web i would say a width greater than 850 and less than 1000 px preferably in the 900's and a height of around 750 px, but bear in mind that the height would be variable in case of dynamic content. so the height could be set to 100% or auto.
and best to align the website in the center, via the css property margin: 0 auto;
The most common size is between 900-1000 pixels there are some good sources for screen size useage which most people tend to desgin for the largest group. mostly its assumed anyone with a 800 by 600 screen wont want to be doing much business. ie strapped for cash (big generalisation)
I won't consider only the desktop monitor resolutions. Nowadays you can browse websites on almost any device, and is fairly common for people to browse also with their mobile phones and tablet PC, so you really should consider them both.
This could result in a different site version for different devices, or a site layout that is ableto accomodate based on different sizes. This is something you have to consider when first thinking about the website you are planning to do, since not every website is suited to have a layout of this type.
An adaptable layout has the added benefits that it will be good even if new devices with custom (non standard) resolutions came out, you won't have to worry about checking it in those new devices because it will fit ok (if the layout was done right).
Anyway my standard minimun width is still 960px for desktop monitors, and for an adaptable layout I usually choose a max-width for really huge monitors (think about viewing a site which extends for the entire monitor width on a 2500x1600 monitor... gosh) of about 1200px, and a 100% width if the browser size is less than that, to allow the website to fit good everywhere.
I am creating a website and would like to get the opinion of some of the more experienced web developers.
How does one create a website where the element style attributes (padding, margin, height, width, etc) are appropriate for the users screen resolution?
With CSS i get to choose one value and that is the final value which will be displayed for all users, regardless of their browsing resolution.
For example, say i would like an image to be displayed 10% to the left of its container i would do the following: padding-left: 15%; Now, that may work fine for some resolutions but for others i may need that value to be higher.
What do more experienced web developers do in regards to screen resolution differences?
It sounds like your goal is to have your layout look literally the same at any resolution, which isn't really practical. Remember that images scale poorly! What most designers do is use percentages where possible to allow the layout to "flow" to fit most resolutions while remaining attractive.
If you analyze (for example) Stack Overflow. you'll see that it is a fixed-width set that is itself centered in the browser. Apple does the same thing, with some art elements that are displayed gracefully at any window width. It's an artistic problem, and I'm not sure the answer can be given with any more clarity than that.
It depends entirely on your design goals.
Most designers use fixed-width areas and let it center on the screen.
In some cases you can use CSS media-queries to apply specific rules to different types and sizes of screens (browser support is limited).
You can use min/max-width to handle many cases of content growing too large or small - but there is no equivalent for margins.
SVG graphics can be used to provide scalable images that look good at any resolution.
Some companies provide an entirely separate site for mobile users.
There are other tips and tricks but in general most designers avoid these issues by using fixed-width layouts - even though that's not always ideal.
I usually define those styles in em units, which are relative to the font size. So, increasing the text size increases padding & margins proportionately.
I am developing a website.
I heard that it is best to have a website with a fixed width.
What possibly could be the best fixed width I can allocate to my website ?
As Yahoo says:
* #doc - 750px centered (good for 800x600)
* #doc2 - 950px centered (good for 1024x768)
* #doc3 - 100% fluid (good for everybody)
* #doc4 - 974px fluid (good for 1024x768)
I recommend using yahoo styles and follow their advice.
Another helpful resource is Display Browser Statisics from w3schools.com.
While I agree to a point with those who say variable width has its benefits, I find that unless there is significant content, when a site stretches the content winds up looking pretty sparse as it's stretched out to wider widths. It's for this reason alone that many of my client request fixed-width skins. Keeping a site narrow can help frame the content and maintain a more 'constant' appearance (when that's a concern). Usually, when designing fixed width sites I use the stats over at the W3C for the most popular resolutions. Currently, I've been designing with ~980px wide, this allows for 1028 wide, with scroll bars and some background to still be seen. However, I am noticing a shift in statistics towards wider resolutions as more people adopt wide screen monitors.
However, it really does come down to what you feel is a good fit for the site, content and client.
960 Grid System argues that 960 pixels is a wise choice since the number has so many divisors. I am not sure that I agree, but they sure have an impressive list of demo web pages on their site.
You can find a link to a fluid alternative at the bottom of the page.
In my experience the fixed vs. fluid debate seems to be a designer vs. programmer discussion. Designers generally prefer a fixed layout because that will give them more control, while programmers generally prefer a fluid layout because that will let them choose the width they want, by setting the width of the browser window.
Ideally your website should scale with the width of the screen resolution. But that is difficult in most of the cases. Since most of the users still use 1024x768 resolution, so any width such that all the content appears on such a screen without needing to scroll is a good width.
Where did you hear that? A website with a fixed width comes with the problem that it (most times) only looks good where the screen suits the width. Think of a website with a fixed width of 768px, how would that page look on a resolution of 1920x1200?
You should develop websites that scale with the browsers resolution.
Here is a little hack that might come in handy. On the larger screens I find that not having a 100% width is good as the amount of horizontal eye scrolling is more than what is comfortable. About an A4 or foolscap page is what people like their content width to be.
However on very small screens if you set your width to 70% or 80% you will be wasting valuable screen resolution. So workout what is the smallest width in pixels that you will allow - for argument's sake let's say it is 800px.
Create a 1x1 pixel image the same color as your background. Then put this image into your content pane (div, table whatever you are using for layout) but set width="800px" height="1px", this will force your content to always be at least 800px wide but not cover the fullscreen on resolutions that have width greater than 800px.
As I said it's hack, and it may or may not be exactly what you were looking for.
Because websites can appear in any number of browsers, on any number of devices, at any number of resolutions, (phone, netbook or cinema screen?) a fixed width is a kludge. Kludges can work, but it would be better to design for a purpose, instead of deciding on some arbitrary rules and then sticking to them without really knowing why.
Don't just go with 1024px because most people can handle that in most cases. Know what you're trying to achieve, and use that to inform your decision.
So, who're you targetting, and what do you want them to do?
This kind of question really has to do with theming/templating and if you are using a CMS like drupal (and many others) can be flexibly handled to provide you anything you want. Fixed or fluid - whatever. You even can let your users decide.