Frank Petronio

Frank Petronio FrankPetronio.com
Photographer and owner

Frank Petronio

Not only did Mihai solve my broken weblog emergency in less than 24 hours, he upgraded and improved the entire site's operation.

Home ›› Portfolio ›› The Educated Exec

The Educated Exec

The Educated Exec Community Website

Description:

Really Fine Media Limited wanted to develop together a community website for Executives meant to help them master business.


Project Details:

Philip Walker from Really Fine Media Limited asked me to work on a start-up initiative which to allow him to Educate Executives, while also allowing them to interact with the site and in between them.


Technical Specifications:

Really Fine Media Limited contracted with me all the phases that are necessary in order to develop a website from scratch. These phases are the following:

  • Interface Design (Artwork creation);
  • Slicing the Interface Design (Coding the Interface Design in Webpage format);
  • Integrating the Interface Design within Movable Type (Making the website dynamic and easy to manage).

Interface Design

Everything started with Phil answering me a few questions about things that he would like on his website interface, color scheme etc.

Based on these initial hints, I've briefed my designer and we've decided together the main structure and the lines to be followed during the artwork creation.

Soon after we came up with a few sketches so that the client could see how we are moving and could help us adjust the work as we proceed.

In about one week we've had the initial mockup finalized and we've continued to work on a couple of other page types, each with its own characteristics. In total we've produced and delivered 15 templates in graphical format with layers.

The interface design included also logo and favorite icon creation.

If you are very curious to take a look at it, before reading any further, you could do so from:
http://www.educated-exec.com/

Coding the Website Layout

A technical person knows that producing the interface design in graphical format is just a piece of the website development process. One cannot place a template in graphical format online and have them be seen in a browser. Each and every template should be coded in website format.

Some folks aren't bothering too much when coding the website layout in web page format. They either don't know much about quality standards, or they just ignore them, because it is easier and less time consuming to ignore certain quality assurance phases.

However, I pay attention to following the standards, as well as making sure the work I produce is cross platform compatibility. And when the coding in webpage format is done manually, it means that the coding produced is done with care and it is exactly as much as it is needed, no more (no garbage), but not also less than needed.

Since I'm also focused on the details, I spend a lot of time measuring things so that the end result looks exactly the same as the interface design. By exactly the same I mean each item is positioned in the exact same position as on the design template. Not one single pixel apart from top, right, bottom or left.

This introduction being made, you should know that it took me about 2 weeks to complete the work of converting the interface design into website layout using xhtml and css. For some functions I've used also javascript and php.

Movable Type Integration

Getting the website interface converted into web page format isn't enough to get a website that could be easily managed and which to allow visitors to interact with it, as well as in between them.

Therefore, once I've got the site ready in html format I've started to work on the movable type integration part, which I must confess that it is the one I like the most, because it is more complicated and I like being challenged.

My client wanted me to produce a website where people could register, fill out a profile page with some custom fields data, could edit their profile later, could sign in, could reset their password, or retrieve their forgotten password, could comment or reply to other users comments, could submit articles to a friend and could bookmark an article on facebook, twitter and linkedin.

Well, while writing the above list takes a minute, implementing them takes a good few days of full time work. If you add to this the fact that the site was supposed to be organized in two sections, one called News and the other Blog, some of the pages with different layout, the time involved on delivering this phase, increases.

Apart from the items listed above, there were some other tricky jobs such as custom image fields for different images slots (some of them based on a single custom field which produces thumbnails of various sizes), and the possibility to push certain articles to various places (for instance on the main page header part, on category pages header part, or on the sidebar).

Visitors are able to also rate articles, as well as rate comments or report abusive comments.

Each pageview is also recorded and available to the admin from the backend, as well as on the sidebar under the "Most Popular" widget for website visitors.

Another tricky requirement that my customer had, was to have the "most popular" sidebar widget list most popular articles based on an algorithm, rather than just on pageviews or just on average rating. My client wanted a combination in between these two variables, pageviews and average rating score.

This was something uncommon and required me quite a bit of time to implement. I would say that implementing it was quite an engineering job. But nothing is nicer than conquering new technology frontiers.

The site feeds have been submitted to feedburner, and the feedburned feeds made available on the site source code, as well as inside an RSS Feeds page.

Last, but not least, at the delivery I've submitted the site and its XML feed to Google, Bing and Yahoo.

My client would monetize this website by running ads, updating these ads being a very simple job.

Together with the site, I've provided my client a small 10 pages documentation explaining how the site is organized, where it is supposed, who is going to offer technical support, as well as how to manage various activities (i.e. posting articles to any of the two sections, activating custom fields, handling images, creating users, updating users permissions, managing ads etc.).

The educated-exec.com project is hosted with an important US-based hosting company though my business and the technical support is offered at no additional charge for both the server and the movable type publishing platform.

As a bonus for hosting through my business, the client benefits of a series of unique value added features such as weekly full website backups and more.

The website has been launched on July the 28th, 2011.

Screenshots

Take a look at the site from http://www.educated-exec.com/ or checkout the following screenshots.

Home Page

The Educated Exec Home Page

http://www.educated-exec.com/

News Main Page

The Educated Exec News Main Page

http://www.educated-exec.com/news/

News Individual Article Page

The Educated Exec News Individual Article Page

Blog Individual Article Page

The Educated Exec Blog Individual Article Page


Contracting:

Contracting from Really Fine Media Limited, Twickenham, Middlesex, United Kingdom, E.U.


Period:

May 2011 - July 2011