Responsive Design using Dreamweaver CC

Hello,
I would like to know if we need to include additional mark up, besides having width in % in CSS3, to make our websites responsive.
Kindly advise if there is a tutorial that can guide us step by step how to make a Responsive Website.
Thank you

It's not that you really need additional mark-up, there will be a little additional when compared to a static site in general, but more importantly the structure of your html needs to be created in a "responsive-ready" fashion in order to take full advantage of the power of CSS Media Queries. It takes a little planning from the get go, that's why converting sites from a static layout to responsive can be pretty difficult and time consuming enough to where simply starting over would be better than attempting any conversion.
Here are a few links that give a lot of info on how to create responsive sites with CSS Media Queries...
Introduction to media queries – Part 1: What are media queries? | Adobe Developer Connection
Introduction to media queries – Part 2: Building a responsive design | Adobe Developer Connection
Fluid Grids: Creating Adaptive Designs Using Fluid Grid Layouts in Dreamweaver CS6 | Digital Design CS6 | Adobe TV
http://www.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/
http://zomigi.com/blog/essential-considerations-for-crafting-quality-media-queries/

Similar Messages

Designer using Dreamweaver in a Microsoft Visual Studio development environment

I'm a designer using a Mac with Dreamweaver CS3 to design
pages on a web app. The team I work with is using Microsoft Visual
Studio to manage projects, check files in and out, etc. Each of us
has a MS Windows Server 2003 with a local copy of the site.
I only use Visual Studio to manage the project by checking in
and out, and managing the project files because the Mac has a large
display and is my primary computer.
I was wondering if there was a way I could check files out so
my team members see them as locked when I'm editing them, and vice
versa in Dreamweaver on my Mac.
How do I set up my site in Dreamweaver to do this?
I don't think I want to set up the site as an FTP. What's an
RDS?

I'd probably ask them here about setup.
Microsoft Visual Studio and Visual Web Developer Express forum on ASP.Net
Regards, Dave Patrick ....
Microsoft Certified Professional
Microsoft MVP [Windows]
Disclaimer: This posting is provided "AS IS" with no warranties or guarantees , and confers no rights.

What is the most efficient way to convert a static site to a responsive site using Dreamweaver?

I need to convert an old site made in Dreamweaver to be responsive to any monitor size. What is the most efficient way to do this?

Depending on what you have to work with and how it was coded, it might be doable and then again not. Suffice it to say, there are no magic buttons that will do this for you. Also consider that mobile & tablet users interact differently with their web devices. So your navigation & forms must be finger friendly. Also images & content must make mobile users happy without killing their dataplans. There's a lot of planning that goes into making a good Responsive Web site.
Nancy O.

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

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.

Who really uses Dreamweaver?

I have been a long time user of Dreamweaver and I am really pleased with CS4 and the new abilities to keep track of linked files etc.
However, I have noticed that almost none of the other sites I visit seem to be built using Dreamweaver. I frequently scour other sites for design and technical ideas but very very rarely see evidence of Dreamweaver having been used - eg. I don't think I have ever seen a commercial site that uses Dreamweaver templates. I understand that a lot of sites these days are based on content management systems, but among the static sites that are out there I almost never find sites that appear to have been designed using dreamweaver.
So my question is, does anyone really use Dreamweaver for commercial , production sites and what features (eg. Templates, Spry, ICE) do they use?

richardhellyer wrote:
So my question is, does anyone really use Dreamweaver for commercial , production sites
I do, but I almost never use any of its extended features. I edit my stylesheets in TopStyle when I'm on my PC, because it's easier to navigate and more intuitive than DW's CSS stuff and I clean up messy code in Smultron (Mac) or Textpad (PC), if and when DW's search features are too slow or it refuses to acknowledge some stuff and conks out. The Spry stuff is okay, but I have not yet found an excuse to use it and a lot of other JavaScript code can be found on the web, so one is not too dependent on Spry and the Behaviors panel. The rest of the time DW is just fine and compared to other HTML editors it's surely the most complete package. The only real problem I have, is its rigid approach to dealing with dynamic content. This includes the aforementioned Behaviors panel and naturally, the program being unable to deal even with common CMS systems beyond the likewise rigid Databases panel, is not really helping when working on nested PHP documents and such. You know, empty data regions that are completely meaningless when empty and similar things... It really needs to have a way to connect woith PHP/ CFM/ JSP(A)/ ASP that extends LiveView.
Mylenium

Need Recommendation on converting existing site to responsive design in ATG 10.1.2

Hi,
We have a site developed for a client which is build using CRS 9.0. We need to convert the website to responsive design using bootstrap framework version 3.4. The HTML prototypes have been design by UI designer using bootstrap. Does anyone have experience in doing similar work and can suggest guidelines/recommendations to make this migration easier/faster?
Thanks

