Highlighted

Adobe Muse breakpoints vs page size on tablets & mobile

Explorer ,
Feb 26, 2018

Copy link to clipboard

Copied

Hi Forum

Have been going around in circles and thought I would ask.

I understand the concept of browser width and page size when creating fixed width breakpoints and all good at larger screen sizes.

I am wishing to keep with the new Muse responsive/adaptive process and realise that going back to the alternate layouts is an option.

However with tablet and mobile devices I cannot solve a fixed breakpoint issue:

To achieve a fixed BP for tablets and mobiles without the canvas size interfering.

In that the page size will always be smaller than the fixed BP – but the tablet and mobile will bring in the BP size so therefore pages display smaller than desired in viewer window. ( Yes if (a) I make the BP fluid – but do not wish to due to complexity of elements or (b) create another BP 25px less, then i can fudge my way around this).

When I create a fixed width break points at 1064 and 768. The canvas size of the 1064 is 1064 and page size is 769.

The breakpoint of 768 the canvas size is 768 and the page size is either the smallest page size set in page properties or 1 pixel larger than the next smaller break point.

When the tablet pulls in the page it pulls in the canvas size. See image.

I am trying to achieve a fixed BP for tablets and mobiles that will allow the page size to be without the canvas size interfering. ( to restate...Yes if (a) I make the BP fluid – but do not wish to due to complexity of elements or (b) created another BP 25px less, then i can fudge my way around this).

I have read the comments by Pavel/fotoreader & Gunter on Fixed width responsive quirks  and Fixed Breakpoints Cannot Have Own Page Widths?  plus watched both of Dani's video's on fixed width responsive. Pavel had mentioned creating a simultaneous 768 BP of fluid and fixed but pretty sure that cannot occur except if one BP is on the masterpage  and the other on the design..and testing this had no impact.

Anyways thanking you in advance

M

test.jpg

Views

788

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Adobe Muse breakpoints vs page size on tablets & mobile

Explorer ,
Feb 26, 2018

Copy link to clipboard

Copied

Hi Forum

Have been going around in circles and thought I would ask.

I understand the concept of browser width and page size when creating fixed width breakpoints and all good at larger screen sizes.

I am wishing to keep with the new Muse responsive/adaptive process and realise that going back to the alternate layouts is an option.

However with tablet and mobile devices I cannot solve a fixed breakpoint issue:

To achieve a fixed BP for tablets and mobiles without the canvas size interfering.

In that the page size will always be smaller than the fixed BP – but the tablet and mobile will bring in the BP size so therefore pages display smaller than desired in viewer window. ( Yes if (a) I make the BP fluid – but do not wish to due to complexity of elements or (b) create another BP 25px less, then i can fudge my way around this).

When I create a fixed width break points at 1064 and 768. The canvas size of the 1064 is 1064 and page size is 769.

The breakpoint of 768 the canvas size is 768 and the page size is either the smallest page size set in page properties or 1 pixel larger than the next smaller break point.

When the tablet pulls in the page it pulls in the canvas size. See image.

I am trying to achieve a fixed BP for tablets and mobiles that will allow the page size to be without the canvas size interfering. ( to restate...Yes if (a) I make the BP fluid – but do not wish to due to complexity of elements or (b) created another BP 25px less, then i can fudge my way around this).

I have read the comments by Pavel/fotoreader & Gunter on Fixed width responsive quirks  and Fixed Breakpoints Cannot Have Own Page Widths?  plus watched both of Dani's video's on fixed width responsive. Pavel had mentioned creating a simultaneous 768 BP of fluid and fixed but pretty sure that cannot occur except if one BP is on the masterpage  and the other on the design..and testing this had no impact.

Anyways thanking you in advance

M

test.jpg

Views

789

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Feb 26, 2018 0
LEGEND ,
Feb 27, 2018

Copy link to clipboard

Copied

Do you see any possibility, to describe your issue in simple, clear and short words? Please be aware, that many – if not most – of us aren’t native English speakers. I, for my part, unfortunately don’t understand, what you want to know.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 27, 2018 0
Explorer ,
Feb 27, 2018

Copy link to clipboard

Copied

Hi Gunter thank you for the prompt response and reminder that this is an international forum...will try again, here goes..

  • Q: Can I achieve a 'fixed breakpoint' for tablets and mobiles without the browser canvas interfering?

1. When creating a 'fixed breakpoint' extra width is added either side for the 'bowser' - the 'page size' then becomes either 1 pixel larger than the next breakpoint size, or the minimum page size set in 'page properties'.

– therefore the 'fixed breakpoint' is larger than 'page size'.

2. However tablets and mobiles, bring in the fixed breakpoint size (including the added browser canvas width) not just the page size.

– therefore on tablets and mobiles the active page area is smaller than the display. (see attached image – yellow is the breakpoint size - white the page size).

