0121 270 6505

→ Get in touch to discuss your project

RESULTS DRIVEN AGENCY


Bespoke Web Development Software Programming - So London Publishing

SO LONDON Publishing Content Management System Software (CMS) and Website Design - Technical Case Study

SynergiDesign has sound technical programming experience of developing large, complex and highly interactive web sites and web applications meeting clients' expectations and delivering on budget and within time constraints. We take the time to get to know and understand our clients' businesses as part of our approach to a project because we firmly believe that this is the key to successful partnership working and ultimate client satisfaction.

Software Synopsis

So London is a new, exclusive magazine aimed at the London market with a target audience of successful career orientated individuals enjoying the arts, restaurants and news, both locally and globally.

Timed to coincide with the launch of the printed magazine, So London publishers required a website development to replicate the printed version and additionally to give value added services via the website which would include property portfolio management, property buying services, local news and targetted advertising both locally and globally.

The Project Outcome

The result was a complex interactive SQL Server database driven website and extensive bespoke Content Management System (CMS) developed to the highest standards of .Net 2 Framework and CSS 2 within deadline and budget.

The Technical Requirement and Tight Timescale

The website version of the printed magazine with its supplemental services needed to be completed within a very short timescale and the fixed dead-line could not be extended. Planned future expansion of the site's services meant that such changes would need to be added seamlessly through an effective content management system in order to avoid unnecessary changes to the structure of the website and SQL Server database.

The Approach / Project Specification Development

Analysis was conducted from the project brief, discussions and other supporting materials provided by SoLondon and a techical specification produced. Specific time was allotted to devise a full Project Specification Document and Plan with accurate timings and costings.

The Content Management System (CMS) software section of the project was to be designed to enable SoLondon to take full control of managing the website without any need for specialist skills and in fact anyone could within a few minutes of looking at the system not only start to use it, but use it efficiently.

The initial Project Specification work and further consultation with SoLondon revealed that a phased approach was required to ensure the core of the project was completed for the publication dead-line.

Under pressure of the very tight schedule, everyone was aware that the most important thing to be developed was the CMS, as this was the core of SoLondon - getting the articles to view on the web site through the public web front end.

We were then immediately after launch to continue with Phase 2 of the web software development.

Database design and database implementation

As with most projects that are data driven, the most technically important element was the database. By designing the correct database structure it would ensure that data was not only accessed and stored efficiently, but also that it was scalable.

The SQL Server database was designed to conform to good Relational Database Management Techniques.  Data stored within the database was normalised to the 3rd form.

Scalable Database design

In using the relationship techniques enabled the database to be designed in such a manner that at a later date the database could be extended without having to change the existing database structure (scalable).

Database Performance

Normalising the data held within the database would ensure that duplicate information was not stored within the database thus ensuring the database performance will be enhanced.

Ease of Use (User Centric Design - UCD) for CMS and Public Website

Another important consideration with this project was ensuring that the CMS was easy to use as well as functionally rich. Great importance was attached to each section of the CMS (content management system) to ensure that when entering information or navigating around the system, tasks could be completed quickly and efficiently.

The layout of the content management Software for So London Publishing was designed so that the most important features were available no matter where you were within the system. It included:

  • showing which issue was currently the working issue (the issue that was being worked on, and was due to go live) and
  • showing articles that were in a draft status. It was essential to ensure when the working issue was made live, the articles with the draft status would not be made live. (Article status is discussed under the CMS article section);
  • being able to preview the working issue at any time, and finally
  • a list of the front page articles that would be shown when the issue went live. It was important to show this so that all the users entering the articles were aware of the front page (Home Page) articles that were going to be displayed.

The same principles were applied to the design of the public website.

The Main So London Website / Web Front-End Design Structure / Streamlined Update Management

The main website of So London consisted of only two web pages, although going through the site as a visitor the site would appear to be web page rich.

The two web pages were the Home page, and the Article page.

The Home page was primary; the first web page the user would visit when first entering the website, as with any website. However, the home page was then reused for each section of the website.

An example would be selecting the section 'features' from the menu when the features home page, would load with all the current articles that were features. Whereas this would look like a different page, it was in fact the exact same page. The way in which the sections were dealt with was by using zones that would describe which section would need to be displayed.

The advantage to this approach was that if a design change was required only two pages at most would have to be modified, thus making amendments manageable.

The Article page was used for displaying all the full articles. Once again visitors might think that each article was a different page, but this was not the case. Each article could look very different because a HTML editor was custom developed which allowed for lists, Images, Tables, Hyper Links etc, to be added to the article text. In doing this the user adding the article had control as to how the article was displayed.

Article Images / Auto-Resizing

Each magazine web article is displayed with an image. However, the main image that is displayed on the site can be one of three different sizes:

  • Main Image: Max Width of 220 x Maximum length of 300
  • Thumbnail 1: 104 x 104
  • Thumbnail 2: 47 X 47

Each magazine web article has only one image uploaded and so to create the thumbnail images, each on is resized and cropped "on the fly". This was achieved by using the GDI+ native to the Microsoft .NET framework. Using the GDI+ API, it was possible to be able to resize, render (so that the quality of the image is not lost) and then crop the top and bottom to fit square, and not distort the image.

