We were the first: Webpages using center and responsive layout
Hymanand Angara was expecting atleast an average physique person based on Richard’s words. I was sitting at front desk of Cepha office near RMV second stage, Bangalore. After 15–20 mins Mr. Hymanand came out of his office and looking at me he said “I was expecting a tall big guy as Richard mentioned that you could do so many things. You are a small guy. Very nice to meet you. Come lets go inside to talk more”. Mr. Hymanand and Senthil Kumar Mahalingam had already knew about my work and performance through Richard Selvaraj.
Richard was my team leader in Macmillan during the year 2004. He had already joined Cepha and had referred Murthy, Prabhu and me. All three of us were very desperate to acquire the skills and experience in Graphic design and printing to reach the heights in this industry. We were interviewed for Graphic artist position and expected to work on graphs and artworks for Elsevier / OUP books.
Hymanand was very casual with me and Senthil was much sophisticated in his words. Both spoke to me as if I was very close friend to them. I knew Macromedia Director, an animation and interactive application development software and it was mentioned in my CV. They asked me about my confidence level to work on this application and what amount of time do I need to be thorough with the application. I said them clearly that it was thought to me as a part of Arena Multimedia course. I would prefer to work on Illustrator for converting graphs etc, than multimedia. Also, I said I might need 3 to 6 months to brush up my knowledge in it. I again said that I do not like working on Macromedia director. After couple of discussions and after few days they offered me the Graphic artist role.
I & Murthy had to joined Cepha on March 26th 2005. On this day we were doing our joining formalities and for few minutes Senthil steps in to mention that Richard has already quit the job. I was surprised to hear this and even Richard kept it confidential with us so that Cepha gets us hired without any issues. I was happy that Murthy is with me and we both will be in same team to work on Graphs etc. After completing the formalities, it was said to me that I will be working in Multimedia team to convert books into CBTs (Computer based tutorials) and UI designing for all CBTs and WBTs (Web based tutorials) . With a bit of disappointment I accepted the change and met the multimedia team. Joy Neumarin and Ramkumar Radhakrishnan were the leaders of this team and Mr Senthil was our Technical Director. Prasad, Manish, Archana, Anila, and myself were part of this team until in few months Ramesh and Hariharan joined the team. I was given 3 months of time to brush up my skills on Director and start working on a project which was already a failure because the entire app was developed in Java and the client did not like it. The Atlas of Human Anatomy by Weir and Abraham’s was given to me to create a very appealing interactive, director + html based application. Without the knowledge of project or product management and 1 cent of C programming knowledge I started to work on it. It took me 4–5 months to complete the entire atlas and total package came around 850MB size. Ram and Prasad helped me with JS scripts in HTML and some Lingo help in Director. I was the Graphic guy with creative ideas and more keens on alignments etc. These were my core competency. Lingos/Behaviors & scripts never interested me. This project was a very good success and the books were sold with the DVD instead of CD. This encouraged me more personally and in my career development. I will always be thankful to Mr. Hymanand and Mr. Senthil for their trust on me.
Post this project, I was introduced to book dump projects for Elsevier / OUP (Oxford university press) books. The book contents were converted to HTML with JS coding using some macros. This work was done by Prasad and he was an expert. These book dumps will be converted to CD and sold along with the physical book.
As this CDs are inserted and played, it will execute a quick 2 seconds flash (.exe file) animation and with interactive buttons to close or open the pages using a browser. The layout of browser files/HTML files carried a left aligned layout in those days. Top part will have a banner and the left part will have a left panel with buttons and the middle right part will be loaded with the contents. We used frameset tag to create the skeleton of this layout.
I will not go deeper into frameset tag’s technical details here. It is there in many HTML tutorial websites. eg: w3schools.
If I compare it with responsive layouts designed using media queries, I feel frameset tag could be utilized better.
As shown here there were 3 parts we used to build using frameset tag.
- Topbanner Frame — This loads the top.html into the this frame.
- Left panel — This loads the button.html or left.html into this frame.
- Main panel — This loads the main contents to be displayed based on the interaction using the left buttons. The loading used to happen using the ID inside the main frame tag.
Even if the monitor or browser screen is large all the contents will always start from left. I have seen this in almost all the websites which were designed before 2006. I think even Yahoo had it’s content laid out in the above said manner. I am not sure if anyone had earlier thought about this.
I always wanted to change it for a comfortable and nicer look and feel. As I was a graphic designer and was designing ads using center aligning the contents. I liked to have these pages to aligned center to the screen. The earlier project which I had worked using director was a center screen layout but it was made using Macromedia Director stage settings. This time it is all HTML and I was new to HTML. I reached out to Prasad with this idea of changing the layout to center screen. With his strong knowledge and experience he tried many options and was almost successful. We also included Hari to help us making a bit responsive towards big screen. The synergy was such that we invented something big. Not sure about others, but for me it was like a revolutionary task and we were very much successful in achieving this. We got our entire layout to appear on center of the screen. Even if you are viewing it in a big screen monitor or wide monitor, the layout will not change. It will always be in the center of the screen as shown below.
In the above layout we kept 2 additional frames created within frame tag only for Blank frames. Also it had blank html page. We further utilized it for showing some design elements. and rest of the frames were stayed as it is but with fixed width. Further, we tried utilizing the 90% of the screen for entire content area. Left and right blank frame were kept 10% of the screen width.
This was achieved without any google help as google was not much helpful at that time. There were limited searches and also limited sharing of knowledge. Prasad, Hariharan, Joy and Ram were the best support I had to get this done and we changed the entire browser look and feel in our many deliverable. This was a greater achievement I had in my life. Later on, I started seeing center page layout implemented in many websites. I or even most of us are still not sure that if any one had already made this layout before us.
I had observed many websites were published using table layout. Every click of a button will load a new page each time. Whereas, using frameset we used to load only main panel content when you click the button. The top banner and left panel never gets reloaded. Frameset tag is still available in HTML 5 but some browsers are not supporting it anymore.
HTML was made for publishing content digitally to have a book like feeling. All the tags in HTML are based on pagination. It was never meant for designing. Eventually, designers, developers started using it for multiple purposes. Websites were also developed using Photoshop slicing tool which helps in generating HTML pages with images. Using Macromedia Flash people created interactive websites with many creative animations etc. As Google developed its search engine effectively, flash based websites were not much useful as the contents within the flash sites were not searchable.
I felt like sharing this because till date, I have never come across any website who used central layout before us.
Like and follow @ facebook — Bimba Creations and @ instagram — Bimba Creations
