I have created my website as a fixed layout, with a width of 1600px,
but the webpage on a smaller resolution looks too big.
What am I supposed to do to make it looks good in every resolution?
Thanks for help
Use relative measures, like width: 100%. You can constrain this even more by using min-width and max-width.
Apart from that, you can use CSS media queries to make styles that only apply if certain conditions are met, like a minimum or maximum width. If you use that, you can change the whole look and feel of your website, for instance by hiding parts on smaller devices or change from a 2 column to a 1 column text presentation on smaller devices.
A percentage-based width would change the width depending on the screen size, but you should also use min-width to ensure the page doesn't become too thin that it ruins your content.
Your options:
Use a narrower fixed width. Staying under 1,000 pixels is fairly safe though not perfect
Use percentages for page width instead, though this is difficult if you need to have a set width for child elements to look right
Do a combination of the above and use media queries in your CSS to make your site responsive. It'll fit every screen width you specify AND you'll have full control over your layout at each trigger point.
Here is a great resource for learning about responsive sites - this is the way to build a modern website, so though it might seem confusing it's worth every minute you spend on it.
http://bradfrost.github.com/this-is-responsive/resources.html
Good luck.
Related
This is a follow-up question to one I asked before:
"CSS - elements position when the window size changes".
The issue was - How to avoid the elements from being pushed aside when the screen gets smaller.
The answer was - use static width.
Static width indeed solves the problem, however it causes another problem (now we get to my follow-up question):
Let's say I use a picture as a background for the headline of the site and another one for the footer.
On the one hand I want them to always take the whole screen width but on the other hand I don't want them to be pushed aside when the window displaying the site gets smaller.
Using static width will cause different display in different browsers or in different versions of the same browser - will not always take the whole width. (there isn't one static width value that is good for all cases)
Using width: 100% seems to be the solution but then I find myself where I began.
How can I accomplish both?
Thanks.
This is the reason that we have css media queries and max-width, max-height attributes
Media queries allow you to change the css depending on how big the screen size is. Plus they can do a lot more.
http://www.w3schools.com/css/css_mediatypes.asp
What I would do is design your site with max-width: someamount, and width: 100%. Once your finished, then worry about making it look better on smaller screens.
Designers usually go one of two ways when designing a responsive website. Either design for desktop size screen first, then adjust for the smaller sized screens towards the very end. OR design for mobile sized screens first and then the larger screens towards the very end.
I make use of percentages by specifying the width of elements I want to stretch and percentages when specifying "left" "left:40%;" for example and a relative position. This allows elements to move with the page when it's resized and stretch but at certain resolutions sizes the elements don't entirely stay in place. Am I stuck using media queries for this issue or is there another way? I'm still using media queries but I also don't want my design breaking so early before reaching breakpoints, I want it to be as flexible/elastic as possible before having to have media queries kick in.
I think instead of worrying about those wacky sizes where your page looks funky, you should think about the most common screen sizes that are actually used.
I know exactly what you mean about those breakpoints. That's why I use screenfly to test my site on the most common screen sizes and work from there.
And if your site elements aren't maintaining your desired positions, then you are probably calculating the percentages wrongly. Here is a great article that helped me with fluid layouts and how to set up the percentages and what-not: http://www.creativebloq.com/css3/create-fluid-layouts-html5-and-css3-9122768
Use float: left with a percentage width instead, and that should accomplish what you need. If you're using left: 40% for an offset (gap or spacing), try using margin-left.
I'm learning the new "Responsive design", and one of the first things I understood is that we should use percentages in defining whatever we could define, most importantly, the width.
Let's say I have 2 inline-block divs.
<div>
//Left div
</div>
<div>
//Right div
</div>
The first div, has a width:50%, the second div has a width:40%, everything seems good here, they are beside each other, and when you resize the browser they will get smaller.
So that we stop them from resizing too much (where things become unreadable), we should use min-width in pixels.
If I set min-width:200px; for the first div, and min-width:100px; for the second div, and when I resize the window until the second div becomes under the first div, everything seems good.
But if I resize MORE and MORE, the width will stay fixed because the browser size is less than the min-width of those divs, which will lead to the creation of the scrollbar.
I am resizing so I can test how things should look on smaller resolutions (phones, tablets), am I missing something here? Is this where everything stops and the role of media queries begin? or there's more that I can do to fix this?
JSFIDDLE
Is this where everything stops and the role of media queries begin?
Essentially, yes. Media Queries are what you need to use when you feel that your design can no longer squeeze in to the space you're providing it. At the point you're talking about, roughly 300px window size (plus margins?) you would want to use a media query to change the way you display those divs, perhaps so that they were 100% of the width of the viewport, and thus stacked one on top of another rather than side by side. This would effectively over-ride the min-width in practical terms for your example.
What you want to achieve is a design that works regardless of the viewport size, and the moment that making the viewport too small, or too big, means that the layout is hard for the user to use or read, then media queries provide the best way right now to "reset" the layout to re-inject usability for that new set of dimensions.
I would say you don't necessarily have to worry about setting a min-width; though there's a strong argument for using them to take in to consideration internet explorer, as it won't deal with media queries in it's older versions.
What you are looking for is known as responsive layout.
Here are couple of reference links that might help you to achieve responsive layout.
http://css-tricks.com/snippets/css/media-queries-for-standard-devices/
http://www.elementfusion.com/tutorial-optimizing-your-website-for-mobile-devices
There are many types of display that people use, so it is hard to expect what resolutions will your user use to view your site. To avoid this problem, I am thinking using percentage instead of pixels, em and pt to define the web layout. However, is this a good practice to do this? Including using the percentage, eg 80% for the main wrapper ?
I know it is hard to do it when it come to determine the width of the inner element. I'll have to calculate the percentages based on the each div's parent. How do you guys cope with this problem when it come to different browser's resolution?
Css media query is best solution for this check this http://css-tricks.com/css-media-queries/
There's obviously debate between fluid and fixed layouts, but fluid layouts can work very well as well.
An example is smashing magazine (try resizing your window with the site loaded).
I believe that it would be a lot easier if you use a framework of some sort. If you have used any grids CSS framework before, you can have a look at Liquid Blueprint. This allows you to work in a grid based manner, but have the page fluidly resize according to the browser's size.
I use percentages for every width within the outer container but have min-width: and max-width: for the container itself, so it scales a small amount. Say 960px for min width and 1160px for the max width. This way it works larger screen sizes better and if I want to I can go back and make it responsive because its already all in percentages.
I had to redo a website from flash to html/jquery.
Everything looked great. Until I tested the site on a netbook where the screen resolution is much smaller. All the elements were misaligned or didn't stretch as I wanted it to. Or there were scroll bars everywhere.
So, How would do I make it stretch or resize properly,
Is there a property which I can set somewhere that would resize everything proportionately?
You should use heigh / width in percentage(%) rather px / em. change the css file.
Is there a property which I can set somewhere that would resize everything proportionately?
No, I wish :P You'll need to redo the layout to make it liquid or use media queries to make it responsive to different resolutions. I'm afraid both solutions could be pretty complex.
Is there a property which I can set somewhere that would resize everything proportionately?
Everything? No. Font sizes won't adjust based on window size (at least not without JS).
You can set the widths of most things using percentage units in your stylesheets, but even then there will be a point where things will break down.
The current buzzword is responsive web design (I can't comment on the quality of the links from that page) in which media queries are used to provide different designs for different sized browsers.
The property called Media Query we mostly use this property with Responsible Web Design. In which we tell browsers change the specific css property at that particular screen size.
Check this article for more http://css-tricks.com/6206-resolution-specific-stylesheets/
& for Responsible Web Design mostly use value in Percentage instead of Pixels .
Check THIS website for more reference.
unfortunately there is no "magic" which scales things up/down. i can think of some guidelines:
Use relative widths for things (percentages) instead of absolute value
no hardwired sizes, keep them in separate CSS documents
work your way up: choose a minimum resolution, work upwards from it. it makes sizing things much easier.
The question was to RESIZE not to REALIGN. Using percentiles will only change WHERE the HTML elements show up on the page. It will not change their SIZE.
you can use with and height in percentage to set your screen for all resoulation..Give the 100% width to the body and the div you want give 100% width.