{"id":2423,"date":"2013-04-23T22:43:15","date_gmt":"2013-04-24T02:43:15","guid":{"rendered":"http:\/\/patorjk.com\/blog\/?p=2423"},"modified":"2026-03-02T22:45:30","modified_gmt":"2026-03-03T02:45:30","slug":"design-overhaul-part-1","status":"publish","type":"post","link":"https:\/\/patorjk.com\/blog\/2013\/04\/23\/design-overhaul-part-1\/","title":{"rendered":"Design Overhaul (part 1)"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Like a book being judged by its cover, people tend to judge an app by its UI. Since jumping into a web development job 3 years ago, I&#8217;ve done a fair amount of client side work. I&#8217;ve helped redesign legacy applications with cool new UIs to lots of praise, even though the new apps had less features. And I&#8217;ve seen customers balk at feature-rich products that had so-so interfaces. And it makes sense, people like to use stuff that looks good, and if you can&#8217;t be bothered to put work into the design, what does that mean for the rest of the app?<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">I&#8217;m not a designer, and most of the stuff on this site was created before I really knew much about design. So as a result, a lot of what&#8217;s here looks pretty meh. After writing my last post, I took a look at the <a href=\"http:\/\/patorjk.com\/text-color-fader\/\">text fader<\/a> that&#8217;s on this site and was kind of embarrised. I decided something needed to be done, so I started going through the various sections of this site and giving the layouts a much needed fresh coat of paint.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"alignright\"><a href=\"http:\/\/patorjk.com\/showdown\/\"><img decoding=\"async\" src=\"https:\/\/patorjk.com\/blog\/wp-content\/uploads\/2013\/04\/phone_200.png\" alt=\"\"\/><\/a><figcaption class=\"wp-element-caption\">Mobile Version<\/figcaption><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">The new designs aren&#8217;t amazing by any means, but I think they&#8217;re a step up, and hopefully they&#8217;ll provide a better user experience. I decided to use <a href=\"http:\/\/twitter.github.io\/bootstrap\/\">Twitter Bootstrap<\/a> for a lot of the basic look and feel, since it looks great and plays well with jQuery. I&#8217;ve also been trying to make the new layouts <a href=\"http:\/\/johnpolacek.github.io\/scrolldeck.js\/decks\/responsive\/\">responsive<\/a>, so that they also look good on mobile devices. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">I&#8217;m not allowed to bring a cell phone into work, so until last year, I avoided getting a smart phone. However, now that I have an Android, I use it all the time outside of work, and I&#8217;ve realized that I&#8217;ve made a big mistake by avoiding mobile development. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">So now that the background is out of the way, what has actually been updated so far?<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"http:\/\/patorjk.com\/text-color-fader\/\">Text Color Fader<\/a><br><p><br>The first app I remember writing for this site (~1999). I actually overhauled the underlying code base while I updated the layout. In re-writing the code, I ripped out all of the YUI stuff and opted to go with the very awesome <a href=\"http:\/\/bgrins.github.io\/spectrum\/\">jQuery Spectrum color picker<\/a>. The app&#8217;s layout was also tweaked so that it would work decently on a phone.<\/p><p>While figuring out how to work an ad into the mix, I came across a neat tutorial on how to make <a href=\"http:\/\/www.labnol.org\/internet\/google-adsense-responsive-design\/25252\/\">Adsense ads responsive<\/a>. So if you view the app on a phone, you&#8217;ll get a more mobile friendly ad :P.<\/p><\/li>\n\n\n\n<li><a href=\"http:\/\/patorjk.com\/showdown\/\">Social Media Showdown!<\/a><br><p><br>Only made layout changes for this app, but made sure it would scale down to a phone nicely.<\/p><\/li>\n\n\n\n<li><a href=\"http:\/\/patorjk.com\/programming\/tutorials\/vbarrays.htm\">VB Array Tutorial<\/a><br><\/li>\n\n\n\n<li><a href=\"http:\/\/patorjk.com\/programming\/vb6examples.htm\">VB 6.0 Example Archive<\/a><br><\/li>\n\n\n\n<li><a href=\"http:\/\/patorjk.com\/programming\/tutorials\/vb6codebank.htm\">VB 6.0 Code Bank<\/a><br><\/li>\n\n\n\n<li><a href=\"http:\/\/patorjk.com\/misc\/chainletters\/179waystoannoypeople.htm\">179 Ways to Annoy People<\/a><br><\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">There are several more sections of this site I&#8217;m going to overhaul, but figured I&#8217;d do a write-up of what&#8217;s been done so far. I&#8217;ll also probably go back an revisit some of the sections I&#8217;ve already done if I get some better ideas. If you have any suggestions for anything just let me know.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Like a book being judged by its cover, people tend to judge an app by its UI. Since jumping into a web development job 3 years ago, I&#8217;ve done a fair amount of client side work. I&#8217;ve helped redesign legacy applications with cool new UIs to lots of praise, even though the new apps had &hellip; <a href=\"https:\/\/patorjk.com\/blog\/2013\/04\/23\/design-overhaul-part-1\/\" class=\"more-link\">Continue reading <span class=\"screen-reader-text\">Design Overhaul (part 1)<\/span> <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[31,3],"tags":[],"class_list":["post-2423","post","type-post","status-publish","format-standard","hentry","category-development-thoughts","category-general-news"],"_links":{"self":[{"href":"https:\/\/patorjk.com\/blog\/wp-json\/wp\/v2\/posts\/2423","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/patorjk.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/patorjk.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/patorjk.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/patorjk.com\/blog\/wp-json\/wp\/v2\/comments?post=2423"}],"version-history":[{"count":23,"href":"https:\/\/patorjk.com\/blog\/wp-json\/wp\/v2\/posts\/2423\/revisions"}],"predecessor-version":[{"id":3825,"href":"https:\/\/patorjk.com\/blog\/wp-json\/wp\/v2\/posts\/2423\/revisions\/3825"}],"wp:attachment":[{"href":"https:\/\/patorjk.com\/blog\/wp-json\/wp\/v2\/media?parent=2423"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/patorjk.com\/blog\/wp-json\/wp\/v2\/categories?post=2423"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/patorjk.com\/blog\/wp-json\/wp\/v2\/tags?post=2423"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}