Warning: file(): https:// wrapper is disabled in the server configuration by allow_url_fopen=0 in /home/sciptorg/public_html/blog/wp-content/plugins/ap-extended-mime-types/ap-extended-mime-types.php on line 40

Warning: file(https://scipilot.org/blog/wp-content/plugins/ap-extended-mime-types/mime-types.txt): failed to open stream: no suitable wrapper could be found in /home/sciptorg/public_html/blog/wp-content/plugins/ap-extended-mime-types/ap-extended-mime-types.php on line 40

Warning: Invalid argument supplied for foreach() in /home/sciptorg/public_html/blog/wp-content/plugins/ap-extended-mime-types/ap-extended-mime-types.php on line 42

Warning: Cannot modify header information - headers already sent by (output started at /home/sciptorg/public_html/blog/wp-content/plugins/ap-extended-mime-types/ap-extended-mime-types.php:40) in /home/sciptorg/public_html/blog/wp-includes/rest-api/class-wp-rest-server.php on line 1909

Warning: Cannot modify header information - headers already sent by (output started at /home/sciptorg/public_html/blog/wp-content/plugins/ap-extended-mime-types/ap-extended-mime-types.php:40) in /home/sciptorg/public_html/blog/wp-includes/rest-api/class-wp-rest-server.php on line 1909

Warning: Cannot modify header information - headers already sent by (output started at /home/sciptorg/public_html/blog/wp-content/plugins/ap-extended-mime-types/ap-extended-mime-types.php:40) in /home/sciptorg/public_html/blog/wp-includes/rest-api/class-wp-rest-server.php on line 1909

Warning: Cannot modify header information - headers already sent by (output started at /home/sciptorg/public_html/blog/wp-content/plugins/ap-extended-mime-types/ap-extended-mime-types.php:40) in /home/sciptorg/public_html/blog/wp-includes/rest-api/class-wp-rest-server.php on line 1909

Warning: Cannot modify header information - headers already sent by (output started at /home/sciptorg/public_html/blog/wp-content/plugins/ap-extended-mime-types/ap-extended-mime-types.php:40) in /home/sciptorg/public_html/blog/wp-includes/rest-api/class-wp-rest-server.php on line 1909

Warning: Cannot modify header information - headers already sent by (output started at /home/sciptorg/public_html/blog/wp-content/plugins/ap-extended-mime-types/ap-extended-mime-types.php:40) in /home/sciptorg/public_html/blog/wp-includes/rest-api/class-wp-rest-server.php on line 1909

Warning: Cannot modify header information - headers already sent by (output started at /home/sciptorg/public_html/blog/wp-content/plugins/ap-extended-mime-types/ap-extended-mime-types.php:40) in /home/sciptorg/public_html/blog/wp-includes/rest-api/class-wp-rest-server.php on line 1909

Warning: Cannot modify header information - headers already sent by (output started at /home/sciptorg/public_html/blog/wp-content/plugins/ap-extended-mime-types/ap-extended-mime-types.php:40) in /home/sciptorg/public_html/blog/wp-includes/rest-api/class-wp-rest-server.php on line 1909
{"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 – responsive redesign"},"content":{"rendered":"

\"\"<\/a>After 8 years the MOTIf website<\/a> was starting to show it’s age, visually at least.<\/p>\n

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 “About Us” page – the site has previously had\u00a0somewhat of an air of mystery behind it, for… reasons (as the kids say nowadays).<\/p>\n

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

Seeing as I’m working\u00a0voluntarily on the site now, my time is a scarce resource so I decided to stand on the giant’s shoulders of Twitter Bootstrap<\/a> – 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’s not even in RC yet, so I chose TBS3 which I’m relatively familiar with. (The only thing I don’t like about TBS is it comes with “style” which you have to get rid of, rather than it being a purely vanilla reset and grid framework.)<\/p>\n

One of the great tools we used at Deepend was BrowserSync<\/a>\u00a0which upgrades\u00a0you into the\u00a0robot octopus required for responsive testing on multiple devices. It automatically reloads the pages after you’ve edited the source, but also sync’s the navigation and even scrolling across all devices – it’s quite amazing to see it working.<\/p>\n