Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 4 years ago.
Improve this question
At the outset let me clarify - please do not point me to links about responsive designs. I have done enough googling for a life time, yet am here. I am looking for specific tips, not tutorials.
I had a fixed width layout web design till yesterday when a Google search result of my site announced that my site is not mobile friendly! And I took the Google mobile friendly test as advised. Of course, my website was declared unfriendly to mobiles as it would mean horizontal scrolling for users. However when I tried to make all my fixed width including body, containers etc fluid by using percentage, it looked splendid on my laptop. But browser resizing and mobile screen resolutions now make my pages look like hurricane hit!
I am hating the fluid thing and more so ever the responsive design thing! So much work in trying to decide how to redesign and still not able to make things work. I have tried using viewport, #media screen only, a separate CSS for specific screen size etc. I'm just about to explode! I have a website with a couple of thousand pages. Though I have common header and footer, I can't change the html/CSS of the inner parts of all pages. I am not able to even make a decent home page.
So my question is, is it still possible to have fixed width layout and still become mobile friendly ? That way I don't have to tear my hair to please Google! Or is there actually some tips to easily change my CSS to a responsive CSS or some converter program or CSS checker and adviser, etc? I believe Stack Overflow is a fixed width design and they still don't seem to have any trouble.
The site is here.
To answer your question, yes you need to have fluid measurements in order to create a mobile friendly site. There are certain elements that can have fixed measurements (i.e.: height of nav bar), but most need to be fluid, so that it can properly be displayed in both desktop and mobile settings.
The main problem with your site is that your grid is not properly done. It is incredibly time-consuming to create your own grid with rows and columns. I would recommend learning Bootstrap, a common CSS/JavaScript framework. Just the grid system alone (built only on CSS), would immensely cut down the time it would take to build your site, and fix most of the problems that exist due to your containers/rows not being responsive.
You can download Bootstrap at http://getbootstrap.com/, and in addition learn the grid from W3Schools http://www.w3schools.com/bootstrap/bootstrap_grid_system.asp
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
Im new to converting from photoshop to CSS, hopefully someone could help me.
I have many layers in photoshop and I need to convert them to CSS. Many layers include images which are around 2500px width.
I am using bootstrap so naturally my website is responsive. Now should I leave the width of 2500px and add a 'img-responsive' class? It seems to work (the class scales down the image), however the image size is still massive and it takes ages to load. Should I decrease the width and height of those images? Would that impact user interface on bigger screens?
Thank you!
The procedure is to build a website that fits the design.
Do not simply take a PSD layer, dump it to a giant image, and put it on your page. Interpret the design and decide how your page should be built. You need to make decisions about what should size dynamically and what should stay static. It's up to you to figure out what works best, based on the design and your skills.
If you want your images to be fluid (responsive is not so relevant here), you can set a width to your images, but keep your height to auto; they will resize to that width. So:
img{width:100%; height:auto /*default*/; max-width:2500px;}
See here: jsfiddle
You have a number of questions, so I will answer them in list format:
Q: "Should I leave the width of 2500px..."
A: Bootstrap current version 3.2 has a max container width of 1170px, so I'm not sure why you have images at 2500px unless they are backgrounds or something similar. You should size your images to fit the layout of the largest desktop size you are supporting.
Q: After scaling the img down with a CSS class the size is massive... "Should I decrease the w & h of those images?"
A: Scale images to fit largest desktop layout, then in Photoshop use "Save for web" to properly compress image size. For JPGs I typically use a quality of 65. If it is a bg img, you can get away with using a lesser quality setting (40-50), just play with it.
Q: "Would that impact user interface on bigger screens?"
A: Yes, it would negatively impact bigger screens. If, for instance, you saved your full-width header image at 768px to accommodate tablets, it would look pixelated (blurry) on a desktop.
Pertaining to images there are several ways so you don't load large images for small devices, here's two.
Use server side detection, like https://github.com/serbanghita/Mobile-Detect/ or http://adaptive-images.com/ and deliver appropriately sized images. The latter does much of the work for you. Both are php, there are probably forks for other languages.
Then, even with this, IMO best solution, you'd use a class that sizes the images fluidly, such as "img-responsive" or your own making to make it fluid.
Use mobile first css and use background images, you'd use percentages or vh (or combine for fallbacks) on the container and use background-size:cover and then start smallest to largest with media queries. Make the images 600px, 1000px, 1600px, and 2500px or whatever and then make min-width media queries to load up background images. Use Modernizr to create a fallback for browsers that can't understand background-size css (if you are supporting IE8 or other legacy browsers).
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 9 years ago.
Improve this question
There are 2 ways in which we can implement a fluid design (one that would adjust itself to the screen size on which it is viewed on);
Approach 1:
We can just use the available browser size (or viewport width/height) and accordingly define our CSS....
This is equivalent to using say a CSS #media max-width:320px
In this approach, even a desktop browser which is squeezed to a very small size would display the same design as on a mobile device
Approach 2:
We design our CSS based on the device which it is viewed on (desktop/mobile/tablet).
This is equivalent to using say a CSS #media min-device-width:768px
So if you see, there is a difference in how we are identifying which CSS to apply based on either "width" OR "device-width"
My question is NOT about media queries and HOW to apply them at all..
My question is which out of the 2 design approaches should be the preferred one, any PROS/CONS for either of them?
Should we design for a device OR should we design for the available browser area ?
I prefer the "design for available browser area" approach, because you shouldn't force the user to maximize his browser window to fully view your website even though there would be a CSS for smaller browser areas (but you don't use it because the user THEORETICALLY has more screen space).
This not only affects desktop users with widescreen monitors but also tablet users. E.g. Windows 8 will bring a convenient function to scale the browser to 2/3 of the screen width, which might be too small for your website to display properly.
I would always design for the available browser area. The mobiel device market and also hardware manufacturing ( higher screen resolutions and screen ratios) is constantly evolving and trust me designing for a device will put your website in a mess in a short period of time.
Let me know what your final decision will be as I am really interested in this subject.
I am leaning towards a mobile first approach or rather a minimal non device specific one. Small style sheet and the site built for mobile first then adding things in for the higher resolutions via media queries.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 5 years ago.
Improve this question
What is technical difference between Fluid vs liquid vs elastic vs Flexible css layouts?
Are these all same or different technically?
Is fluid layout better for both mobiles and computer user?
I think there are only two properties to make fluid layout "em" and "%".
And we already use "em" for font even in fixed width layouts. What are other things we need to do to make site flexible? Which part should be flexible and which would be better as fixed? Or we should make whole thing flexible?
I suggest you to read some articles about this subject. Smashing magazine has a great post about it, to see which one is right for you. They have some definitions about these layouts and I believe they are very accurate:
Fixed:
A fixed website layout has a wrapper
that is a fixed width, and the
components inside it have either
percentage widths or fixed widths. The
important thing is that the container
(wrapper) element is set to not move.
No matter what screen resolution the
visitor has, he or she will see the
same width as other visitors.
Fluid:
In a fluid website layout, also
referred to as a liquid layout, the
majority of the components inside have
percentage widths, and thus adjust to
the user’s screen resolution.
Elastic:
There is a third option when working
with Web page layouts. An elastic
design is sometimes preferred by
designers because it mixes the two
other main layout types. It works by
sizing all elements with em’s. The
quote below explains exactly what an
em is and why it can be beneficial.
The pros and cons in the article are very concise too, with examples and further researching.
If you choose to use "fluidic" layouts, read their article about the subject as well.
They are all pretty much the same. If you want to get really picky, I guess you could say that elastic has a maximum width, whereas fluid might continue to increase in width as long as the window is widened. But generally, they are interchangeble.
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 8 years ago.
Improve this question
I'm making a website now and I am trying to decide if I should make it fluid or not. Fixed width websites are much easier to make and also much easier to make them appear consistent.
To be honest though, I personally prefer looking at fluid websites that stretch to the full width of my monitor. My question comes from the fact that in most modern browsers you can hold control and scroll your mouse wheel to basically resize any website.
So is creating a fluid website worth the trouble?
It depends on your audience and your content.
The following are sites I respect and I think are example to imitate.
Fluid Examples:
Amazon
Wikipedia
Static Examples:
Apple
eBay
MSN
StackOverflow
MSDN
Some Mix it Up!
CNN
I think I prefer static most of the time. It is easier to make it look good in more browsers. It is also easier to read.
Making a website fluid, but adding a min/max-width attribute seems to be the best of both worlds, for me. You support fluidity, but you limit it at a certain width (say, 800px and 1200px).
It is up to you - here are some things to consider:
Text is hard(er) to read when lines are very long.
Your audience may have larger or smaller resolutions than normal, and picking an 'incorrect' static width will annoy them.
Maintaining a fluid site can be, but doesn't have to be much more difficult than its static counterpart.
Absolutely. It is a big inconvenience to people with huge monitors to have to resize the page. It can also be a bit dodgy with some layouts. Little inconveniences, no matter how trivial, can actually affect people's opinions of your site.
Also, netbooks have odd resolutions which make it hard to design sites for. For example, I'm writing this at 1024x600.
It's not particularly hard nowadays either (in modern browsers), especially with min- and max-height in CSS, and the new gradients, etc in CSS3, so image scaling won't be as big a problem in the near future.
In response to the comment below, I think that the pros outweigh the cons in this particular case - IE6 is a problem everywhere. We just have to deal with it.
You have to realize most computer users don't even KNOW HOW to zoom in the browser! Most users are so far from the understanding of computers that we have. We always have to remember that fact.
Text based apps: No. Table based apps: Yes.
Pros of fluid layouts
People with big monitors gets to use their screen real estate.
Easier for users with big monitors when you have a lot of information on your page.
Cons of fluid layouts:
A fluid width text column is hard to read if it's too wide. There's a good reason behind the use of columns in newspapers: it makes skipping to the next line much, much easier.
(Somewhat) hard to implement, because of the limitations in CSS.
If you're showing tabular data (iTunes, db manager, ...), fluid width is good. If you're showing text (articles, wiki pages, ...) fluid width is bad.
From my iPhone's perspective, fixed width layout is problematical when using code blocks. The scrollbar for wide code blocks doesn't show up, so I can't read the far right of the block.
Otherwise, I think it's a simple matter of what kind of site you're designing and how it looks on different size screens and windows. As previously mentioned, there's an option to set a maximum width, but the same caveat applies to code blocks and iPhones. I've designed both, and I don't prefer one over the other.
Although, it's fun to watch the boxes move around as I play with the browser size with a fluid layout, but I can be easily amused.
The most important thing is to consider dominant use cases of your web site or application. Do you expect people to use it exclusively on mobile devices? Mobile phones, netbooks, desktops?
Take a look at "Responsive Web Design" by Ethan Marcotte: http://www.alistapart.com/articles/responsive-web-design/
Great article that demonstrates the use of truly fluid layouts using media-queries. Sometimes you need to built out a separate front end for different user-agents, but sometimes media-queries are the perfect tool to service multiple resolutions across different user-agents.
It depends on what you're trying to do. Take a look at SO. It's fixed width and it's great. In fact, if it were fluid, it would be a bit of a PITA. Some sites look better with fluid layouts, but personally, I'd go with fixed unless you have a good reason to go fluid.
Many good points in the comments but from your question it seems you really like fluid designs and want to create one so go for it, it's your site, it doesn't have to be like every other site on the web.
Just be aware of pros ond cons of every solution.
Up to a point - yes.
There's a certain width, where text begins to become annoying to read if it's too wide. Easy to test if you have a large monitor, just grab notepad and paste some text into it without line breaks.
However, when going down to smaller sizes, being fluid might be a good idea. Mobile phone browsers are more and more capable of displaying "normal" websites just fine, but they are sometimes width-constrained, and as such, benefit if your site can fit in a bit smaller space.
Personally I also like to keep browser on my monitor but only at half of the monitor's width (24"). Sites which scale nicely into that are very good.
I think it's mostly a user convenience case. Not all sites will benefit from being fluid, but I think sites which have lots of text content are the ones that will most benefit from it, at least if they are fluid up to a max width (say 800px or whatever)
Yes. Page zooming is great but it is primarily used to make text bigger, not to make text fill the viewport. Certainly if the body text is already too wide, zooming down to make it fit will usually make it unreadable.
You need liquid layout if you're going to make the text fit the viewport whether or not it's zoomed.
The point about ‘long lines being hard to read’ is often overstated by designers trying to justify fixed width designs(*), but in reality it doesn't seem to hold quite as strongly on-screen as it did on paper. Of course setting a good leading/line-height is important, and max-width can be used to inhibit the worst excesses of long lines. (Set it in font-relative em units.) You don't get max-width in IE6, but that's not the disaster it once was. (You can fix it with a little bit of JavaScript if you really care about those guys. I don't.)
(* which are indeed less work for highly graphical layouts. But for a simpler layout like, er, StackOverflow's, there isn't really any reason not to go liquid. Tsk #SO, eh!)
Preface: Not a professional web artist.
I've found that there's way too many fiddly bits to get things to flow just so at cell-phone and uber-widescreen sizes, especially in anything of reasonably interesting complexity.
Typically, I design around having a fixed-width site in some fashion; usually bounded at [600,1200].
I also find super-wide columns of content to be a hassle to read. I seem to remember that there's some research which suggests an optimal number of words per column line.
You can make it like this.
# Make the main layout fluid and apply 'max-width: 1140px' to it and center it.
By this there won't be 'long lines' of text on bigger screens and proper settlement of web page on smaller ones (excluding 800x*** and lowers).
I have implemented this method in my new projects and it's working like a charm.
a.t.b .. :)
I think the decision fluid/fixed should be based also on content of the website:
For sites with big amounts of plain
information (like news portals),
better to use fluid layout.
Web-services better look and work in
fixed dimensions, so you always know
where interface elements are located
in their places and they are not moving
around constantly.
Yes, fluid websites are worth creating
As you said, it looks good and reasonable when you plan properly at design phase.
Your doubt about the impact of Ctrl + Scrollbar is not a big deal.
This feature is primarily for accessibility, to make text more readable by increasing the size.
However, if you mention all your sizes in Pixels (px) it won't happen.
Proper adjustment happens only when you use "em" to specify size. So you have a way to turn it on/off
I'm a big fan of fixed at < 800px... it's easier to read narrower columns, and it will work anywhere. That is, if you're trying to make a website that presents hypertext... Websites which present application front-ends, are I think another can of worms entirely...
Fluid design - truly fluid - is hard. Very hard. It's not just a question of page width - do your fonts scale, and does everything scale with them? Ideally:
Sizes should be defined in em rather than px
...and that goes for element sizes, not just fonts!
Given a change in font size or zoom level, the page elements should be the same size relative to each other
Our main product is fluid, and it's a pain from my point of view as a designer, especially because it involves a lot of user-generated content.
For one thing, images - in a fixed-width site, you can have an image that fills half the width, and looks great. In a fluid site, this image is just as likely to be lost in a sea of whitespace, looking rather lonely.
Life should be easier once border-radius and other CSS3 properties come into play more, but sadly our core audience are government workers, who all, ALL STILL USE IE F#!*ING 6!
To answer the question, "is it worth it"? Yes, if you do it right.
Here's a scenario: choose a fixed-width site: your boss displays it to a client on his brand-new, 1920x1600 laptop, then complains to you about "how it all looks small on this guy's screen!"
I think it's nice to be able to scale well on a user's screen, rather than make the users pan and zoom. In a time when users surf the web from such a wide variety of devices, ranging from smartphones to ultra-mobile PCs, each with its own, possibly non-standard resolution, I think it's important to keep user-experience at a high level when your site is viewed on such screens. Regarding the text length, it could be bounded by a certain ratio, so it would fit nicely within the layout. I think there are also frameworks that may help with writing a site in a fluid manner, and help with coding maintainability.
I'm gonna go against the majority and say NO. Reasoning: fluid sites like Wikipedia are a nightmare to read on large screens due to their long line length (though its citations make it hard to read at the best of times).
The problem really occurs because there is no mechanism to size text relative to the screen resolution. If you could automatically make text bigger on bigger resolutions, you could stay closer to the 80-odd characters per line that's generally regarded as the best for readability.
There is also the problem of images and other fixed-size elements. You can have large images and let the browser shrink them if necessary, but then you run into other problems like much longer download times, and image quality problems in many browsers.
I'm a fan of sites that do have a fixed max width of between 800px - 1000px, but can also scale down so that I can read the content without scrolling side-to-side and also without zooming out because often the text becomes too small to read and it hurts my eyes. So, this is normally want I strive for because I want to build sites I can be proud of.