Hi,
Have you had a look at
https://support.oracle.com/rs?type=doc&id=1563355.1
Oracle Commerce and Responsive Design White Paper (Doc ID 1563355.1)
++++
Thanks
Gareth
Please mark any update as "Correct Answer" or "Helpful Answer" if that update helps/answers your question, so that others can identify the Correct/helpful update between many updates.

Creating Adaptive Designs Using Fluid Grid Layouts in Dreamweaver CS6 | Digital Design CS6 | Adobe TV

Adobe Evangelist Greg Rewis shows how to create adaptive designs using Fluid Grid Layouts in Dreamweaver CS6.
http://adobe.ly/Iq7L8z

maybe someone here can answer this. Can I take an existing website and apply the fluid grid layout feature to it? I have one regular website that is not responsive. I've tried copying and pasting into the dreamweaver grid layout, but it doesn't respond as expected. Is this even possible?

Dreamweaver 14.1.1 Build 6981 working with responsive design

I have uploaded Dreamweaver 2014.1.1 Build 6981. I am working in responsive design. I contacted Adobe Support for help and they took command of my machine and said everything is OK. After complaining about only being able to edit in Live 5% of the time after waiting sometimes about 5 minutes. I was told that's how the new Dreamweaver works and I have to live with it. He would not answer any other questions. Like why have spell check if it does not work? Why have Live button if it only works 5% of the time? Even when you do edit in Code mode it sometimes just jumps to another section of the code? Does anyone have a solution?

Did you have issues working with RWD sites in the previous version (2014.1 Build 6947)? I have not yet upgraded to latest build because they ruined the Welcome window - still using build 6947, and I have no issues working with my own RWD site, or with Bootstrap/Foundation builds in general. Are you using a framework?
There is a really old problem that I'm not sure ever got fixed, where Dreamweaver would hang on opening some web pages, that may now be afflicting Live View. I implement this fix every time I upgrade Dreamweaver, so I usually do not have issues with Live View.... not with the build I'm using that is. Here's the fix: Hang when opening document | Dreamweaver CS5
There is one other issue that caused my mobile apps to freeze up in Live View, and that was the Google Analytics code. Temporarily commenting that out resolved the freeze up.

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.

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.

Is Responsive Design possible using Liquid Layouts?

Hi it is possible to use Liquid Layouts to automatically move content [instead of just scaling it] when the device is a different size. For example I may have 2 text boxes next to each other on an iPad layout but I want want them stacked on top of each other on the iPhone.
I know this type of responsive design is implemented in the latest version of dream weaver but i'm unsure how to do it in Indesign.
I have attached an image to better describe my question - http://bit.ly/16c82bD
Thanks

@Luke – currently the answer is no.
I think in this regard the development team of InDesign has to go a really long way (if it will be ever implemented).
It means CSS rules for every part of formatting:
A new paradigm for layout composition (and text composition as well).
Uwe

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>

Responsive Design

Six months ago I purchased Dreamweaver CS6 to have my site more interactive, i'm new to Web Development. I currently ran into a slight IE 7 & 8 comp ability issue with DWCS6 and CSS3.
My computer system is Windows 7 with IE9, so when testing my new site all went well, until I uploaded and learned about Internet Explorer Developer Tools, which has cross browser mode to test IE 7 & 8 versions.
Unfortunately my site shows phone view first, I’m using Dreamweaver Fluid Grid Responsive Design System, which gives 3-layouts, phone-tablet-desktop.
For the past month my reasearch is circling to no avail, I have tried many methods on the net , but none seems to be working.
I have learned that “html5shiv.googlecode.com/svn/trunk/html5.js" and "respond.min.js”
are not working properly with my site ( in IE 7 & 8).
May I humbly request your assistance with resolution to these issues?
www.angelsbyangels.com
Thank You,
mlfa

It's really a waste of time to make a site responsive for old browsers.
The hacks required are not simple and tend to add to an already bloated
approach by Adobe. Concentrate on modern browsers and, of course, mobile
devices.
Unfortunately, there is little consensus on best practices for
responsive design - primarily because the methods are evolving
constantly. It is very easy to happen upon an out of date article, which
is probably how Adobe developed their Fluid Grid monstrosity
But if you have a problem with a particular page, you really need to
post a link to a live page or it will be nearly impossible for anyone to
help you.
Al Sparber - PVII
http://www.projectseven.com
The Finest Dreamweaver Tools
Since 1998

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.

Responsive Design using Dreamweaver CC

Similar Messages

Maybe you are looking for