Is there a secret to designing a site compatible with powerbooks, iMacs, iPhones and iPads all in one design or do I have to redesign for other devices?
@Leshooper, Sparkle is based on the responsive fixed width breakpoint so if you go up to the top left of the canvas you’ll see “Device”. Clicking onto this icon and the dropdown will reveal to you the device layouts you can add…
Thanks greenskin. But what do you mean add? Does the web site adjust to the various devices or do I need to create a “safe” layoutt that will cover most devices. Sorry I am new to this.
@Leshooper, By default your laid out Sparkle website is in the 960px fixed (not responsive) breakpoint which is for your laptop and and will look incorrect on the smaller screens. So under the “Device” tab you need to “Customise Device Layouts” and by clicking it Sparkle will present the other device layouts you can add, eg: mobile…
Now when you add the 320px breakpoint for mobile then you’ll see your Sparkle canvas adjust to that width and then you will need to go in and rearrange the layout of the elements (text boxes, images, etc…) so it works on a mobile screen when viewed…
If you add others by clicking on the “+” then you will also need to go in and adjust the elements on the canvas to make sure it flows and is legible.
3 Likes
Hello @Leshooper
@FlaminFig has explained it very well.
In this section
https://sparkleapp.com/docs/devices.html
of the documentation you will find even more information and also some recommendations for a “fast workflow”. This workflow can save you a lot of time and it has helped me to understand how Sparkle “works”.
2 Likes
If you want to design for PowerBooks, you have to make a very basic website with a maximum resolution of 800 x 600. 
I have a couple of pages with many mp3s on it. When I try to edit for
smart phones, the mp3 players are so big I cannot edit the
subtitles to be in the right place to enlarge the fonts. How do I
'make the mp3 players smaller?
I think I figured out some things in answer to my own question.
The mp3 icon seems to be a fixed size and eats up the page on a smartphone.
I tried re arranging things and got close but I apparently;y have to reduce my amount of material drastically and add more pages. Other than that I am open to suggestions.
@Leshooper, You are right about the MP3 players sizing…
It has a minimum width which works well on the mobile breakpoint 320px. You can increase the width for the larger breakpoints so for me that makes sense.
As per page layouts… The best advice I can give you is think like your targeted audience. How would they consume your material? What is it that they want to find on your site when the first land?
We don’t create websites for ourselves if you want your story read. We create these websites for our targeted audience so we need to think like them and how they would like our website to work/flow.
Good luck! 