Though I had been selected with much fanfare on 10 march to deal with SKDRDP site, I couldn’t taste success for long as the site which I was inheriting was filled controls which I cound’t resurrect or uplift. The site was nightmare in adapting to newer tech like HTML 5. I had big gripe with the SKDRDP site of not being mobile and tablet friendly. The site was loading with a viewport of 968 pixels even on mobile devices. This fixed width reuqirement was causing lot of discomfort to mobile visitors leading up to higher bounce rate. Also there were none to brainstorm with and get ideas. I was all alone, and was just tinkering with old site for long. It was during a Codecademy course the things tipped. In that course I learned about making sites ‘responsive‘.

Since I couldn’t ask for help by others, I had to bring this innovative plan of Responsive Mobile Friendly site to fruition by myself. But there were lot of obstacles I had to face. My lack of knowledge was also limiting  me in this case.

Entry of Bootstrap: The tipping point of SKDRDP site

While I was doing a course on Codecademy about building a Airbnb Homepage, I came across a framework called Bootstrap. It was from this point the things tipped. Till I did the course, I was tinkering little bit about HTML to get whatever I wanted from SKDRDP site. After I become more comfortable with the Framework, I decided to dump the tinkering of oldsite and started to building it from scratch.

Since I was groomed up by using of IDE’s for writing softwares, I decided to use  Net Beans for building the site. I started working on the site in Beginning of October. Since my HTML skills was less and my motivation to sit for longer times building things was also less, I decided to build the site in 1 small steps at a time. The build goals were small and incremental. I didn’t even do the holistic thinking of of the site design, I just kept on reading about bootstrap framework, thinking about the features it had and building the site with the feature I read. Some of the features that are prominently there in the site are

  1. Navbar
  2. Responsive thumbnails
  3. Carousel
  4. Panels
  5. Nav Tabs
  6. Nav Pills
  7. List Groups
  8. Alerts
  9. Tables
  10. Buttons
  11. Glyphicons

While using above mentioned features, I was constantly contemplating what does the above thing do?, what role does it play?, how it will render on different devices?. This constant contemplation was the key thing that helped me get things done early. The most challenging part of building the site was, building the Home Page.

Designing the home page

home page

One of the most toughest thing in building SKDRDP site was the designing of Home page. Looking at the various options provided by bootstrap my head was reeling with blow up of options. As I was novice in the world of web development, I constantly referred to documentation while building the site. When I started working on the site, I first picked up header image, Did some little bit of editing in GIMP. I did the same with carousel images. So most of my initial development time was spend in picking up the images and retouching them. Once I had cache of images for the site, I dived into HTML world for building the site.

The first step of building the site was, creating a bare-bone HTML documents satisfying prerequisites of website.

<!DOCTYPE html>
<html lang="en">
<head>
<title>Home | SKDRDP&reg;</title>
<link rel="icon" href="/images/fav.ico">

<!-- Meta tags for setting view port and SEO -->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Comprehensive plan for the Sustainable Development.">
<meta name="keywords" content="SKDRDP,Rural Development,Sustainable Farming, Community Development, Micro Finance">

<!-- Loading linked CSS files -->
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css">
<link rel="stylesheet" type="text/css" href="css/docs.min.css">
<link rel="stylesheet" type="text/css" href="css/theme.css">
<link rel="stylesheet" type="text/css" href="css/carousel.css">
<style id="holderjs-style" type="text/css"></style>

<!-- Adjustments for buggy IE -->
<script src="js/ie-emulation-modes-warning.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="js/ie10-viewport-bug-workaround.js"></script>

<!-- Bootstrap core JavaScript -->
<!-- Placed at the end of the document so the pages load faster -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/docs.min.js"></script>
</body>
</html>

As shown in above code sample, I typed all the things and saved it as ‘index.html‘. Once the well formed code was saved I started working of visualizing features to be added to the code. The ‘viewport meta‘ tag was the most important one, it is that tag which adds responsiveness to webpage. In old SKDRDP site the width part was ‘width=968‘, which meant it would render the same way on mobile, tablet and desktop. Once this bare-bone HTML was created, I added content which would be common for all the page. That common content was Header Image and Navbar. Once this template was set, I saved a copy of it as a template for all other pages. This work of templating is a common practice for building the sites.

After templating I started to add features for the home page. The first was carousel. In the old site the upper carousal was broken and lower carousal didn’t provided much of traffic to pages. So in current SKDRDP site, I decided to build the carousel with embedded button so that traffic would convert with much ease. Unfortunately the Number wise most widely performed function on carousel is ‘clicks on next/previous buttons ‘ :p. As told before the carousel was put at the top of page to showcase various categories of activities done by SKDRDP.

The next section to be put up after carousal was 2 column of About Us and Basic Stats. The about us section was embedded with buttons for Pragathi Bandhu Groups, Community Development Division and About Us page. These 2 things were given buttons specifically because, these 2 things had great impact on our organization. Pragathi Bandhu SHG’s is the root of all the SKDRDP activities. CDP is main Vision of SKDRDP. Besides the about us section is Basic Stats section giving out all the basic and vital stats of our organization.

Below this is last part of home page, the Facebook activity feed, some downloads and contact details. All these were built with panel feature of bootstrap. It almost took a day to build each of all these features of home page.

Building other subsequent pages

The building of other pages of SKDRDP site was breeze as they were all content pages without any hi-fi layouting styles. For developing our management page the technique of thumbnails and thumbnail content was used. The alert for SKDRDP page was deliberately inserted to push some traffic to facebook. Apart from that alert bars were prominently placed to give some preference to SKDRDP Blogs. This above the fold alerts being blue color catch attention and divert some traffic to blogs. The downloads have been given a separate page with list groups to download the content. Since this page is not a high priority one it was kept hidden in About Us page. I call this technique of keeping lesser priority content as “out of sight and out of mind technique”. Earlier my classmate told me about duplication of contact section on old site, hence on new SKDRDP site I provided quick contact as a ‘panel’ on home page as well as contact details page for head office and all our project offices as separate menu items.

Though I consider my self as novice in web development, this activity of building the SKDRDP site helped me to learn considerably. Since there were none to help me with the basics, The foundation of learning things on internet got strengthened considerably. Its this e-learning thing that really made all the difference. So keep learning and keep growing.