PDA

View Full Version : "Fluid" Designs - jQuery?: What to Do


kremo5le
09-20-2011, 09:14 PM
Hey everyone,

I'm working on a new project for a photographer. We want to develop a site that is "fluid." What that I mean that when users re-size a screen, the image or content does too. We do not want to use Flash.

Here's a non-Flash example: http://www.thesixtyone.com
Here's one Flash example just for functionality and ideas: http://nickonken.com

As far as I know, this can be achieved with JavaScript or JQuery like with the first example.

Have you done a site like this? What would you use to do it?

Please don't bother telling me why you would not do it. We will do it; we want opinions that will make us reach our goal!

Thank you! :)

gentleone
09-20-2011, 09:48 PM
You don't need javascript/jQuery for this.
To start with you need a flexible (% instead of px) layout/grid and to get your images fluid you make a rule in your CSS like:
img {max-width: 100%)And in your HTML don't use the height and width attributes in your img tags so you only get this:

<img src="image.jpg" alt"" />
Please don't bother telling me why you would not do it. We will do it; we want opinions that will make us reach our goal!i only encourage you to do it this way, because with all the different devices in size out there (smart phones, tablets, notebooks, etc.) fixed width layouts these days sucks.

If I were you I would do some research and then especially to a term that's called Responsive Web Design. Google it and you will find heaps of info about it.

kremo5le
09-27-2011, 09:44 PM
Hey there,

I saw your response but did not reply because I was talking to my partner about it: thanks man!

It actually helped us find a solution for the project we are working on: thanks.

We actually want to use Drupal as the client is interested in adding some CMS features to the whole thing. Not sure how that will play out but we are looking into http://drupal.org/project/omega which is precisely a responsive template.

You nailed it and we owe you everything.

THANKS! :mrgreen:

gentleone
09-28-2011, 06:08 AM
You're welcome :)

And it's nice to see there are getting more and more responsive themes for CMS.

kremo5le
11-21-2011, 01:31 AM
You're welcome :)

And it's nice to see there are getting more and more responsive themes for CMS.

I actually did a sample site using Drupal 7 + the Omega responsive and I was amazed with what you can do. Still, I would like to dig into a website that uses pure code and the already-awesome Dreamweaver CS5.5. :-P

DWcourse
11-21-2011, 05:43 AM
The Twenty Eleven default theme that installs with WordPress is also a responsive design.

While you're doing your research be sure to study CSS3 Media Queries.

And check out this article: http://www.dreamweaverclub.com/mobile-friendly.php

And I've got a template with some explanation at http://www.dwcourse.com/dreamweaver/free-dreamweaver-multiscreen-template.php

kremo5le
11-21-2011, 07:16 PM
While you're doing your research be sure to study CSS3 Media Queries.

And check out this article: http://www.dreamweaverclub.com/mobile-friendly.php

And I've got a template with some explanation at http://www.dwcourse.com/dreamweaver/free-dreamweaver-multiscreen-template.php

1. You are right about studying CSS3. I actually got a book I have been reading.

2. The first and second links are SO good! Definitely keeping them as favorites: THANKS!

Definitely the multi-window feature in Dreamweaver CS5.5 is simply amazing. My first mobile website will be a version of my own site which was actually created in Joomla!.