Review Gridpad.io an on-the-fly responsive web page builder

Hi Guys,

I made my sideproject live as beta today. This is an on-the-fly responsive web page builder I built that provides a simple and clean tool that lets you build, publish, and save a web page literally in seconds. Create and share your content easily around the world with as simple as clicking a button, moving/resizing some boxes around.. and viola an easily created web page that is already responsive out of the bag and displays perfectly for desktop, mobile, or tablet users.

Any feedback in the form of good or bad are appreciated!

Link is http://gridpad.io

Thanks!

 

Now, word of warning -- I consider grids, WYSIWYG site builders, and most such tools to be nube predating scams and laundry lists of how not to build a website -- but I'm going to set that aside and JUST talk about the technical merits and failings of the site itself.

First up you have painfully illegible colour contrasts -- again, read your WCAG since your grey on grey is likely illegible to a hefty chunk of the population. #7A7E8A works out to 130 luma, with #2B2E3C being 50 luma, a difference of only 80/255 aka 31%, far short of the 50% minimum or 65-75% ideal and as such many people will NOT be able to even see that you HAVE a side menu. Your content is similarly flawed since #85868D is 137 luma, so on white that's 118/255 aka 46%, shy of that 50% minimum and compounded by the thin sans font on things like freetype or cleartype dropping the color contrast down to as little as 25%, meaning you NEED to treat the minimum there as more like 70% or more.

You've also used fixed metric fonts meaning users like myself have to dive for the zoom when we shouldn't have to. Again, review your WCAG where it says use EM not PX for fonts so that they dynamically scale to the OS or browser preference, that way users like myself aren't diving for the zoom only to encounter a layout that breaks or looks bad zoomed...

Which it kind-of falls apart when zoomed too.

It's a bit slow loading though not as bad as the numbers would indicate. It's 1.43 megabytes in 38 files for a site that to be frank, I'm just not seeing what it needs all that for. That you have almost as much bloated scripttardery (548k in 15 separate files!) as you do images (553k) is the biggest contributor to the page feeling slow, bloated, and hard to use... on a site that to be frank, I'm not sure what it even needs JS for.

Peeking under the hood the cause is all too clear... jQueery and bootcrap, aka how to shoot your website in the head before you even add content to it. Those fat bloated steaming piles of manure have resulted in so many developers being led down the garden path to failure it's starting to reach the point we need to "thin out their numbers" if you catch my meaning. Do yourself a favor and find a stick to scrap that crap off your boot with, and kick whoever told you jQueery does anything useful right in the junk.

The problems are further compounded by an overstuffed keywords meta (great way to be ignored or even slapped down by search), bandwidth wasting META nothing practical actually gives a flying purple fish about, no media targets on your style links (so screen layout is being sent to ALL, that's bad BTW), multiple stylesheets for NOTHING (other than making first-load slower), static scripting in the markup (that train wreck in the HEAD is a doozy), span with those silly stupid "microdata" itemprop bloat doing numbered heading's job, no logical document structure (a telltale of wysiwyg design), scripting only elements in the markup, abuse of ASIDE for a sidebar, gibberish use of numbered headings, abuse of form elements outside of forms, scripting doing CSS' job, static style in the markup, the presentational class asshattery that is bootcrap's trademark, headings inside lists (pick one not both, redundant semantics!), lack of images off fallback (ALT) text, line-breaks doing CSS padding's job...

Given the topic of the site, it's... well... why I don't believe in using ANY of those site-building methodologies. The markup is gibberish, there's endless cripting for nothing, and it's an accessibility train wreck. As I tell many people, pitch it all in the trash and start over using semantic markup (aka writing HTML properly), progressive enhancement, separation of presentation from content, and staying the blue blazes away from nube predating scam artist BS like Bootcrap and jQueery that just make you work harder, not smarter.

 

ow, thank you for that brutally honest feedback, I really appreciate the time you spent for reviewing the site even when you felt the disgust when you saw the source code.

I'm really a backend guy and I consider my frontend skills close to garbage, by accepting the fact that I really want to be better. To me you are a god, where can I follow you or you something I want to be your young padawan.

I will try and follow all your suggestions as soon as possible.