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.

Project Map

The project map is an important stage within the development stage, it allows me to consider the main journeys that user should take. These are the main possible user journeys that can be taken;

project-map.png

USER 1

User 1 logs in to download the report on how well the website has performed. The user visits their website, and simply add ‘/admin’ to the end and login. This will land them on automatically in the live edit mode, they simply need to access the analytics page, find the date from a few different columns, then press the download button.

USER 2

User 2 has a problem with something they need to do the site and they are unsure of how to resolve their issue. Once they are already logged in, they go to the guides, look at or search the guides for the help they need. If there is no completed guide for their issue, the contact details for Optimised are displayed.

USER 3

User 3 logs in to change some content on the site. This is really easy and can be completed in two ways. The user visits their website, and simply add ‘/admin’ to the end and login. Once logged in the user will see their website in live edit mode, therefore they could simply browse the page till they reach the section they want to edit, edit it, and the publish it. Another way would be to use the search feature, type the name of the article, then press the edit button.

USER 4

User 4 logins in to upload an image. This is really simple. All the user needs to do is login, click images, drag and drop/ click to upload the file, then select the crops of the image for the user.

CMS: Content needed

It important to look at what the focus of the CMS should be, so following my research so far, I have spoken to the client and recieved the following feedback and adjustments.

KEY FEATURES

LIVE EDIT MODE

This allows the user to browse the site as they would do usually, but then click on sections to edit them. This works particularly well for users that aren’t technically minded. It will speed up the process of editing the content for the non technical minded users and speed up the process of transferring data from the existing site to the new one.

DUMMY CONTENT CREATION

This is a great way to fill a site with dummy content like lorem ipsum on the developers server as it allows the developer to be able to easily see what they are working on. It will speed up the process of creating pages and also make it look more realistic.

DEVELOPER & CUSTOMER MODES

This is an important feature as customers should not have access to certain elements of the CMS. For example, the dummy content creation would be useless to the customer, so therefore should not be available. By setting up this feature it means it can be developed with time and the differences will only become larger and more specific for each user.

FEATURES

MANAGING ASSETS

This allows the user to be able to see the content stored on their server, they should be able to find these files using different methods. Searching by file name, date added, file size are all great ways to enable the best of asset management.

HELP & SEARCH

This feature allows a user to be able to search the site for the most relevant thing to them. A single search bar where a user can type in something they are looking to change, the results will list relevant FAQ’s, Files, Page Edit and Page View (with Live Edit Mode available). This helps a user not familiar with the CMS to easily find the relevant content.

MANUAL BACKUPS

Ludo Studio keep daily backups of sites for a week which are available if something goes wrong with the site. Something this CMS should allow the user to do is create their own backups of a site so they have peace of mind that they can restore themselves should something go wrong.

SOCIAL MEDIA CONTROLS

Have the webpage link up to the CMS so that the user has the ability to add/remove social networks from their footer, this gives the user the flexibility to add their social feeds when they are ready, not just when the site is being built.

BASIC ANALYTICS

Ludo Studio produc analytics of the users site so that they can track the success of their online marketing strategy. This is something they simply email the user on a monthly basis. The cms can include the files for the past 12 months available to download, it can also show a small insight for the past 12 months next to the file so the customer can view their stats. This will improve the analytics service as it would make it much more easily understandable and managable.

SMALL FEATURES

While the small features, alone, are barely noticeable, combined, they make a significant dfference when it comes to the user experience. Below are small features that are overall feedback from users of the cms on how to improve it.

DATA ENTRY

When selecting a textbox it will paste the last item from the clipboard. This is useful when transferring data from one site to another.

Personas

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;

https://xd.adobe.com/view/63da3ffd-3f30-47b5-a331-917c16bbe4f2/screen/9b86018e-668f-4aaa-a574-e6d413cd5a39/Live-Edit-Mode

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