Layout Blocks and Devices

Question
#1

I have to be doing something wrong, so I need some direction with Layout Blocks. I have a website that I laid out with the default view of PC/Landscape Tablet. I then custom laid out each page for Portrait Smartphone (PS). Everything was set up and working well. I then upgraded to Sparkle 4 and got enamored with Layout Blocks. So in the PC device layout I worked my way down each page for this website, moving a section at a time to its own Layout Block. At that point I was a big fan of Layout Blocks. But then I went back to the PS view of my homepage and everything was a mess, as well as all other pages that I had spent quite some time previously laying out. What happened? The Layout Blocks that I set up don’t seem to be there, or are at least not responsive in PS view. All the content is all over the place. What did I miss in my set up? When I went back to the PC view I lost some of my elements and had to restore the website with a backup copy.

If you look at the site (www.gcm73.com) as of 2/6/22 you will see that everything looks okay in PC view and in PS view for most pages because I went with the backup copy. This page (Football) will show what it looks like with the Layout Blocks being used in the PC view layout and how it looks in PS view.

Hope all of this is clear. I would appreciate any help that would get me going in the right direction.

#2

Hi.

I was wondering when this topic would appear here.
I had about the same experience when I converted an existing page to Layout Blocks. It is indeed a bit complex.

I did not touch a sticky header and footer in the process.

The best way is to go step by step. Start with desktop and create the first layout block. Leave the background colored. Now switch to the 320 px layout. It may look chaotic. Arrange all elements in the colored layout block as you want them and position the block. Adjust the size. Leave the background colored!

Back to Desktop and create the second block. Give the background a new color. Back to the 320 px layout. Move and position. And so on until all blocks are in place.

At the very end remove the background colors.
Check if elements like a menu are still on the top layer, because the layout blocks like to take this position.

I hope I could help a little. It takes time to rearrange.

Mr. F.

#3

I’d appreciate if you could send us the pre-layout block project file, wetransfer.com to feedback@sparkleapp.com, so we can fix any bug with the multi-device conversion. Thanks.

#4

Hello @duncan

You have mail with a ZIP file attached.

Mr. F.

#5

So I spent some time going through this website layout I was having problems with and I think everything is straightened out. I have no idea what caused the Portrait Smartphone (PS) layout to be messed up on all my pages after moving everything to Layout Blocks. I was able to take a backup website file that only had a couple pages with Layout Blocks and reconstructed those pages and the remaining pages one at a time, checking the PS layout after I finished each page. This time the Layout Blocks were showing up behaving as they should. FYI, I did not do anything differently than the initial time I set up the Layout Blocks, other than checking each page in PS after completing that page in the PC layout view. I still have some layout modifications to take care of on this website and hoping working within the Layout Blocks makes it easier vs causes problems.

#6

I did another test with a new page. I created the desktop layout and made two Layout Blocks. Switching to the PS layout showed the Blocks correctly.

There seems to be only one problem when you want to set up layout blocks on already existing pages (desktop and PS layout are ready).

Mr. F.

1 Like
#7

I did not make the connection that it would be a problem in PC layout view to set up Layout Blocks on existing pages that were already custom laid out for Portrait Smartphone (PS). I have another website I designed in PC view that I did not custom layout the PS view. Adding Layout Blocks in PC layout view showed up correctly in PS view and did not mess up the design.

I have to believe there are a number of Sparkle users who upgraded to version 4 who ran into this problem when moving content to Layout Blocks, if this really is the source of the problem. Is it correct to say that users should be advised not to use Layout Blocks in PC layout view on existing pages if those pages were already custom laid out in Portrait Smartphone layout view? And if that is the case, perhaps Sparkle should include this caution in the documentation (it might already be there but I did not see it).

#8

I changed an existing website to a site with Layout Blocks and it works like a charm.
What I did is divide the page (in my head) in sections. I selected those sections and then right click and you can put that selection directly into a layout Block. Easy peasy and no fuss. The only “problem” I have is that I think 5px is really tiny on a mobile.

4 Likes
#9

This was my experience as well…

2 Likes
#10

Same experience, wonderful addition

3 Likes
#11

The small font on mobile can be adjusted if you have your styles set up. You may change the font size in styles for mobile without affecting the other styles used on other devices.

2 Likes
#12

