Switching Templates? Responsive designs?

Hi, brand new here. Just a quick couple of questions before I get myself into trouble:
I normally design in DW, but am looking to get a site started for a client and thought I would put up a temporary design using one of the existing templates.
My question is: if I do that, is it easy/possible to change template designs on the go later, or will that mangle things?
Also, are all the existing default templates responsive?

Sidney, I found this "responsive" option to not really be responsive. I.e., the menus do not become responsive with the default templates provided.
So for a followup question. You cannot swap templates after the site has been created in BC for another BC template, but I have a couple of templates purchased from bc-gurus, which are now in my partner center.
Is is possible to download those templates and upload them to replace or add to my BC templated site?
or is it possible to design/use/upload a completely different set of templates for the phone folder if I choose to use a separate folder for mobile pages?
I found that the default menu system does NOT work responsively in the template we started with and it has caused us a lot of problems:
http://joden.businesscatalyst.com
Jeff

Similar Messages

CP8 Can responsive design projects be saved as a template?

Can I build layouts in the responsive design three views that contain branding and formatting and then save it as a template for other designers to use?

No, the option Save as template is only available for normal projects, not for responsive projects.
Formatting, objects on master slides, skin editor can be saved in a theme, you don't need a template for that. Be sure to start from one of the included responsive themes.

Parallax responsive design template needed

I would like to play around with parallax responsive design templates. I would like to find a simple template without all the bells and whistles that come with the major template house's examples of parallax responsive design. Can anyone direct me to examples of clean and simple parallax responsive templates?

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.

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.

Cannot Import PowerPoint into Responsive Design Template

Hi,
I have a PowerPoint which needs to be converted to a Responsive Design Project. I notice that when I create a new Responsive design project, the Import PowerPoint is greyed out.
Is this normal?
Also if I create a basic Captivate Project, is it possible to convert it to a responsive project if a client decides they require this, without a complete rebuild?
thanks

It is not possible to import Powerpoint slides in a responsive project at all, seems logical to me but will not bother you with an explanation. The technique, programming is so different. The provided themes are responsive, PPT is not.
Same negative answer for your second question, for the same reason. You can use the assets from PPT, but will have to create your own responsive project.
Lilybiri

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.

Responsive Design Help

Hi. I have a website called e okul dostu. The adress for my site is http://eokuldostu.com Currently I would like to know how it looks on iPhone. It is responsive design but I am not sure if it is the right choice. Your opinions are valuable for me. If you say that the site does not look good as responsive then I will change the look. Thanks in advance.

Pretty sure you probably have an empty box or text box or other element that is off the page causing the shift.
On the pages that have a problem (templates too) do a select all to highlight all the content and see if there is any empty elements outside the design.

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.

Confused Re: Responsive Design Layout

