I have designed a website on my retina monitor, set at the highest resolution. On this resolution the site looks really great :p. However, when I view the site on a smaller 13" monitor, all the elements and the font are way too big and in your face.
I have done some research, and found two ways to try and show the website in a nice way across different desktop screen sizes:
Use a media query to Scale/Transform the body. However, this "feels" wrong and I can imagine this has some performance impact. Furthermore I can imagine this gives inconsistencies across screen sizes
Use ems across the board. I am not really sure what'd be the right starting point for this, but I have read that some people base everything upon their font-size. However, I would not really know how this'd work for images.
Can someone please tell me what'd the best way to make the website display nicely across desktop screen size.
p.s. The website is based on twitter bootstrap
I would suggest the second option. The way it would work is by setting the element font size in px, and using relative sizes for the containers and divs inside them.
For example
<body>
<div id="container">
<article>This is some text</article>
</div>
</body>
CSS:
html{
font-size: 32px;
}
#container{
font-size: 1.5 rem;
}
article{
font-size: 1.2 em;
}
CSS-tricks has a nice article on this - http://css-tricks.com/rems-ems/
As for image resizing, that can be done dynamically in JS based on window.width()
Related
I work for a publicity agency, where my boss designs mockups in Photoshop (based on his 1920x1080 screen), and where the website final layout must look 90% like his, very close. We don't use Bootstrap (or any css framework) as he defines margins and columns himself, so Bootstrap gets more in the way than helping.
We use a mockup image for 16:9 aspect ratio, that can be opened in the browser and fits perfectly if you're viewing it on any 16:9 monitor. When we move on to actually creating the html / css page, we're unable to achieve that effect, and rely on many media queries to 'fix' each bigger or lower resolution than the one it was designed in.
Is there a way to make an element - or the whole body, to simply scale from the original design, so that we don't need to do any media queries between screens that share the same aspect ratio?
This way, we would only have three media queries: One for 16:9, one for 9:16 and one for 16:10.
Additional Info: I'm looking for something that does similar to the transform: scale property, but that one in particular doesn't work here (using it causes problems with buttons becoming unclickable in some browsers).
....Technically, yes, but in reality, it's a lot of work, and won't really save you any time. Your best bet is to go back and start using Bootstrap. At least, using the cols and rows of Bootstrap Bootstrap is a fantastic tool for building responsive websites, for people who aren't comfortable building responsive websites on their own.
I... have a lot of things to say.
First of all,
If you're working on building websites, you really, really should have two monitors attached to your computer. Personally, I prefer having one small (1280x800) and one large (1920x1080) screen, because it makes me more aware and comfortable with responsive design. But that's my personal preference, and many people prefer two large monitors. At the very least, you should also have a 1080p screen, so you can work directly on it.
To answer your question directly, this strategy is not going to work for tablets and phones, because the aspect ratio on desktop computers is "landscape", but in mobile devices the aspect ratio is "portrait". If you've ever tried to view a 1920x1080 image in mobile, you'll immediately see why this a problem.
HOWEVER. If you're looking for a way to scale the entire website based upon the body, ...the approach that comes to mind first, REM, is quite popular, and I assume you've already tried it, but... I'll clarify, just in case.
You can define everything using percent, EM or REM (h1, h2, h3, p, borders, padding, margin, height, fontsize, box-shadow etc... Everything. The phrase px should not appear in your stylesheet.) , and then scale the website with a simple series of media queries like this:
#media( min-width:1200px){
html,body{
font-size: 14px;
}
}
#media( min-width:1400px){
html,body{
font-size: 15px;
}
}
#media( min-width:1600px){
html,body{
font-size: 16px;
}
}
#media( min-width:1800px){
html,body{
font-size: 17px;
}
}
Which will cause the entire website to scale. Obviously, if you're working with a theme or framework(Like Bootstrap), you'll need to modify that framework to use REM too.
#3.The last thing that I have to say is that most websites DON'T look exactly the same on 720p screens vs 1080p screens. For example, take StackOverflow itself. This is what the current page we're looking at looks like:
div#left-sidebar {
width: 164px;
}
#sidebar {/*Right sidebar*/
float: right;
width: 300px;
}
div#mainbar {/*Center section*/
width: calc(100% - 300px - 24px);
}
#content {/*And this wrapper around it all*/
max-width: 1100px;
width: calc(100% - 164px);/*left sidebar*/
}
If you look at it, the entire website is more or less max-width:1480px. If it gets smaller than that, the sidebars stay the same size, but the middle section has width:100% and shrinks to fit the screen.
At around 1000px, StackOverflow gives up and hides the right sidebar, because there's not enough space, but it STILL doesn't change the size of any fonts or icons, ever. (On any screen size, from 1920px all the way down to tablet.)
A good designer should keep this kind of "responsive design" in mind, and give his programmers a design that can shrink cleanly, in this way.
You’re looking for vw css unit. (Not sure if you need vh as well).
Checkout this website for an intuitive understanding of how those units work: https://sparanoid.com
vw unit is relative to viewport width. So if you code everything in vw. your website will behave like an image, just what you ask for.
Normally when I am creating a responsive site, I do the normal thing of setting a viewport to the device width, and creating different layouts for different screen resolutions.
But I'm doing a few tweaks to an old site that has big chunky buttons, default font sizes and a simple layout, and actually it looks quite usable when viewed as a desktop-style fixed-width layout, even on small mobile devices.
Rather than specifying a viewport and completely rewriting all the css to make a series of mobile-friendly versions, I'd really like to just increase the main body element font size a little more for viewing on a screen that is physically small: for this particular layout, this would be very usable - if I could work out how to do it!
Is this what -webkit-text-size-adjust: is for? It seems like it should be an easy thing to tweak, but all my googling turns up full responsive design approaches, which are overkill for this particular small task.
A way to make it is to detect the screen width with javascript using the window.screen.width property, and then apply the styles that you want from there.
Here's an example using jquery, however the same can be achieved with native javascript if you don't want to use a library http://jsfiddle.net/UXV7Z/
You can apply as many filters in resolution as you need, just like you would using media queries
DONT use javascript for such a simple task to accomplish with modern CSS, just use:
font-size: calc(80px - 3vw);
and adjust the values accordingly. That will icrease the size on smaller devices and decrease it on wider devices, which makes sense for buttons and footers and what not, but if you want to decrease the size on smaller width screens for text like large titles that overflow just use:
font-size: calc(25px + 0.35vw);
Once again adjust the values to fit your needs. And see here to view the browser support for the CSS calc() function. All modern updated browsers support it
I am new to css.
I wanted to know which is the best standard technique to keep the page intact even when the browser size changes, the page is zoomed in or is used for any other screen size. I have tried centering my layout using a container but it gets disturbed when the page zooms in (i know it will, but all what I want is that the elements don't go out of the screen and if possible stay in almost the same position).
So what is the best and easy standard technique in css to achieve the
Thanks for your help.
The newest, cutting-edge method is called responsive web design. It's a bit complicated, but it's looking like the way to develop for multiple screen sizes. It is especially useful for small websites.
Check out some examples here: http://mediaqueri.es/
And some more in-depth information here: http://www.alistapart.com/articles/responsive-web-design/
If you set a set size for your body element anytime the browser is re-sized nothing within the page will change.
So the CSS you want to add is as follows:
body {
width: 960px; //being the size screen you want to accommodate your site to
}
Also this may help you: Commonly used pixel sizes for webpages and their pros/cons .
I am trying to develop a mobile version of my web application and I am having trouble getting it to look good on multiple browsers. I figure if I use some device capability detection I can dynamically generate widths and font-sizes based on a particular devices screen size. The problem is that it seems like a mobile browser doesn't treat 1px of CSS width equal to 1px of screen width. On an iPhone with a screen width of 320px, a body tag that is 320px wide takes up only about a 1/4th of the page. With no real frame of reference, it makes it hard for me to say "On a screen of 320px wide, make the font 16px" or something along those lines. Is there some general rule of thumb I can use to calculate the real browser width in CSS, or some calculation using multiple device capabilities that will help me generate dynamic CSS more effectively?
Thanks,
Mike
Try defining sizes and font weights in relative units. I would give % and em a go. Many mobile browsers try to scale everything down so that they render normal websites nicely. You may find you need specialy meta tags or the like to controll these browsers.
Google Labs Browser Size
I've always preferred fixed-width layouts over fluid-width layouts, one of the main reasons is that I'm able to better understand how the whole picture will be without having to worry about the screen resolution.
But now the "picture" has changed, there is a high discrepancy between the lowest and highest resolutions used by most users nowadays and they seem to be here to stay.
I've a netbook that only supports 800 pixels or 1024 pixels wide; I also have a 22" monitor that supports 1650 pixels and, 24" monitors that support 1920 pixels and more are becoming pretty common.
I've pretty much "ignored" the 800 pixels users for some time and I've been developing with fixed 950/960 pixels wide, I also notice that popular sites (SO for one) either use this approach or the fluid one.
For text (almost) only websites (like Wikipedia) I don't see a problem using the fluid system but what about all the other websites that depend on images / video to create interesting content? Social Networks, Classifieds, and so on... What is (will be) their approach to address this issue?
Seam Carving seems like a good option for the near future but it hasn't matured enough (neither browsers nor jQuery nativelly support it at this point in time), I also feel like users wouldn't understand it, get confused with it and as a consequence abandon the website.
The de facto standard on the web is still 1024 pixels wide, and leaving 980 pixels unused in a 24" monitor just seems plain odd not to say wrong. So what are our options?
I would love to hear what you think about this and your experiences with both fluid and fixed systems.
PS: Popular websites using either one of these systems are also welcome, I'm specially interested in seeing non-text websites that use the fluid system.
EDIT: I just saw this answer and I got kinda confused about the difference between fluid and liquid layouts, aren't they supposed to be exactly the same?
I generally think that fluid layouts are a good idea. The problem starts when your fluid layout starts to get really wide with high resolution screens - there is a limit to how far the human eye can track horizontally without losing the vertical positioning. That is why newspaper columns, for example, are always rather narrow.
Try to look at wikipedia in a high resolution screen, and you'll see that they limit the maximum width to something around 800-900px - more then that (assuming a rather standard 12pt font) and people stop being able to read until the end of the line and then effortlessly find the start of the next line, and the whole thing breaks into a mess of eye and neck strain.
On web sites I build, I use max-width to limit the maximum width of the text content (and in that I also include images and other stuff) to about 720-800px, which with sidebars and such can possibly get to around 1000px. If the screen is wider then that, then either center the content of left align it (right align on RTL web sites) - both work well.
But you have to design your layout so that it flows when the available width is narrower - this is very useful for people with netbooks (which are rather popular now and I expect will become more popular in the future), smart phones and even small screen mobile devices. Such mobile devices more and more feature standard browsers and you should address this in your designs - even if a mobile browsers can reduce your website somehow, the "mobile mode" usually does this by messing up the page and killing your intended user-experience.
leaving 980 pixels unused in a 24" monitor just seems plain odd not to say wrong
I’d disagree here. If you’ve got a monitor with that high a resolution, you’re probably not running with a maximised browser window. And even if you are, are you really fussed that the content’s all in a fixed area in the middle? Really?
As long your site has a decent, useable layout, I don’t see the problem with space either side on high-res monitors.
There are ways to create different #media rules inside of a stylesheet—W3C has something on this—and although it's a big Schroedinger's Cat whether the handhelds' browsers will obey the rules, it's fairly safe to assume that, even if they don't, they have big enough and well-ratioed screens to just use a scale model of the site as it appears on desktops.
Seems to me that it was in the devices' manufacturers' best interests to make them compatible with web sites that predate the advent of such devices by 5-10 years.
And if not, it's their problem.
I approach the problem from a different angle. Have a fluid layout but give it a minimum width (rather than a maximum width). You can achieve this with CSS.
The problem with the images is not such big. What you do is the following:
Upload your image at the maximum size you expect to have.
Make the image fluid as follows:
<img src="http://example.png" style="width:32.5%">
As you resize the page the image will re-size itself at the percentage width. Just make sure that you don't have any width or height attributes in the image. I call it superlastic :)
Fluid layouts were the answer before Responsive Design support in browsers came out. No need to use fluid or elastic layouts anymore.
http://lessframework.com/
https://github.com/thatcoolguy/gridless-boilerplate
There is no right answer to this question as no two design goals are ever alike. Fluid layouts make any semblance of typographic control virtually impossible, but not all designs need or want it.
No collection of "best practices" will ever equate to an actual design education, and not all users feel compelled to blow their browser windows up to fill the entire screen, either.
Most informative discussion on layouts I have read so far is in Andy Budd's CSS Mastery book. If you get a chance, do read it. I think it's a must have book on CSS (intermediate level). It looks like the layouts chapter is available in article form here.
http://www.webreference.com/authoring/style/sheets/css_mastery2/
Another link :
http://www.smashingmagazine.com/2009/06/02/fixed-vs-fluid-vs-elastic-layout-whats-the-right-one-for-you/
Liquid and Fluid are two different names for the same technique.
HTH.
I think it's better to have a maximum width of the layout, you can change that with Javascript.
A good example of that is this layout, look what happens (in Firebug or something) with the layout if you change the width: http://tweakers.net/
They have chosen a width of 1208px and make it smaller with Javascript when the width of the browser changes. With Javascript disabled, the website is still 1208px wide, which seems not to be a problem anyway.
EDIT:
The first width of the website will be like 900px. With Javascript you will check the width of the browser and you give the a class with the closest resolution to your browser width. For example: the browser width seems to be 1100px, so you give a class 'res1024', or the browser width is 1080px, then you give a class 'res1100'.
This will be your CSS:
#wrapper {
width: 900px;
}
.res1024 #wrapper {
width: 1000px;
}
.res1100 #wrapper {
width: 1080px;
}
I hope it helps you :], you can ofcourse change a lot more with this body class, like:
.res900 #menu {
width: 100px;
}
EDIT 2:
You can handle images the same way:
.res900 img.fluid {
width: 200px;
}
.res1100 img.fluid {
width: 300px;
}