I Need Advice-Taking A Web Page Layout And Converting It To A Functioning Site

[2112st]

Hey folks,

I've had my M3 MacBook Pro for two months now, and it's been a joy. As I may have indicated elsewhere, I decided to go with Affinity software instead of Adobe because I didn't want to deal with a subscription service. I wanted to actually OWN the software.

Now, I need to figure out how I can convert a web page design created in the Affinity software into an actual web page. While I understand graphics, my HTML skills are very limited. On the 2011 iMac, I have a copy of Photoshop CS6-and there are tools in it that can help you take a web page layout you create in Photoshop and turn it into a working web page, such as my site below. But I want to figure out how to do this with layouts I create with the Affinity software. Unlike CS6, there are no tools that can help me create a web page-so I would have to either find software to do the conversion or use an online source.

Can any of you suggest what I can try?

LUCY LAWLESS IN GREASE

 

[phunguss]

Back in the early 90s, there was PageMill, that would split a graphic for you and make items clickable... but I think it is rather crude by today's standards. WordPress has a bazillion plugins and is like using a 747 for a paper airplane contest. With the advent of HTML5/CSS and all that they can handle, I don't know if there is a WYSIWIG editor these days. I learned HTML and PHP back in those early 2000s, but have not updated my skills with the latest technologies.

 

[Yoda]

There's EverWeb (Everwebapp.com) which is pretty simple to use and close to full WYSIWYG, and it used to be free with some restrictions on publishing options for the site, or paid-for with no restrictions. It might be worth looking at it to see if this is capable of what you want.

 

[2112st]

Back in the early 90s, there was PageMill, that would split a graphic for you and make items clickable... but I think it is rather crude by today's standards. WordPress has a bazillion plugins and is like using a 747 for a paper airplane contest. With the advent of HTML5/CSS and all that they can handle, I don't know if there is a WYSIWIG editor these days. I learned HTML and PHP back in those early 2000s, but have not updated my skills with the latest technologies.

I'm absolutely going to continue using CS6-that feature saved my ass. But let's see if there's something similar out there...

 

[jibsaramnim]

If you have a copy of CS6 and are familiar with it already, using that feature might be the lowest friction way to get to a similar looking webpage result from your designs. From a code quality point of view these tools (especially Adobe's) usually produced rather messy code that can be harder to maintain outside of the tool used to generate it, but if that's not something your planning on doing anyway it might not matter.

I think the closest you can get to a modern equivalent would be the export functionality services like Figma and/or Sketch offer, with Penpot on as the open source and self hostable choice. Foursquare might be the most commonly recommended choice for a fully subscription and managed solution, but because of that wouldn't really fit with what you'd like (owning the software you use).

Back in the day I used FrontPage and Dreamweaver, both of which offer WYSIWYG editors and can perhaps be considered as you can still find copies to purchase on eBay or so — or on The Garden. Though the same applied for older non-subscription versions of Photoshop and related tools too of course.

I don't know of anything that more directly works with Affinity though. Perhaps the only way to use it would be to manually slice up a design and export it for use in another (WYSIWYG) tool to make a working website out of it. But unless you are ok having most of your text be part of those images and not actually be text, it's certainly going to be more involved as compared with Adobe's built-in export features.

Sorry, this wasn't an actual answer, but I do hope some thoughts I shared might be of some use.

 

[JDW]

I've been designing websites since the late 1990's. Cutting to the Chase: It's different now.

Back in the day, you could do all manner of things that would work fine because everybody was browsing on a computer, not a mobile device. These days, unless you are designing a vintage web page for vintage Macs, you need to consider how your content will look on various display sizes. A website that morphs according to display size is called RESPONSIVE DESIGN. This forum is built that way. View it on a desktop computer and you'll see all the navigation text links at the top of the screen. But if you view it on a mobile device or if you decrease the width of the page in the browser on your computer, you will suddenly see the navigation bar text links vanish and be replaced by the clickable/tappable 3 lines button (aka "hamburger" menu).

What I used back in the late 1990's was SoftPress Freeway. I used it for 20 years. I even attended two Macworld Tokyo shows in the early 2000's to help man the Freeway booth because the company I worked for at the time helped create a Japanese language version. I was also instrumental in getting SoftPress to make the UI language switchable on-the-fly in MacOS 9, which was unheard of at the time. (Only Quark Xpress had that feature.)

Freeway was fantastic because it was conceived using a DTP layout model that allowed my creative designer brain to understand how to easily put content on the page. To me, Freeway was the MacPaint of web design. Nothing else came close! But SoftPress decided to revamp the product some years ago, and the new app is still incomplete. I moved to a different web design app named Blocs several years ago and continue to use it today. Here's one of the websites I built using Blocs. Open it on a computer, check out the drop down navigation, then degrease the browser window width and see how the content morphs in that small display space. It's fully "responsive" thanks to Blocs. You can even switch it to the Japanese language (and no, it's not using Google translate either — all human translation and perfect as can be).

Now for the bad news...

When I moved from Freeway to Blocs, I basically had to rebuild all my websites in Blocs because my Freeway sites were NOT responsive. Responsive design takes an all new approach. Thankfully, Blocs makes it super easy, but you still need to start afresh. I hated that part, but eventually I got the job done. And it took well over a year for me to do that, because I had several sites and many web pages to rebuilt. Nothing could be automated.

The reason I mention this is because if you start off using some kind of traditional web design app from decades past, if you later decide you want a responsive site, you'll probably need to start over and rebuilt it. So my advice is to start off with responsive design from the get go.

But if the aim is to create content that will only be viewed on vintage Macs, then picking up an old copy of Freeway 3.x and designing in HTML 3.2 would be a fantastic way to go legacy. Even so, I'm guessing you want a modern website, in which case what I told you about Blocs will help. Their forum is great, by the way. The Blocs community is strong and very helpful. And once you learn the app, you won't regret it.

 

[2112st]

Thanks for the responses, everyone!