So Im making a website and I have included a .css file to be able to move things more freely. I have made some items with position:relative and others I have used the absolutePanel(). I want to keep my layout as it is but when the window is resized it looks horrible. Any suggestions?
You should try to be a bit more specific on your question.
Some general tips though are instead of using pixels for the sizes of divs etc.(static design) use either percentages, vh & vw (view height and view width of the window that are being displayed respectively) or media queries #media (responsive design). To make your life a lot easier with responsive design though check out Bootstrap, and especially its grid layout system.
Related
I am farely new to both HTML & CSS (maybe 4/5 months experience.),
I have started developing several websites as a learning basis,
& then I realised
that all of my designs were not 'responsive', so subsequently, I have started to replace all my 'px' values with vw, vh, vmax & vmin.. I have run into some sort of brick wall with my learning curve and wondering if anyone else has experienced this or knows any good sources that could help enlighten me..
Using the 'vw' property is at first sight going well, when I change the browser size everything shrinks, as intended to the viewport width, but getting the vertical scaling of objects, divs, inputs & options is proving to be somewhat difficult. I have attempted playing around with calc() vmin, vmax, vh etc, but they don't seem to be interchangeable unless I stick all of these into css variables. I know that flex-box and grid are designed to be responsive but these still don't seem to do much for the vertical scaling on smaller devices.
I have heard of em's & rems as unit's for font but these are not "responsive",
in the same way Vw & Vh are. ie, changing size on window resize.
Is there something I'm missing, Youtube searches for responsive design only yield hundreds of results for both flex-box and grid. But nothing much for general scaling down of both height and width (proportionatly)..
the first main question is which one is better out of the two
for proportionate scaling
(Vmin or Vmax)? across a range of devices?
if I am currently not intending to use any media queries?
I've tried multiple variations of calc(vw -*/+ vmin/vmax) + px/em/vh/vw/rem..
but the vertical measurements still stay the same... Can Anyone point me towards a good resource or video on youtube for this subject..
I'm finding the inspect element/test by device app in firefox very usefull, but need a shove in the right direction....
Any Ideas??
The first thing would be to check if you have set the viewport meta in your index.html file. If not that should be your very first step.
Secondly before writing the css for a website, you should go through the flex box and grids in css. You could spare with grids but flex box is of utmost importance. Then you could go further and study a little about the BEM model for css. Playing around with percentages and REM’s or vh may not help as you would have a web page which would shrink and expand according to the content that you tend to render. You should therefore make not of the layout of your website and what all things need to stay fixed and what all is going to change when you switch to another device. You should also go through using min-height , max-height and min-width, max-width with flex box that should make your life easy. Good Luck!!!!
try to search about bootstrap because when it comes responsiveness of the website bootstrap is your friend.
Is there an automated way to scale height and width of elements defined in CSS based on screen sizes?
These days there are so many different screen sizes in the market, it is quite onerous to create separate CSS for each. Wondering if a same CSS can be used with an automatic scaling based on screen size. Say for example, the original CSS is built for 1200x800 screen size. If the page is opened on an screen half of this size, all css element in which height and width is defined in pixels, should automatically reduce to half. I understand it will not look good when the page is opened in a very small screen because everything will look tiny. However, the requirement basically is to automatically adjust the app screen to laptop, desktop and tablet screens.
For example, I have a div and inside that div there are 5 buttons (created using CSS). On smaller screens the button row wraps into two lines making it look very bad. This is just an example. Most other screen elements behave similarly.
As commented and approved by OP :
You have multiple approaches available, among them media-queries (million links around but here's one : http://css-tricks.com/logic-in-media-queries) and another one I like a lot, viewport units (see here for example : http://css-tricks.com/the-lengths-of-css Viewport Percentage Lengths). You are basically describing what is called Responsive Design (http://en.wikipedia.org/wiki/Responsive_web_design) --- Have Fun ^^
Maybe try this for responsive design without css 3 : http://responsejs.com
Media-queries are the way to go. As for the old browsers(IE <10), this is a great webpage with "polyfills" for those:
https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills
I was wondering what are you opinions about when coding css, when/why coding fixed or liquid style sheets?
I agree that fixed size style sheets are easier/faster to code because liquid requires more time in order to have all elements well adapting to their parents.
So, when do you chose liquid over fixed (or vice versa)? Why?
Update 2 I think the best practice now is design a site with responsive and adaptive capabilities for any screen size. Liquid CSS may not have the pitfalls that you would think such as long lines of text (instead the block of text position adjusts on-the-fly) - examples of Responsive Design - browser-side code where pages adapt to any screensize:
http://surrey.ac.uk/
http://bostonglobe.com/
http://thoughtfulweb.co.uk/
Adaptive design: server hosting the site detects browser type that requested the page and serves up appropriate page layouts e.g. mobile. This has pitfalls in that the user agent identifiers aren't always precise - e.g. many browsers include the mozilla string in their id, for example, so it might not always be best to rely on this data.
Previous answer
Liquid layouts (layouts that horizontally shrink or stretch to fit the horizontal width of a window)
Advantages: the content reformats on the fly to fully utilise the
Window width. Which means that the dilemma of choosing the most
popular fixed width e.g. 940px, 960px or 978px is not required. This
is particularly useful for small screen handheld devices which vary
slightly. You have to do less work in considering all possible screen
sizes.
Disadvantages: For the reason that the site will shrink or stretch to
fit horizontally, you cannot control the layout as much as fixed
width. Aesthetics and how nice the site looks will be less under your
control. You may find that my point about having to do less work to support all screen widths is not true after all - as here you are considering scenarios where the screen is really small and your menu navigation is all bunched up and ugly or too far apart on a large screen
Fixed layouts (layouts that are fixed and don't change to fit the available horizontal width).
Advantages: Once you have settled on the most popular width e.g. 940px, 960px etc. you would not need to test the site at different screen widths. The layout is neat and things don't move around, aesthetics, how nice things look remains constant
Disadvantages: Some users with small screens, handhelds may need to scroll horizontally to view your site if your fixed width is larger. Unless you also support a mobile edition too that those users can use
Have a look around at major sites - what are they using. To me it seems fixed widths are more popular, including stackoverflow.com
That said, look at this fluid site: http://derekallard.com/
Here, the developer uses fluid layouts to advantage by using layers of graphics that slide over each other as the site width adjusted in your window.
update: There is no wrong or right answer. Both Have merits. Media folk who have come from television, film and newspaper into web may tend to favour fix widths owing to their familiarity with those media having that.
It's not a matter of technique, it's a matter of decision making.
You choose liquid if you (or the client) WANT liquid.
I myself do NOT WANT liquid. Why? With a very wide window you get very long copy text lines, which are hard to read.
OK there are some other parts you must consider. Is your page intended to be accessible? Then you have to make a sort of liquid layout for the ones which zoom the page.
You could also look for responsive web design. The one that works in mobile browsers, too.
http://www.alistapart.com/articles/responsive-web-design/
When left with a choice, I rarely use liquid layout in anything except business style web apps.
I.e. for apps where the customer insists on lots of horizontal information in e.g. tables, I'll go with a liquid layout for obvious reasons. For more standard websites, I'll stick with fixed if at all possible.
When I do go liquid for the latter, I'll mostly still enforce a max-width on copy text, because I'm not particularly politically correct, and making the site a joy to read for 99% of visitors is more important to me than making it a (relative) breeze to use for a few - as long as I keep it accessible to those few. Like yunzen says, line length of copy text is very important to both design and readability. Don't let those lines stretch to infinity...
Mostly, my fixed layout sites will have different ways of accomodating the smaller screen size rather than just simple liquid stretching - moving side bars and such beneath the text, and possibly adjusting the copy text width to fit the device viewport. Sometimes, but not always, that requires css media queries.
(see e.g. http://www.quirksmode.org/mobile/viewports2.html)
Usually fixed layouts are easier to design and develop, also visitors are used to this kind of layout.
Fluid layouts need more planning and also do not fit in all kinds of web application. I do not use the fluid approach very often.
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 .
My designer keeps throwing out the term "liquid" layout. What does this mean?
Thanks for the clarification, I have always just called this a percentage layout, and thought he was saying that the pieces could be moved around, and that was liquid
A "liquid" layout is a site layout that expands to fill the entire available area as the browser window is resized. Typically this is done using CSS. Liquid layouts can be quite helpful for certain types of sites, but they also tend to be significantly more effort than fixed width layouts, and their usefulness depends on the site content and how well implemented they are.
From http://www.maxdesign.com.au/presentation/liquid/ :
All containers on the page have their
widths defined in percents - meaning
that they are completely based on the
viewport rather than the initial
containing block. A liquid layout will
move in and out when you resize your
browser window.
Basically, it's a layout of a web page that doesn't rely on a specific width specifications for elements in the page.
See the discussion over at Wikipedia.
It means a layout which adjusts dynamically to the browser (or whatever client) width and height, to make efficient use of all available screen space, as opposed to (mostly) fixed width layouts which are made to fit a common denominator resolution at that particular time (e.g. 800x600 used to be the norm for websites for many years).
See this:
http://www.time-tripper.com/uipatterns/Liquid_Layout
Liquid Layouts refer to the design concept of a website. A liquid layout will move in and out when you resize your browser window, due to is having percentages and relative widths in the CSS.
It just means that it will contract/expand to fill the browser's window size (usually the width), up to a certain point if things are done well. Otherwise text can get quite hard to read on big (24"+) monitors.
One of two:
The design will scale to the width of the browser (as in, if the browser was 1024px wide, the design will be as well)... although this does get quite fun when designing for 100px wide browsers (sometime designers will actually set a min-width though).
The design has a fixed width, but is set in a measurement using a relative size... for example "em"... so as the font size is increased, the width of the page increases.
A liquid layout is a method of CSS layout that defines all widths in percentages, so the areas of the page will grow/shrink when the viewport (browser window) is resized.
They're very useful if trying to create a site that will fit both large and small screens. They're a little more difficult to work it than fixed layouts, because you're relinquishing some level control over how everything fits in the page, and you have to pay very close attention to your content, to make sure it doesn't fall apart aesthetically on resize.
I would say liquid layouts are most useful for text heavy sites with a fairly basic column layout. You might also find a happy medium with an 'elastic' layout -- one that has both liquid and fixed areas.
In a true Liquid layout, your content expands and contracts to fit your user's browser window in a meaningful, calculated and intelligent way. So it's more than just setting your column and container widths to percentages.
Done well, this can result in a increase of perceived quality. Done poorly, it's a usability nightmare.
Going Liquid is a huge pain the rump. The pain is worth it though if the topic/client/product(s) you are building the site for have a strong visual quality to them (think summer blockbuster film site), require a certain fit and finish, or if it needs to display large chunks of data.
Note: I'll update this a bit later with links to good examples and citations for my claims