How clean and semantically correct is output code?

RapidWeaver Classic General
1

There are increasing comments online about outputting semantically correct code and also outputting as small a footprint as possible.

A number of articles state that drag and drop apps are woeful, producing a huge amount of unnecessary code that doesn’t properly follow modern semantic rules and that this can give poor performance as well as take up much more bandwidth for high traffic sites.

As I’m no expert I thought I’d ask here. How does RW fare in this and are there any comparison’s between other apps like Pinegrow and Blocs?

2

It’s a very interesting question and one which I’ve spent quite a bit of energy on over the years. Seems to me that the vast majority of folks using RW are not going to care too much as long as their visitors can paste in the URL and the page loads they are pretty much happy.

How those sausages are made is another question entirely though. Most of the page generators, and this includes RW, will include some bloat,. This can take the form of html elements (usually wrappers), unused CSS and JS and so on.

The way I tend to think about it, with anything other than hand made pages, is to try to worry less about all the weight and impact of the ‘stuff’ you didn’t ask for, but instead focus on measuring and evaluating the quality of the user experience.

That said, there are use cases I deal with now where only hand made pages are going to cut it. These are pages where there are other reasons to care about how they are crafted.

I was going to go on… but this topic is actually an industrial grade rabbit hole.

You might find this interesting. Oxygen for WP tries to be smarter:-

4 Likes
3

The code and semantics will very much depend on the framework/theme being used, and also your knowledge of how to markup stacks with the correct semantics.

Some tools make this easier to do than others.

1 Like
4

Part of the question I’m asking is whether a 300k css/javascript file is going to make a huge difference over one that’s 27k?

As stacks are developed by different developers I’m assuming they all produce their own css/Javascript files which may increase bandwidth usage? I can only see this being an issue on large and high traffic sites?

I’m also not sure what effect css/Javascript files have in seo if any?

5

Pretty much anything you do can impact SEO.

The speed a site loads can have an impact on search engine results, Google and most search engines have for some time now used page load time as one of many criteria in ranking.

More importantly page load speed directly impacts the user experience.

Well, it depends on a lot of things like the user’s bandwidth, web server speed, location of the customer in relation to the server, etc, etc. Don’t make the amateur mistake of thinking that your website’s patrons all have the same speed connection that you might have.

More importantly, is what you put on the page. If you use things like video backgrounds and lots of huge images then a little extra CSS and JavaScript is probably not going to get noticed. Your site is probably already slow anyway.

As for semantic HTML5

It can have quite an impact on both search engine rankings and accessibility. Google and Bing managers have confirmed on several occasions that

pages with correctly implemented semantic HTML5 have an advantage in SEO over those that don’t.

And for accessibility

For users who are blind or visually impaired and rely on screen readers to verbally describe what is on a page, proper use of HTML5 semantic elements will allow screen readers to more accurately communicate your content by making the visual audible.

As for implementing semantic HTML5, some of it is dependent on the framework or theme you are using. But a lot will require you to organize your content.

1 Like
6

So how does this apply to RW and other drag and drop builders (Pinegrow/Blocs…)?

7

I haven’t used Blocs or Pinegrow in years, so I can’t give you a good comparison.

RapidWeaver is very flexible, you have a lot of choices in weather you use a Framework (Foundation, Foundry, Platform, Source, etc, etc ), a traditional theme, stacks or other built-in plugins.

With all these choices comes an enormous variants in the kind and quality in the code produced.

For example a styled text page with a traditional theme, will produce totally different semantic HTML than the same content produced by a properly laid out Foundation 6 page.

1 Like
8

If you are not using out of the box themes/pages, RapidWeaver actually has very little to do with the code of a website. Most of the responsibility for the code of the website has to do with the theme you are using and (assuming that you use Stacks) the stacks that you put on the page.

This means that the quality of the code greatly depends on the developers that you choose to purchase from.

I personally care a lot for nice clean code. One of the features of Foundation 6 is that I put extra effort into making the published code pretty indistinguishable from if you were a skilled developer and coded the site by hand.

2 Likes
9

So how can RW users who don’t code know if what they’re using; be it a framework or theme; is producing code that is of good quality?

10

To be honest, you don’t know. Once you have been around you will see what developers are recommended. You will also learn after purchasing who you may like purchasing from and some you don’t.

It’s also hard to define what “quality code” is. I guess running the code through through some validation tools is ok. But to be honest, most of those tools are horrible.

11

Thanks Joe. Good wisdom as always (and Teefers!).

I was reading some articles on some of the atrocious output from Bootstrap Studio and wondered how RW and other drag and drop frameworks fared. This really does help. These frameworks are only going to increase and non-coders are going to be at the mercy of those who code.

1 Like
12

I invite any developer to look at the source code of foundationstacks.com and see how clean it is. :grin:

1 Like
13

As @joeworkman said, it is dependent on the selected theme. Stack addons by default add additional div tags to the exported code, surrounding the stacks addons code. This is (also) done being able to use inbuilt margin and padding settings for the stack.

The stacks developer is able to decide to not using these additional div tags surrounding the code.

Comparing the 4 different frameworks Foundation 6, Foundry 2, UIkit 3, and Platform, IMHO Foundation 6 generates the cleanest code.

3 Likes
14

