Sometimes, getting away from it all makes the difference

It’s true what they say isn’t it?  Some time away can really help you overcome a tricky project.  I recently returned from an 10 day break during which for the most part I managed to get away from work; web design work in particular.

Most of my websites now are now built with mobile and tablet devices in mind. My hope that by the end of the year they all will be. 

However since it was created in 2012, the website for my longest serving client has been missing out on the benefits of a mobile optimised display. Not just from the point of view of web layouts. It had elements served by Adobe Flash which is unfortunately on the way out for animation and interactive multimedia development and was never supported in Apple products from day 1. 
One of the biggest jobs of this project was to take those out and put in replacements so that all devices would get the same experience. 

Even as late as Monday of this week I was sitting there scratching my head wondering how I was going to get this new HTML5 gallery to work.
For too long I tried with this
http://kenwheeler.github.io/slick/&n

The go-to Carousel solution.  The last Carousel I’d ever need.  And I really wanted to make it work. However unfortunately, the CSS I’d written to make the website responsive was just too complex, as was the JavaScript powering it, that it was next to impossible to taylor the code in a fashion that worked.  It’s my aim to make it work one day with another page but that’s another story.

So eventually, stripped “slick” out and worked on another solution. See below.

http://www.sitepoint.com/web-foundations/making-simple-image-slider-html-css-jquery/

It’s not as if this wasn’t all that dissimilar to “slick” either.  All you need  to get this goingis a simple HTML  structure of a div element with a unique identifer, another set of divs for your “slides”; some simple CSS styles and some jquery.  

It was very easily customisable. I just had to know which css selector to bind the funtionality to.  And before I knew it, I had a working functioning image gallery with buttons for “next” and “previous” slides that looked good in all screen widths and therefore device sizes.  Suddenly the end goal didn’t seem so far away anymore.

But there was still one more isntance of a gallery I needed.  In autoc.co.uk, a rolling web gallery of 3 images in one row was served by Flash. But as we’ve discussed this isn’t visible on apple devices. But not only this, such a system is not possible with a fixed width web asset.  The 3 images in one row structure had to go.
It would have been easier to sort this with the same image slider I found from SitePoint.  But try as I might, I couldn’t adapt it to apply a fade effect that matched the existing gallery with jQuery. 

So to finish off I went found this custom solution for a cross fading gallery.

http://snook.ca/archives/javascript/simplest-jquery-slideshow

Again, this works the way, with a basic HTML structure containing each slide image.

E.g.<div class=”fadein”>

  <img src=”http://farm3.static.flickr.com/2610/4148988872_990b6da667.jpg”&gt;

  <img src=”http://farm3.static.flickr.com/2597/4121218611_040cd7b3f2.jpg”&gt;

  <img src=”http://farm3.static.flickr.com/2531/4121218751_ac8bf49d5d.jpg”&gt;

</div>

It doesn’t get much simpler than that.  And now the new setup is almost ready to deploy.

This will be my last blog until after I move. I’m looking forward to the next few weeks when my new working environment comes together and I can get back working some exciting web projects in earnest. And the place I’m going to is very nice too 🙂

It’ll be sad to leave Teesdale where it all started for me but new beginnings and fun times are afoot 🙂

Advertisements

Update from Jonnie Grieve Digital Media

Things are a little bit chaotic at the moment.  Projects on the back burner on the count of that strange time of year we call “holiday season” where routine doesn’t have much meaning; as well as a house move to prepare for.

From the 9th of August I’ll be down-tooling to concentrate on the move, organise my new workspace and settle into my new home. Once the settling in period is done this will make for a very busy Autumn.

This is what I have to look forward to when normality returns.

I have a range of websites of different sizes on the way.  A website, potentially built with WordPress to promote the work of Tees Valley Cancer Research, a project I’m very much looking forward to helping out with.

Secondly I’ve agreed a deal update the website for the Elim Church, one of my current websites which needs a rebuild after a few years, I’m looking forward to seeing the design mockup and harnessing my CSS and HTML skills to build it up.  Watch out for the changes at www.elimchurchbishopauckland.co.uk.

Lastly I’ve been asked to redesign a website for an Autism Access advisor, in a similar mold to the Autism and Christianity website. Work has already behind the scenes on a design that will be built and finalised over the coming months. I’m also working hard at creating a mobile redesign for my first and longest serving client Auto Cleanse North East.

This is in addition to my continued question to better myself and my skills on Treehouse. My end goal is ultimately learn to develop websites on WordPress with my own themes through Treehouse’s WordPress Development track.  But there’s courses I’m looking to learn and refresh my working memory on including a wide range in JavaScript.

Database Foundations (SQL)
Build a Blog with Jekyll and GitHub Pages  (Web Design)
How the Internet Works  (Digital Literacy)

WordPress Development Track

CSS Basics
CSS Selectors
CSS to Sass
Animating SVG with CSS

JavaScript Basics
JavaScript Loops Arrays and Objects
Object Oriented JavaScript

Node.js Basics
Build a Simple Dynamic Site with Node.js
Express Basics
npm Basics

D3.js
Ember.js
Gulp Basics

jQuery Basics
using jQuery Plugins

AJAX Basics

Plenty to keep my occupied once I get back into action in earnest. So that’s your update on what’s happening with JGDM at the moment.  🙂