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

Similar Messages

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.

Liquid Layout crashing InDesign CS6

I was using liquid layout - pinning a graphic- and when I tried to resize, the whole program crashed.   Every time I try to resize - on any page in the doc, it crashes the program.
InDesign CS6.   Liquid page rule: controlled by master [which is object based].   Objects move with page.
I've tried everything, for hours now.   I have no idea why it was fine, then all the sudden it's broken.
Very frustrated.

How would you go about exporting your alternate layout alone for print?

Liquid Layout does not work with extreme long pages

(Solution at the end)
Hi there.
I have a layout for iPad with a width of 1024 and variable height.
I now need an alternative layout for iPad HD. So I try to use liquid layout to alternate my layout to 2048 width and height x 2.
The maximum size in InDesign is 15552px. So I managed to get all my SD layouts below 7776px.
to sum things up:
iPad SD: 1024x7776
transform into
iPad HD: 2048x15552
Problem is, in this case the option to scale everything automatically gets completely ignored.
Another layout, which uses only text and no images, boxes or multimedia gets transformed correctly.
Does anybody have a tip for me how I can work around it?
Thanks in advance.
p.s.: Adobe, please increase the maximum sizes for documents
Solution:
Aaaand I just got it. Specify a new preset for your document-sizes: 2048x15552. Now if you use the page tool just click the new (in my case) "iPad HD" and choose liquid layout: scale.
Works like a charm

I am using Automator to find files with the .pages
extension and then copy them to another folder, which
lists the copied Pages files by name but with Zero
KB! The files will not open - error: the index.xml
file is missing.
Any ideas on how to get a Pages file to copy with
Automator?
Hi Kurt
To answer the title of your message: no, Pages does not work with Automator.
But that's not really what you're asking. You really want to know how to copy Pages documents using Automator.
To help you we need to know what Actions you're using in Automator and the parameters you're using eg the Filter Finder Items action (using a pages file extension) and the Copy Finder Items actions. Pls let us know how you're doing this and we'll try to help.
Thanks.

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.

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?

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/

FAQ: How can I make my Flash Catalyst application scale/use a liquid layout?

Flash Catalyst CS5 currently only supports applications with fixed dimensions. Custom components you create in Catalyst have absolute sizing.
If you want to experiment with creating resizable applications (liquid layouts) and components in a preview of the next version of Flash Catalyst, codenamed "Panini", you can find more information here:
Introducing Adobe Flash Catalyst "Panini"
Download Adobe Flash Catalyst "Panini"
Adobe Flash Catalyst "Panini" help
Keep in mind that Flash Catalyst "Panini" preview is meant for exploration and testing, not real production. If you are doing real production work, here are some options that work with Flash Catalyst CS5 and Flash Builder:
Liquid Layouts
If you are building an application that requires relative constraints, you can take the FXP file from Flash Catalyst into Flash Builder, and apply constraints there so that your components resize according to your application dimensions.
For more info, see this Help topic:
Using constraint-based layouts in Flash Builder
SWF Scaling
If you want your swf to scale, without relative constraints, there's a simple way to make that work in Builder as well. Simply save out your FXP file from Flash Catalyst and import it into Flash Builder. Open up the "Main.mxml" file. Remove the width and height attributes on the Application tag, and add the attribute:
preinitialize="systemManager.stage.scaleMode='showAll'
The entire Application tag should look something like:
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
                  xmlns:s="library://ns.adobe.com/flex/spark"
                  xmlns:d="http://ns.adobe.com/fxg/2008/dt"
                  xmlns:fc="http://ns.adobe.com/flashcatalyst/2009"
                  xmlns:ATE="http://ns.adobe.com/ate/2009"
                  xmlns:ai="http://ns.adobe.com/ai/2009"
                  xmlns:flm="http://ns.adobe.com/flame/2008"
                  xmlns:lib="assets.graphics.*"
                  xmlns:components="components.*"
                  backgroundColor="#FFFFFF"
                  preloaderChromeColor="#FFFFFF"
                  preinitialize="systemManager.stage.scaleMode='showAll'"
                  >
There are a couple other scale modes you may want to try, such as "exactFit", which are outlined at the below link:
Flash Stage Scale Modes
Finally, you will have to adjust the object embed code in your html page to set the size of your swf.
Original discussion here

