FreewayTalk

142 replies to this thread. Most Recent

JDW

25 Jul 2016, 2:05 am

Scrutinizing SPARKLE (Freeway alternative)

The following are my thoughts on Sparkle 2.0.3, from a Freeway user’s viewpoint. Here’s the website where you can download the free trial:

http://sparkle.cx

  1. No installer required. No DMG. No ZIP loaded to the hilt with files. Just a simple ZIP with the app. That’s it. I rather like that.
  2. Launching the app presents you with the option to upgrade or create a New Document. Since I am evaluating this as a trial for the very first time, it’s pretty obvious which button I’m going to click. :-)
  3. An “Untitled” document opens. No dialog like Freeway. There’s a puzzle piece named More that is popped down, awaiting your orders. No means of setting page size or HTML level or Resources folder or template like in Freeway. Not saying this is bad, just a big difference on opening a new document.
  4. One other point of note is the page design area reminds me of GridMeister by Thomas Kimmich. Not the same of course. It’s just the first thing that popped into my mind.
  5. The “More” pop-down wants you to get started designing right away, presenting you with the option to add text boxes, pictures, video, audio, form items, social buttons, and EMBED (code). Seems to be sort of like Freeway’s HTML Markup dialog, just without the dialog. You get a box on the page, and you then need to type in your code (what they call, “Emedded Content”) in the right sidebar. Not sure if I like this over Freeway’s dialog insofar as the right sidebar needs to be made bigger if you want to see a large chunk of your code. In Freeway, you accomplished that by simply making the HTML Markup dialog bigger. But Sparkle is the same as Freeway in that the code you type in is just dumb text. There is no special highlighting like you get if you were to type CSS or other code into an app like TextWrangler.
  6. When you add a Button to the page, you see the “Page” tab highlighted in the right sidebar and its asking you for “Search Engine Information.” Why that is the first thing you see is beyond me, but I just want a button, not a search engine, thank you very much. I then click the “Style” tab, also in the right sidebar, to change the button name and other aspects. It makes it easy to do an OnClick link to an external site, which I use buttons for in Freeway quite often. You can of course set the font, size, alignment, colors, rounding, border, etc. Very nice.
  7. Wanting to see what my button looks like I search for Preview. There it is in the upper right corner, with icon shaped like an eyeball. But when you click it, you get a drop down filled with choices. It says 3 checked browsers will be opened with Live Preview. Only wanting to use Safari, I try to deselect Firefox and Chrome, but it won’t let me choose only Safari. Seems strange. Not sure why. So I deselect Chrome only and keep Safari and Firefox enabled, then click “Open Live Preview.” Sure enough it displays my page in Safari (which was already open) and then launches Firefox to display the same page. I thought it would do that which is why I only wanted to choose Safari, but I guess Sparkle knows better. Sure I preview my sites in all browsers, but I wish to do that at my leisure, not be forced to do it all at once. By the way, since this is a trial version, you can’t create multiple pages and the page you do create will have a silly black bar at the top that says “Made with Sparkle” in white text. Makes the trial experience less enjoyable and complete, but perhaps it won’t bother some of you.
  8. Sadly, I am not finding a keyboard shortcut for Preview. I find one for Publish, just not for Preview. Being used to using a keyboard shortcut for Preview in Freeway makes the absence of one in Sparkle less than enjoyable.
  9. I then thought to myself, “Okay, now what if I want to have text display over the button when I hover the arrow cursor over it?” In Freeway, that’s easy. You just click your button to select it, then Opt-Cmd-X to bring up Extended Attributes, then click New and type “title” for Name and your text for “Value.” But in Sparkle, I cannot find a way to accomplish that. No “Extended Attributes” of any kind that I can see. Right-click on the button to get it? Nope. So right here, we have a showstopper for many Freeway users. Whether or not I myself can live with such a severe limitation is yet to be seen.
  10. Next I ask myself, “Okay, how do I center this button on the page?” My eyes immediately spot the alignment icons, top center. But with my button selected and when clicking on those alignment icons, nothing happens. I hover my mouse over each of the alignment icons, but no tooltip! What the heck? Clearly, I need to read the documentation. But I consider it a negative when something doesn’t work as expected and forces me to read a manual. That’s just naughty. So I leave my poor, helpless button pathetically unaligned on the page for now.
  11. I’m rather sick of this button, so I will click the More puzzle piece again and choose Text Box. A box appears with cartoonish scribbles inside. No unreadable Latin filler text here! No, you get truly unreadable scribbles! But double-clicking inside the box gives you the expected text cursor and you are intelligently shown the “Style” tab in the right sidebar. I then Preview in the browser. Man, do I hate not having a Preview shortcut! This really takes the sparkle out of Sparkle for me. Why? Because it takes 2 clicks, folks. You have to click the Eyeball, then wait a second for the pop-down animation to finish, then you click the silly button inside. Repeating that 100 times a day would be a living hell. But for the sake of testing, I shall persevere.
  12. I now take note of the Embed (HTML Markup in FW lingo) box sitting on my page. I click it and copy/paste the HTML Markup I use in Freeway to display my Favicon: <link REL=”SHORTCUT ICON” href=”http://www.visionsecurity.jp/favicon.ico”> I then preview again (using those 2 dad blasted clicks). No Favicon in the browser. Hmmm. Check the HTML source in the browser. To do that I must click on the http://127.0.0.1:14444… link inside the source, then view the source of that. Okay. Well, what in THE heck. Yes, friends, my “HTML Markup” is there, but boy is it nasty. It’s sitting inside the <body> tag and inside a <DIV>!! Here it is: <div style=’font-size:15px;line-height:1.4;height:300px’><link REL=”SHORTCUT ICON” href=”http://www.visionsecurity.jp/favicon.ico”></div> And so, friends, we sadly see that “EMBED” in Sparkle is in fact NOT analogous to “HTML Markup” in Freeway. This will probably be a showstopper for many, even if the lack of Extended Attributes wasn’t.
  13. Let’s put a YouTube video on the page. Click “More” and then “Video.” A video box appears on the page and video attributes appear in the “Style” tab in the right sidebar. I copy/paste a video URL. Boom, it displays beautifully on the page. But alas, there is no helper text like you get in Freeway that suggests proportional dimensions. Which means, folks, Sparkle actually lets you truncate your own video. I cannot find a way to proportionally size it either! What the heck? Okay, I see the “Arrange” tab in the right sidebar, let’s click that. Great, I see Width and Height. Changing only one of those will SURELY change the other dimension automatically so your video displays proportionally correct, right? WRONG. What about a right-click on the video? Nope. No dice. The solution? Use Freeway to find the correct dimensions, then go back to brain-dead Sparkle and manually type on those Width and Height values. No doubt the developer of Sparkle would say, “Great idea, we can put that on our list.” But the absence of this basic of all features, combined with the previous 2 potential show-stoppers I found doesn’t sit well with me. But for the sake of testing let’s go on.
  14. Let’s put a picture on the page. Back to the “More” icon and we choose “Image.” The box appears on the page. and the Style tab is selected in the right sidebar. But how do we import our graphic? CMD-E like in Freeway? No, my friends. In fact, I cannot see a menubar command that imports! Contextual right-click? No. In fact, I don’t think Sparkle even cares about contextual commands! What about the sidebar? No “import” feature I can see. What about drag-and-drop? Yes! Finally! But seriously? Only via Drag-n-Drop? Now, it’s true I’ve not yet read the documentation, and you book worms will chastise me for it. But I am evaluating the “intuitive nature” of this app, and to me, the lack of an easily accessible “import” command/dialog is bizarre.
  15. Okay, my graphic is imported into the Image box via drag-n-drop. I don’t see any equivalent of Freeway’s “High-resolution” checkbox in Sparkle. But when I Preview from Sparkle, using those infuriating 2 clicks, I see my pic in the browser, in its full 144ppi glory on my Retina 5k iMac. So back to Sparkle. I want to size my Image box to fit the imported image’s dimensions proportionally. In Freeway, you just press Shift-CMD-D for a graphics box, and for pass-thru graphics its down for you automatically. What about Sparkle? No where to be found, from what I can see. Yes, Sparkle’s sidebar has FILL and FIT buttons, and a STRETCH checkbox, but those are not giving me “resize box to imported image’s proportions” like Freeway does. This makes me an unhappy camper. But let’s go on…
  16. We all know very well how Freeway let’s us compress JPEGs or reduce colors in our imported graphics. And we have the power to use pass-thru images too (which is what I use most of the time). But what of Sparkle? Those controls are no where to be found from what I can see (without reading the manual). I’m speechless.
  17. Okay let’s now create a navigation menu. For truly, what website DOESN’T have that, right? Click “More” again and choose Menu. A single cell/box appears with Page 1 written inside. In the Style tab of the right sidebar I see options. I untick “Replicate Site Structure” and click “+” to add some entries, then click Vertical to ensure it’s a drop-down, and then Preview (with the dad blasted 2 clicks). Well, it’s not a clickable drop-down after all. It looks like stacked cells in a table to me. Clearly, I am going to need to read the manual to figure out navi menus. I consider that a negative.
  18. Alright, my brain is getting tired now so let’s wind this down. What’s another fundamental thing we modify on our pages? Right. We open Freeway’s Inspector and click General Page Settings. From there we can set the page title, filename, etc. In Sparkle, you click on the pasteboard or on the page (something other than content). Then your right sidebar changes to “Page” and you see that confusing “Search Engine Information” bold text again. What the heck? Beneath that are fields to set the page title and filename, just like Freeway. But in this Preview, the “Custom Filename” checkbox is disabled. Hopefully that’s not true of the real version. And this confusion is precisely why dummied down trials are stupid. Give us a full featured trial for 15 days, for crying out loud. Anyway… There’s a field for Description and another below that for comma-separated keywords. Where for art thou, Meta Tag Dialog? No where to be found, that’s where. You are restricted to Description and Keywords only. Fine for many people, but not all.
  19. I see that you have the means to add a “Custom Pattern” (which in Freeway is the Background Image). Interestingly, you can import that via dialog, not merely drag-n-drop alone. There’s a fixed position checkbox, Scale and Blur, but honestly these controls are NOTHING compared to the flexibility Freeway gives you to tile your background image as you see fit. But if you don’t use background pics, this won’t be a problem for you. Annoyingly though, your changes (such as blur) are not updated in real time in the page design view. I see the changes in a tiny preview in the left sidebar, and I see the changes appear instantly in the browser (if I flip to the browser).
  20. I see a Settings icon in the upper right of the Sparkle window, so I click that. Here I see 5 tabs giving me many adjustable options. The General tab gives me the ability to choose 2x and/or 3x images, or neither. Leaving both unchecked means your graphics will be a fuzzy 72ppi on retina displays. I guess I need to read the manual about why 3x is needed. I use 144ppi pics in Freeway all the time, but never 216ppi. But perhaps 3x is needed for something, which I guess makes it nice to have. Anyway, you also have Text encoding and Text antialiasing options in the General tab, along with “Always show vertical scrollbar” — although why you’d want to do that is beyond me. Clicking the Website Icon shows the favicon! Good news seeing that Sparkles EMBED box is not equivalent to Freeway’s HTML Markup dialog. Clicking the Analytics tab gives you Google’s snooping code controls. The Privacy tab gives you the ability to create a Privacy page which has buttons allowing the user to Deny cookies and Remove tracking consent. Seems like a nice feature. And lastly, the Publishing tab gives you what Freeway does in File > Document Setup > Document > Site Folder. But in Sparkle you can choose a local site folder or remote.
  21. Since the menus in Sparkle are quite lean compared to Freeway, I will conclude this mini overview of Sparkle by talking about the 3 items in the top left of the window. You have a Zoom popup. Next to that is the Device icon which let’s you set one or more predefined breakpoints for a Responsive page. I won’t go deep into that seeing I’ve never created a Responsive site before, but those options are there. And lastly there’s the Grid icon that does just that.

You may now want to ask me, :So what about Feature X, Y, Z in Freeway — aren’t those in Sparkle?” Honestly, the above 21 points cover the major features of Sparkle that I could see. As such, Freeway users will find a lot of things missing if they decide to move to Sparkle. And no, my friends, there is no HTML IMPORT feature in Sparkle that I can see. So no hope of bringing your existing sites easily into Sparkle.

CONCLUSION. Sure, there’s more I could have said if I were to have read the documentation, but I’ve leave that for another time. Suffice it to say, if you are accustomed to Freeway and are a Visual Designer like I am, Sparkle has some appeal in that it doesn’t force code down your throat. But there are times when you may need to dabble in code, even a tiny bit. That’s where Sparkle doesn’t really sparkle in my eyes. There’s no equivalent of Freeway’s HTML Markup dialog nor any Extended Attributes. I can understand hiding code from our code-hating eyes, but to not allow access to it at all seems going too far.

I have no doubt that if I were to engage the developers of Sparkle or the users of it, I would come to know the app better, but that wouldn’t necessarily mean I’d get all the control I have grown to love in Freeway. Most likely, I would get the standard, “We’ll give that some thought” or “We have that schedule for a future update” sort of reply. Maybe in another 2 years, we might see Sparkle really shine. But will the developer still be around then? Will they have sold out to someone else who cares nothing for Sparkle but instead wants their engineering talent? These are legitimate risks we Freeway users take when considering Sparkle. And because of that, I am rather disappointed. Out of all the Mac web design apps out there, Sparkle looks to fit my “don’t see the world as code” mentality rather nicely. Even though I dislike code, I need access to it, from time to time. To prevent me from adding snippets of it like Freeway does is putting my brain in a box. That’s a problem because I want a web design app to unleash my design potential.

I hope these thoughts help guide some of you thinking about Sparkle, and if I have additional thoughts to share over time I will add them here. I also hope this will help some of you who still want to give Sparkle a chance to examine the trial closely and then let us know your take here in this thread.

Thanks and best wishes,

James Wages

Caleb Grove

25 Jul 2016, 3:43 am

I happen to own a copy of Sparkle (I won it in a giveaway), but I can’t say that I’ve ever used it in a “real” website.

One of my issues with it is that it doesn’t create true “responsive” websites. Instead, the website will scale to fit in the mobile browser’s viewport, with breakpoints so you can keep the scaling from getting too extreme. Basically, a lot like creating a “responsive” website in Freeway 7 without using %-widths.

Sparkle is in no way a replacement for Freeway, and I don’t think it will ever be. My impression is that it’s simply a modern iWeb replacement — simple, slick, easy, but very restrictive.

Caleb Grove, Grove Design

Creator of Backdraft, the free responsive framework for Freeway.

Currently being held hostage by a herd of beef cattle in rural Montana.

marka

25 Jul 2016, 3:54 am

I’ve been very happy with Sparkle, but I was at the non-code side of the Freeway community. There certainly is less flexibility than Freeway, but it hasn’t affected me much. No drop down menus, no paypal action (I embeded paypal’s code instead) and I think if you want to do ecommerce you’d have to do the “build a page on square and link to it” kind of thing.

Locating items on a page has been, for me drag until the alignment lines appear. And adjust the number of grid lines until it gives you the layout you want.

But, you will never get all the control we had with Freeway. It’s going to be about what you want and what are you willing to compromise on. For me my compromises were virtually nil, for other’s it won’t be an acceptable amount at all. I really like it a lot, others will hate it.

There are several videos on YouTube covering how to use Sparkle. I watch a few of them and they were helpful. I found the ones by River Design the most helpful, but for the most part found the program very intuitive. I think from what I learned with Freeway it was extremely easy to figure out. Their channel is:

https://www.youtube.com/channel/UCYoInDCDgpHMYKj06-KCT0g

There are other videos out there, obviously.

Two things:

The preview is default to Safari only. In fact you can turn off Chrome and Firefox but cannot turn off Safari.

To proportionally change the size of an image you drag a corner. Dragging the sides allow you to change the dimensions of the image or video. I think.

I did write the person who answered the two questions I had telling him about this thread. Perhaps he’ll respond. I told him about the “non-code replacement for Freeway” thread when it popped up and he didn’t want to respond out of respect for the folks at SoftPress. Maybe he’ll think differently about this thread.

Sorry for the overly long response.

iMac, Freeway Pro

www.pantherpeakbindery.com

Carl Anselm

25 Jul 2016, 5:24 am

Hi James! Thanks for the preview. Although not very well researched. For example, the thing with the preview: You do not need to press 100x eyeball, sparkle has a live preview. For the alignment of elements there are intelligent guides! Best Carl

Somewhere in Austria

Andries Kuipers

25 Jul 2016, 1:04 pm

@JDW point 9: You just click in th eupper menu ‘More’ and you’ll find ‘Navigation and forms’. There’s an option to make a button and style it as you want with ‘Style’. point 10: There must be ofcourse something to align with. If you draw a rectangle (full width) and select your button too and click ‘centre’ it works fine. The button is centered then.

Andries

2016-07-25 7:24 GMT+02:00 Carl Anselm <[email protected]>:

Hi James! Thanks for the preview. Although not very well researched. For example, the thing with the preview: You do not need to press 100x eyeball, sparkle has a live preview. For the alignment of elements there are intelligent guides! Best Carl

Andries Kuipers

25 Jul 2016, 1:34 pm

@ JDW point 14. Importing an image is easy. You can indeed drag & drop or just click on the image button in the upper menu. A rectangle shows on your page and on the right you can easy import an image by the ‘ADD IMAGE’ button, style it, animate it… Just like Freeway does, only less import formats.

You can also see if the resolution is good enough for retina and highres displays.

Perhaps you should read the documentation first so you will get less frustrated? ;-) Or is it because you use the free and limited version?

Sparkle is just on version 2. Freeway is 7. You can’t compare them as equals, they do fullfill different needs. And there are a lot of noncoders who appreciate a more lightweight peace of software like Sparkle as an alternative. I think 80% of the issues in FreewayTalk discussed received the answer to add more or less code. Nothing wrong with it, but that wasn’t one of Freeways big selling points.

Andries

2016-07-25 15:04 GMT+02:00 <[email protected]>:

@JDW point 9: You just click in th eupper menu ‘More’ and you’ll find ‘Navigation and forms’. There’s an option to make a button and style it as you want with ‘Style’. point 10: There must be ofcourse something to align with. If you draw a rectangle (full width) and select your button too and click ‘centre’ it works fine. The button is centered then.

Andries

2016-07-25 7:24 GMT+02:00 Carl Anselm <[email protected]>:

Hi James! Thanks for the preview. Although not very well researched. For example, the thing with the preview: You do not need to press 100x eyeball, sparkle has a live preview. For the alignment of elements there are intelligent guides! Best Carl

Duncan Wilcox

25 Jul 2016, 1:46 pm

Hi James, I’m a cofounder/codeveloper of Sparkle. Thanks for looking at Sparkle and for the honest review.

I empathize with you in the frustration you’re finding in using Sparkle. Sorry about that, we do regard these issues as UI bugs and definitely want to improve and polish Sparkle more.

That said, the web has changed a lot in the last 10-15 years, techniques change, skills become obsolete. Best practices for creating a high performance and backwards compatible site make the “fast path” very narrow, and having a visual editor for site and element properties makes it much easier to express intent, helping Sparkle produce the most efficient code.

Also we have the goal to deliver a truly visual website builder, which explains HTML embedding being relatively underdeveloped. That also means that what Sparkle doesn’t currently support has to wait for a later version.

The preview is live in Sparkle, so you don’t actually need to open/close it all the time, it updates in real time as you edit the Sparkle document. We definitely should support the workflow you are used to, and add a shortcut.

Sparkle’s favicon editor actually creates 15 different images for different platforms and devices, I guess putting it in an HTML block is something you need to unlearn?

I’m surprised the “Add” button in the image inspector wasn’t easy to find, perhaps we need to rethink the UI in that area. Speaking of images, Sparkle by default generates 1x/2x for each device, and in 2.1 most likely will also generate webp’s in addition to jpegs, so a typical multi layout document would produce 20 images, wrapped in a <picture> element, based on the single one you import. It would be possible to make it overridable and allow entering individual images, but kind of cumbersome.

Text as squiggles are a sort of default wireframe/draft look, though the lorem ipsum is a single button click in the text inspector.

A full review takes time, so perhaps looking at what can be done with Sparkle can help, for example on http://sparklecafe.com or the responsive sites featured on our home page, http://lioneldarian.com and http://davidpuckett.com — build entirely visually.

