{"id":967,"date":"2013-10-13T22:58:33","date_gmt":"2013-10-13T22:58:33","guid":{"rendered":"http:\/\/benlevy.com\/blog\/?p=967"},"modified":"2013-10-26T22:41:02","modified_gmt":"2013-10-26T22:41:02","slug":"redesigning-site","status":"publish","type":"post","link":"https:\/\/benlevy.com\/blog\/redesigning-site\/","title":{"rendered":"Redesigning the Site"},"content":{"rendered":"<p>If you visit this site periodically, you would have noticed that the design has changed quite a bit. I started this site 11 years ago as static HTML files and eventually moved to dynamically generated pages. The site was  database-driven, used caching, and integrated with external systems, but is still used some old software patterns, and had a dated visual design. I had to redesign things from the ground up, but it resulted in a site that looks better, is easier to maintain, and does a better job of presenting content.<br \/>\n<!--more--><\/p>\n<h2>home page<\/h2>\n<p>The home page had a lot of unused space and still used tables for layout.  For the new page, I took a lot of inspiration from <a href=\"http:\/\/500px.com\/popular\">500px<\/a>.  Another inspiration for me was the <a href=\"http:\/\/en.wikipedia.org\/wiki\/Metro_(design_language)\">Metro<\/a> design used on Windows 8.  The new layout lets me mix up different kinds of content and incorporate images.  The home page is also designed the same way as other pages, so the whole site has a similar look and feel.<\/p>\n<div class=\"center\">\n<img decoding=\"async\" src=\"http:\/\/benlevy.com\/blog\/wp-content\/uploads\/2013\/10\/home.png\" title=\"home\" width=\"640\" \/>\n<\/div>\n<h2>the grid<\/h2>\n<p>I incorporated a <a href=\"http:\/\/www.onextrapixel.com\/2011\/09\/01\/grid-layouts-in-modern-web-design\/\">grid layout<\/a> to give me more flexibility in how content is displayed.  The example below shows how a larger cell can fit in with the smaller cells without disrupting the overall design.  In the future, I want to introduce a responsive design so the amount of cells will change depending on the size of the browser window.<br \/>\n<a href=\"http:\/\/www.onextrapixel.com\/2011\/09\/01\/grid-layouts-in-modern-web-design\/\" title=\"grid layout\"><\/a><\/p>\n<div class=\"center\">\n<img decoding=\"async\" src=\"http:\/\/benlevy.com\/blog\/wp-content\/uploads\/2013\/10\/pics.png\" title=\"pics\" width=\"640\" \/>\n<\/div>\n<h2>pics<\/h2>\n<p>The pics section is most important part of my site because it brings in most of the site&#8217;s revenue.  After attending a couple of <a href=\"https:\/\/sites.google.com\/site\/asiycevents\/\" title=\"AdSense in Your City\">AdSense in Your City<\/a> sessions, I already spent a lot of time optimizing the page.  The main changes were reducing the size of the site&#8217;s header, removing unused fields, and changing html structure.  These changes help make better use of the space on the screen and decrease the time is takes to render the page.<\/p>\n<div class=\"center\">\n<img decoding=\"async\" src=\"http:\/\/benlevy.com\/blog\/wp-content\/uploads\/2013\/10\/gallery.png\" title=\"gallery\" width=\"640\" \/>\n<\/div>\n<h2>blog<\/h2>\n<p>Work on the blog was the most difficult part.  I wanted to switch the blog system from <a href=\"http:\/\/b2evolution.net\/\">b2evolution<\/a> back to <a href=\"http:\/\/wordpress.org\/\">WordPress<\/a>.  There were basic scripts available, but I didn&#8217;t want to lose comments, private posts, etc.  Since there were no free solutions available, I decided to write one myself.  The <a href=\"https:\/\/github.com\/ben010783\/export_evo_script\">export_evo_script<\/a> is a small PHP script that exports SQL scripts for all your b2evo posts.  After getting WordPress up and running, I also moved the sidebar to the left to keep the site consistent. I also removed rarely used features (like the calendar).<\/p>\n<div class=\"center\">\n<img decoding=\"async\" src=\"http:\/\/benlevy.com\/blog\/wp-content\/uploads\/2013\/10\/blog.png\" title=\"blog\" width=\"640\" \/>\n<\/div>\n<h2>auto events<\/h2>\n<p>Most of the work on the auto event pages was to bring some consistency with the page layout.  I tried to make the share options and related links show up in the same place so the user has the same experience no matter what section of the site they&#8217;re on.  I also simplified the gallery functionality, so it required less HTML and had better CSS styling.<\/p>\n<div class=\"center\">\n<img decoding=\"async\" src=\"http:\/\/benlevy.com\/blog\/wp-content\/uploads\/2013\/10\/show.png\" title=\"show\" width=\"640\" \/>\n<\/div>\n<h2>image management<\/h2>\n<p>The <a href=\"http:\/\/benlevy.com\/4images\/\">Pics section<\/a> of this site is massive.  There are over 12,000 indexed and uniquely tagged pictures in the the pics section. It would usually take a whole staff to do that, so I had to think of a solution to let me do it in my free time. I cut out the unnecessary fields, autopopulated ones I had info on, added thumbnails, and rearranges the page to show more info on the page.  These changes let me quickly add metadata to pics even when I&#8217;m riding on the train.  <\/p>\n<div class=\"center\">\n<img decoding=\"async\" src=\"http:\/\/benlevy.com\/blog\/wp-content\/uploads\/2013\/10\/add_images.png\" title=\"add_images\" width=\"640\" \/>\n<\/div>\n<h2>coding<\/h2>\n<p>Before I started working on any of the changes you can see, I had to make a lot of back-end changes.  The site is held together with a custom CMS.  It&#8217;s an evolution of stuff I made from scratch years ago.  Before I started, I added the project to a <a href=\"http:\/\/git-scm.com\/\">git<\/a> repository so I could track changes and work on a redesign branch before making everything live.  All the work took nearly a year and over 250 commits.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>If you visit this site periodically, you would have noticed [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[45],"class_list":["post-967","post","type-post","status-publish","format-standard","hentry","category-uncategorized","tag-software-development"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.8 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Redesigning the Site - BenLevy.com<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/benlevy.com\/blog\/redesigning-site\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Redesigning the Site - BenLevy.com\" \/>\n<meta property=\"og:description\" content=\"If you visit this site periodically, you would have noticed [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/benlevy.com\/blog\/redesigning-site\/\" \/>\n<meta property=\"og:site_name\" content=\"BenLevy.com\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/ben.levy.pics\/\" \/>\n<meta property=\"article:published_time\" content=\"2013-10-13T22:58:33+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2013-10-26T22:41:02+00:00\" \/>\n<meta property=\"og:image\" content=\"http:\/\/benlevy.com\/blog\/wp-content\/uploads\/2013\/10\/home.png\" \/>\n<meta name=\"author\" content=\"Ben\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Ben\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/benlevy.com\/blog\/redesigning-site\/\",\"url\":\"https:\/\/benlevy.com\/blog\/redesigning-site\/\",\"name\":\"Redesigning the Site - BenLevy.com\",\"isPartOf\":{\"@id\":\"https:\/\/benlevy.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/benlevy.com\/blog\/redesigning-site\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/benlevy.com\/blog\/redesigning-site\/#primaryimage\"},\"thumbnailUrl\":\"http:\/\/benlevy.com\/blog\/wp-content\/uploads\/2013\/10\/home.png\",\"datePublished\":\"2013-10-13T22:58:33+00:00\",\"dateModified\":\"2013-10-26T22:41:02+00:00\",\"author\":{\"@id\":\"https:\/\/benlevy.com\/blog\/#\/schema\/person\/096f3f5593e048a92ee732130cc3b2f5\"},\"breadcrumb\":{\"@id\":\"https:\/\/benlevy.com\/blog\/redesigning-site\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/benlevy.com\/blog\/redesigning-site\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/benlevy.com\/blog\/redesigning-site\/#primaryimage\",\"url\":\"http:\/\/benlevy.com\/blog\/wp-content\/uploads\/2013\/10\/home.png\",\"contentUrl\":\"http:\/\/benlevy.com\/blog\/wp-content\/uploads\/2013\/10\/home.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/benlevy.com\/blog\/redesigning-site\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/benlevy.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Redesigning the Site\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/benlevy.com\/blog\/#website\",\"url\":\"https:\/\/benlevy.com\/blog\/\",\"name\":\"BenLevy.com\",\"description\":\"Ben Levy&#039;s Automotive Blog\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/benlevy.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/benlevy.com\/blog\/#\/schema\/person\/096f3f5593e048a92ee732130cc3b2f5\",\"name\":\"Ben\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/benlevy.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/1be339b16ecefcd43540f61ea477f0e71e4caa196d41e99392488cddb89eca86?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/1be339b16ecefcd43540f61ea477f0e71e4caa196d41e99392488cddb89eca86?s=96&d=mm&r=g\",\"caption\":\"Ben\"},\"url\":\"https:\/\/benlevy.com\/blog\/author\/ben\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Redesigning the Site - BenLevy.com","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/benlevy.com\/blog\/redesigning-site\/","og_locale":"en_US","og_type":"article","og_title":"Redesigning the Site - BenLevy.com","og_description":"If you visit this site periodically, you would have noticed [&hellip;]","og_url":"https:\/\/benlevy.com\/blog\/redesigning-site\/","og_site_name":"BenLevy.com","article_publisher":"https:\/\/www.facebook.com\/ben.levy.pics\/","article_published_time":"2013-10-13T22:58:33+00:00","article_modified_time":"2013-10-26T22:41:02+00:00","og_image":[{"url":"http:\/\/benlevy.com\/blog\/wp-content\/uploads\/2013\/10\/home.png","type":"","width":"","height":""}],"author":"Ben","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Ben","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/benlevy.com\/blog\/redesigning-site\/","url":"https:\/\/benlevy.com\/blog\/redesigning-site\/","name":"Redesigning the Site - BenLevy.com","isPartOf":{"@id":"https:\/\/benlevy.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/benlevy.com\/blog\/redesigning-site\/#primaryimage"},"image":{"@id":"https:\/\/benlevy.com\/blog\/redesigning-site\/#primaryimage"},"thumbnailUrl":"http:\/\/benlevy.com\/blog\/wp-content\/uploads\/2013\/10\/home.png","datePublished":"2013-10-13T22:58:33+00:00","dateModified":"2013-10-26T22:41:02+00:00","author":{"@id":"https:\/\/benlevy.com\/blog\/#\/schema\/person\/096f3f5593e048a92ee732130cc3b2f5"},"breadcrumb":{"@id":"https:\/\/benlevy.com\/blog\/redesigning-site\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/benlevy.com\/blog\/redesigning-site\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/benlevy.com\/blog\/redesigning-site\/#primaryimage","url":"http:\/\/benlevy.com\/blog\/wp-content\/uploads\/2013\/10\/home.png","contentUrl":"http:\/\/benlevy.com\/blog\/wp-content\/uploads\/2013\/10\/home.png"},{"@type":"BreadcrumbList","@id":"https:\/\/benlevy.com\/blog\/redesigning-site\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/benlevy.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Redesigning the Site"}]},{"@type":"WebSite","@id":"https:\/\/benlevy.com\/blog\/#website","url":"https:\/\/benlevy.com\/blog\/","name":"BenLevy.com","description":"Ben Levy&#039;s Automotive Blog","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/benlevy.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/benlevy.com\/blog\/#\/schema\/person\/096f3f5593e048a92ee732130cc3b2f5","name":"Ben","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/benlevy.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/1be339b16ecefcd43540f61ea477f0e71e4caa196d41e99392488cddb89eca86?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/1be339b16ecefcd43540f61ea477f0e71e4caa196d41e99392488cddb89eca86?s=96&d=mm&r=g","caption":"Ben"},"url":"https:\/\/benlevy.com\/blog\/author\/ben\/"}]}},"_links":{"self":[{"href":"https:\/\/benlevy.com\/blog\/wp-json\/wp\/v2\/posts\/967","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/benlevy.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/benlevy.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/benlevy.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/benlevy.com\/blog\/wp-json\/wp\/v2\/comments?post=967"}],"version-history":[{"count":24,"href":"https:\/\/benlevy.com\/blog\/wp-json\/wp\/v2\/posts\/967\/revisions"}],"predecessor-version":[{"id":1002,"href":"https:\/\/benlevy.com\/blog\/wp-json\/wp\/v2\/posts\/967\/revisions\/1002"}],"wp:attachment":[{"href":"https:\/\/benlevy.com\/blog\/wp-json\/wp\/v2\/media?parent=967"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/benlevy.com\/blog\/wp-json\/wp\/v2\/categories?post=967"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/benlevy.com\/blog\/wp-json\/wp\/v2\/tags?post=967"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}