I have a website that is header, content, footer. The content section is broken up into two columns. (for now) In these columns are modules. The modules can be varying heights and varying widths. The client would like the modules to be different heights and widths as they see fit and then mixed and matched to look best. What would be an ideal way to go about coding this? Make a bunch of different width containers and float them left? Then the client can choose the appropriate container?
Must work in all browsers including IE7+
Whether you use a content management system or not, I would recommend to pick a Grid System for you CSS. There are a few different options and all are aimed at precisely defining blocks (modules) and tend to be cross-browser compatible.
You can find some examples at http://www.gridsystemgenerator.com/
Related
I am creating a website with form fields, tables with headers, etc...
My problem is that I am afraid that when I change the language, some of the formatting will be messed up. Such things like 1 lines becoming 2 and headers being cut off by the small width of a column will make the page look weird.
What are some options and paths to go down. Do they scale well for an application with almost 100 pages?
Well - you always should create websites with flexibility in mind. To solve the problem, you must ensure you aren't using fixed sizes (width, height and others).
No need to localize, just add more english words and see how the layout reacts. Resize the screen to mobile and you can also check the behavior.
To easily allow flexible content, I almost always end up using CSS flexbox and calc to create layouts based on relative units.
How the grid system works for those websites that expand to the full size of the browser (no matter how you resize) while working with the 12 grid_ system?
For example, take a look on these websites:
http://vevo.com
http://xfinitytv.comcast.net
http://pinterest.com
Is there a technical name for this? Why there's no many websites like this that take advantage of the full browse size?
Thanks
The "technical name" for what you're asking about is called "fluid" layout. In terms of how to achieve this in Bootstrap, the answer depends on whether you're using v.2.x or the newly released version 3. In version 2.x the fluid effect was obtained by wrapping grid elements in a with the "container-fluid" class. In release 3, the "container" class is fluid by default. (See Bootstrap: Migrating from 2.x to 3.0 for more.)
As for why more sites don't use fluid layout in all most, that's a rather subjective question. I'll comment from my personal experience (15 years in web design and development)> The fluid design doesn't really become a problem until you get to larger displays, where having the content stretched out across the entire width of the screen can pose usability problems. Specifically, block of text can become very difficult to read if the lines become too long. The longer the lines of text, the more difficult it is for the eye to find the start of the next line. Also, images stretched too wide loose their sharpness (assuming that technique is used). Simply put, people with large displays typically don't want or need the entire display taken up by content. Web applications are an exception to this, since online apps often have grids of data to display and many columns, data panels, menus, etc. that necessitate that the user maximize use of all available display area. Do a web search for "fluid vs. fixed width layout" and you'll get plenty of resources comparing the two approaches.
As I understand it in modern web-development horizontally aligning elements side by side is by using float (for example three column layout is achieved by floating two to one direction and one the other). However this does bring out various problems and at the moment I am working on a website that require seperate columns in both header and content thus I need to float pretty much everything and set up various margins and widths to keep them from jumping all over the place.
With HTML5 and CSS3 on the rise I am wondering whether there is something to replace floating with easier solution? As it is HTML5 and CSS3 introduce easier ways to make certain things happen (like rounding corners with border-radius) so one would think with multiple columns in a website being almost non-avoidable something to ease that hassle would be invented.
Yes, it's flexbox, or CSS Flexible Box Layout Module.
The spec seems to be reasonably stable as it has reached Candidate Recommendation status. I don't know how good browser support is for this latest version.
Here's a recent article.
Have you looked at any of the responsive frameworks like Twitter Bootstrap? With a responsive framework, it's very easy to setup columns dependent on the screen size.
To my knowledge, there is no built in CSS property of columns beside creating your own with floats and dynamic widths.
Regardless of whether it is HTML, XHTML or HTML5 you find those annoying percentages littered throughout the place. Yet... I see an awful lot of websites dare not go near them. Yet I was always encouraged through uni to use them.
So which should I be using? Which would lead to better site design and why?
I'm aware to avoid the use of height although HTML5 really doesn't like me not specifying height if I want to use percentages.
Thanks for taking the time to read.
It really depends on what you do you want to build up.
Sometimes I need to build a website which could be read by people with certain disabilities. If for example also older people visit your site its good to use % so that they could zoom in your page and the layout still looks pretty.
Fixed Design Layouts Fixed design layouts have a specific width and do
not scale to fit the browser window. Websites that make use of it can
be aligned to the left, centre or even aligned to the right as and
when required.
Benefits of Fixed layouts: With fixed design layouts you have control
over the line length, flow and placement of the elements on the web
page. The designer has a fixed space to work with and the line lengths
of the text and the placement of images can be designated easily.
Drawbacks of Fixed layouts: Fixed design layouts tend to leave lots of
empty space on either side of the design when viewed on high screen
resolutions. This dwarfs the size of the web page and gives an
impression that it is floating on the screen.
Fluid Layout Fluid design layouts use percentages instead of pixels to
define their width and they fill the entire browser window. They are
also called fixed or dynamic designs.
Benefits of Fluid layouts: One of the major benefits of fluid design
layouts is their accessibility features. They cater to more number of
users. This is because, whatever may be the screen resolution or
device of the user, fixed design layouts adapt better. It makes use of
the entire browser window by spreading out. This maximizes the area
for the content to e displayed and more information can be seen at one
go. Therefore, there is no empty space on the window screen. This is a
better bet as compared to fixed layouts that leave a great deal of
empty space.
For fonts, you should use percentages (or em's, or rems) if you don't wish to fix the font size in Internet Explorer. If you use pixels, then users of Internet Explorer who change their default font size in their browser settings won't see the fonts increase/decrease. So this makes your text potentially less readable for users in that browser.
A great resource for this is the first chapter of Dan Cederholm's Bulletproof Web Design.
For layout, using percentages or em's will make your design more flexible to changing font sizes/localization etc. This is also covered in the book.
I've been working on a layout for a site recently and have gotten stuck with the CSS. I like to think that I could follow the simple tutorials for a 2 column footer layout, but I keep getting stuck with the content of one of the columns.
The two column design would be left-side fluid Google Map and right side fixed width sidebar. I have tried following many examples of this sort of layout, but I always come to the problem with maintain the fluid side with the Google Map. Mainly the Google Map doesn't like to remain fluid. I have tried every CSS solution I could find with negative margins, floats, abosulte positioning (GMaps really hates this), and even tried tables (shudder).
Does anyone have any idea to handle this problem?
Take a look at Yahoo YUI grids.
Yahoo YUI grids
The YUI CSS framework provides a very customizable number of grid layouts. Page widths vary from 750px, 950px, 974px and 100% & there are templates that provide both fixed left & right column widths - all guaranteed to work correctly across multiple browsers. Their choice of sizes is also related to common advertising dimensions, making it easier to fit ads if you so desire. All pages on Yahoo use these layouts..
You also have the option to incorporate 'reset' capabilities so that all browsers are set to a common layout with regard to fonts, padding, margin, etc.
It has made foundational web page development a much easier, less finicky process for me!