View Full Version : questions on mobile friendly tutorial

03-31-2012, 12:14 AM
I've been reviewing the tutorial "creating a mobile friendly webpage in cs5.5. I really appreciate this, because it comes at time when I am trying to accomplish just this.

1) Just curious, since tablet pixel resolutions for the ipad 2 and 3 are:
Ipad 3 2048 x 1536 pixel resolution at 264 ppi
Ipad 2 1024 x 768 pixel resolution at 132 ppi

Would the Ipads even use the tablet query for their browser to display, or would it use the "desktop" css?

2) In the example, you tweeked the header by clearing the width / height in the properties panel, and then change the code in the css to 100% width to force it to dynamically scale.

What about images contained within the sidebar or main content area that have actual widths larger than the 200 width... What is the best way to properly deal with these for the phone query? Currently I have a photo and a flash animation that natively are larger than 200 px, so they are being forced out of the border and not dynamically scaling when in the phone query.

Any suggestions would be appreciated

04-01-2012, 07:19 AM
Not sure about the iPad resolution but you can scale images using CSS. For example;

#content img {width: 80%}

04-02-2012, 12:50 AM
I did finally figure out how to scale still images for the phone query, the only problem I still have is

- Getting both swf's and an embedded you tube video, to scale small enough for the phone query. I can't get the embedded YT video to cooperate at all, the swf I managed to get to scale, but something really wierd is happening... the video itself scales correctly, but I am getting somekind of video wrapper... it is just black, that scales all wrong behind the video . No clue as to what I am doing wrong I'll post a screen grab of what is occuring and may be more understandable. Just don't have the time right now.

04-02-2012, 03:55 AM
This is a followup from the post above. attached is a screen grab of the problem.

The swf animation itself is scaling OK in the moble phone media query ...aspect ratio is correct ect.. but for some reason it is like the video wrapper is being squished rather than scaled or something. The black area you see above and below is what is the problem I am having... in desktop or tablet queries (which both use actual size 400x400px there is no problem... you don't see the black at all above / below. Any thoughts would be appreciated.

04-02-2012, 10:59 AM
To get your video's fluid, you'll need some help from jQuery. Here's a plugin that does the job:

04-02-2012, 02:35 PM
Please excuse the fact that I don't know much about jquery in general, but the fitvids looks like that is what I need. A couple questions...

1) So I downloaded the fitvids.js ..... how do I get that into dreamweaver to be able to use in my website?

2) It also seems like you need the main jquery script ...same question, how do I actually get this into my webpage.

I have read the tutorial on the fitvid .. but it kind of assumes the scripts needed are already in dreamweaver. I'm sure I'm just missing something obvious, but any suggestions would be appreciated.

04-02-2012, 03:20 PM
how do I get that into dreamweaver to be able to use in my website?
How to do all this through Design View... I don't know, but if you don't mind to get your hands dirty, I can explain how to do it in Code View.

04-02-2012, 06:04 PM
I don't mind getting them dirty via code view anything you can offer may help. If I add plugins and scripts to other programs like photoshop ect... usually you have to the put the file first in a plugins folder, and after doing that they are usually accessable thru the PS interface.

I'll be glad to take a look at your code suggestions if you have the time. Thanks, Carl

04-02-2012, 08:46 PM
If you don't have it already you create first a folder in the root with the name: js

You need indeed the jQuery library which you can download from here:
You'll see a lot of code now, but just do 'save page as' and save it to your js folder

fitvids.js you put in your js folder as well.

In code view you place the following lines of javascript in between the <head>. There's probably already some stuff in between your head, so you place them at the end before the closing </head> tag.


<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/fitvids.js"></script>
<script type="text/javascript">$('.fitvids').fitVids();</script>

You wrap your youtube iframe code in between a div tag which you give a class 'fitvids'. Here's an example:

<div class="fitvids">
<iframe width="1280" height="720" src="http://www.youtube.com/embed/xqLoTp0JUyE?rel=0" frameborder="0" allowfullscreen></iframe>

This should do the trick, but if it is not working it is easier for me to debug if you put the page online somewhere.

Good luck!

04-03-2012, 08:58 PM
Thank you for taking the time to post the above instructions Gentle media. I spent about an hour this morning trying to get this to work... Unfortunately I was unable to get it to work.. going to take another stab at it tonight.

Maybe you can confirm a couple things...

1) does this have to be built on a html 5 page? the one I am using is a regular html.

2) I am also using media queries ... could this be causing any of the problems I am experiencing getting the fitvids to work?

3)on the third line of script type it says $ ('.fitvids ')........ect. Is there any chance that instead of single quotes it should have double quotes? I watched their tutorial video, and it looked like they were using double quotes.

I'll try again later tonight, and just go ahead and upload what I have going... I'll post a link. Thank you again - Carl

04-04-2012, 10:47 AM
1) No, that doesn't matter.
2) No, it works with media queries.
3) Both the single or double quotes are valid to use.

I'm off for a 2 weeks holiday tonight, so I'm not be able to check the forum for replies on a regularly bases. Someone else might check your code if you put it online.

04-04-2012, 04:16 PM
OK... well strike 2, tried again last night and still couldn't get the fitvids to work. Maybe when you have time you could look at it. There are only 3 pages uploaded .... home, about our ministry, and the page where I am trying to use the fit vids is here

Areas that could be causing a problem are as follows:

1) on the third line of script type it says $ ('.fitvids ')........ect. Is there any chance that instead of single quotes it should have double quotes? I watched their tutorial video, and it looked like they were using double quotes.

2) when I "saved as" for the fitvids script the actual file name that shows up in my directory is named ..... jquery.fitvids.js I was looking at the second script you have and it says

should line 2 say this instead src="js/jquery.fitvids.js ?

3) this is the div info.... I have a main content div, and the video div container is nested inside of that. This is how it looks

<div id="main_content_new">
<div class="fitvids"><iframe width="560" height="315" src="http://www.youtube.com/embed/SrOMFyHvtvc?rel=0" frameborder="0" allowfullscreen></iframe></div>
<div id="footer_new"></div>

4) I haven't given the div container for the video any box properties... should I do that? Currently the main_content div that it is nested inside of does have width properties (a fixed amount in the desktop query, and a width 100% in the phone and tablet query)

Well.... any help you can offer is always appreciated. If there is anything else I can post that would help troubleshoot.. let me know - Carl

04-05-2012, 06:53 PM
as for point 1 like I said that doesn't matter.

point 2 should be indeed src="js/jquery.fitvids.js

04-05-2012, 09:11 PM
Yea... your last post landed while I was typing yesterday as soon as I hit reply I did see what you said about point 1. I'll make the change to point 2 and see if it works. Not sure if you had a chance to look at the code, but if there is anything else that looks wrong, let me know. Enjoy your holiday and thanks for your help. - Carl