Responsive design and video html5

I am working on a new site in dreamweaver using Skeleton V1.0.2. The images work great, the problem is with the video. When I resize the Dreamweaver window it looks great works perfectly but when I check it on my Iphone it resized horizontally but not veritcally it add black bars to top and bottom, only on the Iphone work fine in all the browser I've checked and even on Droids. Any help would be appricated www.shargraphics.com/new-site

Fix your code errors.
http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.shargraphics.com%2Fnew-site%2 F
My advice is to remove the height and width attributes from your video HTML. Use CSS instead.
video {max-width:100%}
Nancy O.

Similar Messages

What is the Best Power MAC G5 for Graphic Design and Video Edit

I need the Best Power MAC G5 Processor CPU
and Ram HDD Graphic card for Graphic Design and Video Edit
and the name of the Processor
how much the price

Hi GabreilKnight;
You are aware that the PowerMac G5 is no longer being produced hence if you find one it will be on the used market?
For what you are looking at doing I would suggest that you consider a Mac Pro instead.
Allan

DW CC Responsive Design and BC tags

Hi All,
I am going through the recent Adobe tutorials on Responsive design using DW CC and I have a couple of questions.
Has anyone tried setting up a DW CC responsive design for a BC site yet, using the new functionality in DW CC?
Is it OK to insert BC module tags into a design, ie a tag for a menu, and will they work? Or will the BC module javascript clash with the responsive javascript?
Also, the tutorials talk about coding up webpages to be responsive, where I will be wanting to code up a template as being responsive, with the BC tag_pagecontent tag inserted where the content is going to be.
Also with the tutorials so far I am having problems doing the following:
- inserting two divs inside another div with a large background image and positioning these two divs over this background div.
Anyway, I am continuing to work away at rendering my design into a responsive layout, following the recent Adobe videos.
If anyone else had/is doing the same please let me know how you went.
PS. I am only interested in replies about using DW CC to create a responsive design, as I am not able to hand code that kind of thing from scratch in Notepad. lol!

Mary,
Have you had a look at using a framework. Responsive frameworks include:
Twitter Bootstrap - http://twitter.github.io/bootstrap/
Skeleton - http://www.getskeleton.com/
Foundation - http://foundation.zurb.com/
We had a discussion on Sandpile yesterday about using Frameworks. Recording here: http://experts.adobeconnect.com/p6hmzy2oipt/
Also, Scott did a presentaion on Responsive design : http://experts.adobeconnect.com/p4ryiohpfjs/
Hope this helps.

Responsive Design and @media queries