you can`t. allow your application internet access without the network admin defining an exception for it specifically.
If you have admin rights use the router`s/proxy`y configuration software to allow an exception.

Can I use grid layout in JSF visual page designer ?

Hello dears...
I am using Jdeveloper 11 g and 10 g .
When I tried to use JSF visual editor (from the component palette), and when I drag any control to the page I found that the control go to the top left of the page
and I even can not move the control to another place in the page by the mouse.
the JSF visual designer seems to use flow layout for the page . (the same as using flow layout in the swing applications).
The question is Can I change the page layout to be grid layout instead of flow layout ?????? (to be able to move any control to anywhere in the page.)
Note that in netbeans 6.1 , when u design JSF page , you have 2 options for the page layout, grid layout and flow layout and u can choose as u like.
Is this feature found in jdeveloper 11 ?????
if not , Can anybody tell me any workaround to design JSF pages without using flow layout ????
Thanks in advance
Samy
Edited by: user10653280 on Nov 29, 2008 1:30 PM

We don't provide absolute positioning for JSF application - this is a bad practice since it fills your JSF page with CSS code and create applications that are not portable between different screen/monitor resolutions - so we use flow layout instead and provide a much richer set of layout components.
See info here:
http://download.oracle.com/docs/cd/E12839_01/web.1111/b31973/af_orgpage.htm#CACCBCCI

Responsive Web Design - who uses it?

I am very interested in utilizing responsive design to develop client websites. In order to show "respectability" to convince my clients, I am wondering who in the corporate world has used this design style. Do you know of any "big" players who have pioneered this technology trend? Also, do you have comments on it's validity?

Http://www.bostonglobe.com
Http://www.Starbucks.com
Http://www.Bbc.co.uk (http://www.bbc.co.uk/blogs/bbcinternet/2012/03/news_mobile_responsive_design.html)
Http://www.smashingmagazine.com
MIT just released a site with RWD as well.

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>

RWD, liquid layouts, text wrapping at smaller screen size

It seems like for anyone looking to break into web dev these days, the RWD is a must learn. In a perfect world the concept seems pretty simple: page-specific css, plus media queries. So, do I code based on a strict liquid layout, content/container=%. What about the block text inside, is that set to em or px? I currently have em's and my layout shrinks nicely but the text does not appear to shrink along w the smaller div.
I know liquid layouts can become hairy. Do open source frameworks like Bootstrap or Gumby provide the structure to overcome that, or is ensuring a smooth responsive design really more up to the developer and the effort put into troubleshooting anyways. The reason I ask is I currently can't afford to upgrade to cs6 from cs5. Thank you.

DW is just a tool. What matters most is the talent and effort you bring to the project.
In the following example, I used CSS Media Queries to set the body base font size in %.
Mobile = 75%, tablet = 100%, desktop = 135%.
http://alt-web.com/FluidGrid/Fluid2.html
Nancy O.

Why does my image look wrong in liquid layout?

I'm making a site for an artist and tried using a liquid layout in CS5. I also made one in fixed like I usually do. The width on both is 1260 and the header image on both is 1260 px wide.
On the dh5 (fixed) one, the header is centered. On the dh7 (liquid) one, the image, which is a title, is moved slightly to the left. Is this fixable or should I just stick to fixed layouts?
dh5: http://bethniebuhr.com/dh5.html
dh7: http://bethniebuhr.com/dh7.html
Thank you.

Hi
The problem with the header in the semi-liquid layout, (not liquid as it has a max and min width) is that being an image it has a fixed height and width and this is causing your problems.
Using images in liquid and semi-liquid layouts requires a completely different work-flow to what is required in a fixed layout as one must allow all the images to expand within their designated areas and ensure they still retain their aspect ratio, all of which is possible but will require much more work in learning that that normally required.
PZ

Help with spry menu bar in liquid layout

I need help getting a spry menu bar with a 6-item list to stay in place in a liquid layout. Trying to get it horizontally under the header image. I am new to web design (new to html and code: reading books, searching web, and doing tutorials for many hours now), using CS4, working on a mac. You can view my trial page on cc-tn.com. I would appreciate any help offered!

Problem stems from the fact that your page is looking for files contained on your local hard drive instead of the web site.
<script src="file:///Macintosh HD/Users/Allison/CC Web/Templates/SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="file:///Macintosh HD/Users/Allison/CC Web/Templates/SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
In addition, the links to PDF files are pointing to your local hard drive.
p><a href="file:///Macintosh HD/Users/Allison/CC Web/Documents/Foundations_one-page_green.pdf">Foundations</a> is a grammar-stage program for students K4 through sixth grade. Parents attend morning classes with their children as trained tutors model the tools of learning facts from a variety of interesting subjects. Students also participate in science and fine arts projects and practice public speaking each week.</p>
<p><a href="file:///Macintosh HD/Users/Allison/CC Web/Documents/Essentials-One-page.pdf">Essentials</a> is a dialectic-stage program for students in third through sixth grade. Trained tutors model the dialectic tools of learning in English grammar, writing, and math drills. Emphasis is placed on the development of writing skills that will enable students to become effective communicators through the written word. Classes meet in the afternoon following lunch.</p>
<p><a href="file:///Macintosh HD/Users/Allison/CC Web/Documents/Challenge_one-page.pdf">Challenge A & B</a> are dialectic-stage programs for seventh and eighth graders. Emphasis is placed on group discussion as students become more independent learners. Students focus on logic and debate.</p>
Did you define a local site folder in DW before you began this project? Without this critical first step, DW cannot correctly manage assets for you.
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb

Is Responsive Design possible using Liquid Layouts?

Similar Messages

Maybe you are looking for