Building Good Websites with Fluid Layout
Those familiar with fluid / elastic layouts know that they can be a little more challenging to implement compared to fixed-width layouts. With the advent of wide-screen monitors, one of the biggest advantages of fluid-width layouts is the ability to maximize available space.
It was only a year ago when 1024×768 was still the dominant screen size. However, as of January 2009, 57% of the population are on desktops higher than 1024×768. The number of users still on 1024×768 has declined sharply from 48% of the previous year to a mere 36%. On the other than, the users on widescreen desktop are rapidly growing, thanks in part to marketing by HDTV makers.
Kayla Knight has written a very good article on the topic of building good websites with fluid layout.
She comes up with 6 techniques to do this, which can be summed up as follows:
- Fluid Layout Using A Grid
- Adaptive Content
- Images In A Fluid Layout
- jQuery Masonry
- Smart Columns with jQuery & CSS
- Text Zooming
She also provides helpful examples and links to all the necessary tools needed to achieve the perfect fluid / elastic layout. With this, designers are armed and ready for the next evolution in layout design.
July 5th, 2009 at 3:03 am
oh yes absolutely, fluid layout is the need of the hour. thanks for the link.
August 28th, 2009 at 6:32 pm
[...] Tutorial – Building Good Websites with Fluid Layout [...]
September 12th, 2009 at 6:20 am
very successful work, congratulations
September 12th, 2009 at 4:29 pm
fluid layouts get extra features to website design.
One can use fluid layout with many kinds.
November 10th, 2009 at 4:27 pm
To Whom It May Concern:
I have an online garage sale website that I started for the Casper, Wyoming area, called, ‘Ken’s Online Garage Sale’. It is a fairly simple site that I created utilizing the website services found through ‘Global Domains International’ (GDI). It is growing in popularity rapidly. I am also planning on putting items up for sale on a consignment basis, which I am getting a lot of positive feedback from my customers.
As a result, I am going to need a larger, more comprehensive website that I personally will be able to make the many functional daily changes that will be required. I am not interested in something complicated that includes all of the bells and whistles that requires an advanced knowledge of computer programming.
Please take a look at my present site so you can get an idea of what I am looking for and let me know how you can help me satisfy my need. http://www.surewin.ws
Thank you and I look forward to hearing from you.
Ken Sherwin
garagesale@bresnan.net
307-333-5119
307-377-8120 - cell
November 30th, 2009 at 5:22 pm
Nice looking blog, can I ask you what template you are using and how much it costs? I’ve been using cheap ones but can’t locate one that I actually like.
December 19th, 2009 at 1:20 pm
I wanted to thank you for this great read!! I definitely enjoying every little bit of it.I have you bookmarked to check out new stuff you post.
December 21st, 2009 at 11:16 am
Huh What a This is a awesome post. Raw suggestions too. Thanks!
buy links
January 11th, 2010 at 8:30 pm
Are the statistics that you use on the percentage of people that use certain screen resolutions similar for those that use the Internet? I’d guess that a large percentage of very high screen resolutions could constitute a group of old computers that aren’t used to access the Internet.
January 21st, 2010 at 3:11 am
We tried fluid layout. Later we realized that min-width,max-width is not functioning in IE6.
is there an alternative solution?
January 22nd, 2010 at 6:39 pm
I am also planning on putting items up for sale on a consignment basis, which I am getting a lot of positive feedback from my customers.
It will give extra features.
January 23rd, 2010 at 11:48 pm
These are really cool layouts.
January 24th, 2010 at 12:31 am
Capatect Dalmaçyalı
Marshall Thermos
Blue Safe Mavi Kale
January 24th, 2010 at 12:31 am
Capatect Dalmaçyalı
Marshall Thermos
Blue Safe Mavi Kale
http://www.discephemantolamafiyatlari.com
January 24th, 2010 at 12:42 am
Bonuspan XPS 3cm Strafor
DOW 3cm Yalıtım levhası
EPS Strafor yalıtım levhası
January 27th, 2010 at 3:49 am
Good info here. I appreciate the time and effort that went into it. I’ve got an idea for a site that will be my most ambitious project to date and it will require a Web authoring tool liie Dreamweaver, which I recently acquired. I’ve been using XSite Pro fro boutique, AdSense sites, and as a means of personal expression, but now I’m ready to stretch my legs. To be quite honest, I get overwhelmed with how complicated Dreamweaver is. I’ve had some experience with it and know a goodly amount of HTML but my CSS skill is lacking. Graphics isn’t a problem as I know Photoshop fairly well after using it for almost 6 years now.
I really like the fluid layout principles in this post. It’s really good and it’s helped me shift my thinking a bit as to what to do and perhaps most importantly, what NOT to do.
Thanks again.
GR
Cayenne Pepper
February 8th, 2010 at 1:34 pm
Wow, this blog is definately getting bookmarked. Great Info all over the place.