Trying to get my head around making pages responsive

I’m a bit green at this so be gentle…

My friends are always on at me saying my site “is not responsive” and “isn’t optimised” so having designed what I thought was a reasonably functional and nice site I am now having to go back to the drawing board.

I’ve watched the video entitled “Making a Page Responsive” but for various reasons nothing I do seems to come out quite as clean as it should.

I’ve opened the ‘Devices’ menu and whereas previously everything was presumably autoscaling I now need to redesign the site for each platform, checking on each layout as I go.

So far so good but…

For starters my Audio clips are totally wrong-sized - what’s up with that - I can’t get them to look good on the Phone portrait layout at all.

Also my timed scrolling effects don’t seem to work at all on smaller layouts.

Finally (and this isn’t really ‘responsive’ related’ - I can’t seem to anchor my title bar - Duncan does this in one video on a previous version of Sparkle and I’m not following how he locks the title bar in place.

Thanks,

James

@JamesL, Ok…

When designing a Sparkle website you assign at a minimum 3 devices - desktop, tablet, mobile.
So if we follow Duncan’s video you build out your 960 device. Once done and you don’t want to do much with your tablet device you can automatically scale the 768 device.

The mobile 320 device has to be a custom layout.
That means you have to rescale, move, and adjust the font size until everything looks right on mobile. Your mobile layout screenshot does not look like you have done that.

You have to custom build each device layout, there’s simply no choice. I suggest starting with mobile 320 and working your way up. It’s much easier to add than to subtract when starting desktop and going to mobile.

Whether or not Sparkle outputs responsive layouts is debatable semantics. But it’s bad, really bad. In fact, I’ve never experienced a more inefficient, unintuitive, and frustrating workflow than Sparkle’s device layout design.

The idea of custom designing per device is right, Sparkle’s execution of the idea is not. If you want to see an App that designs responsive per device correctly, look at Tumult’s Hype.

3 Likes

Hey - thanks for the reply. Very helpful.

Yeah - I haven’t got to work properly on the 320 version because the first thing I’ve run into is the problem with most important section of the page - i.e. the audio clips (because I am a recording studio) - just won’t resize to anything sensible!

Once I’ve got that sorted I’ll redo the page as per Duncan’s video suggestions (Hamburger menus etc).

Are you basically saying I should leave my Device page like this:

@JamesL, Yes that is one way you can do it.
You can also have your 480 device automatically scale, but it is up to you! :slight_smile:

Couldn’t agree more. I gave up on pulling my hair out trying to wrestle with multiple layouts; things just never work as expected. Seems only the creator of Sparkle and just a handful of others have a handle on it, the rest of us it’s a headscratcher.

However I’d much rather put up with Sparkles’ goofy handling of layouts and keep the free-flowing, unrestricted ability to design a page rather than use an editor that puts you in a box and forces you to build THEIR way. No thank you.

I simply build for the 960 layout and make sure all elements look good when displayed on a phone. Let the browser handle zoom/resizing, seems to work fine. Not a perfect solution but as long as my customers keep saying they’re impressed with what they see that’s all I care about.

2 Likes

Actually there are quite a few Sparkle users that “get” the multi-layout support enough to produce great responsive sites, I’d say a significant percentage.

We are aware it’s a sore spot. But as you say, there doesn’t seem to be any website builder that actually nails it, so calling Sparkle names is kind of pointless.

We do want to fix how this works.

3 Likes

To be clear, I give Sparkle two-thumbs up, always have. There’s no name calling here just a public admission of frustration for a schema my brain can’t seem to wrangle. Exactly the same as FCPX’s “magnetic timeline”. Many seem to get and love it. Not my flavor of logic.

Personally I blame this breakpoint nonsense on the browsers. At some point there’s got to be a simpler more logical way to handle devices.

Or better yet, the world will get sick of smartphones, bitcoin and Amazon and we’ll go back to desktop only, landlines and cold hard cash and coin. Sure would love to have my Amiga 4000 back. A guy’s gotta dream…

1 Like

I do websites on the Mac platform, and Windows. Rest assured no platform or program has got it quite right. Every program tackles things in different ways, as Duncan mentioned.
Once you get the hang of Sparkle the phone variant is no problem. But you are designing a new 320 px design.
The problem arises when you share everything on each variant; so there is some merit of starting with the 320px. In fact as @thetravelhikelife said, it’s easier. Far easier.
If you start with a 960, and synchronize everything it’s going to confuse. If you start with a 960, design by thinking ahead. For example “how is all of this going to look like on a phone”. Is there too much text, too many effects, too many photos.
If one jumps in with a bells and whistles website in the 960px, it is going to confuse.
@JamesL. Nice job James. I’m a retired broadcaster and your site looks good on tablet.

Thanks for all the discussion folks - I now know a heck of a lot more about all this than when I started!

Like many of you I guess, I am a one-man band business and my web-design is a necessity rather than a work of art. The opportunity cost of spending hours fine tuning my site to look perfect at every resolution probably isn’t practical.

My sense is that making my site look good at 960 and auto-scaling the rest is going to work 90% of the time; clearly 320 is an issue and I might think about tweaking just this one, although again, how much business I may lose as compared to someone just flipping their phone on its side to view the site (which is what I do for websites if I have to) is open to question.

So I’m back to my original problem which is that Sparkle’s Auto-scaling looks mostly quite acceptable EXCEPT the Audio clip boxes which don’t seem to play very nice when scaling. Am I doing something wrong here?

Thanks again to all contributors - I’ve learned something from all of you!

James

Sorry for not addressing your question more directly…Turn off the hell of Automatically Scaled for all devices and use Custom Layout. I also turn off Synchronize Text Attributes Across All Devices. Custom build for each device and don’t skip a device. And by the way, thank your friends for being honest with you.

2 Likes

@JamesL, An important rule for working a mobile layout is to keep it to 1 column, aka stack elements on top of one another instead of side by side. I have tested the audio player on the 320 device and it shows up well and is usable on mobile. In your case I would have your album image above the audio player (stretch it out to full width) and the text below it.

I will also add that after a while you will get the hang of it!
With a creative mind you see beyond limitations and obstacles and although Sparkle isn’t perfect, and tell me what application out there is, it has great capacity as is and more is to come including canvas and responsive layout refinements!

As has been mentioned you can start from the 320 device (you have to have a good idea in how the desktop device will look and work) and work up, or start with the 960 device and work down.

From my take, and having pumped out a lot of Sparkle websites over the last two years, I can let you know that I only create for the 1200 (large desktops and laptops), 768 (tablet portrait and landscape), and 320 (portrait and landscape) so I don’t bother with automatically scale nor with the 480 and 960.

Have fun! :)…

