Responsive design tutorial?

[nhas...@gmail.com]

Do you have any tutorials available on how to achieve a responsive design? The first 2 headers on google.com/webdesigner/ are about compatability across devices/screen sizes, but I haven't been able to get my design to scale at all.

If I set
.gwd-page-size {
width: 100%
}
[data-gwd-component-id="page1"] {
max-width: (somepixels);
min-width: (somepixels);
}

And
"page1": {
"properties": {
"width": "100%"

I can achieve a responsive design, but it breaks the design view.

It seems that the width and height of .gwd-page-size are used to set the size of the canvas in design view, but it cannot be set as a percentage, even if absolute width is set for html and body.

With all the emphasis on not having to worry about compatibility "across screens" and "without compatibility issues", it would be really nice to have some instructions on how to achieve this.

Thanks

P.S.
Your "Tags" field (on this page)says "comma separated list", but it separates tags whenever I hit space.

[Valerio Virgillito]

Hi,

So as you have noticed our authoring environment is better suited for absolute layouts, especially when it comes to Ads and pages. This is partially due to the fact that most ads will be served through iframes. But there is an option to center the page in the properties panel, which works on preview and publish. In a non-Ad document you can actually create more responsive content without breaking design view.

Our support is still pretty limited but we are working as we speak on better ways and workflows to create responsive design directly in Design view and support responsive documents. So stay tuned for more to come in this area.

Thanks,

Valerio (GWD Team).

PS: Not sure about how Google groups handles 'Tags' as I haven't had a chance to use that feature yet.

[danielr...@gmail.com]

you figure any this. Im looking to create a simple multiple page html file with image only. just want that image to be responsive across screens

[Google Web Designer beta]

Hi Daniel,

You can check out our help topic and the youtube tutorials on the new Responsive Layout feature.

GWD Help Topic:

https://support.google.com/webdesigner/answer/7002913?hl=en&ref_topic=7003209

YouTube tutorials:

Responsive Layout: Overview - https://youtu.be/pdEoLrGwMTY

Responsive Layout: Advanced Techniques - https://youtu.be/wk5QqUyvCso

Responsive Layout: Animation - https://youtu.be/pl5j3FfXdM4

Thanks,

Emily (GWD Team)

[Svein-Tore Narvestad]

Hi 

Try this:

1. Insert the image and set it to the size you want.

2. change the width from px to % (percent)  in the properties panel for the picture

3. set the height to auto.

The picture will be right scaled when you chagne the width.

Svein-Tore