It may be my own inexperience but the only thing I tend to miss about WordPress when working in Sparkle is starting out on a desktop version of a website only to find that the mobile version is going to need a complete overhaul. This is especially true if I import a website to replace a WordPress website. The mobile version takes more time than anything else and if I decide to add more text, I had better be ready to rearrange everything on mobile to compensate for the needed room.
My question is, are there any best practices or tips for dealing with this?
Fixing mobile layouts is the biggest consumer of my time. I did an HVAC website that I imported into Sparkle (https://www.stewartairsystems.com/) and the mobile was a real bear to fix. Every text block was imported as sentence-long text elements like 30 of them on a page. All were around 3 to 4 px in mobile.
Again, if there are resources I should be reading or if someone more experienced has advice, that would be great!
The key to making alternative layouts easier to deal with is organisation. The first rule is to always use Sparkle’s text style options for all the text objects on your page. Remember, you can update the styles to use any font/size/colour. Using styles not only maintains design consistency throughout your website, it also makes life a lot simpler when moving to the mobile layout.
The second rule is to group page components. Not only does this allow for easy duplication of groups while developing your pages, but it also allows you to move groups around as single objects. In the example below, the image, title, description and button have all been grouped to make a single object - the one on the left shows the grouped selection, the one on the right is then created by Alt-Dragging the group and then making edits to the individual elements on the copy.
The third rule is to name your layers - at the very minimum, name your groups. This allows you to quickly identify specific parts of the page, particularly important when moving to a new device layout.
The fourth rule is to make use of layout blocks. Most web pages are broken down into sections. Each of these sections should be wrapped in a layout block. Here is an example:
The big advantage of using layout blocks is that whole sections of the page can be moved up and down the page and in the process will move the layout blocks above and below. Also, dragging the bottom resize handle to extend the height of the layout block, will cause other layout blocks below the one you’re editing to move down the page to accommodate the resized layout block.
All of these disciplines will make creating a mobile layout a lot simpler. When you move to a mobile layout, you will see a scaled down version of your page, all neatly laid out within layout blocks. If you select the bottom handle of the topmost layout block, you can drag it down the page to make it much taller - creating space for you to move individual groups and elements within the new, enlarged layout block. All the layout blocks below the one you’re editing will move further down the page as you resize (note, you will have to extend the length of the whole page to accommodate this).
Next comes the text elements. You will notice that your text has been scaled to a very small size to fit on the mobile layout. Simply select each text element in turn and set a new font size. For example, change the size of a Body Text element and then click the Apply changes button in the styles panel, This will apply the new font size to all the body text elements on the page.
Because the text will now overflow it’s containing box, it will be outlined in red. Just adjust the size of the text box until all the text can be seen, Rearrange surrounding elements to better suit the device layout. If you need more space, simply adjust the size of the containing layout block.
Repeat this with other text elements until all your text styles have been updated. Once your first layout block is complete, move onto the second layout block - adjust its size, reposition groups as needed and enlarge the text boxes until you can see all the text. This process is fairly quick and easy because you are working on one section of the page at a time without worrying about what is happening further down the page. Take each layout block in turn and style it to suit the device screen before moving down the page to the subsequent blocks.
The thing to note here is that updating text styles only affects the current device layout - your original desktop pages will be unaffected by these changes.
Frank’s response has covered it well and if followed makes life far easier on mobile.
For me in the earlier days it was more to do with a mind-set change.
Sparkle is one of two paradigms models in building out a website and it is the one that we Designers have total control over… but admittingly it comes at a cost - our time.
And sure their are trade-offs, but you will never have to deal with a hacked site and that will give your client the peace of mind that other platforms can never give.
Layout Blocks was introduced to better manage a mobile device so it is well worth familiarising yourself with them. And the most important point is to organise everything (Font Styles, Grouping, Layout Blocks, etc…) on your desktop device before you hit the introduction of the mobile device.
I didn’t know that styles applied to only the device layout you’re working on. That helps quite a lot! I wasn’t making a lot of use of the styles.
How true. I had to update 7 or 8 items already this morning, on a WordPress site I built just six weeks ago. Every out-of-date plugin and theme is another chance for a hack to get through.
Thanks again Frank for your great detailed post.
Can you post a example how you or someone name their layers?
I don’t want it to over complicate it.
Thanks.
@MiWe Attached is a screenshot of how I organise and name my layers in a sample webpage.
I don’t use layout blocks because I don’t want to compromise on the design.
The method I use for mobile is this: When I do anything on the desktop, I immediately edit the mobile version and if it is something repetitive, I copy it and continue.
This way I don’t have to re-edit it every time.
That’s great!! Thank you so much @francbrowne
Sometimes I stuck in my thoughts, I know thinks how and when to do it but when I want to do something i think many ways and being not sure anymore what is the best way.
Thanks again, that helps me alot. 
Great explainer, thanks.