Im trying to make some sort of liquid-fixed weblayout with CSS. The problem is that the site isn't very big, so when users with big screen resolution visits the site it looks very small and empty.So I need the menubar(which is located in the bottom) and some of the main elements to use some more screen space, when visited with larger screen resolutions. Sort of "scale to fit" can anybody help me out please?
My CSS styling as for now is just made as a fixed weblayout.
Read this: http://www.alistapart.com/articles/responsive-web-design/
and try to avoid using PX for widths, use % more :)
You might find this useful too, if you are looking for a cross-browser method for responsive web designs. It's called Respond.js:
https://github.com/scottjehl/Respond
There are also some good snippets and theory in this article from Smashing Magazine:
http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/
Here is some more information from WebDesignerDepot:
http://www.webdesignerdepot.com/2011/09/the-ultimate-responsive-web-design-roundup/
EDIT: Updated with a nice new anything and everything roundup from WebDesignerDepot
Related
I've finished a layout for the website I'm designing using DIVI and it looked perfect on my 1280x800 laptop resolution, but when I tried to display it on the bigger resolution (in this case 1920x1080) a lot of the elements (mainly the ones with left or right margins/paddings) were out of place. I've tried using percentages instead of pixels as my margin/padding values, but gave the same result.
What would be the best practice in going about designing responsive CSS layouts? Should I define fixed values for width of the containers? Will that solve the issues?
Should I focus on media queries? Define values for each resolution? Then again, there's the issue of resizing the window which again would make the whole media query solution obsolete. What are your suggestions?
RWD (Responsive Web Design) is an argument too broad to give you a single answer. Personally I love building my own web pages from scratch, without any page builder or something like that, and this's the tip I give you: first, try to build your own web pages by hand!
Three guidelines I can give you to build a responsive website are:
Use percentage values, no fixed values;
Use media queries;
Use the display: flex property to adapt the layout of webpages when the screen width changes;
With these advices I think you can build easily your responsive web pages.
There are many other factors to worry about: search, learn and get your hands dirty with code!
Preface: I am not a developer, but I was able to figure out enough about CSS to modify the twenty twelve theme for desktop browsers into this website: http://www.abcllc.org
Now that I have that looking the way I need it to, I've turned my attention to mobile. The theme has responsiveness built into it, but when I access the site from a mobile device, it scrunches it way up into the left side of the screen. Can I set a minimum width for mobile screens, or set it to auto-fill a mobile screen? The only thing I've figured out is the cutoff width between mobile and a regular browser (which I set to 640px).
I found varying threads throughout the interweb with people having the same issue, but with no answers. Any help would be greatly appreciated!
You can check out mine and see if that helps.
http://www.fossfolks.com/
My site is by no means the best example of css and design, but there's a lot less going on and it might be easier to see. There's a link to the stylesheet in the source. My current struggle is getting images to resize (width AND height) based on a percentage of screen width; I've not been able to sit down long enough to make it go.
I often find myself in the need for matching up my webdesign to some reference-image. I used to use the PixelPerfect plugin for FireBug, to overlay an image on top of my design - however these days I mostly develop in Chrome, and there isn't a comparable tool to PixelPerfect.
My perfect tool would be some kind of HUD display that would overlay the entire screen, so I could use it disregarding whatever browser I'm currently working in.
How do you match up your webdesign to make it pixel perfect? Any tools and tips is highly appreciated.
How do you match up your webdesign to make it pixel perfect?
Don't, seriously.
There are so many devices and browsers and other factors that mean that, today more than ever, designs cannot be pixel perfect. To even try and make them so is going to cost a lot of time.
People don't compare websites between browsers so save yourself some valuable time and sanity!
A great way that I've seen done involves work on both ends, but it works nicely.
First, make sure that your designs fit a grid: repeating, same-sized columns with fixed width gutters. You can take that grid layer and turn it into a background image that you apply to your containers during development. That way, if anything doesn't line up with the grid, you'll see it immediately.
try online service like makiapp.com it just like pixelperfect for firebug.
Can somebody please tell me the best way to deal with different window sizes and with a user resizing the window when creating a webpage.
Because I always find myself creating layouts with html, css, etc. and at first everything look perfect. But as soon as I increase or decrease the size of the browser window everything falls apart.
Also it would be great if anybody could point me to some sort of guide or anything similar.
Thanks it advance! Any help is greatly appreciated!
For detection, you may want to use css media queries (in which case you may want to to use https://github.com/scottjehl/Respond Respond.js's shim for older browsers, to add fuller cross browser support), and target certain screen widths. http://html5boilerplate.com and it's default css: http://html5boilerplate.com/css/style.css has a great default css set for exactly that type of media query.
Another approach is to give a fixed minimum and maximum widths to the outer container of the page. For example:
body{text-align:center;}
#outer-container{text-align:left;margin:0 auto 0; width:98%;max-width:900px;min-width:760px;}
that way you can grow and shrink it and see how it looks within a certain range and know that other viewing windows are going to see that plus a horizontal scroll bar at worst for small viewing.
In general, just using the html5boilerplate as a starting base is a great approach, it's an excellent piece of work.
i'm using css to make a webpage and i have been stuck on this problem for a while. i have seen other website resize according to the resolution of someones monitor. i don't know much about css or any other things like it. can anyone tell me how i might accomplish this? my website is
http://ryanlaurence.com/
It's typically done with CSS, and called a liquid layout or fluid layout.
There are a lot of sites out there that describe various ways to do it.