{"id":364,"date":"2015-11-28T10:51:15","date_gmt":"2015-11-27T23:51:15","guid":{"rendered":"http:\/\/scipilot.org\/blog\/?p=364"},"modified":"2015-12-04T17:45:31","modified_gmt":"2015-12-04T06:45:31","slug":"motif-v2-0-responsive-redesign","status":"publish","type":"post","link":"https:\/\/scipilot.org\/blog\/2015\/11\/28\/motif-v2-0-responsive-redesign\/","title":{"rendered":"MOTIf v2.0 &#8211; responsive redesign"},"content":{"rendered":"<p><a href=\"https:\/\/scipilot.org\/blog\/wp-content\/uploads\/2015\/11\/IMG_2541.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-377 size-medium alignleft\" src=\"https:\/\/scipilot.org\/blog\/wp-content\/uploads\/2015\/11\/IMG_2541-300x225.jpg\" alt=\"\" width=\"300\" height=\"225\" srcset=\"https:\/\/scipilot.org\/blog\/wp-content\/uploads\/2015\/11\/IMG_2541-300x225.jpg 300w, https:\/\/scipilot.org\/blog\/wp-content\/uploads\/2015\/11\/IMG_2541.jpg 800w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a>After 8 years the <a href=\"http:\/\/www.motif.org.au\/home\">MOTIf website<\/a> was starting to show it&#8217;s age, visually at least.<\/p>\n<p>While I have performed\u00a0regular technical updates to keep it browser compatible and futureproofed, we made a\u00a0fixed-layout decision (rather than fluid) in 2007 and so has it never worked well on these newfangled smart phones and phablet whotnots. Sadly\u00a0though, the main driver for the recent redesign was actually a need to distance ourselves from some\u00a0unscrupulous people tacitly claiming the site was their own! We\u00a0decided it was time to rebrand the site, and introduce the key people in the team on a new &#8220;About Us&#8221; page &#8211; the site has previously had\u00a0somewhat of an air of mystery behind it, for&#8230; reasons (as the kids say nowadays).<\/p>\n<p>So I thought it was time for a complete front-end rebuild, and dusted off everything I learned while working at Deepend building what were cutting-edge responsive sites (three or four years ago now). We spent huge efforts pioneering in this field, and even built our own front-end framework\/reset\/bootstrap.<\/p>\n<p>Seeing as I&#8217;m working\u00a0voluntarily on the site now, my time is a scarce resource so I decided to stand on the giant&#8217;s shoulders of <a href=\"http:\/\/getbootstrap.com\/components\/\">Twitter Bootstrap<\/a> &#8211; replacing the good work that Blueprint served the site\u00a0since\u00a02007. Blueprint was great as a reset and grid system, but came before responsive design had been invented and would have required an m-site (remember those?). TBS 4 is about to come out but it&#8217;s not even in RC yet, so I chose TBS3 which I&#8217;m relatively familiar with. (The only thing I don&#8217;t like about TBS is it comes with &#8220;style&#8221; which you have to get rid of, rather than it being a purely vanilla reset and grid framework.)<\/p>\n<p>One of the great tools we used at Deepend was <a href=\"http:\/\/www.browsersync.io\/docs\/\">BrowserSync<\/a>\u00a0which upgrades\u00a0you into the\u00a0robot octopus required for responsive testing on multiple devices. It automatically reloads the pages after you&#8217;ve edited the source, but also sync&#8217;s the navigation and even scrolling across all devices &#8211; it&#8217;s quite amazing to see it working.<\/p>\n<p><iframe loading=\"lazy\" src=\"https:\/\/www.youtube.com\/embed\/h8aL3Qrb-AI\" width=\"420\" height=\"315\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/p>\n<p><a href=\"https:\/\/scipilot.org\/blog\/wp-content\/uploads\/2015\/11\/Screen-Shot-2015-11-28-at-10.46.53-am.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-368\" src=\"https:\/\/scipilot.org\/blog\/wp-content\/uploads\/2015\/11\/Screen-Shot-2015-11-28-at-10.46.53-am.png\" alt=\"Screen Shot 2015-11-28 at 10.46.53 am\" width=\"500\" height=\"421\" srcset=\"https:\/\/scipilot.org\/blog\/wp-content\/uploads\/2015\/11\/Screen-Shot-2015-11-28-at-10.46.53-am.png 500w, https:\/\/scipilot.org\/blog\/wp-content\/uploads\/2015\/11\/Screen-Shot-2015-11-28-at-10.46.53-am-300x253.png 300w\" sizes=\"auto, (max-width: 500px) 100vw, 500px\" \/><\/a><\/p>\n<p>While pondering a new front-end build, I\u00a0realised I&#8217;ve now\u00a0changed allegiences\u00a0from <a href=\"http:\/\/gruntjs.com\/\">Grunt<\/a> to <a href=\"http:\/\/gulpjs.com\/\">Gulp<\/a>. I was a great fan of Grunt, so the transition was hesitant but there is a certain beauty and simplicity to the concept of Gulp in which\u00a0I&#8217;m more keen to invest time (than learning more ad-hoc config formats). I&#8217;ve been using it recently with a node.js\/redis application (SciWriter &#8211; coming soon!) and it just feels more like an integral part of the system, being in Javascript and allowing interopability with the server codebase if required. Also the logo is far\u00a0less frightening.<\/p>\n<p>I was pleased to see there is now an official version of <a href=\"https:\/\/github.com\/twbs\/bootstrap-sass\">Bootstrap w&#8217; SASS<\/a>, (rather than the previous third-party version), as I&#8217;m more a fan of <a href=\"http:\/\/sass-lang.com\/\">SASS<\/a> than <a href=\"http:\/\/lesscss.org\/\">LESS<\/a>. To be honest I can&#8217;t remember the details of why now, but after a couple of years of trying both in dozens of projects at Deepend we all plumped for SASS as the marginally\u00a0superior platform.<\/p>\n<p>To get SASS building in Gulp, I ditched my previous ally Compass for\u00a0<a href=\"https:\/\/github.com\/sindresorhus\/gulp-ruby-sass\">gulp-ruby-sass<\/a>. I found it relatively tricky to wire up the SASS build as the twbs\/bootstrap-sass documentation has <em>myriad<\/em> options including\u00a0combinations of Rails, Bower, Compass, Node, Sprockets, Mincer, Rake&#8230; aagh what! But after thinking it through and a short walk around the block I found gulp-ruby-sass was the right choice for me\u00a0&#8211;\u00a0as I am using <a href=\"http:\/\/bower.io\/\">Bower<\/a> and Gulp.<\/p>\n<p>Once the set of dependencies and technologies were chosen, the actual install ended up quite straightforward:<\/p>\n<ul>\n<li>update\/install Ruby, Node, NPM etc.<\/li>\n<li>install Bootstrap with Bower<\/li>\n<li>install Gulp with Node NPM<\/li>\n<li>install Browsersync and Ruby-SAS into\u00a0Gulp<\/li>\n<\/ul>\n<p>I set up a src folder in the site with some news .gitignore&#8217;s for bower_components, sass_cache and node_modules, and then created a JS\u00a0and CSS\u00a0build in the gulpfile.<\/p>\n<p>As I am migrating an existing site, I decided to use the SCSS format (rather than SASS). The great thing about SCSS being\u00a0a superset of CSS is that I could just drop the original 2007 motif.css (designed over Blueprint) into the src\/scss directory and start migrating to\u00a0the new site.\u00a0I much prefer a format closer to CSS and I am not much of a fan of oversimplified syntax transpilers such as Coffeescript. It just feels like <em>yet another language<\/em> to learn, and\u00a0takes your knowledge further from the the true W3C stack &#8211; all for a few braces?<\/p>\n<p>Now I was ready to splice the BS3 &#8220;starter&#8221; template header into the site&#8217;s header view template, fiddle around a little with the JS\/CSS imports and see what the site looked like for fun&#8230; I was actually pretty amazed to see the site looked relatively intact and was already responsive! I believe this is testament to the semantic markup approach of both BS and my previous work on the site &#8211; the old and new CSS didn&#8217;t conflict directly, but intermingled relatively harmlessly.<\/p>\n<p>Now the job was to go through the original CSS and HTML finding any specific classes (and div structures of course) for Blueprint or my custom elements like rounded corners\u00a0from years before border-radius. (I did chuckle\u00a0when the major browser finally implemented border-radius and box-shadow &#8211; just in time for flat design.) This was the &#8220;easy but long&#8221; task, after the quick wins of importing such power from all these great frameworks.<\/p>\n<p>I am truly appreciative of tools such as Bootstrap, Gulp, Bower and SASS. Over the 30+ years I&#8217;ve been developing I have implemented similar frameworks or solutions for myself or my teams, before they existed publicly. I know how hard they are to get right.\u00a0It&#8217;s a real pleasure to use well designed tools built by people who really know what they&#8217;re used for. Plus\u00a0it&#8217;s a relief not to have to build it myself again as languages shift in and out of fashion! (Ah the memories, that old Perl CMS&#8230; countless\u00a0templating systems&#8230; the time we cleverly named &#8220;Deepstrap&#8221; then immediatley regretted Googling the name for trademarks.)<\/p>\n<p>Getting BrowserSync to work perfectly took a couple of attempts. I saw the &#8220;inbuilt server&#8221; wasn&#8217;t useful to me as I have a CMS and backend and it only serves flat HTML. So I tried the proxy, but it replaced all my nice SEO URLs and local domain with simple IP addresses, which defeated the routing. So I eventually built the snippet injection into my application itself &#8211; i.e. my web application is now &#8220;Browsersync Aware&#8221;.<\/p>\n<p>To do this, I first added a controller parameter to enable\u00a0browserSync in a session, but\u00a0then also configured it to be always-on in the DEV deployment (avoiding having to enable it in many\u00a0devices, but still allowing occasional debugging in production).\u00a0My body template\u00a0is now rendered thus:<\/p>\n<pre>&lt;body &lt;?= isset($body_id) ? 'id=\"'.$body_id.'\"' : '' ?&gt;&gt;\r\n&lt;?= isset($browserSync) ? '&lt;script async src=\"\/\/'.$_SERVER['SERVER_NAME'].':3000\/browser-sync\/browser-sync-client.2.9.11.js\"&gt;&lt;\/script&gt;'  : '' ?&gt;<\/pre>\n<p>The gulpfile is still evolving, but this is how it currently works. Everything is built on-change via watch and deployed directly to the site directories.<\/p>\n<pre>\/\/ MOTIf Front-end src build - Gulp file\r\n\r\n\/\/ Define base folders\r\nvar src = 'src';\r\nvar dest = '..';\r\n\r\nvar gulp = require('gulp');\r\nvar concat = require('gulp-concat');\r\nvar rename = require('gulp-rename');\r\nvar uglify = require('gulp-uglify');\r\nvar sass = require('gulp-ruby-sass');\r\nvar debug = require('gulp-debug');\r\nvar browserSync = require('browser-sync').create();\r\n\r\n\r\n\/\/ JS build\r\ngulp.task('scripts', function() {\r\n return gulp.src(src+'\/js\/*.js')\r\n  \/\/  .pipe(debug({title: 'debugjs:'}))\r\n  .pipe(concat('main.js'))\r\n  .pipe(rename({suffix: '.min'}))\r\n  .pipe(uglify())\r\n  .pipe(gulp.dest(dest+'\/js'))\r\n  .pipe(browserSync.stream())\r\n  ;\r\n});\r\n\r\n\/\/ CSS build\r\ngulp.task('sass', function() {\r\n \/\/return sass(src+'\/scss\/**\/*.scss', {verbose: false})\/* NB: glob fixed a frustrating \"0 items\" problem! *\/\r\n return sass(src+'\/scss\/styles.scss', {verbose: false})\/\/ prevent multi-compile of includes in this folder - it's a pure tree.\r\n  .on('error', function (err) {\r\n   console.error('Error!', err.message);\r\n  })\r\n  \/\/.pipe(debug({title: 'debugsass:'}))\r\n  .pipe(rename({suffix: '.min'}))\r\n  .pipe(gulp.dest(dest+'\/css'))\r\n  .pipe(browserSync.stream())\r\n  ;\r\n});\r\n\r\n\/\/ hawtcher bee watcher\r\ngulp.task('watch', function() {\r\n browserSync.init({\r\n  notify: false \/\/ the \"connected to browsersync\" message gets in the way of the nav!\r\n });\r\n gulp.watch(src+'\/js\/*.js', ['scripts']);\r\n gulp.watch(src+'\/scss\/*.scss', ['sass']);\r\n gulp.watch('..\/system\/application\/views\/**\/*.php').on('change', browserSync.reload);\r\n gulp.watch(src+'\/images\/**\/*', ['images']);\r\n});\r\n\r\n\/\/ Go!\r\ngulp.task('default', ['scripts', 'sass', 'watch', 'browser-sync']);\r\n<\/pre>\n<p>Another useful responsive developer tool is the Chrome device-simulator which performs viewport and user-agent spoofing. However be warned that it doesn&#8217;t accomodate the extra cruft the actual device browsers incur such as address bar, tabs, status bar etc. so the actual viewports will be significantly\u00a0smaller. Real device testing is still the only way to be sure, but paid services such as <a href=\"https:\/\/www.browserstack.com\/\">BrowserStack<\/a>\u00a0can also help automate this.<\/p>\n<p><a href=\"https:\/\/scipilot.org\/blog\/wp-content\/uploads\/2015\/11\/Screen-Shot-2015-11-28-at-10.37.49-am.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-366 size-full\" src=\"https:\/\/scipilot.org\/blog\/wp-content\/uploads\/2015\/11\/Screen-Shot-2015-11-28-at-10.37.49-am.png\" alt=\"Screen Shot 2015-11-28 at 10.37.49 am\" width=\"400\" height=\"592\" srcset=\"https:\/\/scipilot.org\/blog\/wp-content\/uploads\/2015\/11\/Screen-Shot-2015-11-28-at-10.37.49-am.png 400w, https:\/\/scipilot.org\/blog\/wp-content\/uploads\/2015\/11\/Screen-Shot-2015-11-28-at-10.37.49-am-203x300.png 203w\" sizes=\"auto, (max-width: 400px) 100vw, 400px\" \/><\/a><\/p>\n<p>There&#8217;s still a way to go\u00a0with the redesign.\u00a0I&#8217;ve only redesigned the public-facing pages not the inner areas where the tests are done,\u00a0but I&#8217;m pretty pleased to bring the site (almost) up to date, and therefore to allow\u00a0the experimenters to administer these tests on more convenient devices.<\/p>\n<p>With over 5,000 registered professionals and 12,000 children tested so far, the site has gradually become a\u00a0valuable\u00a0resource to many teachers and clinicians. I want to ensure it&#8217;s\u00a0kept usable and useful into the future, for the next generation of kids who&#8217;ll need help with learning to read and write.<\/p>\n<p><a href=\"https:\/\/scipilot.org\/blog\/wp-content\/uploads\/2015\/11\/Screen-Shot-2015-11-28-at-10.33.26-am.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-367 size-full\" src=\"https:\/\/scipilot.org\/blog\/wp-content\/uploads\/2015\/11\/Screen-Shot-2015-11-28-at-10.33.26-am.png\" alt=\"Screen Shot 2015-11-28 at 10.33.26 am\" width=\"500\" height=\"313\" srcset=\"https:\/\/scipilot.org\/blog\/wp-content\/uploads\/2015\/11\/Screen-Shot-2015-11-28-at-10.33.26-am.png 500w, https:\/\/scipilot.org\/blog\/wp-content\/uploads\/2015\/11\/Screen-Shot-2015-11-28-at-10.33.26-am-300x188.png 300w\" sizes=\"auto, (max-width: 500px) 100vw, 500px\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>After 8 years the MOTIf website was starting to show it&#8217;s age, visually at least. While I have performed\u00a0regular technical updates to keep it browser compatible and futureproofed, we made a\u00a0fixed-layout decision (rather than fluid) in 2007 and so has &hellip; <a href=\"https:\/\/scipilot.org\/blog\/2015\/11\/28\/motif-v2-0-responsive-redesign\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[64,36],"class_list":["post-364","post","type-post","status-publish","format-standard","hentry","category-projects","tag-motif","tag-programming"],"_links":{"self":[{"href":"https:\/\/scipilot.org\/blog\/wp-json\/wp\/v2\/posts\/364","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/scipilot.org\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/scipilot.org\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/scipilot.org\/blog\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/scipilot.org\/blog\/wp-json\/wp\/v2\/comments?post=364"}],"version-history":[{"count":10,"href":"https:\/\/scipilot.org\/blog\/wp-json\/wp\/v2\/posts\/364\/revisions"}],"predecessor-version":[{"id":378,"href":"https:\/\/scipilot.org\/blog\/wp-json\/wp\/v2\/posts\/364\/revisions\/378"}],"wp:attachment":[{"href":"https:\/\/scipilot.org\/blog\/wp-json\/wp\/v2\/media?parent=364"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/scipilot.org\/blog\/wp-json\/wp\/v2\/categories?post=364"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/scipilot.org\/blog\/wp-json\/wp\/v2\/tags?post=364"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}