Importing web pages into Sparkle

One of the exciting features about Sparkle is that I was able to import my existing web site into Sparkle page by page using the import feature. I wanted my new site to look much like my old one. I have over 100 pages so it was great. I’ll share a tip that I learned. My site is very text heavy. So I first re-created the top and bottom footers that I wanted to be on each page of my Sparkle site. These were similar to what I originally had.

I kept the original menu and page names from my old site because, like magic, all of the hundreds of original internal links still worked after the import process. I replaced all of my low resolution images from the old site by dragging and dropping high resolution versions of the same pictures into Sparkle.

When Sparkle imports a page it makes every line of text into a separate text box, and these can take a while to merge manually If you want to do some major updating or editing. However if a page didn’t need much editing, this was fine because it still looked the same whether a paragraph of text was in a single text box, or in a dozen boxes.

But on some pages that I needed to do a lot of editing - I opened my original web site, copied the page text from the browser and pasted it into a new single text box on my Sparkle page and after editing there, I was all done.

Then when I created the portrait device version for each page I just increased the body text font size to be easy to read for older folks(14 in my PC device and 10 in the 320 device) and then changed the shape of text and image boxes so that they fit the scrolling portrait view dimensions(long and narrow instead of wide and rectangular). I found that a lot of text in a single box was easier to manipulate in creating a portrait 320 page version then if the text was in a lot of boxes.

So if I was building a brand new web site, I’d suggest planning ahead for the 320 device page. Choose body and header fonts and pre set the style for all pages. Remember that images that appear side by side on a PC device view will need to be stacked on top of each other on the 320 portrait view. Fewer text boxes is easier. Start with high resolution images. Sparkle gives you a small graph that tells you whether your image is high enough resolution to look good on all sizes of devices.

If you keep a smart phone and iPad close close by, you can scan the Sparkle provided SRC code and log into Sparkle’s preview local host and view your preview pages on them to make sure that everything looks good on the different devices as you work.

2 Likes

What program did you import from? Or did you just import from the URL of the website? Thanks
-Bill

Hello Bill,

I imported the pages of my old website into Sparkle itself. I used the instructions in the “Managing Pages” section of the documentation. The sub section is labeled “Importing an existing page.”

So yes, my web site that I imported from still exists, and is up and running on the internet. I used the URLs of the pages that I wanted to import, which actually, was all of them, because I’m essentially duplicating my 12 year old web site originally made with an antique program called Shutterbug. But I’m adding in the modern features available with Sparkle that didn’t exist back then, like responsive pages, graphics improvements, and SEO.

I don’t know if you can import an entire web site at once but I imported my pages one at a time. This fit my work flow because I took time to look them over, and take notes of particular editing changes that I wanted to do on each one. Sparkle lets you work at your own pace.

Just a little addition… When you launch Sparkle and create a new project a Template window pops up. From here you can add a URL and download an entire website…