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.
@Davekeys, I feel your pain! Here’s the workaround I have found useful when importing a website. On the original site, copy the entire text and paste it into the new Sitely page. This avoids the bugaboo of having multiple text blocks that you get with the import.
I believe that WordPress remains the best solution for a mobile website, and it shouldn’t be demonized at all costs. While Sparkle/Sitely offers incredible creative possibilities (even though WordPress now does the same with various plugins), WordPress remains the go-to tool for building websites that work across all devices. In my opinion, Sitely should take what’s good about WordPress and integrate it into its own tools. Creating something automated or semi-automated would be a huge help. For example, instead of manually setting text size based on resolution/screen type, it should adapt automatically based on the available space. If WordPress can do it, Sitely can too — I don’t see major technical obstacles. The real issue is that the team behind the software doesn’t have much firepower in terms of the number of developers, so many things might be hard to implement, regardless of the creators’ philosophy.
That said, let’s wait for the new version — maybe there will be some news on this front.
Hello,
I totally understand your point of view, but unfortunately it’s not that simple. Sitely and WordPress are based on two very different systems…
Sitely is a fully freeform visual editor: you can place any element exactly where you want on the page, down to the pixel, a bit like you would in Keynote or Pages. You see the result in real time, exactly as your visitors will see it. It’s true WYSIWYG: “what you see is what you get.”
WordPress, on the other hand, works with a block and section system, at least as far as I know. It’s a more structured approach, designed to adapt more easily to all screen sizes, but also more rigid. For example, freely overlaying text on an image or creating unique layouts becomes more complicated.
It’s precisely this creative freedom in Sitely that makes certain automations harder to implement, such as automatic text resizing. Sitely doesn’t rely on a fixed grid or predefined templates: you’re in full control, which also means you have to manually adapt each version of your site.
That said, I completely agree with you, improvements to simplify mobile layout adjustments would be very welcome. Even just using a more reasonable default text size (instead of 4 or 5 like now), automatically enlarging elements, or stretching layout blocks would save a lot of time. It wouldn’t be perfect, of course, but it would make the remaining work much quicker.
And well, Sitely has recently introduced “layout grids” and image/video grids to help with layout across devices, but a smarter system to automatically improve mobile layouts would definitely be possible. Maybe even with AI? I’d happily pay a subscription for that!
You’re absolutely right across the board. Both systems are designed differently. However, if you told Sitely: “Look, this is the text box—if the screen has a certain size, resize the text to size X and move all the boxes and content near the text box further down,” we’d already have something new and different, don’t you think? Of course, the concept of containers would need to be better integrated. For example, if I place 3 containers—A, B, and C—and one of them expands (like for text), the following container should automatically shift downward. Then, some manual improvements could be made to the boxes, but a big part of the work would already be done.
The issue with modifying a site for mobile is that you have to touch everything. Essentially, it’s like building two websites… and if you want to customize for every resolution, you end up working on the same site at least four times.
That said, nothing prevents Sitely from being set up to work in two different modes. For example, if you don’t care about mobile and just want to make a desktop-only site, then you use Mode A. If instead you want to build a mobile-optimized site, then you use Mode B, where many things are limited (kind of like WordPress), but with the ability to be visible everywhere.
As I mentioned earlier though, I understand that the Sitely team doesn’t have an army of developers. Doing all this requires investment and personnel.
And yes, I’d gladly pay a monthly subscription if these features were available—so you’re preaching to the choir, my friend.
Armchair coding takes you nowhere.
Saying that mobile adaptation requires you to touch everything means ignoring both the features we have added in the last 3-4 years and the advice about organizing and structuring your work.
Layout blocks and text styles will take you a very long way.
Sitely is most certainly the most not-Wordpress website builder you’ll find. Saying in passing that with a plugin you can do the same thing in Wordpress is just hilarious. The whole reason Wordpress is expensive, slow and fragile is its plugin and theme system, with lockstep upgrades and corrupt databases. We’re never going to do that.
Duncan, when reading user feedback, it’s important to interpret it correctly—otherwise, there’s no point in engaging.
I never claimed that WordPress does the same things as Sitely, but that WordPress, in terms of creative possibilities, has the same potential.
What’s hilarious is making it seem like the millions of people who use WordPress are somehow wrong.
Yes, of course, you can use the tools Sitely offers for mobile conversion—but you can’t deny that it’s a complex and delicate process, and not everyone is comfortable handling it.
The fact that forum posts keep popping up from users struggling with this says a lot. There must be a reason for that!
Sitely shouldn’t become another WordPress. I never said it should, and I never suggested it needs plugins or templates like WordPress.
What I did express was a wish: to have tools that make it easier to convert a website into its mobile version.
And if inspiration or ideas can be drawn from other platforms—why not?
I don’t do “armchair coding,” and saying so isn’t exactly kind.
I’m just a user who wants improvements and offers suggestions based on real experience with the software. I’m not a developer—that’s your job.
But I do hope you’ll keep listening to our needs. Because in the end, Sitely is shaped by the people who use it, not just the ones who build it.
When I first started using Sparkle/Sitely about four or five years ago, creating mobile layouts felt like a slow and clunky process. Now it’s a whole different story. The workflow has evolved so much that adapting designs for mobile is almost effortless. Honestly, most of the struggles I still see people having are just misunderstandings about how the layout blocks work.
Just yesterday I published a new Sitely website with absolute ease. I went desktop first, then structured everything neatly with layout blocks. It was quick, clean, and way less hassle than I remember from years ago. Once you understand the logic behind the blocks, it’s a breeze to make everything look great on mobile.
To put it in perspective, I’ve also built plenty of sites in WordPress using popular page builders like Elementor, WPBakery, and even Gutenberg. I even have a full tech-stack for Wordpress (using Bricks Builder + NextBricks + CoreFramework) because there are some projects that you really can’t do using Sitely. While they’re powerful tools, they tend to pile on extra steps, juggling nested columns, making responsive tweaks for every breakpoint, and dealing with occasional quirks that only show up on certain devices. Sitely feels lighter and more direct, and it doesn’t make me wrestle with the tool just to get a clean mobile layout. It’s like the difference between walking a straight path and navigating a maze. You’ll reach the destination in both cases, but one is far more pleasant.
Thanks everyone for comments on tools, and special thanks to Duncan for bearing up through a big development process.
I just began with Sitely after torturous years with other manual apps and before that with Dreamweaver from the 1990s.
Mobile-Edits: Importing several paragraphs at a time for each Sitely’s block, along with other items, this feels easy and efficient. Yes we have to second guess the clinking sequence for editing individual blocks between other blocks. Like click above the handle to the side of text blocks, then after that, hover for the arrows of the block handle, to edit block. (Maybe try track ball with scroll wheel).
Sitely’s Blocks lend assurance that contents won’t change way above or below. Well done developers!
I had endless troubles importing page long texts, difficulties with images spread throughout a long page. Years ago I liked text wrapping for the printing on paper, but the mobile dimension disallows, or complicates that, and large, high res images are the new tech breakthrough, which anyone can see for nothing. Printed media was so expensive in the old days, that few could view it remotely.
I mostly use 2d and 3d apps, and I’ll avoid things where others revealed unwanted issues, so thanks again. I’ll stick with AFphoto for prepping images, although many websites might not want large images.