While Sparkle isn’t for everybody, it is great for visual thinkers and people who don’t want to tinker with code. We’re a tiny company and harsh reviews definitely harm us, and frankly there are so many alternatives that it boggles my mind that anyone would take a firm “no” stance, more like “not for me”?

Anyway, we’re super passionate about our product and very responsive, test me :)

Duncan

chuckamuck

25 Jul 2016, 8:24 pm

Anyway, we’re super passionate about our product and very responsive, test me smiley

I can attest to that. I’ve communicated with Duncan and found him very accommodating.

Freeway Pro 7, i7 Macbook Pro 2.2 ghz 8gb ram, 2.3 ghz Dual Core MacPro 10gb ram

JDW

26 Jul 2016, 12:58 am

Caleb, I think your post is the most enlightening of all. Not sure if I want “fake Responsive.” And since Sparkle presently doesn’t offer “genuine Responsive,” that would rule out Sparkle for a lot of people.


marka, thanks for your comments. Haven’t had time to get out your YouTube link but when I do I will comment again on that.


Carl A, you say my 21 points are “not well researched” but then only cite one issue. 1 bad boy out of 21 indicates pretty good research to me! :-)


Andries, I fail to see your point about my own Point #9. I know how to create a button, as I already said. I know it is styled in the Style tab, as I had already said. But the point of Point#9 is that there is no TITLE TEXT (not that my poor eyes can see) within the “Style” tab. Perhaps you don’t understand what TITLE TEXT is. TITLE TEXT is text that appears when you hover over something. It’s like a tooltip. I can create that in Freeway, and I explained how previously. I simply don’t see a way to accomplish that in Sparkle. Now, if you can do that, please guide me. Sometimes I need handholding.

Regarding your critique of my Point #10, I would argue that those icons should be contextual in nature, and to understand that, open up Adobe Illustrator. Don’t have it? Well, then just trust me. In Illustrator, I don’t see the Align icons until I draw something. I can then draw JUST ONE OBJECT, and the Align icons appear. Why? Because Illustrator is in many ways a brilliantly crafted app. You can ALIGN TO THE PAGE! Ha ha! So you see, you don’t really need more than one object selected to make Align icons appear. Sparkle falls flat on that point, in my opinion, by showing those icons all the time when most of the time they are dead and cannot do anything. That’s not intuitive design.

Regarding your critique of my Point #14, your critique is well taken. I have noted that I am able to get an import dialog via the Style tab, when clicking the Add button. There is no menu command for that, however, nor is there any keyboard shortcut. So I would still say there is something lacking. Even so, thank you for point out the fact that the Add button yields the sought after image import dialog.

As to your critique of my not having read the documentation first, I reject all such criticism. I discovered Freeway 2 in 1999 and fell in love immediately. Why? Because I didn’t have to pick up a manual to learn it. I only start consulting the manuals later when I really got into the thick of things with very intricate designs and when I was trying to get the most of the program. In my Sparkle preview, I am just glancing at the basics of what anyone would want to do. Think of MacPaint on a Macintosh 128k back in 1984. Yes, when I was 13, I had one of those. I never consulted a manual. It just worked. Sure, Sparkle is more complex than MacPaint. But arguably, Freeway 2 was more complex than Sparkle! I am big on “intuitive UI’s.” Some people hate me for that, must like they hated and misunderstood Steve Jobs when he harped on a point. But the fact is, a super simple UI for dummies is the right approach to help common, every day people like me. The geniuses out there always win. They always “just get it.” They love reading manuals too. But not everyone is a genius. That’s what has always made the Macintosh itself so great. It’s for regular people. That’s what magnetically attracts me to apps which I can use right away without having to consult documentation for the most basic tasks.

With that said, I am still giving Sparkle a fair shake. I will read the documentation. A gentleman kindly wrote me an email off list to show me where it is too:

http://sparkle.cx/docs/index.html

But sadly, there is no keyword search feature! Would have been better if they offered us a PDF, because at least then we could search the documentation.

It doesn’t matter if Sparkle is version 1, version 2 or version 26 in that we Freeway users are beginning to explore ALL ALTERNATIVES TO FREEWAY right now. If an app doesn’t look ready now, and if it looks like it probably won’t be ready a year hence, then we probably aren’t going to be very smart if we go with that alternative. Indeed, it wouldn’t be a good “alternative” at all to Freeway. Hence, we are now evaluating Sparkle on its merits for what it does now, right or wrong. If it gets better over the next year great, but we must be realistic about our expectations. I am not bashing Sparkle or its user base by saying this. It is merely a factual observation based in sound reason.

Thank you for your thoughts, Andries. They really got my mind churning today!


Duncan, I am humbled and grateful that you made the time to reply such detailed thoughts here in this thread. I feel your input will be very helpful in assisting our Freeway community about which direction they should turn in their quest for a Freeway replacement.

Once again, I may sound “highly critical” to some people, but I have no animosity toward Sparkle or you or any of the fine engineers who put it together. I merely gave it a quick “once over” and took notes as I used the Trial. I fully expected people to reply back in this thread and educate me on points where I was mistaken, and argue with me about the merits of Sparkle. That’s why I actually appreciate comments like those of Andries, because he is defending Sparkle on its merits. That makes me think more deeply about Sparkle. And thinking deeply about our Freeway replacement is critically important.

The only question I really have for you at this point is about what Caleb Grove said earlier in this thread. Caleb is rather well known in the Freeway community for his efforts in making Responsive Design easier in Freeway. You can see his sites here:

http://calebgrove.com/articles/introducing-backdraft

http://calebgrove.com/articles/responsive-images

As you can see from his earlier post in this thread, he is arguing that Sparkle presently does not create truly Responsive web sites in that Percent-widths are not used in Sparkle. As such, Mr. Grove feels that Sparkle won’t ever be a Freeway replacement for some people. But I myself never was able to get my head around how to create a truly Responsive (%-widths and all) site in Freeway, even with Mr. Groves excellent Backdraft, so I am scrutinizing potential Freeway replacement apps with that need in mind. Meaning, whatever web design app I ultimately choose to replace Freeway, I want the power to create a fully responsive site (using %-widths) that will be sufficient for me now, and sufficient for the foreseeable future. And I would like of course to be able to accomplish that in a very intuitive, user-friendly UI. I see a lot of user friendliness in Sparkle, which is why I choose it first to do an overview.

So, Duncan, if you have time, I would certainly appreciate hearing your thoughts on the issue of Responsive Design and %-widths in the context of what Mr. Grove wrote. I think your reply would be helpful not only for myself but for other Freeway users here who are like-minded with me.

Best wishes,

James Wages

Caleb Grove

26 Jul 2016, 1:49 am

James,

To further explain what I was saying, here is a responsive Sparkle test: https://dl.dropboxusercontent.com/u/55769872/sparkle-test/index.html

Try resizing your browser and you will see how it works. There is no flex in the layout — just multiple fixed-width breakpoints.

Caleb Grove, Grove Design

Creator of Backdraft, the free responsive framework for Freeway.

Currently being held hostage by a herd of beef cattle in rural Montana.

marka

26 Jul 2016, 4:03 am

Caleb,

Again, thanks for your help with my freeway site.

One more question! Or, one more question? It’s a philosophical one, I’m afraid.

Is the problem with fixed break points that the pages will be perfect in some devices (where the break points line up) but slightly too small in others?

In my iPad (I have a flip phone so that’s out!) I can resize text, or photos, or other stuff to fit the window with a tap of the screen. Isn’t the combination of fixed break points with the abilty to resize windows enough to overcome the limitations of not doing a percentage based layout?

In freeway, I just assumed that was the case, though recognized that a “fully responsive” site was going to be better I didn’t think it was necessarily much, much better.

It might be my age, or that I prefer books (and I’m sincere in thinking that might be part of my esthetic bias) but I’ve never liked sites where everything was 100% of the width of the screen. I just don’t like the look, but if I have two columns that means that there has to be a point where the items are repositioned at some break point.

There is no doubt you prefer, and make sites which are fully responsive. But what do you think I am really sacrificing by sticking with the freeway/Sparkle approach?

I’d love to hear!

Thanks again, Caleb. And everyone else.

Mark

iMac, Freeway Pro

www.pantherpeakbindery.com

Duncan Wilcox

26 Jul 2016, 2:13 pm

Hi James, I appreciate that you’re trying to figure out Sparkle in more detail.

Let me try to dissect the responsive issue. The very wide definition is the page will have a layout that’s optimized for the device. Now there are different ways to do that, for example the server can detect the visiting device (apple.com used to do this, maybe still does), or the page can use some JavaScript to determine the browser width and either redirect to the appropriate page (some website builders do this) or manipulate the page with JavaScript (many web apps do this).

Finally there’s media queries, which are the acceptable solution to switch layouts according to the narrow RWD definition. Sparkle indeed uses media queries.

Next there’s how each layout is built. Each layout can be either fixed width or fluid, and one way to do fluid is % based. The narrow RWD definition is the layouts should be fluid. Sparkle switches fixed layouts, so it doesn’t (currently) adhere to the narrowest RWD definition.

Why did we choose this route? The problem with fluid layouts is it’s really hard to get right.

If you go with a completely manual fluid layout, text is reflowed and for example orphan words are a common occurrence (for example http://macaw.co shows it with just the right browser width). In general they are hideously complex to get just right. Even professionally built sites have edge cases of overlapping content and broken layout. Nothing wrong about going with this approach, if skill/time/budget allows.

The other option is to use a framework that takes care of the fluid layout, like say bootstrap, and a three column block collapses down to two and one. That’s fine but has the downside of having a bit of a canned look with predefined rules on how it should change across devices, and it’s not really custom design as much as throwing text and images into a pre-defined layout. Some people are into this and it’s fine.

In Sparke we have currently opted for fixed layouts because coming from a print background it’s immediately understandable, the layout switch is predictable and for all practical purposes when you have all layouts enabled the site doesn’t have much non-designable space anywhere. Additionally some elements are full page width, stretching from edge to edge.

I think it would be unfair to characterize Sparkle’s support of responsive as “fake”, but hey everybody is entitled to an opinion, just don’t overlook the facts.

We are currently working on improving how Sparkle assists in creating layouts beyond the one you initially design, and adding more elements that support full page width.

Regarding responsive images, as mentioned previously, Sparkle is using the most advanced technique of any website builder, creating different size and pixel density images for all devices, wrapped in a picture element. This means Safari 9.3+ and Chrome 51+ will load the correct asset only, right away, without wasting a byte on unneeded or incorrectly sized images. Sparkle also directly supports SVGs, which are scalable across devices.

All this is way more technical than the average Sparkle user would be interested in, they do need to trust us to make the best decision.

Point taken on alignment icons, they are unclear. Not that Adobe UIs are stellar, but we can improve.

I don’t understand the TITLE TEXT thing. Is it a commonly used web pattern? Doesn’t look like it.

The problem with intuitive UIs is, as they say, the only intuitive UI is the nipple, everything else is learned. Personally I found the Freeway UI inscrutable. Can you make the leap between different apps? Maybe it requires some patience.

Thanks, Duncan

Il giorno 26 lug 2016, alle ore 02:58, JDW <[email protected]> ha scritto:

Caleb, I think your post is the most enlightening of all. Not sure if I want “fake Responsive.” And since Sparkle presently doesn’t offer “genuine Responsive,” that would rule out Sparkle for a lot of people.


marka, thanks for your comments. Haven’t had time to get out your YouTube link but when I do I will comment again on that.


Carl A, you say my 21 points are “not well researched” but then only cite one issue. 1 bad boy out of 21 indicates pretty good research to me! :-)


Andries, I fail to see your point about my own Point #9. I know how to create a button, as I already said. I know it is styled in the Style tab, as I had already said. But the point of Point#9 is that there is no TITLE TEXT (not that my poor eyes can see) within the “Style” tab. Perhaps you don’t understand what TITLE TEXT is. TITLE TEXT is text that appears when you hover over something. It’s like a tooltip. I can create that in Freeway, and I explained how previously. I simply don’t see a way to accomplish that in Sparkle. Now, if you can do that, please guide me. Sometimes I need handholding.

Regarding your critique of my Point #10, I would argue that those icons should be contextual in nature, and to understand that, open up Adobe Illustrator. Don’t have it? Well, then just trust me. In Illustrator, I don’t see the Align icons until I draw something. I can then draw JUST ONE OBJECT, and the Align icons appear. Why? Because Illustrator is in many ways a brilliantly crafted app. You can ALIGN TO THE PAGE! Ha ha! So you see, you don’t really need more than one object selected to make Align icons appear. Sparkle falls flat on that point, in my opinion, by showing those icons all the time when most of the time they are dead and cannot do anything. That’s not intuitive design.

Regarding your critique of my Point #14, your critique is well taken. I have noted that I am able to get an import dialog via the Style tab, when clicking the Add button. There is no menu command for that, however, nor is there any keyboard shortcut. So I would still say there is something lacking. Even so, thank you for point out the fact that the Add button yields the sought after image import dialog.

As to your critique of my not having read the documentation first, I reject all such criticism. I discovered Freeway 2 in 1999 and fell in love immediately. Why? Because I didn’t have to pick up a manual to learn it. I only start consulting the manuals later when I really got into the thick of things with very intricate designs and when I was trying to get the most of the program. In my Sparkle preview, I am just glancing at the basics of what anyone would want to do. Think of MacPaint on a Macintosh 128k back in 1984. Yes, when I was 13, I had one of those. I never consulted a manual. It just worked. Sure, Sparkle is more complex than MacPaint. But arguably, Freeway 2 was more complex than Sparkle! I am big on “intuitive UI’s.” Some people hate me for that, must like they hated and misunderstood Steve Jobs when he harped on a point. But the fact is, a super simple UI for dummies is the right approach to help common, every day people like me. The geniuses out there always win. They always “just get it.” They love reading manuals too. But not everyone is a genius. That’s what has always made the Macintosh itself so great. It’s for regular people. That’s what magnetically attracts me to apps which I can use right away without having to consult documentation for the most basic tasks.

With that said, I am still giving Sparkle a fair shake. I will read the documentation. A gentleman kindly wrote me an email off list to show me where it is too:

http://sparkle.cx/docs/index.html

But sadly, there is no keyword search feature! Would have been better if they offered us a PDF, because at least then we could search the documentation.

It doesn’t matter if Sparkle is version 1, version 2 or version 26 in that we Freeway users are beginning to explore ALL ALTERNATIVES TO FREEWAY right now. If an app doesn’t look ready now, and if it looks like it probably won’t be ready a year hence, then we probably aren’t going to be very smart if we go with that alternative. Indeed, it wouldn’t be a good “alternative” at all to Freeway. Hence, we are now evaluating Sparkle on its merits for what it does now, right or wrong. If it gets better over the next year great, but we must be realistic about our expectations. I am not bashing Sparkle or its user base by saying this. It is merely a factual observation based in sound reason.

Thank you for your thoughts, Andries. They really got my mind churning today!


Duncan, I am humbled and grateful that you made the time to reply such detailed thoughts here in this thread. I feel your input will be very helpful in assisting our Freeway community about which direction they should turn in their quest for a Freeway replacement.

Once again, I may sound “highly critical” to some people, but I have no animosity toward Sparkle or you or any of the fine engineers who put it together. I merely gave it a quick “once over” and took notes as I used the Trial. I fully expected people to reply back in this thread and educate me on points where I was mistaken, and argue with me about the merits of Sparkle. That’s why I actually appreciate comments like those of Andries, because he is defending Sparkle on its merits. That makes me think more deeply about Sparkle. And thinking deeply about our Freeway replacement is critically important.

The only question I really have for you at this point is about what Caleb Grove said earlier in this thread. Caleb is rather well known in the Freeway community for his efforts in making Responsive Design easier in Freeway. You can see his sites here:

http://calebgrove.com/articles/introducing-backdraft

http://calebgrove.com/articles/responsive-images

As you can see from his earlier post in this thread, he is arguing that Sparkle presently does not create truly Responsive web sites in that Percent-widths are not used in Sparkle. As such, Mr. Grove feels that Sparkle won’t ever be a Freeway replacement for some people. But I myself never was able to get my head around how to create a truly Responsive (%-widths and all) site in Freeway, even with Mr. Groves excellent Backdraft, so I am scrutinizing potential Freeway replacement apps with that need in mind. Meaning, whatever web design app I ultimately choose to replace Freeway, I want the power to create a fully responsive site (using %-widths) that will be sufficient for me now, and sufficient for the foreseeable future. And I would like of course to be able to accomplish that in a very intuitive, user-friendly UI. I see a lot of user friendliness in Sparkle, which is why I choose it first to do an overview.

So, Duncan, if you have time, I would certainly appreciate hearing your thoughts on the issue of Responsive Design and %-widths in the context of what Mr. Grove wrote. I think your reply would be helpful not only for myself but for other Freeway users here who are like-minded with me.

Best wishes,

James Wages

Paul

26 Jul 2016, 3:44 pm

I’ve looked at Sparkle in the past - I actually have a copy of version 2. However, it seems to be lacking for my needs. I can’t place PHP in the layout easily. The <embed> option doesn’t really do what I need.

I also find that if I use JavaScript to create content (simulating content of unknown size to be pulled from a database) that it won’t push elements down the page, they just overlap.

Both issues that Freeway had (actually, still have), but both overcome by Actions.

So while Sparkle is still on my HD, it’s not going to be taking over from Freeway any time soon.

All the best,

Paul

My Actions Site: http://www.actionsworld.com

Actions for Galleries, decorating that text box and many more!

Duncan Wilcox

26 Jul 2016, 5:38 pm

Paul, we actually added that option for the next version of Sparkle. The tricky part is iframes with a 100% height (not officially standardized, but used) will collapse unless the containing element has a fixed height. We have added a checkbox to the embed element to allow for the content to expand vertically, it was needed to embed the shopping cart of ecwid.com for a client.

Duncan

Andries Kuipers

26 Jul 2016, 6:32 pm

@JDW Your answer: “Regarding your critique of my Point #10, I would argue that those icons should be contextual in nature, and to understand that, open up Adobe Illustrator. Don’t have it? Well, then just trust me. In Illustrator, I don’t see the Align icons until I draw something. I can then draw JUST ONE OBJECT, and the Align icons appear. Why? Because Illustrator is in many ways a brilliantly crafted app. You can ALIGN TO THE PAGE! Ha ha! So you see, you don’t really need more than one object selected to make Align icons appear. Sparkle falls flat on that point, in my opinion, by showing those icons all the time when most of the time they are dead and cannot do anything. That’s not intuitive design”

I use Illustrator for decades. I’ve tried to align ONE single object on a blank artboard and tried to align it…. but nope. Nothing happens. I see there’s an option for ‘centre tot artboard’, but again nothing happens. Only with more objects. Guide me if you will James.

Normally if I want to centre a single object on the page I choose and . Presto.

In Sparkle, any new object is placed in the centre of the page/workspace. And then, at every movement, a green guideline shows up along the gridlines and spaces or along other objects. More objects will align as should. I wouldn’t know what I should be missing, sorry.

Andries

2016-07-26 17:44 GMT+02:00 Paul <[email protected]>:

I’ve looked at Sparkle in the past - I actually have a copy of version 2. However, it seems to be lacking for my needs. I can’t place PHP in the layout easily. The <embed> option doesn’t really do what I need.

I also find that if I use JavaScript to create content (simulating content of unknown size to be pulled from a database) that it won’t push elements down the page, they just overlap.

Both issues that Freeway had (actually, still have), but both overcome by Actions.

So while Sparkle is still on my HD, it’s not going to be taking over from Freeway any time soon.

Andries Kuipers

26 Jul 2016, 6:49 pm

@JDW

Andries, I fail to see your point (…… ) But the point of Point#9 is that there is no TITLE TEXT (not that my poor eyes can see) within the “Style” tab. Perhaps you don’t understand what TITLE TEXT is. TITLE TEXT is text that appears when you hover over something. It’s like a tooltip. I can create that in Freeway, and I explained how previously. I simply don’t see a way to accomplish that in Sparkle. Now, if you can do that, please guide me. Sometimes I need handholding. Hi James. I know what TITLE TEXT is. But I also know what ALT(ERNATIVE) TEXT is. At least in FW, in the Inspector. That text is after input a kind of tooltip when making a graphic object (like a button) and hoovering above it. The only thing I think it’s usefull for, is visually impaired people, so their computer can speak out that text, like ‘Photo Ibiza’, when hoovering over a photo of Ibiza. But I normally switch it off, because I don’t want to show ‘Item 1’, ‘item2’ when visitors hoovering above simple boxes which I didn’t give a name.