It appears that I missed the change in Dreamweaver's layouts in my recent upgrades. I used to be able to choose php, and I could then choose between single-column, one or two sidebars, with or without headers and footers, fixed, liquid, etc.
Now I have Dreamweaver CC, and I can only choose one or two sidebars / fixed width. If I opt for a Fluid Grid Layout instead, there are no options for headers, footers or sidebars - and it apparently doesn't work with PHP. If I change the extension from .html to .php, then I can't write PHP code in it. (The PHP tags aren't highlighted red, at least.
So I'm thoroughly confused.
I have several websites with a variety of page types. I started experimenting with responsive design some time ago and generally have the hang of it, but I'd like to start fresh with a new layout, which will hopefully fix a few problems. All of my pages have a header and footer. Most have just one column or one sidebar (usually right), but a few have two sidebars.
Anyway, can anyone suggest some good layouts to get me started? (I'm using a Mac with Mavericks and MAMP.)

Geobop wrote:
Wow, Bootstrap looks interesting, though maybe a little intense; kind of like Drupal.
In fact, I've been thinking about upgrading to WordPress or Drupal one of these days, but it looks like Bootstrap does a lot of the things they do.
Bootstrap is just a responsive framework unlike Wordpress and Drupal which are first and foremost Content Management Systems where developers produce 'template themes' - most now responsive.
Bootstrap as far as I'm aware is not a CMS.
If you want good looking out of the box design themes then dive into Wordpress it might be for you. Personally I don't like the bloat you get with it and the code either.

Are dreamweaver CS3 templates responsive?

Hello,
I need to create my project that will work also in ipad and the new cellphones? I'm using Dreamweaver CS3, and already almost done with the project when I was asked to have this new parameter - the site has to be responsive to these devices. Will the template in Dreamweaver CS3 work with these devices? I don't currently have these devices to test. How could I test them. If not, any suggestions... Any help, please....
Zandy
[email protected]

Unfortunately, CS3 predates the "responsive design" concept by a few years. You can still make responsive designs using it, but it requires more knowledge of handcoding the CSS/HTML. If you look into Media Queries and Responsive Design online, there are quite a few sources that give you the info you'll need. Depending on your level of comfort with CSS and HTML, they may be a great help, or a confusing mess.
http://www.lynda.com is a good resource
As for previewing things for smaller devices, Firefox has a nice little thing built in for that...
Tools > Web Developer > Responsive Design View (Ctrl + Shift + M).

Switching templates

Is it possible to switch templates in an already created Pages document? What I have in mind is the ability in Keynote to switch themes.

No a template is a ready made design which you open and adjust.
Themes are possible in WebSites because of CSS sheets which contain referenced sets of styles for named elements, both text and objects. This does not exist in Pages. MsWord has this only partially.
Peter

Responsive design top logo image

I have problems with my responsive design: top logo image doesn't follow the various widths. Fex. the mobile display width or the maximum width display. I've tried to fix this by adding a srcset with tree different image sizes but that does't work either. The fluid grid template is DW:s own, it's the latest version of DW from Creative Cloud.
These are my two attempts:
<header class="fluid" id="logga"><img src="Images/Logga4.jpg" srcset="Images/logga1 300w, Images/logga2 650w, Images/logga3 1150w" alt="Logga"/></header>
and the one without srcset: <header class="fluid" id="logga"><img src="Images/Logga4.jpg" alt="Logga"/></header>
Any ideas?

See if this live example helps you. I have 3 different images -- desktop, tablet and mobile.
Alt-Web :: Fluid Grid Test #4
Relevant CSS code:
/**for desktop**/
.desktop {display:block;}
.mobile, .tablet {
    display:none;
/* Special Rules for tablets */
@media only screen and (max-width: 768px) {
    .desktop, .mobile {display:none}
    .tablet {display:block}
/* Special Rules for mobiles */
@media only screen and (max-width: 480px) {
    .desktop, .tablet {display:none}
    .mobile {display:block}
Relevant HTML code:
     <div class="gridContainer clearfix">
     <img class="banner desktop" src="http://placehold.it/1056x200/198EBA/FFFFFF&text=DESKTOP.jpg" alt="desktop image" />
     <img class="banner tablet" src="http://placehold.it/800x100/2A4D6B/FFFFFF&text=TABLET.jpg" alt="tablet image" />
     <img class="banner mobile" src="http://placehold.it/320x75/FFC000/000000&text=MOBILE.jpg" alt="mobile image" />
</div>

How to add multiple presets to responsive design view without having to resize the screen each time

I want to be able to add multiple screen size presets to the responsive design view capability but don't want to have to resize the screen and add each one individually via the custom preset function.
Have seen that some posts on the internet (http://g-liu.com/blog/2013/08/firefox-rdm-presets/) that say this can be done but cannot find where the config is held in ver 26.0?

You can also do the opposite and 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 devtools.responsiveUI.presets pref.
See also my post here for a bookmarklet.
*[[/questions/957590]]
You can paste the current value of the pref in the prompt to see a list of currently defined presets.<br />
You can add a new preset by entering the width,height,name values in the prompt.<br />
Copy the new preset list to the pref.
<pre><nowiki>javascript:(function(){
function rdObj(w,h,n){with(this){key=w+"x"+h;if(n)name=n;width=w;height=h;}}
rdObj.prototype={key:"",name:"",width:"",height:""};
var n={},p='<width>x<height> <name> OR width,height,name',rd=[];
while(p!=null){
p=prompt(p,JSON.stringify(rd));
if(/^(\d{3,4})[,x](\d{3,4})([, ](.+))?$/.test(p)){
n=new rdObj(RegExp.$1,RegExp.$2,RegExp.$4);rd.push(n);
}else{try{rd=JSON.parse(p);}catch(e){}}
}})()</nowiki></pre>

Responsive design project not working in Opera or Chrome

My Captivate project in responsive design is only previewing in Internet Explorer. I have also uploaded the projects to my server and am having the same problem. Why is this?

Hi,
Chrome 36 has some issues with captivate html5 output. Please find the following workaround to fix the issue.
http://blogs.adobe.com/captivate/2014/07/update-on-captivate-html-5-content-playback-issue -in-google-chrome-browser.html
Let me know if this fixes the issue.
devraj

Slideshows in responsive design

Making responsiv designs in Dreamweaver has become easy but if you want to make a webpage with a full page slideshow optimized for ordinary screens and high resolution screens (Retina) you must have images of a rather large size. So if you have images that fit eg. the new 30" Apple Retina display an Iphone must download the same images and downsize them to fit the phone display. What I'm concerned of is the pageload time. I know that Muse automatically downsize images in the different layouts but Muse doesn't do true responsive design. My question is then - is it possible to have the same slideshow pointing to different folders with images of more appropriate sizes?
Or is the solution that you make 2 or 3 slideshows on the same page and then in CSS hide (display: none) the slideshow that is not needed? But if an element is hidden, isn't it loaded anyway?
Or are there other solutions?
Best regards Jørgen

Never tried this myself but I guess appending the images using jQuery based on screen width might work: If screen width is more that 500px the appropriate 'desktop' img is appended to its <li></li> container, else a smaller image is appended to it.
Might be a good reason this won't work just thinking off the top of my head. (I don't know if all the images are download when the document is ready or just those that conform to the screen width.) Someone will have a view.
<!DOCTYPE HTML>
<html>
<head>
<meta ="charset=UTF-8">
<title>Untitled Document</title>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script>
$(document).ready(function() {
if ($(window).width() > 500) {
$(".slide_1").append("<img src='desktopImages/slideshow_1.jpg' />");
$(".slide_2").append("<img src='desktopImages/slideshow_1.jpg' />");
$(".slide_3").append("<img src='desktopImages/slideshow_1.jpg' />");
$(".slide_4").append("<img src='desktopImages/slideshow_1.jpg' />");
$(".slide_5").append("<img src='desktopImages/slideshow_1.jpg' />");
$(".slide_6").append("<img src='desktopImages/slideshow_1.jpg' />");
else {
$(".slide_1").append("<img src='mobileImages/slideshow_1.jpg' />");
$(".slide_2").append("<img src='mobileImages/slideshow_1.jpg' />");
$(".slide_3").append("<img src='mobileImages/slideshow_1.jpg' />");
$(".slide_4").append("<img src='mobileImages/slideshow_1.jpg' />");
$(".slide_5").append("<img src='mobileImages/slideshow_1.jpg' />");
$(".slide_6").append("<img src='mobileImages/slideshow_1.jpg' />");
</script>
<style>
ul {
margin: 0;
padding: 0;
li {
margin: 0;
padding: 0;
list-style: none;
</style>
</head>
<body>
<div id="slideshow">
<ul>
<li class="slide_1"></li>
<li class="slide_2"></li>
<li class="slide_3"></li>
<li class="slide_4"></li>
<li class="slide_5"></li>
<li class="slide_6"></li>
</ul>
</div>

</body>
</html>

Switching Templates? Responsive designs?

Similar Messages

Maybe you are looking for