Inspecting the code

There are many components that make up the CMS. To begin with there is the fact that I am required to use two sites to edit the cms. One is the actual editable site that the content management system would edit and another is the cms itself. Both would require editing to be able to complete the task at hand. To begin with I needed to setups the files in the views and then add them to the routes file;Screen Shot 2017-05-24 at 16.56.43.jpg

The lines at the top such as ” resources :articles, only: [:index, :show]” are indicating that in the articles views folder there should be an index.html.erb and a show.html.erb – There is also another way to show this being used in the file structure here;

Screen Shot 2017-05-24 at 17.03.07.jpg

This method says “get ‘analysis’, to: ‘redesign#analysis” which says that the term analysis should get the file ‘analysis’ in the folder ‘redesign’.

It’s at this point I can introduce includes. These files that look normal apart from they use an underline to define them as an include like so (_menu.html.erb). This means that anything in this file can be included someshere else. For example, here is the application.html.erb that loads the layout of the pages;

Screen Shot 2017-05-24 at 18.08.18.jpg

On this page you will notice the line that says;

“<%= render’layouts/optimadmin/shared/menu’ %>”

This loads the content from the file _menu.html.erb which can be seen here;

Screen Shot 2017-05-24 at 18.12.15.jpg

This is a much more organised way to code a project as everything has it’s own section within a folder.

Another great point of completing this subject is the .sass features I am able to use. The use of variables within sass means that instead of having to put the hex colour code into the stylesheet everytime, I have a variables file register the hex code as a variable then just use the variable in the different files. For example below is the variables file I used.

Screen Shot 2017-05-24 at 18.15.55.jpg

Another important note was the layout structure. I was using Foundation version 4 which meant that in the html code in the class names of a div, I also had to include the screen size-column width that I wanted. This meant it looked something like this;

Screen Shot 2017-05-24 at 18.16.49.jpg

Coding the website

The build of the website was very difficult, as I was using a language that I knew very little about. I had started previously about 3 months before with absolutely no knowledge in the area and had started to learn ‘on the job’ at a web design agency. It was at this point that I decided it would be an excellent idea to try and code an entire content management system using this language.

The first stage was to set up my mac to allow for ruby to run. This required complex terminal commands to setup the rails server, then connect the files to a github account. This meant I could push my changes to a git server and never loose any of my files. It also meant I had a version control program taking care of the specific handling of correct code.Screen Shot 2017-05-24 at 14.06.59.jpg

To get the rails server setup, and actually built i needed to follow these commands. They meant i’d be able to setup the webiste alone without too much trouble. This meant the files were all stored online. It also meant that I could use Github to push the final version to the server.Screen Shot 2017-05-24 at 14.44.41.jpg

When editing the files I used Atom. The file structure is reasonably simple to understand, to begin with there is the App folder. This contains most of the important files. Assets contain all the files like stysheets, fonts, javascrips files, and actual files such as images shown on the site. Controllers define the pages that will be used in the site, pulling the data from the models, these pages will be pushed to the views.

Screen Shot 2017-05-24 at 16.16.21.jpg

Another very important part of the file structure is the config section as it contains the routes file;


Screen Shot 2017-05-24 at 16.36.45.jpg

The routes file contains all the different views folders, and what they contain such as index, show & new ect.

With this basic knowledge it is reasonably easy to go about setting up and editing a Ruby on Rails website.

Personal experiences with the current CMS

Due to the vast ammount of links on the left column, I have to scroll up and down a few times to find the relevant section I want to edit. A search function would be great to allow the user to find the section they need easily.

When developing, the ability to create multiple versions of an page, for example, multiple awards, would be great as it allows the developer to speed up the process of editing the website.

Uploading multiple images at once i s really important as it will also speed up the process of editing the website.


The personas for the content management system were valuable as it meant I as able to understand some of the weeknesses of the service My… provides.  I spoke with the manager of the business and also one of his staff who frequently uses the service. This is what they had to say about the service.EmployeeManager

CMS: Client Prototype Testing

The current CMS is available to view here;

I gave the mockup to one of the regular users and this is the screen recording of their usage;

The feedback was really usful and this is what I learnt;

  • The upload page needs an upload button
  • Menu size needs adjusting a little

Making the CMS as user friendly as possible.

The CMS should be simple and while researching I discovered the shop talk show (Episode 240: Rapidfire 76).They discuss some verty important points throughout their hour long discussion.

Firstly, people working at the company change, both the developers and the clients. It is important that both parties have the ability to add and remove users from it’s cms.

Also, most clients will have no technological ability whatsoever, therefore it is important that the users have the most simplistic interface possible. A great way to do this would to have a live edit mode that allows the user to browse the site and change content just by clicking on it.

Screen Shot 2016-11-03 at 13.17.55.png




240: Rapidfire 76

Optimised; The current CMS

The current Content Management System (CMS) looks like this the images below. The sections are categorised in a side navigation. This allows most of the content to to be restricted to the 960px view left aligned to the navigation, which in turn results in a large white space on the right hand side of the content.

The new cms needs to make full use of the space available to the user and make it as user friendly as possible. It needs to have;

  • As little propriety mark up as possible
  • Shallow learning curve
  • Simplicity and cleanliness
  • Speed – both client facing and admin end
  • Ability to quickly search for content from admin
  • Documentation

What I learnt from analysing the current CMS is the required content by the client and what the new CMS will need to be able to achieve.


Case studies







Team Members

Job Roles

Department Roles

Job Roles

Services (With categories)

Videos (With categories)

Articles (With categories)

Office  (With locations)



Image categories



View users

Add users

Delete users

Reset Password


View Header

View Sidebar

View Footer

Add link

Delete Links

Rearrange links



Live edit mode

Browse site

Edit content