2 Likes

That’s super-helpful - thank you so much.

I have four options it seems:

  1. 960 and autoscale the rest (lazy man’s option)
  2. 960 + 320 and autoscale the rest (probably fine for my needs)
  3. 1200 + 768 + 320 and autoscale the rest
  4. 1200 + 960 + 768 + 480 + 320 i.e. do it all properly

It’s true that on my MacBook Pro Retina 13.3-inch display (2560 × 1600) my site looks a bit ‘over-large’, so perhaps it’s worth redoing it at 1200 for a bit more elegance instead of blowing up from 960.

In which case Option 3 makes the most sense, although there must be a reason Duncan suggests working at 960 first. Is that a particularly common resolution?

I’d go with Option 3. Here’s why. Even though phone viewing is 40% overall, I have a feeling that your target audience are viewing iPads, and Mac laptops. Many of those may actually use Pro Tools or Audition themselves. I’ve used Audition a lot. Your target is musicians as I understand and maybe they’re using a phone to record themselves for a rough recording.
I’m thinking they’ll use a small Mac or tablet for research… … then head to you for something professional. Just a thought.
W

My suggestion is to start with the 1200 layout. Most desktops will likely show that layout first, and it’s natural to preview either on your laptop or desktop Mac.

If you make proper use of text styles, scaling down will be much smoother.

Next you add a custom 320 layout, which Sparkle has scaled to 26% (320/1200) to make it fit. You go through the text styles and apply a sane text size. Now you should have all text boxes with a red frame (clipping the content). It’s by no means quick, a tedious but ultimately mechanical job to go through the site and resize/reflow content.

Some elements (audio/video players, some social stuff) have a minimum size that isn’t auto-applied when scaling down, they’ll snap to their minimum size as soon as you touch them. This is a long standing issue that’s in a way exposing the limitations of Sparkle’s approach, but it’s easy enough to handle.

Next you can set the 960/768/480 layouts to be auto-scaled. Some Sparkle designers prefer a manual layout of 768, or would like it to borrow the layout from 960 instead of from 480, so they do manual layout there as well.

1 Like

Hello.

I need a tip from the field. I have designed my page for 960 px and 320 px. The other formats are on automatic. So far so good. Now I would like to design the format 1200 px instead of 960 px and set 960 px to automatic.

Is this a big effort? Has anyone done this before? Can the whole layout break down? What surprises might be waiting for me?

Mr. F.

You can add 1200 and remove 960, but clearly the layout will be scaled up a bit. Nothing bad happens. Making 1200 the “new normal” makes you size it sensibly for what you see.

Thank you Duncan.

I have been experimenting a bit with changing the layout, starting with 1200 px and 320 px. The problem I am having is reducing the font size on the then automatically adjusted layouts.

If I have a size of 14 pt for the default text at 1200 px, it becomes 6 pt at the 480 px layout. This is too little. If I start with the 960 px layout, it still becomes 7 pt or 8t font size. This is just acceptable.

It would make sense to personalize the 1200 px, 768 px and 320 px layouts and have the other two adjust automatically. But that is too much work for me now. I continue to personalize 960 and 320 and have the others created automatically.

This is just my personal approach. Everyone else is free in his design.

Mr. F.

The 480 will get its size from the 320 layout, if 320 is a custom layout and 480 is auto-scaled. The auto scaling is taken from the nearest device.

Thank you. Good tip. I should have invested a little more time in the test series after all.