Sparkle doesn’t show Alt text besides the button Title. You’re right. Perhaps you use it with an other purpose?

Andries

2016-07-26 20:32 GMT+02:00 <[email protected]>:

@JDW Your answer: “Regarding your critique of my Point #10, I would argue that those icons should be contextual in nature, and to understand that, open up Adobe Illustrator. Don’t have it? Well, then just trust me. In Illustrator, I don’t see the Align icons until I draw something. I can then draw JUST ONE OBJECT, and the Align icons appear. Why? Because Illustrator is in many ways a brilliantly crafted app. You can ALIGN TO THE PAGE! Ha ha! So you see, you don’t really need more than one object selected to make Align icons appear. Sparkle falls flat on that point, in my opinion, by showing those icons all the time when most of the time they are dead and cannot do anything. That’s not intuitive design”

I use Illustrator for decades. I’ve tried to align ONE single object on a blank artboard and tried to align it…. but nope. Nothing happens. I see there’s an option for ‘centre tot artboard’, but again nothing happens. Only with more objects. Guide me if you will James.

Normally if I want to centre a single object on the page I choose and . Presto.

In Sparkle, any new object is placed in the centre of the page/workspace. And then, at every movement, a green guideline shows up along the gridlines and spaces or along other objects. More objects will align as should. I wouldn’t know what I should be missing, sorry.

Andries

2016-07-26 17:44 GMT+02:00 Paul <[email protected]>:

I’ve looked at Sparkle in the past - I actually have a copy of version 2. However, it seems to be lacking for my needs. I can’t place PHP in the layout easily. The <embed> option doesn’t really do what I need.

I also find that if I use JavaScript to create content (simulating content of unknown size to be pulled from a database) that it won’t push elements down the page, they just overlap.

Both issues that Freeway had (actually, still have), but both overcome by Actions.

So while Sparkle is still on my HD, it’s not going to be taking over from Freeway any time soon.

Andries Kuipers

26 Jul 2016, 7:11 pm

@JDW I agree with you about manuals. I always read them when I first intuitive inspected the program. Like all Apple users I do think haha. And then, when it becomes ‘thick’, I began reading, only about the issue I encounter,

15 years ago I discovered Freeway. Next to Golive and Dreamweaver it was a releave and a small step to fall in love with after using Xpress or Indesign. DTP for the web was born, hip hip hurray! But count those many issues in Freewaytalk the last two years, without actual manuals, tutorials or great help from nice people like Walter, Max, Dave, Thomas, Tim etc., Freeway isn’t Freeway anymore. New starters get completely lost with the lack of good tuts. And they choosed FW because of the ‘none coding’ statement.

So I appreciate Sparkle, Blocs, Everweb and more for their approach to make our weblive simpler, with more time to design instead of solving weird issues. Freeway did that for us in the past. It’s really sad that they get lost in the future.

Andries

2016-07-26 20:49 GMT+02:00 <[email protected]>:

@JDW

Andries, I fail to see your point (…… ) But the point of Point#9 is that there is no TITLE TEXT (not that my poor eyes can see) within the “Style” tab. Perhaps you don’t understand what TITLE TEXT is. TITLE TEXT is text that appears when you hover over something. It’s like a tooltip. I can create that in Freeway, and I explained how previously. I simply don’t see a way to accomplish that in Sparkle. Now, if you can do that, please guide me. Sometimes I need handholding. Hi James. I know what TITLE TEXT is. But I also know what ALT(ERNATIVE) TEXT is. At least in FW, in the Inspector. That text is after input a kind of tooltip when making a graphic object (like a button) and hoovering above it. The only thing I think it’s usefull for, is visually impaired people, so their computer can speak out that text, like ‘Photo Ibiza’, when hoovering over a photo of Ibiza. But I normally switch it off, because I don’t want to show ‘Item 1’, ‘item2’ when visitors hoovering above simple boxes which I didn’t give a name.

Sparkle doesn’t show Alt text besides the button Title. You’re right. Perhaps you use it with an other purpose?

Andries

2016-07-26 20:32 GMT+02:00 <[email protected]>:

@JDW Your answer: “Regarding your critique of my Point #10, I would argue that those icons should be contextual in nature, and to understand that, open up Adobe Illustrator. Don’t have it? Well, then just trust me. In Illustrator, I don’t see the Align icons until I draw something. I can then draw JUST ONE OBJECT, and the Align icons appear. Why? Because Illustrator is in many ways a brilliantly crafted app. You can ALIGN TO THE PAGE! Ha ha! So you see, you don’t really need more than one object selected to make Align icons appear. Sparkle falls flat on that point, in my opinion, by showing those icons all the time when most of the time they are dead and cannot do anything. That’s not intuitive design”

I use Illustrator for decades. I’ve tried to align ONE single object on a blank artboard and tried to align it…. but nope. Nothing happens. I see there’s an option for ‘centre tot artboard’, but again nothing happens. Only with more objects. Guide me if you will James.

Normally if I want to centre a single object on the page I choose and . Presto.

In Sparkle, any new object is placed in the centre of the page/workspace. And then, at every movement, a green guideline shows up along the gridlines and spaces or along other objects. More objects will align as should. I wouldn’t know what I should be missing, sorry.

Andries

2016-07-26 17:44 GMT+02:00 Paul <[email protected]>:

I’ve looked at Sparkle in the past - I actually have a copy of version 2. However, it seems to be lacking for my needs. I can’t place PHP in the layout easily. The <embed> option doesn’t really do what I need.

I also find that if I use JavaScript to create content (simulating content of unknown size to be pulled from a database) that it won’t push elements down the page, they just overlap.

Both issues that Freeway had (actually, still have), but both overcome by Actions.

So while Sparkle is still on my HD, it’s not going to be taking over from Freeway any time soon.

JDW

27 Jul 2016, 12:17 am

Duncan, my humble thanks for your kindness is explaining in great detail the matter of Responsive layouts and all the caveats. But in terms of Freeway being “almost impossible to understand,” it actually is drop dead intuitive to me when it comes to legacy table-based layouts. Freeway is the old DTP model of design. My first home computer was a Mac 128k back in 1984 at the age of 13, so I grew up understanding what DTP was all about, and so when I saw Freeway for the first time back in 1999, I learned how to use it right away, without consulting the manual. But for Responsive sites, Freeway is difficult for me (not for everyone, just for me). And now that Freeway won’t be developed anymore, wisdom dictates every Freeway user find something else. For now, my focus is on Sparkle.

Caleb, you are a well known Freeway master of Responsive layouts. Any further thoughts on this?


Andries, I would be happy to educate you on Illustrator, but that does go beyond the scope of this thread. :-) But since I don’t mind bending the rules, here it goes:

  1. Launch Illustrator CC.
  2. New document.
  3. Sketch a box on the page.
  4. Window > Align (or use whatever method you like)
  5. Within the Align palette, point your eyes to the bottom right where it says “Align To:” and click that pop-down menu.
  6. Select “Align to Artboard” so a checkmark appears by it.
  7. Now with your box selected, click “Horizontal Align Center” — BAM! Your box is now centered with respect to the page, and you only have a single object selected!

So to ensure this gets back on topic, I would like to see this in Sparkle. Align icons should be contextual and allow aligning of not only multiple selected objects, but also allow aligning with respect to the page.

And there you have it.


Andries & Duncan, regarding TITLE text, my point is that it would be nice if the app empowered me to add TITLE text wherever I want it. TITLE text is like a tooltip. There are simply times when you want to add it. It’s by no means a showstopper. It was just an observation with respect to Freeway. Freeway let’s me add TITLE text. Sparkle doesn’t in many cases.


Andries (and everyone else reading),

“Freeway isn’t Freeway anymore” insofar as we all want Responsive websites now and to accomplish that in Freeway is not intuitive like legacy table-based layouts are. Believe me, I’ve consulted documentation, folks at SoftPress, I’ve reviewed Caleb’s excellent BackDraft and Thomas K’s GridMeister videos, and I’ve listened to Mr. E. Simpson too. I’ve even had a lot of talk with folks off list. But I never created a full featured Responsive (with %-widths and all) website in Freeway. I just didn’t have the time required to do that in Freeway.

With Sparkle, you don’t have %-widths style Responsive, for reasons Duncan has already specified. But we all must admit that if Sparkle can accomplish what the designer intends to do, it will accomplish that more intuitively than Freeway — and keep in mind I speak of RESPONSIVE design here. It’s just that I am viewing Sparkle through a veteran Freeway user’s eyes. My 21-point list is by no means comprehensive. I challenge all you Freeway users, (you too, Paul Dunning), to go through your must-have Freeway features and write them down, then open the Sparkle 2 trial app and see which of those exist and which don’t, then note which would be showstoppers, then post back here.

If we have a good idea of what Sparkle can do for us know, and if we know where the next version is headed, we can better decide if Sparkle is the app to choose or not. It really is that simple.

Best,

James Wages

Andries Kuipers

27 Jul 2016, 2:40 am

You were right James. Standard is the setting Align on Selection, if I switch to Align to Artboard and then choose an alignment in the top row it does its job. In practice I never used it because my Artboard is mostly rather big to work on it (as a big desk) so I would loose my box in the space ;-)

2016-07-27 2:17 GMT+02:00 JDW <[email protected]>:

Duncan, my humble thanks for your kindness is explaining in great detail the matter of Responsive layouts and all the caveats. But in terms of Freeway being “almost impossible to understand,” it actually is drop dead intuitive to me when it comes to legacy table-based layouts. Freeway is the old DTP model of design. My first home computer was a Mac 128k back in 1984 at the age of 13, so I grew up understanding what DTP was all about, and so when I saw Freeway for the first time back in 1999, I learned how to use it right away, without consulting the manual. But for Responsive sites, Freeway is difficult for me (not for everyone, just for me). And now that Freeway won’t be developed anymore, wisdom dictates every Freeway user find something else. For now, my focus is on Sparkle.

Caleb, you are a well known Freeway master of Responsive layouts. Any further thoughts on this?


Andries, I would be happy to educate you on Illustrator, but that does go beyond the scope of this thread. :-) But since I don’t mind bending the rules, here it goes:

  1. Launch Illustrator CC.
  2. New document.
  3. Sketch a box on the page.
  4. Window > Align (or use whatever method you like)
  5. Within the Align palette, point your eyes to the bottom right where it says “Align To:” and click that pop-down menu.
  6. Select “Align to Artboard” so a checkmark appears by it.
  7. Now with your box selected, click “Horizontal Align Center” — BAM! Your box is now centered with respect to the page, and you only have a single object selected!

So to ensure this gets back on topic, I would like to see this in Sparkle. Align icons should be contextual and allow aligning of not only multiple selected objects, but also allow aligning with respect to the page.

And there you have it.


Andries & Duncan, regarding TITLE text, my point is that it would be nice if the app empowered me to add TITLE text wherever I want it. TITLE text is like a tooltip. There are simply times when you want to add it. It’s by no means a showstopper. It was just an observation with respect to Freeway. Freeway let’s me add TITLE text. Sparkle doesn’t in many cases.


Andries (and everyone else reading),

“Freeway isn’t Freeway anymore” insofar as we all want Responsive websites now and to accomplish that in Freeway is not intuitive like legacy table-based layouts are. Believe me, I’ve consulted documentation, folks at SoftPress, I’ve reviewed Caleb’s excellent BackDraft and Thomas K’s GridMeister videos, and I’ve listened to Mr. E. Simpson too. I’ve even had a lot of talk with folks off list. But I never created a full featured Responsive (with %-widths and all) website in Freeway. I just didn’t have the time required to do that in Freeway.

With Sparkle, you don’t have %-widths style Responsive, for reasons Duncan has already specified. But we all must admit that if Sparkle can accomplish what the designer intends to do, it will accomplish that more intuitively than Freeway — and keep in mind I speak of RESPONSIVE design here. It’s just that I am viewing Sparkle through a veteran Freeway user’s eyes. My 21-point list is by no means comprehensive. I challenge all you Freeway users, (you too, Paul Dunning), to go through your must-have Freeway features and write them down, then open the Sparkle 2 trial app and see which of those exist and which don’t, then note which would be showstoppers, then post back here.

If we have a good idea of what Sparkle can do for us know, and if we know where the next version is headed, we can better decide if Sparkle is the app to choose or not. It really is that simple.

Best,

James Wages

JDW

27 Jul 2016, 9:38 am

Duncan, if you don’t mind, I have another question. How does Sparkle handle multilingual sites that have a mixture of English and 2-byte text like Japanese?

For English, web fonts are great. For Japanese, it’s more complex because unless you are using KATAKANA or HIRAGANA alone (each about 50 characters), you simply aren’t going to find a KANJI (chinese character) web font because it would have to hold thousands of characters and be a huge download. So what I do in Freeway is create font styles for Japanese that ensure the basic text is a gothic font (similar to helvetica) and is a font common to Windows or the Mac (MS PGothic for older Windows and Meiryo font for newer Windows, along with the Mac versions like Hiragino).

I also have a link on every page in my site to allow the user seamless switching between English and Japanese. You can see that on one of my sites here:

http://www.visionsecurity.jp

Click the ENGLISH button at right of the menubar and then you can click JAPANESE to get back. And as you dig down into the site you still have the same buttons. And unlike other sites that merely take you to the top page when you click the language button, my site offers you the language swap of the very page you are on at the time.

So obviously, I would want do achieve the same on any new websites I build with a Freeway alternative like Sparkle.

Thank you,

James Wages

Duncan Wilcox

27 Jul 2016, 4:11 pm

Hey James,

being eu-based means we are super sensible to localization needs. Sparkle itself is translated to 7 languages and we plan on translating the site and manual as well as resources allow.

Sparkle has no problem with multi language sites but doesn’t yet have any special support for them, though we do have several customers using sparkle that way. Sparkle could facilitate it in several ways, we are saving design ideas for a time when we can add a bunch of things all at once and make a big push. We definitely can discuss the current options offline if you want.

Regarding CJK languages there are a couple issues and in general the problems aren’t very well understood outside of user groups who actively use them.

The first and most obvious is how text is encoded in pages. Sparkle can encode both UTF-8 text and pure ascii, the latter is for servers that force a charset in the headers, which break UTF-8. By using Sparkle’s built in publishing this will soon be auto detected and work with no user intervention.

The second is fonts. As you note webfonts are pretty rare because of the sheer number of glyphs. It seems to all boils down to using the proper CSS font stack, which you can do in the Sparkle system font pane. There are a few built in stacks including for common Japanese fonts, but you can change them and add fonts.

As long as you don’t mix Chinese, Japanese and Korean the current Sparkle setup works fine. If you do need to mix them then it’s no longer sufficient because the same character code point maps to different glyphs or similar glyphs but drawn with different strokes. To fix that the “lang” attribute need to be set on the page or on individual paragraphs. Sparkle doesn’t yet support it but we are fully aware and hope to get around to it soon.

Does this answer your question?

Duncan

JDW

28 Jul 2016, 12:35 am

Duncan,

Yes, you answered my question quite well.

Thank you!

James Wages

missing

29 Jul 2016, 10:20 pm

.

JDW

30 Jul 2016, 1:09 am

Barry, here’s yet another single period “.” post by you (Hoffkids). It has the appearance of SPAM, so please explain.

James

missing

30 Jul 2016, 1:37 am

simple.. I wanted to know when someone added something to new about these programs but I had nothing to add just yet.

:-(

missing

30 Jul 2016, 1:37 am

simple.. I wanted to know when someone added something to new about these programs but I had nothing to add just yet.

:-(

JDW

30 Jul 2016, 4:04 am

While I understand the merits of it, this forum really isn’t a forum at all but rather a glorified email list we can access online. No way to subscribe to threads, edit posts, or delete duplicate posts either.

Thanks for explaining though.

Andries Kuipers

30 Jul 2016, 10:54 am

Just placing a period ‘.’ is rather confusing, its looks like I’m missing a bunch of text. So please don’t.

Andries

2016-07-30 6:04 GMT+02:00 JDW <[email protected]>:

While I understand the merits of it, this forum really isn’t a forum at all but rather a glorified email list we can access online. No way to subscribe to threads, edit posts, or delete duplicate posts either.

Thanks for explaining though.

Doty

15 Aug 2016, 9:48 pm

I appreciate all who are posting their experiences with the various FW alternatives. James, thank you for the time you put into this. My question is similar to yours…

Quoting Caleb

One of my issues with it is that it doesn’t create true “responsive” websites.

If there is no way around this, then Sparkle is a non-starter for me. Through Thomas’ videos and Caleb’s backdraft and many late nights dissecting Ernie & DeltaDave, Walt’s et al…. emails, I have a handle on inline layouts and responsive design. Yes, Duncan is right, fluid layouts are hard to get right. But I was just beginning to get the hang of them with FW and I don’t want to go backwards.

I really want to like Sparkle. I want there to be an easy answer to my “next-FreeWay app.” Alas, it sounds like Sparkle would be, for me, a giant step backwards.

I challenge all you Freeway users…to go through your must-have Freeway features and write them down…then note which would be showstoppers, then post back here.

I started my list today! I’m glad Sparkle has a free “demo” version. Most of the other options have a one week trial, so I’m trying to get as many ducks line up before I jump in!

Colorado Mountains, USA

FreeWay Pro FW 7.1.2 | MacBook Pro El Capitan

http://www.dotyshepard.com

Richard van Heukelum

15 Aug 2016, 10:59 pm

Responsive Foundation Framer is quite an awesome app that –for me– contains everything that Freeway lacked or Softpress just ignored. For $59 you own a registered beta (and later on you get the public release for no additional charge). As the name says; it’s core is Zurb Foundation 6 and it’s also supporting Flexbox. I’m just touching the surface, but wow …

For the users wanting something more; this might be it. The $59 Responsive Foundation Framer Beta purchase came with a 20% OFF YOUR NEXT PURCHASE coupon which I used for purchasing the $299 Responsive Design Pack. For $298 you have licensed versions of every single mac app they offer.

Richard

Ontwerpzaam.nl | Papendrecht, The Netherlands

Hardware: 27” iMac i5 3.1GHz / 32GB RAM / 4TB SSHD / 1GB VRAM /

Software : macOS 10.13.6 High Sierra / Freeway7 (user since Freeway1)

Has moved on with CoffeeCup Software : Site Designer / Form Designer / Content Slider / Email Designer / Sonar / Website Insight and occasionally Blocs Web Design App. Use CraftCMS.

Replaced Adobe with Affinity Publisher, Affinity Designer and Affinity Photo.

marka

16 Aug 2016, 12:38 am

This whole responsive thing is bewildering to me, at least a bit.

I went to Sparkle becuase it doesn’t rely on templates, it’s responsive, it doesn’t come with an attached web hosting and it’s insanely easy. Stuff that too me (someone on the lower edge of the Freeway community, to be sure) hours on Freeway take me minutes in Sparkle. It’s completely intuitive, I only looked at the documentation when I had issues a few times. If you can make a Page document, or make a Keynote presentation you can use this program.

But I wonder how one can say that, because it’s not a percentage based layout and is responsive because of break point adjustments that it’s not responsive.

My site was made with break points. I have looked at it on these devices: iMac, IPad (landscape and portrait for all these devices, by the way), iPad mini, iPhone 6, iPhone 4, a Samsung phone running something, and an iPod touch 2nd generation.

The site framed properly on all those devices, so how is that not responsive? And that’s not a rhetorical question, how is it not repsonive if it responds and frames corrrectly to every device I’ve used to look at the site?

I think in Sparkle one uses something like 4 breakpoints and the devices I used had 13 different screen sizes.

I wonder if it is the fact that the devices themselves can adapt to what is presented to them compensates for the lack of percentage based layout?

Needless to say I don’t know how it works so well but I have a hard time saying it’s not responsive.

I also want to thank James for all his work in looking into all these programs and Thomas and Walt for their input.

It’s also great that SoftPress is still keeping this site up. Freeway Talk was probably the best part of the whole Freeway experience.

iMac, Freeway Pro

www.pantherpeakbindery.com

JDW

16 Aug 2016, 1:48 am

Richard, not to in any way whatsoever speak ill of your preferred solution, I feel compelled to point out that if one is willing to pay $300 for a web design package, RapidWeaver + Stacks + Foundation (Joe Workman) + other stacks you may need will fit neatly within that price point. Food for thought.

Now back to Sparkle. :-)

marka, you may wish to scroll back up and read all the posts in this thread, especially those by Duncan, developer of Sparkle. We briefly discussed the limited breakpoints in Sparkle. And of course, if Duncan wishes to add something more to that discussion, he certainly has liberty to do so.

—James Wages

marka

16 Aug 2016, 2:37 am

Again, James thanks for all your work on sussing all these options out.

I did see what Duncan had written but am still wondering what the issue is.

It seems like the result isn’t what matters, it’s all about the method used to get there.

Sort of like bringing a great pan of brownies, made from a store bought mix, to a party and have everyone say, sure they tasted great but you didn’t make it from scratch so they weren’t any good..

Just don’t understand the thinking and wonder if I’m missing something.

iMac, Freeway Pro

www.pantherpeakbindery.com

Richard van Heukelum

16 Aug 2016, 7:46 am

On 16 Aug 2016, 1:48 am, JDW wrote:

Richard, not to in any way whatsoever speak ill of your preferred solution, I feel compelled to point out that if one is willing to pay $300 for a web design package, RapidWeaver + Stacks + Foundation (Joe Workman) + other stacks you may need will fit neatly within that price point. Food for thought.

Good morning James,

it’s just $59 for Responsive Foundation Framer (the web-design app that –for me– replaces Freeway); the extra €248 I’ve spend gave me just 7 additional great apps. So … it seems a bargain to me :)