By using this method, it is easier to manage image changes, as three different images do not need to be created only the one.

The Content Management System (CMS)

The CMS was the core of the So London project, without this updating the website would be a difficult task and require specialist skill to do so. The key areas of the CMS were:

CMS User Access / Security

Many different types of users were expected to use the content management system, with varying levels of computer skills. Therefore a user hierarchy was required to restrict access to certain sections of the CMS.

Restricting access to only certain levels of users was achieved by creating a security class that stores information regarding the user and their level of access. Methods within the class checked against the page security level, if the user did not have the right level of access, access was denied to the user.

Creating the security class ensured that if security procedures needed to be changed, the modification only had to be completed in one part of the system as opposed to having to search through pages and pages of code to make the change. Another benefit was that the security element of the system was kept away from the functionality of the system, and web developers did not need to be concerned with this area of the system.

Five different types of user were identified for use in the CMS.

Administrator (Editor)

Has responsibility for the CMS as a whole. They have access to all the functionality of the system. The Editor is the only user who can actually make the working copy live and setup new users.

Office Manager

The Office manager had access to content management system software; however, access was restricted to making the working copy live and the setting up of new users. Trying to access at this level of functionality would result in an 'access denied' message being displayed.

Commission Editor

The Commissioning Editor was able to undertake all of the magazine web article management. This was:

  • Creating an Article
  • Modifying an Article
  • Deleting a Working Issue Article (deleting a Live Article was restricted to Editor and Office Manager)
  • Article Ranking Management
  • Article assigning - Assigning an article to more than one issue.

Article Add

This particular user could only access the creating article functionality of the CMS. This particular user was envisaged to be So London Publishing staff that would be able to add articles in volume.

Web Preview Only

As suggested the only functionality available to this user was the ability to preview the current working issue. It was decided that users who were proof reading should not have the ability to modify articles, as too many different types of people would be able to perform this function.

Other Website Services Provided Include:

  • Web based classified advertisements with functionality in the content management system to enable scheduling of ads by the web administrator
  • Clear and logical website navigation system
  • Multi-criteria property search system
  • Property tracking

Magazine Issue Development and Control

Working issue / Set Global Working Issue

To enable the system to be user friendly the concept of the working issue was developed. This enabled the administrator to set the working issue in the system. The working issue would be the issue that is currently being added to the system ready for the publication of the next issue of the magazine.

When users were using the software system, the Working Issue was selected by default when entering articles. Although only a minor thing, this greatly enhanced the use of the system and the there was no need to select the issue required as it was already set and used through out the system.

Live Issue / Publish Issue

The Live issue was the issue that had been published to the live website. Access was restricted to those who had access as magazine web articles modified here would be reflected on the live website, instantly. Further discussion on user access can be found under CMS User Access section.

Preview

A preview section was added to the site which replicated the live website layout. This enabled the users of the CMS software system to view the Working Issue before making the Issue Live. The obvious benefit was that the article layout could be altered and any mistakes could be corrected before going live.

Articles and Database Normalisation

The articles section was the main section of the CMS. The user with the correct permissions could create, modify and delete articles as required.

An article could belong to more than one category (section) of the website. An index within the database was designed so that the article only existed once in the database, and then the unique key that identified the article was assigned to the different categories selected by the user when saved to the database. Using this method (normalisation) space allocated in the database was saved, but also if the article was changed, the change only needed to occur once and that would filter through to the other categories.

In order to enter the articles an HTML editor was developed giving the users complete freedom on how the article text was formatted, insert images, tables, lists, hyper links etc. It also enabled text to be pasted into the text box cutting down on the amount of data entry that was required.

Existing magazine web articles were also shown within the articles data entry screens. This enabled articles to be related not only in one issue but in any issue. Available related articles were selected from the list; once the article was saved, the related articles were also saved to the database. As part of the initial database design an index table [tblRelatedArticle] was designed to manage this relationship.

The tblRelatedArticle consisted of only two fields,

  • fkArticle
  • fkRelatedArticle

The fkArticle field was a reference to the unique key of the article added. fkRelatedArticle was the unique key of the related article. For each related article an entry would be made.

Example

New Article
Key: 23 Article Title: The Best of Art

Related Articles Selected
Key: 5 Article Title: The Tate Modern
Key: 17 Article Title: Boom and Bust of the Art world

The tblRelatedArticle would look like:

fkArticle fkRelatedArticle
23 5
23 17
5 23
5 17

You will notice that there are actually four entries, and this is due to the fact that the new article also has to be related to the related article.

Taking this approach saves space, ensures efficiency and makes the database much more compact this is once again an example of normalised form.

The HTML editor was implemented using IFRAMES and JavaScript, so that they HTML editor behaviour was client side, and did not need to make a server request until saving the article. The editor was also designed so that it could be resized on the page. This was most effective when entering captions for images, as only small text boxes were required.

A page ranking system was also developed so that when each article was created, it was assigned a ranking for each category the article was assigned too. The page ranking determined what order the articles were displayed on the main site. This gave complete control of the article display to So London Publishing users. The page ranking was hidden from the users when initially entering the article.

