<metaname="twitter:description"content="Just a place to make stuff">
<metaname="twitter:image"content="http://blog.thebestjohn.com/images/default.jpg"><linkrel="icon"href="/images/icon.png"><linkrel="alternate"href="/atom.xml"type="application/atom+xml"title="TheBestJohn"></head><bodyitemscopeitemtype="https://schema.org/WebPage"><navclass="menu"id="menu"><divclass="menu-inner"><divclass="menu__left-area"><divclass="menu__item"><aclass="menu__item__link menu__item__link--brand"href="/"title="Home"rel="home"><imgclass="menu__item__link--brand__image"src="/images/icon.png"alt="TheBestJohn"><spanclass="menu__item__link--brand__label">TheBestJohn</span></a></div></div><divclass="menu__right-area"><divclass="menu__item"><aclass="menu__item__link"href="http://blog.thebestjohn.com/">Home</a></div><divclass="menu__item"><aclass="menu__item__link"href="http://blog.thebestjohn.com/about">About</a></div><divclass="menu__item"><aclass="menu__item__link"href="http://blog.thebestjohn.com/archives">Archives</a></div></div></div></nav><divclass="page-background"></div><divclass="content-container"><divclass="content-outer"><divclass="content-inner"itemscopeitemtype="https://schema.org/Blog"><sectionclass="post-list"><header><h2>Archives: 8/2012</h2></header><hr><articleclass="post-list__item"><divclass="post-list__item__col-1"><aclass="post-list__item__link"href="/posts/table-based-design/"><divclass="post-list__item__link__background"style="background-image:url('/images/default.jpg');"></div></a></div><divclass="post-list__item__col-2"><h3class="post-list__item__title"><ahref="/posts/table-based-design/"title="Table based design: Why I loathe it, and you should too!">Table based design: Why I loathe it, and you should too!</a></h3><divclass="post-list__item__meta"><aclass="post-list__item__meta__link"href="/categories/Web-Dev/">Web Dev</a></div><pclass="post-list__item__description">If there is one thing that grinds my gears it’s table based design and the “web development” companies that continue to use it.
<metaname="twitter:description"content="Just a place to make stuff">
<metaname="twitter:image"content="http://blog.thebestjohn.com/images/default.jpg"><linkrel="icon"href="/images/icon.png"><linkrel="alternate"href="/atom.xml"type="application/atom+xml"title="TheBestJohn"></head><bodyitemscopeitemtype="https://schema.org/WebPage"><navclass="menu"id="menu"><divclass="menu-inner"><divclass="menu__left-area"><divclass="menu__item"><aclass="menu__item__link menu__item__link--brand"href="/"title="Home"rel="home"><imgclass="menu__item__link--brand__image"src="/images/icon.png"alt="TheBestJohn"><spanclass="menu__item__link--brand__label">TheBestJohn</span></a></div></div><divclass="menu__right-area"><divclass="menu__item"><aclass="menu__item__link"href="http://blog.thebestjohn.com/">Home</a></div><divclass="menu__item"><aclass="menu__item__link"href="http://blog.thebestjohn.com/about">About</a></div><divclass="menu__item"><aclass="menu__item__link"href="http://blog.thebestjohn.com/archives">Archives</a></div></div></div></nav><divclass="page-background"></div><divclass="content-container"><divclass="content-outer"><divclass="content-inner"itemscopeitemtype="https://schema.org/Blog"><sectionclass="post-list"><header><h2>Archives: 2012</h2></header><hr><articleclass="post-list__item"><divclass="post-list__item__col-1"><aclass="post-list__item__link"href="/posts/table-based-design/"><divclass="post-list__item__link__background"style="background-image:url('/images/default.jpg');"></div></a></div><divclass="post-list__item__col-2"><h3class="post-list__item__title"><ahref="/posts/table-based-design/"title="Table based design: Why I loathe it, and you should too!">Table based design: Why I loathe it, and you should too!</a></h3><divclass="post-list__item__meta"><aclass="post-list__item__meta__link"href="/categories/Web-Dev/">Web Dev</a></div><pclass="post-list__item__description">If there is one thing that grinds my gears it’s table based design and the “web development” companies that continue to use it.
<metaname="twitter:description"content="Just a place to make stuff">
<metaname="twitter:image"content="http://blog.thebestjohn.com/images/default.jpg"><linkrel="icon"href="/images/icon.png"><linkrel="alternate"href="/atom.xml"type="application/atom+xml"title="TheBestJohn"></head><bodyitemscopeitemtype="https://schema.org/WebPage"><navclass="menu"id="menu"><divclass="menu-inner"><divclass="menu__left-area"><divclass="menu__item"><aclass="menu__item__link menu__item__link--brand"href="/"title="Home"rel="home"><imgclass="menu__item__link--brand__image"src="/images/icon.png"alt="TheBestJohn"><spanclass="menu__item__link--brand__label">TheBestJohn</span></a></div></div><divclass="menu__right-area"><divclass="menu__item"><aclass="menu__item__link"href="http://blog.thebestjohn.com/">Home</a></div><divclass="menu__item"><aclass="menu__item__link"href="http://blog.thebestjohn.com/about">About</a></div><divclass="menu__item"><aclass="menu__item__link"href="http://blog.thebestjohn.com/archives">Archives</a></div></div></div></nav><divclass="page-background"></div><divclass="content-container"><divclass="content-outer"><divclass="content-inner"itemscopeitemtype="https://schema.org/Blog"><sectionclass="post-list"><header><h2>Archives</h2></header><hr><articleclass="post-list__item"><divclass="post-list__item__col-1"><aclass="post-list__item__link"href="/posts/static-what-generator/"><divclass="post-list__item__link__background"style="background-image:url('/images/default.jpg');"></div></a></div><divclass="post-list__item__col-2"><h3class="post-list__item__title"><ahref="/posts/static-what-generator/"title="Static what Generator?!">Static what Generator?!</a></h3><divclass="post-list__item__meta"><aclass="post-list__item__meta__link"href="/categories/Web-Dev/">Web Dev</a></div><pclass="post-list__item__description">Recently I’ve become disillusioned with most CMS options. They’re a pain to keep updated, plugins are constantly being abandoned, and they’re so...</p></div></article><articleclass="post-list__item"><divclass="post-list__item__col-1"><aclass="post-list__item__link"href="/posts/table-based-design/"><divclass="post-list__item__link__background"style="background-image:url('/images/default.jpg');"></div></a></div><divclass="post-list__item__col-2"><h3class="post-list__item__title"><ahref="/posts/table-based-design/"title="Table based design: Why I loathe it, and you should too!">Table based design: Why I loathe it, and you should too!</a></h3><divclass="post-list__item__meta"><aclass="post-list__item__meta__link"href="/categories/Web-Dev/">Web Dev</a></div><pclass="post-list__item__description">If there is one thing that grinds my gears it’s table based design and the “web development” companies that continue to use it.
<metaname="twitter:description"content="Just a place to make stuff">
<metaname="twitter:image"content="http://blog.thebestjohn.com/images/default.jpg"><linkrel="icon"href="/images/icon.png"><linkrel="alternate"href="/atom.xml"type="application/atom+xml"title="TheBestJohn"></head><bodyitemscopeitemtype="https://schema.org/WebPage"><navclass="menu"id="menu"><divclass="menu-inner"><divclass="menu__left-area"><divclass="menu__item"><aclass="menu__item__link menu__item__link--brand"href="/"title="Home"rel="home"><imgclass="menu__item__link--brand__image"src="/images/icon.png"alt="TheBestJohn"><spanclass="menu__item__link--brand__label">TheBestJohn</span></a></div></div><divclass="menu__right-area"><divclass="menu__item"><aclass="menu__item__link"href="http://blog.thebestjohn.com/">Home</a></div><divclass="menu__item"><aclass="menu__item__link"href="http://blog.thebestjohn.com/about">About</a></div><divclass="menu__item"><aclass="menu__item__link"href="http://blog.thebestjohn.com/archives">Archives</a></div></div></div></nav><divclass="page-background"></div><divclass="content-container"><divclass="content-outer"><divclass="content-inner"itemscopeitemtype="https://schema.org/Blog"><sectionclass="post-list"><header><h2>Category: Web Dev</h2></header><hr><articleclass="post-list__item"><divclass="post-list__item__col-1"><aclass="post-list__item__link"href="/posts/static-what-generator/"><divclass="post-list__item__link__background"style="background-image:url('/images/default.jpg');"></div></a></div><divclass="post-list__item__col-2"><h3class="post-list__item__title"><ahref="/posts/static-what-generator/"title="Static what Generator?!">Static what Generator?!</a></h3><divclass="post-list__item__meta"><aclass="post-list__item__meta__link"href="/categories/Web-Dev/">Web Dev</a></div><pclass="post-list__item__description">Recently I’ve become disillusioned with most CMS options. They’re a pain to keep updated, plugins are constantly being abandoned, and they’re so...</p></div></article><articleclass="post-list__item"><divclass="post-list__item__col-1"><aclass="post-list__item__link"href="/posts/table-based-design/"><divclass="post-list__item__link__background"style="background-image:url('/images/default.jpg');"></div></a></div><divclass="post-list__item__col-2"><h3class="post-list__item__title"><ahref="/posts/table-based-design/"title="Table based design: Why I loathe it, and you should too!">Table based design: Why I loathe it, and you should too!</a></h3><divclass="post-list__item__meta"><aclass="post-list__item__meta__link"href="/categories/Web-Dev/">Web Dev</a></div><pclass="post-list__item__description">If there is one thing that grinds my gears it’s table based design and the “web development” companies that continue to use it.
<metaname="twitter:description"content="Just a place to make stuff">
<metaname="twitter:image"content="http://blog.thebestjohn.com/images/default.jpg"><linkrel="icon"href="/images/icon.png"><linkrel="alternate"href="/atom.xml"type="application/atom+xml"title="TheBestJohn"></head><bodyitemscopeitemtype="https://schema.org/WebPage"><navclass="menu"id="menu"><divclass="menu-inner"><divclass="menu__left-area"><divclass="menu__item"><aclass="menu__item__link menu__item__link--brand"href="/"title="Home"rel="home"><imgclass="menu__item__link--brand__image"src="/images/icon.png"alt="TheBestJohn"><spanclass="menu__item__link--brand__label">TheBestJohn</span></a></div></div><divclass="menu__right-area"><divclass="menu__item"><aclass="menu__item__link"href="http://blog.thebestjohn.com/">Home</a></div><divclass="menu__item"><aclass="menu__item__link"href="http://blog.thebestjohn.com/about">About</a></div><divclass="menu__item"><aclass="menu__item__link"href="http://blog.thebestjohn.com/archives">Archives</a></div></div></div></nav><divclass="page-background"></div><divclass="content-container"><divclass="content-outer"><divclass="content-inner"itemscopeitemtype="https://schema.org/Blog"><sectionclass="post-list"><articleclass="post-list__item"><divclass="post-list__item__col-1"><aclass="post-list__item__link"href="/posts/static-what-generator/"><divclass="post-list__item__link__background"style="background-image:url('/images/default.jpg');"></div></a></div><divclass="post-list__item__col-2"><h3class="post-list__item__title"><ahref="/posts/static-what-generator/"title="Static what Generator?!">Static what Generator?!</a></h3><divclass="post-list__item__meta"><aclass="post-list__item__meta__link"href="/categories/Web-Dev/">Web Dev</a></div><pclass="post-list__item__description">Recently I’ve become disillusioned with most CMS options. They’re a pain to keep updated, plugins are constantly being abandoned, and they’re so...</p></div></article><articleclass="post-list__item"><divclass="post-list__item__col-1"><aclass="post-list__item__link"href="/posts/table-based-design/"><divclass="post-list__item__link__background"style="background-image:url('/images/default.jpg');"></div></a></div><divclass="post-list__item__col-2"><h3class="post-list__item__title"><ahref="/posts/table-based-design/"title="Table based design: Why I loathe it, and you should too!">Table based design: Why I loathe it, and you should too!</a></h3><divclass="post-list__item__meta"><aclass="post-list__item__meta__link"href="/categories/Web-Dev/">Web Dev</a></div><pclass="post-list__item__description">If there is one thing that grinds my gears it’s table based design and the “web development” companies that continue to use it.
<metaproperty="og:description"content="Recently I’ve become disillusioned with most CMS options. They’re a pain to keep updated, plugins are constantly being abandoned, and…">
<metaname="twitter:title"content="Static what Generator?!">
<metaname="twitter:description"content="Recently I’ve become disillusioned with most CMS options. They’re a pain to keep updated, plugins are constantly being abandoned, and…">
...
...
@@ -15,12 +15,12 @@
<h1id="Static-site-generators"><ahref="#Static-site-generators"class="headerlink"title="Static site generators"></a>Static site generators</h1><p>While the timthumb exploit was a pain in the ass, it was very interesting to me and made me seriously consider how I secure my systems. To that end I started reading into static site generators. Static site generators take your posts, usually formatted in some sort of markup, put them through a templating engine that outputs <code>.html</code> files, which you can then serve via the usual methods.</p>
<h3id="Why-tho"><ahref="#Why-tho"class="headerlink"title="Why tho?"></a>Why tho?</h3><p>The idea is that <em>most</em> sites don’t actually need to use dynamic code. Their content is, for the most, part static. Users aren’t interacting with the content (other than the comments sections and forms but we’ll talk about that later). They are, instead, just reading it. The only person who seems to be interacting with it is the person that owns the site. Even then, the owner isn’t actively interacting. They are writing a post, or updating a page. After that, everything stays the same.</p>
<p>All this is a “face-value” reason to move over to a static site. I have an even deeper reason for wanting to use a static site, portability. Static sites allow you to use a generic format for your posts. I write all my posts in markdown, a very common and widely used format. With this I can move from generator to generator without much change. If I were to make my blog in something like Wordpress, my post information would be locked into a <em>very</em> specific database format. If I, for some reason or another, decided I no longer wanted to use Wordpress it would be a lot of work modifying all my posts to be compatible with the new platform.</p>
<h1id="Options"><ahref="#Options"class="headerlink"title="Options"></a>Options</h1><p>When it comes to static site generators, there are a plethora of options. The idea is to make sure you know what you’re signing up for. They come in many languages and each come with theor own pros and cons. Choose something that’s written in a language you’re somewhat comfortable with and something that meets your criteria.<br><ahref="https://www.staticgen.com/"target="_blank"rel="noopener">https://www.staticgen.com/</a></p>
<h1id="Options"><ahref="#Options"class="headerlink"title="Options"></a>Options</h1><p>When it comes to static site generators, there are a plethora of options. The idea is to make sure you know what you’re signing up for. They come in many languages and each come with there own pros and cons. Choose something that’s written in a language you’re somewhat comfortable with and something that meets your criteria.<br><ahref="https://www.staticgen.com/"target="_blank"rel="noopener">https://www.staticgen.com/</a></p>
<p>For me, I wanted:</p>
<ul>
<li>Something with configurable routes (mysite.com/post/post-name/ could easily be mysite.com/articles/post-name/)</li>
<li>Does not need a server running to serve files (This defeats the purpose to me and can introduce security issues)</li>
<li>Does not need a server running all the time (This defeats the purpose to me and can introduce security issues)</li>
<li>Was reasonably markdown agnostic (I didn’t want too many special tags in my markdown in case I wanted/needed to switch generators)</li>
<li>Had a nice theming engine with some good themes already made (I can make one but wanted to get up and running quickly)</li>
<li>Is actively being Developed (It would be nice to keep things up to date)</li>
<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1"><title>Table based design: Why I loathe it, and you should too! | TheBestJohn</title><linkrel="stylesheet"href="/libs/font-awesome/css/font-awesome.min.css"><linkrel="stylesheet"href="/css/index.css"><linkrel="stylesheet"href="/css/highlights/dracula.css"><linkrel="canonical"href="http://blog.thebestjohn.com/posts/table-based-design/"/>
<metaname="description"content="If there is one thing that grinds my gears it’s table based design and the “web development” companies that continue to use it. Web…">
<metaproperty="og:type"content="article">
<metaproperty="og:title"content="Table based design: Why I loathe it, and you should too!">
<metaproperty="og:description"content="If there is one thing that grinds my gears it’s table based design and the “web development” companies that continue to use it. Web…">
<metaname="twitter:title"content="Table based design: Why I loathe it, and you should too!">
<metaname="twitter:description"content="If there is one thing that grinds my gears it’s table based design and the “web development” companies that continue to use it. Web…">
<metaname="twitter:image"content="http://blog.thebestjohn.com/images/default.jpg"><metaproperty="article:author"content="John Warren"><metaproperty="twitter:label1"content="Published at"><metaproperty="twitter:data1"content="August 9th 2012 00:00:00"><metaproperty="twitter:label2"content="Written by"><metaproperty="twitter:data2"content="John Warren"><linkrel="icon"href="/images/icon.png"><linkrel="alternate"href="/atom.xml"type="application/atom+xml"title="TheBestJohn"></head><bodyitemscopeitemtype="https://schema.org/WebPage"><navclass="menu"id="menu"><divclass="menu-inner"><divclass="menu__left-area"><divclass="menu__item"><aclass="menu__item__link menu__item__link--brand"href="/"title="Home"rel="home"><imgclass="menu__item__link--brand__image"src="/images/icon.png"alt="TheBestJohn"><spanclass="menu__item__link--brand__label">TheBestJohn</span></a></div></div><divclass="menu__right-area"><divclass="menu__item"><aclass="menu__item__link"href="http://blog.thebestjohn.com/">Home</a></div><divclass="menu__item"><aclass="menu__item__link"href="http://blog.thebestjohn.com/about">About</a></div><divclass="menu__item"><aclass="menu__item__link"href="http://blog.thebestjohn.com/archives">Archives</a></div></div></div></nav><divclass="page-background"></div><divclass="content-container"><divclass="content-outer"><divclass="content-inner"itemscopeitemtype="https://schema.org/Blog"><articleclass="article"id="article"itemscopeitemtype="https://schema.org/BlogPosting"><h1class="article__title"itemprop="headline">Table based design: Why I loathe it, and you should too!</h1><divclass="article__meta"><timeclass="article__meta__time"datetime="2012-08-09T04:00:00.000Z"itemprop="datePublished">August 9th 2012</time><divclass="article__meta__categories"><aclass="article__meta__categories__item"href="/categories/Web-Dev/">Web Dev</a></div></div><hr><divclass="article__contents"><p>If there is one thing that grinds my gears it’s table based design and the “web development” companies that continue to use it.</p>
<p>Web development is one heck of an industry. It changes, transforms, and adapts. I feel that in order for you to call yourself a web developer, or your company a web development company you need to develop with the web.</p>
<p>Development as defined by dictionary.com is: the act or process of developing; growth; progress: child development; economic development.</p>
<p>Growth, progress! Our job as web developers is to promote growth and progress of the web. We must adapt as the web adapts. When a “web development” agency provides it’s clients with old, outdated, un-accessible, table-based, web development they are not only stifling the growth of the internet they are literally taking money out of business’ pockets.</p>
<p>So how does someone developing a table based website take money from people? Well lets look at it this way. Let us say that you “Bagels R us” want a website done by “<abbrtitle="We Make Old Table Based Websites For You">WMOTBWFY</abbr> Web Development Firm” and its going to cost you around $800 as you just want a static site with no <abbrtitle="Content Management System">CMS</abbr> and maybe a google maps. Well that’s great you take a look at the proofs and make some changes and within a week or two you have a shiny new site. Excellent! Now after a little while you start getting some good business. You expand, and open 2 new locations. Well your site now needs to be updated so you contact “<abbrtitle="We Make Old Table Based Websites For You">WMOTBWFY</abbr> Web Development Firm” and they make some updates for you and all seems to be going well. Until one day you find out that one of your most loyal customers (a man who lost his eyesight in a tragic origami accident) stops ordering bagels from you.</p>
<p>In fact it seems that almost all your vision impaired customers are leaving, as well as a lot of your other customers. What is happening?! Well my friend you have just been SEO‘d out… Google does not like websites based on tables and your website is no longer on the front page when you search for bagels in your respective city on Google. But why does Google not like your site? It looks amazing! Well Google doesn’t like your site because it is not accessible. Being accessible means that it is very easy for programs to read your site aloud for those who are visually impaired. Believe it or not even though someone is visually impaired they still can and do use the internet. When a page reader encounters a table based website it reads out a lot of information, most of which makes little to no sense to the person listening. So now that you’ve lost your spot on the top hits list on Google and all your visually impaired customers have defected to the new “We got Bagels” stores popping up everywhere you are effectively loosing money because a certain “web development” firm provided you with a state-of-the-art 90′s website for approximately the same price as a properly developed div based website.</p>
<p>Lets just pretend now for a moment that a few months later “WMOTBWFY Web Development Firm” goes out of business. they aren’t getting many customers and business was too slow to pay for all those “in-the-know” developers. Now you need to find a new developer to work on your site. So you come to hire me and say “Hey John! Bagels R’ Us is in trouble! We have lost our spot on the Google front page and a large amount of our customer base has already defected to that smarmy new shop!”. I now have to tell you that your website needs a complete redesign and guess what. It’s going to cost about $900-$1000 now, unless you want new graphics. Why is it so much more than the original site though? Well Not only is the old site’s code useless the new web developer would need to piece the graphics that were cut apart by the table based design back together. At the end of the day “WMOTBWFY Web Development Firm” not only took your money once (by making it necessary to re-develop your site) they took who knows how much of your money a second way (defected customers).</p>
<p>Table based design is dead. If any developers are out there reading this please, for the love of God, start learning how to properly make div based websites styled with CSS. For you business out there please ask any possible web development firms, freelancers, or friends if they use table based development before you make something that stifles the development of the internet and costs you money.</p>
</div><divclass="article__author"itemscopeitemprop="author"itemtype="https://schema.org/Person"><imgclass="article__author__image"src="/images/avatar.jpg"alt="John Warren"><aclass="article__author__link"title="About John Warren"rel="author">John Warren</a><pclass="article__author__desc">Just a place to make stuff</p><divclass="article__author__socials"><aclass="article__author__socials__item"href="/atom.xml"title="rss"target="_blank"><iclass="fa fa-rss"></i></a></div><metaitemprop="name"content="John Warren"></div><divclass="sharer"id="sharer"><divclass="sharer-inner"><divclass="sharer__right"><buttonclass="sharer__item"id="sharer-facebook"><iclass="fa fa-facebook-official"></i></button><buttonclass="sharer__item"id="sharer-twitter"><iclass="fa fa-twitter"></i></button><buttonclass="sharer__item"id="sharer-pinterest"><iclass="fa fa-pinterest"></i></button><buttonclass="sharer__item"id="sharer-pocket"><iclass="fa fa-get-pocket"></i></button></div></div></div><!-- Disqus Code--><divid="disqus_thread"></div><script>(function(){
vard=document,s=d.createElement('script');
s.src='//thebestjohn.disqus.com/embed.js';
s.setAttribute('data-timestamp',+newDate());
(d.head||d.body).appendChild(s);
})();</script><noscript>Enable JavaScript to see comments.</noscript><!-- Meta Tags for Structured Data--><metaitemprop="dateModified"content="2018-04-30T15:07:13.459Z"><metaitemprop="articleBody"content="If there is one thing that grinds my gears it’s table based design and the “web development” companies that continue to use it.