Richard

Ontwerpzaam.nl | Papendrecht, The Netherlands

Hardware: 27” iMac i5 3.1GHz / 32GB RAM / 4TB SSHD / 1GB VRAM /

Software : macOS 10.13.6 High Sierra / Freeway7 (user since Freeway1)

Has moved on with CoffeeCup Software : Site Designer / Form Designer / Content Slider / Email Designer / Sonar / Website Insight and occasionally Blocs Web Design App. Use CraftCMS.

Replaced Adobe with Affinity Publisher, Affinity Designer and Affinity Photo.

JDW

16 Aug 2016, 9:10 am

Richard,

Thank you for explaining.

Since this thread is focused on Sparkle, I must ask you a question. Did you try Sparkle before you decided on Responsive Foundation Framer?

If you did try Sparkle first, what made you decide to choose Responsive Foundation Framer instead?

If you didn’t try Sparkle at all, then the question by “marka” remains, and perhaps Duncan will be kind enough to address that.

Best,

James W.

Duncan Wilcox

16 Aug 2016, 11:04 am

Building websites is different things to different people, and there are different priorities and angles to evaluate web building software, web frameworks and the actual websites produced with them. Everybody brings their own experience, bias and more or less hidden agenda to the conversation.

So here’s my point of view.

First, while frameworks such as Foundation and Bootstrap make it incredibly fast to built a “real” responsive website, what you are trading for the speed is a bit of a canned look.

There are many articles about this:

https://medium.com/airbag-industries/and-they-all-look-just-the-same-590bd966055 http://www.friday.ie/journal/why-do-all-websites-look-the-same/ http://adventurega.me/bootstrap/

The gist of it is a web framework is only slightly less template-y looking than a template, unless you delve into heave code customization (yes even in foundation and bootstrap generators).

So coding. If you’re into coding, more power to you. Some things you can’t do without coding (like a webapp, or a very custom design, tinkering with cutting edge css, etc). If you code you’ll probably view everything through the “can I use this to code” lens. If you’re on the edge about learning some, it clearly is your prerogative to decide for or against coding. Just be aware that the minimum level isn’t just HTML/CSS, in 2016 you need to compress images in multiple sizes and formats, implement several techniques for font, script and css loading to pass the speed tests with flying colors and be compatible with a dozen browsers, it really is a full time job, “fixing” your site by asking your friends or stack overflow is looking for trouble. And like with everything that’s DIY, if you built it and it breaks, you get to debug it and fix it, even years down the road.

So considering there are visual editors, why is there a common consensus that you should go with code-based solutions? Plenty of reasons. Perhaps they have a a knack for code or perhaps they have a problem that can only be solved by coding. Often times though I get the impression that by insisting that something is “pure and real” and something else is not, that there’s something ineffable about on solution over the other that only people in the ivory tower can approve, the only solution is a time consuming or expensive consulting service. So buy a $100 app or a $1000/year “real” website from a professional? Hmmm.

Sparkle’s tradeoff is that, in order to preserve a fully visual interface with no jargon, you get a somewhat “less pure” responsive layout (which as Mark mentions actually works just fine), but you have full creative control over each layout and can make your site actually stand apart by not making it look canned.

Take a look at these responsive websites built with Sparkle, do they work/feel ok? Do they look alike in any way shape or form?

http://themonkeykingsdaughter.com (former Freeway user Todd DeBonis here) http://www.auer-max-film.de https://www.purelynx.com http://lioneldarian.com http://davidpuckett.com

In every case here no “web professional” was involved in the creation of the site, each of them is built by someone who has a different, actual job.

Finally, the code vs. no code discussion is a bit like politics or religion, I’m not going to change anybody’s mind. And that’s why this discussion is just running in circles here.

Nothing hidden about my agenda by the way, in the context of static websites, such as a small business or personal website, I truly believe Sparkle is by far the best solution for anybody that’s code shy (translated: has other work to do), and I want you to buy Sparkle or at least try out Sparkle if that definition fits you. So let’s do this, get Sparkle 15% off here: https://secure.sparkle.cx/?ref=FIFTEEN (if you come from Freeway and have purchased Sparkle already in the last week or two I’ll refund the 15%). Deal?

Duncan

Richard van Heukelum

16 Aug 2016, 12:37 pm

On 16 Aug 2016, 9:10 am, JDW wrote:

Richard,

Thank you for explaining.

Since this thread is focused on Sparkle, I must ask you a question. Did you try Sparkle before you decided on Responsive Foundation Framer?

If you did try Sparkle first, what made you decide to choose Responsive Foundation Framer instead?

If you didn’t try Sparkle at all, then the question by “marka” remains, and perhaps Duncan will be kind enough to address that.

It’s just a gut feeling I got when I started working with RFF (I bought the beta after playing around with it’s predecessor Responsive Site Designer); it’s solid, robust, in a way it works the same as Freeway does when working ‘box model’ I am familiar with (and I know, that’s not your cup of tea, it lacks that intuitive way of working you cherish … I respect that). It feels just like an app that is fully ready for the future, you know … despite how reliable Sparkle seems to be. The fact that Coffeecup seems to cover all bases offering this range of apps –for me– made me feel comfortable with that choice. Like I said, an intuitive choice.

–Richard

Ontwerpzaam.nl | Papendrecht, The Netherlands

Hardware: 27” iMac i5 3.1GHz / 32GB RAM / 4TB SSHD / 1GB VRAM /

Software : macOS 10.13.6 High Sierra / Freeway7 (user since Freeway1)

Has moved on with CoffeeCup Software : Site Designer / Form Designer / Content Slider / Email Designer / Sonar / Website Insight and occasionally Blocs Web Design App. Use CraftCMS.

Replaced Adobe with Affinity Publisher, Affinity Designer and Affinity Photo.

Thomas Kimmich

16 Aug 2016, 1:32 pm

On 16 Aug 2016, 11:04 am, Duncan Wilcox wrote:

Building websites is different things to different people, and there are different priorities and angles to evaluate web building software, web frameworks and the actual websites produced with them. Everybody brings their own experience, bias and more or less hidden agenda to the conversation.

I heartily agree. So let me bring in one angle of less importance:

Say - one day you’ll find following message in your mailbox:

Unfortunately all public servers are full. Humanity showed it’s best face and wasted all available resources (the rest is provided for fighting against aliens). Because of this, from now, no new content can be published anymore.

We, the WGCWS (Web Group Cleaning Wasted Space) hereby decided (beneath some other things) to auto-delete any image higher than 100k. The all-time goal to reach is, that no website is heavier than 1.7MB in weight.

Uff - so what? Crying, mumbling and grumbling? Blaming an application?

Some things you can’t do without looking under the hood. It doesn’t necessarily mean “code”. Pages like this:

http://themonkeykingsdaughter.com

is looking exactly the same in Freeway or Sparkle - or any other application. It’s simply done by amateurs who are not aware of the consequences. WYSIWYG is dead - haphazardly building websites as well. Such as this audience did many years as well. So it’s not surprising, that this page is created by a former Freeway user. It’s focused on being pretty (33k - yippee):

alt text

Interesting to see, that Sparkle has exactly the same (weird) attitude towards styling and semantics as Freeway has. No H-Tags - but many font-1, size-12 and pos-100 (we are used to call them item-134 and style-78).

But as already said: it’s less important.

Cheers

Thomas

Thomas Kimmich

Kimmich DigitalMedia

http://www.kimmich-digitalmedia.com

T.+49(0)7404-914 384

Somewhere in the South of Germany

Duncan Wilcox

16 Aug 2016, 2:12 pm

Thomas, I don’t get your passive-aggressive way of underhandedly disparaging anybody who doesn’t view the world exactly as you do. Not a game I’m interested in playing.

But since you’re criticizing Sparkle out loud in the Sparkle thread I feel the need to defend it.

What Sparkle’s code looks like is frankly completely irrelevant if you don’t need to further edit it, as is the case with Sparkle and for Sparkle users. Not liking the “font-1” css selector is akin to not liking the color of the fuel pipe in your car. I’m sure your mechanic loves you for that.

As per the 33k you fail to mention that by using the rather verbose <picture> element (standards committees to thank for that), asset download is optimal for each visiting device. In other words, because Sparkle resizes and compresses images for different devices and pixel densities, an iPhone would be downloading the 150kb jpeg instead of the 330kb jpeg a desktop visitor would download. Sparkle also goes to great lengths to avoid bloat in the bundled javascript, something even many developers fail at doing.

We have thousands of users for whom code simply isn’t an option, either because symbolic thinking (left brain) and visual thinking (right brain) are too hard to mix for them, or because the time needed to wrap their head around some arcane browser bug or CSS “feature” isn’t compatible with their busy life. In fact statistically speaking I’d say WYSIWYG is the future and handcoding HTML is dead, it just isn’t apparent in this particular echo-chamber.

Unlike Freeway, Sparkle isn’t a dead product. You don’t want to use Sparkle? Fine. You don’t think Sparkle is good for you? Understood. Intellectual honesty would have you admitting that Sparkle is simply amazing for its target audience.

So it’s the amateurs who are creating the unique, distinct new websites and the professionals creating the canned-looking ones. Go figure…

Duncan

Thomas Kimmich

16 Aug 2016, 2:51 pm

But since you’re criticizing Sparkle out loud in the Sparkle thread I feel the need to defend it.

I can’t judge a product - and I never did. All I can judge is a result - no matter how and with what it has been created. And you shared results. And I had a brief look into it.

What Sparkle’s code looks like is frankly completely irrelevant if you don’t need to further edit it, as is the case with Sparkle and for Sparkle users. Not liking the “font-1” css selector is akin to not liking the color of the fuel pipe in your car. I’m sure your mechanic loves you for that.

Perhaps - yes. But I’m not sure if semantics in web is really irrelevant. Or for screen-readers?

As per the 33k you fail to mention that by using the rather verbose element (standards committees to thank for that), asset download is optimal for each visiting device. In other words, because Sparkle resizes and compresses images for different devices and pixel densities, an iPhone would be downloading the 150kb jpeg instead of the 330kb jpeg a desktop visitor would download. Sparkle also goes to great lengths to avoid bloat in the bundled javascript, something even many developers fail at doing.

Yep - the picture element. I’m aware of. Well done.

We have thousands of users for whom code simply isn’t an option, either because symbolic thinking (left brain) and visual thinking (right brain) are too hard to mix for them, or because the time needed to wrap their head around some arcane browser bug or CSS “feature” isn’t compatible with their busy life. In fact statistically speaking I’d say WYSIWYG is the future and handcoding HTML is dead, it just isn’t apparent in this particular echo-chamber.

No - the point is, that an adaptive web is way too flexible to see it from a static standpoint. I forgot to mention that VCD (We see design) or Visual Controlled Design would cover this aspect much better.

Unlike Freeway, Sparkle isn’t a dead product. You don’t want to use Sparkle? Fine. You don’t think Sparkle is good for you? Understood. Intellectual honesty would have you admitting that Sparkle is simply amazing for its target audience.

Yes it’s true. And I think Sparkle is the closest match to substitute Freeway. I don’t think that I ever wrote anything else. I’m not application oriented. But watching your promo video “Why Sparkle”, I feel myself named and shamed. A true idiot, just because I do research in web and even read books.

So it’s the amateurs who are creating the unique, distinct new websites and the professionals creating the canned-looking ones. Go figure…

Duncan

Visually spoken - maybe (it’s anyway too hard to judge “design”). But I still see both: The things I see - and the things I can’t (but sometimes wonder).

Cheers

Thomas

Thomas Kimmich

Kimmich DigitalMedia

http://www.kimmich-digitalmedia.com

T.+49(0)7404-914 384

Somewhere in the South of Germany

Doty

16 Aug 2016, 4:31 pm

Duncan,

Can you see the code in Sparkle at all? Add html markup and/or edit css?? I love the aspect of visual design, but sometimes I like to push things a little farther with added bits of code here or there. Basically, I’m fine with not seeing the code… Until I need to!

Thanks. Doty

Colorado Mountains, USA

FreeWay Pro FW 7.1.2 | MacBook Pro El Capitan

http://www.dotyshepard.com

Duncan Wilcox

16 Aug 2016, 5:07 pm

Doty, no, Sparkle is visual only. I am convinced that a tool that is visual and jargon free can’t allow arbitrary HTML/CSS editing. And if the tool isn’t jargon free, or allows more advanced features only by editing HTML or CSS, it’s just a thin coat of paint over code and you still need to understand CSS positioning or browser bugs or even the concept of a CSS class, and what’s the point then?

There are plenty tools that try to mix visual editing and code, but as you have probably found they fall short on the visual side.

As to why a truly visual editor can’t allow arbitrary code editing, the reason is quite simple really. Take any non trivial technique, say an image gallery or animation or a lightbox. For each there are as many different techniques as you can count. Unlike a web browser that “executes” the page, an editor would have to understand the intent to go back to visual editing. The intent is never part of the page, and code acts in local fashion, so a change in one place can affect the layout or functionality in another. So to be truly visual an editor would have to understand all of the possible techniques. Finally many techniques are JavaScript based, code which is impossible to analyze by a piece of code for all practical purposes.

Now if you’re ok with an editor that doesn’t quite preview what the final result will be, there are plenty of options, they are essentially glorified web inspectors and expose all of it.

This difficulty in reconciliation of needs of code and visual use cases is incidentally the reason I think macaw 1 didn’t work out.

Duncan

Duncan Wilcox

16 Aug 2016, 5:36 pm

Thomas, I guess I need to apologize that you feel offended by the Sparkle video. It really is intended tongue in cheek, but whatever.

Yes we do care about the semantics and accessibility of web content (and of the Mac App), and what we don’t do yet we’ll be adding soon. A feature addition that, like any sparkle addition, will require minimal effort for sparkle users to adopt.

I figure you have all been burnt by Softpress’ outcome or by greedy corporations, but we fully intend to make Sparkle a fully visual environment for many web needs.

Duncan

JDW

17 Aug 2016, 12:28 am

Duncan, my humble thanks not only for your detailed replies, but for your kindness in extending a 15% discount off Sparkle to us. Once again, for you folks who might have missed it, Duncan (developer of Sparkle) is offering the discount here:

https://secure.sparkle.cx/?ref=FIFTEEN

I would also like to add, Duncan, that Thomas is someone whom I consider a “Responsive genius” among us. He used Freeway to accomplish things I could only dream of, and that remained true even after I watched his videos on GridMeister. I’ve been a Freeway user since version 2 back in 1999, but my poor brain is handicapped in that I’ve never been able to figure out how to use Freeway (or rather, how to ENJOY using Freeway) to create truly responsive sites like Thomas, Ernie S., and others here. Those folks may chide me (if not but in their hearts) about my having “not spent enough time on learning it,” like they did. And they’re right. But I lack the time and desire to learn it. I may know how to code in Assembly on a PIC MCU, but that doesn’t mean I want to be a web coder. Not in the least!

“WYSIWYG” being deemed “dead” or not, I nevertheless want to pour my right brain on the web in as painless a way as possible, yet yielding a truly responsive website result, without bloated code, and with a very beautiful to behold look. Except for the left-brained coders, I think that’s what we all want (the majority of people who need to create or modify websites).

Let it also be know that I am not a full time web designer. Web design is only a tiny part of my job. So even though I’ve been using Freeway since 1999, I’ve never had my job description changed such that I have become a web-designer-only. People who design web sites for a living, living and breathing that almost exclusively, will perhaps think differently than I do. And that’s okay. I am just saying for the record who I am and what I want to accomplish.

Yes, I’ve heard that some full time web designers are called upon by big corporations to create only a Foundation website or only a Bootstrap website. In that case, those full time web designers may need to buy more than one web design tool to help them. But that doesn’t relate to me. I couldn’t care less if it is Bootstrap or Foundation or Thomas’ Gridmeister. I just want a truly responsive site that looks great and is easy to build and is easy to modify. Modify being the key word seeing that I often need to make modest edits fast and get those uploaded with only 5 or 10 minutes to spare.

I have been participating in FreewayTalk for years, but never more than now. Now that Freeway is no longer updated or supported, I am scrambling to decide what to do. And I am not embarrassed or ashamed at telling the world my thoughts. So here they are…

I like many thinks about Sparkle.

I like many things about Blocs.

Pinegrow is only useful to me as a last resort HTML importer that allows feeble-brained folk like me to make minor edits easily.

From what I’ve read about apps other than those 3, I am not in the least bit interested in those.

I am still using Freeway for now, but would like to get started on a fully responsive site soon, prompting me to choose either Sparkle or Blocs.

Sparkle Pro is, for a limited time to us here, 15% off the $79.99 retail price, making it $67.99. Sparkle, to me, is similar to Freeway in some respects and may be a somewhat painless move for some. Sparkle also has a trial app that is limited by number of pages and a watermark, but it is free to use forever. That is very helpful for people really wanting to test the app (which requires more than just 5 days).

Blocs Personal also retails for $79.99, but there is no discount being offered (to my knowledge), and the trial version limits you to a shocking 5 days. It looks a bit easier to use than Sparkle, but then you have less flexibility than Sparkle too. The Blocs UI is lovely to behold, and like Kentucky Fried Chicken, there is something mysterious about it that makes you crave it.

And there you have it.


marka,

Does our recent dialog help? If you or others have any additional questions, let them be known. This thread is about Sparkle. Duncan has been very helpful. And even though Thomas disagrees on certain points, his input is necessary and helpful too. No one wants to merely sing to the choir. We want to hear all sides and examine Sparkle objectively.

Thanks to all who have kindly contributed to this thread to date.

James Wages

Doty

17 Aug 2016, 12:59 am

Hi Duncan,

Thanks for your reply. Okay, I can’t see the code w/ Sparkle. I couldn’t see it with freeway and that was usually okay. But can I ADD code???

In FreeWay, I need to add code in several typical web situations:

  • buy buttons
  • MailChimp or similar signups
  • WowSlider/Amazing slider or some other similar element
  • Music players

That’s off the top of my head, but there are plenty of others. Can I add code via html markup or other similar functionality? Thanks.

Colorado Mountains, USA

FreeWay Pro FW 7.1.2 | MacBook Pro El Capitan

http://www.dotyshepard.com

JDW

17 Aug 2016, 1:18 am

Duncan,

To supplement Doty’s question I must emphasize that Freeway has long allowed us to add a splattering of code here and there via its HTML Markup feature — a dialog box that let’s you dump in JS or CSS as you see fit. And honestly, without that feature, I never would have gotten a search feature of my site to work and look as I like. I have quite a bit of HTML Markup in my Freeway sites, actually.

Here are some examples of how its done in Freeway:

https://youtu.be/TVFZv3lhWiE?t=2m20s

http://www.softpress.com/kb/questions/42/Inserting+Custom+Code+into+Freeway

James Wages

Duncan Wilcox

17 Aug 2016, 1:33 pm