A Ranking management section was implemented into the CMS so that, at any point in the cycle of producing the new magazine web issue, the display of the articles were controlled, and not just shown in the order they were entered into the system.

Technologies Involved in the Software Development Project - So London Publishing Content Management System Development and website Design

IIS 7 running .NET Framework version 2.0

SQL Server 2005

Within the project a development decision was made not to use stored procedures. It was felt that the site was already very database intensive, as all the articles were database driven, but also every action that the CMS performed also had an impact on the database. For this reason the decision was made not to add additional stress to the server and diminish the visitors experience when visiting the site.

Database Design

Standard Relational Database techniques were used, to aid in the design of the database. The relationships of the database were all normalised to the 3rd form, as this is sufficient for a web based database. First normal form was not used on the web based project as this can often lead to issues accessing the data through the relationships. However, as internet connection speeds increase this will cease to be the case.

ASP.NET using:

Visual Basic .NET

Visual Basic .NET was the primary programming language used to develop the system.

C#

In order to better integrate into the .NET framework, C# was used to interface with GDI+ in order to enable image resizing "on the fly"

Code Behind

The code behind methodology was used extensively throughout the project. Using this methodology helped separate the functionality of the site from the design. This enhanced the project as it enabled both web designers and web developers to work on the same parts of the system without causing change conflicts.

Classes

Where appropriate classes were developed to keep the system more manageable, and hide functionality that web developers do not need to be concerned with. Each class was designed to contain the "business logic" of the system. Once again this aided in keeping the project manageable and less cluttered, but it also had the added advantage of being able to make modifications within the class and the changes would immediately filter through the system.

Event Driven

Unlike past Web technologies ASP.NET is completely event driven. Full advantage was taken of this fact, and many procedures and functions were created within the system and reused throughout.

Once again this made the project more manageable, but also helped to keep the development of the project structured, something that was seriously lacking in previous web technologies.

Master Pages

Master Pages were used within the CMS to enable a consistent interface for the user. The advantage to this is that with regard to the framework of the system if a change is required, it is more manageable as the modification only need to take place in once and the change then filters through the rest of the system.

JavaScript

JavaScript was used in creating the HTML editor and User validation

  • Due to the nature of the project, data input was the main stay of the project, and thus extensive validation was undertaken client side.
  • This approach had two advantages:
    1. Server load The load on the server was reduced, due to the fact validation was done client side, and the web server, would only be contacted to serve pages.
    2. Enabled the development of validation much constant throughout the CMS.

GDI+ (Graphic Device Interface Plus)

As part of the .NET framework all of windows native graphics system is exposed via API's to allow access to graphical functions. This part of the .NET framework was used exclusively for resizing image articles on the fly, as described in the main body above.

Find out more about our Web Application Bespoke Software Development

Find out more about our Web Applications

We are expert Web Software Developers:

About SynergiDesign

SynergiDesign is a qualified and experienced professional Birmingham based website and creative design agency which has created many stunning websites for a variety of businesses and organisations all over the UK.

SynergiDesign are experts in the web site and corporate design field. We offer a complete range of internet marketing and associated services: creating a brand and logo; design and print; website development; eCommerce; search engine optimisation (SEO); flash animation; video; website hosting and domain name management.

Cookies


Latest Projects



The Law Society

The Law SocietySynergiDesign won the contract and created the software (secure, interactive, web-standards compliant, meeting the highest of web accessibility W3CAAA standards, web software) to undertake this marketing activity and analyse its success.

"The level of activity generated by these campaigns met or exceeded our expectations."
John Rieger - The Law Society



"I am writing to congratulate you and your team for the first class sales brochure that you have produced for our latest development in Belgravia"
Rigby & Rigby


Presentation for an Automotive international trade show in Japan on behalf of the government agencies we designed an impactful presentation pulling together content from a variety of automotive manufacturers.

"Many thanks for your help on this project and turning it around within such a short timescale. I was most impressed with your level of expertise and service and will happily recommend you to other colleagues."
Ginny Truslove


Web Applications / Software Development



Content Management System – Web Application

CMS InterfaceSynergiDesign have created an innovative, versatile and highly functional website and CMS for SO LONDON Publishing. The website and bespoke content management software are designed to the highest .Net 2 and CSS programming standards which allow for online management of the magazine including:

  • magazine issue management
  • articles and article ranking
  • image management
  • image auto optimisation and resizing
  • complex banner advert management

Ecommerce Web Design

Diamond Dealer Direct is a long-established diamond merchant and manufacturer with a recently acquired retail outlet which now enables them to deal direct with the public giving access to one of the UK’s largest stock of internationally recognised certified diamonds from the top gemmology laboratories. A high end ecommerce shopping website and content management system with a sophisticated and customised pricing software system and also an extensive search engine campaign was developed for Diamond Dealer Direct.

Diamond Dealer Direct

Web design summary:

  • Web Design
  • Ecommerce shopping cart
  • Search Engine Optimisation
  • PPC campaign
  • Bespoke Content Management System
  • Reporting System
  • Order Management System
  • Registration System