3. So I am trying to achieve a fixed breakpoint for tablets and mobiles that will allow the page size to be without the browser canvas size interfering.

( Yes ....if (a) I make the BP fluid – but do not wish to due to complexity of elements or (b) create another BP 25px less, but then this creates a lot of extra BP's.....(C) go back to alternate layout.. then i can get around this).

all the best

sqpeg

test.jpg

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 27, 2018 0
LEGEND ,
Feb 27, 2018

Copy link to clipboard

Copied

It is still very unclear for me. One of the reasons: I don’t know if you are talking about

  • special tablet/phone breakpoint breakpoints on a page, which contains different breakpoint for phone, tablet and probably desktop,
  • tablet/phone breakpoint(s) on dedicated „alternate“ pages with one ore more than one breakpoints for phones (respective tablets).

The solution, as far as I am concerned, is, to give us a blank .muse file via Dropbox, CC Files or similar services, demonstrating your issue. Then we will see …

But I am not the only one here. Perhaps other community members are not as  uncomprehending as I am.

Frankly spoken: I even don’t understand the „sentence“: „Tablet portrait brings in fixed 768 breakpoint page size 480“ My English is not that bad, but …

What does tablet portrait bring in? Fixed Breakpoint 768 page size 480. Are you really sure, a native english speaker, who understands every word, would understand the meaning?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 27, 2018 0
Explorer ,
Feb 27, 2018

Copy link to clipboard

Copied

Thanks all again for your patience ..I will give it one more go...

  • Q: Can I achieve a 'fixed breakpoint' without Muse including the addition of a browser canvas either side of the page?

Why? because when a tablet or mobile device displays the page, it includes not only the page width, but also the browser canvas width set by the breakpoint as well, therefore making the page width smaller. When displaying a page on a tablet, for example in portrait position, the display shows the 768 fixed breakpoint but the actual page size is smaller, because part of the 768 width is taken up by the addition of a browser canvas.

thats all I've got, no file to send as such a generic question.

all the best

sqpeg

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 27, 2018 0
Adobe Community Professional ,
Feb 27, 2018

Copy link to clipboard

Copied

sqpeg  schrieb

Thanks all again for your patience ..I will give it one more go...

  • Q: Can I achieve a 'fixed breakpoint' without Muse including the addition of a browser canvas either side of the page?

Have no idea, what you need. There are fixed width breakpoints. No fixed breakpoints.

Without Muse including the addition of a browser canvas? Decisions are there to be made, mate. You have to respect the guides in a fixed width layout, so you always cannot use the full width except for elements that are "stretched to browser width".

Bildschirmfoto 2018-02-28 um 08.14.39.png

This is no matter of desktop, tablet, mobile. The red area should not contain any elements.

Let me add, that mobiles like fluid width designs, but have seen some fixed width layouts, too, which "work" quite nice.

Best Regards,

Uwe

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 27, 2018 1
LEGEND ,
Feb 28, 2018

Copy link to clipboard

Copied

No, it is definitely not all! There are many informations missing.

  • We don’t know, if you are working with single adaptive pages.
  • We don’t know, if you are working with adaptive pages and multiple breakpoints – including eventually responsive ones.
  • We don’t know, if you are working with responsive pages, with simply (fixed) tablet and phone breakpoint.

i think you would already have an answer, if you gave us a file, so that we see, what we are dealing with.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 28, 2018 0
Explorer ,
Feb 28, 2018

Copy link to clipboard

Copied

Thanks fotoroeder, will carry on with my work arounds.

I have also gone back over your comments from

Fixed width responsive quirks

all the best to all

Sqpeg

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 28, 2018 0
Adobe Community Professional ,
Feb 28, 2018

Copy link to clipboard

Copied

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 28, 2018 0
Guide ,
Mar 01, 2018

Copy link to clipboard

Copied

Q: Can I achieve a 'fixed breakpoint' for tablets and mobiles without the browser canvas interfering?

The short answer is -  no you can not.

"Browser canvas" is necessary so that you do not set breakpoints through each pixel. Create your design based on this or use a fluid breakpoint

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 01, 2018 1
LEGEND ,
Mar 01, 2018

Copy link to clipboard

Copied

He is able to achieve this, by using adaptive layouts.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 01, 2018 1
sqpeg LATEST
Explorer ,
Mar 01, 2018

Copy link to clipboard

Copied

Thanks all..O.K. got it...signing off.

thought there might be  some sneaky html

The main point I kept banging on is that with the 'fixed width breakpoints' the page realestate on the tablet and mobile is narrower, due to the inclusion of the compulsory browser canvas that is applied with 'fixed width breakpoints'. Which on the desktop does not mater but on the smaller screen... it would be great not to have.

Thank you Pavel, Günter, and fotoroeder

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 01, 2018 0