Doty, Sparkle does have an embed element, typically used to embed the HTML code for paypal or shopify buttons (for example in http://kralikarna.com/A/ http://kralikarna.com/A/), or an ecwid.com http://ecwid.com/ shopping cart. I’m pretty sure mailchimp or the self hosted sendy have been integrated as well.

More complex embedding such as WowSlider probably aren’t as straightforward, though I have never tried myself. You can add simple code in Sparkle, but integration of a whole folder of assets the best route is probably to export say the WowSlider HTML to the web host and integrate it via an iframe in Sparkle. This is what customers who are integrating Hype-generated content do.

I’m not familiar with different music players, Sparkle has plyr.io http://plyr.io/ built in for mp3s and soundcloud embedding works (or needs minor tweaking), for others we’d have to look into them.

Duncan

Duncan Wilcox

17 Aug 2016, 1:44 pm

The problem with dumping JS or CSS anywhere is the behavior becomes unpredictable.

One one hand it’s impossible to provide a WYSIWYG rendition of that code (for the reasons stated previously, an editor is either all visual or it exposes HTML concepts). We don’t want Sparkle to become a container for gray boxes. Also we don’t want sites built with a sprinkle of code to be a notch above sites built without, or there goes the visual nature of the tool.

On the other hand we want to guarantee that the page loads fast under all circumstances, but if you put a link to a CSS file, a script or other render-blocking code, the page won’t be as fast.

In a more under the hood way, we want to be free to significantly change the generated code in the future, say we switch to flexbox and the markup ends up being entirely different, any code that significantly interacts with the code that Sparkle generates today is going to break, and it’s going to be a nightmare to move forward. So we draw the line at “self contained piece of code”, like say a Google map or a Youtube embed (which we support directly, but they are good examples).

This means that some things today in Sparkle can’t be done. The good news is we release a bunch of updates throughout the year, and we’re happy to talk and integrate what makes sense to fit in. favicon is definitely ridiculous to have to set up manually, it’s in Sparkle since the original release.

Duncan

waltd

17 Aug 2016, 2:04 pm

Is there any notion of an “Action”, the way that Freeway allows you to interrupt the publishing cycle programmatically, alter the code about to be generated, and then carry on as though nothing else happened? I am thinking here about my Inlay Action, which does nothing more except decorate an element with a data- attribute, which means that Freeway users can use my CMS without having to “code”.

I would love to see Inlay appear as native as possible on as many different static HTML generators as possible, since that is how it was designed and intended.

Walter

On Aug 17, 2016, at 9:43 AM, Duncan Wilcox <[email protected]> wrote:

This means that some things today in Sparkle can’t be done.

Freeway user since 1997

http://www.walterdavisstudio.com

Duncan Wilcox

17 Aug 2016, 2:35 pm

Walter, Sparkle doesn’t have any form of plugin. On one hand it’s to be leaner and quicker by avoiding dependencies. On the other hand, app stores really don’t like plugins so that makes it tricky.

Duncan

waltd

17 Aug 2016, 2:43 pm

Gotcha. So any form of adding data-attributes to individual page elements would have to come through post-processing?

Walter

On Aug 17, 2016, at 10:34 AM, Duncan Wilcox <[email protected]> wrote:

Walter, Sparkle doesn’t have any form of plugin. On one hand it’s to be leaner and quicker by avoiding dependencies. On the other hand, app stores really don’t like plugins so that makes it tricky.

Duncan

Freeway user since 1997

http://www.walterdavisstudio.com

Duncan Wilcox

17 Aug 2016, 3:29 pm

Yeah.

On 17 Aug 2016, at 16:43, Walter Lee Davis <[email protected]> wrote:

Gotcha. So any form of adding data-attributes to individual page elements would have to come through post-processing?

Walter

Doty

17 Aug 2016, 7:37 pm

Duncan,

Perhaps I should have added a caveat to my question…. For example, I recently added flexbox to a FreeWay site that I designed. You can see the result here and here. In each of these situations, the WYSIWYG aspect of FreeWay is limited. But I understand that. I’m asking it to do more than what it is built out of the box to handle. So the trade off I’m making is the visual look of FreeWay is not totally what it is after it’s uploaded, but it is close enough for my purposes.

For beginner FreeWay users, keeping things exactly WYSIWYG is important. It’s too confusing otherwise. But once people get a handle on things, the questions come… “how do I do thus-in-such in FreeWay,” often the answer is either a plugin or special code pasted somewhere.

Sometimes, that code needs to be placed in two places, in the <head> section, or before /head section AND wherever the code is to appear. It was necessary to do this “two place pasting of code on this page for the slideshow, and on this page for the “sticky” nav menu. Those are a couple of examples of what I’m talking about. They were tricky for me to learn the first time, but once tackled, I want to be able to use such elements on future sites. I want to add to my toolbox as I gain more skills as a designer.

Another example is, if I want to add CMS bits of code with Pulse or Perch, or Inlay, can I do that in Sparkle. iFrame is not ideal when it comes to responsive sites and I’ve been trying to avoid it as much as possible for several years. If a bit of Pulse code has to be inside an iFrame for my client to edit their site I’m afraid that would lead to all kinds of problems. In freeway, I just wrapped this special code in a <div id=”” class=”“></div> all it’s own and then moved on with my day. YES, the code does not appear on the FreeWay document itself. I don’t need it to. I just need the ability to paste it where I need it. I know you were getting at this in Walt’s question above, but I didn’t really understand the answer or if it would work for my purposes.

I realize the excessive use of sliders and whatnot can slow a site loading time down. But sometimes that is exactly what the client wants. I’m dealing with that on the slider example I gave you. It’s less than ideal when it comes to loading time, but it is exactly what the client wants and sometimes at the end of the day that is the necessary trade we have to make.

I know Sparkle is trying to keep things simple, but are these more complicated elements supported? Out of the box, Sparkle looks great, but I’m afraid if I can’t stretch it’s capabilities here and there I will feel very limited.

Colorado Mountains, USA

FreeWay Pro FW 7.1.2 | MacBook Pro El Capitan

http://www.dotyshepard.com

Duncan Wilcox

17 Aug 2016, 8:05 pm

Doty, I might need to mention again that Sparkle’s focus is to do everything visually, at the expense of possibly not having everything you need right now. You are expressing your needs with a frame of reference of tools of the past. We can do better, nothing you mention is unfeasible via a visual user interface. Again Sparkle isn’t dead and we’re moving ahead at high speed.

Again we can’t support adding arbitrary code anywhere, because whatever you’re latching on to might not exist in a later version of Sparkle, for example a div might not be there anymore, and we don’t want to break documents as we move forward. It’s a can of worms that once opened can’t be re-canned.

The point about performance isn’t whether in absolute terms a page is fast or slow, rather whether given the design you added code that pushes a page off the fast path. In fact probably no page on the web would need more than a fraction of a second to first render in a modern browser, given appropriate server side conditions that are entirely in control of who builds a website. Google page speed has all the details on this, say https://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Fwww.durangoheritage.org%2Factivities.html

Anyway I’m not sure whether you have given Sparkle a try, but it does have built in image gallery (based on slick.js), image and video lightbox (magnific popup), HTML5 video player (plyr.io http://plyr.io/), stick to top, anchors with smooth scrolling, scroll animations (animate.css), contact forms, youtube/vimeo/maps/twitter/facebook. All in one integrated, tidy package.

Duncan

missing

17 Aug 2016, 8:48 pm

Thanks for all your time and explanations Duncan. Barry

Doty

17 Aug 2016, 9:19 pm

I might need to mention again that Sparkle’s focus is to do everything visually, at the expense of possibly not having everything you need right now.

Yep. Understood. I’m just trying to get a feel for what the limitations are. There are trade-offs with each and every approach.

Again Sparkle isn’t dead and we’re moving ahead at high speed.

I never meant to imply that it was dead. In fact it has been stated that Sparkle is a much younger product than FW and they can’t be compared apples to apples. I would argue FW for the moment isn’t dead either. For now it works just fine. In Sierra reports are it will work fine. If it comes down to it, I will maintain an old piece of hardware if needed to update old client designs.

However, since this is FreewayTalk and what the users here KNOW is Freeway, comparisons are inevitable. “How do I do this thing I already know how to do if I wanted to in Sparkle?” It’s an understandable, albeit perhaps unfair question. But again, since this is FWT, I hope you can understand where we are coming from. If your answer is “do it in an iFrame” then I will have to pass. If I had come to Sparkle 10 years ago, I would have made different choice, but today, it is too big a step backwards. I don’t want to be limited to only this one image gallery or this one lightbox. I know myself. It will be great for a few months, but inevitably I will want to do more and try something different. There are plenty of people on this forum for whom Sparkle is a fantastic choice, but I don’t think that user is me. And frankly, that bums me out. There’s a lot to like about your program.

Google page speed has all the details on this,

I actually expected you to do this with my page. I invited the critique when I told you it was admittedly slow to load. I just uploaded last night and those fixes are yet to come. When I started in web design I was scared to make a mistake, at this point, I’m realizing that is how I learn. I don’t want an app to protect me from myself, but rather one that will help me grow.

Anyway I’m not sure whether you have given Sparkle a try

Only minimally. I’ve watched videos and downloaded it. While testing the app, I bumped into the questions I had above and that is why I started asking these difficult questions. Thank you for your time and explaining your approach.

Colorado Mountains, USA

FreeWay Pro FW 7.1.2 | MacBook Pro El Capitan

http://www.dotyshepard.com

Duncan Wilcox

17 Aug 2016, 9:50 pm

I have no “fairness” problems, I’m just saying comparisons with Freeway might make sense from someone who’s been using it for 10 years, but perhaps some of the learned skills are distortions of an insufficiently developed product and need to be unlearned. In fact we’d probably have the same development difficulty with Sparkle if we said “yes” to adding all the things we are asked.

Also I didn’t intend to shame your site specifically, 99% of the web is like that.

Duncan

Doty

17 Aug 2016, 10:00 pm

need to be unlearned….

I have no doubt this is true.

Also I didn’t intend to shame your site specifically, 99% of the web is like that.

No offense taken. When I uploaded it I knew I would need to go back and fix it. But the client needed it uploaded and that’s what the client got.

Like I said above, there are trade offs with each and every approach. For me, the purpose of these discussions on FWT is to find the best FW replacement fit for us. There is no one-size-fits all. There is no FW “replacement.” We all have to ask what our non-negotiables are for our work style/skill level and typical client/user base. I’m glad FWT has allowed this forum to remain for the time being as we make our transition.

Colorado Mountains, USA

FreeWay Pro FW 7.1.2 | MacBook Pro El Capitan

http://www.dotyshepard.com

Scottin Pollock

17 Aug 2016, 10:25 pm

On 17 Aug 2016, 9:50 pm, Duncan Wilcox wrote:

perhaps some of the learned skills are distortions of an insufficiently developed product and need to be unlearned

Wow. Ok… so in Sparkle, how do I do a page redirect? Manage page caching? Do some form validation? Create a popup for a form or navigation? Are rollovers possible? Anyway to prevent mousewheel events/drag scrolling from endlessly zooming/panning an embedded Google Map? I seem to hit the wall on all of these when trying out Sparkle. Hopefully it’s all in there and I just missed it.

JDW

18 Aug 2016, 12:13 am

I can only add to what Doty and Scottin asked by repeating what I said multiple times earlier in this thread. SITE SEARCH.

I’ve spent a lot of time with Walter Davis in the past trying to get my search field to look and work just the way I like it. (Bless you, Walter, for that kind help too!) To do that, I had to add code in Freeway via the HTML Markup dialog and via Walter’s Protaculous2 action (“DOM Loaded Observer” button). Without that action and without HTML Markup in Freeway, I wouldn’t have a search function today. And obviously if I ever build a fully responsive site, I want to not only retain search but make it look modern, something akin to the way Apple implements their search field atop apple.com. (Take a look there right now if you don’t know what I mean. It’s an awesome way to implement search, in my opinion.)

I guess a lot of people don’t add search because it’s either too hard or they feel their site doesn’t need it, but my website users have come to rely on it. In the past I used Atomz, and after Atomz died I switched to Google Custom Search. A bit of a pain to setup, but with Freeway, I accomplished it.

And so, just like everybody else here on FreewayTalk, when I evaluate a “Freeway replacement” I must evaluate it in terms of what I need to accomplish on the web. In other words, the kind of content I have now (site search or otherwise) is the same content I would want to build in a Sparkle website.

But in Sparkle since there are no plugins (I fully understand the reasoning) and since there is no HTML Markup dialog (again, I understand the explanation given), then I am rather stricken with fear to embark on a web design journey with Sparkle. Other people may buy Sparkle to toy with it; but the question is, will Sparkle become their main web design app?

I do not seek to speak disparagingly of Sparkle — not at all. Anyone who read my previous post can clearly see the praise I gave it and the same praise I continue to give it. It’s just that the bottom line is that I need a web design tool that works for me now, not a promise of a better future tomorrow. And so I continue to ponder Sparkle as I ponder my existing sites, realizing some changes and sacrifices must be made, but also realizing that some things cannot be sacrificed. That’s pretty much what Doty was saying and it seems like Scottin is saying the same.

James Wages

Duncan Wilcox

18 Aug 2016, 7:17 am

Scottin, once again Sparkle begins and ends with what you see, that’s both the upside and downside of a visual environment. Some things might be less visible, though a checkbox for preventing map zooming is right there in the map inspector.

I’m sure you’ll always find something missing that could be done with code. There’s no question that with code you can do anything. The point is, and will always be, that a vast majority of people in the world just can’t do it. Today Sparkle’s limited featureset helps many people build their own website without needing to resort to any coding or understanding of what css positioning is. That’s a major win IMHO.

Every passing month we add features, with a visual UI, that raise the bar.

Duncan

Duncan Wilcox

18 Aug 2016, 7:19 am

James, I fully understand that you need site search. It is on our feature list, at some point we’ll add it.

Duncan

JDW

18 Aug 2016, 7:23 am

Thank you, Duncan.

James W.

tonzodehoo

24 Aug 2016, 11:47 pm

Hello all and Duncan in particular.

I have been following this discussion since it began and have found out a lot about the possibilities offered by sparkle.

Its been a generally helpful discussion so thanks to all for that.

Can Duncan confirm if sparkle can create horizontal submenus at all? I gather from reading the documentation that only a menu with one level of submenu is currently possible in sparkle but I didn’t read if this submenu can be assigned to be horizontal or vertical.

Let me know as its a current issue for me with a project and I can’t yet find a freeway solution which works in a responsive site.

Many thanks

Anthony

Gorbals Glasgow

MacOs 10.8.5 Freeway Pro 7! At last!

redfeather

26 Aug 2016, 3:56 am

Question for Duncan as well, unless anyone else knows:

Images with Sparkle: Looking at their documentation, am I confused regarding images. In the past with Freeway I tweak my photos in Photoshop and size them exactly as I want them to be and use Save for Web (Photoshop) so they don’t take long to load. Sparkle says it takes my photo jpg and resamples and exports the image to the correct size for the element. Why? If I decide what size the photo is going to be on a given page, why can’t I do the work in PS and upload it to Sparkle and have it left alone? What am I missing here?

Thanks much!

JDW

26 Aug 2016, 5:33 am

redfeather, you are speaking about Freeway’s excellent “pass through image” feature. I’ve done exactly the same thing for all my images for years, whether they be PNG, GIF or JPG. I created/modify in Photoshop, then save the 144ppi retina image in either GIF or PNG or JPG format (whichever is smallest and looks best to my eye), and then I sketch an HTML box in Freeway and import. That tells Freeway not to recompress the image or change the format, but to just export the graphic as is. And the reason why I use Photoshop instead of Freeway to compress my images is because, as you already know, PS does a much better job.

So obviously, we would want the same kind of “pass through image” feature in Sparkle.

Best,

James Wages

Thomas Kimmich

26 Aug 2016, 6:51 am

On 26 Aug 2016, 3:56 am, redfeather wrote:

Question for Duncan as well, unless anyone else knows:

Images with Sparkle: Looking at their documentation, am I confused regarding images. In the past with Freeway I tweak my photos in Photoshop and size them exactly as I want them to be and use Save for Web (Photoshop) so they don’t take long to load. Sparkle says it takes my photo jpg and resamples and exports the image to the correct size for the element. Why? If I decide what size the photo is going to be on a given page, why can’t I do the work in PS and upload it to Sparkle and have it left alone? What am I missing here?

Thanks much!

Perhaps something I can answer.

Sparkle guys are here very enhanced. They’re wrapping images in the HTML5 <picture> element. Within the picture element, you can use a so called “srcset”. The source set allows you to define images for lower breakpoints.

So say you define your basic image on a width of 1920px, you won’t serve this for tablet and mobile. For tablets and mobile you’d like to serve alternative widths and resolutions (and therefor file-sizes) such as 1200px and 600px.

This is looking something like:

<picture class="img-2">
<source srcset="images/tmkdbooks4x-908-310.png 1x, images/tmkdbooks4x-908-620.png 2x,     images/tmkdbooks4x-908-930.png 3x" media="(max-width:479px)">
<source srcset="images/tmkdbooks4x-908-464.png 1x, images/tmkdbooks4x-908-928.png 2x" media="(max-width:767px)">
<source srcset="images/tmkdbooks4x-908-725.png 1x" media="(max-width:959px)">
<source srcset="images/tmkdbooks4x-908-908.png 1x" media="(min-width:960px)">
<img src="images/tmkdbooks4x-908-310.png" alt="" class="js img">
</picture>

So Sparkle’s core engine is doing something which is (nearby) impossible to re-create in Freeway. In fact very cool - and if a browser doesn’t support the picture element and srcset?

There is the fallback <img> for.

Hope this helps you out.

Cheers

Thomas

Thomas Kimmich

Kimmich DigitalMedia

http://www.kimmich-digitalmedia.com

T.+49(0)7404-914 384

Somewhere in the South of Germany

Duncan Wilcox

26 Aug 2016, 7:27 am

Can Duncan confirm if sparkle can create horizontal submenus at all? I gather from reading the documentation that only a menu with one level of submenu is currently possible in sparkle but I didn’t read if this submenu can be assigned to be horizontal or vertical.

Hi Anthony,

Sparkle doesn’t currently support horizontal submenus.

Duncan

Duncan Wilcox

26 Aug 2016, 7:41 am

Images with Sparkle: Looking at their documentation, am I confused regarding images. In the past with Freeway I tweak my photos in Photoshop and size them exactly as I want them to be and use Save for Web (Photoshop) so they don’t take long to load. Sparkle says it takes my photo jpg and resamples and exports the image to the correct size for the element. Why? If I decide what size the photo is going to be on a given page, why can’t I do the work in PS and upload it to Sparkle and have it left alone? What am I missing here?

Hi Redfeather, as Thomas mentions, Sparkle creates a picture element, or in the case of a box background, Sparkle uses media queries to load a different image at different breakpoints, or in the case in the forthcoming webp support in 2.1, different CSS rules to load different compression formats (webp saves about 25% size and is used by Chrome 25+ and the upcoming Safari 10, and more importantly, their mobile variants).

The gist of it is, like for so many other things, making the appropriate image size in Photoshop and putting it into your web page is something you need to unlearn. It was the recommended thing to do for so many years, but already in 2010 with the introduction of the retina screen on the iPhone 4 it was dubious. In 2016 the picture element and other techniques ensure that in a responsive website each device downloads the smallest image they need to show a crisp image for their pixel density. This means your images folder will contain many image files for each image in your page, and this is a good thing (if you don’t have to prepare them all yourself).

By the way the wording in the documentation may seem to suggest Sparkle resamples the image when enlarging it, this is not the case. Sparkle only creates high resolution variants of an image if the source image has enough pixels in it, otherwise it only leaves the lower resolution version. But by giving Sparkle a high resolution source image you can ensure that your site looks great on my retina macbook pro even if you’re creating it on, say, your non-retina iMac.

Duncan

tonzodehoo

26 Aug 2016, 7:49 am

On 26 Aug 2016, 7:27 am, Duncan Wilcox wrote:

Hi Anthony,

Sparkle doesn’t currently support horizontal submenus.

Duncan

Thanks for the clarification Duncan. Could a horizontal submenu be achieved by using an externally created script added in to a sparkle page?

Just keen to know more about such possibilities.

Anthony

Gorbals Glasgow

MacOs 10.8.5 Freeway Pro 7! At last!

Duncan Wilcox

26 Aug 2016, 7:53 am

Thanks for the clarification Duncan. Could a horizontal submenu be achieved by using an externally created script added in to a sparkle page?

Presumably yes, we have users integrating animations built with Hype, so why not. However it requires some development skills which you’d need to have.

Duncan

redfeather

26 Aug 2016, 3:39 pm

Thank you, Duncan & Thomas!

So Duncan, when you say “by giving Sparkle a high resolution source image you can ensure that your site looks great on my retina macbook pro even if you’re creating it on, say, your non-retina iMac.” What is high-res to Sparkle?

And how do I know what dimension to make the photo? Is it the largest size I determine I want for my layout?

Thanks much, joette / redfeather

Duncan Wilcox

26 Aug 2016, 4:56 pm

So Duncan, when you say “by giving Sparkle a high resolution source image you can ensure that your site looks great on my retina macbook pro even if you’re creating it on, say, your non-retina iMac.” What is high-res to Sparkle?

Well the question is really what is high-res to your layout. In the image inspector there is a resolution meter that shows how your image resolution fits with the current on page dimensions, for example: http://sparkle.cx/docs/images/pasted-image-280.jpg

In general I’d say 3x pixel density is overkill but 2x is very common, so the image could be twice the width and height of the image’s largest size, and all other images will be downscaled from that.

Duncan

redfeather

26 Aug 2016, 5:48 pm

Well, I’m a print designer and tend to think in terms of dpi. I don’t know what dpi “3x pixel density” would be. Help.

Is this new way (to me) of handling images due to responsive layouts be one reason so many sites load so slowly these days? Are the majority of people using photos that are overly hi-res?

thx!

joette/redfeather

Duncan Wilcox

26 Aug 2016, 9:56 pm

Well, I’m a print designer and tend to think in terms of dpi. I don’t know what dpi “3x pixel density” would be. Help.

Since the size of pixels on screen is dependent on the screen resolution and size, there’s no way to consistently translate from pixels to inches, and by extent to dpi.

If you want to think in dpi terms for simplicity for a minute, you can pick a specific screen size and think it through with that. The dpi values would still be irrelevant in print context because it makes sense to pack pixels denser based on how far the screen typically is from your eyes. So for example the original iPhone’s screen was 163 dpi, more than a computer screen’s 72 to 96 dpi (or whatever) but very discernible pixels.

The 3.5” and 4” screens starting with the iPhone 4 doubled the horizontal and vertical pixel density, hence 2x, to 326 dpi. The reason it is referred to as 2x is the HTML coordinates and typesetting references are the same as those of the original 163dpi phone, but each point is a 4x4 pixel grid. Web content still addresses 320x480 points (or 320x568 for the 4” screen), and the pixels are on half-point coordinates. Or in the case of images, they’re shrunk to half size so each of the image pixels lands on a physical screen pixel.

The iPhone 6/6s 4.7” screen have a natural point size of 375x667, but the screen has double density so 750x1334 pixels (326 dpi like the original iPhone). The 6+/6s+ on the other hand have a 5.5” screen and 414x736 points, but Apple opted to use a grid of 3x3 pixels for each screen point so 1242x2208 pixels, so 3x retina, except they then downsample that to the actual screen resolution which is 1080x1920 pixels, so ultimately 401 dpi which isn’t quite 163x3. And interestingly there’s no way you’re going to get a perfectly sharp image (but your eyes won’t be able to see it).

This is an interesting guide to points, pixels and screen sizes in iPhones. There’s more with iPads and of course a hugely more varied scenario on Android.

https://www.paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions

On laptops and desktops 2x is generally in the 220 dpi range, which is considered retina (indistinguishable pixels) because they stand further away from your eyes than a phone or tablet.

The gist of all this is, it’s only practical to think of what the devices are capable of, and what a browser running on one of them will request, rather than thinking in terms of inches.

Is this new way (to me) of handling images due to responsive layouts be one reason so many sites load so slowly these days? Are the majority of people using photos that are overly hi-res?

“Slow” can mean a lot of things, often:

  • the page references an asset on a slow server (or is itself on a slow server), often a render-blocking asset like a stylesheet or a webfont, so your perception is its slower than it actually is (but it makes no difference actually)
  • the page is fed by a database of sorts, often a puny mysql which is overloaded (classic for non professionally run wordpress/joomla/drupal sites)
  • the page is actually downloading a shitload of stuff, which can either be lazy/dump optimization or huge ad/tracking packages (typical for sketchy news sites)

If properly built, the responsive image setup is actually no different for a desktop device and a lot faster for mobile devices. Amateurishly coded websites/webapps sometimes do have oversized images, though frankly it is one of the easiest problems to fix, it’s more about carelessness.

Duncan

redfeather

26 Aug 2016, 9:56 pm

I found the answer on Google. I haven’t had to update any of my personnel sites in a while! Good to know. If any other print people come across this 1x, 2x, 3x issue, here’s a good link to see what’s what: https://www.paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions

Thx all!

redfeather

26 Aug 2016, 11:49 pm

And… I just realized Duncan had the same link in his very detailed post to me. I didn’t see it because we apparently posted at the same time!!

Thanks Duncan, I very much appreciate your explanations and it has helped very much. I’m getting it!

Downloaded Sparkle and will take it for a spin.

joette/redfeather

JDW

27 Aug 2016, 1:57 am

Duncan is right to recommend “2x” (144ppi) at the largest pic size you will display. Three years ago I tested retina graphics extensively and found that 72ppi images look blurry and awful on retina iOS devices and Macs, but 144ppi looks very good, and 288ppi is great but almost too sharp. So 144ppi is the ideal in terms of look and filesize.

I usually can compress 144ppi JPGs to 44% in Photoshop without really seeing compression artifacts when displayed on a retina screen. But if there is a lot of tiny red text, I may need to take it up to a 50% compression to make it look nice. And when I need transparency, I tend to use PNG more than GIF because the filesize is smaller, and I use TinyPNG to compress my 24-bit PNGs into 8-bit files without noticeable loss in visual information.

So it seems that Sparkle will use your original pic as is, like a Freeway pass-thru image, when Sparkle displays that image at it’s actual 144ppi size, but Sparkle (or rather, the browser) will shrink the image when that same pic scales down on a responsive page, and Sparkle will present a lower rez 72ppi version of the pic when Sparkle wants to display it on non-retina machines. But how fuzzy or sharp that 72ppi image will be is not something I’ve tested in Sparkle, nor do I know if 8-bit PNGs will remain 8-bit PNGs (and so on) when Sparkle does it’s image manipulations. What I find in Photoshop is that if I make a 144ppi image to be 72ppi, it needs a little sharpening to look its best, unless I use the “sharper” resize antialias setting in Photoshop. So an extensive test in Sparkle would be necessary for one to know exactly graphics are output to both 72ppi and retina devices.

Duncan Wilcox

27 Aug 2016, 7:45 am

Duncan is right to recommend “2x” (144ppi) at the largest pic size you will display. Three years ago I tested retina graphics extensively and found that 72ppi images look blurry and awful on retina iOS devices and Macs, but 144ppi looks very good, and 288ppi is great but almost too sharp. So 144ppi is the ideal in terms of look and file size.

As mentioned “dpi” is an incorrect term. You might want to use it as a label but it’s rather abstract, 1x/2x/3x seem easier to remember. 3x would be 216dpi by that metric.

I usually can compress 144ppi JPGs to 44% in Photoshop without really seeing compression artifacts when displayed on a retina screen. But if there is a lot of tiny red text, I may need to take it up to a 50% compression to make it look nice.

The optimal JPG compression really depends a lot on the content, absolute figures like that aren’t a good rule of thumb. Optimal compression is still a bit of a research topic, Google built this tool which is a “psychovisual estimator” somewhat like mp3 uses psychoacoustics to compress best for music:

https://github.com/google/butteraugli https://github.com/google/butteraugli

That said the smaller the pixel size the smaller and less noticeable compression artifacts are, the more you can compress the same image, so if you’re compressing the non-retina 1x jpg at 60% you might compress the 2x at 50% and the 3x at 40%. For example http://silev.org/test/Retina-resize.html http://silev.org/test/Retina-resize.html shows this.

And when I need transparency, I tend to use PNG more than GIF because the filesize is smaller, and I use TinyPNG to compress my 24-bit PNGs into 8-bit files without noticeable loss in visual information.

GIF is definitely a file format that should not be used anymore, for any reason including animation. 8-bit PNG only has 1 bit for alpha which most of the time really looks ugly.

So it seems that Sparkle will use your original pic as is, like a Freeway pass-thru image, when Sparkle displays that image at it’s actual 144ppi size, but Sparkle (or rather, the browser) will shrink the image when that same pic scales down on a responsive page, and Sparkle will present a lower rez 72ppi version of the pic when Sparkle wants to display it on non-retina machines. But how fuzzy or sharp that 72ppi image will be is not something I’ve tested in Sparkle, nor do I know if 8-bit PNGs will remain 8-bit PNGs (and so on) when Sparkle does it’s image manipulations. What I find in Photoshop is that if I make a 144ppi image to be 72ppi, it needs a little sharpening to look its best, unless I use the “sharper” resize antialias setting in Photoshop. So an extensive test in Sparkle would be necessary for one to know exactly graphics are output to both 72ppi and retina devices.

Yes Sparkle is applying light sharpening when resizing images.

Ultimately I have to wonder if all the hard earned knowledge is something that is worth clinging on to. I just came across this yesterday:

http://monkeyphil.co/blog/i-used-to-build-websites http://monkeyphil.co/blog/i-used-to-build-websites

So essentially the £5k and up website market is gone. And that figure is falling, fast.

Duncan

grantsymon

27 Aug 2016, 10:55 am

On 27 Aug 2016, 1:57 am, JDW wrote:

Three years ago I tested retina graphics extensively and found that 72ppi images look blurry and awful on retina iOS devices and Macs, but 144ppi looks very good, and 288ppi is great but almost too sharp. So 144ppi is the ideal in terms of look and file size.

Computer displays/monitors aren’t interested in ppi or dpi. You need to forget this idea.

Computers are only interested in pixels. So if an image is 1000x1000 pixels, then it will display as such on any monitor. That’s it. Setting it as being 72, or 100, 1000 pixels per inch will change nothing. IOW, a 1000ppi - 1000x1000 pixel image, will not appear as a 1 inch square image on your monitor.

So just choose the pixel dimensions you want. That’s it.

Grant

JDW

27 Aug 2016, 10:03 pm

I disagree insofar as my eyes don’t lie, and I know how to save graphics in Photoshop and use them as pass through graphics in Freeway.

In Freeway, if I import a graphic into an HTML box (which makes it a “pass through” graphic) and I then checkmark the “high resolution” setting in the Inspector, that graphic will display at 50% size (50% of the pixel dimensions I set for that box in Freeway) but the graphics content be twice the resolution (i.e., 144ppi vs. 72ppi). And when I create my graphics in Photoshop, I set the dimensions (matched to the pixel dimensions of the HTML container box in Freeway) and choose 144ppi.

In that knowledge I had created a comparison in the past showing a 72ppi passthrough side-by-side with a 144ppi pass-through and a 288ppi pass-through. And the 144ppi looked best to my eyes and was a reasonable filesize too.

If I turn a blind eye to ppi, I will no longer what what I will get in the browser, at least not when I design in Freeway, using an HTML container box of known, fixed dimensions.

I fully understand that RESPONSIVE sites that scale graphics throw a monkey wrentch into this, but I have never created a responsive size that scales the graphics, so I am only thinking about a static “retina” graphic here that is viewed at 100% of its designed size in the browser.

Now with scalable graphics, it’s different insofar as you won’t know all the ways it will be scaled necessarily, but you still need a starting point. And I would assume my personal rule still applies with regard to the largest physical dimensions the graphic in question would be displayed. So for example, if the largest (default) size of the graphic is to be 1000x1000 pixels, then obviously that would be put into a box in the web design app that is half those dimensions in order to yield a 144ppi “retina” output (if the target output is intended for retina display devices). But if the web design app also saves a normal resolution 72ppi graphic for display on non-retina devices, then it would still display within the same physical dimensions but its resolution be would half the retina version. That would be the default, starting point size which would scale in the browser according to whatever algorithm the browser uses to scale graphics.

This is how I’ve always thought about graphics I design, and I see what I expect when I view my Freeway output in various browser on the Mac, Windows, and iOS devices, some with normal resolution and some with high-dpi screens.

So while some may dislike terminology, my eyes don’t lie. I know what I am seeing. I design for it with pixel perfect precision, and it looks good, and that satisfies me.

James Wages

grantsymon

27 Aug 2016, 11:43 pm

DPI and PPI are printing terms. A monitor is not a print. Every image that doesn’t fit your monitor space precisely at 100%, is re-sized (interpolated) either up or down - ‘on the fly’. There’s nothing else to know. DPI and PPI on a monitor are meaningless.

Grant

JDW

28 Aug 2016, 12:12 am

Terms have meaning as long as one gives them meaning. You are preaching semantics without speaking specifically of what I wrote in my previous post. As such, I stand firmly behind everything written in my previous post and would like to direct everyone’s attention to it.

James Wages

waltd

28 Aug 2016, 1:21 am

Terms have specific meaning, and it doesn’t matter if you want to assign a different meaning to them, that’s still not going to change their actual meaning.

If you remember printing ink on paper, there you need to know DPI, and it refers to the halftone dot pitch — the distance between the centers of the dots of ink that fool your eye into seeing a continuous tone image.

Digital photos have a pixel dimension in the X and Y coordinates. They also have a header (metadata) that nominally sets the PPI (pixels per inch) of the file, but that’s just the divisor. If you have a 1000 pixel wide image, and it’s set to 200 PPI, that doesn’t make it higher or lower resolution, that just means that an application that cares about PPI will interpret it as being 5 “inches” wide, but since displays haven’t been 72PPI since they came with beige cases, that doesn’t mean 5 actual inches, either.

Web browsers do not care about inches. They only care about pixels. And even if you have a Retina screen, the browser still thinks it is painting a normal resolution screen. It just gets to use 4 (or more, if it’s an iPhone 6s Plus) actual pixels for each “pixel”, and the operating system deals with those details.

When you check that box in the inspector that marks an image as high resolution, all you are doing is telling Freeway to make the image twice as large (in pixels) when it resamples the original. The CSS tells the browser to make the image 50% of its actual pixel dimensions, and that means that twice the actual image data is available for the OS to fill in the 4 actual pixels for every “pixel” on the screen.

This actually gets us back to printing ink, if you think about it. Remember someone telling you that you needed to make your image file twice the PPI of the DPI of your dot pitch? That was for the same reason, because if you didn’t have enough resolution, you would not get a clean halftone.

Walter

On Aug 27, 2016, at 8:12 PM, JDW <[email protected]> wrote:

Terms have meaning as long as one gives them meaning. You are preaching semantics without speaking specifically of what I wrote in my previous post. As such, I stand firmly behind everything written in my previous post and would like to direct everyone’s attention to it.

James Wages

Freeway user since 1997

http://www.walterdavisstudio.com

JDW

28 Aug 2016, 9:24 am

I haven’t assigned a different meaning to the same terms I’ve been using for decades. The only change I made in the past is in going from DPI to PPI lingo, and even we Freeway users had talks about that subject at the time with folks from SoftPress.

I understand your way of thinking. But all I have been saying is that I prefer to have a MEANINGFUL “frame of reference” for my brain to make perfect sense of pixel data, in light of the resolutions I wish to design for.

The following screencast with voiceover clearly shows why I said what I said in my previous two posts:

https://youtu.be/NDD4fv2QUk8

Thanks,

James Wages

Duncan Wilcox

28 Aug 2016, 9:27 am

I fully understand that RESPONSIVE sites that scale graphics throw a monkey wrentch into this, but I have never created a responsive size that scales the graphics, so I am only thinking about a static “retina” graphic here that is viewed at 100% of its designed size in the browser.

In some circumstance Sparkle can now create 30 variants of the same image. An image gallery with 10 images and 10 thumbnails would have 600 images. Would you be pixel peeping every one of those?

Duncan

JDW

28 Aug 2016, 10:00 am

No, Duncan. I probably wouldn’t. Then again, I don’t use image galleries.

Did you watch my screencast and understand my explanation though?

https://youtu.be/NDD4fv2QUk8

James W.

Ashley

28 Aug 2016, 10:11 am

There is currently a browser rendering issue with retina images in recent versions of Webkit browsers when viewed on non-retina displays that leads to significant image softening. Safari seems worse than Chrome.

The fix (sort of) is to add some page CSS until the developers fix this properly, so it works like FireFox.

I’ve thrown up a couple pages showing this problem. You can see it at http://www.sunnymede.net/css/ and then follow the link to http://www.sunnymede.net/retina/ for comparison.

Ashley

Rapidweaver 7.5.6, Blocs 3.2.1

https://greatwebdesign.uk/

Author of Colour Management Pro https://colourmanagementpro.com

grantsymon

28 Aug 2016, 6:02 pm

On 28 Aug 2016, 12:12 am, JDW wrote:

Terms have meaning as long as one gives them meaning.

Quite hard to have a meaningful discussion with someone who is inventing their own meanings. :) :)

