Jason Knight
4 min readJan 6, 2022

--

Given the GIBBERISH train wreck of non-semantic markup it vomits up, broken layouts from willy-nilly mixing metrics, middle finger to usability and accessibility, and general reek of incompetence of anything built with it, to say it's a "best choice" for anything other than scamming nubes and rubes alike is to be utterly devoid of the most basic knowledge of HTML.

The code for their own website for the project screams this with the bandwidth wasting ascii art comment, STYLE inside a pointless DIV in the BODY 9invalid HTML), duplicate ID's, the fairy tale scroll attribute assigned to a tag that doesn't even support it, frameborder like it's still 2003...

Results like this:

https://validator.w3.org/nu/?doc=https%3A%2F%2Fwebflow.com%2F

Are what I've come to expect from such "builders", perhaps even worse!

I mean when they blow 3.8k to do the job of 300 bytes of code?

LOOK at the SHEER INCOMPETANCE of this:

<div data-w-id="8c5acd42-4f32-fafd-ae4e-e7aeb2234b19" class="g-nav_wrapper"><a id="skip-link" href="#main" class="g-nav-skip">Skip to main content</a>
<div data-w-id="8c5acd42-4f32-fafd-ae4e-e7aeb2234b1c" data-animation="default" data-collapse="medium" data-duration="400" data-easing="ease-out-quart" data-easing2="ease" role="banner" class="g-nav w-nav">
<div class="g-main_nav_container"><a href="https://webflow.com/?r=0" class="g-brand w-nav-brand">
<div class="g-brand-logo w-embed"><svg width="84" height="22" viewBox="0 0 84 22" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<title>Webflow logo</title>
<g clip-path="url(#clip0)">
<path d="M27.1 8.3C27.1 6.8 25.6 5.2 23.1 5.2C20.3 5.2 17.1 7.3 16.6 11.5C16.1 15.7 18.7 17.6 21.4 17.6C24.1 17.6 25.4 16.6 26.8 15.2C25.6 13.7 24 14.4 23.7 14.5C23.4 14.7 22.9 14.9 22.1 14.9C21.1 14.9 20 14.4 20 12.5C26.6 11.8 27.1 9.8 27.1 8.3ZM23.9 8.5C23.9 9 23.7 9.8 20.4 10.2C21.1 7.7 22.4 7.5 23 7.5C23.6 7.6 23.9 8 23.9 8.5ZM12.8 8.9C12.8 8.9 11.4 13.3 11.3 13.7C11.3 13.3 10.2 5.4 10.2 5.4C7.8 5.4 6.5 7.1 5.9 8.9C5.9 8.9 4.2 13.3 4.1 13.7C4 13.4 3.8 9 3.8 9C3.6 6.8 1.6 5.4 0 5.4L2 17.4C4.5 17.4 5.9 15.7 6.6 13.9C6.6 13.9 8.1 10 8.2 9.8C8.2 10 9.3 17.4 9.3 17.4C11.8 17.4 13.2 15.8 13.9 14.1L17.4 5.4C14.8 5.4 13.5 7.1 12.8 8.9ZM36.4 5.1C34.9 5.1 33.7 5.9 32.7 7.2L33.5 0C31.4 0 29.8 1.8 29.4 4.4L27.8 17.3C29 17.3 30.2 17 30.9 16.1C31.5 16.9 32.4 17.5 33.7 17.5C37.2 17.5 39.6 13.5 39.6 9.7C39.7 6.2 38 5.1 36.4 5.1ZM36 11.3C35.6 13.4 34.5 14.8 33.3 14.8C32.2 14.8 31.7 14.3 31.7 14.3C31.9 12.5 32.1 11.3 32.5 10.3C32.9 9.3 33.9 7.8 34.9 7.8C35.9 7.9 36.4 9.2 36 11.3ZM48.4 5.4H46V5.3C46.2 3.7 46.5 2.9 47.8 2.8C48.6 2.7 49 2.3 49.1 1.8C49.2 1.4 49.4 0.1 49.4 0.1C44.5 0.1 43 2.2 42.6 5.4V5.5H42.5C41.7 5.5 40.8 6.4 40.7 7.5L40.6 7.9H42.2L40.8 19.1L40.4 21.1C40.5 21.1 40.5 21.1 40.6 21.1C42.9 21 44.3 19.2 44.7 16.6L45.8 7.8H46.6C47.3 7.8 48.2 7.1 48.4 5.8V5.4ZM61 5.2C58.2 5.2 55.6 7.3 54.8 10.5C54 13.7 55.2 17.6 59.3 17.6C63.4 17.6 65.8 13.6 65.8 10.3C65.7 7 63.5 5.2 61 5.2ZM62.1 11.2C62 12.7 61.3 14.9 59.5 14.9C57.7 14.9 58 12.3 58.1 11.1C58.3 9.8 59 7.9 60.6 7.9C62.1 7.9 62.3 9.6 62.1 11.2ZM79.6 8.9C79.6 8.9 78.2 13.3 78.1 13.7C78.1 13.3 77 5.4 77 5.4C74.6 5.4 73.3 7.1 72.7 8.9C72.7 8.9 71 13.3 70.9 13.7C70.9 13.4 70.6 9 70.6 9C70.5 6.8 68.4 5.5 66.8 5.5L68.8 17.5C71.3 17.5 72.7 15.8 73.4 14C73.4 14 74.9 10.1 75 9.9C75 10.1 76.1 17.5 76.1 17.5C78.6 17.5 80 15.9 80.7 14.2L84 5.4C81.5 5.4 80.2 7.1 79.6 8.9ZM50.7 0.1L48.7 16.5L48.3 18.5C48.4 18.5 48.4 18.5 48.5 18.5C50.7 18.5 52.3 16.5 52.5 14.1L53.7 4.7C54 1.9 52.2 0.1 50.7 0.1Z" fill="currentColor" />
</g>
<defs>
<clipPath id="clip0">
<rect width="84" height="21.1" fill="currentColor" />
</clipPath>
</defs>
</svg></div>
</a>
<div class="g-nav_menu-mobile">
<div id="continue-nav-mobile" data-signup-cta="1" class="g-nav_menu-right cc-mobile"><a href="https://webflow.com/dashboard/signup" data-signup-cta="1" class="g-nav_menu-link_wrapper-mobile w-nav-link">Get started <span class="g-nav-text_desktop">— it&#x27;s free</span></a></div>
<div id="g-nav-icon" aria-label="Menu" class="g-nav_menu-button w-nav-button">
<div data-w-id="8c5acd42-4f32-fafd-ae4e-e7aeb2234b27" data-animation-type="lottie" data-src="https://assets-global.website-files.com/5f1a22ca3b746e2f46cafd62/5f1a22ca3b746e32a7cafdbb_nav.json" data-loop="0" data-direction="1" data-autoplay="0" data-is-ix2-target="1" data-renderer="svg" data-default-duration="1.5" data-duration="0" data-ix2-initial-state="0" class="g-nav_menu-button-icon"></div>
</div>
</div>

Doing the job of:

<header id="top">
<h1><a href="/">Webflow</a></h1>
<nav id="mainMenu">
<ul>
<li><a href="#login">Log In</a></li>
<li><a href="/signup"Get started — it's free</a></li>
</ul>
</nav>

THAT is the levels of garbage “webflow” vomits up.

Don’t even get me started on how “mobile” gets a more useful menu than desktop on their site, though that could be the BROKEN pathetic half-assed attempt at being “responsive”. Along with the garbage “let’s not let the user scroll” hero area garbage.

To say that it’s “best” for front-end developers is outright delusional. Just like all these other rubbish “no code” solutions and the bloated, inaccessible, slow loading, painful for the end user to use and nigh impossible to maintain chazerei they vomit up.

It is painfully clear the people who CREATED webflow have ZERO business flapping their yap about web development!

--

--

Jason Knight
Jason Knight

Written by Jason Knight

Accessibility and Efficiency Consultant, Web Developer, Musician, and just general pain in the arse

No responses yet