The next step was writing the code. I knew that I wanted to make the site responsive. That is that the site changes its css or styling depending on the device that the user is viewing the site on.
As a developer I am fluent in several languages and can figure out the basics of ones that I may not be as savy with.
So Yes this was not ever going to be a Dreamweaver or Adobe Edge job. I want to know what is going on and where the action is happening.
The first step in my process was to make a pdf (or image copy) of my designs and set it to desktop 2 on my macbook pro.
Mac Only 10.8+ => hit F3 and move cursor to far right click "+" button
For development this has become a must have.
With that setup I opened my text editor, in this case it is Sublime Text. To make a site experience universal we have 2 options.
What are the differences? Basically a responsive site works off a single css file that scales content based on the screen size. An adaptive site on the other hand keeps several css sheets for different resolutions. Each sheet is utilised when its respective viewport is selected.
I decided to go with the responsive method as I have created other websites with this method in mind. That is not to say that an adaptive system would not have done as good a job. It is just a matter of taste. Click here to see some responsive frameworks I recommend.
To speed things up I used a responsive framework named "Element". It is just a grid css file. With the basic grid defined I could start customising and creating my design.
After coding out my design I had a few little tweaks that needed to be made. To show off my programming I employed a two stage design structure. The first of which is now completed. On one side of the page is a code editor viewer, where my code is displayed and on the other is a description of what the code does. Stage 2 will include a code highlighter that on mouseover or touch will change a graphic which illustrates what the code does.
I thought this was a very important addition that is not utilised on code portfolio sites like Github to-date. For the programmer, seeing clever well written code is enough but to business people who may not know what this jibber jabber does, a graphic is much more appealing.
To get the code editor working I used a javascript plugin called "prism.js". This is a syntax highligher. I later added a custom script to add the line numbers.
To accept touch events instead of mouse events I included the moderniser.js plugin in my code.
However possibly the most amazing use of javascript I came across was handlebars.js
This I used to make http calls to the behance API.
How is that useful?
Well as I mentioned in my first post a lot of my digital content is scattered across different services. Now on design principle it does not make sense downloading all this content and re-uploading it to a new host with my new site. It has a home. Why not utilise it?
Behance offer a very good api, where once you have signed up for a developer account and snatched your api key you can dibble dabble in some very cool projects.
If you have never tinkered with api's before, at first glance you may be put off, but believe me they are really awesome once you get the hang of it. CodeAcademy is a elearning site that I constantly sing praise for. The tutorials are well written, the interface is fresh and it is interactive. As a code learning experience it is a must and whatmore they have plenty of very nice API tutorials to get you going.