logo-dw

Go Back   Dreamweaver Club Forums > Dreamweaver forums > Dreamweaver General
Register FAQ Members List Search Today's Posts Mark Forums Read

Reply
 
Thread Tools Display Modes
Old 09-20-2011, 09:14 PM   #1
kremo5le
kremo5le's Avatar
 
Join Date: Nov 2008
Location: San Diego, California
Posts: 112
Question "Fluid" Designs - jQuery?: What to Do

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!
__________________
Otter Creative Studio
San Diego Web Design, SEO, & Graphic Design
kremo5le is offline   Reply With Quote
Old 09-20-2011, 09:48 PM   #2
gentleone
gentleone's Avatar
 
Join Date: Nov 2009
Location: Rhodes, Greece
Posts: 2,837
Default

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:
Code:
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:
HTML Code:
<img src="image.jpg" alt"" />
Quote:
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.
__________________
www.gentlemedia.nl
gentleone is offline   Reply With Quote
Old 09-27-2011, 09:44 PM   #3
kremo5le
kremo5le's Avatar
 
Join Date: Nov 2008
Location: San Diego, California
Posts: 112
Arrow [SOLVED] Fluid Web Desing - Responsive Web Design

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!
__________________
Otter Creative Studio
San Diego Web Design, SEO, & Graphic Design
kremo5le is offline   Reply With Quote
Old 09-28-2011, 06:08 AM   #4
gentleone
gentleone's Avatar
 
Join Date: Nov 2009
Location: Rhodes, Greece
Posts: 2,837
Default

You're welcome

And it's nice to see there are getting more and more responsive themes for CMS.
__________________
www.gentlemedia.nl
gentleone is offline   Reply With Quote
Old 11-21-2011, 01:31 AM   #5
kremo5le
kremo5le's Avatar
 
Join Date: Nov 2008
Location: San Diego, California
Posts: 112
Default Responsive Web Design

Quote:
Originally Posted by gentleone View Post
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.
__________________
Otter Creative Studio
San Diego Web Design, SEO, & Graphic Design
kremo5le is offline   Reply With Quote
Old 11-21-2011, 05:43 AM   #6
DWcourse
DWcourse's Avatar
 
Join Date: Apr 2009
Posts: 3,276
Default

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/...n-template.php
__________________
If my answer helped, check out DWcourse.com for Dreamweaver tips and tutorials.
DWcourse is offline   Reply With Quote
Old 11-21-2011, 07:16 PM   #7
kremo5le
kremo5le's Avatar
 
Join Date: Nov 2008
Location: San Diego, California
Posts: 112
Lightbulb CSS3 Media Queries

Quote:
Originally Posted by DWcourse View Post
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/...n-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!.
__________________
Otter Creative Studio
San Diego Web Design, SEO, & Graphic Design
kremo5le is offline   Reply With Quote
Reply


Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 04:11 AM.


Powered by vBulletin® Version 3.8.7
Copyright ©2000 - 2018, vBulletin Solutions, Inc.
Copyright 2006 DreamweaverClub.com