I have blogged before about building a server for users to install WordPress, optimizing images in WordPress, deploying WordPress via CLI, moving WordPress, speeding up WordPress and securing WordPress but what do you do if you want a non-WordPress site without the support hassles?
Recently I gave the https://platforma.ws iOS prototyping library extensions a test. I was delighted to find they had a Web Wireframe Kit (generation suite) for prototyping and exporting working websites. You can try the free version or buy a licence here.
Creating a Website with Platforma Web Wireframe Kit
Goto https://platforma.ws and click HTML Generator (or click here)
You will be presented with an empty website ready for your attention.
Adding Website Elements
It’s as simple as clicking a purple add button.
This reveals a number of HTML templates samples that you can drag and drop to your website design.
You can then choose a category (e.g “Header”) and see the elements of the available sample.
Simply drag and drop the elements out into your design.
Now, Let’s click the purple Add (in the top left) button and add a sample Header section, sample Contents, sample Slider, sample Body, sample first Call to Action section, sample Pricing Table, sample second Call to Action section, sample Footer section.
30 seconds later and I have generated designed a site ready to edit the exported HTML.
Exporting Your Site from Platforma
Click on the Export button (in the top right).
I was greeted with the following export screen, this page explains the difference in export options: http://app.platforma.ws/docs/
I don’t need “node.js” or “gulp” “Advanced Version” (PUG + STYLUS) so I’ll choose “Simple Version” (HTML + CSS + JS).
You will need to enter a licence key to continue the export.
The website export download came down just fine.
Code
The code looks ok, I did notice that images were missing alt tags so I added those in.
Any Errors in the Code (in Chrome)?
Nope, Chrome loads the code with no errors.
Testing Online
How about HTML5 and WCAG 2.0 AA
I uploaded the zip file to my server (using the scp command), I could have used SFTP.
I unzipped the site with
The site loads just fine in a web browser
Accessibility
I used https://achecker.ca/checker/index.php to test the site with WCAG 2.0 AA, the only remaining issues I found were in relation to the multiple H1, H2 etc tags (this can be fixed by moving the H CSS code to custom classes and removing H1, H2 etc tags altogether (and reference the custom class matching the H* tags)).
fyi: The potential WCAG problems that were being alerted were in relation to…
- My alt tags were potentially short
- Potential Colour warnings
- Potential Contrast warnings
- Missing a “Skip to content” block
- Reporting of placeholder graphics and alt tags (a checker is smart)
- etc
I tested the sites HTML compliance with https://validator.w3.org/, the code passed with flying colours.
Customizing
I could not find a way to edit the elements in the http://app.platforma.ws/# like the Platforma iOS Adobe XD Kit but you can quickly edit in your HTML after exporting (using your editor of choice like Dreamweaver, Sublime or Notepad).
Conclusion
Platforma Web Wireframe Kit is an essential tool for anyone wanting to build quick web prototype (or even live sites) website for themselves, clients etc. I am very impressed with the code created.
Read More
Check out my guide, Using Adobe XD and Platforma Web Wireframe Kit to prototype an iOS app.
Donate and make this blog better
Ask a question or recommend an article
[contact-form-7 id=”30″ title=”Ask a Question”]
Revision History
v1.1 Added more, fixed a bit.
etc
