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.

Similar Messages

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

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.

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.

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

Animated banners and responsive design

I have noticed many responsive design techniques eliminate the old standby the animated banner. Either you can divide the static elements of the banner so that they stack up as the viewport narrows. Or you could animated one segment of the banner and let that stack up too. Or you could conceivably add 2 or 3 animated banners synchronized and let them all stack up just like the static elements, though this would likely result in slow load times.
Is there another method to incorporating the animated banner in the responsive design (i.e. smartphone size)? Or is it best just to leave it out on screens less than say, 400px?
It seems that not including the animation at all would disappoint people who are expecting it...

Use a responsive rotating banner plugin like jQuery Cycle2.
Then add a custom HIDE THIS button for people who want to turn it off.
Working example: http://alt-web.com/FluidGrid/Fluid2.html
Similarly, you can create custom animations with Edge Animate. To make it responsive, use a Fluid stage.
Nancy O.

Responsive Design - changes in mobile appear in tablet and primary

Windows 7, Captivate 8, Responsive Design - why are changes I'm making in mobile showing up in tablet and primary?

I had several images on the screen at the same time. In the tablet, I had
them come up one at a time. The change went all the way back to Primary.
On Thu, Nov 13, 2014 at 3:29 AM, windscorpion <[email protected]>

Site not showing responsively on mobile (viewport tag help?)

I'm new to responsive design so bear with me...
My site works responsively when I change the size of the browser window on a desktop, but on mobile it appears as a zoomed-out version. I tried several versions of the viewport meta tag to try and solve this, currently using:
<meta name="viewport" content="width=device-width, initial-scale=1">
Also tried it in the CSS as advised by one tutorial:
@viewport{
zoom: 1.0;
width: extend-to-zoom;
Nothing seems to be doing anything though when I view on mobile. Can't figure out what I'm doing wrong?
http://atennphoto.com/

Firstly I would not use the frameset.
In HTML5, which you are not using, framesets have been deprecated, hence will be removed some time into the future.
Secondly, when I view the site in a mobile, all I see is a miniature version of the desktop site. This is not what responsive design is about.
Responsive design is all about designing the layout for all screen sizes. The important difference between extra small screen sizes and extra large screen sizes is the width, which in turn dictates the amount of content that can be placed horizontally.
In your example, you have the same layout for all screen sizes. If you want to learn more about RWD, have a look here http://www.dmxzone.com/go/21759/dmxzone-bootstrap?utm_source=Blog&utm_medium=link&utm_cont ent=DMXzone+Bootstrap+Released…

Edit Responsive Design template using Adobe Contribute

Hi,
I am creating a website which is based on responsive design layout. I am using HTML5 and CSS3 for the framework.
It has 5 static pages e.g. "About US", "FAQ", "Contact US"
My customer wants to edit the content of the page using Adobe Contribute. E.g. want to edit the content in about us or Contact Us.
Now whenever we edit content using Contribute, it sometimes adds styles or <p> tags.
Please advise if we establish the website server in Contribute, can the text will be editable using Contribute CS5?
If yes, what will be its pros & cons?
Thank you
Monica Mandal

While designing Responsive layout we have three css frameworks: Skeleton, Bootstrap and Foundation.
If we are creating CMS Responsive layout (where user can edit using Contribute), is there any way to decide which CSS framework is more preferable for Contribute?
Use whichever stylesheets best support your project goals.
See Using Contribute Tutorials
http://help.adobe.com/en_US/contribute/using/index.html
Contribute Community Forums
http://forums.adobe.com/community/contribute
Nancy O.

DW CC Responsive Design and BC tags

Similar Messages

Maybe you are looking for