PDA

View Full Version : Has anyone gotten their hands dirty with Responsive Web Design yet?


sweetpea11
01-03-2012, 02:06 PM
I did a search for Responsive Web Design before posting, and all I saw were tentative talk about it, so has anyone done it yet?

I'm doing my first Responsive Web site & it was tricky, but the results are pretty awesome! There's one aspect that is driving my nuts though which is what brings me here of course. =)

The light box. (doom doom doom) The images are set to 500px which is fine for desktop & tablet but it refuses to scale on a phone! You can't scroll it, you can't resize it, you can't do anything with it! Phones don't have an escape key so... I either need another option or I need to know how to program around it.

I've seen sites do a "formobile" page, but I don't think I'm programmer savy enough for that. Maybe someone has a tutorial they could point me towards?

Thanks so much!

domedia
01-03-2012, 02:18 PM
Hi Sweetpea!

Lightbox has support for resizing.

http://ryrych.github.com/rlightbox2/#features look under "Live Resizing".

sweetpea11
01-03-2012, 02:23 PM
Oh that is awesome! Going to put it in right now. Thank you so much.

domedia
01-03-2012, 02:55 PM
Let us know about the final result. I'm sure there's plenty of folks that are curious about responsive design.

sweetpea11
01-03-2012, 04:06 PM
Umm. It's taking more jQuery knowledge than the initial light box did so let me work with it & get back to you!

Some links that helped me where:
http://www.catswhocode.com/blog/create-an-adaptable-website-layout-with-css3-media-queries and
http://www.developerdrive.com/2011/09/css3-media-queries-part-1/

There are a bunch of others, but those where pretty basic to get me at least started in the right direction.

edbr
01-04-2012, 01:09 AM
getting a 403 on the first link. not at all responsive :)

edbr
01-04-2012, 01:16 AM
I've seen sites do a "formobile" page, but I don't think I'm programmer savy enough for that. See if this helps you , its for php and redirects to a mobile version/page of your site
http://sourceforge.net/projects/ismobile/

sweetpea11
01-04-2012, 12:29 PM
getting a 403 on the first link. not at all responsive :)


My apologies. I didn't realize their site was down. Here is a link to an article that has been going around and around & I believe should be read by all who are interested in responsive web design. http://www.alistapart.com/articles/responsive-web-design/

It's not a tutorial like the other one was, more an broad overview article, but there are some good links & examples.

Lastly, this one: http://coding.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/ is good especially the section on "Retrofitting an existing site"

The menu was the hardest part for me. Making sure that part transitioned smoothly from one media to the next and in each orientation. Once that part was nailed down, the rest of the rest of the site was a breeze. Just keep everything fluid.

Except the light box. :-? I don't know what I'm doing wrong, but it's not working. I took the old code out completely & replaced it with the new code & it didn't work at all. So I tried to alter the old code with bits of the new scalable code, but it didn't scale. I'm not giving up, I'm sure I'm just missing something. Probably a comma.

sweetpea11
01-06-2012, 03:36 PM
Update: the rlightbox wasn't working for anything. So I did a search and the only other option that came up was something called fancybox. http://fancyapps.com/fancybox/ Works like a dream! You may have to fiddle with the CSS & jQuery settings to get it to work exactly like you want it to but they give examples for pretty much every variant on their site.

Thank you so much domedia for the hook up, I'm sorry I couldn't get it to work. I swear I tried!

Once the site is finished & I'm authorized to launch I'll post a link so you can see the final results.

domedia
01-06-2012, 04:08 PM
No problems, I use Fancybox as well :)