I’m currently updating my homepage with layout blocks and perhaps two of my own experiences while working with them might be helpful:

First:
One good thing in sparkle is the independence of size and position of items in different layouts. But this also may cause a problem: Let’s say, you want to create three identical boxes using them as backgrounds. You create one and then you copy and paste the two others. Now you arrange them on your landscape page: box 1 at the top, box 2 in the middle and box 3 at the end. When creating the portrait smartphone page, it might be possible that you arrange them in a different way, simply because you selected box 3 first and placed this box at the top, box 2 in the middle and box 1 at the bottom. Normally it doesn’t matter because the boxes are just identical.
But when you use layout blocks and you select box 1 (top) on the landscape page you select exactly box 1 in portrait Smartphone layout, which, in my example, is placed at the bottom of the page.
And now the confusion is perfect: In landscape mode all seems in the right order while in portrait mode the items are grouped to a layout block widely scattered over the page.
You can avoid this by the use of a strictly identical sequence of the elements on all layouts, which is no problem when creating new sites but might be a slumbering problem in existing projects especially when revised several times.
That might be the reason for your problem.

Second:
If you collect some elements by selecting them while pressing the “Shift” key and you want to arrange them to a layout block, the sequence you select the items is reversed arranged in the layout block. For example: to arrange a text box over a background box you have to select the background first and then the text box. In the layout block they are arranged properly.

3 Likes
#13

guauuuu!! Por fin, lo entendĂ­!!
Gracias!! :wave: :wave: :wave:

#14

This does make sense and it does explain some of the “odd” behavior I have been experiencing going between Landscape and Portrait Smartphone. I have two personal sites that I originally designed in Sparkle maybe three years ago, with lots of edits over the years. Getting them properly into the Layout Blocks is key and your explanation helps with that process. For me it has been a lot of trial and error to understand the behavior of the Layout Blocks and what works and does not work going between devices. I am not a fan of the Sparkle Documentation. There is a lot of information but for my mind it is not always clear and seems to skip over some of the basics. For example, how to work with Layout Blocks with an existing website design. It sounds like you found these solutions from the same trial and error and experience vs. reading about it in the documentation. I guess we all learn best by doing.

1 Like
#15

For the time being until more documentation and bug fixes don’t use layout blocks.
You don’t have to use them to produce what you want.
-Bill

1 Like
#16

Hey Bill,
Thanks for that sensible recommendation.

Joe O’Laughlin

#17

Hi.

Well, I can kind of agree with Woodrow.
Certainly, layout blocks have their right to exist, but many things can be realised without them. There is still some sand in the gears.

What I can imagine are dynamic pages where posts have to be added or shortened. That would make it easier to move the blocks.

We’ll see what update Sparkle has in store here.

Mr. F.

#18

I really like the idea of the Layout Blocks. When I first posted for this thread I was frustrated because I took full pages of a website, dividing the pages into sections of elements that were applied to Layout Blocks. After doing that my custom designed Portrait Smartphone pages were a mess. I’m not sure if applying Layout Blocks were the cause or what, although it was the only thing I changed prior to the mess.

It took me a fair amount of trial and error to figure out the nuances of Layout Blocks. Once I got elements “properly” situated in their Layout Block, they seemed to behave well. I write “properly” because I have no idea whether I am following best practices in doing all of this, from the creation of my existing sites to transitioning those sites over to the Layout Block system.

I would really like to see Sparkle put together either one video or a series of videos that walks through the Sparkle workflow. For example in regards to Layout Blocks, at what point should you apply a Layout Block: as you go section at a time on a page, or after you have completed your page design? How do you go about deleting a Layout Block without deleting the elements within the Block? How do you add elements to an existing Layout Block? How do you take one Layout Block and divide it into two? These are all most of the issues I had to figure out by trial and error.

4 Likes
#19

Hi.

Maybe this could help: first remove / move the elements in the block, then delete the Layout Block.

Mr. F.

1 Like
#20

I like the idea of Layout blocks, I used to use a website designer that worked on layout blocks.
I will have a template file with all blocks I create, if I need a block again or have repetitive layout section then I can just drag and drop in the position I need it and alternate the content. That side layout will make the room for the new block automatically so you don’t have to fickle around as you need to do without layout blocks.
I hope that makes sense.

2 Likes