Whatever works for you is fine. I was simply pointing out that you are misunderstanding what ppi and dpi mean as far as computer screens/monitors are concerned. It is a massively common misunderstanding, so don’t feel too concerned about it.

Grant

JDW

29 Aug 2016, 12:16 am

Ashley, I have discovered the same. On my Freeway sites, I have all my graphics changed to “High-Resolution” (2X, 144ppi, what have you), and I have noticed that my graphics are soft (non-ideal) in most browsers.

The solution here is for our web design tool to auto-generate sharpened 1x/72ppi/NormalRez graphics along side the Retina graphics, then sense the resolution of the viewer’s device and display the appropriate graphic. Freeway does NOT do that for us. But it seems that Sparkle does do that?

And again, for those who think ill of me for daring to use “ppi” please watch my screencast to see the logic behind using it as a mere “frame of reference for intelligent design purposes.”

https://youtu.be/NDD4fv2QUk8

As you can see in the screencast, that lingo is not exclusive to me. You’ll find it in any graphics editor. It makes a lot more sense to me than merely saying “2X” because when you say that you are left wondering “2X of WHAT?”

Thanks,

James Wages

Thomas Kimmich

29 Aug 2016, 8:50 am

@ Duncan

Do you now know why I wrote the allegedly offending topic above? The one you mentioned “against Sparkle”? The one I said “having nothing to do with Sparkle … having to do with results?”

“Even when the web-world thinks having the gist - a Freeway-user knows better!”

I basically was under the impression having understood “responsive concept”. But after reading all this stuff I’m not that sure anymore.

Very confusing - to be honest. And a good argument for Sparkle: Let the experts there decide what’s best. And I’m sure it’ll be a very good choice.

Cheers

Thomas

Shouting this from the corner of the room (although I should be banned from it anyway).

Thomas Kimmich

Kimmich DigitalMedia

http://www.kimmich-digitalmedia.com

T.+49(0)7404-914 384

Somewhere in the South of Germany

Duncan Wilcox

29 Aug 2016, 10:01 am

Very confusing - to be honest. And a good argument for Sparkle: Let the experts there decide what’s best. And I’m sure it’ll be a very good choice.

I figure you mean well. The point is the market for selling a handmade website doesn’t sustain the cost of keeping up with technologies.

Duncan

Ashley

29 Aug 2016, 10:29 am

@JDW In testing I discovered I could obtain smaller file sizes and sharper results on non-retina displays with highly compressed retina resolution images thanks to the vagaries of pixel density. They also look great on retina displays where normal resolution images look soft.

All was well until changes were made a few months ago to webkit browsers and suddenly everything was mushy on Safari or Chrome. The CSS script I applied just about fixes it. I’ve not used Sparkle but this problem is browser based, therefore it’s the same for everybody.

In Rapidweaver there are various stacks and scripts that will load a non-retina image initially then serve up a retina version if they detect a retina resolution image. I tried a couple options but was never entirely satisfied.

Try visiting http://www.sunnymede.net/retina/ in Safari and drag the browser window with your mouse to make it wider or narrower. You should instantly see the images become sharper but the moment you release the mouse it becomes soft again.

I have reported this problem to both Google & Apple and I know Apple at least were taking a look, but nothing has yet been done. FireFox always looks great.

In theory, yes we could provide standard resolution images to non-retina displays, but that’s a step backwards when you can achieve smaller file sizes and sharper images using one set of retina ready images on all screens. Webkit needs to sort this out.