I thought my HTML/CSS guns were loaded and good to go; and then I started reading about responsive web design!
If I have a rule declared in the main body of my CSS and add a media query what happens to the existing rule?
It looks to me with my experimenting so far that if I take a style in the main section and duplicate that with some edits for a smaller width, I have to then remove it from the original and replicate it in another @media query. Is that correct?
So if I have this:
header {
    background: url("images/headerhand.png") no-repeat scroll left top transparent;
    height: 300px;
    margin: 40px auto 0;
    min-height: 300px;
    text-align: left;
    width: 100%;
I need to put this in a @media query for the below break point:
header {
    background: none;
    height: 300px;
    margin: 40px auto 0;
    min-height: 300px;
    text-align: left;
    width: 100%;
I then take the rule out of the main section of my style sheet and put that in another media query for the above break point.
So if I have a header element with background image and color, and border-radius and whatever but only want to lose the background image at a certain break point, I then need two @media queries one for below the break point and one for above and then remove the whole rule from the main section of the site?
Oh my, that was so complicated, I am not sure I even understand my own question!
Martin
PS "Mobile First" is starting to make a lot of sense!

osgood_ wrote:
pziecina wrote:
Hi Os
As an example, (using Jennys Chocolate Cookies) would it not make more sense to design a mobile only web site, complete with geolocation that shows the nearest outlet selling the cookies?
So you are saying forget the desktop monster (assign that to the bin) and convince the client mobile is the way to go? Even if that is the case it still seems that you're going to need two or three different design set ups to satifsy the majority of devices, which means more expense, right? Plus from what I've seen the information all crushed into a 400px wide screen looks a bit shite, no?
Reply -
No I am saying that one should offer the type of site/service that best suits the clients needs, be this a desktop, responsive or mobile only web site, or even telling the client that an advert in yellow pages would be better.
pziecina wrote:
The same may also apply to a restaurants web page, after all it is often the directions to the restaurant, and its proximity to oneself that are important when one is looking for somewhere to go out for a meal, is it not?
Can't see what location or direction has to do with anything or proximity to oneself. I look in yellow pages if I need a restaurant or I identify it on the computer before I go out........but then again I'm old so maybe younger people do all this whilst they are out. So we come down to demographics - cut out whatever section of society at your own peril. I guess a nightclub would be a better example, can't see many 50 plus year olds wanting to know where one of those are on the move.
Reply -
So you are out and about, or driving home and suddenly decide that you would like to go for an Indonesian meal, do you now get the yellow pages out?
BTW - I am over 60.
pziecina wrote:
As for testing on mobile devices, a good testing set-up now costs less than £400, ($600) and most items one will already own.
They are -
1 A smartphone, (most people have one now and a good budget smartphone can be purchased for under £70.00)
2. A tablet device, (An budget android device now cost about £120.00, and can also be used as an e-reader)
3. A iPod-Touch (If it works on this it will also work exactly the same on the iPhone)
Well I guess you have to factor in the cost of getting connected to the net on these mobile devices to check everything. I dunno if anyone in the UK offers a reasonable monthly package whereby you can be connected to all these devices 24/7 and not rack up any additional charge per minute.
Reply -
Use Shadow and your home wifi network, extra cost nothing.
PZ

24" iMac for Design and Video Uses???

Currently have a Dual 1Ghz G4 with 4 Gigs of RAM and a ATI 9800Pro video card. I really like this new 24" iMac. I just wondering what type of performance I can expect for Quark and Indesign/Photoshop, etc. with the base setup over a built to order. I hear that 7300 graphics card really isn't worth much at all.
I also just got a new Sony HDV 1080i camcorder for a trip the wife and I are taking. With the base setup for the 24" iMac hand HDV video or will it chug. I really haven't seen any reviews or articles on iMacs and HDV editing using iMovie or FC.
Thank you for any comments and suggestions.

It should be much faster in performance. The downfall is you cannot add more RAM that 3GB, which is less than your G4. It has a much faster processor which will give you faster render speeds and better application performances. Photoshop will run faster due to faster processors and the graphics will be in a much greater color space because of the new high quality graphics cards in these computers. If you do a lot of Quartz and Photoshop update your iMac's graphics card.
It will support your HD camera. HD takes a lot of video space compared to standard DV or SD so maybe even upgrade your Hard drive to a 500GB, unless you already have an external.
Overall your performance rates will go up. The negative to running your applications is they will run really slow unless they are native. Judging that you have PPC G4, most of the apps you run aren't universal. iMac's will come with iMovie.
Good luck

Leopard and Adobe CS3 Products. Design and Video Production a must read.

Adobe posted this pdf. http://www.adobe.com/support/products/pdfs/leopardsupport.pdf
Should answer any questions on compatibility.
Web designers are safe if you use CS3. Studio 8, your out of luck.
InDesign CS3, Photoshop CS3, Illustrator CS3 is safe. CS2 your out of luck.
After Effects CS3 must use update.....slated for December.
Acrobat Pro 8, and any of Adobe video and sound production apps the same as After Effects.
Regards,
Ed

Hello,
Thank you very much for the answers, but for me it is already to late. I tried to install Tiger again, to be able to install Adobe Photoshop CS3 and then upgrade, but my iMac won't boot from the Tiger DVD even though it starts from the Leopard DVD. I have no glue what I am doing wrong. I pressed the "D" key during the boot - as stated in my manual and nothing happens. The machine just start Leopard from hard drive again.
I also tried to insert the Tiger DVD while Leopard is running and then choose the Tiger installer, but it tells me, that it can not install on my machine. I do not understand anything.
As far as I understand from Adobe, there should not be any problem to install Adobe Photoshop CS3. Nevertheless it definitely does not install on my machine (only the "shared components").
Kind regards,
Cornelia
Message was edited by: Cornelia Menzel
Message was edited by: Cornelia Menzel

It's the Mac book air good for graphic design and video editing ?

I'm into graphic design for clothing logos etc. and I'm a photographer my question is, is the Mac book air good for these things?

ideally a 15" would be best for same, as referring to the 15" macbook Pro.
For a photographer, which I used to be long ago, either the Air or Pro are close in form factor for travel with only one moving part, and SSD.
The retina display in combination with the 15" would be idea as best choice for photo editing and graphic design.
http://www.apple.com/macbook-pro/features-retina/

Responsive design and interacting elements

Is there anyway inside of Adobe Edge Animate CC 2014 for elements inside a responsive project to interact with each other. For example, I want the text to be able to condense (width-wise) as I resize the width (%), and doing so will increase the text height-wise. I want that new height to influence the location of an element below it and have that element be pushed down.
This leads to another question, does the height of the parent (stage) increases as well to contain the new height of a child element (text, div, etc...)? It seems to me that a lot of these elements inside are placed absolutely, or fixed relative to parents. So is there anyway inside a responsive document to have elements still be in the normal flow?

Steve,
You can record software simulations slides inside a responsive project, in 8.0.1.242, using the Slides button, Software simulation. But do not insert a separately created normal software simulation project in a responsive project. If you created it as a normal project, it will not have the responsive styles, will not adapt. The software slides created in a responsive project, will offer you a zoom/pan suggestion for the mobile breakpoint view that has a much smaller total resolution than Tablet and Primary. You can always customize the suggested pan/zoom.

Insert images and text in header for responsive design cc

I am having a issue with inserting a logo, company name and Facebook graphic into my header.
I started setup of a responsive design and added a responsive header along with other areas below.
I want the Logo to stay on the left, the company name to the right of the logo and the Facebook graphic on the right side of the header.
I keep making a mess and can't get anything to line up correctly.
I am using Adobe Dreamweaver CC and trying to control with CSS.
I am just starting to learn the new CSS Designer in CC. I liked the old CSS console better.

Basically, you need to float all 3 elements left and give them a width of 33.33% (3-across).
header #logo,
header h1,
header #fb {
     float:left;
     width: 33.33%;
HTML:
<div class="gridContainer fluid">
     <header>
          <div id="logo">Your logo here</div>
          <h1>Your Site Name</h1>
          <div id="fb">Facebook here</div>
     </header>
Nancy O.

I am having trouble getting buttons to work in Captivate 8 trial version using a responsive design template. Any suggestions?

I have a trial version of Captivate 8 that I am evaluating to determine if it will be an option to replace a software we currently use. However I am having a lot of trouble getting even the simplest of tasks to work using the responsive design template. To troubleshoot I created 2 projects 1st a completed empty project using responsive design and a 2nd blank project using the blank project template. I created an audio file that the button, when pressed, will play. I can place a button on first slide of both projects, rollovers work fine, but in the responsive design project buttons will not work to trigger the action. Is this a known issue in the trial version?

A Blank project is a normal cptx-project, not a responsive project, it has no breakpoint views like a responsive project, it is meant to have always the same layout but on publishing you can choose to have it 'rescale' automatically. A responsive project allows you to create slightly different layouts for the three breakpoint views: Primary (desktop/laptop/landscape on tablets), Tablet (portrait on tablet) and mobile (phones, where the browser has much lower resolution than the real phone resolution). The 'look' of a project, whether it is responsive or not will be defined by the Theme that is the default theme at that moment, and with the default theme colors that you have at that moment. I think in newbie mode the default theme is White (not sure, never used newbie mode). If you choose another theme as default theme, a blank project and a responsive project will open with that theme applied to it. All themes coming with CP8 are responsive, but you can use them also for normal projects, in that case you only use the object styles for Primary view. Each object style normally has 3 versions, for the 3 breakpoint views.

Captivate8: Drag&Drop not possible in a responsive design?

Is it possible to create a Drag&Drop Interaction within a responsive design? (Captivate 8)
I can't open the Drag&Drop Menu, I can't select it.

I've also completed the form to request new features. But in the meantime could I ask how people get around this?
We have several courses created for desktop computers which include drag and drop tasks, and feedback from learners is that they would like to be able to access them on mobile devices. So as I understand it we have three options:
Create separate courses for mobile devices, using responsive design but losing the drag and drop tasks. This would mean we have two versions of each course, one for desktop and one for mobile, which may cause issues with updating, etc, and the mobile user won't get quite the same learning experience as they'll lose the drag and drop tasks.
Adapt the main desktop course so it is responsive, and lose the drag and drop altogether. This has the advantage of everyone seeing the same course and it only needing updating once.
Don't use responsive design and display the course in the same way on a desktop as on a tablet. This may be fine for larger screen tablets, but wouldn't be great for smaller tablets or phones as you'd need to do a lot of zooming and scrolling.
I'm just wondering what you all do to get around it?

If Muse does not support responsive design, can someone tell me why I have seen 100% browser width

If muse does not support responsive design (and therefore cannot adapt to the differing sizes in browser width of different devices, so I understand it) , as I have read on these forums and been told by Adobe's support tech's via chat support, can someone please explain how the 100% browser width slideshows that I have seen on Adobe's featured Site of the Day sites, were acheived? Are these sites only able to display correctly on the same size screen? If I cannot create a site in muse that displays a constant design on a laptop, desktop, or tablet screen, then why should I use this program at all, and why isn't that dislcaimer right up front to save folks like me hundreds of dollars in cloud subscription fees and hours designing a site only to find out that it will look like crap on 2 of the three devices any one uses to view it???? I was sent here for this question by the support team at Adobe. Hopefully someone has a workaround, because Adobe apparently are nonplussed.

If muse does not support responsive design (and therefore cannot adapt to the differing sizes in browser width of different devices, so I understand it) , as I have read on these forums and been told by Adobe's support tech's via chat support, can someone please explain how the 100% browser width slideshows that I have seen on Adobe's featured Site of the Day sites, were acheived? Are these sites only able to display correctly on the same size screen? If I cannot create a site in muse that displays a constant design on a laptop, desktop, or tablet screen, then why should I use this program at all, and why isn't that dislcaimer right up front to save folks like me hundreds of dollars in cloud subscription fees and hours designing a site only to find out that it will look like crap on 2 of the three devices any one uses to view it???? I was sent here for this question by the support team at Adobe. Hopefully someone has a workaround, because Adobe apparently are nonplussed.

Responsive design mode is showing part of pages and is not showing any optomized pages even in safe mode.

I need to check multiple websites everyday for responsive design. When I open Responsive design mode I am getting full pages on every site, even ones I know are mobile opt. No matter how I scale it everything remains exactly as it is. I have to scale it to the far right to get the whole page. Basically the pages are always in full screen and I'm getting a window that only allows me to see part of a page. It is very frustrating.
Win xp
firefox V28.0
I am not a coder so please keep solutions simple.

From your screenshot, it seems to be working, as that grey bar has appeared at the top (with a link to the mobile version of the site). This only appears when the viewport width is 800px or less. This support website doesn't shrink dynamically (as the viewport gets smaller), but remembers whether your machine has a small screen or not (probably by storing a cookie which is changed when you click the link in the grey bar).
If you are having trouble with other sites, have you tried refreshing the page after resizing? When I have created responsive websites I often have to use JavaScript for a few features, and it simply isn't worth the processing power to make the code run every time the window size changes. Other than that I can't see what would be causing the problem (unless there is other important information you may have missed out)

Why can I export (and import)the different sizes that I put in the "Responsive Design View"?

Hello
I have troubles when try to import or export the different sizes of the Responsive Design View, I manage at least 13, and it's a little preposterous to add one by one. There are a method that export/import them?
Thanks

There is a way to store custom settings for responsive design.
You can create custom settings in the responsive design mode window.
You can hold down the Shift key and drag the borders via the (right border, bottom border, bottom right corner) resize icons to get specific dimensions and give the current custom setting a name to add them as a preset.
This will add the preset to the <b>devtools.responsiveUI.presets</b> pref that you can inspect on the <b>about:config</b> page.
Those settings are stored in JSON format.
<pre><nowiki>[{"key":"360x640","width":360,"height":640},{"key":"768x1024","width":768,"height":1024},{"key":"800x600","name":"8x6","width":800,"height":600},{"key":"800x1280","width":800,"height":1280},{"key":"980x1280","width":980,"height":1280},{"key":"1280x600","width":1280,"height":600},{"key":"1920x900","width":1920,"height":900}]</nowiki></pre>
See this thread for some JavaScript code to add extra sizes:
*[[/questions/957590]]
You can paste the existing JSON value of the devtools.responsiveUI.presets pref in the prompt and click OK.
Extra values can be added by typing its dimensions (<width>x<height> <name>).
You can paste the resulting JSON value back to the devtools.responsiveUI.presets pref or save it.

Typekit and responsive design

Hi
I am creating a website with a responsive design in dreamweaver for a BC website,
But How can I make the typekit font work, I added je JQ stuff in the heading but with teh CSS it disn't work. Where do I need to put it, in which css file?
Regards
Ferry

Hi Koushik,
For the Photoshop problem, are you exporting from Photohop to an RFLW file or are you importing an open PSD in Reflow? Have you tried both methods and do they both have the same problem or does one always work and the other is flaky? Given that it has worked a few times it sounds like everything is at least installed correctly.
Problem 2, Typekit not working on localhost. Did you add "localhost" to you kit settings and then publish those changes? Also does the url in the preview start with http://localhost:8008/" ? The url in the preview needs to match the url in your browser. You can follow all the listed on this blog post: http://blogs.adobe.com/edgereflow/2014/01/31/using-typekit-fonts-with-reflow/
Problem 3 is related to Problem 2. The issue is when you're device connects to to your computer as the websever, typekit does't see you computer as an authored user of your fonts. The devices ins't connecting to "localhost" but using whatever the ip address of you computer is on teh network. If you want to preview the fonts you either need to add your computers IP address to your kit settings or put the preview up on a server that your kit allows.
When you are done please post your experience using the Photoshop import on your project. You can either start a new post or reply to a post we are running about people using Photoshop, http://forums.adobe.com/thread/1392173?tstart=0. We're looking into improving the import experience so your feedback here is really appreciated.
Hope that helps, thanks for using Reflow!
Chris

Responsive design and video html5

Similar Messages

Maybe you are looking for