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

Advertisement

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

Key functions of good CMS’

There are some rerally important features that make a great CMS. Since the main issue is usability with the current cms, this is going top be the main focus of the redesign. Simple adjustments that will make a world of difference to the user.

The Editor

The content needs to be easily editable and this is one of the key features of every cms. Therefore a great question is whether to use a top-aligned editor or an inline editor? This is reasonably easy to answer, the main editor should be available at all times while the inline editor should be available in a live edit mode. A great inline editor is the medium editor (https://yabwe.github.io/medium-editor/).

 

Managing assets

The user must be able to see images via upload date, and also search for file names, they should be able to delete or upload images to the assets section of the site.

Help/Search

The help and search feature is an important one, it offers users with no technical know-how information regarding a specific topic they are stuck with. For example they could search questions into the guide to get specific help with something, they could search for the title of a page they are looking for so they can edit it quickly. This feature could save the user from wasting valuable time.

Customisation

Customisation of the site should vary depending on the users needs. The majority of the sites the client designs for are predesigned and should not allow for further editing. That said, should the company want to update the looks of their site they should be able to without having to pay the company more to do so.

Customisation on a smaller scale could be like allowing the user to update the colours used in the navigation bar or site wide fonts.

Versioning

Versioning is a great feature that allows the user to have the safety of knowing that if they accidentily content, they can revert to an older version of the site. This makes it easier for them to update the site for short periods of time with short promotions etc with the ability to easily revert.

Social Media Integration

Social media is such a large part of running as business today, it should be relevant for the organisation to have a hub of all the social media on the site. The site could pull the integration even more into the design so that when the site developer adds a story to the blog they have the option to easily share the story through their social networks.

Analytics

Analytics should offer the organisation an outlook at hit views so they can track success of their posts on the site, what sections are most important to their users. Allowing them to move forward with enhanced knowledge of their business.

CMS: Interviews

Interviewing took place during November 2016 and involved speaking with many different users of the website.

Users of the site internally at the company use the cms to set up the website with the content and functionality, there are three main users who do this. They all find the CMS reasonably easy to operate, but find it lacks functionality, and think added features such as a live edit mode, a cleaner user interface and inline editor would streamline the editing process of a website.

Users of the site externally, the clients, use the cms to edit smaller things on their site to keep up to date with their site reports which include data on how many people have visited their website over a period of time. Their biggest issues of the site were related to ease of use and overal functionality. They found that when they became stuck with an issue, they would often call the business, a great way around this would be to have a brilliant Q & A section built into the search feature. The search feature should also have the functionality of being able to find any page/image contained within the cms. These two features combined with the features mentioned by the developers would make the use of the cms much more simple and easy.

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

 

 

References:

240: Rapidfire 76