On a side note, I have found that automated tools for downsizing retina ready images tend to deliver poor results. The best method I have found is to save for web in Photoshop at double the intended size on screen, since Photoshop defaults to 72ppi, then preview at 50% and bring down the compression slider until the visual quality starts to suffer.

There are lots of additional factors to consider if performance is an issue, such as the way files are delivered via http or http2 and CloudFlare Pro offers a brilliant algorithm for compressing images without loss of quality, but that is a whole different topic.

Ashley

Rapidweaver 7.5.6, Blocs 3.2.1

https://greatwebdesign.uk/

Author of Colour Management Pro https://colourmanagementpro.com

Duncan Wilcox

29 Aug 2016, 10:43 am

All was well until changes were made a few months ago to webkit browsers and suddenly everything was mushy on Safari or Chrome. The CSS script I applied just about fixes it. I’ve not used Sparkle but this problem is browser based, therefore it’s the same for everybody.

In Rapidweaver there are various stacks and scripts that will load a non-retina image initially then serve up a retina version if they detect a retina resolution image. I tried a couple options but was never entirely satisfied.

Sparkle does indeed use state of the art techniques to load the appropriate image, based on the browser used. This is more or less what it boils down to, the mix of HTML, CSS, Javascript and experimentation to nail this is quite a bit of work:

  • on Chrome 25+, Safari 10+ webp images are served directly, these are about 25% smaller than corresponding JPGs or PNGs (this is via picture element with mime type qualifier)
  • on Safari 9+ and Firefox 38+ the exact image, both in resolution and density, is served to the browser, and no other unneeded asset is downloaded (this is via the picture element)
  • on earlier browsers the smallest image of any device is specified in the HTML, and as soon as Javascript kicks in the correct size/resolution image is loaded (this is equivalent to using picturefill but a lot more lightweight)

If you’re doing this manually you’ll be tempted to brush it off and say “meh that’s good enough”. In that case… more power to you?

There are lots of additional factors to consider if performance is an issue, such as the way files are delivered via http or http2 and CloudFlare Pro offers a brilliant algorithm for compressing images without loss of quality, but that is a whole different topic.

http2 actually only interleaves requests potentially reducing latency (but since servers aren’t optimized for short jobs it actually ends up increasing latency of smaller resources on average), CloudFlare’s Polish does compress images but most likely nothing you couldn’t do yourself.

Duncan

Ashley

29 Aug 2016, 11:10 am

My reference to performance and servers was more about the way items can be downloaded concurrently, so a web page that weighs 1mb may not necessarily load any slower than one of 500kb or at least to within a few milliseconds. I also gather some of the traditional best practices for page speed performance are potentially counterproductive for http2.

CloudFlare’s Polish + Jpeg is helpful for those who would struggle to all of this on their own. Many people just save a Jpeg without too much thought and upload it to the server, so Polish might save well over 50% on the image size with the added bonus that images are cached near the user via the CDN. Mirage is another trick they offer for mobile.

I’m quite impressed Sparkle is taking those steps in the background for image handling, assuming the final results are quite good. It’s certainly an advanced approach for built in functionality.

Ashley

Rapidweaver 7.5.6, Blocs 3.2.1

https://greatwebdesign.uk/

Author of Colour Management Pro https://colourmanagementpro.com

Thomas Kimmich

29 Aug 2016, 12:30 pm

@James

Freeway’s “Retina” checkbox was never intended to “create” retina images, it’s more likely there to indicate Freeway to use an image twice the pixel-width (dimension) within your artwork.

Lingo

The standard screen definition for images in web is 72 dots per inch.

Retina

It is still 72 dots per inch, but twice the dimension of your image.

In Freeway

Assumed your dog.jpg shall be the hero-image of your page. It’s 960px wide and has 72dpi. Your page-width in Freeway is as well max-width: 960px.

As standard you’d place it and good.

For retina, you’d now have to double its dimensions, using whatever application. You end up in a (pretty blurry) 1920px wide - but still 72dpi - image. Save it as dog-large.jpg.

Now draw your HTML item and pass-through your dog-large.jpg. Initially, the html-frame will explode the dimensions of your page-width, right? Now check the retina check-thing and it will shrink down to the expected 960px.

Set the width to 100% (height auto) and you’re even responsive.

Conclusion

Preferably leave everything on 72dpi. Figure out the pixel-width and argue:

Twice (1.5, 3x whatever) of the given pixels!

If your reaction is now:

“These look great. I’d wish it would be a bit more complicated”, you’re in luck.

Because the challenge for now is to ask yourself: Wouldn’t it be better to serve different varieties of this image and let the browser decide which one to take? And that’s what Duncan is referring to and Sparkle manages for you - and Freeway never did. We had more the “either .. or” approach.

To me it’s an authors responsibility - and not a machine’s. But that’s another chapter of the book. And yes - with Sparkle you’d be in a safer space.

Cheers

Thomas

Thomas Kimmich

Kimmich DigitalMedia

http://www.kimmich-digitalmedia.com

T.+49(0)7404-914 384

Somewhere in the South of Germany

waltd

29 Aug 2016, 2:00 pm

All true, except two things — it’s pixels per inch (dots are for ink), and the browser really does not care about the ppi metadata. It shows pixels. Save the same file at 72ppi or 144ppi or 288 ppi — put them side-by-side as pass-through (or just hand-code it) and you will see two or three identical images. The CSS (what you get when you click the High-resolution check-box) defines what size an image should display at, and the rendering engine in the browser resizes the image on the fly to fit.

Here’s an example to prove the point. View source — and download the images and open them in Photoshop to see what I am talking about here.

http://scripty.walterdavisstudio.com/annie

Walter

On Aug 29, 2016, at 8:30 AM, Thomas Kimmich <[email protected]> wrote:

It is still 72 dots per inch, but twice the dimension of your image.

Freeway user since 1997

http://www.walterdavisstudio.com

redfeather

29 Aug 2016, 5:16 pm

I am following this discussion with much interest and trying to “get it”. Very confusing for a print-oriented girl. Was easy to understand web images before Responsive came along. The lingo was familiar to me, as others have said.

@Duncan: Using Sparkle, if I save my images as 288 ppi will that be a safe bet or ? The images need to look good.

Thanks to everyone who is contributing to this thread. It’s helpful and very interesting!

joette/redfeather

waltd

29 Aug 2016, 5:58 pm

Again, the PPI is not relevant at all. When you save a PNG or JPEG or GIF from Photoshop, using the Save for Web and Devices exporter, the PPI header is stripped out (along with a lot of other metadata) because it is just going to be ignored by the browsers. When you open a file that has come out of SFW in Photoshop, it will appear to have 72ppi, but that’s just because that’s what Photoshop’s default is for images that don’t have a specified PPI.

So the only relevant and important measure is pixel dimensions (width and height), not PPI. If you want your image to take up half the width of your page, and you’ve set your page to 960px wide, then you will need an image to display at 480px wide (at 72ppi), so you need to make the actual image file 960px wide to get @2x size, or 1440px wide to get @3x (for the iPhone 6 Plus). Anything larger is a waste, although it sounds like Sparkle does a nice job of down-sizing images to the target dimensions.

Walter

On Aug 29, 2016, at 1:16 PM, redfeather <[email protected]> wrote:

I am following this discussion with much interest and trying to “get it”. Very confusing for a print-oriented girl. Was easy to understand web images before Responsive came along. The lingo was familiar to me, as others have said.

@Duncan: Using Sparkle, if I save my images as 288 ppi will that be a safe bet or ? The images need to look good.

Thanks to everyone who is contributing to this thread. It’s helpful and very interesting!

joette/redfeather

Freeway user since 1997

http://www.walterdavisstudio.com

redfeather

29 Aug 2016, 6:27 pm

@Walter: So, if the image were to fill the entire page for example, and if using the one image for everything approach Sparkle seems to have:

If the page size was 960px wide, the image would need to be 1920px wide for 2x?

For image galleries, I would start with the largest size a particular image would be, not the thumbnail in the gallery and do the math to figure out how much of the page it would take up and make it twice that size? The thumbnails would be figured out the same way — the amount of page they take up x 2. Yes?

Thanks! joette/redfeather

Duncan Wilcox

29 Aug 2016, 6:32 pm

@Duncan: Using Sparkle, if I save my images as 288 ppi will that be a safe bet or ? The images need to look good.

Well I guess yes. Ultimately an image that as a pixel measurement is twice as wide or tall as the space it need to fit will be ok. 288 dpi, assuming your convention of 72 dpi, would be 4x, so more than enough. Anyway as mentioned Sparkle has a resolution indicator that helps understand this.

Duncan

Duncan Wilcox

29 Aug 2016, 6:33 pm

If the page size was 960px wide, the image would need to be 1920px wide for 2x?

That’s correct.

Duncan

grantsymon

29 Aug 2016, 6:54 pm

On 29 Aug 2016, 2:00 pm, waltd wrote:

All true, except two things — it’s pixels per inch (dots are for ink), and the browser really does not care about the ppi metadata.

What’s amazing here, is that only you and I who seem to understand this Walter! Even Thomas doesn’t. :) :)

From my point of view, I’m always amazed that seasoned photographers (chums) who have been doing their own websites for years, don’t understand and not only that, like James they keep insisting that the way they work it, is correct. (Of course, it doesn’t really matter most of the time if you don’t understand, if your ‘way of understanding’ produces the same result).

Anyway … just to reiterate (because repetition works :) ) computer monitors and operating systems don’t care about ppi or dpi. All they care about is pixels.

Grant

Ashley

29 Aug 2016, 7:12 pm

@grantsymon It’s pretty clear to me and not complicated to grasp, but sometimes you have to explain things in terms that people can understand when they have been given inaccurate or conflicting information for 20 years. Most people never had to think about this before retina came along.

Ashley

PS Your website seems to be down and gives a 503 error.

Rapidweaver 7.5.6, Blocs 3.2.1

https://greatwebdesign.uk/

Author of Colour Management Pro https://colourmanagementpro.com

grantsymon

29 Aug 2016, 7:19 pm

On 29 Aug 2016, 7:12 pm, Ashley wrote:

@grantsymon It’s pretty clear to me and not complicated to grasp, but sometimes you have to explain things in terms that people can understand when they have been given inaccurate or conflicting information for 20 years.

That’s very true Ashley

Most people never had to think about this before retina came along.

Well they should have, but didn’t notice the confusion so much, because the ppi/dpi thing was the same pre-retina.

PS Your website seems to be down and gives a 503 error.

Thanks for the heads-up. It’s working for me, but it did load slowly. I guess the host may be doing maintenance.

Grant

DeltaDave

29 Aug 2016, 7:28 pm

It’s working for me, but it did load slowly.

Loaded fine for me but I wish I hadn’t visited!

Being on a diet and looking at great pictures of great food don’t mix.

D

Glasgow, Scotland

iMac 27 5K El Cap and Pro Final

Ashley

29 Aug 2016, 7:30 pm

It’s working fine for me now. Must have just been a temporary glitch with the server.

Ashley

Rapidweaver 7.5.6, Blocs 3.2.1

https://greatwebdesign.uk/

Author of Colour Management Pro https://colourmanagementpro.com

grantsymon

29 Aug 2016, 9:46 pm

On 29 Aug 2016, 7:28 pm, DeltaDave wrote:

Loaded fine for me but I wish I hadn’t visited!

Being on a diet and looking at great pictures of great food don’t mix.

Well, you’ve only got yourself to blame Dave, cause if you hadn’t given me all that help, the damned site wouldn’t have been working at all!! :) :) :)

Grant

JDW

30 Aug 2016, 12:12 am

Well… Quite a lot of replies since yesterday. After reading them all, I remain satisfied with my own personal “frame of reference” as I describe in my screencast:

https://youtu.be/NDD4fv2QUk8


Thank you, Duncan, for point out the details on what Sparkle can do with regard to handling hi-rez graphics for us.


Walter, I viewed your little girl photos, but unfortunately, the lens did not focus sharply on her, so all of the graphics look blurred. If you start off with a razor sharp image to begin with, then retina depth will be more readily perceptible.


Thanks to all participants for this excellent discussion on graphic resolution!

James W.

waltd

30 Aug 2016, 12:31 am

This example had nothing to do with retina, but rather the fact that no matter what “resolution” you set in Photoshop, 1,000 pixels is 1,000 pixels is 1,000 pixels. If the browser cared about PPI, then you would have seen the top image look large and blurry, the second one look half its size and sharp, and the third one look a quarter the size and really freakishly sharp. But despite the fact that the three images were set to different PPI, they were all the same size in a browser.

That’s all I was trying to explain.

Walter

On Aug 29, 2016, at 8:12 PM, JDW <[email protected]> wrote:

Walter, I viewed your little girl photos, but unfortunately, the lens did not focus sharply on her, so all of the graphics look blurred. If you start off with a razor sharp image to begin with, then retina depth will be more readily perceptible.

Freeway user since 1997

http://www.walterdavisstudio.com

MarkG

25 Oct 2016, 7:27 pm

@ Duncan, sorry I’m a bit late to the table. I’m not a web designer as such have created websites for teaching and motivation purposes in my business. I’ve been using FW since 3Express, used FW5.5Pro quite a lot and bought many actions from many of you wonderful folk on this forum. I did buy FW 7 but have never got around to using it. Looking for a tutorial on FW7 I discovered yesterday the sad demise.

Having gone through this thread (and many others) it looks like I’m going to have to jump in with either Sparkle or Blocs or both.

My challenge is this: I used and still do use Max’s WebYep for CMS which is perfect for me as my programming ‘skills’ are limited to copy and paste. I don’t have the time to learn the language. The CMS’s that appear in Blocs appear to be very pricey and over complicated to me.

Is there any way I can incorporate WebYeb into Sparkle (or does anyone know how?).

Many thanks in anticipation

Mark

Want http://2BFree.co.uk?

17” MacBook Pro. Sparkle. Formerly Freeway 5.6.1.

Duncan Wilcox

26 Oct 2016, 11:00 am

Mark, Sparkle is currently focusing on high performance static sites, a very steep road we’re still climbing. CMSs introduce too many compromises, such as replacing responsive images with plain non-optimized jpegs, lacking layout awareness and generally undoing the kind of optimization Sparkle is doing.

Our goal is fully visual page editing within Sparkle. The sort of integration CMSs require, and the complexities and abstraction that come with it, don’t quite work in that context. Not to mention the abysmal editing UI on the server side that most of these CMSs sport.

Duncan http://sparkle.cx http://sparkle.cx/

redfeather

28 Oct 2016, 12:26 am

Greetings all,

I am finally getting around to try Sparkle on a new site I need to create. I’ve looked through the documentation and I’ve skimmed through this thread, so forgive me if it’s blatantly there and I am blind: Does anyone know how you specify the page size? In FW we could specify the page size (width/height).

Many thanks and happy Thursday eve, joette

redfeather

28 Oct 2016, 5:05 am

Never mind! I found it. Default for desktop is 960. Looks like it can be changed to 1200, nothing in-between. However, this might be a limitation of the free version which is what I’m using in case I need more than 5 days to play with it.

Best, joette

On 28 Oct 2016, 12:26 am, redfeather wrote:

Greetings all,

I am finally getting around to try Sparkle on a new site I need to create. I’ve looked through the documentation and I’ve skimmed through this thread, so forgive me if it’s blatantly there and I am blind: Does anyone know how you specify the page size? In FW we could specify the page size (width/height).

Many thanks and happy Thursday eve, joette

MarkG

28 Oct 2016, 8:46 am

@ Duncan,

thanks for the reply, I totally understand. However, I’ve managed to achieve what I wanted using the free version and using the embed code to place an iFrame link to the site that enables me to do my editing. It’s a very similar to your documentation site at http://sparkle.cx/docs/pages.html.

Did you create this in Sparkle, and if so, how are you creating this page? It appears to me that the info in the right hand panel is all that changes and the titles on the left are static? Is it done via anchors or some other way. Remember I’m not a programmer.

Am loving the simplicity and speed of Sparkle, achieving in minutes what would have taken me hours in Freeway. There are obvious limitations in control e.g. I could create some great text effects in Freeway using glows and shadows etc, but I realise the text would have been a graphic, but still hypertext linkable. Any plans for this in the future with Sparkle?

Finally, do you have any plans for starting a Sparkle forum? I feel a bit cheeky using FWT, but realise others may benefit from my lack of knowledge/experience. I’m very confused by the purpose of adding sections in the page add panel for example, or is this just a feature of the paid version. Your documentation touches on them but I don’t know how I would use them?

@ redfeather,

You aren’t limited to just a 5 day trial with the free version of Sparkle, it is time unlimited.

Want http://2BFree.co.uk?

17” MacBook Pro. Sparkle. Formerly Freeway 5.6.1.

MarkG

28 Oct 2016, 8:52 am

On 28 Oct 2016, 8:46 am, MarkG wrote:

@ Duncan,

Did you create this in Sparkle, and if so, how are you creating this page? It appears to me that the info in the right hand panel is all that changes and the titles on the left are static? Is it done via anchors or some other way. Remember I’m not a programmer.

@Duncan again,

it occurred to me to show you the effect I’m using WebYep to create within the Sparkle designed site: www.2BFree.co.uk. As you can see the site is just a mock up, but the iFrame links to another site which I no longer use, created with FW5.5. The beauty of Sparkle is it’s so easy to use. When I haven’t used FW for a year or two (as in this case) I have a huge learning curve to go through, not to mention finding all the data and actions for the site, especially after I’ve ‘cleaned’ and reinstalled my OS!

Want http://2BFree.co.uk?

17” MacBook Pro. Sparkle. Formerly Freeway 5.6.1.

Duncan Wilcox

28 Oct 2016, 9:04 am

Hi Joette,

I think Freeway users are used to do it this way, we’ve heard the request for setting an exact page width a few other times. This is reminiscent of when websites had a small “optimized for 1024x768” sticker on them. The web is now overwhelmingly mobile, there’s no going back.

In general what you want is not let the content determine the page width, rather to have make the content work with any page width.

In Sparkle we decided to adopt the fixed page width layout because it is immediately understandable for anyone with a design and print background, and it has a predictable behavior. This isn’t in contrast with the above because you can have multiple fixed width layouts and let the visiting browser automatically pick the layout that fits it best.

So why did we pick 1200/960/768/480/320? Because they are by far the most common browser widths, if you were to chart it out you’d see for example a big fall between 960 and 1000 pixels and another after 1200. This suggests that you should optimize your content for those widths, and not pick some width in between which would be sub-optimal for users on either side.

To partially refine what I wrote above, Sparkle isn’t precisely only fixed width, there are several element types that can extend to the page edges, so you can have a full width image or gallery or map, for example. Also we are working on adding this ability to more elements and blur the lines of fixed/fluid width.

There’s no difference in the purchased version, though as @markg mentions there’s no time limit on the free Sparkle version.

Duncan http://sparkle.cx http://sparkle.cx/

Duncan Wilcox

28 Oct 2016, 9:11 am

Hey Mark,

the documentation page is indeed built in Sparkle. The navigation on the left is simply a menu element with a vertical orientation, it auto-populates from the website pages and it’s made visible on all pages. The outcome is that it’s possible to add a new page, which will show up in the menu in all pages, and just add the text block on the right side.

Regarding text effects we definitely should add CSS shadows, hopefully we’ll get around to them soon.

We do have a plan to add a forum but it’s held up for a few reasons, agreed FWT isn’t the best venue for this.

In Sparkle a section is a collection of pages, the purpose of this is threefold:

1) you visually organize the site outline 2) when you have a menu that is populated from the website structure (as opposed to manually configured), the section becomes a submenu 3) when you show elements in multiple pages, Sparkle’s version of master pages, you have the option to show them in the whole site or just in the current section, which is useful when a section has something visually distinctive that you can then edit from one of the section pages and have show up identically throughout the section.

Duncan http://sparke.cx http://sparke.cx/

MarkG

28 Oct 2016, 9:31 am

HI Duncan,

thanks for the super quick response. I need to play around a bit more, but again I love the creativity aspect that you’ve created with Sparkle, so that all sites don’t need to look the same (or similar). I look forward to sharing some of my sites in the future, created by Sparkle.

I’ll be now buying Sparkle, but was a bit confused by the moment that if ordered on Apple app store it can be used in iCloud, but not if bought directly from your site? Are you intending to create an iPad version?

thanks again

Mark

Want http://2BFree.co.uk?

17” MacBook Pro. Sparkle. Formerly Freeway 5.6.1.

