{"id":2889,"date":"2014-10-27T15:25:41","date_gmt":"2014-10-27T21:25:41","guid":{"rendered":"http:\/\/commandbase.ca\/?p=2889"},"modified":"2017-08-28T16:19:48","modified_gmt":"2017-08-28T22:19:48","slug":"website-evolution-saskatchewan-spca","status":"publish","type":"post","link":"https:\/\/commandbase.ca\/website-evolution-saskatchewan-spca\/","title":{"rendered":"Website Evolution: The Saskatchewan SPCA"},"content":{"rendered":"<p>In our ongoing effort to show you some neat-oh before &amp; after shots of some of the websites we&#8217;ve worked on, next up on our list is The Saskatchewan SPCA. We&#8217;re wimps when it comes to animals, and jumped at the opportunity to redesign their website. While the old version of their website worked in the early years of the internet, people grew to expect more images, more information, and most importantly, an easier form of navigation.<\/p>\n<div id=\"attachment_1487\" style=\"width: 667px\" class=\"wp-caption aligncenter\"><img aria-describedby=\"caption-attachment-1487\" loading=\"lazy\" class=\"wp-image-1487 size-large\" src=\"http:\/\/commandbase.ca\/app\/uploads\/2014\/08\/Screenshot-2014-08-26-11.11.08-850x422.png\" alt=\"Old website design sspca\" width=\"657\" height=\"326\" srcset=\"https:\/\/commandbase.ca\/app\/uploads\/2014\/08\/Screenshot-2014-08-26-11.11.08-850x422.png 850w, https:\/\/commandbase.ca\/app\/uploads\/2014\/08\/Screenshot-2014-08-26-11.11.08-300x148.png 300w, https:\/\/commandbase.ca\/app\/uploads\/2014\/08\/Screenshot-2014-08-26-11.11.08.png 1277w\" sizes=\"(max-width: 657px) 100vw, 657px\" \/><p id=\"caption-attachment-1487\" class=\"wp-caption-text\">Old Sask SPCA Website Design<\/p><\/div>\n<p>The old version was built using the ancient method of html iframes. Making it hard to update just about anything,but allowing the navigation to remain in one file, while it loads the rest in alternative frames. This type of setup required\u00a0constant update requests to\u00a0their former web developer, and the ongoing bills to go along with it. I cant rip their\u00a0old site\u00a0too hard. If it weren&#8217;t for this method of building websites, young 12 year old Corbin wouldn&#8217;t have been able to manage his hockey teams Geocities website (Go Flyers!). Fortunately I picked up a few skills in the\u00a0last 14 years, and we had big plans for changes.<\/p>\n<h3>A Modern Clean Website Design<\/h3>\n<p>We knew the update had to be fresh, new, and bring this non profit into the modern era. A site that they could update themselves, and really have the site work for them, rather than just becoming another brochure-ware website.\u00a0We pitched the SSPCA a modern, clean, minimalistic website design that provided 4 clear actions.<\/p>\n<ol>\n<li>Encourage\u00a0the user feel emotion via strong imagery that randomizes on refresh.<em> (That sad looking dog, that&#8217;s Finn, my family dog. He&#8217;s not normally sad. What-up Finnigan?!)<\/em><\/li>\n<li>Establish credibility\u00a0via Call to Actions \/ Hero Text<\/li>\n<li>Entice users to make an online donation<\/li>\n<li>Allow the user to find the information they&#8217;re after within 2-3 clicks.<\/li>\n<\/ol>\n<p>We wanted the navigation to really up its game, and be easily found on all pages. Primary navigation would sit up top in the white navigation bar along with their logo, while secondary navigation would find its way to the left sidebar on pages that required it.<\/p>\n<p>We pitched the no dropdowns treatment on this website, as most donators &amp; members\u00a0were +40, and if you&#8217;ve ever watched your parents or grandparents browse the internet, you&#8217;ll know that this particular age bracket\u00a0doesn&#8217;t always play nice with hover state dropdowns.<\/p>\n<div id=\"attachment_1472\" style=\"width: 667px\" class=\"wp-caption aligncenter\"><img aria-describedby=\"caption-attachment-1472\" loading=\"lazy\" class=\"wp-image-1472 size-large\" src=\"http:\/\/commandbase.ca\/app\/uploads\/2013\/11\/SSPCA-850x706.jpg\" alt=\"SSPCA\" width=\"657\" height=\"545\" srcset=\"https:\/\/commandbase.ca\/app\/uploads\/2013\/11\/SSPCA-850x706.jpg 850w, https:\/\/commandbase.ca\/app\/uploads\/2013\/11\/SSPCA-300x249.jpg 300w, https:\/\/commandbase.ca\/app\/uploads\/2013\/11\/SSPCA.jpg 1280w\" sizes=\"(max-width: 657px) 100vw, 657px\" \/><p id=\"caption-attachment-1472\" class=\"wp-caption-text\">New Sask SPCA Website Design<\/p><\/div>\n<h3>The New Sask SPCA Website Design<\/h3>\n<p>On top of this all, we wanted the website to be easily accesible across all platforms. We wanted a user browsing on a beat up Android to have as close of an experience as possible to the user browsing on their brand new iPad, or Laptop.<\/p>\n<p>We built the Sask SPCA website on our favourite responsive framework, Zurb Foundation. Knowing their user base were primarily rural Saskatchewan folk, we assumed\u00a0their devices may not be the most modern, and may be running some old versions of Internet Explorer. We used Foundation 3, as it played nice with IE 8, and even IE7 with some css hacks in place. According to their analytics, we were right, as they still receive a fair amount of users using ie8. Fortunately the majority are using ie9 now, but in hindsight I&#8217;m happy we played it safe.<\/p>\n<p>While the folks at the SSPCA worked on revising some of their content\u00a0from their headquarters in Saskatoon, Saskatchewan, we were hard at work on their website design in\u00a0Regina, Saskatchewan. This project was a testament to\u00a0working remotely.<\/p>\n<p><img loading=\"lazy\" class=\"aligncenter size-large wp-image-1471\" src=\"http:\/\/commandbase.ca\/app\/uploads\/2013\/11\/mobile-SSPCA-850x564.jpg\" alt=\"mobile-SSPCA\" width=\"657\" height=\"435\" srcset=\"https:\/\/commandbase.ca\/app\/uploads\/2013\/11\/mobile-SSPCA-850x564.jpg 850w, https:\/\/commandbase.ca\/app\/uploads\/2013\/11\/mobile-SSPCA-300x199.jpg 300w\" sizes=\"(max-width: 657px) 100vw, 657px\" \/><\/p>\n<p>We&#8217;re extremely pleased with how the whole website turned out. The Sask SPCA now has the ability to share more education articles, accept different types of donations, and easily update their own content without the constant need to reach out to a web developer. Their recent Animal Welfare Conference was a knockout event that brought in people from all across North America to learn about the latest trends in the Animal Welfare and Animal Shelter industries. We&#8217;re extremely pleased to have been a part of it,\u00a0and are loving the ongoing work we provide to the SSPCA.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In our ongoing effort to show you some neat-oh before &amp; after shots of some of the websites we&#8217;ve worked on, next up on our list is The Saskatchewan SPCA. We&#8217;re wimps when it comes to animals, and jumped at the opportunity to redesign their website. While the old version of their website worked in<a class=\"excerpt-read-more\" href=\"https:\/\/commandbase.ca\/website-evolution-saskatchewan-spca\/\" title=\"ReadWebsite Evolution: The Saskatchewan SPCA\">&#8230; Read more &raquo;<\/a><\/p>\n","protected":false},"author":3,"featured_media":3736,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_mi_skip_tracking":false},"categories":[20],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v18.5.1 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Website Evolution: The Saskatchewan SPCA - Command Base<\/title>\n<meta name=\"description\" content=\"Check out the before and after of the Sask SPCA&#039;s website design. Find out the stratetegic decisions we made in order to optimize this websites layout.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/commandbase.ca\/website-evolution-saskatchewan-spca\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Website Evolution: The Saskatchewan SPCA - Command Base\" \/>\n<meta property=\"og:description\" content=\"Check out the before and after of the Sask SPCA&#039;s website design. Find out the stratetegic decisions we made in order to optimize this websites layout.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/commandbase.ca\/website-evolution-saskatchewan-spca\/\" \/>\n<meta property=\"og:site_name\" content=\"Command Base\" \/>\n<meta property=\"article:published_time\" content=\"2014-10-27T21:25:41+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2017-08-28T22:19:48+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/commandbase.ca\/app\/uploads\/2014\/10\/sspca.png\" \/>\n\t<meta property=\"og:image:width\" content=\"2560\" \/>\n\t<meta property=\"og:image:height\" content=\"1443\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary\" \/>\n<meta name=\"twitter:creator\" content=\"@commandbase\" \/>\n<meta name=\"twitter:site\" content=\"@commandbase\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Joey Postma\" \/>\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\":\"Organization\",\"@id\":\"https:\/\/commandbase.ca\/#organization\",\"name\":\"Command Base Creative Design Inc\",\"url\":\"https:\/\/commandbase.ca\/\",\"sameAs\":[\"https:\/\/twitter.com\/commandbase\"],\"logo\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/commandbase.ca\/#logo\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/commandbase.ca\/app\/uploads\/2022\/03\/Command-Base-Logo-Vertical-Transparent.png\",\"contentUrl\":\"https:\/\/commandbase.ca\/app\/uploads\/2022\/03\/Command-Base-Logo-Vertical-Transparent.png\",\"width\":350,\"height\":233,\"caption\":\"Command Base Creative Design Inc\"},\"image\":{\"@id\":\"https:\/\/commandbase.ca\/#logo\"}},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/commandbase.ca\/#website\",\"url\":\"https:\/\/commandbase.ca\/\",\"name\":\"Command Base\",\"description\":\"Regina \/ Toronto \/ Halifax Website Design\",\"publisher\":{\"@id\":\"https:\/\/commandbase.ca\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/commandbase.ca\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/commandbase.ca\/website-evolution-saskatchewan-spca\/#primaryimage\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/commandbase.ca\/app\/uploads\/2014\/10\/sspca.png\",\"contentUrl\":\"https:\/\/commandbase.ca\/app\/uploads\/2014\/10\/sspca.png\",\"width\":2560,\"height\":1443},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/commandbase.ca\/website-evolution-saskatchewan-spca\/#webpage\",\"url\":\"https:\/\/commandbase.ca\/website-evolution-saskatchewan-spca\/\",\"name\":\"Website Evolution: The Saskatchewan SPCA - Command Base\",\"isPartOf\":{\"@id\":\"https:\/\/commandbase.ca\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/commandbase.ca\/website-evolution-saskatchewan-spca\/#primaryimage\"},\"datePublished\":\"2014-10-27T21:25:41+00:00\",\"dateModified\":\"2017-08-28T22:19:48+00:00\",\"description\":\"Check out the before and after of the Sask SPCA's website design. Find out the stratetegic decisions we made in order to optimize this websites layout.\",\"breadcrumb\":{\"@id\":\"https:\/\/commandbase.ca\/website-evolution-saskatchewan-spca\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/commandbase.ca\/website-evolution-saskatchewan-spca\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/commandbase.ca\/website-evolution-saskatchewan-spca\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/commandbase.ca\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Website Evolution: The Saskatchewan SPCA\"}]},{\"@type\":\"Article\",\"@id\":\"https:\/\/commandbase.ca\/website-evolution-saskatchewan-spca\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/commandbase.ca\/website-evolution-saskatchewan-spca\/#webpage\"},\"author\":{\"@id\":\"https:\/\/commandbase.ca\/#\/schema\/person\/016128cb92b5e1469791ef9287d2f3fd\"},\"headline\":\"Website Evolution: The Saskatchewan SPCA\",\"datePublished\":\"2014-10-27T21:25:41+00:00\",\"dateModified\":\"2017-08-28T22:19:48+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/commandbase.ca\/website-evolution-saskatchewan-spca\/#webpage\"},\"wordCount\":701,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/commandbase.ca\/#organization\"},\"image\":{\"@id\":\"https:\/\/commandbase.ca\/website-evolution-saskatchewan-spca\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/commandbase.ca\/app\/uploads\/2014\/10\/sspca.png\",\"articleSection\":[\"Design\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/commandbase.ca\/website-evolution-saskatchewan-spca\/#respond\"]}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/commandbase.ca\/#\/schema\/person\/016128cb92b5e1469791ef9287d2f3fd\",\"name\":\"Joey Postma\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/commandbase.ca\/#personlogo\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/2bf4f7d8a89efa599a9fbfd639436de7?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/2bf4f7d8a89efa599a9fbfd639436de7?s=96&d=mm&r=g\",\"caption\":\"Joey Postma\"},\"url\":\"https:\/\/commandbase.ca\/author\/postmaj\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Website Evolution: The Saskatchewan SPCA - Command Base","description":"Check out the before and after of the Sask SPCA's website design. Find out the stratetegic decisions we made in order to optimize this websites layout.","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:\/\/commandbase.ca\/website-evolution-saskatchewan-spca\/","og_locale":"en_US","og_type":"article","og_title":"Website Evolution: The Saskatchewan SPCA - Command Base","og_description":"Check out the before and after of the Sask SPCA's website design. Find out the stratetegic decisions we made in order to optimize this websites layout.","og_url":"https:\/\/commandbase.ca\/website-evolution-saskatchewan-spca\/","og_site_name":"Command Base","article_published_time":"2014-10-27T21:25:41+00:00","article_modified_time":"2017-08-28T22:19:48+00:00","og_image":[{"width":2560,"height":1443,"url":"https:\/\/commandbase.ca\/app\/uploads\/2014\/10\/sspca.png","type":"image\/png"}],"twitter_card":"summary","twitter_creator":"@commandbase","twitter_site":"@commandbase","twitter_misc":{"Written by":"Joey Postma","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Organization","@id":"https:\/\/commandbase.ca\/#organization","name":"Command Base Creative Design Inc","url":"https:\/\/commandbase.ca\/","sameAs":["https:\/\/twitter.com\/commandbase"],"logo":{"@type":"ImageObject","@id":"https:\/\/commandbase.ca\/#logo","inLanguage":"en-US","url":"https:\/\/commandbase.ca\/app\/uploads\/2022\/03\/Command-Base-Logo-Vertical-Transparent.png","contentUrl":"https:\/\/commandbase.ca\/app\/uploads\/2022\/03\/Command-Base-Logo-Vertical-Transparent.png","width":350,"height":233,"caption":"Command Base Creative Design Inc"},"image":{"@id":"https:\/\/commandbase.ca\/#logo"}},{"@type":"WebSite","@id":"https:\/\/commandbase.ca\/#website","url":"https:\/\/commandbase.ca\/","name":"Command Base","description":"Regina \/ Toronto \/ Halifax Website Design","publisher":{"@id":"https:\/\/commandbase.ca\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/commandbase.ca\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"ImageObject","@id":"https:\/\/commandbase.ca\/website-evolution-saskatchewan-spca\/#primaryimage","inLanguage":"en-US","url":"https:\/\/commandbase.ca\/app\/uploads\/2014\/10\/sspca.png","contentUrl":"https:\/\/commandbase.ca\/app\/uploads\/2014\/10\/sspca.png","width":2560,"height":1443},{"@type":"WebPage","@id":"https:\/\/commandbase.ca\/website-evolution-saskatchewan-spca\/#webpage","url":"https:\/\/commandbase.ca\/website-evolution-saskatchewan-spca\/","name":"Website Evolution: The Saskatchewan SPCA - Command Base","isPartOf":{"@id":"https:\/\/commandbase.ca\/#website"},"primaryImageOfPage":{"@id":"https:\/\/commandbase.ca\/website-evolution-saskatchewan-spca\/#primaryimage"},"datePublished":"2014-10-27T21:25:41+00:00","dateModified":"2017-08-28T22:19:48+00:00","description":"Check out the before and after of the Sask SPCA's website design. Find out the stratetegic decisions we made in order to optimize this websites layout.","breadcrumb":{"@id":"https:\/\/commandbase.ca\/website-evolution-saskatchewan-spca\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/commandbase.ca\/website-evolution-saskatchewan-spca\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/commandbase.ca\/website-evolution-saskatchewan-spca\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/commandbase.ca\/"},{"@type":"ListItem","position":2,"name":"Website Evolution: The Saskatchewan SPCA"}]},{"@type":"Article","@id":"https:\/\/commandbase.ca\/website-evolution-saskatchewan-spca\/#article","isPartOf":{"@id":"https:\/\/commandbase.ca\/website-evolution-saskatchewan-spca\/#webpage"},"author":{"@id":"https:\/\/commandbase.ca\/#\/schema\/person\/016128cb92b5e1469791ef9287d2f3fd"},"headline":"Website Evolution: The Saskatchewan SPCA","datePublished":"2014-10-27T21:25:41+00:00","dateModified":"2017-08-28T22:19:48+00:00","mainEntityOfPage":{"@id":"https:\/\/commandbase.ca\/website-evolution-saskatchewan-spca\/#webpage"},"wordCount":701,"commentCount":0,"publisher":{"@id":"https:\/\/commandbase.ca\/#organization"},"image":{"@id":"https:\/\/commandbase.ca\/website-evolution-saskatchewan-spca\/#primaryimage"},"thumbnailUrl":"https:\/\/commandbase.ca\/app\/uploads\/2014\/10\/sspca.png","articleSection":["Design"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/commandbase.ca\/website-evolution-saskatchewan-spca\/#respond"]}]},{"@type":"Person","@id":"https:\/\/commandbase.ca\/#\/schema\/person\/016128cb92b5e1469791ef9287d2f3fd","name":"Joey Postma","image":{"@type":"ImageObject","@id":"https:\/\/commandbase.ca\/#personlogo","inLanguage":"en-US","url":"https:\/\/secure.gravatar.com\/avatar\/2bf4f7d8a89efa599a9fbfd639436de7?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/2bf4f7d8a89efa599a9fbfd639436de7?s=96&d=mm&r=g","caption":"Joey Postma"},"url":"https:\/\/commandbase.ca\/author\/postmaj\/"}]}},"_links":{"self":[{"href":"https:\/\/commandbase.ca\/wp-json\/wp\/v2\/posts\/2889"}],"collection":[{"href":"https:\/\/commandbase.ca\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/commandbase.ca\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/commandbase.ca\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/commandbase.ca\/wp-json\/wp\/v2\/comments?post=2889"}],"version-history":[{"count":3,"href":"https:\/\/commandbase.ca\/wp-json\/wp\/v2\/posts\/2889\/revisions"}],"predecessor-version":[{"id":2901,"href":"https:\/\/commandbase.ca\/wp-json\/wp\/v2\/posts\/2889\/revisions\/2901"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/commandbase.ca\/wp-json\/wp\/v2\/media\/3736"}],"wp:attachment":[{"href":"https:\/\/commandbase.ca\/wp-json\/wp\/v2\/media?parent=2889"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/commandbase.ca\/wp-json\/wp\/v2\/categories?post=2889"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}