I should also add that the term “quality code” is very subjective/relative. I will have to say that code that I shipped 5 years ago is VERY different than the code that I ship today. While the code that I shipped 5 years ago is not bad. It’s also not up to my current standards (which are pretty high).

This is true of any trade though. You will get better over the years and probably critique the crap out of your past work.

15

Thanks guys, that’s really helpful to know. One article I read was more to do with producing semantic code that follows current HTML5 standards and another that rather than using current HTML5/CSS features, some frameworks were using javascript from HTML4 days when features where not available.

I’ve always appreciated how the RW developers produce such great stacks and frameworks allowing us plebs to create websites! Well done and thank you.

1 Like
16

First off, I agree 100% with Jannis (@instacks)

I don’t have UIKit, but have Source, so out of the 4 Frameworks I have (Foundation 6, Foundry 2, Source, and Platform), Foundation 6 generates the cleanest code. Joe (@joeworkman) did an excellent job. The Stacks plugin by default generates two additional <div> wrappers for most stacks. If you look at the code, you will see them on all most every stack.

This is an example of the code generated by the standard stacks Headline (and most other frameworks would have similar) produces to display a single headline

An Important Headline

<div id="stacks_out_2" class="stacks_out">
    <div id="stacks_in_2" class="stacks_in com_yourhead_stack_header_stack">
        <h3>An Important Headline</h3>
    </div>
</div>

This is the code generated by Foundation 6 to produce the same headline:

<h3 class=" “>An Important Headline</h3>

This even gets worse when you place stacks inside of stacks inside of stacks. A common practice.
Example 2 Headings like above inside a 2 column stack inside of a container stack (or 1 column stack).

With the standard stacks:

<div id="stacks_out_4" class="stacks_out">
    <div id="stacks_in_4" class="stacks_in stack_stack">
        <div id="stacks_out_6" class="stacks_out">
            <div id="stacks_in_6" class="stacks_in com_yourhead_stacks_two_columns_stack">
                <div class="s3_row">
                    <div class="s3_column s3_column_left">
                        <div id="stacks_out_2" class="stacks_out">
                            <div id="stacks_in_2" class="stacks_in com_yourhead_stack_header_stack">
                                <h3>An Important Headline</h3>
                            </div>
                        </div>
                    </div>
                    <div class="s3_column s3_column_right">
                        <div id="stacks_out_9" class="stacks_out">
                            <div id="stacks_in_9" class="stacks_in com_yourhead_stack_header_stack">
                                <h3>An Important Headline</h3>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

And the same code generated using Foundation 6:

<div class="container overflow-hidden “>
    <div class=”grid-container">
        <div class="grid-x “>
            <div class=”cell small-12 medium-auto “>
                <h3 class=” “>An Important Headline</h3>
            </div>
            <div class=”cell small-12 medium-auto “>
                <h3 class=” “>An Important Headline</h3>
            </div>
        </div>
    </div>
</div>

All those extra divisions have to need interpreted and applied by search engines, screen readers and even the browser.
And they both produce the same results:

2021-08-01_11-03-04
2021-08-01_11-03-04736×59 2.76 KB

No matter what tool you use the HTML 5 Semantics are still up to you to apply. Foundation 6 and the other frameworks give you the tools to apply them but it’s really up to you to ensure that the get applied.

For example Foundation 6 offers a Container stack that allows you to change HTML tag from the default <div> to a more relevant Semantics tag type (i.e. header, nav, main, aside, footer, etc. etc.). But it’s up to you the user to set up these containers. There is no way with a free format framework that the developer can do this part for you.
So it’s important for you to understand where we should use these Semantics tags.
Pretty much every page should have a header, nav, main, and footer area at minimum. An aside (sidebar) and breaking the content into articles can help as well.

You can find more information on Semantics tag along with definitions here HTML Semantic Elements (w3schools.com).


4 Likes
17

That’s really helpful, thank you!

18

I learned HTML in the 3.2 days when tables were necessary for any meaningful kind of layout. Since moving on to HTML 4 & 5 and CSS 2 & 3 I have learned the value of semantics, and accessibility is a big reason to strive for it.

However, saving yourself time from hand coding the perfect, lean HTML and CSS is just as important because it lets you get the content right.

For me the critical thing is the semantics, and that is not impeded by layers of DIV elements as these are semantically transparent. There is the old “but what about people on slow internet connections” which is still valid (a bad cellular signal is still common for some) but you’ll do a lot more to address that by optimising your images and other ‘heavy’ elements than by stripping out a few levels of DIVs.

I recently did a complete revamp of a friend’s site (a local society) using Bootstrap 5. While it adds a whole bunch of extra DIVs and CLASS="" everywhere, the pages are still pretty lean, the CSS is tiny, and everything loads quickly. However I did discover that my drive for better quality images went too far the other way with 3.2MB header images the biggest culprit! Now none of the photos are over 200KB.

1 Like
19

@zkarj Amen to what you wrote! By far the biggest loading problem I’ve seen is folks using images that are way way way too large. Probably second is folks putting too many images total on a page (exceptions to very efficient photo galleries). Third to folks who insist on self-hosting videos: either due to lack of optimization or just too long in length. Divs and Class issues are way way way down the list of “problems”.

20

I will need to look at these test results myself, however for me this is the best argument yet to go with Foundation 6. Regardless of the learning curve or the price. Hand coding I’m sure can still be better, but that is to be expected and likely not as fast as drag and drop pre made chunks of code.

1 Like