Duncan Wilcox

28 Oct 2016, 9:43 am

It is probably time to change that text, it says:

Apple has chosen to limit iCloud use to Mac App Store apps, so if you require iCloud you should purchase the Mac App Store version.

This was true in MacOS X 10.9, but was progressively relaxed and the only actual difference is that with the App Store version of Sparkle you get a Sparkle folder inside iCloud, with the version from our site you need to browse to iCloud Drive and save a document there directly.

While we are super careful to avoid doing things that would prevent an iPad version of Sparkle from happening, it needs to make sense from a business point of view. So who knows, perhaps.

By the way the discount offer from our site still stands:

https://secure.sparkle.cx/?ref=FIFTEEN

Duncan http://sparkle.cx http://sparkle.cx/

MarkG

28 Oct 2016, 9:53 am

OK I understand. I’ll take advantage of your discount and hope for your continued success. I’ll be pointing all my mac friends your way too :)

Think I’ve sussed the menu and sections bit now - so easy. That would’ve taken me hours in FW!

Thanks again for your help

Want http://2BFree.co.uk?

17” MacBook Pro. Sparkle. Formerly Freeway 5.6.1.

redfeather

28 Oct 2016, 7:44 pm

Hi Duncan,

Thanks much for your replies!!! I do have the free version and I do know there is no time limit on it, which is why I have the free version and not the trial.

Questions:

It doesn’t seem possible to change the page width to 1200 in the free version, tho I might not have realized how yet. And, I’m not sure I understand the explanation about page widths. Are you saying whether I create a page at 960 or 1200, the browser will handle it’s view? When I preview the page created at 960 it is a tiny thing! Whereas my FW sites that were made with a 900 something size look quite large in the browsers. I would prefer to have a larger presence than what I’m seeing at preview.

Fonts: I’ve read through the Fonts and Text documentation. I’ve attempted to load a webfont and there wasn’t any indication that it actually loaded. The area on the Font Panel for custom webfonts didn’t show the font after I selected in on my HD & clicked “open”. However, when I preview the page in my browsers that font looks fine, whereas others I don’t have webfonts for change in Firefox. Is that the only way to tell if it’s loaded?

The Active mark next to the font name doesn’t mean it’s OK for web, just “active” on the layout, correct? I surmise this because it’s showing one of the fonts I use as active but it’s the one that changes in Firefox.

Looking at the Font Panel, how do we know if a font is sourced from Google’s webfont index?

Thanks so much for your replies. It’s a different approach than FW, and now I need to read through to understand how Sparkle handles Master Pages or what that becomes in Sparkle.

So far, I think this is pretty cool and a few more days of trying out, will probably result in a purchase. From a designer’s point of view, you’ve thought of many things to address, make easy, make familiar as to our usual tools of the trade, and I very much appreciate that!

I know many folks here like to code, yet I am not one. I paid my dues ages ago as a Software Engineer until I woke up and went back to my first love, Art & Design which I now have been doing for even longer ages… I love being able to focus on the design and not deal with the coding. Too much of a brain shift otherwise. So far, Sparkle is pretty sweet. And hello, your support here is amazing and creates confidence in the product.

Thank you!!!

joette / redfeather

redfeather

31 Oct 2016, 7:58 pm

Duncan,

I’ve moved on in Sparkle and figured out most of the questions I had previously however, I am having issues with fonts line breaking where they shouldn’t, which is very important on the home page with display text. I sent an email yesterday to “feedback” at Sparkle with a PDF showing how it looks within Sparkle and what happens in browsers.

Today, I made the words all the same color and the text is fine. Is this a bug? Why would the text line break when a word is a different color?

More font questions: Several of my own webfonts do not include TTF/OTF - only WOFF, EOT, SVG. Consequently I cannot use them in Sparkle so am forced to use Google fonts which is a bummer when one needs a certain look. Since we cannot get into the code at all - a feature FW has and would be nice to have here — what plans are there to allow for these fonts in Sparkle? Currently, we can only load them if we also have the TTF/OTF version too.

One more thing, it would be really nice to have ruler guides. Might that be in a future release? Yes, the smart guides can help to line up and then there’s the align tools but sometimes one needs to have a ruler guide to see if text is lining up across the page. There is currently no way to do that unless I draw a box across and use that as a guide. Rulers would be really nice.

Thank you!

joette

Duncan Wilcox

2 Nov 2016, 10:56 am

Hi Joette,

apologies for the late answer. In general if there’s a layout discrepancy between the in-canvas view and the browser output we will need you to send the .sparkle file that shows the issue and we can investigate. I agree the color shouldn’t make a different, so perhaps there’s some combination of font and exact text frame width that’s causing the problem. We generally solve these quickly and send out a pre-release of Sparkle or a workaround when this happens.

The problem with missing TTF/OTF is Sparkle is rendering the canvas not via HTML but via native code, and we currently don’t have a way to import a woff. I’m not really sure how code access would help you here, as you might get the effect you need in the final published site but you still can’t show the fonts in canvas.

Thanks for the suggestion about rulers. They’re on our list already, but we’re always happy to hear new ideas.

Duncan

steve farber

11 Dec 2016, 1:59 am

Duncan, Excuse me if I am re-asking. Did I understand correctly that there is no way to include a way for my client to make simple edits to areas of text or to upload a photo to a designated block? A simple content management system is a requirement of MANY clients these days and would be something I would need to make Sparkle my go-to web design software.

Duncan Wilcox

12 Dec 2016, 11:34 am

Hi Steve,

I don’t recall you asking, sorry for dropping the ball on this. Sparkle doesn’t include a CMS and doesn’t integrate with any either.

There are several reasons for this. One is that we haven’t found a CMS that will produce code on par with Sparkle’s, particularly for responsive images. Another is the CMSs I have seen have a really terrible, decontextualized interface for the end users. Yet another is Sparkle’s code output is a very tight knit combination of layout and content, so a seemingly simple edit could end up breaking the layout in a way that is not understandable for the end user, not to mention no integration with the built-in style or color management.

Sparkle is itself a CMS (it lets you manage content afterall) that is simple enough for end users to use directly, and many do, not unlike people not using a consultant to build their Powerpoints and Keynotes.

So in essence we are pushing this feature back as we develop other aspects of Sparkle further. Hopefully in the not too distant future it will make sense to revisit this and find a proper solution.

Thanks, Duncan http://sparkle.cx

steve farber

12 Dec 2016, 4:16 pm

Thank you for the reply Duncan. That would be the deal breaker for me then. I want to offer my clients the opportunity they desire to make simple modifications on their own, such as edit text or images in designated areas. But I do not want to allow them access to the whole site. Using Sparkle as a CMS is great for me, but not for my clients. Thank you.

Steve Gunther

14 Dec 2016, 3:58 am

Thanks to all for this thread. I maintain my current Freeway sites, but time will come when I have to move forwards. I looked at Sparkle, and thought, I will wait for it to evolve. I am much clearer now on the issues at stake. And for me its simple. I dont want to code. So, no coding, no problem. And I appreciate Duncan’s time and attention to issues raised. That kind of responsiveness makes a difference in my confidence about jumping platforms. One of the things stellar about Freeway was FreewayTalk, and the example set by the Freeway staff, who would answer all queries and problem, in a timely manner, in great detail. I consider the best quality tech-support I have EVER experienced. It made a huge difference in learning Freeway, dealing with problems I came across. I hope that Sparkle will be able to be this responsive, as is evidenced by Duncan on this forum. And yeah, Duncan, your help guide needs to be a little more detailed and searchable. I will be taking advantage of the discount…

OmarKN

16 Jan 2017, 9:28 pm

Hi and good day,

Finally got a chance to learn about picture dimensions … in the Retina world.

Thank you for all the fantastic input & assistance from the FRW community over the years with FRW and its entanglements!

Having now moved on to Sparkle 2.1 what I like is the relative ease with which beautiful webpages can be designed - with live preview and responsiveness as is.

Yes it’s the Smartphone era we’re in and if the bells & whistles aren’t there it’s quite ok for me. (And the masses are on Facebook anyway :-)

/ with best regards, Omar KN Stockholm, Sweden

iMac 27” i5 (2015); MacOS 10.11.x, FRW Pro 7.x, Graphic 3.0, GraphicConverter9, xScope, Sparkle 2.2

Stockholm, Sweden

………………………………………………..

rsma

16 Jan 2017, 10:56 pm

Hello, OmarKN:

Regarding Sparkle 2.1, where did you get it? It doesn’t seem to be on offer here (U.S.). I have a 2.0.6. The “check for updates” menu choice says that version is the latest.

Thanks for any info you can give.

On Mon, Jan 16, 2017 at 4:28 PM, OmarKN <[email protected]> wrote:

Hi and good day,

Finally got a chance to learn about picture dimensions … in the Retina world.

Thank you for all the fantastic input & assistance from the FRW community over the years with FRW and its entanglements!

Having now moved on to Sparkle 2.1 what I like is the relative ease with which beautiful webpages can be designed - with live preview and responsiveness as is.

Yes it’s the Smartphone era we’re in and if the bells & whistles aren’t there it’s quite ok for me. (And the masses are on Facebook anyway :-)

/ with best regards, Omar KN Stockholm, Sweden

Duncan Wilcox

17 Jan 2017, 12:25 am

Hi Ranald,

Sparkle (co)developer here. Really sorry about the tease, we actually give out 2.1 betas when there’s a critical bug that the beta fixes, in an effort to be helpful and solve our users’ troubles with Sparkle.

We really wouldn’t have the ability to respond to the feedback that a widespread distribution of the beta would entail, so we keep it limited.

We haven’t announced the 2.1 release date yet, but we’re in the final phases of the development cycle so it shouldn’t be long.

Thanks, Duncan http://sparkle.cx http://sparkle.cx/

rsma

17 Jan 2017, 12:43 am

Thanks, Duncan. Omar’s note made me wonder if I had somehow missed the release.

I will wait (mostly) patiently for 2.1.

Ranald

On Mon, Jan 16, 2017 at 7:24 PM, Duncan Wilcox <[email protected]> wrote:

Hi Ranald,

Sparkle (co)developer here. Really sorry about the tease, we actually give out 2.1 betas when there’s a critical bug that the beta fixes, in an effort to be helpful and solve our users’ troubles with Sparkle.

We really wouldn’t have the ability to respond to the feedback that a widespread distribution of the beta would entail, so we keep it limited.

We haven’t announced the 2.1 release date yet, but we’re in the final phases of the development cycle so it shouldn’t be long.

Thanks, Duncan http://sparkle.cx http://sparkle.cx/

Tom T-D

19 Jan 2017, 10:20 am

I use Sparkle and find their support to be second to non, there are many shortfalls with the app but it’s great value and I have no doubt whatsoever it will get better and better.

I had an issue and was given 2.1 which fixed it - panic over after issues with freeway only to find Softpress doors closed caused a significant financial loss in late ‘16 . My business like so many others is 100% web dependent for new prospects - though we have a great repeat and referral rate we always need new blood. I managed to get a couple of hundred page website rebuilt in rudimentary form in pretty short order. I have had menu, font and memory issues but found easy workarounds.

All in all I found a 9/10 app in my hour of greatest need.

GrumpyTom

JDW

20 Jan 2017, 12:28 am

Tom T-D,

Thank you for sharing your experience.

You said you rebuilt “a couple hundred pages” in Sparkle. By chance, were those very basic pages, or did you have a lot of Actions and/or HTML markup on them?

Thanks,

James Wages

Duncan Wilcox

24 Jan 2017, 8:39 pm

You said you rebuilt “a couple hundred pages” in Sparkle. By chance, were those very basic pages, or did you have a lot of Actions and/or HTML markup on them?

Hi James,

I’m not sure what site Tom built.

Just to clarify Sparkle doesn’t have “actions”, and while HTML blocks are possible they’re not the primary way to create content in Sparkle, and they don’t affect publishing performance.

We have seen very large sites built by our customers, and while I’d say that going above 100 pages is pushing the limit, there’s nothing in Sparkle actively preventing it.

The trouble is mainly navigating the site, the thumbnail list on the left of the window limits the number of visible pages to about 5 (depending on the screen height), so it’s impractical to have hundreds. We are aware of this and will improve it. Meanwhile the Sparkle engine is happy to export/publish any number of pages with any content.

Duncan http://sparkle.cx

JDW

25 Jan 2017, 12:32 am

Hi Duncan,

The reason why I have been hoping to hear back from Tom T-D is because I wanted to know if all of those “hundreds of Freeway pages” originally used lots of Actions and HTML Markup. My sites certainly do, and so if he informs me that his site in Freeway used a lot of actions and custom markup too, then it would be a clear indication to me that Sparkle would be the proper tool for me to make a transition away from Freeway. Right now, I am still using Freeway, mainly because I have two huge sites that rely on a lot of custom HTML Markup code and Actions. And while I understand that I must rebuild everything again in Sparkle, knowing that my rebuilt sites would work as well as the original Freeway sites is a concern that has held me back from moving to another app. And I’ll be completely honest, there are only 2 apps that I’ve personally considered to be prospective alternatives to Freeway for me: (1) Sparkle and (2) Blocs.

So, Tom T-D, if you are still watching this thread, I would appreciate having your feedback.

Many thanks!

James Wages

SteveH

21 Aug 2017, 1:52 pm

Hi All,

I recently needed to get a new site up. I had hoped to move from Freeway Pro to Pinegrow but never managed to find the time to get to grips with Pinegrow before the trial expired. Pinegrow really needs a 30 day trial for non-professionals like me.

For whatever reasons Freeway Pro 7 with Backdraft was not playing nicely with my design for an Ecwid based site.

Duncan had been very helpful when I trialled Sparkle earlier even letting me have a copy of the beta of 2.1 which allowed the Ecwid store to expand vertically. So I thought why not give it a go.

The latest version was Sparkle Pro 2.2.1 and two things were immediately evident:

  1. This is a very intuitive app for anyone coming from Freeway.
  2. Forget Sparkle’s automatic scaling across devices (sorry Duncan!)

Once you realise that you will have to manually intervene at every device size life become much easier. As Caleb noted earlier in this thread Sparkle is not truly responsive. But with a little effort you can make make a pretty good pass at it!

Anyway, I managed to create what I wanted in Sparkle (and a few tweaks to its generated code with Brackets - setting height of an image to 100vh and applying text-shadow) pretty quickly. The results, still a work in progress (my real business is growing plants as you’ll see) can be seen here:

thymeplants.co.uk

For a straightforward single page site Sparkle Pro proved to be an excellent replacement for Freeway Pro. I’ll be adding more pages and more detail over the next few weeks, which is why I have purchased the Pro version, but see no reason why there should be problems.

Steve

West Wales, UK

MBPr, FW Pro 7 (but amateur user!)

OmarKN

21 Aug 2017, 8:16 pm

responsive

On your site you (probably) use 4 device widths.

As for me, I found 2 sizes enough: desktop and 320px Smartphone. The rest (f ex. iPad landscape) are covered automatically.

And btw. about 64% of internet users (+) surf with their smartphones.

/ with best regards, Omar KN Stockholm, Sweden

iMac 27” i5 (2015); MacOS 10.11.x, FRW Pro 7.x, Graphic 3.0, GraphicConverter9, xScope, Sparkle 2.2

Stockholm, Sweden

………………………………………………..

FreewayPro_User

22 Aug 2017, 2:19 pm

Since this thread was bumped.

I wonder if @JDW ever successfully switched to Sparkle or something else? He also had a thread regarding Blocs as seen in the following thread: https://freewaytalk.softpress.com/thread/view/170255

I guess the lingering bigger question is “when” and “what” will the next incarnation of FreeWay be? Likewise, will those whom moved on to other apps have enough reason to be enticed back to being FreeWay users after moving on?

Richard van Heukelum

22 Aug 2017, 7:31 pm

Simply stated … almost every single Freeway alternative offers (far) more than whatever Freeway did when it hit the iceberg. So any new app that will be released by Softpress has to -at least- beat these apps, we’re not ‘here’ just for nostalgic reasons. Freeway did have a lot of potential in it’s former life, but wrong choices were made and well … we know what happened then.

Blocs offers some awesome stuff, and in my case Coffeecup offers a whole bunch of apps who just work together seamlessly. They could learn a thing or two from Freeway; even Freeway 1 offered functionalities I miss dearly in today’s Responsive Site Designer. But even though it still runs circles around Freeway 7 … it’s all that I’ve ever wanted and more.

Nevertheless I’m still around, Freeway was my first love … so for as long as there’s a light turned on in Softpress towers, I’m here for support and pure enthusiasm.

– Richard

Ontwerpzaam.nl | Papendrecht, The Netherlands

Hardware: 27” iMac i5 3.1GHz / 32GB RAM / 4TB SSHD / 1GB VRAM /

Software : macOS 10.13.6 High Sierra / Freeway7 (user since Freeway1)

Has moved on with CoffeeCup Software : Site Designer / Form Designer / Content Slider / Email Designer / Sonar / Website Insight and occasionally Blocs Web Design App. Use CraftCMS.

Replaced Adobe with Affinity Publisher, Affinity Designer and Affinity Photo.

JDW

22 Aug 2017, 9:38 pm

No, I’m still updating my existing sites with Freeway Pro 7. I’ve also been helping out in the Blocs Beta process, because it shows a lot of promise. But for me to move completely to it means I need some missing features like an easy means to create responsive tabular data and a site wide search feature. Neither of those features will likely see the light of day until sometime in 2018.

So for now, ditto what Richard said.

James Wages

SteveH

23 Aug 2017, 10:26 am

Hi Omar,

Testing the design in Safari’s responsive design mode showed that Sparkle did not scale well automatically between the devices. Some of the issues were minor but a few moments spent adjusting the design on the intermediate devices was, in my view, worthwhile.

Therefore, I actually used all of Sparkles five devices and also needed to override some behaviour using Ecwid’s custom CSS.

The majority of my traffic is, as you say, mobiles and tablets - 80% in fact. But - and this may be for another thread entirely. purchases from my other sites are still about 50% desktop. I guess that people either like to purchase securely in their own homes or the purchase is a shared decision.

Richard is spot on - if Freeway does rise from the ashes then it has some serious work to do to tackle the likes of Blocs, Pinegrow, the whole Responsive suite and Adobe Muse, too.

My biggest fear is just how long will Freeway work with MacOS - the next release (High Sierra) probably due in around a month promises a new file system. New file systems usually mean problems so I won’t be an early adopter!

Frankly, if you are a serious web site builder rather than a casual user, then you have a plethora of frameworks and supporting tools to choose from.

The real problem is the maintenance of Freeway legacy sites, some of which may have many many pages. Sparkle will not help - if Freeway folds you will need access to the HTML and CSS it generated.

I really do see why Thomas went down the Pinegrow route…

Steve

West Wales, UK

MBPr, FW Pro 7 (but amateur user!)

Back to Top

Duncan Wilcox

23 Aug 2017, 1:13 pm

There ultimately is one choice you have to make when choosing a website builder.

  1. You want to future proof your website forever.

  2. You want to create content without much fuss and with a high level tool that helps and simplifies.

For some reason many people seem to conflate the two, as if there really can be a tool that solves both.

That’s a practical impossibility. A hypothetical tool that was visual enough to meaningfully hide all HTML and CSS concepts, while working with just the HTML file, would need to extract meaning that isn’t conveyed by just HTML.

What use is a visual editor that doesn’t let you edit a slideshow as a slideshow, but only as a collection of images with a weird layout? #2 tools have their own internal concept of what a slideshow is, and save that to their own proprietary file format, which then lets you edit the slideshow directly.

So all this is to say, if you want #1 you can’t escape the HTML common denominator, which means using non-visual tools (or visual tools which ultimately drop you down into HTML/CSS), integrating different components at the code level and generally having an understanding of what the different parts of HTML, CSS and JavaScript do.

#1 is a perfectly reasonable thing to pursue, there’s a great choice of tools. These days web technologies are so many and so complex that it kind of requires HTML/CSS to become your job, to follow along the coding community and to own your tools and frameworks. But I’m certainly biased.

If you can’t do #1 or actually prefer #2, you’re in luck. There are many tools, their existence is legitimate and not an alternative to #1 tools.

Just don’t hold your breath for something that does both 1 and 2. They’re lying if they promise, and will fail in delivering (see Macaw).

I feel a bit of an intruder on this forum, and wish the Freeway folks luck. This is an excellent, tight knit community, definitely a great asset.

Duncan