preloading all assets, please wait

eJournals Responsive Website Design/Development Show Menu
Back To Portfolio Show Overlay
home screens other pages and mobile navigation


The eJournals project was the first major project I worked on during my internship with eLearning, and was a primarily development-led project. The design itself was created by a member of the Marketing department, and it was my job to convert the design into a functional website.

As the site was to be front-facing, I enquired about whether the site would be responsive, and my team leaders mentioned that there were no requirements to make the site responsive, but I could add that to the project if I felt that it would be feasible. So for the development of the site, I used Skeleton as my responsive grid framework, as I had some experience working with it at the time.

There were a number of new techniques I had to learn during the development of this site. The most challenging of which was the create of the full-height sidebar navigation that would then turn into a sliding menu - to implement this, I had to create the sidebar using absolute positioning and container stretching using `top: 0` and `bottom: 0`, and then use left and right margins to control its position within the viewport. The content itself is a container positioned using automatic side margins, and offset to the right using the grid itself.

I also learned to use jQuery to create a series of nested accordions to show and hide the various chapter summaries, and have worked in my spare time to turn the design from a static site into a database-driven dynamic site, in order to iron out issues with the site styling when the layout is eventually turned into a Microsoft Sharepoint dynamic site.

Close Overlay